40 اصلی که در رابطه با رابط کاربری باید بدانید

این محتوا توسط هوش مصنوعی تولید شده است. در حال حاضر سیستم بروی نسخه MAGBOT + فعال است این نسخه کیفیت بالاتری در جمله سازی دارد
MAGBOT +
  40 اصلی که در رابطه با رابط کاربری باید بدانید

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

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

تضاد  (Contrast)

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

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

اصول طراحی ui اصول طراحی رابط کاربری کنتراست

بدانید برای چه کسی طراحی می‌کنید

وظایفی همانند تحقیق کاربر، وایرفریمینگ، تست و طراحی معماری اطلاعات اغلب جزو مسئولیت یک طراح تجربه کاربری (UX) است؛ اما این اواخر چیزی که ما می‌بینیم ادغام این دو طراحی UI/UX است. بر اساس آماری که به دست آمده ۶۶% آگهی‎های درخواست طراح UX از او توانایی‌های UI را نیز درخواست می‌کنند، بنابراین اگر برای طراحان تجربه کاربری مهم شده است که درباره طراحی بصری، برندینگ و تایپوگرافی نیز اطلاعاتی داشته باشند، باید طراحان UI نیز درگیر این مسئله شوند، یا حداقل دانش اولیه درباره توانایی‎های UX داشته باشند.

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

  1. از انتخاب‌های بیشمار بپرهیزید

از انتخاب‌های بیشمار بپرهیزید

مارک زاکربرگ یک کمد خیلی ساده دارد، تمام تی‌شرت‌های او در رنگ خاکستری هستند. به گفته خودش: «من واقعاً می‎خواهم زندگی‌ام را ساده کنم تا کاری کنم بتوانم کمترین تصمیمات ممکن را بگیرم.» این اصل در طراحی رابط نیز صدق می‎کند، چرا که هرچه گزینه‌های بیشتری پیش پای کاربر بگذارید او را بیشتر گیج می‌کنید و موجب می‌شوید بیش از حد به ارزیابی بپردازند و در نهایت کمتر علاقه‌مند شوند که یک عملی را انجام دهند. هر جا که ممکن است ما باید گزینه‎های موجود را محدود کنیم، یا حداقل گزینه‌ها را در جایی از مسیر که مرتبط به نظر نمی‌رسد مخفی کنیم.

تعادل (Balance)

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

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

اصول طراحی ui اصول طراحی رابط کاربری تعادل


  1. با گزینه‌های پیش‌فرض مستقیم به کاربر کمک کنید

3. با گزینه‌های پیش فرض مستقیم به کاربر کمک کنید

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

حرکتی به روی حالات خالی انجام دهید

حرکتی به روی حالات خالی انجام دهید

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

تاکید (Emphasis)

تأکید با بخش هایی از یک طرح سروکار دارد که باید برجسته به نظر برسند. در بیشتر موارد، این بخش ها حاوی مهمترین اطلاعاتی است که یک طراحی آن را انتقال می دهد.

اصول طراحی ui اصول طراحی رابط کاربری


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

پیغام‌های خطا را خلاقانه طراحی کنید

5. پیغام‌های خطا را خلاقانه طراحی کنید

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


تناسب (Proportion)

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

اصول طراحی ui اصول طراحی رابط کاربری

نسبت های متفاوت بین متون ریز و تصاویر بزرگ به وضوح مشخص می کند که مهمترین عنصر در وب سایت کالین هیوز کدام است.

گزینه‌ها را محدود کنید

گزینه‌ها را محدود کنید

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

سلسله مراتب (Hierarchy)

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

اصول طراحی ui اصول طراحی رابط کاربری

وب سایتGrafill  با استفاده از قالب بندی و چیدمان صفحه( همانطور که می بینید مهمترین قسمت در بالای صفحه قرار گرفته است)، اندازه(محتوای مهمتر بزرگتر است) و تایپوگرافی(عناوین متن مهمتر از سایر متون موجود در صفحه بزرگتر است) سلسله مراتب ایجاد کرده است.

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

مقاومت را کم کنید

مقاومت را کم کنید

طراحی ما باید تا جای ممکن برای کاربر ساده باشد تا بتواند عملکردهای مورد نظر را در آن به راحتی انجام دهد. وقتی از طریق اپ موبایل وارد Slack می‌شوید، این اپلیکیشن یک لینک تایید «جادویی» به ایمیلتان ارسال می‌کند تا مجبور نباشید مراحل یادآوری و تایپ کردن رمز را هر بار تکرار کنید.

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

فقط اطلاعاتی که نیاز دارید را بگیرید

8. فقط اطلاعاتی که نیاز دارید را بگیرید

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

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

تکرار (Repetition)

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

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

اصول طراحی UI

تصاویر موجود در سمت چپ وب سایت Type and Pixel  نمونه ای عالی از تکرار در طراحی است.

ریتم (Rhythm)

