اولین قدم‌های من در مسیر تبدیل شدن به طراح رابط کاربری (UI)

روایتی از طراحی رابط کاربری یک اپلیکیشن آموزشی سرگرم‌کننده برای کودکان و والدین.

ایده (Idea)

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

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

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

زبان بصری (Visual Language)

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

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

از سخنرانی‌های مربوط به نظریه رنگ الهام گرفتم، قسمت‌هایی از مجموعه نتفلیکس به نام «هنر طراحی» (The Art of Design) را تماشا کردم و کتاب‌هایی خواندم. تمام این کارها برایم لذت‌بخش بود و تقریبا احساس می‌کردم بیش‌ازحد به خودم خوش می‌گذرانم، بااین‌حال، کاملا توجیه‌پذیر بود، زیرا بخش مهمی از مسیر من برای درک و تحقق طراحی رابط کاربری را تشکیل می‌داد.

مصرف‌کنندگان ظرف ۹۰ ثانیه پس از نخستین مشاهده، به‌صورت ناخودآگاه درباره یک شخص، محیط یا محصول قضاوت می‌کنند و بین ۶۲ تا ۹۰ درصد این ارزیابی صرفاً بر اساس رنگ انجام می‌شود.

— موسسه تحقیقات رنگ CCICOLOR

ایده‌پردازی و طوفان فکری (Brainstorming)

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

حالا که دانش تازه‌ای درباره نظریه زبان بصری به دست آورده بودم، مشتاق بودم از آن استفاده کنم! شروع کردم به آزمایش مفاهیم نظریه رنگ، ترکیب رنگ‌های مختلف با یکدیگر و بررسی آن‌ها با استفاده از چرخه رنگ.

ترکیب‌های رنگی متفاوتی را امتحان کردم، از جمله هارمونی‌های تک‌رنگ (Monochromatic)، مکمل (Complementary)، مشابه (Analogous)، مکمل شکسته (Split Complementary) و سه‌گانه (Triadic).

با وجود اینکه از این فرایند لذت می‌بردم، همه‌چیز کمی تصادفی به نظر می‌رسید! بنابراین تصمیم گرفتم تمرکز بیشتری ایجاد کنم.

کار را با استفاده از مهارتی آغاز کردم که در طول فرایند UX به دست آورده بودم: نقشه‌برداری ذهنی (Mind Mapping).

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

کاربرگ آغاز طراحی (Design Inception Worksheet)

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

در نتیجه، تمرکز کافی برای تهیه یک کاربرگ آغاز طراحی به دست آوردم، سندی که ایده‌های بصری اولیه‌ام را با استفاده از نتایج طوفان فکری و ایده‌پردازی ثبت می‌کرد.

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

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

بنابراین، کاربرگ آغاز طراحی دومی را به‌طور اختصاصی برای والدین تهیه کردم. در این نسخه، رنگ و حرکت زبان بصری را تغییر دادم و در عین حال، حال‌وهوایی را که این عناصر ایجاد می‌کردند، تنظیم کردم.

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

مودبورد (Mood Board)

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

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

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

برای هر دو جریان کار والدین و کودکان، یک مودبورد جداگانه ساختم. هر مودبورد به‌واسطه استفاده از رنگ‌ها و تصاویر، احساس و حال‌وهوای کاملا متفاوتی را منتقل می‌کرد.

استایل‌تایل (Style Tile)

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

یک استایل‌تایل باید شامل موارد زیر باشد:

• پالت رنگی
• تایپوگرافی
• دکمه‌ها
• بافت‌ها
• لوگو، در صورت وجود

بار دیگر، دو استایل‌تایل ایجاد کردم، یکی برای هر جریان کار. هر دو از قالب، تایپوگرافی و دکمه‌های یکسانی پیروی می‌کردند تا هماهنگی و یکپارچگی حفظ شود.

می‌خواستم قالب استایل‌تایل‌ها همان حس تمیز و ساده اپلیکیشن را داشته باشد تا حال‌وهوای مناسب و احساس فضای موردنظر را منتقل کند.

در رویداد حلقه نویسندگان شرکت کنید.

پالت رنگی را از مودبوردها استخراج کردم و ترکیب‌های مختلف را آزمایش کردم. به من پیشنهاد شد که از حالت رنگی CMYK به RGB تغییر بدهم، پالت رنگ را از Adobe Illustrator به Figma منتقل کنم و سپس سطح رنگ‌ها را افزایش دهم.

