یادگیری UI/UX با بازی و گیمیفیکیشن

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

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

UI/UX یا رابط کاربری و تجربه کاربری چیست؟

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

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

چطور یک طراح UI/UX شویم؟

برای تبدیل شدن به یک طراح UI/UX، باید مهارت‌های مختلفی را کسب یا در خود تقویت کنید. مهم‌ترین مهارت‌های لازم برای یک UI/UX دیزاینر عبارتند از:

• مهارت‌های نرم (شامل مهارت‌های ارتباطی، کار تیمی و …)
• آشنایی با اصول پایه طراحی گرافیک
• تسلط به فرایند طراحی محصول
• تسلط به اصول تجربه کاربری
• تسلط نسبی به زبان‌های HTML و CSS
• آشنایی با معماری اطلاعات
• خلاقیت
• توانایی ریسرچ و تحقیقات
• آشنا به فرایند تفکر طراحی
• توانایی ساخت پروتوتایپ و وایرفریم
• و …

نقشه راه یادگیری UI/UX

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

تفکر محصولی و تفکر طراحی

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

گذراندن دوره‌های طراحی محصول و مدیریت محصول، می‌تواند به شما در شکل‌گیری این تفکر و یادگیری سریع‌تری UI/UX کمک کند.

پژوهش طراحی و تحقیقات کاربر

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

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

تجربه کاربری

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

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

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

رابط کاربری

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

همچنین باید بتوانید طراحی خود را به شکلی مستند کنید، که استفاده از آن برای توسعه‌دهندگان راحت باشد (به اصطلاح باید Design Handoff را در تمام مراحل خود مدنظر داشته باشید.)

در این بخش باید طرح‌های مختلفی برای پلتفرم‌های مختلف (مانند موبایل، دسکتاپ و …) طراحی کنید و سپس کاربری و راحتی طراحی خود را به چالش بکشید.

ارتباطات و مهارت‌های نرم

درست است که این مرحله، به عنوان مرحله آخر یادگیری UI/UX مطرح شده است، اما واقعیت این است که شما باید از ابتدای مسیر خود، از مهارت‌های نرم استفاده کنید. از اولین مرحله که تعریف پروژه است، تا آخرین مرحله که طراحی نهایی می‌شود، شما با افراد زیادی سروکار دارید و باید بتوانید ارتباطات موثری را شکل بدهید.

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

۱۰ بازی برای یادگیری UI و UX

بعد از یادگیری مباحث پایه برای تبدیل شدن به یک طراح UI/UX، می‌توانید مهارت‌های خود را با کمک بازی‌های مختلف تقویت کنید. هر کدام از بازی‌هایی که برای یادگیری UI/UX وجود دارند، روی یک مهارت مختلف تمرکز دارند. برای مثال مهارت شناخت فونت‌های مختلف، ساخت تصاویر وکتور، تشخیص فاصله صحیح و مناسب بین حروف، تشخیص رنگ و … از مهارت‌هایی هستند که می‌توانید با این بازی‌ها تقویت کنید. در ادامه ۱۰ بازی پرطرفدار را برای تقویت مهارت طراحی رابط کاربری و تجربه کاربری معرفی می‌کنیم.

KernType

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

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

Color

اگر در تشخیص رنگ و سایه‌ها مشکل دارید، کالر (Color) برای شما ساخته شده است. کالر یک بازی تشخیص و تطبیق رنگ است که برای تقویت توانایی تشخیص رنگ‌ها و دانش تئوری رنگ، ساخته شده است. در مراحل ابتدایی بازی باید در زمان مشخص، باید رنگ (Hue) داده شده را در چرخه رنگ محدود پیدا کنید. هرچه در مراحل جلو بروید، چرخه رنگ کامل‌تر و سوالات هم پیچیده‌تر می‌شود.

۶ مرحله این بازی به ترتیب عبارتند از:

• Hue (رنگ)
• Saturation (اشباع)
• Complementary (رنگ‌های مکمل)
• Analogous (رنگ‌های مشابه)
• Triadic (رنگ‌های سه‌گانه)
• Tetradic (رنگ‌های چهارگانه)

Can’t Unsee

یکی از محبوب‌ترین بازی‌ها برای یادگیری UI/UX با تمرکز بیشتر روی تجربه کاربری، بازی Can’t Unsee است. تمام کاری که باید در این بازی انجام دهید، انتخاب گزینه صحیح با UX بهتر، از بین دو گزینه است. هدف این بازی آشنا کردن طراحان UI/UX، با جزئیات کوچکی است که می‌تواند طرح آن‌ها را از یک طرح معمولی، به یک طرح منحصر به فرد تبدیل کند. هرچه در این بازی پیش بروید، جزئیات بیشتر می‌شوند و تکرار این بازی، باعث می‌شود تا در آینده این جزئیات کوچک از چشمتان دور نماند.

