فرزان بالکانی

چطور نمودارها و قرعه‌کشی برنامه‌ی نود را طراحی کردیم؟

designing-charts-for-football-people

در دنیای طراحی وب، طراحی رابط کاربری یک وب‌سایتِ ساده ملاحظات خاص خودش را دارد. از چیدمان و چگونگی شکل نمایش عناصر گرفته تا طراحی واکنش‌گرا برای دستگاه‌های قابل حمل مانند تبلت و موبایل. حال آنکه طراحی یک وب‌اپلیکیشن، پیچیدگی این فرآیند را بیشتر کرده و ما را با چالشی جدید روبرو می‌کند که می‌توان آن را «طراحی برای نامعلوم‌ها» نامید. اینکه ما باید از بیشینه و کمینه‌ی اطلاعات آگاه باشیم (یا در بیشتر موارد حدس بزنیم) و برای چیدمان آنها، ساختاری پویا در نظر بگیریم. برای مثال، نام کاربران می‌تواند دو کاراکتر و یا ۴۰ کاراکتر باشد. با شناخت کلی از روحیات و چگونگی رفتار مخاطبانتان (تجربه کاربری)، می‌توانید تصمیم بگیرید که چطور حجم اطلاعات را کنترل کرده و نمایش دهید. شاید درنظر گرفتن ۲۰ کاراکتر برای نام این دسته‌ی به خصوص از مخاطبان کافی باشد.

اگر این مثال را در مقیاسی بزرگتر تصور کنیم، سیستمی شکل می‌گیرد که هر بخش از آن به شکلی پویا طراحی شده ‌است و اگر چاشنی واکنش‌گرا بودن را به آن اضافه کنید، سیستمی پویا و نسبی به وجود خواهد آمد.
برای مثال، علاوه بر اینکه تعداد کاراکترهای نام کاربران را محدود می‌کنید، چگونگی نمایش آنها با توجه به دستگاه‌های مختلف نیز باید تفاوت داشته باشد.

این چالش، یکی از زیباترین و جذاب‌ترین مباحث طراحی رابط/تجربه کاربری است که تنها تلفیقی از مهارت و تجربه می‌تواند به پیاده‌سازی آن به بهترین شکل بیانجامد.

حال وارد دنیای دیگری می‌شویم، تلویزیون…

در برنامه‌های تلویزیونی، عناصر گرافیکی بی‌شماری وجود دارند، از زیرنویس‌های تبلیغاتی گرفته تا ویدئو‌های پرجنب‌و‌جوش به عنوان میان‌برنامه، که همگی اکثرا با نرم‌افزارهای مختلف از پیش رندر می‌شوند (مانند افترافکت، پریمیر و…) و یا با استفاده از نرم‌افزارهای سفارشی یا خریداری شده به شکل همزمان روی تصویر پخش می‌شوند.

حتی گاهی با استفاده از نرم‌افزارهای ساده‌ای مانند پاورپوینت و کی‌نوت، بخش‌های جزئی با سرعت بیشتری تولید می‌شوند که ویرایش در آنها به سادگی انجام می‌شود. (مانند اسلاید‌های برنامه‌های آموزشی)

با تجربه‌ای که در ساخت نظرسنجی برنامه‌ی ماه‌ عسل داشتیم، تصمیم گرفتیم تا در بازطراحی نمودارها و قرعه‌کشی برنامه‌ی نود، این دو دنیا را با هم ترکیب کرده و به شکلی بی‌سابقه یک وب‌اپ (Web Application) تلویزیونی به وجود بیاوریم.

hmoon-screenshot

اما چرا؟ این کار چه مزیتی برای ما دارد؟

