آموزش نحوه طراحی برای دسترسی: برای طراحان UX (WCAG 2.2)

How To Design for Accessibility: for UX Designers (WCAG 2.2)

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: 2023 دسترس‌پذیری و کاربردپذیری بهترین روش‌ها برای طراحان UX و UI (تجربه کاربر + WCAG 2.2، بخش 508، ADA) نحوه طراحی به‌طور خاص برای دسترس‌پذیری (موارد ضروری برای طراحان - UX، UI، و محصول) 51 بهترین شیوه و استراتژی برای طراحی برای دسترسی (به علاوه قابلیت استفاده و سئو) تضاد رنگ و استقلال رنگ قابل دسترسی عبارات در دسترس - فعل یا اسم، برچسب های کوتاه یا متوسط، لینک های "بیشتر بخوانید" بد هستند، و استایل قابل دسترسی بیشتر - شعاع حاشیه، حروف بزرگ، پر کردن و رنگ، سایه و ارتفاع، رقابت، مجاورت طراحی پیام‌های خطای قابل دسترس، آیتم‌های منو، پیوندها، ردیاب‌های پیشرفت طراحی نمودارها، نمودارها، و سایر تجسم‌های داده‌های قابل دسترس طراحی نشانه‌های شگفت‌انگیز (معروف به هزینه‌های درک شده) برای دسترسی، حالت‌های تعامل قابل دسترس و 10 حالت برای طراحی (تمرکز، شناور کردن و غیره

آیا می خواهید به راحتی رابط های قابل دسترسی برای محصولات دیجیتال طراحی کنید؟

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

به عنوان یک طراح تجربه کاربری (UX) با تجربه، با قابلیت دسترسی، من اینجا هستم تا این مشکلات را برای شما حل کنم! (همچنین، اگر نیاز به یادگیری در مورد WCAG 2.1/2.2 یا الزامات قانونی کشور خود دارید، این دوره شما را پوشش می دهد! [به عنوان مثال، بخش 508 ایالات متحده و ADA، قانون GIGW و RPD هند، AODA کانادا، دستورالعمل دسترسی به وب اروپا EN 301 549، DDA استرالیا، یا هر مورد دیگری که بر اساس/به دستورالعمل های دسترسی به محتوای وب ارجاع داده شده است])


مشکل:

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

  • برای انطباق با قابلیت دسترسی، "مکانیزمی در دسترس است که اجازه می دهد هدف هر پیوند به تنهایی از متن پیوند شناسایی شود، به جز مواردی که هدف پیوند به طور کلی برای کاربران مبهم باشد."

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

آیا این موضوع به شما در مورد نحوه طراحی به طور خاص یک رابط قابل دسترس و همچنان زیبا به نظر می رسد؟ نه چندان!


راه حل:

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

این دوره بر اساس آخرین دستورالعمل‌های WCAG 2.1 و آخرین دستورالعمل‌های کاری 2.2 است، بنابراین شما تازه‌ترین اطلاعات را دریافت می‌کنید. هر زمان که دستورالعمل های جدید منتشر شود، این دوره به سرعت به روز می شود. تازه، تازه، تازه!
(آخرین اخبار: "WCAG 2.2 قرار است در اوایل سال 2023 تکمیل و منتشر شود. با این حال، پیش نویس کاری 2.2 در حال حاضر در دسترس است و انتظار می رود بدون تغییر قابل توجهی تصویب شود.")


10 چیزی که از این دوره به دست خواهید آورد:

چه خودتان محصولات دیجیتالی را طراحی کنید، چه بر طراحی آنها نظارت داشته باشید، با این بهترین روش‌ها که به کمربند ابزار شما اضافه شده است…

  1. شما یک فرآیند طراحی برتر خواهید داشت که به شما امکان می‌دهد از ابتدا رابط‌های در دسترس (و کاربرپسند) بیشتری طراحی کنید.

  2. فقط با نگاه کردن به طراحی رابط، می‌توانید موارد نقض دسترسی را شناسایی کنید!

  3. شما به‌عنوان یک طراح تاثیرگذار و درجه یک برای رئیس و مشتریان خود متمایز خواهید شد (زیرا تعداد کمی از طراحان در طراحی در دسترس و قابلیت دسترسی برای UX به خوبی آشنا هستند).

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

  5. تیم شما در زمان صرفه جویی خواهد کرد و مشتری شما در هزینه صرفه جویی خواهد کرد، زیرا در پایان تغییرات کمتری برای رعایت شرایط دسترسی لازم است.

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

  7. یک گواهی دسترسی دریافت خواهید کرد. به شما گواهی می دهد که این آموزش را به پایان رسانده اید. گواهینامه خود را در لینکدین خود ارسال کنید، آن را در رزومه یا وب سایت خود فهرست کنید، آن را در کنار میز خود آویزان کنید و از حقوق حرفه ای خود که به خوبی به دست آورده اید لذت ببرید!

  8. می‌توانید با اطمینان درباره قابلیت دسترسی به طراحی صحبت کنید.

  9. شما برای هر کاری که نیاز به دانش طراحی برای دسترسی داشته باشد، آماده خواهید شد.

  10. می‌توانید این مورد را به رزومه خود اضافه کنید (آن را در بخش توسعه حرفه‌ای به‌عنوان «دسترسی برای طراحان UX، Udemy، <سال تکمیل» قرار دهید). این به شما کمک می کند شغلی پیدا کنید!


این دوره برای مبتدیان عالی است!
قبل از شروع، به هیچ گونه آگاهی قبلی در مورد دسترسی (یا WCAG، ADA یا قابلیت استفاده) نیاز ندارید.


~~~ اگر تصمیم خود را برای شرکت در این دوره گرفته اید، فقط روی دکمه "خرید این دوره" در بالا کلیک کنید. اگر نه، به خواندن ادامه دهید :) ~~~