همان طور که فضای خالی و سکوت بین نت ها در یک قطعه موسیقی ریتم ایجاد می کند، فاصله بین عناصر در حال تکرار می تواند باعث ایجاد ریتم شود. پنج نوع اساسی از ریتم بصری وجود دارد: تصادفی(Random)، منظم(Regular)، متناوب(Alternating)، موجی(Flowing) و پیش رونده(Progressive).

ریتم های تصادفی هیچ الگوی قابل تشخیصی ندارند. ریتم های منظم بدون هیچ تغییر و تحولی بین عناصر از فاصله یکسانی استفاده می کنند. ریتم های متناوب از یک الگوی خاص تکرار شونده پیروی می کنند، اما بین عناصر واقعی تفاوت وجود دارد(مانند الگوی 1-2-3-1-2-3). ریتم های موجی مانند جریان تپه های ماسه ای یا جریان امواج، از پیچ و خم ها استفاده می کنند. ریتم های پیش رونده در مسیر رو به جلو تغییر می کنند، به شکلی که هر تغییر به تکرارهای قبلی اضافه می شود.

اصول طراحی ui اصول طراحی رابط کاربری

فاصله نامنظم بین اشکال در پس زمینه وب سایت TheArtCenter ، ریتم تصادفی ایجاد می کند.

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

الگو (Pattern)

الگو همان تکرار چندین عنصر موجود در طراحی است که با هم کار می کنند. رایج ترین مثال الگوهای والپیپر(Wallpaper) موجود در ویندوز هستند، که تقریبا همه با آن آشنایی دارند.

با این حال در طراحی، به استانداردهای تعیین شده برای نحوه طراحی عناصر خاص نیز الگو می گویند. به عنوان مثال، نویگیشن و منوی فوقانی(Top) یک الگوی طراحی است که اکثر کاربران اینترنت با آن تعامل داشته اند.

اصول طراحی ui اصول طراحی رابط کاربری

نویگیشن فوقانی یکی از رایج ترین الگوهای طراحی در اینترنت است، که در اینجا در وب سایت ایزابل فاکس نشان داده شده است.

فضای سفید (Whitespace-Negativespace)

از مهمترین اصول طراحی UI استفاده صحیح از فضای منفی است. فضای سفید یا “فضای منفی”، مناطقی از طراحی است که هیچ عنصر طراحی را شامل نمی شود. در واقع فضاهای خالی موجود در طرح، فضای منفی یا سفید نامیده می شوند.

حتما بخوانید:  فضای منفی (Negative Space) در طراحی UI(رابط کاربری) چیست؟

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

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

اصول طراحی ui اصول طراحی رابط کاربری

فضای سفید برای متن ساده و محتوای وب سایت Jan Behne  فضای”تنفس” ایجاد کرده و در عین حال به زیبایی سبک مینیمال آن کمک می کند.

اصول طراحی ui اصول طراحی رابط کاربری

در برخی موارد، از فضای منفی برای ایجاد تصاویر ثانویه ای استفاده می شود که ممکن است فوراً برای بیننده آشکار نباشد. این امر می تواند بخش ارزشمندی از برندیگ بوده و باعث هیجان مشتریان شود. برای مثال کافی است به پیکان پنهان در آرم FedEx نگاهی بیاندازید.

حرکت (Movement)

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

اصول طراحی ui اصول طراحی رابط کاربری

تصاویر اریب و اعداد در ایجاد اصل حرکت در وب سایت Abby Stolfo  نقش دارند.

تنوع (Variety)

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

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

اصول طراحی ui اصول طراحی رابط کاربری

بک گراند وب سایت Kennard Lilly از رنگ ها و اشکال متنوعی برای ایجاد جذابیت استفاده می کند و در عین حال بر محتوای متن اصلی نیز تأکید می کند.

یکپارچگی (Unity)

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

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

اصول طراحی ui اصول طراحی رابط کاربری

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

حس پیشرفت القا کنید

9. حس پیشرفت القا کنید

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

به پیش‌فرض‌ها و عادات دقت کنید

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

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

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

بازخوردهای تصویری ارائه دهید

11. بازخوردهای تصویری ارئه دهید

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

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

از محتوای تولید شده توسط کاربر استفاده کنید

اغلب افراد با توجه به نظر دیگران خرید می‌کنند. به همین دلیل است که بسیاری از سایت‌های تجارت الکترونیکی یک بخش بزرگی از سایت را به نظرات و بررسی‌های کاربران اختصاص می‌دهند. برند عینک دودی Meller با اضافه کردن تصاویر از کاربرانی که از محصولی که خریده بودند رضایت داشتند و با لذت از آن استفاده می‌کردند در صفحه کالای خود توانست نرخ تبدیل را ۱۳% افزایش دهد.

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

با کاربران همانند عضوی از گروهتان رفتار کنید

با کاربران همانند عضوی از گروهتان رفتار کنید