با این روش می‌توانیم در هر زمان و با هر فاصله‌‌ی مکانی از استودیو (یا هر کجای دیگر) تغییرات مورد نظر را اعمال کرده و پس از آن یک بار صفحه را بازآوری (Refresh) کنیم.
این روش نیاز به راه‌اندازی یا نصب ندارد. یک لپ‌تاپ با هر سیستم عامل و مرورگری که به اینترنت وصل است می‌تواند تمام این جلوه‌های تصویری را نمایش دهد.
باقی نکات مثبت را در مطلبی دیگر که به مسایل فنی‌ این پروژه می‌پردازد، خواهید خواند.

برای پیاده‌سازی و طراحی چنین پروژه‌ای نیاز به یک روال منظم و پلکانی است که در هر مرحله طراحی و برنامه‌نویسی به شکل موازی در کنار هم حرکت کنند تا این رابطه‌ی تنگاتنگ منجر به پیاده‌سازی عینی ایده‌های ذهنمان شود.

مرحله‌ی اول – ایده‌پردازی و بحث

برای تولید هر محصولی در سارینا، این مرحله با شرکت اعضای تیم مربوط به آن پروژه انجام می‌شود.
ما آزادانه ایده‌پردازی می‌کنیم و با بحث و به چالش کشیدن ایده‌هایمان به یک مفهوم کلی نزدیک می‌شویم.
سوالاتی مانند اینکه چه تصوری از محصول نهایی داریم؟ و با چه ابعادی آن را تصور می‌کنیم؟ چه ساختار نمایشی برای آن می‌تواند جذاب و کار‌آمد باشد؟ و …

مرحله‌ی دوم – تحقیق

با رسیدن به یک نمای کلی در ذهنمان، می‌توانیم کمی دقیق‌تر شده و به شکل اجرای آن از جنبه‌ی فنی و ظاهری فکر کنیم. تصور فعلی ما از ابعاد و چگونی یک پروژه به معنی پایان آن پروژه نیست، در واقع یک پروژه پایان شفافی ندارد و همیشه جای توسعه در آن وجود دارد. در نتیجه فناوری انتخابی ما باید پاسخگوی نیازهایی فراتر از دغدغه‌ی امروز ما باشد.

جدا از بحث فنی، ایده‌ی طراحی نیز نیاز به چکش‌کاری دارد، چرا که مخاطبان ما جمعیت قابل توجهی از مردم با تنوع بالایی از سطح فکری، اجتماعی، سنی و ساختار ذهنی هستند. مرز بین ایجاد یک جلوه‌ی بصری خیره‌کننده و در عین حال قابل درک بودن آن برای همه، بسیار باریک است. حفظ تعادل در چنین مساله‌ی مهمی، شاید ساده به نظر برسد، اما بسیار پیچیده است و نیاز به درک عمیقی از روحیات و اخلاق مخاطبان و کاربران دارد.

مرحله‌ی سوم – وایرفریم/استوری‌بورد

برای این پروژه مفهومی به نام پایستگی عناصر را مطرح کردیم که به معنی تبدیل عناصر به یکدیگر است. در واقع هر صحنه به صحنه‌ی بعد مورف می‌شود و عنصری با محو شدن از بین نخواهد رفت.

Live charts story board #1

مانند طراحی یک انیمیشن، ما در این مرحله به چگونگی طراحی المان‌های موجود هر صحنه و انیمیشن‌های مَکرو و مایکروی اعمال شده روی آنها تمرکز کرده و فریم‌های اصلی را طراحی می‌کنیم.

Live charts story board #2

ایده‌ی اولیه ما با تغییرات متعدد در مرحله‌ی قبل و این مرحله، به یک شکل تقریباً نهایی می‌رسد و کلیات آن تا انتهای پروژه ثابت خواهد ماند.

Lottery flow design prototype #1 Lottery flow design prototype #2 Lottery flow design prototype #3 Lottery flow design prototype #4 Lottery flow design prototype #5

مرحله‌ی چهارم – پیش‌نمایش

