اصول و مبانی طراحی رابط کاربری UI و تجربه کاربری UX

اغلب مردم چند ساعت در روز پای صفحه نمایش دستگاه های دیجیتال مختلف، جایی که میلیاردها صفحه وب یا اپلیکیشن با یکدیگر رقابت دارند، وقت می گذرانند. رابط کاربری (User Interface) و تجربه کاربری (User Experience) دو مقوله بسیار مهم در طراحی وبسایت به شمار می روند در ادامه این مطلب 7 مورد از مهم ترین اصول طراحی UI و UX در وبسایت را به شما معرفی خواهیم کرد.

1- طراحی باید بر روی ایجاد یک تجربه خوب متمرکز باشد.

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

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

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

2- مردم به جای خواندن تمام مطالب وبسایت، آنها را به صورت اجمالی اسکن می کنند.

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

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

3- کاربران سادگی و شفافیت را ترجیح می دهند.

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

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

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

4- در جای مناسبی از خلاقیت استفاده کنید.

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

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

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

5- سعی کنید در بالای صفحات وبسایت توجه مشتری را با یک طراحی خوب جلب کنید.

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

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

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

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

6- اسکرول کردن صفحات وبسایت سریع تر از ورق زدن است.

صفحات وبسایت های امروزی در مقایسه با نمونه های قدیمی از لحاظ عمودی بلندتر هستند؛ برای مثال برخی از فروشگاه های اینترنتی مثل آمازون حدود 17 صفحه (صفحه پرینتی) هستند. اگرچه وبسایت آمازون سابقه درخشانی در کسب و کارهای آنلاین دارد اما طراحی صفحات آن در برخی موارد مطلوب نیست، در حالی که وبسایت کمپانی های بزرگ معمولاً دارای صفحاتی با طول 3 الی 6 صفحه هستند.

یاکوب نیلسن در سال 1997 برخلاف ادعای پیشین خود اذعان داشت که اسکرول کردن (Scrolling) صفحات از ورق زدن (Paging) بهتر است چرا که از کلیک کردن سرعت بیشتری دارد؛ به عبارت دیگر وی معتقد بود که بلندتر بودن صفحه بهتر از تعداد بیشتر صفحات است.

علاوه بر این کلیک هایی که باعث رفرش شدن صفحات می شود، هزینه های زیادی برای کاربران ایجاد می کنند بنابراین آنها خیلی بر روی اجزای صفحات وبسایت کلیک نخواهند کرد. واقعیت این است که میانگین زمان مورد نیاز برای رفرش شدن صفحات وبسایت حدود 5 الی 6 ثانیه بوده اما اسکن کردن یک وبسایت بسیار سریع تر از این زمان امکان پذیر خواهد بود. بنابراین به نظر شما بهتر است 4 صفحه مختلف را در عرض 20 ثانیه باز کنیم یا اینکه یک صفحه بلند را در مدت زمان 5 الی 10 ثانیه اسکن کنیم؟ البته ظهور دستگاه های مدرن نظیر موبایل و تبلت نیز سرعت اسکرول کردن صفحات وبسایت را بهبود بخشیده است.

7- طراحی ریسپانسیو (Responsive) مطلوبی ایجاد کنید.

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

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