The Boolean Game

اگر با نرم‌افزارهای طراحی وکتور مانند Adobe XD یا Figma کار کرده باشید، حتما عملگرهای بولی یا Boolean operators را دیده‌اید. عملیات بولی به حالتی گفته می‌شود که شما با ترکیب چند شکل مختلف و اعمال عملگرهای بولی (جمع، تفریق، اشتراک و استثنا)، به اشکال جدید می‌رسید.

یکی از راه‌های ساختن اشکال خلاقانه، استفاده از عملیات بولی است. بازی بولی (The Boolean Game) برای تقویت این مهارت در طراحان UI/UX ایجاد شده است. در ابتدای بازی شما یک طرح کلی (Outline) از طرح نهایی را به همراه چندین المان ساده دارید. هدف شما در این بازی، رسیدن به یک طرح نهایی با استفاده از عملگرهای بولی چهارگانه (Union و Subtract و Intersect و Exclude) است که در پایین صفحه وجود دارند. این بازی برای تقویت مهارت‌های طراحی وکتور و یادگیری UI/UX با ابزارهای مختلف ساخته شده است.

It’s Centred That

هم‌ترازی (Alignment) یکی از اصول اولیه‌ایست که طراحان رابط کاربری و تجربه کاربری باید به آن مسلط باشند. تراز بودن المان‌های استفاده شده در یک طراحی، باعث تقویت ترکیب بصری، قابلیت استفاده و خوانایی می‌شود. بازی It’s Centred That، یک بازی ایده‌آل برای تقویت مهارت تراز کردن المان‌ها است.

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

Shape Type

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

بازی Shape Type به شما کمک می‌کند تا با کمک ابزار Pen و Anchor Point ها، حروف داده شده را به حالت استاندارد خود در بیاورید. در این بازی هم می‌توانید شکل استاندارد حروف را با پاسخ خود مقایسه کنید و در نهایت با ثبت پاسخ، امتیاز می‌گیرید. این بازی برای آشنایی با فرم استاندارد فونت‌های مختلف هم مناسب است.

The Bézier Game

مشابه بازی Shape Type، بازی The Bézier Game هم روی کار با ابزار Pen و استفاده از Anchor Point ها تمرکز دارد. در این بازی باید بتوانید با الصاق نقاط مختلف بهم و تنظیم مناسب Anchor Point ها، خطوط را به شکلی که می‌خواهید در بیاورید.

Flexbox Froggy

یکی از مهارت‌هایی که برای طراحان UI/UX واجب است، آشنایی با حداقل‌های برنامه‌نویسی است. به عبارتی شما به عنوان یک طراح رابط کاربری و تجربه کاربری، باید تا حد خوبی با زبان‌های HTML و CSS آشنا باشید. یکی از بازی‌های یادگیری UI/UX که به شما در تقویت این مهارت کمک می‌کند، بازی Flexbox Froggy است.

این بازی به شما کمک می کند تا کدهای ساده CSS Flexbox بنویسید. شما باید با نوشتن کدهای CSS به قورباغه کمک کنید تا روی برگ نیلوفر همرنگ خود بنشیند. در تمام مراحل یک راهنما قبل از شروع بازی نشان داده می‌شود که می‌توانید از آن برای ساخت کدها استفاده کنید.

Designercize

اگر به دنبال تقویت مهارت‌های مصاحبه خود هستید، Designercize یک انتخاب مناسب است. در بعضی از مصاحبه‌ها، ممکن است با چالش وایت‌برد (whiteboard challenge) مواجه شوید. در این چالش شما باید در یک زمان محدود، مراحلی را که برای طراحی طی می‌کنید روی تخته وایت‌برد پیاده‌سازی کنید.

Designercize به شما این امکان را می‌دهد تا از قبل، چندین بار انواع مصاحبه را تمرین کنید. سوالات این بازی ۳ درجه ساده، متوسط و سخت دارد و شما باید در مدت زمانی که بازی مشخص می‌کند، خود را به چالش بکشید و به نیازمندی‌های خواسته شده در سوال برسید.

BetterWebType Triangle

برای طراحانی که به دنبال یادگیری UI/UX و به ویژه، تایپوگرافی هستند، سایت betterwebtype یک انتخاب مناسب است. در این سایت شما می‌توانید انواع بازی‌های مختلف را برای تقویت مهارت‌های طراحی خود پیدا کنید و که معروف‌ترین آن‌ها، بازی «The equilateral triangle of a perfect paragraph» است.

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

جمع‌بندی

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

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