این مرحله شبیه به فرآیند Previs در فیلم‌سازی است. صحنه‌های مختلف را پس از اعمال تغییرات مجدد در مرحله‌ی قبل، به شکل کلی پیاده‌سازی می‌کنیم.

90v2_animation_test_1

در پروژه‌ی نود، ۱۴ صحنه‌ی کلی داشتیم که به سه بخش مجزا تقسیم می‌شوند. برای هر بخش، انیمیشن‌های مَکرو و مایکرو را طراحی و تولید کردیم تا هر فریم از آن مرجعی در هنگام پیاده‌سازی باشد.

Live charts animation test #2

مرحله‌ی پنجم – پیاده‌سازی داینامیک

تمامی انیمیشن‌ها باید با فناوری مورد استفاده‌ی ما از ابتدا پیاده‌سازی شوند، و هر بخش از این فرآیند چالش خاص خودش را دارد.

Lottery cards design samples

بی‌نقص بودن این فرآیند بسیار مهم است و کوچکترین اشکالی می‌تواند تمامی زحمات انجام شده در مراحل طراحی را از بین ببرد.

Lottery progress bar design samples

برای کارایی بهتر، قلم اختصاصی نود را ویرایش کردیم و با کمک رضا غفاری عزیز، طراح این تایپ‌فیس، نسخه‌های مختلفی را مورد آزمایش قرار دادیم.

90 Typeface characters

مرحله‌ی ششم – عیب‌یابی و تمیزکاری

پس از پایان مراحل پیاده‌سازی و تست و عیب‌یابی فنی، نیاز به عیب‌یابی بصری‌ است.

Lottery keypad design samples
تست با انواع داده‌های ممکن، بیشترین‌ها و کمترین‌ها، اندازه‌های مختلف نمایش (مانند SD و HD)، نمایش درست روی مرورگرهای مختلف، پیش‌بینی نوشته‌های بلند و کوتاه و …

مرحله‌ی هفتم – بهینه‌سازی

پالت رنگی ما در تلویزیون چقدر تغییر می‌کند؟ هنگام نمایش در انواع تلویزیون‌ها چه اتفاقی برای طراحی ما می‌افتد؟ عادل فردوسی‌پور هنگام لمس تلویزیون‌های داخل استدیو با چه مشکلاتی روبرو خواهد شد؟

90 Color pallet

تمامی این موارد با تعامل پی‌درپی و متعدد با تیم تلویزیونی برنامه‌ی نود، تولیدکنندگان پنل تاچ تلویزیون‌های داخل استودیو و عادل فردوسی‌پور به نقطه‌ی بهینه‌ی خود رسید.

و در نهایت، نتیجه‌ی تمامی این مراحل نمودارها و قرعه‌کشی برنامه نود است که هر دوشنبه شب می‌بینید.

Screenshot of final charts #1

 

Screenshot of final charts #2

 

طبیعی است که ساخت چنین پروژه‌ی بی‌سابقه‌ای چالش‌های بسیاری داشته باشد. رفع یک مشکل یا بهینه‌سازی آن گاهی بسیار پیچیده می‌شد ولی در نهایت روحیه‌ی کمال‌جویی ما به نتیجه می‌رسید و با راهکاری ایده‌ال آن را اصلاح می‌کردیم.

امیدواریم تا با تولید این پروژه‌ بتوانیم استانداردهای موجود در وب فارسی را کمی بالاتر ببریم و با در میان گذاشتن تجربیاتمان، تاثیری مثبت – هرچند کوچک – ایجاد کنیم.

از تمام کسانی که در انجام بهتر این پروژه به ما کمک کردند، تشکر می‌کنیم:
فرامرز صابری، رضا پیشکاری، شاهین احمدزاده، محمدحسین فرجادیان، کوروش اسدی، عزت اسدزاده، رضا غفاری (طراح قلم نود) و مهدی نادریان.

فرزان بالکانی

