اهمیت قابلیت استفاده (Usability) در طراحی وب: فراتر از زیبایی‌شناسی

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

اصول طراحی وب‌سایت خوب و دستورالعمل‌های طراحی مؤثر

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

کاربران چگونه فکر می‌کنند؟

عادات کاربران در وب، تفاوت چندانی با عادات مشتریان در یک فروشگاه فیزیکی ندارد. بازدیدکنندگان:

نگاهی سریع: به هر صفحه جدید نگاهی اجمالی می‌اندازند.

اسکن متن: بخشی از متن را به سرعت مرور می‌کنند.

جستجوی لینک جذاب: به دنبال اولین پیوندی می‌گردند که نظرشان را جلب کند یا به طور مبهم شبیه چیزی باشد که در جستجوی آن هستند.

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

جستجوی سریع: اکثر کاربران به دنبال چیزی جالب (یا مفید) و قابل کلیک هستند.

کلیک و ارزیابی: به محض یافتن گزینه‌های امیدوارکننده، کلیک می‌کنند.

بازگشت سریع: اگر صفحه جدید انتظاراتشان را برآورده نکند، دکمه بازگشت را می‌زنند و به جستجو ادامه می‌دهند.

اهمیت کیفیت و اعتبار:

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

کاربران نمی‌خوانند، اسکن می‌کنند:

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

تصویر اسکن چشم: (در اینجا می‌توانید تصویری از نحوه اسکن چشم کاربران در یک صفحه وب اضافه کنید.)

کاربران وب بی‌حوصله و خواهان رضایت فوری هستند:

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

کاربران به دنبال بهترین گزینه نیستند، بلکه به دنبال گزینه “به اندازه کافی خوب” هستند:

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

کاربران از شهود خود پیروی می‌کنند:

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

کاربران خواهان کنترل هستند:

کاربران می‌خواهند مرورگر خود را کنترل کنند و به ارائه داده‌های ثابت در سراسر سایت متکی باشند. به عنوان مثال:

پنجره‌های جدید ناخواسته: آن‌ها نمی‌خواهند پنجره‌های جدید به طور غیرمنتظره ظاهر شوند.

دکمه بازگشت: می‌خواهند بتوانند با دکمه “بازگشت” مرورگر به صفحه‌ای که قبلاً در آن بوده‌اند، برگردند.

یک قانون خوب: هرگز پیوندها را در پنجره‌های جدید مرورگر باز نکنید، مگر اینکه دلیل بسیار موجهی داشته باشید.

۱۰ اصل طراحی وب موثر

حال که با نحوه تفکر و رفتار کاربران آشنا شدیم، به بررسی ۱۰ اصل کلیدی در طراحی وب می‌پردازیم:

کاربران را وادار به تفکر نکنید (Don’t Make Me Think):

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

اگر ناوبری و معماری سایت شهودی نباشد، تعداد علامت‌های سؤال افزایش می‌یابد و درک نحوه عملکرد سیستم و نحوه رسیدن از نقطه A به نقطه B برای کاربران دشوارتر می‌شود. ساختار واضح، نشانه‌های بصری (Visual Cues) مناسب و پیوندهای به راحتی قابل تشخیص، به کاربران کمک می‌کند تا مسیر خود را به سمت هدف پیدا کنند.

مثال بد:

وب‌سایت Beyondis.co.uk ادعا می‌کند که “فراتر از کانال‌ها، فراتر از محصولات، فراتر از توزیع” است. این شعار چه معنایی دارد؟ از آنجا که کاربران وب‌سایت‌ها را مطابق با الگوی “F” مرور می‌کنند، این سه عبارت اولین عناصری هستند که کاربران پس از بارگذاری صفحه مشاهده می‌کنند.

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

مثال خوب:

وب‌سایت ExpressionEngine از ساختار مشابهی استفاده می‌کند، اما از علامت‌های سؤال غیرضروری اجتناب می‌کند. علاوه بر این، شعار این وب‌سایت کاربردی است، زیرا به کاربران گزینه‌هایی برای امتحان سرویس و دانلود نسخه رایگان ارائه می‌دهد.

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

نکته کلیدی: اگر کاربران نتوانند راه خود را در وب‌سایت شما پیدا کنند، از آن استفاده نخواهند کرد.

صبر کاربران را هدر ندهید:

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

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

مثال خوب:

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

مثال قابل بهبود:

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

راه‌حل ایده‌آل: همه موانع را حذف کنید. در ابتدا نیازی به اشتراک یا ثبت‌نام نباشد. ثبت‌نام کاربر به تنهایی، مانعی برای ناوبری کاربر و کاهنده ترافیک ورودی است.

مدیریت تمرکز توجه کاربران:

وب‌سایت‌ها هم محتوای ثابت و هم پویا ارائه می‌دهند. برخی از جنبه‌های رابط کاربری (User Interface) بیش از سایرین جلب توجه می‌کنند:

• تصاویر: چشم‌نوازتر از متن هستند.
• جملات برجسته: جذاب‌تر از متن ساده هستند.

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

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

هرچه تعداد علامت‌های سؤال در ذهن کاربران کمتر باشد، حس جهت‌یابی آن‌ها بهتر می‌شود و اعتماد بیشتری به شرکتی که وب‌سایت نماینده آن است، پیدا می‌کنند.

مثال خوب:

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

نکته کلیدی: هرچه نیاز به تفکر در پس‌زمینه کمتر باشد، تجربه کاربری (User Experience) بهتری حاصل می‌شود. و این هدف اصلی قابلیت استفاده است.

تلاش برای قرار گرفتن در معرض ویژگی‌ها:

طراحی‌های مدرن وب، گاهی به دلیل رویکردشان در راهنمایی کاربران با گام‌های مشخص (۱-۲-۳)، دکمه‌های بزرگ با جلوه‌های بصری و … مورد انتقاد قرار می‌گیرند. اما از منظر طراحی، این عناصر لزوماً بد نیستند. برعکس، این دستورالعمل‌ها می‌توانند بسیار مؤثر باشند، زیرا بازدیدکنندگان را به شیوه‌ای ساده و کاربرپسند در محتوای سایت هدایت می‌کنند.

مثال خوب:

Dibusoft جذابیت بصری را با ساختار واضح سایت ترکیب می‌کند. این سایت دارای ۹ گزینه اصلی ناوبری است که در نگاه اول قابل مشاهده هستند (اگرچه شاید انتخاب رنگ‌ها می‌توانست کمی ملایم‌تر باشد).

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

استفاده از متن مؤثر (Effective Writing):

از آنجا که وب با رسانه‌های چاپی متفاوت است، باید سبک نگارش را با ترجیحات و عادات مرور کاربران تنظیم کرد:

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

به جای آن:

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

مثال:

اگر خدماتی را توصیف می‌کنید و می‌خواهید کاربران یک حساب کاربری ایجاد کنند، “ثبت‌نام” بهتر از “اکنون شروع کنید!” است، و “اکنون شروع کنید!” بهتر از “خدمات ما را کاوش کنید” است.

مثال خوب:

Eleven2.com مستقیماً به اصل مطلب می‌پردازد: بدون کلمات زیبا، بدون اظهارات اغراق‌آمیز. در عوض، قیمت را نشان می‌دهد – همان چیزی که بازدیدکنندگان به دنبال آن هستند.

تلاش برای سادگی:

اصل “ساده نگه‌داشتن” (Keep It Simple, Stupid – KISS) باید هدف اصلی طراحی سایت باشد. کاربران به ندرت به یک سایت می‌آیند تا از طراحی آن لذت ببرند. آن‌ها به دنبال اطلاعات هستند، و اغلب علیرغم طراحی، به دنبال آن می‌گردند.

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

مثال خوب: وب سایت Financh به وضوح و به شکلی ساده اطلاعات را ارائه می کند

از فضای سفید (Whitespace) نترسید:

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

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

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

ساختارهای سلسله مراتبی، پیچیدگی را کاهش می‌دهند (قانون سیمون – Simon’s Law). هرچه بتوانید حس سلسله مراتب بصری بهتری به کاربران ارائه دهید، درک محتوای شما آسان‌تر خواهد بود. مثال بسیار خوب سایت Cameron.io

ارتباط مؤثر با “زبان بصری”:

آرون مارکوس (Aaron Marcus) در مقالات خود در مورد ارتباط بصری مؤثر، سه اصل اساسی را در استفاده از “زبان بصری” (محتوایی که کاربران در صفحه می‌بینند) بیان می‌کند:

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

اقتصاد (Economize): با کمترین نشانه‌ها و عناصر بصری، بیشترین کار را انجام دهید. چهار نکته اصلی: سادگی، وضوح، تمایز و تأکید.

سادگی: فقط شامل عناصری می‌شود که برای ارتباط ضروری هستند.

وضوح: همه اجزا باید طوری طراحی شوند که معنای آن‌ها مبهم نباشد.

تمایز: ویژگی‌های مهم عناصر ضروری باید قابل تشخیص باشند.

تأکید: مهم‌ترین عناصر باید به راحتی درک شوند.

ارتباط (Communicate): ارائه را با قابلیت‌های کاربر مطابقت دهید. رابط کاربری برای برقراری ارتباط موفق، باید خوانایی، تایپوگرافی، نمادگرایی، نماهای متعدد و رنگ یا بافت را متعادل نگه دارد.

خوانایی: حداکثر از ۳ نوع فونت در حداکثر ۳ اندازه استفاده کنید.

طول خط: حداکثر ۱۸ کلمه یا ۵۰-۸۰ کاراکتر در هر خط متن.

قراردادها (Conventions) دوستان ما هستند:

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

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

با استفاده از قراردادها می‌توانید:

• اعتماد کاربران را جلب کنید.
• قابلیت اطمینان را نشان دهید.
• اعتبار خود را ثابت کنید.

انتظارات کاربران را دنبال کنید: درک کنید که آن‌ها از ناوبری سایت، ساختار متن، محل قرارگیری جستجو و … چه انتظاراتی دارند.

مثال:

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

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

زود تست کنید، اغلب تست کنید (Test Early, Test Often – TETO):

این اصل باید در هر پروژه طراحی وب اعمال شود، زیرا تست‌های قابلیت استفاده، اغلب بینش‌های مهمی در مورد مشکلات و مسائل مربوط به یک طرح‌بندی ارائه می‌دهند.

نکات مهم:

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

به گفته استیو کروگ: آزمایش با یک کاربر، ۱۰۰٪ بهتر از آزمایش نکردن است، و آزمایش با یک کاربر در اوایل پروژه، بهتر از آزمایش با ۵۰ کاربر در اواخر پروژه است.

قانون اول بوهم (Boehm’s First Law): خطاها در طول فعالیت‌های تعریف نیازمندی‌ها و طراحی، بیشترین فراوانی را دارند و هرچه دیرتر حذف شوند، پرهزینه‌تر هستند.

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

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

قانون واینبرگ (Weinberg’s Law): یک توسعه‌دهنده، فرد مناسبی برای آزمایش کد خود نیست. این موضوع در مورد طراحان نیز صادق است. پس از چند هفته کار بر روی یک سایت، دیگر نمی‌توانید آن را از منظری تازه مشاهده کنید. شما می‌دانید که چگونه ساخته شده است و بنابراین دقیقاً می‌دانید که چگونه کار می‌کند – بینشی که آزمایش‌کنندگان مستقل و بازدیدکنندگان سایت شما از آن بی‌بهره‌اند.

جمع‌بندی:

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