آموزش تجربه کاربری (UX) در طراحی وب

آموزش تجربه کاربری (UX) در طراحی وب

UX Tutorial in Web Design

 

با سلام خدمت دوستان گرامی، با آموزش UX (تجربه کاربری) در طراحی وب سایت، در خدمت شما هستیم.

 

آموزش UX (تجربه کاربری) با مثال‌های کاربردی:

در این سری از مقالات محتوا قصد داریم مفهومی بنام تجربه کاربری و یا User Experience (UX) را به همراه مثال بررسی کنیم. این مقاله ترجمه ای است از ویدئوی آموزشی Lynda بنام Lynda Foundations of UX – Accessibility. شما می توانید ویدئوی آموزشی UX را از وب سایت P30download بصورت رایگان دانلود کنید.

برای کسب اطلاعات بیشتر، در صورت تسلط به زبان انگلیسی، به مقاله آموزشی UX design از وب سایت wikipedia مراجعه کنید.

همانطور که می دانید فرآیند UX-User Experience قبل از UI-User Interface انجام می شود. 

 

UX چیست و وظایف یک متخصص تجربه کاربری چه می‌باشد؟

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

 

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

بنابراین با بیان نمونه هایی کاربردی از تجربه کاربر (UX) سعی میکنیم این مفهوم را بصورت عملی به شما عزیزان آموزش دهیم:

 

مشخص بودن صفحه فعال برای بهبود تجربه کاربر:

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

مشخص کردن صفحه فعال

  • فعال بودن لینک آن صفحه در منوی اصلی
  • توسط Heading1 در بالای متن صفحه
  • توسط BreadCrumb
  • توسط عنوان صفحه

 

انجام فرآیندهایی مانند ثبت نام توسط صفحه کلید:

مثال دوم: کاربر بتواند فرآیندهایی مانند ثبت نام و لاگین و سرچ را توسط دکمه های کیبود انجام دهد.

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

فرم جستجو

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

 

چیدمان و ترتیب المان ها در صفحات وب:

مثال سوم: تصویر زیر را در نظر بگیرید:

فرم لاگین بانک

با زدن تب در این صفحه، بخش های زیر غیر قابل دسترسی می باشند: منوی سایدبار سمت راست، چک باکس remember و لینک forgot password که برای یک فرد خاص مانند فرد نابینا یک تجربه کاربری ناخوشایندی رقم می زند.

 

چیدمان پاراگراف ها و تصاویر در یک صفحه وب:

مثال چهارم: این مثال در مورد چیدمان پاراگراف ها می باشد. تصویر زیر را در نظر بگیرید:

چیدمان پاراگراف و تصویر در UX

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

 

ترتیب المان ها و عناصر یک صفحه وب بهنگام باز شدن پاپ آپ:

مثال پنجم: این مثال در مورد ترتیب المان ها بهنگام باز شدن یک پا آپ (و یا Modal Box) می باشد. تصویر زیر را در نظر بگیرید:

ترتیب المان های صفحه در ux

مشاهده می کنید که با کلیک روی لینک what’s this? پا آپ open agreement باز می شود. بنابراین با زدن دکمه tab باید پس از لینک what’s this، محتویات پاپ آپ فعال و توسط screen reader (که مخصوص افراد نابینا و یا کم بینا می باشد) خوانده شود و سپس سراغ سایر المان ها و لینک های این صفحه وب برود.

 

نمایش صحیح یک صفحه وب در موبایل (ریسپانسیو بودن صفحات وب):

مثال ششم: این مثال درباره مشاهده یک صفحه وب در موبایل و نمایش صحیح المان ها در موبایل و تبلت می باشد. به تصویر زیر دقت کنید:

نمایش صفحه وب در موبایل

مشخص است که کاربر برای مشاهده بهتر محتوای صفحه، باید زوم کند. پس تصویر زیر را خواهیم داشت:

منوی سایت در حالت ریسپانسیو

اگر کاربر روی لاگین کلیک کند، به تصور اینکه لینک کار نمی کند و یا اینکه بدرستی روی لینک کلیک نکرده است، مجددا کلیک می کند و باز هم اتفاقی نمی افتد و همان منو را میبیند. اما اگر zoom out کند مشاهده می کند فرم لاگین بصورت پاپ آپ در وسط صفحه نمایش داده شده است:

نمایش پاپ آپ در موبایل

 

 