طراح رابط و تجربه کاربری (UI/UX)، توسعه دهنده وب و همچنین گرافیست سارینا. فرزان بالکانی از سال ۱۳۸۴ طراحی وب را در کنار طراحی گرافیک و ساخت انیمیشن شروع کرد.

  1. چهارشنبه، ۲۷ آبان ۱۳۹۴ عمادالدین
    لذتی بردیم. بسی شیرین و تشویق کناننده.
  2. چهارشنبه، ۲۷ آبان ۱۳۹۴ هیلدا نکومند
    همچون اجرای نمودارها مطلب آموزشی فوق سودمند و قابل استفاده است. خسته نباشید.
  3. جمعه، ۲۹ آبان ۱۳۹۴ سروش ایوبی
    بسیار عالی
  4. جمعه، ۶ آذر ۱۳۹۴ بیننده شما
    متاسفانه خروجی نمودار شما فقط برای فاصله های تصویر در حل لپتاپ و پی سی متناسب و قابل تشخیص هست و متون اون به هیچ وجه برای فاصله های در سطح فضای اتاق و تلویزیونی خوانا و به اندازه نیست. مثلا همین تصویر نظرسنجی اشتباهات داوری که این بالا گذاشتید روی صفحه تلویزیون چیزی در حد راه رفتن مورچه و فاجعه است!
    • فرزان بالکانی
      شنبه، ۷ آذر ۱۳۹۴ فرزان بالکانی
      ممنون از شما دوست ناشناس،
      خوانایی این نمودارها به عوامل مختلفی بستگی داره، از کیفیت پخش (SD یا HD) گرفته تا ادبیات گزینه‌ها ... تا کیفیت تلویزیون و فاصله‌ی شما از آن.
      ما همه‌ی مواردی که در کنترل ما بود را رعایت کردیم و صحبت شما در مورد خوانایی در «فقط» لپ‌تاپ را با کمال احترام قبول ندارم.
      به هر شکل ممنون از نظر شما ./
  5. چهارشنبه، ۲۵ آذر ۱۳۹۴ حسين رنجبر
    سلام فرزان جان !

    حال شما چطوره آقاي مهندس؟ ما رو كه فراموش نكردي !

    آفرين.خوشحال شدم شنيدم. موفق وسلامت باشي هميشه همكلاسي قديم !پيشرفته !

    http://bidarbaash.blogsky.com/
  6. سه شنبه، ۱۵ دی ۱۳۹۴ علی
    سلام. اول از همه باید بگم این نوع از اشتراک تجربیات کاری واقعا جای تبریک داره!برای من خواندن تک تک پست های وبلاگتون و تجربیاتتون لذت بخشه! چیزی که ما توی وب فارسی زیاد شاهدش نیستیم و همه فکر میکنند اگر تجربیات خودشون رو منتشر کنند بازار کار براشون از بین میره یا رقبا افزایش پیدا میکنند در حالی که توسعه وب در دنیا مدیون کسایی بوده که صادقانه و بی چشم داشت دانسته های خودشون رو به اشتراک میگذاشتند ! باز هم ممنون که به توسعه وب فارسی کمک میکنید!
    • فرزان بالکانی
      دوشنبه، ۵ بهمن ۱۳۹۴ فرزان بالکانی
      سلام، از لطف شما بسیار ممنونم.
      هدف ما همین هست، می‌خواهیم که این سنتِ استاد شاگردی در کسب دانش و مهارت را تغییر دهیم و برای این عمل،‌ اول از خودمان شروع کردیم.
      امیدوارم که باور کنیم انتقال دانش و تجربه باعث پیشرفت ما می‌شود.
  7. شنبه، ۵ تیر ۱۳۹۵ محسن برجی
    ممنون از به اشتراک گذاری تجربه‌تان.
    طراحی و ایده‌پردازی و اجرای عالی و در کنار آن، یک مشتری دقیق و سخت‌گیر دست به دست هم دادند و خروجی خوبی را رقم زدند.