راهنمای مطالعه
در کنار بالا بردن زمان ماندن کاربر روی سایت و کم کردن نرخ خارج شدن از سایت، هدف اصلی طراحی رابط کاربری این است که کاربر بتواند تا جای ممکن تجربه لذتبخش و بدون دردسری روی سایت شما داشته باشد و همانند هر نوع طراحی دیگری، داشتن ابزار مناسب میتواند به شما کمک کند.
اگر میخواهید وارد عرصه طراحی رابط کاربری شوید، این ۲۲ نکته درباره UI که حاصل ۱۰ سال تجربه در این زمینه است میتواند به شما کمک کند نتیجه بهتری بگیرید.
-
بدانید برای چه کسی طراحی میکنید
وظایفی همانند تحقیق کاربر، وایرفریمینگ، تست و طراحی معماری اطلاعات اغلب جزو مسئولیت یک طراح تجربه کاربری (UX) است؛ اما این اواخر چیزی که ما میبینیم ادغام این دو طراحی UI/UX است. بر اساس آماری که به دست آمده ۶۶% آگهیهای درخواست طراح UX از او تواناییهای UI را نیز درخواست میکنند، بنابراین اگر برای طراحان تجربه کاربری مهم شده است که درباره طراحی بصری، برندینگ و تایپوگرافی نیز اطلاعاتی داشته باشند، باید طراحان UI نیز درگیر این مسئله شوند، یا حداقل دانش اولیه درباره تواناییهای UX داشته باشند.
یک طراح رابط کاربری (UI designer) که حتی به اندازه خیلی کم درگیر پرسونا، وایرفریم و طراحی اطلاعات که اغلب کار یک طراح UX است شود، با رنگ و نوع گزینهای که توسط افرادی که از آن محصول یا خدمات استفاده میکنند، تعامل برقرار خواهد کرد نه تنظیمات سبک محصول یا خدمات. با زمان گذاشتن برای شناخت کاربرانی که برایشان چیزی طراحی میشود، طراحان UI رابطهایی ایجاد خواهند کرد که با نیاز کاربر، چه از لحاظ بصری چه عملکرد، سازگار باشد.
-
از انتخابهای بیشمار بپرهیزید
مارک زاکربرگ یک کمد خیلی ساده دارد، تمام تیشرتهای او در رنگ خاکستری هستند. به گفته خودش: «من واقعاً میخواهم زندگیام را ساده کنم تا کاری کنم بتوانم کمترین تصمیمات ممکن را بگیرم.» این اصل در طراحی رابط نیز صدق میکند، چرا که هرچه گزینههای بیشتری پیش پای کاربر بگذارید او را بیشتر گیج میکنید و موجب میشوید بیش از حد به ارزیابی بپردازند و در نهایت کمتر علاقهمند شوند که یک عملی را انجام دهند. هر جا که ممکن است ما باید گزینههای موجود را محدود کنیم، یا حداقل گزینهها را در جایی از مسیر که مرتبط به نظر نمیرسد مخفی کنیم.
-
با گزینههای پیشفرض مستقیم به کاربر کمک کنید
حالتهای پیشفرضی که در مسیر کاربر قرار میدهیم میتواند بیش از درخواست «انتخاب گزینه مورد نظر» باشد. وبسایتهایی نظیر Skyscanner نزدیکترین فرودگاه به کاربر را پیدا میکند، تاریخهای مربوط به تعطیلات پیش رو را مشخص میکند و به طور پیشفرض تعداد مسافرانی که در این تاریخ پرواز دارند را انتخاب میکند. طراحی حالتهای پیشفرض بر اساس حرکتی که معمول و پیشبینی شده است میتواند تلاش کاربر را کمتر کرده و موجب شود زودتر به گزینههای انتخابی خود برسد.
-
حرکتی به روی حالات خالی انجام دهید
سبد خرید پر نشده، لیست پخش موسیقی خالی و رابط جستجوی پیشفرض میتواند اغلب به کاربر حس پوچی بدهد. به سایت Tidal توجه کنید که کاربرانی که «هیچ آلبومی ندارند» را به پیشنهادهای برتر خود راهی میکند. به جای ایجاد بنبست، ما باید مسیرهای خالی را با فرصتها و گزینههایی که برای کاربر مفید خواهد بود پر کنیم.
-
پیغامهای خطا را خلاقانه طراحی کنید
در دنیای دیجیتال، گاهی ممکن است اشتباهی رخ دهد و طراحی نکردن برای این حالت میتواند موجب شود کاربر احساس ناخوشایندی داشته باشد. بهعنوان طراحی رابط کاربری، صفحات مشکلدار یا خطاها را طوری بسازید که تأثیر مثبتی روی کاربر بگذارد نه اینکه پیام پیچیده و نامفهومی به او بدهد. برنامه Kitchen Stories این کار را بسیار هوشمندانه انجام داده است، وقتی کاربر به یک صفحه خالی در جستجوی یک دستور آشپزی میرسد، عذرخواهی کرده و یک فراخوان عمل ارائه میدهد که به کاربر این امکان را میدهد درخواست جدیدی ارسال کند.
-
گزینهها را محدود کنید
علاوه بر دستهبندی کردن گزینهها، ما میتوانیم آنها را با تقسیم کردن در فرآیندهای مختلف سادهتر کنیم. ممکن است تصور کنید انبارداری اپل برای آیفون XR یک لیست ماتریکس بزرگ با صدها محصول در انواع رنگ، سایز و شبکه است؛ اما وقتی کاربر به روی سایت اپل میرود تا یک آیفون XR سفارش بدهد، یک رابط مرحله به مرحله ساده به او این امکان را میدهد گزینههای پیش رویش را محدود کرده و هر بار یکی را انتخاب کند. اگر گزینههای پیکربندی زیادی را به کاربر ارائه دهیم، انتخاب را برای او همانند بالا بردن یک وزنه سنگین، دشوار میسازیم.
-
مقاومت را کم کنید
طراحی ما باید تا جای ممکن برای کاربر ساده باشد تا بتواند عملکردهای مورد نظر را در آن به راحتی انجام دهد. وقتی از طریق اپ موبایل وارد Slack میشوید، این اپلیکیشن یک لینک تایید «جادویی» به ایمیلتان ارسال میکند تا مجبور نباشید مراحل یادآوری و تایپ کردن رمز را هر بار تکرار کنید.
بار را به روی دوش رابط کاربری بگذارید نه روی دوش کاربر، با این کار موجب میشوید کاربر برای به پایان رساندن یک فرآیند در وبسایت یا اپلیکیشن شما مقاومت کمتری نشان دهد. اگر تکنولوژی داریم که بتواند تعاملات رابطهای ما را سریعتر کند، باید هنگام طراحی آن را در نظر بگیریم.
-
فقط اطلاعاتی که نیاز دارید را بگیرید
برای اینکه مسیری برای کاربر ایجاد کنیم که کمترین مقاومت را در آن انجام دهد، باید تا جای ممکن از او اطلاعات کمی بگیریم. هرچه کاربر اطلاعات کمتری وارد کند، احتمال اینکه یک فرآیند را تکمیل کند بیشتر است.
مقاله مرتبط: ١٠ سایت برای آموزش آنلاین UI و UX
سایتی نظیر LinkedIn از کاربر اطلاعات خیلی کم و اولیه میخواهد که شامل نام، نام خانوادگی، ایمیل و یک پسورد برای ورود میشود. سپس در مرحله تکمیل پروفایل به او این امکان را میدهد تا اطلاعات شخصی خود را تکمیل کند. اگر کسی مجبور بود هنگام ثبتنام در سایت لینکداین تمام اطلاعات حرفهایاش را وارد کند، هیچوقت در این سایت ثبتنام نمیکرد.
-
حس پیشرفت القا کنید
شرایطی وجود دارد که در آن فرمهای طولانی و عملکردهای پی در پی یک ضرورت هستند. بهعنوان مثال، بسیاری از درخواستهای مالی نیازمند وارد کردن اطلاعات زیاد و زمان کافی برای پر کردن فرم هستند. وقتی در اپلیکیشن Pinterest ثبتنام میکنید، یک نشانگر در صفحه وجود دارد که به شما نشان میدهد در کدام مرحله از یک فرآیند هستید که با این کار به کاربر این اطلاع را میدهد که چقدر مانده تا به هدفش برسد. این کار موجب میشود کاربر از اینکه نمیداند چه زمانی تمام مراحل کارش به اتمام میرسد عصبی و مضطرب نشود، بنابراین احتمال اینکه بخواهد صفحه را ترک کند کمتر است.
-
به پیشفرضها و عادات دقت کنید
بهعنوان طراح رابط کاربری، ما به طور طبیعی میخواهیم خلاقیت به خرج دهیم و روشهای جدید و هیجانانگیز بر سر راه کاربر قرار دهیم تا با محصول دیجیتال ما تعامل کرده و آن را تجربه کند؛ اما در عین حال ما باید یک تعادلی بین اصالت و آشنایی ایجاد کنیم تا مطمئن شویم کاربران ما مجبور نیستند زمان زیادی صرف کنند تا با فضایی که ما در اختیارشان قرار میدهیم کار کنند. اپلیکیشنهایی همانند Snapchar، با تغییراتی که ایجاد کردند بسیاری از کاربران قدیمی را گیج کردند به طوری که نیویورک تایمز یک «راهنمای استفاده از اسنپ چت برای کسانی که نمیتوانند با آن کار کنند» ارائه کرد.
در این راهنما اطلاعاتی نظیر اینکه «میتوانید صفحه را در هر جهت که خواستید حرکت دهید یا حتی برای دسترسی به صفحات مختلف از دو انگشت استفاده کنید» میشد. برای چنین کاری زمان زیادی لازم است تا نحوه کار با این اپلیکیشن را بفهمید و درنهایت بخواهید استفاده موثری از آن داشته باشید.
کاربران جوانتر و جدیدتر اسنپ چت از این تغییرات استقبال کردند، اما قدیمیترها و افرادی که سن بالاتری داشتند و به کلیک کردن یا ضربه زدن روی صفحه عادت کرده بودند خیلی از این تغییرات راضی نبودند. چنانچه وب رشد کرده است، تعداد عاداتی که برای قرار گرفتن المانها (نظیر سبد خرید در بالا سمت راست یا منو در بالا سمت چپ) بیشتر شده و باید هنگام طراحی در نظر گرفته شوند. رابط کاربری ما باید کاربر را به وجد و هیجان بیاورد، اما در عین حال باید به اندازه کافی قابل پیشبینی باشد تا کاربر استفاده راحتتری از آن داشته باشد و نرخ خارج شدن از صفحه کاهش یابد.
-
بازخوردهای تصویری ارائه دهید
بازخورد یک هدیه است و باید در طراحی رابط کاربری نیز همینطور با آن رفتار شود. Snackbars گوگل یک تعامل هوشمند است که در سیستم طراحی متریال زندگی میکند. Snackbars به طور موقت به روی صفحه یک اپلیکیشن یا سایت ظاهر میشود تا دستورالعملهای متنی، خطاها یا اذعانهایی که کاربر را درباره عواقب هر حرکتی که انجام میدهند آگاه میسازد ارائه میدهد، چه بخواهد ذخیره عکس باشد، چه ارسال ایمیل یا «تلاش مجدد» وقتی که اپلیکیشن به مشکل برخورد میکند.
بهعنوان طراح رابط کاربری، ما باید بازخوردهای تصویری برای هر تعامل کلیدی در رابطهایمان ایجاد کنیم. اگر چیزی به سبد خرید کاربر اضافه شده، باید به او اطلاع داده شود. اگر پرداختشان با موفقیت انجام شده، به آنها اطلاع دهید و پیغام تشکر ارسال کنید و سپس آنها را به جایی که اطلاعات مربوط به تحویل کالا یا برگشت زدن آن نوشته شده هدایت کنید. راهنمای تصویری و متحرک میتواند به کاربران کمک کند تا از تکمیل شدن یک عمل مطلع شود، چه بخواهد یک عمل کوچک باشد چه بزرگ و درنهایت به او حس یک دستاورد را القا کند و کمک کند نگرانی که بابت حرکتی که در حال انجام بود داشت کاهش یابد.
-
از محتوای تولید شده توسط کاربر استفاده کنید
اغلب افراد با توجه به نظر دیگران خرید میکنند. به همین دلیل است که بسیاری از سایتهای تجارت الکترونیکی یک بخش بزرگی از سایت را به نظرات و بررسیهای کاربران اختصاص میدهند. برند عینک دودی Meller با اضافه کردن تصاویر از کاربرانی که از محصولی که خریده بودند رضایت داشتند و با لذت از آن استفاده میکردند در صفحه کالای خود توانست نرخ تبدیل را ۱۳% افزایش دهد.
اگر محتوای تولید شده توسط کاربر (UGC) برای برند یا شرکتی که برایش رابط کاربری طراحی میکنید دارید، استفاده از آن در صفحات وبسایت و اپلیکیشن میتواند نرخ تبدیل را بالا ببرد، بخصوص اگر مخاطبین نوجوانان باشند.
-
با کاربران همانند عضوی از گروهتان رفتار کنید
شاد کردن کاربران با محصولات و خدمات یک چیز است، اما آنها میتوانند طرفداران ما، یا حتی بخشی از تیم بازاریابی ما باشند. ویدیوی محصول جدید GoPro روی صفحه اول وبسایتش کاملاً توسط مشتریانش که از دوربین HERO7 استفاده کرده بودد گرفته شده است.
استفاده از ویدیویی که توسط کاربران از یک محصول گرفته شده، قابلیت آن دوربین را برای مشتریان آینده این برند نشان میدهد و همین مسئله موجب میشود تمام ۲۵۰۰۰ نفری که ویدیوهایشان را برای این سایت ارسال کردند احساس کنند عضوی از مجموعه GoPro هستند. اگر ما مخاطب وفاداری داریم، روشهای بیشماری وجود دارد که میتوانیم از صدا و محتوای آنها استفاده کنیم، بنابراین باید چنین مسئلهای را در طراحی رابط کاربری مد نظر بگیریم.
-
از تصاویر برای راهنمایی کاربران استفاده کنید
تصاویر زیبا این قدرت را دارند که یک رابط کاربری را از نظر بصری زیباتر کنند، اما در عین حال میتواند برای جلب توجه کاربر به جای خاصی در صفحه یا حتی صفحهنمایش استفاده شود. اگر فردی در تصور باشد، کاربران به طور ناخودآگاه خط دید او را دنبال میکنند، این مسئله به طراحان UI این فرصت را میدهد تا از آن برای اشاره به شماره تماس یا انجام کاری خاص یا دادن اطلاعات مفید به کاربر استفاده کند.
وبسایت عینک آفتابی Hut از این مفهوم در فوتر وبسایت خود استفاده کرد، او این کار را با هدایت خط نگاه دو نفر به سمت ثبتنام و اضافه کردن ایمیل انجام داده است. این در حالی است که این فقط تصویر دو مدل است که به دوردستها خیره شدهاند.
-
از فضای معکوس (منفی) به روشهای زیرکانه استفاده کنید
این یک اشتباه رایج برای طراحان UI است که میخواهند اطلاعات زیادی را در هر فضایی قرار دهند، اما با توجه به اینکه این مسئله موجب میشود کاربر نظرش به چند جای مختلف جلب شود و مجبور باشد به نقاط مختلف صفحه نگه کند، موجب زود خسته شدن او میشود.
صفحه ورودی سایت Dropbox از فضاهای خالی به شکل خوبی استفاده کرده و به هر اطلاعات و اِلمانی در صفحه فضای کافی بخشیده است که اطلاعاتی خلاصه درباره مزایای محصول به کاربر ارائه میکند. هرچه فضای اطراف اطلاعات مهم و فراخوان عملها خالیتر باشد، کاربران بیشتر به آن جذب میشوند، چرا که اطلاعات و المانهای دیگری در صفحه وجود ندارد که حواسشان را پرت کند.
-
با طراحی برای موبایل آغاز کنید
در سال ۲۰۱۸، تقریباً ۵۲.۲ درصد از ترافیک تمامی وبسایتها از طریق موبایل ایجاد شده بود، این مسئله ایجاد صفحات بهینهشده برای موبایل را مهمتر از قبل میسازد. طراحی برای افرادی که یک سایت را در کامپیوتر میبینند تا به امروز بوم مورد نظر طراحان رابط کاربری بوده است که معمولاً با بنرهای ویدیویی و فعل و انفعالاتی متحرک دیگر همره بود، اما وقتی این موارد را برای طراحی برای موبایل مقایسه کنیم، مجبور به خاموش کردن یا کاهش این حرکات خواهیم شد.
بهعنوان یک جایگزین، اگر اول برای موبایل طراحی کنیم میتوانیم خیلی سادهتر این موارد غیرضروری را حذف کنیم و به روی مواردی که برای کاربر و عملکرد او به روی صفحه مهم است تمرکز کنیم. این کار همچنین موجب میشود طراحی بهتری برای دسکتاپ داشته باشیم و ویژگیهایی را به سایت اضافه کنیم که مناسبتر هستند.
-
مجوز حقوقی مناسب را بگیرید
هیچچیز بدتر از دستکاری یک رابط کاربری زیبا نیست، در حالیکه کار را برای تیم توسعه آماده میکنیم متوجه شویم فونتی که استفاده کردیم نیاز به خرید مجوز حقوقی دارد و حتی بدتر، برای وب بهینه نیستند. مجوزهای نوشتاری انواع مختلف دارد، برخی بابت هر کاربر هزینه میگیرد، برخی هربار که استفاده شود و برخی دیگر فقط شامل یکبار خرید میشوند. آژانس برندینگ Blue Egg تفسیری عالی در این باره دارد.
هنگام انتخاب فونت، ضروری است که پیامدهای مالی ناشی از آن و همچنین قابلیت ارائه فونت در وب را در نظر بگیریم. اگر بودجه ما کم است، راهحلهای اوپن سورس نظیر فونتهای گوگل وجود درد که صدها فونت مختلف را به صورت رایگان در اختیارتان قرار میدهد.
-
جملات مورد نظر رابطهایتان را بنویسید
وقتی ما همهچیز را به عقب برگردانیم و طراحی را به یک استخوانبندی اولیه تبدیل کنیم، رنگها، فونتها، تصاویر و انیمیشنها را نیز حذف کنیم، تنها چیزی که برایمان باقی میماند نوشتهها است. اغلب ما علاقه داریم اول سراغ طراحی ظاهری برویم و جای نوشتهها را با lorem ipsum مشخص کنیم؛ اما اگر ابتدا زمان بگذارید و نوشتههایتان را مشخص کنید میتوانید به روی طراحی کلی، پیامها، داستانها و لحن نوشتهها روی صفحه تأثیر بهتری بگذارید.
ما میتوانیم ترتیب صفحاتمان را هنگام خواندن نوشتههای کپی به طور مجزا درک کنیم، این کار به ما این فرصت را میدهد جملات و کلماتی که استفاده میکنیم را با تصاویر هماهنگ کنیم و تأثیر بیشتری به روی آنچه میخواهیم بگوییم بگذاریم.
-
تا جای ممکن طراحی onboard داشته باشید
به گفته User Onboard، Onboarding به معنای «فرآیند افزایش احتمال اینکه کاربران جدید هنگام استفاده از محصول شما به موفقیت برسند» است و بهعنوان طراحان رابط کاربری، ما نقش کلیدی در تصمیمگیری اینکه چطور محصول یا خدمات دیجیتالمان را به کاربران معرفی کنیم، داریم.
برنامه یادگیری زبان Duolingo از یک جریان onboarding برای اینکه کاربران را مستقیم به جایی که باید عملی انجام دهند هدایت کند استفاده کرده است. با این کار میتواند کاربران جدید را با محصول و ویژگیهای آن آشنا کرده و نمونهای از نحوه عملکرد برنامه به آنها نشان دهد. همه این کارها پیش از ثبتنام روی اپلیکیشن است؛ بنابراین کاربر این شانس را دارد تا پیش از اینکه حرکتی انجام دهد و حساب کاربری باز کند محصول را تست کند.
مقاله مرتبط: https://mag.hostiran.net/ui-choices-that-damage-ux/
وقتی رابطهای ما شامل تعاملات ناآشنا و پیچیده باشد، باید به کاربر یاد دهیم چطور از آنها استفاده کند، چه بخواهد توسط چند اسلاید باشد، یا یک ویدیو آموزشی. وقتی به کاربران بگویید «چطور یک برنامه کار میکند» به آنها خود را معرفی کرده و پریشانی کمتری برای او ایجاد میکنید و موجب میشوید تجربه کاملتری از برنامه یا سایت شما داشته باشند.
-
توسعهدهندگان را در کار خود درگیر کنید
از آنجایی که توسعهدهندگان درنهایت باید طراحی ما را بسازند، ارزشش را دارد از همان مراحل اولیه پروژه آنها را درگیر کار خود کنید. طراحان چیزی را میسازند که کاربر میبیند، اما توسعهدهندگان این تجربه را با بالا بردن سرعت لود سایت، به حداکثر رساندن کارایی و بهبود هر آنچه در پشتصحنه رخ میدهد بهتر خواهند کرد.
درگیر کردن مداوم توسعهدهندگان در طول پروسه طراحی به آنها این امکان را میدهد رابط کاربری را فراتر از تصویر ببینند و به آنها این فرصت را میدهد بهتر بتوانند ایده اینکه چطور رابط کاربری ما را تا جای ممکن سادهتر طراحی کنند در ذهن بپرورانند.
-
از یک سیستم طراحی استفاده کنید
وقتی چند طراح درگیر یک کار هستند، اطمینان از یکپارچگی و ثبات در طراحی وبسایت یا اپلیکیشن میتواند به یک عملیات مهم تبدیل شود. چرا که ما ممکن است با تغییرات بیشماری از یک مؤلفه UI مواجه شویم، بدین معنا که کار تکراری در پروژه انجام شده است. به گفته InVision، یک سیستم طراحی «یک مجموعه از مولفههای قابل استفاده مجدد است که توسط استانداردهای واضحی راهنمایی شده و میتوانند با هم ترکیب شوند تا هر تعداد درخواستی را بسازند.»
بهعنوان مثال سیستم طراحی IBM Carbon، مخزنی از داراییهایی جامع ارائه میدهد که شامل کدها و مدارکی که باید طراحان و توسعه دهنگان برای کار به روی یک پروژه UI به آن دسترسی داشته باشند میشود. با این کار، تیم طراحی میتواند سریعتر و هوشمندتر کار کند. به نوعی سیستم طراحی، یک کتابخانه الگویی با تمامی مؤلفههای UI در یک پروژه خاص ایجاد میکند که از این الگوها برای ثبات و نگهداری راحتتر مؤلفههای رابط کاربری استفاده میشود.
-
فایلهای طراحی را مرتب کنید
چه خوشتان بیاید چه نه، برخی از طراحان نامرتب هستند که البته در طی پروسه خلاقیت شاید منطقی به نظر برسد، اما این مسئله موجب میشود هر بار که یک فایل طراحی را انتخاب میکنید مجبور باشید زمان قابلتوجهی را بابت اینکه ببینید هر لایه مربوط به چه المانی است صرف کنید.
Monzo در این باره میگوید «از اولین فایل.sketch که در Monzo میسازیم، ما مراقب هستیم که پروندههای طراحی خود را بسیار مرتب و منظم ترتیب دهیم؛ و ما از یک طراح به یک تیم ۱۳ نفره رشد کردهایم، حفظ یک محیط طراحی معقول واقعاً ارزشش را داشته است.» زمان گذاشتن برای مرتب کردن فایلهای طراحی و نامگذاری لایهها و فولدرها کار کردن به روی این فایل را چه برای طراح آینده چه خودمان سادهتر میکند. تیم توسعهدهنده نیز بابت این کار از شما ممنون خواهد شد!