شاد کردن کاربران با محصولات و خدمات یک چیز است، اما آن‌ها می‌توانند طرفداران ما، یا حتی بخشی از تیم بازاریابی ما باشند. ویدیوی محصول جدید GoPro روی صفحه اول وب‌سایتش کاملاً توسط مشتریانش که از دوربین HERO٧ استفاده کرده بودد گرفته شده است.

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

از تصاویر برای راهنمایی کاربران استفاده کنید

14. از تصاویر برای راهنمایی کاربران استفاده کنید

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

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

از فضای معکوس (منفی) به روش‌های زیرکانه استفاده کنید

15. از فضای معکوس (منفی) به روش‌های زیرکانه استفاده کنید

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

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

با طراحی برای موبایل آغاز کنید

در سال ۲۰۱۸، تقریباً ۵۲.۲ درصد از ترافیک تمامی وب‌سایت‌ها از طریق موبایل ایجاد شده بود، این مسئله ایجاد صفحات بهینه‌شده برای موبایل را مهم‌تر از قبل می‌سازد. طراحی برای افرادی که یک سایت را در کامپیوتر می‌بینند تا به امروز بوم مورد نظر طراحان رابط کاربری بوده است که معمولاً با بنرهای ویدیویی و فعل و انفعالاتی متحرک دیگر همره بود، اما وقتی این موارد را برای طراحی برای موبایل مقایسه کنیم، مجبور به خاموش کردن یا کاهش این حرکات خواهیم شد.

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

مجوز حقوقی مناسب را بگیرید

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

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

جملات مورد نظر رابط‌هایتان را بنویسید

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

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

تا جای ممکن طراحی onboard داشته باشید

19. تا جای ممکن طراحی onboard داشته باشید

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

برنامه یادگیری زبان Duolingo از یک جریان onboarding برای اینکه کاربران را مستقیم به جایی که باید عملی انجام دهند هدایت کند استفاده کرده است. با این کار می‌تواند کاربران جدید را با محصول و ویژگی‌های آن آشنا کرده و نمونه‌ای از نحوه عملکرد برنامه به آن‌ها نشان دهد. همه این کارها پیش از ثبت‌نام روی اپلیکیشن است؛ بنابراین کاربر این شانس را دارد تا پیش از اینکه حرکتی انجام دهد و حساب کاربری باز کند محصول را تست کند.



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

توسعه‌دهندگان را در کار خود درگیر کنید

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

درگیر کردن مداوم توسعه‌دهندگان در طول پروسه طراحی به آن‌ها این امکان را می‌دهد رابط کاربری را فراتر از تصویر ببینند و به آن‌ها این فرصت را می‌دهد بهتر بتوانند ایده اینکه چطور رابط کاربری ما را تا جای ممکن ساده‌تر طراحی کنند در ذهن بپرورانند.

از یک سیستم طراحی استفاده کنید

21. از یک سیستم طراحی استفاده کنید

وقتی چند طراح درگیر یک کار هستند، اطمینان از یکپارچگی و ثبات در طراحی وب‌سایت یا اپلیکیشن می‌تواند به یک عملیات مهم تبدیل شود. چرا که ما ممکن است با تغییرات بی‌شماری از یک مؤلفه UI مواجه شویم، بدین معنا که کار تکراری در پروژه انجام شده است. به گفته InVision، یک سیستم طراحی «یک مجموعه از مولفه‌های قابل استفاده مجدد است که توسط استانداردهای واضحی راهنمایی شده و می‌توانند با هم ترکیب شوند تا هر تعداد درخواستی را بسازند.»

به‌عنوان مثال سیستم طراحی IBM Carbon، مخزنی از دارایی‌هایی جامع ارائه می‌دهد که شامل کدها و مدارکی که باید طراحان و توسعه دهنگان برای کار به روی یک پروژه UI به آن دسترسی داشته باشند می‌شود. با این کار، تیم طراحی می‌تواند سریع‎تر و هوشمندتر کار کند. به نوعی سیستم طراحی، یک کتابخانه الگویی با تمامی مؤلفه‌های UI در یک پروژه خاص ایجاد می‌کند که از این الگوها برای ثبات و نگهداری راحت‌تر مؤلفه‌های رابط کاربری استفاده می‌شود.

فایل‌های طراحی را مرتب کنید

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

Monzo در این باره می‌گوید «از اولین فایل.sketch که در Monzo می‌سازیم، ما مراقب هستیم که پرونده‌های طراحی خود را بسیار مرتب و منظم ترتیب دهیم؛ و ما از یک طراح به یک تیم ۱۳ نفره رشد کرده‌ایم، حفظ یک محیط طراحی معقول واقعاً ارزشش را داشته است.» زمان گذاشتن برای مرتب کردن فایل‌های طراحی و نام‌گذاری لایه‌ها و فولدرها کار کردن به روی این فایل را چه برای طراح آینده چه خودمان ساده‌تر می‌کند. تیم توسعه‌دهنده نیز بابت این کار از شما ممنون خواهد شد!

مقالات مرتبط