طراحی UI چیست؟

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

اما طراحی UI امروز چیست و چه نقشی در فرآیند تفکر طراحی ایفا می‌کند؟ در ادامه، بینش‌های تخصصی UI از هوگو ریموند، حامی طراحان (Designer Advocate) در فیگما (Figma) را بخوانید.

نقش طراحی UI

هوگو می‌گوید: «طراحی رابط کاربری، ظاهر و حس کلی تجارب محصول دیجیتالی که شما خلق می‌کنید را در نظر می‌گیرد و اصول قابلیت استفاده (usability) و طراحی تعامل را برای تمام عملکردهای محصول و ویژگی‌های تعاملی به کار می‌برد. این کار یک ارتباط عاطفی با کاربر نهایی ایجاد کرده و آن‌ها را با محصول شما درگیر می‌کند.»

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

از دیدگاه بن شنایدرمن (Ben Shneiderman):

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

منبع: Shneiderman, B., & Plaisant, C. (2010). Designing the User Interface: Strategies for Effective Human-Computer Interaction.

UX در مقابل UI

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

با این حال، بسیاری از سازمان‌ها تیم‌های UX و UI را از هم جدا می‌کنند که این امر باعث سردرگمی در مورد مسئولیت‌های مشترک می‌شود. هوگو اشاره می‌کند: «از نظر تاریخی، طراحان UI بر جزئیات بصری و ثبات تمرکز داشته‌اند، در حالی که طراحان UX بر جریان‌های کاربری (user flows) و معماری اطلاعات تمرکز کرده‌اند. اما این نقش‌ها باید بر اساس شایستگی‌های فردی طراح تعریف شوند، نه یک عنوان شغلی از پیش تعیین‌شده.»

۳ نوع متداول رابط کاربری

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

• رابط‌های کاربری گرافیکی (GUIs): این سیستم‌های مبتنی بر تصویر یا آیکون، رایج‌ترین نوع رابط کاربری هستند و در بسیاری از دستگاه‌ها یافت می‌شوند. همین حالا، شما در حال تعامل با یک GUI روی صفحه کامپیوتر یا گوشی هوشمند خود هستید. کاربران از طریق لمس یا یک ابزار خارجی مانند قلم یا ماوس با GUI‌ها تعامل می‌کنند.
• رابط‌های مبتنی بر حرکت (Gesture-based): با افزایش محبوبیت واقعیت افزوده (AR) و واقعیت مجازی (VR)، رابط‌های مبتنی بر حرکت بیش از هر زمان دیگری اهمیت یافته‌اند. این نوع UI حرکات کاربر در یک فضای سه‌بعدی را به دستورات تبدیل می‌کند.
• رابط‌های کنترل صوتی (VUIs): این رابط‌های نسبتاً جدید برای ناوبری در منوها و انجام اقدامات، به صدای کاربر متکی هستند. دستیارهای هوشمند مانند سیری (Siri)، الکسا (Alexa) و کورتانا (Cortana) نمونه‌های شناخته‌شده‌ای از VUI‌ها هستند.

عناصر کلیدی طراحی رابط کاربری

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

• کنترل‌های ورودی (Input Controls): به کاربر اجازه می‌دهند با وارد کردن اطلاعات، با محصول ارتباط برقرار کند. کنترل‌های ورودی می‌توانند به سادگی یک دکمه یا چک‌باکس باشند. برخی پیچیده‌تر هستند، مانند منوهای کشویی، دکمه‌های تغییر وضعیت (toggles) و فیلدهای متنی.
• اجزای اطلاعاتی (Informational Components): به محصول اجازه می‌دهند اطلاعاتی را به کاربر ارائه دهد. آیکون‌ها، اعلان‌ها، نوارهای پیشرفت و راهنماهای ابزار (tooltips) همگی نمونه‌های آشنایی از اجزای اطلاعاتی هستند.
• اجزای ناوبری (Navigational Components): به کاربر کمک می‌کنند تا راه خود را در محصول پیدا کند. عناصر راهیابی مانند اسلایدرها، فیلدهای جستجو، تگ‌ها و بردکرامب‌ها (breadcrumbs) همگی تعامل کاربر را برای یک تجربه یکپارچه تسهیل می‌کنند.
• ظرف‌ها (Containers): رابط کاربری را سازماندهی کرده و عناصر مشابه را گروه‌بندی می‌کنند. ظرف‌ها همچنین حداکثر عرضی را برای نمایش محتوا بسته به اندازه صفحه کاربر تعیین می‌کنند. هدرها، تب‌ها و منوهای آکاردئونی تنها برخی از ظرف‌هایی هستند که مشاهده می‌کنید.

۴ نکته حرفه‌ای برای طراحی UI موفق

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

۱. کاربر را در اولویت قرار دهید. رابط‌های کاربری برای کاربر وجود دارند، نه هیچ‌کس دیگر. بنابراین در هر مرحله از فرآیند طراحی از خود بپرسید: «این چه تأثیری بر کاربر دارد؟» هوگو می‌گوید اگر پاسخ چیزی غیر از «زندگی او را بهتر یا آسان‌تر می‌کند» بود، بهتر است در انتخاب خود تجدید نظر کنید. بهترین رابط‌های کاربری فقط به کاربران خدمات نمی‌دهند، بلکه به آن‌ها حس کنترل می‌بخشند. رابط‌های کاربری ساده که تمیز، شهودی و به دور از تجملات هستند، استفاده آسان‌تری دارند. زمانی متوجه موفقیت UI خود می‌شوید که کاربران حتی به آموزش هم نیاز نداشته باشند و به طور غریزی در محصول شما حرکت کنند. شما می‌توانید با روش‌های زیر به این درک فوری دست یابید:

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

۲. تحقیق خود را انجام دهید (Do your homework). حتی اگر یک متخصص UI باشید، باز هم باید برای آگاهی‌بخشی به طراحی خود، یک تحلیل رقبا انجام دهید. این تحقیق به شما کمک می‌کند تا:

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

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

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

• با تعداد نامحدودی از هم‌تیمی‌ها و کاربران همکاری کنید.
• عناصر طراحی UI را از یک کتابخانه مشترک فراخوانی کنید.
• بازخورد در مورد طرح‌ها جمع‌آوری کنید.
• در هر مکانی با استفاده از مرورگر خود کار کنید.

با فیگما رابط‌های کاربری شگفت‌انگیز بسازید

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

منبع : فیگام آکادمی

حسین اصلانی