نتیجه فوق‌العاده بود، رنگ‌ها درخشان‌تر و زنده‌تر شدند!

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

دکمه‌ها ساده طراحی شدند و رنگ‌ها و فونت را به نمایش می‌گذاشتند.

می‌خواستم آیکون‌های اختصاصی خودم را طراحی کنم، حتی اگر تنها دلیلش این بود که شاید دیگر فرصتی برای انجام چنین کاری پیدا نکنم!

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

آزمایش‌های مختلفی انجام دادم و در نهایت به آیکون «خانه» زیر رسیدم.

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

در نهایت، بافت را طراحی کردم.

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

از زمانی که مسیر تبدیل شدن به طراح تجربه و رابط کاربری (UX/UI) را آغاز کرده بودم، تلاش می‌کردم با آغوش باز به استقبال تجربه‌های جدید بروم و از روش‌های قبلی فاصله بگیرم.

اما بعد کسی به من یادآوری کرد که اگر نقطه قوتی دارید، باید از آن استفاده کنید.

بنابراین، همانند کاری که در تهیه مودبوردها انجام داده بودم، به سراغ چیزی رفتم که می‌شناختم. این بار برای استایل‌تایل‌هایم طرح‌های چاپی طراحی کردم.

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

اپلیکیشن هنوز نامی نداشت و طبیعتا لوگویی هم برای آن طراحی نشده بود!

در تمام مدت فرایند UX، عمدا از عنوان «بازی آموزشی سرگرم‌کننده» برای اشاره به اپلیکیشن استفاده کرده بودم. دلیل این کار آگاهانه بود، احساس می‌کردم انتخاب یک نام، تا حدی شخصیت محصول را از همان ابتدا مشخص می‌کند و ممکن است ناخواسته بر تصمیم‌های طراحی من تاثیر بگذارد.

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

بنابراین، درباره روش انتخاب و ساخت یک نام تحقیق کردم. سپس ایده‌پردازی را آغاز کردم و در نهایت به نام Lurn Lab رسیدم.

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

ماکاپ ایستا (Static Mock Up)

قواعد تعیین‌شده در استایل‌تایل را روی وایرفریم با وفاداری متوسط (Mid-Fidelity Wireframe) که پیش‌تر برای فرایند UX در Figma ساخته بودم، پیاده‌سازی کردم.

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

به این ترتیب، رابط کاربری‌ای ساختم که از نظم و سلسله‌مراتب مشخصی برخوردار بود.

آزمایش (Testing)

یک جلسه آزمایش شهودی یا آزمایش اولیه (Gut Testing) با حضور سه کودک که کاربران بالقوه اپلیکیشن بودند، برگزار کردم.

تصاویر ماکاپ ایستای جریان کار کودک را که در بالا نشان داده شده‌اند، به هر کودک نمایش دادم و فهرستی از کلمات را در اختیارشان گذاشتم.

این کلمات ترکیبی از واژه‌هایی بودند که از کاربرگ آغاز طراحی انتخاب کرده بودم و کلماتی کاملا نامرتبط با آن‌ها.

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

هر سه کودک بدون اختلاف، پنج کلمه یکسان را انتخاب کردند:

• پرجنب‌وجوش و رنگارنگ (Vibrant)
• جسورانه (Bold)
• پرانرژی (Energetic)
• هیجان‌انگیز (Exciting)
• شاد و سرزنده (Cheerful)

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

راهنمای سبک (Style Guide)

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

راهنمای سبک سندی پویا است که به لطف مفهوم طراحی اتمی، می‌توان آن را به‌سادگی به‌روزرسانی کرد. این ویژگی به حفظ پیوستگی و یکپارچگی در سراسر طراحی محصول کمک می‌کند.

نتیجه‌گیری (Conclusion)

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

اما با پیشرفت مسیرم در طراحی رابط کاربری، از شباهت‌های میان زندگی حرفه‌ای گذشته‌ام در حوزه طراحی و مسیر جدیدم شگفت‌زده شدم.

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

خودت باش، چون بقیه قبلا انتخاب شده‌اند. — اسکار وایلد

و این هم از اولین سفر من به دنیای طراحی رابط کاربری (UI)، به امید سفرهای بسیار بیشتری در این مسیر!