در پایان این دوره خواهید دانست:

51 بهترین روش که در 3 حوزه دسترسی برتر قرار دارند.

  1. اولین قسمت مربوط به کنتراست رنگ است، که در آن شما 4 بهترین روش قدرتمند را یاد خواهید گرفت، از جمله مواردی مانند:

    • آیا عناصر غیرفعال باید سطح مشخصی از کنتراست رنگ داشته باشند (برای مطابقت با قابلیت دسترسی)؟

    • حاشیه‌های دکمه‌ها، نشان‌واره‌ها، یا کنترل‌های رابط کاربری (مانند سوئیچ‌ها، کادرهای انتخاب و صفحه‌بندی) چطور؟

  2. حوزه دوم استقلال رنگ است که دارای 10 بهترین روش است. مانند:

    • نحوه طراحی نمایش پیام های خطا.

    • چگونه تجسم داده‌های رنگی (مانند نمودارها و نمودارها) را برای افرادی که نمی‌توانند رنگ را ببینند یا تفاوت بین رنگ‌های خاص را تشخیص دهند، در دسترس قرار دهیم.

  3. و بخش سوم همه چیز در مورد عناصر تعاملی است. شما 37 بهترین روش عالی را به همراه مواردی مانند:

    یاد خواهید گرفت
    • چرا استفاده از پیوندهایی که می‌گویند «بیشتر بخوانید» یا «جزئیات» یک اشتباه بزرگ برای دسترسی، قابلیت استفاده و SEO است. و در عوض از چه عبارتی استفاده کنید.

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

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


فرصت هایی برای به کارگیری آنچه در حال یادگیری هستید:

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


