UI چیست؟

UI  برگرفته از عبارت User Interface است. در ابتدا با تعریف Interface شروع می کنیم. Interface یا رابط یک مکانسیم برای تعامل بین دو سیستم است. پس User Interface یک Interface است که برای ساده تر شدن تعاملات بین سیستم و کاربر طراحی شده است.

در کل دو نوع User Interface وجود دارد:

• Command Line Interface) CLI) یا رابط خط فرمان که فقط متنی است و عمدتاً برنامه‌نویس‌ها از آن استفاده می‌کنند؛
• Graphical User Interface) GUI) یا رابط کاربری گرافیکی که ما در این مطلب آن را معرفی خواهیم کرد. مواردی مانند تصاویر، پنجره‌ها، آیکن‌ها و منوها در زیر این عنوان جای می‌گیرند.

در این مطلب به GUI (آنچه که کاربر نهایی مشاهده می‌کند سر و کار دارد) می پردازیم.

طراحی رابط کاربری یا UI Design چیست؟

UI Design یا طراحی رابط کاربری، درمورد طراحی UI برای دستگاه‌ها، نرم‌افزارها و همچنین محیط وب بحث میکند و بر تناسب و زیبایی تمرکز دارد؛ با این هدف که امکان استفاده بیشتر و بهتری از طرح و محتوای مورد نظر فراهم شود و باعث ایجاد تجربه کاربری بهتری برای مخاطب می شود. طراحی UI بخشی از مبحث گسترده تری با نام طراحی (UX (User Experience یا تجربه کاربری است که بیشتر بر روی رنگ‌ها و تایپوگرافی یا طرح نوشته‌ها تمرکز دارد. طراحی UI معمولاً ترکیبی از موارد زیر است:

• طرح بصری؛ یعنی حسی که قصد داریم آن را به کاربر انتقال دهیم و
• طراحی تعامل؛ یعنی نحوه عملکرد طرح ما و تأثیر آن بر تعامل مخاطب با طرح و محتوا.

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

علت نیاز ما به UI چیست؟

کاملاً واضح است هر چیزی که به مخاطب خود ارائه می‌کنید باید از لحاظ بصری جذاب و زیبا باشد و به مذاق وی خوش بیاید. یک رابط کاربری مناسب یک زبان بصری واحد به وجود می‌آورد که به بهبود تعامل کاربران با محصول شما کمک خواهد کرد. در واقع، UI یا رابط کاربری فصل مشترک طراحی تعامل (Interaction Design)،  طراحی بصری (Visual Design) و معماری اطلاعات (Information Architecture) به شمار می‌رود و خواه ناخواه همه ابعاد آنچه که به مخاطب خود عرضه می‌کنید را تحت تأثیر قرار خواهد داد. در غیاب یک UI مناسب، تعامل کاربر به خوبی انجام نمی‌شود پس نتایج ایده آلی بدست نمی آوریم.

طراحی UI چه بخش‌هایی راشامل می شود؟

ایجاد یک طرح مناسب برای UI بدون استفاده از همه تکنیک‌های کاربردی حوزه‌های زیر ممکن نیست :

• طراحی بصری: طراحی بصری یا Visual Design، با شکل دادن و بهبود تجربه کاربری به کمک تصاویر، نقش و نگارها، تایپوگرافی، استفاده از فضاهای خالی، طرح بندی و رنگ است. با استفاده از تکنیک‌های طراحی بصری می‌توانید محصول نهایی را بر اساس اصول زیبایی شناختی طراحی کنید و به کمک قواعد شناخته شده‌ای که امتحان خود را پس داده‌اند از طرح‌های کاربر محور استفاده نمایید.
• رنگ‌ها: به دلیل تداعیات ناخودآگاه ذهنی حاصل از استفاده از رنگ‌های مختلف و تأثیر آن‌ها بر عواطف و معنایی که به مخاطب منتقل می‌شود، استفاده از رنگ‌های مناسب برای هر پروژه‌ای ضروری است . به علاوه، نکته مهم دیگری که باید به آن توجه داشت استفاده هوشمندانه از رنگ‌های برند با توجه به طرح و پیام مورد نظر است.
• طراحی گرافیک: Graphic Design یا طراحی گرافیک مسئول ترکیب تصاویر، تایپوگرافی یا آیتم‌های گرافیکی متحرک یا موشن گرافیک (Motion Graphic) به گونه‌ای است که بتوانند مخاطب یا مشتری را تحت تأثیر قرار بدهند. طراحی گرافیک به دنبال کمال پیکسلی (Pixel Perfection) است؛ یعنی تمام نقاط، فضاهای خالی و رنگ‌ها باید با اصول حاکم بر برند هماهنگ باشند. توجه داشته باشید که طراحی گرافیک یک حوزه تخصصی است و خلق طرح‌های خارق العاده مستلزم استادی و مهارت حرفه‌ای و همچنین تجربه کافی خواهد بود. ضمناً اغلب نمی‌توان مرز واضحی را در بین طراحی گرافیک و طراحی بصری ترسیم کرد.
• موکاپ (Mockup): موکاپ یک مدل کوچک‌تر یا هم اندازه با طرح اصلی است که برای پیش نمایش، ارزیابی طراحی، تبلیغ یا اهداف دیگر تهیه می‌شود. منظور از طراحی موکاپ، نمایش ظاهر نهایی طرح با جزئیات بصری آن، مانند رنگ‌ها و تایپوگرافی است. غالباً موکاپ با Wireframe و پروتوتایپ اشتباه گرفته می‌شود، اما هر یک از این موارد در واقع یک مرحله متفاوت از فرآیند طراحی محسوب می‌شوند. Wireframe یا شَمای کلی یک روش نه چندان دقیق برای ارائه طرح است که ساختار و طرح کلی محصول نهایی را نشان می‌دهد. موکاپ برخلاف Wireframe بیشتر به یک پروتوتایپ یا پیش نمونه از محصول نهایی شبیه است، اما امکان تعامل با آن وجود ندارد. با طراحی موکاپ می‌توان طرح واضح‌تری از طراحی نهایی UI در ذهن ایجاد کرد و گزینه‌های متنوع‌تر و متناسب‌تری را برای سازمان‌دهی محتوا مد نظر قرار داد.
• تایپوگرافی: تایپوگرافی یکی از ستون‌های اصلی بیشتر انواع مختلف طراحی به شمار می‌رود. تایپوگرافی، هنر و دانش کاربرد و سازمان‌دهی فونت‌هاست و هدف آن ارائه متن‌های زیبا و خوانا به خواننده است. در واقع، تایپوگرافی یک لایه دیگر از معنا و مفهوم را به متن شما اضافه می‌کند. یک تایپوگرافی خوب باید:

o در صفحات نمایش مختلف با هر ابعاد و اندازه‌ای عملکرد مناسبی داشته باشد؛

o حروف استفاده شده در آن به راحتی قابل تمیز باشند؛

o به تناسب سلسله مراتبی محتوا توجه شده باشد تا آنچه که ارائه می‌شود قابل هضم تر شود.

طراحی UI مدرن و امروزی علاوه بر موارد یاد شده تا حد زیادی به طراحی متحرک یا Motion Design نیز وابسته شده است. انیمیشن‌ها، جلوه‌های بصری و افکت‌هایی که در هنگام جابجایی در صفحه مشاهده می‌شوند، همگی تأثیر چشمگیری بر کاربرانی خواهند داشت که برای اولین بار با محصول شما تعامل می‌کنند.

انواع نمونه سازی برای UI

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

• نمونه سازی ویدیویی: در این نوع از پروتوتایپ، یک فیلم از عملکرد UI تهیه می‌شود تا عملکرد نهایی یا مورد انتظار آن برای تیم تولید یا سفارش دهنده رابط کاربری مشخص شود.
• نمونه سازی برای امکان سنجی: این نوع از نمونه اولیه برای بررسی امکان پذیری پیاده سازی راهکارهای مورد انتظار در رابط کاربری تهیه می‌شود. از این طریق، پیش از تلاش برای تولید محصول نهایی، امکانات و ریسک‌های فنی از نظر عملکرد، سازگاری و تناسب به بوته آزمایش گذاشته می‌شوند.
• نمونه سازی افقی (Horizontal): منظور از نمونه سازی افقی، نمایش رابط کاربری در قالب اسکرین شات است. در این حالت، فقط لایه بیرونی رابط کاربری (منوها، آیتم‌های گرافیکی، سبک دکمه‌ها و موارد مشابه) قابل مشاهده خواهد بود.
• نمونه سازی سریع: در این نوع از نمونه سازی تلاش می‌شود تا در حداقل زمان ممکن با بهره برداری از حداکثر امکانات موجود، یک نمونه اولیه تهیه شود.
• شبیه سازی: نمونه سازی به روش شبیه سازی همان نوعی از نمونه سازی است که یک UI شبیه به UI نهایی را تولید کرده و امکان تعامل را به کاربر می‌دهد. در این حالت می‌توان نظر کاربران را ارزیابی و ایرادهای احتمالی را رفع کرد.
• نمونه سازی به روش استوری بورد (Storyboard): در روش استوری بورد، UI را در قالب تصاویر متوالی به سبک یک داستان معرفی می‌کنیم.
• نمونه سازی عمودی (Vertical): پروتوتایپ عمودی بر خلاف پروتوتایپ افقی که ظاهر محیط کاربری را نشان می‌دهد، back end رابط کاربری را نمایش می‌دهد. از این طریق می‌توان بیشتر بر روی بهبود کدها و تست مؤلفه‌های اصلی طرح در مراحل اولیه تمرکز کرد تا یک مدل کارآمد (هرچند ناتمام) برای ارزیابی کارکردهای اصلی وجود داشته باشد.

در ادامه انواع نمونه سازی می‌توان Wireframe و موکاپ را نیز ذکر کرد که قبلاً آن‌ها را توضیح داده‌ایم.

ابزارهای نمونه سازی

بسته به اینکه UI مورد نظر را برای چه چیزی (مثلاً نرم‌افزار یا سایت) طراحی می‌کنید می‌توانید از ابزارهای مختلفی استفاده کنید که به چند مورد از آن‌ها اشاره می‌کنیم:

• InVision
• Frame Box
• Pidoco
• CogTool
• Wirefy
• Sketch
• Adobe XD
• Justinmind
• Keynote
• Google slides

۶ اصل طراحی UI

یک طراح خوب در هنگام نمونه سازی و طراحی رابط کاربری از ۶ اصل طراحی UI پیروی می‌کند:

• ساختارمندی: این اصل با کلیت معماری رابط کاربری در ارتباط است و اعتقاد دارد که طرح باید واضح، هماهنگ و قابل درک بوده و موارد مرتبط را در کنار هم و موارد بی ربط را از هم جدا کند؛ به گونه‌ای که ساختار قابل قبولی بر تمامیت مدل UI حکم‌فرما شود.
• سادگی: طراحی UI باید باعث ساده سازی و تسهیل انجام فعالیت‌های مختلف برای کاربر شود، به گونه‌ای که مخاطب با محیط کاربری احساس غریبگی نکند.
• نمایانی: طراحی باید به گونه‌ای انجام شود که همه گزینه‌ها و مؤلفه‌های مورد نیاز کاربر بدون وجود هیچ عامل مزاحم و بلا استفاده‌ای آشکار بوده و در دسترس وی قرار داشته باشند. هیچ اطلاعات تکراری و گزینه‌هایی که دلیل موجهی برای وجودشان متصور نیست در طراحی UI جایی ندارند.
• واکنش پذیری: کاربر باید متناسب با هر عملی که انجام می‌دهد و هر اتفاقی که در سطح سیستم یا UI روی می‌دهد، واکنش و پیام‌های مناسبی را دریافت کند.
• تولرانس (Tolerance) یا خطاپذیری: طراحی باید انعطاف پذیر باشد و امکان لغو و تکرار عمل قبلی (undo و redo) را مهیا کند تا از اشتباه و استفاده نامطلوب جلوگیری شود.
• اصلاح و بازیافت پذیری: باید بتوان مؤلفه‌های داخلی و خارجی مورد استفاده در طراحی را اصلاح و مجدداً از آن‌ها استفاده کرد.

تکنیک‌های UI

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

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

ده‌ها تکنیک مؤثر مختلف در طراحی UI وجود دارد که ما در اینجا به طور خلاصه به شناخته‌شده‌ترین آن‌ها اشاره می‌کنیم:

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

o ساختار سلسله مراتبی بر توانایی مغز در تشخیص مؤلفه‌های مختلف بر اساس تفاوت‌های فیزیکی، مانند اندازه، رنگ، کنتراست و توازن آن‌ها مبتنی است.

o ساختار زنجیره‌ای که کاربر از طریق آن وارد مسیر مشخصی می‌شود و اقدامات مورد نظر را یک به یک به انجام می‌رساند.

o ساختار ماتریسی که کاربر می‌تواند نوع حرکت و جابجایی خود در رابط کاربری را بر اساس ترتیب الفبایی، زمانی، موضوعی یا موارد مشابه انتخاب کند.

• مدل‌های سازمان‌دهی محتوا:

o مدل تک صفحه‌ای

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

o مدل لیستی که به کاربران این امکان را می‌دهد تا از طریق فهرست صفحات که در هر صفحه موجود است به صفحه مورد نظر دسترسی پیدا کنند.

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

o مدل سلسله مراتبی همگام که روش‌های مختلفی را برای دسترسی به محتوا در اختیار کاربر قرار می‌دهد؛ اما در عین حال به گونه‌ای وی را در یک مسیر مشخص هدایت می‌کند که اعمال مورد انتظار را انجام بدهد.

• تکنیک تصویرسازی که بر خروجی کار تأکید دارد و به دنبال سازمان‌دهی و ساختار بخشیدن به داده‌های عددی و غیر عددی است به نحوی که واضح و قابل درک بوده و از لحاظ بصری برای کاربر جذابیت داشته باشند.
• تحقیق و نوآوری: با تحقیق و بررسی مستمر، انجام تست‌های مختلف و استفاده از مؤلفه‌های جدید و ابتکاری می‌توانید همواره UI طراحی شده را بهتر و کارآمدتر کنید. از جمله موارد نوآورانه‌ای که می‌توان از آن‌ها بهره گرفت عبارت‌اند از: لایه‌های تعاملی، رابط کاربری بدون دکمه، پویانمایی، رنگ‌های روشن و جذاب، محتوای تصویری باکیفیت، صفحه‌های چندقسمتی و موارد مشابه.

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

فرآیند طراحی UI

فرآیند طراحی UI را می‌توان به مراحل مختلفی تقسیم بندی کرد که ما در اینجا به یکی از رایج‌ترین این دسته‌بندی‌ها اشاره می‌کنیم:

1. گردآوری و تعیین ویژگی‌های لازم: در این مرحله، یک فهرست از ویژگی‌هایی را تهیه می‌کنیم که برای تحقق هدف مورد نظر از طراحی UI و پاسخگویی به نیازهای بالقوه کاربران ضروری هستند.
2. آنالیز کاربر و عمل: در این مرحله، نحوه انجام اعمال مختلفی که توسط کاربران بالقوه انجام می‌شوند و طراحی ما باید باعث تسهیل آن‌ها شود را به زیر ذره بین می‌بریم. این مرحله هم راستا با تحقیقاتی است که به عنوان بخشی از فرآیند طراحی UX انجام می‌گیرد.
3. معماری اطلاعات (IA): این مرحله، طراحی و توسعه فرآیند و جریان ارائه اطلاعات را در بر می‌گیرد. در طول این مرحله، سبک و سیاق تعامل با UI، الگوی طراحی و تکنیک تصویرسازی را انتخاب می‌کنیم. بسیاری از تکنیک‌های طراحی که قبلاً ذکر کردیم در طول این مرحله شکل می‌گیرند.
4. نمونه سازی: این مرحله شامل فرآیند تهیه و توسعه پروتوتایپ، wireframe، موکاپ و هر نوع دیگری از انواع مختلف نمونه‌های اولیه خواهد بود.
5. بررسی کاربردپذیری: در این مرحله، نمونه‌های اولیه یا ویژگی‌هایی که معمولاً نمی‌توان آن‌ها را مستقیماً به کمک کاربران به بوته آزمایش گذاشت را به زیر ذره بین می‌بریم.
6. تست کاربردپذیری: به کمک تست طراحی UI، میزان استقبال کاربران از طرح رابط کاربری را ارزیابی می‌کنیم. معمولاً در طول تست کاربردپذیری از کاربران خواسته می‌شود تا فعالیت‌هایی را انجام بدهند تا قسمت‌هایی که در آن‌ها دچار مشکل می‌شوند یا به هر دلیلی وضوح کافی وجود ندارد مشخص شود.
7. طراحی نهایی GUI (رابط کاربری گرافیکی): این مرحله، مرحله طراحی سبک و سیاق نهایی رابط کاربری به صورت گرافیکی است. در این مرحله نوع تعامل بصری را با استفاده از تایپوگرافی و استفاده از تصاویر و آیتم‌های گرافیکی مختلف نهایی می‌کنیم و طراحی UI را به سرانجام می‌رسانیم.
8. امور مربوط به نظارت و نگهداری: پس از اتمام طراحی باید عملکرد طرح زیر نظر گرفته شود تا در صورت نیاز تغییرات مقتضی را در آن اعمال کنیم.

معرفی چند سایت در زمینه طراحی رابط کاربری و تجربه کاربری

سایت سون لرن یکی از معتبرترین سایت های فارسی در این زمینه است که علاوه بر طراحی سایت، در زمینه ی برنامه نویسی هم فعال است و آموزش های مناسبی در این زمینه دارد.
https://7learn.com/

سایت داکس لب به صورت تخصصی در زمینه آموزش طراحی رابط کاربری و تجربه کاربری فعالیت میکند. تخصص داکس لب را میتوانید در طراحی زیبای سایتش هم ببینید.
duxlab.academy

سایت آماج آکادمی در زمینه ی آموزش مشهور است.

بایدها و نبایدها در طراحی UI

در پایان به ۱۰ مورد از باید و نبایدهایی اشاره می‌کنیم که باید در طراحی UI (و همچنین UX) مد نظر قرار بدهید:

• فضا و تجربه مشابهی را برای کاربران دستگاه‌های مختلف ایجاد کنید. به عبارت دیگر، کاربر با استفاده از هر دستگاهی (اعم از موبایل یا لپ تاپ یا هر دستگاه دیگری) باید با فضای مشابهی روبرو شود.
• تا جایی که امکان دارد از ایجاد هرگونه پیچیدگی بپرهیزید و جابجایی در میان قسمت‌های مختلف UI را ساده تر کنید.
• مهم ترین مؤلفه موجود در صفحه را به عنوان نقطه تمرکز طراحی در نظر بگیرید؛ به گونه‌ای که توجه کاربر در هنگام مرور کلی صفحه به آن معطوف شود.
• چند مورد مهم را در یک صفحه قرار ندهید.
• از عملکرد صحیح همه مؤلفه‌های تعاملی، از جمله دکمه‌ها و لینک‌ها اطمینان حاصل کنید.
• کنترل را از کاربر سلب نکنید. پخش خودکار ویدئو یا اسکرول خودکار از جمله مواردی است که به مذاق کاربران خوش نمی‌آید.
• اجازه ندهید که طراحی بر خوانایی محتوا تأثیر منفی بگذارد.
• مرور کلی محتوا را برای کاربر آسان کنید. در این جهت استفاده از مواردی مانند عناوین، بخش‌ها و جدول‌های مجزا، تصاویر و دکمه‌های مختلف می‌تواند کارساز باشد.
• از مؤلفه‌هایی که توجیه خاصی برای وجودشان قابل تصور نیست استفاده نکنید. به بیان دیگر، از شلوغ کردن بی مورد UI بپرهیزید.
• طراحی را به سمتی نبرید که کاربر مجبور شود تا برای استفاده از رابط کاربری منتظر بماند. با توجه به میزان اندک صبر و تحمل کاربران امروزی، سنگین کردن UI با استفاده از مؤلفه‌هایی که هر چند جالب و جذاب هستند اما بارگذاری آن‌ها طول می‌کشد به نفع شما نخواهد بود.

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