وبسایت‌ها فراتر از چند صفحه هستند که به هم لینک می‌دهند. وبسایت یک «رابط» (Interface) است؛ فضایی که در آن افراد و چیزهای مختلف (در این مورد: مشتری‌ها و ارائه‌دهنگان خدمات و محصولات) با هم تعامل می‌کنند.
این تعامل برای بازدیدکننده‌ها یک تجربه خلق می‌کند؛ تجربه‌ای که در طراحی رابط کاربری وب سایت باید از بی‌نقص بودن آن مطمئن شوید. هدف اصلی طراحی رابط کاربری (به عنوان زیرمجموعه‌ای از طراحی تجربه کاربری) هم همین است: بهبود تجربه کلی، نه فقط خلق یک رابط زیبا و چشم‌نواز.
در این پست 10 نکته طراحی رابط کاربری وب سایت برای خلق تجربه‌ای فراموش نشدنی برای بازدیدکنندگان وبسایت‌تان را بررسی می‌کنیم.
فهرست مطالب
نکات طراحی رابط کاربری وب سایت
برای خلق یک تجربه کاربری روان، ساده و به معنای واقعی کلمه خارق‌العاده، نکته‌های زیر را به ذهن بسپارید:
کاربران وبسایت را بشناسید
اصولا در حوزه خدمات دیجیتال مارکتینگ همه چیز حول محور “کاربر” و مشتری” می‌گردد؛ در طراحی رابط کاربری وب سایت هم همینطور است.
پیش از هرگونه اقدامی باید بدانید کاربران شما چه کسانی هستند. از تمام اطلاعات جمعیت‌شناختی یا دموگرافیکی که انواع ابزارهای تجزیه و تحلیل در اختیارتان قرار می‌دهند، استفاده کنید. اما مهمتر از آن، جواب سوالات زیر را دقیقا مشخص کنید:
- مشتریان من به چه چیزی نیاز دارند؟
- چه چیزی مانع رسیدن آنها به اهدافشان می‌شود؟
برای رسیدن به این سطح از همدلی، باید:
- آماری که دارید را به دقت تجزیه و تحلیل کنید؛
- افرادی که از وبسایت شما استفاده می‌کنند را بشناسید، و با آنها صحبت کنید؛
- ببینید آنها از محصول شما (و حتی دیگران) چگونه استفاده می‌کنند؛
- و از آنها سوالات عمیق‌تری از “نظرتون راجع به این طرح چیه؟” بپرسید.
بعد از شناسایی اهداف مشتری‌ها و چالش‌هایی که برای رسیدن به آن دارند، بهتر متوجه خواهید شد که باید چکار کنید تا طراحی رابط کاربری وب سایت شما خواسته‌های آنها را برآورده کند.
پیشنهاد: فقط به دانستن «خواسته‌های» کاربران‌تان راضی نشوید! عمیق‌تر بررسی کنید، و ببینید به چه چیزی «نیاز» دارند. به هر حال، خواسته‌ها از نیازها نشات می‌گیرند. اگر بتوانید نیاز عمیق کاربر را برطرف کنید، خواسته‌ها و الزامات اساسی آنها را همزمان برطرف خواهید کرد.
نحوه استفاده از طراحی رابط کاربری وب سایت را مشخص کنید
قبل از طراحی UI وبسایت، باید نحوه استفاده افراد از آن را مشخص کنید. با رواج هرچه بیشتر دستگاه‌های لمسی، این موضوع مهمتر از چیزیست که تصور می‌کنید.
افراد از وبسایت‌ها و برنامه ها به دو روش کلی استفاده می‌کنند:
- مستقیم؛ مثل ضربه زدن (تپ کردن) روی یک دکمه، کشیدن صفحه به چپ و راست، کشیدن و رها کردن آیتم‌ها با نوک انگشت
- غیر مستقیم؛ مثل اشاره و کلیک با ماوس، استفاده از کلیدهای میانبر، تایپ کردن، کشیدن روی Wacom
اینکه کاربران شما بیشتر چه افرادی هستند و از چه دستگاه‌هایی استفاده می‌کنند، تاثیر مهمی روی طراحی رابط کاربری وب سایت شما می‌گذارد.
مثلا اگر درحال طراحی UI برای افراد مسن یا افرادی با شرایط خاص فیزیکی هستید، زیاد روی حرکات دقیق با انگشت‌ها مانور ندهید. یا اگر کاربران شما بیشتر نویسند‍ه یا برنامه‌نویس هستند، فراموش نکنید که آنها اکثرا پای سیستم می‌نشینند و از صفحه کلید بیشتر از ماوس استفاده می‌کنند.
انتظارات را تعیین کنید
تعامل با سایت شما برای کاربر نتایج و عواقبی به همراه دارد؛ حالا این نتیجه می‌تواند پرداخت هزینه باشد، پاک کردن تمام اطلاعات یا … و قاعدتا هرجا که عواقبی وجود دارد، اضطراب هم هست.
بنابراین، در طراحی رابط کاربری وب سایت مطمئن شوید که کاربران دقیقا می‌دانند پس از کلیک روی این دکمه یا آن گزینه دقیقا چه اتفاقی می‌افتد. با تکنیک‌های طراحی، پاپ‌آپ یا متنی کوتاه می‌توانید اینکار را انجام دهید.
با طراحی:
- برجسته کردن دکمه مربوط به اقدام مدنظر
- استفاده از یک نماد به‌طور گسترده (مثلا سطل زباله برای دکمه حذف، علامت بعلاوه برای افزودن چیزی، یا ذره‌بین برای جستجو) در ترکیب با کپی یا همان متن
- انتخاب رنگ با معنی مناسب (مثلا سبز برای دکمه “تایید” و قرمز برای “توقف” (هرچند حالت حرفه‌ای‌تر این است که این دکمه را تا حدودی نامرئی کنید)
با متن:
- انتخاب کلمات واضح و شفاف برای دکمه‌ها
- درج متن‌های کوتاه ترغیب و تشویق‌کننده در بخش‌های خالی
- نمایش هشدارها و درخواست برای تایید
نکته: برای اقداماتی با عواقب جبران‌ناپذیر، مانند حذف دائمی چیزی، منطقی است که از کاربرها بپرسید آیا مطمئن هستند یا نه.
در طراحی UI وب سایت، اشتباهات کاربر را پیش‌بینی کنید
اصولا دو راه برای جلوگیری از اشتباه کاربران هنگام تعامل با رابط کاربر وجود دارد:
- همان اول کار از بروز آنها اشتباه کنید؛
- یا اینکه راهی برای رفع آنها بعد از وقوع اشتباه به کاربر ارائه دهید.
تکنیک‌های زیادی در طراحی رابط کاربری وب سایت برای جلوگیری از اشتباهات وجود دارد. مثلا:
- تشخیص اشتباه بودن آدرس ایمیل توسط خود فرم‌ها؛
- تا زمانی که همه فیلدها را پر نشوند، دکمه‌ها غیرفعال می‌مانند؛
- پاپ‌آپ‌هایی که از کاربر می‌پرسد “آیا می‌خواهید سبد خریدتان را رها کنید؟” (بله، تخفیف شگفت‌انگیزتون فقط 2 هزارتومن از کل مبلغ کم کرد)؛
- و …
پیش‌بینی از تلاش برای رفع آنها به شدت به بهبود تجربه کاربرها کمک می‌کند. البته، گاهی هم باید بگذارید کاربر اشتباه کند. اینجاست که پیام‌های خطای دقیق وارد عمل می‌شوند.
هنگام نوشتن پیام‌های خطای طراحی رابط کاربری وب سایت تان، مطمئن شوید که آنها دو کار را انجام می‌دهند:
- مشکل را توضیح می‌دهند.
- نحوه برطرف کردن آن را توضیح می‌دهند.
برای مواردی که لزوما خطای کاربر محسوب نمی‌شوند نیز می‌توانید از همین استراتژی استفاده کنید. مثلا اگر چیزی را حذف کند، اما امکان بازیابی آن وجود دارد، چنین پیامی را به او نمایش دهید: “همیشه می‌توانید موارد حذف‌شده را با رفتن به سطل زباله و کلیک روی گزینه بازیابی برگردانید”
نکته: اصل پیش بینی خطای کاربر را اصل پوکایوکه (poka-yoke) می‌نامند؛ یک اصطلاح ژاپنی که معمولا “خطاناپذیرسازی” ترجمه می‌شود.
سریعا به کاربران بازخورد دهید
در دنیای واقعی، محیط به ما بازخورد می‌دهد. صحبت می‌کنیم و دیگران (معمولاً) پاسخ می‌دهند؛ سگی را نوازش می‌کنیم و او دمش را تکان می‌دهد و …
اما رابط‌های دیجیتالی کار خاصی نمی‌کنند. در نتیجه ما نمی‌فهمیم آیا همه‌چیز خوب است؟ باید صفحه را رفرش کنیم؟ سیستم را ری‌استارت کنیم؟ یا آن را از پنجره به بیرون پرت کنیم؟
پس در طراحی رابط کاربری وب سایت حتما از المان‌هایی مانند انیمیشن بارگذاری، نوار پیشرفت، تغییر حالات دکمه‌ها و چنین چیزهایی استفاده کنید. فقط مطمئن شوید که همه چیز سریع اتفاق می‌افتد. حدود 3 ثانیه عدد معقولی به نظر می‌رسد.
نکته: اگر صفحه‌ای زیر 5 ثانیه بارگذاری می‌شود، از نوار پیشرفت استفاده نکنید. این المان در واقع باعث می‌شود کاربر فکر کند باید زمان بیشتری را منتظر بماند.
به محل و اندازه المان‌های طراحی رابط کاربری وب سایت دقت کنید
قانون فیتس یا Fitts، اصل اساسی تعامل انسان و کامپیوتر (HCI) می‌گوید:
“زمان دستیابی به هدف تابعی از فاصله و اندازه هدف است”
به عبارت دیگر، هرچه چیزی نزدیکتر یا بزرگتر باشد، سریعتر می‌توانید مکان‌نما یا انگشت‌تان را روی آن قرار دهید.
مشخصا این قانون در طراحی رابط کاربری وب سایت کمک زیادی می‌تواند به ما بکند؛ مخصوصا در این سه مورد:
- دکمه‌ها و سایر “کلیک تارگت‌ها” (مثل آیکن‌ها و نمادها) را آنقدر بزرگ کنید که به راحتی قابل مشاهده و کلیک باشند. این نکته را به ویژه هنگام طراحی لیست‌ها و منوها در ذهن داشته باشید، تا کاربر با یک تپ همزمان سه گزینه را با هم انتخاب نکند.
- دکمه‌های مربوط به رایج‌ترین اقدامات را بزرگتر و برجسته‌تر کنید.
- ناوبری (و سایر عناصر بصری متداول مانند بخش جستجو) را در گوشه‌های صفحه قرار دهید. اینکار دقت را تا حد قابل توجهی افزایش می‌دهد.
همینطور که به محل قرارگیری و اندازه المان‌ها در طراحی رابط کاربری وب سایت فکر می‌کنید، مدل تعامل را در نظر داشته باشید. اگر سایت شما به جای پیمایش عمودی به پیمایش افقی احتیاج دارد، به این فکر کنیدکه کجا و چگونه کاربران را به این تعامل غیرمعمول هدایت کنید.
استانداردها را نادیده نگیرید
گاهی طراحان بسیار خلاق UI تصمیم می‌گیرند همه چیز را از اول طراحی کنند؛ ایده‌ای که همیشه بهترین نیست. اما چرا؟
چون یک نسخه بازسازی‌شده از یک تعامل یا UI آشنا “بار شناختی” را به فراید تعامل اضافه می‌کند؛ این باعث می‌شود کاربران درباره فرایندی که قبلا یاد گرفته‌اند، دوباره فکر کنند. بی‌دلیل نیست که چرا نوار منوی Google Docs تقریبا همه گزینه‌های مشابه Microsoft Word قبل از ویستا را دارد.
فراموش نکنید که در طراحی رابط کاربری وب سایت، می‌توانید چرخ را به هر شکلی که می‌خواهید دوباره اختراع کنید؛ اما به شرطی که واقعا آن را بهبود دهید.
یادگیری رابط کاربری‌تان را ساده کنید
همه‌مان می‌دانیم که هرچه چیزی ساده‌تر باشد، به خاطر سپردن آن در حافظه کوتاه مدت آسان‌تر است. پس تعداد چیزهایی که کاربر باید برای استفاده مداوم و موثر از رابط کاربری‌تان بداند را محدود کنید.
این ایده با قانون حفظ پیچیدگی تسلر (Tesler’s Law) هم مطابقت دارد. این قانون می‌گوید:
“طراحان UI باید تا حد امکان رابط کاربری خود را ساده کنند”
این می‌تواند به معنای پنهان کردن پیچیدگی‌ها پشت یک رابط کاربری ساده باشد.
یک مثال معروف از عدم رعایت این قانون در محصول، Microsoft Word است. بیشتر ما معمولا از تب اول ورد استفاده می‌کنیم، اما برخی افراد به تب‌های دیگر هم سرک می‌کشند و هزار کار دیگر با این برنامه قدرتمند می‌کنند.
این منجر به “افشای پیش‌رونده” (Progressive Disclosure) می‌شود؛ مفهومی که براساس آن، ویژگی‌های پیشرفته یک وبسایت/برنامه به یک UI ثانویه سپرده می‌شود.
این اتفاقی است که آن را در طراحی رابط کاربری وب سایت و صفحه اصلی انها زیاد می‌بینیم؛ متن‌های کوتاهی که ویژگی‌های یک محصول یا پکیج‌های خدماتی را مختصر توضیح می‌دهند، و به صفحات فرود مفصل‌تری لینک می‌دهند.
این کار برای طراحی UI نسخه موبایل هم عالی است؛ جایی که ناوبری قوی همیشه یک چالش جدی محسوب می‌شود.
تصمیم‌گیری را برای کاربرها ساده کنید
بسیاری از سایت‌ها به طرز زننده‌ای با فریاد بنر و پاپ‌آپ درحال خراش گوش‌های ما هستند. هنوز مطلب یک سایت درست و حسابی باز نشده است که از ما می‌خواهد در خبرنامه‌اش عضو شویم، پکیج فوق‌العاده‌اش را بخریم و …
به جای اینکه شما هم در طراحی رابط کاربری وب سایت خود دچار این سندروم شوید، از قانون هیکس (Hicks’ Law) استفاده کنید. طبق این قانون:
“هرچه گزینه‌های UI بیشتری به کاربر نمایش دهید، تصمیم‌گیری برای آنها سخت‌تر می‌شود”
این تقریبا روی هر چیزی که طراحی می‌کنید تاثیر می‌گذارد:
- لی اوت یا طرح‌بندی کلی
- منوهای ناوبری
- صفحات قیمت‌گذاری
- صفحه اصلی بلاگ
- قالب محتواها
این لیست همچنان ادامه دارد؛ اما نتیجه ثابت است: هرچه طراحی رابط کاربری وب سایت شما ساده‌تر باشد، کاربران سریعتر و راحت‌تر تصمیماتی مدنظر شما را می‌گیرند. دقیقا به همین دلیل است که صفحات فرود و ایمیل‌های غیرخبرنامه‌ای باید کمترین تعداد CTA را داشته باشند.
نکته: گاهی ممکن است بخواهید کاربران سرعت خود را کاهش دهند، و چند گزینه را در نظر بگیرند. به همین دلیل طرح‌های شبکه‌مانند Pinterest ،Dribbble و بسیاری از وبلاگ‌های دیگر انقدر خوب کار می‌کنند. از این گذشته، گاهی وجود گزینه‌های متعدد یعنی کاربر می‌تواند ایده‌آل‌ترین گزینه ممکن را پیدا کند.
به داده ها گوش دهید
آرزوی همه طراحان UI این است که طرح‌هایشان صرفا بر اساس شایستگی هنری آنها ارزیابی شود؛ اما در دنیای واقعی، بهینه‌سازی طرح شما به اندازه خود طراحی رابط کاربری وب سایت اهمیت دارد.
تحقیق و تست‌های مختلف در روند طراحی خیلی به شما کمک می‌کند، درست مانند داده‌هایی که بعد از لانچ وبسایت به دست می‌آورید. با گوگل آنالیتیکس تقریبا هر داده‌ای که لازم دارید را به دست آورید؛ و میزان کارایی طرح‌تان را مشخص کنید.
اینها مهمترین نکات طراحی رابط کاربری وب سایت بودند!
حالا زمان آن است که چند UI خارق‌العاده را طراحی کنید! اگر هم برای راه‌اندازی کسب‌وکارتان به خدمات حرفه‌ای طراحی رابط کاربری در شیراز و سایر خدمات تبلیغات و بازاریابی دیجیتال احتیاج دارید، روی کمک تیم «دیجیتالیست» حساب کنید.
بهترین رابط‌های کاربری که تا به حال دیده‌اید، مربوط به چه سایت‌هایی هستند؟ منتظر نظرات‌تان هستیم.