تفاوت این دوره:

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

  • بسیار کاربردی است. من دقیقاً به شما نشان خواهم داد که چگونه برای دسترسی طراحی کنید. با طراحی های UI خاص، که از موقعیت های دنیای واقعی می آیند. نه یک دسته از نظریه ها، یا تعمیم های سطح بالا مانند "برای دستیابی به طرح های قابل دسترس، آنها را به صورت: تند، دقیق و ساده تبدیل کنید. حالا برو جلو و موفق باشی!» هیچ کدام.

  • موارد استفاده مربوط به چندین سال طراحی UX من در دنیای شرکت‌ها، دولت‌ها، مشاغل کوچک و غیرانتفاعی است. و طراحی برنامه های کاربردی وب و وب سایت های مطابق با بخش 508.

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

  • کار زیادی برای این دوره انجام شده است، بیش از 10 ماه در حال ساخت بوده است (و همچنان که پیشرفت‌ها مدام اضافه می‌شوند)، و همه به این دلیل است که می‌خواهم حداکثر بهره را از آن ببرید. برای این دوره دسترس‌پذیری پولی پرداخت می‌کنید که به سختی به دست آورده‌اید، بنابراین می‌خواهم بیشتر و نه کمتر به شما بدهم.


این دوره برای چه کسانی است:

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


ضمانت بازگشت وجه:

این دوره با 30 روز ضمانت بازگشت وجه ارائه می شود. اگر به هر دلیلی راضی نیستید، می‌توانید پول خود را پس بگیرید، بدون سؤال.


من شما را به تماشای برخی از ویدیوهای پیش نمایش رایگان دعوت می کنم.

و اگر آماده هستید، من به شما 51 بهترین روش ضروری را که برای طراحی رابط های قابل دسترس باید بدانید را به شما آموزش می دهم!


~~~ اگر تصمیمی در مورد شرکت در این دوره گرفته اید، فقط روی دکمه "خرید این دوره" در بالا کلیک کنید. اگر نه، به خواندن ادامه دهید :) ~~~


-------------------------------------

تعاریف -

-------------------------------------

قابلیت دسترسی/دسترسی دیجیتال/دسترسی به وب چیست؟

دسترسی قابلیت استفاده برای همه است.

«دسترسی به وب به این معنی است که افراد دارای معلولیت می توانند به طور یکسان وب سایت ها و ابزارها را درک کنند، درک کنند، پیمایش کنند و با آنها تعامل داشته باشند. این همچنین به این معنی است که آنها می توانند به طور مساوی بدون موانع کمک کنند.» - ابتکار دسترسی به وب (WAI). به عبارت ساده، دسترسی دیجیتال زمانی است که یک محصول دیجیتال* طوری طراحی شده باشد که برای افراد مختلف با تمرکز بر افراد دارای معلولیت تا حد امکان قابل استفاده باشد.

*و برای زمینه، وقتی می‌گویم «محصول دیجیتال»، این اصطلاح کلی برای: وب‌سایت‌ها، برنامه‌های تلفن همراه، برنامه‌های وب/رومیزی، نرم‌افزار، رابط‌های پوشیدنی (مانند ساعت‌های هوشمند)، تجربه‌های واقعیت توسعه‌یافته (مانند واقعیت افزوده و واقعیت مجازی)، تجربیات صوتی، تجربیات بدون لمس، و بسیاری موارد دیگر.

وقتی می‌گویم «دسترس‌پذیری»...

  • من در مورد طراحی فراگیر صحبت می کنم.

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

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

    • این که آیا این ناتوانی‌های دائمی هستند، مانند تولد با اختلال بینایی،

    • یا ناتوانی‌های موقت، مانند اکتفا کردن موقت به نسخه عینکی که کمی خاموش است،

    • یا ناتوانی‌های موقعیتی، مانند قرار گرفتن در زیر نور شدید خورشید و ناتوانی در دیدن صفحه نمایش خود.

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


قابلیت استفاده چیست؟

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

و البته ظاهری زیبا و مدرن! زیرا یک رابط زیبایی شناختی، چیدمان خوب و منسجم با نام تجاری نیز نقش مهمی در بهبود نه تنها قابلیت استفاده، بلکه دسترسی نیز دارد!

