راهنمای جامع رابط کاربری یا UI

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

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

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

رابط کاربری یا رابط کاربری که مختصر شدۀ (User Interface) می باشد، چیدمان گرافیکی یک سایت یا اپلیکیشن را میگویند که در صورتی که به درستی انجام پذیرد، کاربر قادر خواهد بود اهداف و وظایف محوله را به بهترین شکل و با صرف کمترین زحمت و زمان، به انجام رساند. رابط کاربری یک محصول یا سرویس در نهایت نشان دهنده موفقیت و کارآیی است. به همین دلیل هم هست که شرکت ها در این مورد بسیار وسواس به خرج داده و رابط کاربری از اولویت های آنها به حساب می آید.

رابط کاربری را می توان به سادگی به تمامی عواملی که کاربر استفاده کننده، به واسطه آن به اطلاعات و صفحات آن سایت یا اپلیکیشن در تعامل است، مرتبط دانست. عواملی چون: دکمه های قابل کلیک در صفحه، متن ها و صفحات، صفحه کلید، موس، انیمیشن ها و …

طراح رابط کاربری (Ui Designer) طراح گرافیکی است که متخصص استفاده بهینه از عوامل ذکر شده است. وی در مورد زیبایی ظاهری کاربری و اینکه چه حسی را به کاربر منتقل می کند، تصمیم گیری میکند. همچنین تصمیمات به ظاهر کوچکی مثل اینکه رنگ طرح ها و شِما (Schemes)، شکل دکمه ها، نوع و اندازه فونت مورد استفاده و فاصله خطوط چطور باشد، نیز تصمیم میگیرد. علاوه بر آن تمامی عوامل، از نظر وی باید در شکل، در جسی که منتقل می کند منسجم باشد.

اصول اولیه طراحی رابط ‌کاربر شامل چه مواردی هستند؟

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

تفاوت طراح رابط کاربری و گرافیست

طراح رابط‌کاربر، کارش را با وایرفریم‌های با جزییات پایین (low fidelity) شروع می کند که ممکن است رنگ و لعابی نداشته باشند. وی با خودش فکر می کند : المان‌های مختلف کجای صفحه قرار می‌گیرند؟ اگه یه فرم ارسال شد چه اتفاقی باید بیفتد؟ خطا ها را کجا و چطور به کاربر نمایش بدهیم؟ آیا اطلاعات فرم به یه صفحه جدید ارسال می شود؟ دکمه ارسال فرم کجا باشه؟
اما گرافیست یا به‌ عبارت دیگه طراح دیداری (Visual designer) کارش این هست که رنگ‌بندی، تصاویر مناسب و حس و حال زیبایی‌شناسانه رو طراحی کند.

تست کاربردپذیری

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

طراحی UI شامل چه بخش‌هایی است؟

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

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

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

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

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

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

جمع بندی

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

منبع سایت: indeed.com و https://amanjacademy.com/