آیا میدانید UI یا رابط کاربری چیست؟ آیا با نمونه سازی، مؤلفهها، اصول و فرآیند طراحی UI آشنایی دارید؟ اگر پاسختان منفی است یا نمیتوانید با قاطعیت جواب مثبت بدهید باید این مطلب را مطالعه کنید.
اما محتوایی که تهیه کردهایم را چگونه باید ارائه کنیم تا نظر مخاطب را به خود جلب کند؟ یکی از مهم ترین مباحثی که در پاسخ به این سؤال به وجود آمده، مبحث UI) User Interface) یا رابط کاربری است. در این مطلب تلاش میکنیم تا شما را با این موضوع مهم و تاثیرگذار و مؤلفههای مرتبط با آن آشنا کنیم؛ اما طبیعتاً پیش از هر چیزی باید ببینیم که رابط کاربری چیست.
UI چیست؟
UI شکل اختصاری عبارت User Interface است. اجازه بدهید که در ابتدا با تعریف Interface شروع کنیم. Interface یا رابط یک مکانسیم یا ساز و کار برای تعامل بین دو سیستم است. لذا User Interface یک Interface است که برای تسهیل و ساده تر شدن تعاملات بین سیستم و کاربر طراحی شده است.
به طور کلی دو نوع User Interface وجود دارد:
• Command Line Interface (CLI) یا رابط خط فرمان که فقط متنی است و عمدتاً برنامهنویسها از آن استفاده میکنند؛
• Graphical User Interface (GUI) یا رابط کاربری گرافیکی که ما در این مطلب به شرح و معرفی آن خواهیم پرداخت. مواردی مانند تصاویر، پنجرهها، آیکنها و منوها در زیر این عنوان جای میگیرند.
در این مطلب به طور خاص بر آن نوعی از رابط کاربری تمرکز میکنیم که با آنچه که کاربر نهایی مشاهده میکند سر و کار دارد؛ یعنی GUI.
اگر هنوز دقیقاً معنی UI برایتان هویدا نشده، قسمت بعد یعنی طراحی UI همه چیز را برای شما روشن خواهد کرد.
UI Design یا طراحی رابط کاربری چیست؟
• طرح بصری؛ یعنی حال و هوا و حسی که به دنبال انتقال آن هستیم و
• طراحی تعامل؛ یعنی نحوه عملکرد طرح ما و تأثیر آن بر تعامل مخاطب با طرح و محتوا.
با ذکر یک مثال میتوان کاملاً تفاوت طراحی 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
یک طراح خوب در هنگام نمونه سازی و طراحی رابط کاربری از 6 اصل طراحی 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. امور مربوط به نظارت و نگهداری: پس از اتمام طراحی باید عملکرد طرح زیر نظر گرفته شود تا در صورت نیاز تغییرات مقتضی را در آن اعمال کنیم.
10 باید و نباید در طراحی UI
در پایان به عنوان حُسن ختام به 10 مورد از باید و نبایدهایی اشاره میکنیم که باید در طراحی UI (و همچنین UX) مد نظر قرار بدهید:
• فضا و تجربه مشابهی را برای کاربران دستگاههای مختلف ایجاد کنید. به عبارت دیگر، کاربر با استفاده از هر دستگاهی (اعم از موبایل یا لپ تاپ یا هر دستگاه دیگری) باید با فضای مشابهی روبرو شود.
• تا جایی که امکان دارد از ایجاد هرگونه پیچیدگی بپرهیزید و جابجایی در میان قسمتهای مختلف UI را ساده تر کنید.
• مهم ترین مؤلفه موجود در صفحه را به عنوان نقطه تمرکز طراحی در نظر بگیرید؛ به گونهای که توجه کاربر در هنگام مرور کلی صفحه به آن معطوف شود.
• چند مورد مهم را در یک صفحه قرار ندهید.
• از عملکرد صحیح همه مؤلفههای تعاملی، از جمله دکمهها و لینکها اطمینان حاصل کنید.
• کنترل را از کاربر سلب نکنید. پخش خودکار ویدئو یا اسکرول خودکار از جمله مواردی است که به مذاق کاربران خوش نمیآید.
• اجازه ندهید که طراحی بر خوانایی محتوا تأثیر منفی بگذارد.
• مرور کلی محتوا را برای کاربر تسهیل کنید. در این راستا استفاده از سرنخهای بصری مانند عناوین، بخشها و جدولهای مجزا، تصاویر و دکمههای مختلف میتواند کارساز باشد.
• از مؤلفههایی که توجیه خاصی برای وجودشان قابل تصور نیست استفاده نکنید. به بیان دیگر، از شلوغ کردن بی مورد UI بپرهیزید.
• طراحی را به سمتی نبرید که کاربر مجبور شود تا برای استفاده از رابط کاربری منتظر بماند. با توجه به میزان اندک صبر و تحمل کاربران امروزی، سنگین کردن UI با استفاده از مؤلفههایی که هر چند جالب و جذاب هستند اما بارگذاری آنها طول میکشد به نفع شما نخواهد بود.
حرف آخر
دقت و توجه بیشتر در طراحی UI یا رابط کاربری به تسهیل و افزایش هر چه بیشتر و بهتر درک و هضم محتوا و در نهایت انجام عمل مورد نظر از سوی مخاطب کمک خواهد کرد. توجه به آنچه که در این مطلب ذکر شد به همراه مطالعه، بررسی، تجربه و امتحان کردن طرحهای مختلف UI میتواند در این مسیر به شما کمک کند.
بدون دیدگاه