یک نکته را در اینجا باید به آن توجه کرد، «دسترسی شما را مجبور به ساخت محصولی زشت، کسل کننده یا درهم نمی کند. این به شما محدودیت‌هایی در طراحی می‌دهد که منجر به محصولات بهتر برای همه کاربران شما می‌شود.» - جسی هاوسلر، متخصص اصلی دسترسی در Salesforce

صحبت در مورد دسترسی و قابلیت استفاده... قابلیت استفاده به تنهایی "اغلب به اندازه کافی نیازهای افراد دارای معلولیت را برطرف نمی کند." – WAI

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


مربی کیست؟

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

  • در طول سال‌های متمادی طراحی محصولات دیجیتالی برای دولت ایالات متحده و آژانس‌های رسمی مختلف، من همچنین مسئول طراحی رابط‌هایی بودم که نه تنها «در دسترس» بلکه مطابق با بخش ۵۰۸ بودند. (بخش 508 بخشی از قانون ایالات متحده است که از نظر قانونی دسترسی به برخی محصولات دیجیتال را الزامی می کند.)

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

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

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

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

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

من رابط های بی شماری برای:

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

  2. پزشکانی که باید در طول جنگ با فناوری بسیار سیار در میدان حضور داشته باشند.

  3. ابزارهای دیجیتالی برای ارتش، نیروی هوایی، نیروی دریایی، تفنگداران دریایی، و گارد ساحلی.

  4. و همچنین محصولات بخش خصوصی برای مشاغل کوچک، سازمان های غیرانتفاعی و کارآفرینان.

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

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

این ممکن است به این دلیل باشد که...

  1. ...این شرکت ها از طراحی قابل دسترس یا

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

بدون توجه به شرایط، چه چیزی باعث می‌شود برخی از طراحان بتوانند به پروژه‌های مشتری یا شرکت‌های خود دسترسی داشته باشند و سایر طراحان نتوانند؟

به شما می گویم...یک تفاوت بزرگ: داشتن فرآیند طراحی UX قابل دسترسی.

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

و این همان طراحی است که شما پس از تکمیل این دوره خواهید بود :)

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


سرفصل ها و درس ها

شروع شدن Getting Started

  • بررسی اجمالی دوره Course Overview

  • منابع یادداشت برداری: خلاصه عمل بخش Note-Taking Resources: Section Action Summaries

  • با مربی خود آشنا شوید Meet Your Instructor

  • فعالیت گرم کردن: سنجش جایی که اکنون در آن هستید Warm-Up Activity: Gauging Where You’re At Now

  • داستان: چرا دسترسی مهم است Story: Why Accessibility Matters

  • فرم بازخورد دوره Course Feedback Form

دسترسی 101: چه کسی، چه چیزی، چه زمانی، کجا، و چرا (غیر مبتدیان می توانند از این کار صرف نظر کنند) Accessibility 101: The Who, What, When, Where, & Why (non-beginners can skip)

  • مقدمه بخش 2 Introduction to Section 2

  • دسترسی در مورد چه کسی است Who Is Accessibility About

  • نگاهی اجمالی به زندگی 10 نفر A Remarkable Glimpse into The Lives of 10 People

  • 5 آمار حیرت‌انگیز که نشان می‌دهد دسترسی افراد شامل چند نفر است 5 Astounding Stats That Reveal Just How Many People Accessibility Includes

  • ناتوانی ها می توانند موقعیتی، موقت یا دائمی باشند Disabilities Can Be Situational, Temporary, Or Permanent

  • از 4 نکته حرفه ای برتر من استفاده کنید Use My Top 4 Pro Tips

  • از بین بردن 5 افسانه دسترسی (ویدئو) Busting 5 Accessibility Myths (Video)

  • مورد چشمگیر تجاری برای دسترسی: 5 درایور متمایز کننده Biz The Impressive Business Case for Accessibility: 5 Differentiating Biz Drivers

  • آیا فهرستی از دستورالعمل هایی وجود دارد که می توانید برای جلوگیری از مشکلات قانونی از آنها پیروی کنید؟ Is There A List of Guidelines You Can Follow to Avoid Legal Trouble?

  • آیا «پلیس دسترسی» وجود دارد؟ Are There “Accessibility Police”?

  • چه کسی در تیم شما باید مسئولیت تضمین دسترسی را بپذیرد؟ Who on Your Team Should Be Taking Responsibility for Ensuring Accessibility?

  • دسترسی در مقابل: طراحی فراگیر، طراحی جهانی و طراحی برای همه Accessibility Versus: Inclusive Design, Universal Design, and Design For All

  • داستان این که چگونه یاد گرفتم چه زمانی برای قابلیت دسترسی تست کنم (به عنوان یک طراح) The Story of How I Learned When to Test for Accessibility (As a Designer)

  • نحوه تست دسترسی: بهترین روش How To Test for Accessibility: The Best Method

  • نحوه تست دسترسی: ابزارهای برتر How To Test for Accessibility: Top Tools

  • بخش بستن Section Close Out