با سلام، امیدوارم تا بدین جا، دو بخش اول از مقالات آموزش UX مورد توجه و استفاده شما عزیزان قرار گرفته باشه. تا اینجای مقاله، ۶ مثال در زمینه UX را بهمراه تصویر با هم بررسی کردیم. در این مقاله که بخش آخر از این آموزش است، قصد داریم مثالی از placeholder ها در تکست باکس ها بیان کنیم و در نهایت چند مورد را بصورت آیتمی در زمینه UX بیان می کنیم.

 

تاثیر Placeholder بر UX در فرم های وب سایت:

مثال هفتم: فرض کنید در یک فرم ثبت نام، باید تاریخ تولد خود را پر کنیم. یک سناریو اینست که مانند تصویر زیر، فرمت ورودی تاریخ را بصورت placeholder به کاربر نمایش دهیم:

اتریبیوت placeholder تکست باکس

مشکل این روش این است که کاربر هنگام تایپ تاریخ تولد خود، دیگر نمی تواند فرمت ورودی تاریخ را مشاهده کند و ممکن است فرمت صحیح را فراموش کند و تاریخ را با اشتباه تایپ کند. برای مشاهده فرمت ورودی، مجبور است تاریخ نوشته شده را پاک کند:

تکست فیلد تاریخ

و اما روش بهتر که تجربه خوبی را برای کاربران فراهم می کند اینست که فرمت تاریخ ورودی را در ابتدا در placeholder تکست فیلد به کاربر نمایش دهیم:

placeholder فیلد تاریخ

و به محض اینکه کاربر شروع به تایپ کردن می کند، فرمت ورودی تاریخ در بالای تکست فیلد نیز نمایش داده شود:

فیلد تاریخ در فرم ثبت نام

 

نکاتی در زمینه طراحی تجربه کاربر (UX):

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

ابزارهای موثر در UX

بنابراین برای اینکه وب سایت تجربه کاربری (UX) مناسبی برای اینگونه کاربران داشته باشد، باید وب سایت مان را بگونه ای طراحی و چیدمان کنیم که براحتی بتوان توسط صفحه کلید (Keyboard) در آن به گشت و گذار پرداخت!

نکته۲) مورد دیگری که بهتر است در طراحی وب سایت به آن توجه کنیم اینست که به ازای هر نمودار و یا تصویر در صفحات وب (مانند progressbar و یا donut chart و …) یک متن جایگزین (Alternate text) داشته باشیم تا ابزارهای صفحه خوان (screen reader) بتوانند آنها را تفسیر کنند.

نکته ۳) موارد دیگری نیز وجود دارند که در صورت رعایت کردن آنها، می توانیم کاربران بیشتری را جذب وب سایت خود کنیم و آنها نیز رضایت بیشتری از وب سایت ما داشته باشند:

 

مواردی که به بهبود UX وب سایت شما کمک می کند:

  • قابلیت افزایش و کاهش سایز فونت (font-size) نوشته های سایت

  • قرار دادن دکمه های ارسال فرم مانند لاگین، ثبت نام، عضویت و غیره در انتهای فرم

    تاثیر چیدمان فرم در UX

    چیدمان المانهای فرم در تصویر زیر مناسب می باشد:

    چیدمان صحیح المان های فرم

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

  • در صورت داشتن ویدیو در سایت، بهتر است برای راحتی افراد ناشنوا و یا کم شنوا، آن ویدیو دارای زیرنویس (Caption و یا Transcript) باشد.
  • هنگامی که مثلا میخواهیم بگوییم "برای پرداخت صورتحساب اینجا را کلیک کنید" بهتر است بجای اینکه کلمه اینجا را لینک کنیم، بجای کل عبارت فوق، بنویسیم "پرداخت صورتحساب" و کل این عبارت را لینک کنیم.
  • غیرفعال بودن autoplay ویدیو و صوت ها در صفحات وب و در صورت نیاز فعال کردن این خاصیت برای کاربران خاص
  • بهتر است چیدمان (Layout) وب سایت را مانند تصویر زیر در نظر بگیریم:

     

     

     

     

    طراحی Layout صفحات وب در UX

 

کاربران عزیز مجله آموزشی محتوا، آموزش UX در طراحی وب در اینجا به پایان می رسد. شما می توانید دیدگاه ها و سوالات و پیشنهادهای خود را از طریق فرم ارسال دیدگاه واقع در پایین همین صفحه و یا فرم تماس با ما سایت، و یا ارسال ایمیل به EhsanSafari@hotmail.com برای بنده ارسال کنید. 


برچسب‌ها:

آموزش UXآموزش ux designآموزش تجربه کاربرآموزش تجربه کاربریآموزش طراحی uxاصول تجربه کاربرتجربه کاربریطراحی تجربه کاربری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نوزده − پنج =