https://virgool.ir/feed/@neginasadi12.93Product designerfa2026-11-10 16:34:03https://files.virgool.ir/upload/users/2339593/avatar/L2qkd0.jpghttps://virgool.ir/@neginasadi12.93https://virgool.ir/@neginasadi12.93/بهبود-دسترسی-پذیری-در-طراحی-محصول-c3zekajoauedقبل از همه‌چیز میخوام با دقت به این جمله توجه کنیم:"دسترسی‌پذیری مانع خلاقیت نمی‌شود"خیلی از دیزاینرها وقتی صحبت از دسترسی‌پذیری میشه، تصور میکنن که دیگه دستشون برای خلاقیت در طراحی باز نیست و طرح‌هاشون قراره خشک و زشت بشه در صورتی که تنها هدف دسترسی‌پذیری ایجاد تجربه بهتر برای طیف گسترده‌تری از کاربران (به‌خصوص کاربران با محدودیت‌های مشخص) در هنگام استفاده از محصول هست.با رعایت چند نکته خیلی ساده اما تاثیرگذار، دسترسی‌پذیری محصول رو تا حد زیادی میشه بهبود داد. این نکات عبارتند از:رنگ تنها فاکتور انتقال پیام نباشداگر شما تمام بار انتقال یک پیام رو روی دوش رنگی که استفاده کردید گذاشتید، بابد بدونید که گروه زیادی از افراد جامعه یعنی افراد با مشکل کور رنگی رو نادیده گرفتید. آمارها نشون میده در بین مردان از هر ۱۲ نفر ۱ نفر و در بین زنان از هر ۲۰۰ نفر ۱ نفر کور رنگی دارند و حداقل یک رنگ رو از سایر رنگ‌ها تشخیص نمی‌دهند. علاوه بر اون در بین افراد عادی از هر ۳۰ نفر ۱ نفر مشکل بینایی دارد که می‌تونه درک و تفکیک رنگ‌ها رو برای اون آدم سخت‌تر کنه."از رنگ‌ها به عنوان هایلایت و تاکید بیشتر در کنار سایر موارد استفاده کنید"مثال زیر دو نمونه از یک فرم رو از دید یک فرد با بینایی نرمال و یک فرد با کور رنگی نشون میده:فرم مشاهده شده توسط فرد با بینایی عادی در مثال بالا فرد با دید عادی در هر دو حالت (ارور تکست فیلد با آیکون و ارور تکیت فیلد بدون آیکون) متوجه منظور ما میشود.اما همین فرم از دید یک فرد با کور رنگی متفاوت است.فرم مشاهده شده توسط فرد کور رنگطبق آزمایش‌هایی که انجام دادند اکثر افراد با کور رنگی تعداد فیلدهای ارور در فرم سمت راست رو ۱ (با توجه به آیکون علامت توجه) و فرم سمت چپ رو ۰ اعلام کردند. در صورتی که این فرم ۲ فیلد دارای ارور داره.وجود تضاد کافی بین متن و پس‌زمینهبرای سنجش کانتراست بین دو رنگ یک شاخص وجود دارد که عموما اگر این شاخص بزرگتر از ۴ باشد، متن خوانایی لازم رو داره. طبق استانداردهای تعریف شده در WCAG برای دسترسی‌پذیری مناسب برای افراد با مشکلات بینایی این عدد حداقل باید ۴/۵ باشد. با استفاده از ابزار Color Contrast Checker می‌تونید رنگ متن و بک‌گراند رو وارد کنید و شاخص کانتراستتون رو مشاهده کنید. این ابزار حتی با حفظ رنگ‌هاتون، به شما پیشنهادهایی برای بهتر شدن کانتراست هم میده.ابزار تست تضاد رنگیاگر هم هنوز رنگ متنتون رو انتخا نکردید و احتیاج به کمک برای انتخاب رنگی با دسترسی‌پذیری بالا دارید میتونید از ابزار ColorSafe استفاده کنید. تو این ابزار علاوه بر رنگ، جزئیات فونت‌ مورد نظرتون مثل سایز، وزن و خانواده فونت هم مورد بررسی قرار داده میشه و بهترین رنگ‌ها به شما پیشنهاد داده میشه.پیشنهاد پالت رنگی با تضاد مناسباطلاعات رو پشت هاور پنهان نکنیماستفاده از هاور برای دادن اطلاعاتی که نمیخوایم تو صفحه باشه میتونه مشکلات زیادی داشته باشه. برای مثال اولین گروهی که این اطلاعات رو از دست میدهند، افردی هستند که از کیبورد بجای موس استفاده می‌کنند یا افرادی که از سیستم خواندن اتوماتیک صفحه مثل Dragon Naturally Speaking استفاده میکنند.استفاده از کامپوننت‌هایی مثل tooltipها که اتفاقا این روزها بین دیزاینرها رایج شده، مثال خوبی از دور شدن از مفهوم دسترسی‌پذیری هست.پشتیبانی از تم Dark modeتحقیقات نشون داده تم‌های تیره برای افراد با مشکلات بینایی (ضعف چشم، کور رنگی و …) دید مناسب‌تری فراهم می‌کنه. همچنین تیم تیره باعث میشه افراد عادی هم دیرتر دچار خستگی و خشگی چشم بشن. این مورد به این معنا نیست که حتما تیم دیزاین و دولوپ ما باید زمان بذاره و محصول ما رو به صورت دارک هم طراحی کنه، اما اگر محصول شما به حدی از پختگی رشیده که یکی از دغدغه‌های اصلیتون بهبود دسترسی‌پذیری هست، با پشتیبانی از تم تیره در کنار تم روشن علاوه بر زیبایی دسترسی‌پذیری بهتری هم خواهید داشت.سخن پایانی…فکر کردن به دسترسی‌پذیری و بهبودش یکی از وظایف شما به عنوان طراح تجربه کاربری هست، چون این کار مستقیما روی تجربه گروهی از کاربران با محدودیت تاثیر داره.نگین اسدینگین اسدیTue, 12 Sep 2023 17:44:04 +0330https://virgool.ir/@neginasadi12.93/الگوی-رفتاری-کاربران-در-خواندن-صفحات-وب-با-استفاده-از-روش-eye-tracking-yv74ivzzxk3dبه طور کلی الگوی رفتاری افراد در مواجهه با متون در صفحات فیزیکی (Print) با صفحات وسایل الکترونیکی مانند کامپیوتر و موبایل (Screens) یکسان می‌باشد، با این تفاوت که در محتوای دیجیتال، تمایل افراد به مطالعه کمتر می‌باشد. به همین دلیل دانستن الگوی رفتاری کاربران می‌تواند در طراحی صفحات وبسایت با تعامل بالاتر کمک‌کننده باشد.اولین نکته‌ای که باید در زمان طراحی به آن توجه کنیم این است که افراد هیچگاه قرار نیست متن را کامل بخوانند، آن‌ها در اولین مواجهه با یک صفحه آن را اسکن می‌کنند.موسسه NNgroup از سال ۱۹۹۷ تحقیقات گسترده‌ای در زمینه‌ی چگونگی مطالعه آنلاین انجام داده است. این تحقیقات به دو روش کمی و کیفی و با استفاده از روش eye tracking یا ردیابی چشم کاربران صورت گرفته. نکته‌ی جالبی که در این تحقیقات وجود دارد، عدم تغییر رفتار کاربران آنلاین طی ۲۵ سال گذشته است. در صورتی که سایر تحقیقات انجام شده در زمینه رفتار کاربران در فضای آنلاین نشان‌دهنده تغییر مداوم الگوهای رفتاریست. ثبات این الگوها به دلیل ریشه داشتن آن در روانشناسی رفتاری انسان (Human behavior psychology) دارد و تحت تاثیر تغییرات رابط کاربری، ترندها و ... نیست.این بررسی‌ها نشان‌دهندن الگو‌های مشخصی در مشاهده صفحات وب و اسکرین‌های موبایل می‌باشد که در ادامه به رایج‌ترین‌های آن اشاره می‌کنیم و پس از توضیح هر الگو، صفحات مناسب برای استفاده از آن و روش بکارگیری آن را بررسی می‌کنیم.*قبل از بررسی الگو‌ها باید این نکته را بدانیم که این تحقیقات بر روی کاربران با زبان انگلیسی (خواندن از چپ به راست) انجام شده است. اما این به معنی نیست که سایر زبان‌ها به‌خصوص زبان‌های RTLمانند فارسی که از راست به چپ خواننده می‌شوند، نمی‌توانند از این الگوها استفاده کنند. تنها نکته‌ای که در زبان‌های RTLتغییر می‌کنند، وارونه یا آینه‌ای شدن الگوهاست.*رایج‌ترین الگوهای اسکن صفحات توسط کاربران:الگو Fالگو کیک لایه‌ایالگوی زیگ‌زاگالگوی نقطه به نقطهالگوی وفادار۱. الگوی F یا F patternدر این الگو حرکت چشم کاربران حرف Fانگلیسی را تشکیل می‌دهد. به این صورت که:۱.چشم کاربران ابتدا به صورت افقی محتوای ابتدای صفحه را اسکن ‌می‌کند.۲. پس از آن مقداری به صورت عمودی پایین آمده و دوباره به صورت افقی محتوای پایین‌تر را اسکن می‌کند.۳. در آخرین قدم کاربر کاملا به صورت عمودی چشم خود را حرکت می‌دهد و محتوای ستون سمت چپ را بررسی می‌کند.مسیر حرکت چشم کاربر در الگوی F* در این پترن محتوای موجود در ابتدای صفحه توجه بیشتری نسبت به سایر محتوای موجود در صفحه جلب می‌کنند.* همچنین کلمات ابتدایی جملات در قسمت چپ صفحه امکان خوانده شدن بیشتری نسبت سایر کلمات همان جملات دارند.نقشه حرارتی الگوی Fعموما کاربران در چه صفحاتی از الگوی F برای خواندن استفاده می‌کنند؟بررسی‌ها نشان می‌دهد تمایل کاربران به استفاده از الگوی F در موارد زیر بیشتر می‌شود:هنگامی که با یک بلوک متنی طولانی بدون عنوان، زیرعنوان، لیست‌های بولت‌وار و ... مواجه می‌شوند.هنگامی که می‌خواهند در کمترین زمان ممکن محتوای یک صفحه را متوجه شوند.هنگامی که کاربر هنوز علاقه‌ی لازم برای خواندن متن را پیدا نکرده است و به‌دنبال انگیزه یا دلیل برای ادامه یا عدم ادامه متن است.۲. الگوی کیک لایه‌ای: (Layer-cake pattern) این الگو زمانی اتفاق می‌افتد که در یک صفحه عنوان‌ها و زیرعنوان‌ها کاملا مشخص باشند و کاربر بتواند با استفاده از یک نگاه اجمالی محتوای کلی صفحه را متوجه شود. در میان الگوهای موجود، این الگو نتیجه بهتری به دنبال دارد و کاربر تقریبا متن مهمی در صفحه مورد نظر شما را از دست نخواهد داد.مسیر حرکت چشم کاربر در الگوی کیک لایه‌ای با تمرکز بر عنوان‌ها شما به عنوان طراح یک صفحه چه نکاتی را می‌توانید رعایت کنید تا کاربر را به استفاده الگوی کیک لایه‌ای سوق دهید و تعامل او را افزایش دهید:در قدم اول باید مطمئن باشید عنوان‌ها و زیرعنوان‌ها مشهود هستند، همچنین کاربر با یک نگاه می‌تواند متوجه شود که چه متنی مربوط به چه عنوانی است.اقدامات کمک‌کننده در دیزاین: استفاده از فونت متفاوت سایز بزرگتر در عنوان‌ها رنگ متفاوت در عنوان و زیرعنوان استفاده از افکت‌هایی مانند shadow, underlining, boldingنقشه حرارتی الگوی کیک لایه‌ای۳. الگوی زیگ‌زاگی: (Zig-zag pattern)اصطلاحا در این الگو حرکت چشم کاربر را به حرکت ماشین چمن‌زنی شبیه می‌دانند. کاربر در ابتدا از بلوک سمت چپ شروع می‌کند به صورت افقی تا انتها می‌رود و کمی پایین آمده و برعکس مسیر افقی قبل را طی می‌کند و به همین صورت ادامه می‌دهد.مسیر حرکت چشم کاربر در الگوی زیگزاگ این الگو عموما زمانی اتفاق می‌افتد که بلوک متن و تصویر در صفحه به صورت افقی مدام با یکدیگر جابجا می‌شوند.مسیر حرکت چشم کاربر در وبسایت Wazeمعایب استفاده از این الگوی خواندن توسط کاربر:عدم پیشبینی‌پذیری این مدل طراحی توسط چشم کاربر باعث به هم ریختگی ذهنی و عدم توانایی تمرکز در هنگام اسکن یک صفحه می‌شود. همین امر احتمال رها کردن کاربر را افزایش می‌دهد. در این مدل هنگامی که کاربر یک سطر افقی را اسکن می‌کند، به صورت ناخودآگاه انتظار تکرار همان الگو در سایر سطرها در ذهنش شکل می‌گیرد، اما با پایین آوردن چشم متوجه تغییر مکان بلوک‌های متن و تصویر می‌شود و همین امر آشفتگی ذهنی را به دنبال دارد.همچنین نقشه‌های حرارتی بدست امده از صفحاتی با این الگو، نشان می‌دهد در نهایت کاربر توجهی به تصاویر با ارزش کمتر ندارد و چشمش به‌دنبال متون است. پس می توان نتیجه گرفت استفاده از این مدل طراحی، چندان توصیه نمی‌شود.نقشه حرارتی نشان‌دهنده عدم تمرکز کاربر بر تصاویر۴. الگوی نقطه به نقطه: (Spotted pattern)الگوی نقطه به نقطه، منطق خاصی ندارد و عموما در صفحاتی اتفاق می‌افتد که محتوای زیادی برای ارائه دارد و کاربر نیز می‌داند چه می‌خواهد. چشم کاربر در این صفحات از کلمه‌ای به کلمه‌ی دیگر یا از عنوانی به عنوان دیگر بدون الگوی خاصی حرکت می‌کند. این نوع اسکن کردن عموما در صفحات نتایج جستجو مانند گوگل و بینگ (SERP) دیده شده است.مسیر چشم کاربر در یک صفحه نتیجه جستجوچطور در الگوی نقطه‌به‌نقطه، توجه کاربر را جلب کنیم؟استفاده از پرسش و پاسخ‌های آماده·استفاده از فیچر‌های گوگل مانند آکاردئون‌های بازشونده از دیتای اضافی مانند آدرس و شماره تماساستفاده از بلوک‌های جانبی مانند نقشه۵. الگوی وفادار : (Commitment pattern)الگوی وفادار بیش از اینکه به الگوهای اسکن کردن شبیه باشد به الگوهای مطالعه کردن شبیه است. در این الگو، کاربر با تقریب خوبی تمام جملات را می‌خواند و چیزی را از قلم نمی‌اندازد.چه زمانی کاربر در مواجهه با یک صفحه، از الگوی وفادار استفاده می‌کند؟کاربر اعتماد بالایی به برند کلی و وبسایت داردکاربر وفادار یک وبسایتکاربر متقاعد شده که محتوایی که به دنبالش بوده‌است در همان صفحه یافت می‌شود.نتیجه‌گیری:بررسی های انجام شده طی بیش از دو دهه گذشته نشان می‌دهد، رفتار کاربران در اسکن صفحات تغییر چندانی نداشته است و این به دلیل پایه‌ای بودن این الگوها در روانشانسی رفتاری انسان است.دانستن این الگوها می‌تواند به شما به عنوان طراح یک صفحه کمک کند تا با توجه به محتوای صفحه، بیشترین تعامل با کاربر را شکل دهید و علاوه بر ایجاد تجربه بهتر برای کاربر، به اهداف محصول خود نیز نزدیک‌تر شوید.منابع:https://www.nngroup.com/articles/how-people-read-online/https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/https://www.nngroup.com/articles/layer-cake-pattern-scanning/نگین اسدینگین اسدیSat, 27 May 2023 19:00:05 +0330https://virgool.ir/@neginasadi12.93/کاربران-برای-محصول-شما-تصمیم-گیرنده-نیستند-cpvc5uqwslvvکاربران برای محصول شما تصمیم گیرنده نیستند اما می توانند تصمیمات شما را ارزیابی کنندبرای افرادی که در حوزه محصول فعالیت می‌کنند، این سناریو خیلی آشناست:هنگامی که در تیم محصول در مورد یک فیچر جدید و امکاناتی که باید ارائه دهد صحبت می‌شود، همیشه افرادی هستند که این پیشنهاد را می‌دهند:“بیایید با یک نظرسنجی از کاربران بپرسیم که به چه امکاناتی احتیاج دارند تا فیچر مورد نظر را با توجه به نیاز کاربران توسعه دهیم.”آیا این کار بهترین ایده است؟خیر، اما متاسفانه این کار یکی از اشتباهات رایج در تیم‌های محصول می‌باشد.چرخه معیوب UX researchهدف از انجام تحقیقات تجربه کاربری بررسی رفتار کاربران در جهت تصمیم‌گیری تیم محصول برای ارائه فیچرهای مناسب در زمان مناسب است. این را به یاد داشته باشید که شما در نهایت تصمیم‌گیرنده هستید و نباید از کاربر انتظار داشته باشید قدم بعدی را به شما نشان دهد!برای جلوگیری از این مشکل شما باید همیشه یک چشم‌انداز مشخص برای محصول خود داشته باشید و بدانید ارزش پیشنهادی شما به گروه کاربران مورد نظرتان چیست؟ داشتن این دیدگاه به شما کمک میکند تا از پرسیدن سوالات اشتباه اما رایجی مانند:1. محصول ما در صورت داشتن چه امکاناتی شما را مجاب به استفاده از آن می‌کند؟2. شما حاضرید برای محصولی با این امکاناتی چقدر هزینه کنید؟جلوگیری شود.اولین نکته‌ای که شما باید به آن توجه داشته باشید این است که کاربران شما نباید به این سوالات پاسخ دهند. دومین نکته این است که آن‌ها نمی‌توانند با پاسخ به این سوالات اطلاعات دقیقی به شما دهند چون حتی خود آن‌ها هم نمی‌دانند که دقیقا چه می‌خواهند، یا حتی در بهترین حالت اگر بدانند چه می‌خواهند نمی‌توانند آن‌ را واضح به شما انتقال دهند.سیندی آوارز در یکی از مقالات خود به مواردی اشاره می‌کند که در مصاحبه با کاربران می‌توانند باعث برداشت اشتباه ما شوند. در ادامه به خلاصه‌ای از این موارد اشاره می‌کنم تا بتواند از سوء برداشت و تصمیمات اشتباه ما جلوگیری کند:１. اگر کاربران در صحبت‌های خود به قیمتی که حاضرند برای پرداخت به محصول شما هزینه کنند اشاره کردند، هیچگاه باور نکنید.هیچگاه از کاربر نپرسید چقدر حاضر است برای محصول شما هزینه کند. در مقابل ببینید کاربر برای محصولات مشابه یا محصولاتی که مشکلات مشابه با محصول شما را حل می‌کنند در حال حاضر چقدر هزینه میکند؟ اگر کاربر برای این محصولات هزینه نکرده برای محصول شما هم نخواهد کرد.２. اگر کاربری در صحبت با شما از این جمله استفاده کرد: “ من به شخصه نیازی به این محصول ندارم اما قطعا افرادی هستند که از آن استفاده کنند” بدانید هیچ کس از محصول شما استفاده نخواهد کرد.برای نتیجه بهتر از این پاسخ، از فرد بپرسید به نظرش چه افرادی از محصول استفاده می‌کنند و اگر پاسخ داد از او بخواهید شما را با آن فرد آشنا کند. اگر فرد از معرفی امتناع کرد به نتیجه اولیه خود یعنی کسی از این محصول استفاده نخواد کرد برگردید.３. پاسخ سوالاتی که با “آیا شما میخواهید...؟” یا “آیا شما برای حل این مشکل...؟” همیشه “بله” خواهد بود، پس حساب خاصی روی پاسخ آن باز نکنید.به جای این سوالات از کاربر بپرسید برای حل این مشکل تا به‌حال چه راه‌هایی را امتحان کرده‌است؟ اگر تا به‌حال چاره‌ای نیاندیشیده آن‌قدرها که می‌گوید هم آن مشکل بزرگ نیست.４. اگر کاربری گفت “شاید فقط من این مشکل را دارم ...” بدانید که آن کاربر تنها نیست. به خصوص در زمان‌هایی که مشکل به عدم دسترسی پذیری یا راحتی استفاده از محصول شما برمیگردد.این جمله در مصاحبه، زمانی اتفاق می‌افتد که کاربر می‌خواهد مودب باشد. از کاربران بخواهید رک و بدون پرده هر آنچه فکر می‌کنند به شما بگویند و به آن‌ها اطمینان دهید این کارشان برای شما ارزشمند‌تر است.５. اگر محصول شما شامل هزینه می‌شود، تحقیقات اولیه خود را با افرادی که همیشه دنبال سرویس‌های رایگان هستند شروع نکنید. این افراد ممکن است در نهایت کاربر محصول شما شوند اما این اتفاقی زمانی می‌افتد که محصول شما فراگیر شده باشد. تحقیقات اولیه خود را با early adaptorها آغاز کنید.６. این را به یاد داشته باشید که شما باید کاربران خود را دوست داشته باشید. بر خلاف تصور بسیاری از افراد نیازی نیست شما شبیه به آن‌ها باشید اما باید حتما آ‌ن‌ها را دوست داشته باشید.اگر حتی در اعماق وجودتان حس می‌کنید کاربران شما آن‌قدر باهوش نیستد یا حس ترحم به آن‌ها دارید، بدانید که در نهایت نمود این حس در محصول شما نمایان خواهد شد پس یا تفکرتان را اصلاح کنید یا به دنبال پرسونای دیگری از کاربران باشید.７. هر گاه در هر کدام از مراحل ساخت و توسعه محصول این فکر به ذهنتان خطور کرد که این محصول پیچیده‌تر از آن شد که تصور می‌کردم، بدانید محصول بسیار بسیار پیچیده‌تر شده است، پس دوباره برگردید و بسیاری از مواردی که برای محصول حیاتی نیست، حذف کنید.خب برگردیم به چرخه معیوب تحقیقات کاربری:این چرخه شاید در ابتدای کار هنگامی که محصول در مراحل اولیه است، ضرر چشمگیری نزند. اما همین برداشت‌های اشتباه در باره ارزش محصول باعث می‌شود Pivotهای مورد نیاز تشخیص داده نشوند و در نهایت محصولی که عملا Failشده است با اصرار زیاد بر ادامه دادن توسط تیم محصول، باعث هدر رفتن هزینه و زمان زیادی شود.جالب است بدانیم که این اتفاق همیشه برای تیم‌های محصول با تجربه کم اتفاق نمی‌افتد. برای مثال در سال ۲۰۱۱ گوگل تصمیم گرفت شبکه اجتماعی خود به نام گوگل‌پلاس را برای رقابت با فیسبوک عرضه کند. طبق پیش‌بینی‌های انجام شده توسط این شرکت گوگل انتظار داشت این محصول تا سال ۲۰۱۵ از نظر تعداد کاربر با فیسبوک برابری کند اما اتفاقی که در واقعیت افتاد این بود که در سال ۲۰۱۵ گوگل پلاس ریزش ۸۱٪ در تعامل کاربران را داشت. امروز هنوز کاربرانی هستند که از گوگل پلاس استفاده می‌کنند اما این محصول در واقعیت یکی از محصولات شکست‌خورده گوگل می‌باشد.همیشه یادتان باشد کاربران قرار است به شما مسیر را نشان دهند. از کابران نخواهید به جای شما تصمیم بگیرند. تصمیمات نهایی درباره محصول همیشه به عهده خود شماست.منابع:https://uxdesign.cc/customers-are-not-there-to-drive-decisions-about-your-product-but-to-validate-yours-44cc0de8dae2https://www.cindyalvarez.com/10-things-ive-learned-about-customer-development/نگین اسدینگین اسدیMon, 03 Apr 2023 09:26:23 +0330