کنتراست رنگ Color Contrast

  • مقدمه بخش 3 Introduction to Section 3

  • منبع یادداشت برداری: S3 Action Summary PDF Note-Taking Resource: S3 Action Summary PDF

  • کنتراست رنگ حیاتی Color Contrast Vitals

  • آیا میدانستید... Did You Know...

  • آن را تجربه کنید: قرمز-سبز Experience It: Red-Green

  • به‌روزرسانی: «شبیه‌ساز دید NoCoffee» کجا رفت؟ Update: Where did the "NoCoffee Vision Simulator" go?

  • آن را تجربه کنید: آبی-زرد Experience It: Blue-Yellow

  • آن را تجربه کنید: بدون رنگ Experience It: No Color

  • ابزاری برای ساختن یک پالت رنگ در دسترس Tool For Building An Accessible Color Palette

  • نحوه بررسی کنتراست رنگ (برای واقعیت مجازی، برنامه ها، نرم افزارها، وب سایت ها و غیره) How to Check Color Contrast (for virtual reality, apps, software, websites, etc)

  • مثال: عناصر UI Example: UI Elements

  • آزمون بخش 3 (8 سوال) Section 3 Quiz (8 questions)

  • بخش 3 خلاصه عمل Section 3 Action Summary

  • فرم بازخورد دوره Course Feedback Form

استقلال رنگ Color Independence

  • مقدمه بخش 4 Introduction to Section 4

  • منبع یادداشت برداری: S4 Action Summary PDF Note-Taking Resource: S4 Action Summary PDF

  • نحوه بررسی استقلال رنگ How to Check for Color Independence

  • مثال: خطاها Example: Errors

  • مثال: آیتم منوی فعلی Example: Current Menu Item

  • مثال: پیوندها Example: Links

  • مثال: Progress Trackers Example: Progress Trackers

  • مثال: نمودارها Example: Charts

  • مثال: نمودارها Example: Graphs

  • مثال: سایر تجسم‌های داده Example: Other Data Visualizations

  • خلاصه: تجسم داده های مستقل از رنگ Summary: Color Independent Data Visualizations

  • فعالیت: نقشه مسیر ترانزیت Activity: Transit Route Map

  • ترکیب تاکتیک ها Combining Tactics

  • وابستگی رنگ در بازی و واقعیت مجازی Color Dependence in Gaming & Virtual Reality

  • آزمون بخش 4 (4 سوال) Section 4 Quiz (4 questions)

  • بخش 4 خلاصه عمل Section 4 Action Summary

