رابط کاربری User Interface و رضایت کاربران

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

رابط کاربری و تجربه کاربری

رابط کاربری و تجربه کاربری

مدت‌هاست که جمله معروفی در دنیای وب و مخصوصاً بازاریابی و فروش بر سر زبان‌ها افتاده با این مضمون که «محتوا پادشاه است».

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

اما نکته مهمی که علاوه بر کیفیت و تناسب محتوا باید مد نظر قرار بگیرد، نحوه ارائه محتواست. توجه داشته باشید که اگر محتوای مورد نظر را به خوبی و به گونه‌ای ارائه نکنید که به مذاق مخاطب هدفتان خوش بیاید، چه بسا اصلاً خوانده نشود و به مرحله بررسی کلی و جلب توجه وی نرسد؛ چه رسد به اینکه بخواهد مخاطب را به انجام عمل مورد نظر شما (تبدیل) متقاعد و ترغیب کند.

اما محتوایی که تهیه کرده‌ایم را چگونه باید ارائه کنیم تا نظر مخاطب را به خود جلب کند؟ یکی از مهم ترین مباحثی که در پاسخ به این سؤال به وجود آمده، مبحث UI) User Interface) یا رابط کاربری است. در این مطلب تلاش می‌کنیم تا شما را با این موضوع مهم و تاثیرگذار و مؤلفه‌های مرتبط با آن آشنا کنیم؛ اما طبیعتاً پیش از هر چیزی باید ببینیم که رابط کاربری چیست.

 

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

 

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

هر رابط کاربر، به دو سازوکار اساسی مجهز است:

درون‌داد؛ کاربر از طریق رابط کاربر، به ماشین فرمان می‌دهد.
برون‌داد؛ ماشین از دریچه رابط کاربر، به دستورهای کاربر، پاسخ و عکس‌العمل نشان می‌دهد.

در این حالت اصطلاحاً می‌گویند که کاربر و رابط کاربر، با یکدیگر تعامل دارند.

در فرهنگ رایانه، رابط کاربر عبارت است از تمام مجاری اطلاعاتی (Information Channels) که امکان ارتباط (Communication) بین کاربر و رایانه را فراهم می‌کنند. یک واسط کاربر ابتدایی، معمولاً از منوها، پنجره‌ها، صفحه‌کلید و ماوس تشکیل شده است. به علاوه، صداهایی هم که رایانه آنها را تولید می‌کند، جزئی از واسط کاربر محسوب می‌شوند.

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

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

 

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

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

رابط کاربری سایت کاربران را راهنمایی می‌کند و برای استفاده از سایت به آن‌ها دسترسی راحت تر می‌دهد. رابط کاربری سایت به کاربر مسیری راحت، سریع و مطمئن برای استفاده از سایت می‌دهد و به میزان آسان بودن و در دسترس ‌تر بودن رابط کاربر، استفاده از سایت لذت‌بخش‌تر می‌شود و کاربر را بیشتر ترغیب به استفاده از سایت می‌کند.
تأثیر رابط کاربر سایت بر رضایت مشتری از سایت

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

رابط کاربری می‌تواند رضایت کاربر را جلب کند‍‍؛ زمانی که زیبایی درعین سادگی، سرعت، دسترسی آسان، و استفادۀ راحت از سایت را، در اختیار کاربر می‌گذارد. این اقدامات باعث جذب کاربر و افزایش مدت‌زمان استفاده از سایت می‌شود؛ که درنهایت او را ترغیب به خرید از سایت می‌کند. به هر میزان که رابط کاربری سایت از کارآیی بالاتری برخوردار باشد، استفاده از سایت راحت‌تر و مفیدتر است؛ درنتیجه میل کاربر برای ماندن و استفاده از سایت بیشتر شده و اعتماد او را جلب می‌کند و احتمال خرید، بیشتر خواهد شد.

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

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

رابطه‌ی بین رابط کاربر و تجربه کاربری و تأثیر آن در سئو سایت و بهبود فروش

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

بنابراین، بااینکه رابط کاربر زیرمجموعه‌ی تجربه کاربری می‌باشد؛ ولی این دو در کنار هم باید به بهترین شکل ظاهر شوند و خلأ در هریک باعث ضعف در عملکرد دیگری می‌شود.

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

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

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

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

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

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

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

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

 

اصول طراحی UI

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

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

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

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

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

تولرانس (Tolerance) یا خطاپذیری: طراحی باید انعطاف پذیر باشد و امکان لغو و تکرار عمل قبلی (undo و redo) را مهیا کند تا از اشتباه و استفاده نامطلوب جلوگیری شود.

اصلاح و بازیافت پذیری: باید بتوان مؤلفه‌های داخلی و خارجی مورد استفاده در طراحی را اصلاح و مجدداً از آن‌ها استفاده کرد.

 

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

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

 

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

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

ابزار طراحی UI

طراحان  UI از  نرم‌افزارهای برای کارشان استفاده می‌کنند.البته باید بگوییم  نرم‌افزار طراحی UI و UX به بازار عرضه شده ولی چندتا از آنها بیشتر از بقیه معروف و مشهور هستند و کار با آن‌ها راحت‌تر است.

1. Adobe XD

adobe xd for ui design

adobe xd for ui design

XD چندسال پیش (2015) ارائه شد، ولی چنان رشد سریعی داشت که خیلی زود توانست به یکی از اولین‌های دنیای طراحی تبدیل شود. می‌دانید چرا؟ به چند دلیل!

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

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

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

2. Sketch

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

SKETCH for ui

SKETCH for ui

یکی از ویژگی‌های خوب این برنامه افزونه‌های گسترده آن است. برای مثال افزونه‌هایی مانند Sketch2React می‌توانید طرح‌های خود را تبدیل به کد کنید و بعداً آن‌ها را به HTML بفرستید. به این ترتیب، صفحات وب ساده‌ای نیز از طرح‌های خود بسازید.
چگونه خطاهای Crawl Errors گوگل وبمستر تولز را رفع کنیم؟حتما بخوانید: چگونه خطاهای Crawl Errors گوگل وبمستر تولز را رفع کنیم؟

در واقع اسکچ به شما این امکان را می‌دهد که محیط طراحیتان را به محیط‌های کاری دیگر توسعه دهید.

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

3. Figma

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

فیگما برای طراجی رابط کاربری

فیگما برای طراجی رابط کاربری

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

 

  1. اولین نفری باشید که دیدگاه خود را ثبت می کند!
  1. No trackbacks yet.
« WP_Query
4 نکته در مورد ماتریس برنامه‌ریزی: چگونه برنامه‌ای بنویسیم که به آن عمل کنیم؟ »