طراحی و تجربه کاربری

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

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

طراحی فراگیر

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

یک نمودار ون که در آن دسترسی‌پذیری، فراگیری و کاربردپذیری، همگی در یک طراحی فراگیر به هم می‌رسند.

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

هفت اصل طراحی فراگیر با محوریت دسترسی‌پذیری وجود دارد:

  1. ارائه تجربه‌ای قابل مقایسه : اطمینان حاصل کنید که رابط کاربری شما تجربه‌ای برابر برای همه فراهم می‌کند، به طوری که افراد بتوانند وظایف خود را به روشی متناسب با نیازهایشان و بدون کاهش کیفیت محتوا انجام دهند.
  2. موقعیت را در نظر بگیرید : مطمئن شوید که رابط کاربری شما، صرف نظر از شرایط افراد، تجربه ارزشمندی را به آنها ارائه می‌دهد.
  3. ثابت قدم باشید : از قراردادهای آشنا استفاده کنید و آنها را به شیوه‌ای منطقی به کار ببرید.
  4. کنترل را در دست بگیرید : اطمینان حاصل کنید که افراد می‌توانند به روش دلخواه خود به محتوا دسترسی داشته باشند و با آن تعامل داشته باشند.
  5. پیشنهاد حق انتخاب : روش‌های مختلفی را برای انجام وظایف، به ویژه وظایف پیچیده یا غیراستاندارد، در نظر بگیرید.
  6. اولویت‌بندی محتوا : با مرتب کردن عناصر اصلی، ویژگی‌ها و اطلاعات به ترتیب دلخواه در محتوا و طرح‌بندی، به کاربران کمک کنید تا روی آنها تمرکز کنند.
  7. ارزش افزوده : هدف و اهمیت ویژگی‌ها و اینکه چگونه تجربه را برای کاربران مختلف بهبود می‌بخشند را در نظر بگیرید.

پرسوناها

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

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

معلولیت‌ها را در نظر بگیرید

«آدم‌ها با هم فرق دارند. من فقط می‌توانم از تجربه خودم بگویم. وقتی با یک فرد ناشنوا ملاقات می‌کنی، یعنی با یک فرد ناشنوا ملاقات کرده‌ای - نه همه ما.»

مریل ایوانز از ID24 در مورد فناوری ناشنوایان صحبت می‌کند: سفر در زمان از گذشته تا آینده .
معلولیت‌ها ممکن است دائمی، موقت یا موقعیتی باشند. معلولیت‌ها می‌توانند بر حس لامسه، بینایی، شنوایی و گفتار تأثیر بگذارند.
بخشی از طیف پرسونا از مجموعه ابزارهای فراگیر ۱۰۱ مایکروسافت .

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

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

شخصیت: جین بنت
به نمونه‌ای از یک پرسونا که از موارد استفاده خاص پشتیبانی می‌کند، نگاهی بیندازید.
جین اسمیت قدبلند با موهای بلند تیره است، پیراهن آستین بلند خاکستری و شلوار جین پوشیده است.
  • نام : جین بنت
  • سن : ۵۷ سال
  • مکان : اسکس، بریتانیا
  • شغل : مهندس تجربه کاربری
  • معلولیت : لرزش دست ناشی از بیماری پارکینسون (YOPD) در سنین پایین
  • اهداف : استفاده از ورودی گفتار به متن برای آسان‌تر کردن افزودن پیشنهادهای کد؛ پیدا کردن تجهیزات دوچرخه‌سواری آنلاین با حداقل فشار دادن کلیدها.
  • ناامیدی‌ها : وب‌سایت‌هایی که فقط از صفحه‌کلید پشتیبانی نمی‌کنند؛ برنامه‌هایی برای طراحی با فضاهای کوچک برای تعامل لمسی.

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

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

شبیه‌سازهای معلولیت

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

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

«من فکر می‌کنم باید کاملاً صادق باشیم که هیچ فعالیت شبیه‌سازی بر برخی از مهم‌ترین درک‌هایی که می‌خواهیم افراد بینا در قلب و ذهن خود داشته باشند، تأثیری ندارد. نابینایی ویژگی‌ای نیست که ما را تعریف کند، بلکه سوءتفاهم‌ها و انتظارات پایین در مورد نابینایی بزرگترین مانع ما هستند.»

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

مارک ریکوبونو ، رئیس فدراسیون ملی نابینایان

اکتشافات دسترسی

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