واژه‌سازی عناصر تعاملی Wording Interactive Elements

  • مقدمه بخش 5 Introduction to Section 5

  • منبع یادداشت برداری: S5 Action Summary PDF Note-Taking Resource: S5 Action Summary PDF

  • چگونه عناصر تعاملی را بررسی کنیم (به علاوه: آیا از "Affordance" به اشتباه استفاده می کنید؟) How to Check Interactive Elements (Plus: Do You Use “Affordance” Incorrectly?)

  • چگونه تشخیص دهیم که نشانه هایی که طراحی می کنید نشان دهنده چیزهایی هستند که شما می خواهید How to Tell If the Signifiers You Design Are Signifying the Things You Want

  • درهای نورمن چیست؟ What Are “Norman Doors”

  • تاریخچه UX (طراحی تجربه به 4000 سال قبل از میلاد با فنگ شویی برمی گردد) UX History (Experience Design dates back as far as 4000 BC with Feng Shui)

  • حرکت به منطقه قابلیت استفاده: بازیکنان کلیدی Moving into Usability Territory: Key Players

  • 3 جنبه اصلی برای طراحی (هنگام ایجاد عناصر تعاملی) 3 Core Aspects To Design For (When Creating Interactive Elements)

  • بهترین شیوه های واژه نویسی دکمه Button Wording Best Practices

  • واژه‌بندی پیوند: کمی "تست" Link Wording: A Little “Test”

  • چرا از پیوندهای «بیشتر بخوانید» (و موارد مشابه) اجتناب کنید Why Avoid “Read More” Links (And The Like)

  • بهترین شیوه های نوشتن پیوند Link Wording Best Practices

  • جایگزین های عبارت (برای دکمه ها یا پیوندها) Wording Alternatives (For Buttons or Links)

  • آزمون بخش 5 (3 سوال) Section 5 Quiz (3 questions)

  • بخش 5 خلاصه عمل Section 5 Action Summary

عناصر تعاملی یک ظاهر طراحی شده (قسمت 1: دکمه ها و موارد مشابه) Styling Interactive Elements (Part 1: Buttons & The Like)

  • مقدمه بخش 6 Introduction to Section 6

  • منبع یادداشت برداری: S6 Action Summary PDF Note-Taking Resource: S6 Action Summary PDF

  • دکمه یا پیوند: چه زمانی از کدام استفاده کنیم؟ Button or Link: When to Use Which?

  • بازی حدس زدن دکمه و معرفی 7 تکنیک برای نشان دادن "قابلیت کلیک" Button Guessing Game & Intro to 7 Techniques for Signifying “Clickability”

  • تکنیک 1: شکل و سازگاری (دکمه ای یا نه) Technique 1: Shape and Consistency (Button or Not)

  • تکنیک 2: شعاع مرزی (شخصیت) Technique 2: Border Radius (Personality)

  • تکنیک 3: پر کردن و رنگ کردن (سلسله مراتب) Technique 3: Fill and Color (Hierarchy)

  • تکنیک 4: سایه (ارتفاع) Technique 4: Shadow (Elevation)

  • تکنیک 5: رقابت و اولویت ها Technique 5: Competition & Priorities

  • تکنیک 6: مجاورت (تنفس، ارتباط، اهداف لمسی) Technique 6: Proximity (Breathability, Relation, Touch Targets)

  • تکنیک 7: حروف بزرگ کردن برچسب (لحن صدا) Technique 7: Label Capitalization (Tone of Voice)

  • چیزهایی که باید برای دکمه ها رزرو کنید Things to Reserve for Buttons

  • چه زمانی باید سازگار بود When To Be Consistent

  • چه زمانی باید ناسازگار بود (معروف به متمایز) When To Be Inconsistent (aka Distinct)

  • وقتی شبیه باشیم When To Be Similar

  • تصمیم گیری بین این سه (سازگار، متمایز، مشابه) Deciding Between The Three (Consistent, Distinct, Similar)

  • آزمون بخش 6 (4 سوال) Section 6 Quiz (4 questions)

  • بخش 6 خلاصه عمل Section 6 Action Summary

