مجله خبری هاست ایران » طراحی و توسعه » شناخت قابلیت یادگیری برای طراحی وب
UI/UX طراحی و توسعه نقد و بررسی

شناخت قابلیت یادگیری برای طراحی وب

یادگیری طراحی وب

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

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

طراحان اپلیکیشن موبایل می‌توانند با Onboarding این مشکل را حل کنند که به کاربران در یادگیری رابط کاربری کمک می‌کند. اما سایت‌ها همیشه نمی‌توانند راهنماهای آموزشی طولانی ارائه کنند.

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

چرا قابلیت یادگیری مهم است؟

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


مقاله مرتبط: ۱۰ راه برای بالا بردن سطح یادگیری


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

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

وب سایت آمازون

برای مثال، همه سایت آمازون را می‌شناسند. سایتی مملو از هزاران دسته‌بندی و میلیون‌ها محصول است. با چنین حجم محتوا انتظار دارید که سایت به‌شدت شلوغی باشد. اما جستجو و گشتن در سایت آمازون چندان دشوار نیست. چرا؟

چون روی عناصر مرتبط تمرکز دارند که در درک رابط کاربری به کاربران کمک می‌کند.

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

آن‌ها می‌خواهند کاربران را به تعامل بیشتر تشویق کرده و کاری کنند که استفاده بیشتری از توییتر داشته باشند. این روش ازجمله شیوه‌های مطمئن در افزایش کاربران و افزایش نرخ نگهداشت یا Retention Rate در سایت است.

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

ثبات در طراحی باعث ایجاد حس آشنایی می‌شود

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

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

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

رابط کاربری Dropbox

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

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

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

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

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

بازخورد و واکنش UI

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


مقاله مرتبط: اشتباهات UI که به UX لطمه می‌زند


کاربران می‌خواهند تأثیر که کاری که روی صفحه انجام داده‌اند (کلیک کردن، پر کردن یک فرم، واردکردن محتوا) را به‌صورت شهودی ببینند.

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

یکی از بهترین نمونه‌ها، تکمیل فرم در صفحه ثبت‌نام سایت MailChimp است.

رابط کاربری سایت mailchimp

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

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

یک مثال خوب دیگر، صفحه محصول سایت Azteb.com است که در زمینه تجهیزات پزشکی فعالیت دارد.

وب سایت آزطب
طراحی و بهینه سازی سایت azteb توسط واحد طراحی و توسعه هاست ایران انجام شده است

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

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

شیوه‌های استاندارد را دنبال کنید

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

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

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

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

محصول وب سایت آزطب

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

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

به ویژگی‌هایی که کار موردنظر را انجام می‌دهند بسنده کنید و برای الهام گیری هم نگاهی به سایت‌های دیگر بیاندازید.

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

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

برای مثال، صفحه SERPS گوگل ده‌ها سال است که تقریباً به همان شکل باقی‌مانده است. البته کمی تغییر داشته است، اما اکثر قسمت‌هایش یکسان بوده‌اند.

در استفاده از شیوه‌های خود نیز ثبات داشته باشید. به‌یک‌باره طراحی کل سایت را تغییر ندهید که نتوانید آن را به حالت قبل برگردانید.

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

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

 

ابزار بهینه سازی وب هاست ایران

افزودن دیدگاه

کلیک برای ثبت دیدگاه