با نگاهی سریع به سال ۲۰۱۹، تیم طراحی در Deque مجموعه‌ای جدید از روش‌های اکتشافی را ایجاد و به اشتراک گذاشت که بر دسترسی‌پذیری دیجیتال متمرکز بودند . طبق تحقیقات آنها، تا ۶۷٪ از کل اشکالات دسترسی‌پذیری برای یک وب‌سایت یا برنامه، زمانی که دسترسی‌پذیری بخشی از فرآیند طراحی باشد، قابل اجتناب است. این تأثیر بزرگی است که می‌توان قبل از نوشتن حتی یک خط کد، ایجاد کرد.

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

  1. روش‌ها و شیوه‌های تعامل : کاربران می‌توانند با استفاده از روش ورودی مورد نظر خود (مانند ماوس، صفحه کلید، لمس و غیره) به طور مؤثر با سیستم تعامل داشته باشند.
  2. پیمایش و مسیریابی : کاربران می‌توانند در هر زمان و در داخل سیستم پیمایش کنند، محتوا را پیدا کنند و مشخص کنند که کجا هستند.
  3. ساختار و معناشناسی : کاربران می‌توانند ساختار محتوای هر صفحه را درک کنند و نحوه عملکرد درون سیستم را بفهمند.
  4. پیشگیری از خطا و وضعیت‌ها : کنترل‌های تعاملی دستورالعمل‌های مداوم و معناداری برای کمک به جلوگیری از اشتباهات دارند و وضعیت‌های خطای واضحی را در اختیار کاربران قرار می‌دهند که نشان می‌دهد مشکلات چیست و چگونه می‌توان آنها را در صورت بروز خطا برطرف کرد.
  5. کنتراست و خوانایی : کاربران می‌توانند به راحتی متن و سایر اطلاعات معنادار را تشخیص داده و بخوانند.
  6. زبان و خوانایی : کاربران می‌توانند به راحتی محتوا را بخوانند و درک کنند.
  7. Predictability and consistency : Users can predict each element's purpose. It's clear how each element relates to the system as a whole.
  8. زمان‌بندی و حفظ اطلاعات : به کاربران زمان کافی برای انجام وظایفشان داده می‌شود و در صورت اتمام زمانشان (مثلاً یک جلسه) اطلاعات از دست نمی‌رود.
  9. حرکت و چشمک زدن : کاربران می‌توانند عناصری را که در صفحه حرکت می‌کنند، چشمک می‌زنند یا متحرک هستند، متوقف کنند. این عناصر نباید حواس کاربران را پرت کنند یا به آنها آسیبی برسانند.
  10. جایگزین‌های بصری و شنیداری : کاربران می‌توانند برای هرگونه محتوای بصری یا شنیداری که اطلاعات را منتقل می‌کند، به جایگزین‌های متنی دسترسی داشته باشند.

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

یک نمونه بررسی اکتشافی دسترسی برای ایستگاه بازرسی ناوبری و مسیریابی می‌تواند به شکل زیر باشد:

ایستگاه‌های بازرسی برای ناوبری و مسیریابی عالی (+۲ امتیاز) پاس‌ها (+۱ امتیاز) شکست (-1 امتیاز) ناموجود (0 امتیاز)
آیا یک شاخص واضح و قابل مشاهده روی تمام عناصر فعال هنگام دریافت تمرکز تنظیم شده است؟
آیا صفحه متن عنوان معناداری دارد و اطلاعات خاص صفحه در ابتدا قرار گرفته است؟
آیا عنصر عنوان صفحه و H1 یکسان یا مشابه هستند؟
آیا برای هر بخش اصلی، عناوین معناداری وجود دارد؟
آیا هدف لینک‌ها صرفاً از متن لینک مشخص می‌شود یا از محتوای آن؟
آیا لینک رد شدن در بالای صفحه ارائه شده است و آیا با فوکوس نمایش داده می‌شود؟
آیا سازماندهی عناصر ناوبری، مسیریابی را تسهیل می‌کند؟

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

حاشیه‌نویسی‌های دسترسی‌پذیری

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

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

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

نمونه‌های طراحی زیر از کیت حاشیه‌نویسی‌های دسترسی‌پذیری Indeed.com برای فیگما گرفته شده‌اند.

تصویر طراحی از تغییرات بصری مورد استفاده برای حالت‌های مختلف دکمه.
طراحی دکمه‌های عملیاتی بر اساس وضعیت آنها متفاوت است: پیش‌فرض، فوکوس، شناور، فعال و غیرفعال.
تصویر طراحی سه آیکون مختلف که در یک کارت دعوت شغلی استفاده شده است.
سه آیکون متن جایگزین (alt text) هایلایت شده‌اند. آیکون‌های «ذخیره شغل» و «علاقه‌ای ندارم» به عنوان دکمه عمل می‌کنند، بنابراین متن جایگزین برای درک عملکرد بسیار مهم است. آیکون کنار «درخواست با رزومه Indeed» صرفاً تزئینی است و بنابراین نیازی به متن جایگزین ندارد.
تصویری از رابطه‌ای که برچسب‌های فرم باید با ورودی‌های مرتبط خود برای ماه و سال داشته باشند.
می‌توان چندین برچسب ورودی را به هر ورودی اختصاص داد تا به کاربران در درک زمینه کمک کند.

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

برخی از حوزه‌هایی که باید برای حاشیه‌نویسی‌های دسترسی‌پذیری در نظر گرفته شوند عبارتند از:

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