عناصر تعاملی سبک (بخش 2: پیوندها و موارد مشابه) Styling Interactive Elements (Part 2: Links & The Like)

  • مقدمه بخش 7 Introduction To Section 7

  • منبع یادداشت برداری: S7 Action Summary PDF Note-Taking Resource: S7 Action Summary PDF

  • سبک پیوند Link Styling

  • جایگزین های زیر خط: استراتژی پیشرفته شماره 1 Alternatives to the Underline: Advanced Strategy #1

  • منبع: جستجوگر کنتراست پیوند Resource: Link Contrast Checker

  • جایگزین های زیر خط: استراتژی پیشرفته شماره 2 Alternatives to the Underline: Advanced Strategy #2

  • جایگزین های زیر خط: استراتژی پیشرفته شماره 3 Alternatives to the Underline: Advanced Strategy #3

  • آیا می توانید از ترکیبی از سبک های پیوند استفاده کنید؟ Can You Use a Mix of Link Styles?

  • یک ظاهر طراحی شده برای رزرو برای پیوندها Styling To Reserve for Links

  • آزمون بخش 7 (3 سوال) Section 7 Quiz (3 questions)

  • بخش 7 خلاصه عمل Section 7 Action Summary

طراحی حالت های تعاملی Designing Interactive States

  • مقدمه بخش 8 Introduction to Section 8

  • به روز رسانی Update

  • کدام عناصر تعاملی برای طراحی چندین حالت و نحوه انجام آن Which Interactive Elements to Design Multiple States for and How to Go About It

  • 10 حالت اساسی برای طراحی The 10 Fundamental States to Design

  • چگونه (به تنهایی) تعیین کنیم چگونه چیزی را در دسترس قرار دهیم: 6 سوال آشکار How to Determine (On Your Own) How to Make Something Accessible: 6 Revealing Qs

  • تفاوت بین "راهنمای سبک" و "سیستم طراحی" (و "استانداردهای طراحی") Difference Between a “Style Guide” and “Design System” (and “Design Standards”)

  • ایالات تمرکز (جدید) Focus States (NEW)

  • ایالات شناور (جدید) Hover States (NEW)

فینال بزرگ! Grand Finale!

  • تبریک می گویم!! Congratulations!!

  • فرم بازخورد دوره Course Feedback Form

جایزه Bonus

  • جایزه - این دوره را تا 90٪ تخفیف به اشتراک بگذارید BONUS - Share this course at up to 90% off

  • گام های بعدی - 7 موضوع برای ادامه ارتقاء سطح تخصص دسترسی شما NEXT STEPS - 7 Topics to Continue Leveling Up Your Accessibility Expertise

نمایش نظرات

آموزش نحوه طراحی برای دسترسی: برای طراحان UX (WCAG 2.2)
جزییات دوره
7.5 hours
103
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
10,955
4.6 از 5
دارد
دارد
دارد
Liz Brown
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Liz Brown Liz Brown

اگر ما آن را بهتر نکنیم ، طراح اصلی کارشناسی فناوری نمی تواند بهتر باشد. برای شما عزیزان بزرگترین کادو را برای گام برداشتن برای تبدیل شدن به شخصی که می تواند این تغییر را به وجود آورد ، بزرگوار می دانم. دنیا به تو احتیاج دارد. به عنوان بخشی از تیم مربیان Udemy ، من در دوره هایی کار می کنم تا به شما کمک کنم تا به عنوان یک طراح حرفه ای تجربه کاربر (UX) در سطح بالا قرار گیرید. من برای ایجاد ... - یادگیری سرگرم کننده که از طریق آن حرکت می کنید ، - دوره هایی که استراتژی های کاملاً عالی و تکنیک های سطح بالا ارائه می دهند ، و - نحوه های خاص ، عملی و پر از نمونه های دنیای واقعی. اما در نهایت ... من ماموریت دارم شما را به یک طراح UX حماسی تبدیل کنم. از سنگرها: