سپنتا پویا — طراح محصول

باری که کار است در برابر باری که کار نیست
منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · مرداد ۱۴۰۵ · زمان مطالعه: حدود ۱۴ دقیقه

شناخت (Cognition) در طراحی UX/UI چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

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

اما حافظهٔ عضلانی از تلاش تکرارشده ساخته می‌شود، نه از غیبت تلاش. این دو هدف با هم برخورد می‌کنند — و منبع به آن اشاره نمی‌کند.

تعریف

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

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

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

چرا برای شناخت طراحی می‌کنیم

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

هفت اصل شناختی

  • - ۱. بار شناختی. کاربر تنها چند قلم را در حافظهٔ کاری نگه می‌دارد — که منبع آن را «۷ به‌علاوه یا منهای ۲» می‌گوید. راه‌حل‌ها: شکستن کار به گام‌های قابل‌مدیریت، حذف گزینه‌های غیرلازم، زبان ساده، و افشای تدریجی.
  • - ۲. توجه و ادراک بصری. کاربر به همهٔ عناصر یک صفحه توجه یکسان نمی‌کند؛ اسکن می‌کند. سلسله‌مراتب بصری، کنتراست، تایپوگرافی و اصول گشتالت توجه را هدایت می‌کنند.
  • - ۳. حافظه: بازشناسی در برابر بازیابی. بازشناختن چیزی که قبلاً دیده‌اید آسان‌تر از به‌یادآوردنش از حافظه است — و همین یکی از موارد بررسی در ارزیابی اکتشافی است.
  • - ۴. مدل‌های ذهنی. کاربر تصویری از «این چیز باید چطور کار کند» با خودش می‌آورد. اگر طراحی با آن بخواند شهودی حس می‌شود، و اگر نخواند کاربر سرگردان می‌شود. آیکون سبد خرید باید به پرداخت برود، نه به تنظیمات حساب.
  • - ۵. تصمیم‌گیری و معماری انتخاب. گزینهٔ زیاد کاربر را کند می‌کند (قانون هیک) و شکل ارائهٔ انتخاب بر تصمیم اثر می‌گذارد. پس گزینه‌های مرئی را محدود کنید، پیش‌فرض‌های هوشمند بدهید و مسیر پیشنهادی را روشن علامت بزنید.
  • - ۶. سوگیری‌های شناختی. لنگر‌انداختن، سوگیری تأییدی و سوگیری دسترس‌پذیری. منبع می‌گوید می‌توانید با ترتیب معنادار گزینه‌ها و اثبات اجتماعی («محبوب‌ترین طرح») تصمیم را «به‌شکل اخلاقی» هدایت کنید.
  • - ۷. قابلیت‌ها و بازخورد. دکمه باید قابل‌کلیک به‌نظر برسد و کنش کاربر باید تأیید شود («پرداخت دریافت شد»).

گام‌های پیاده‌سازی

منبع شش گام می‌دهد: شروع با پژوهش کاربر و نقشه‌برداری شناختی (پرسونا، جریان کاربر، نقشهٔ شناختی برای نشان‌دادن نقاط تصمیم و شکاف‌های دانش) · معماری اطلاعات همسو با شناخت — و پیش از افزودن هر ویژگی بپرسید بار شناختی را بالا می‌برد یا نه · الگوهای بصری و تعاملی شامل افشای تدریجی و نشانگر پیشرفت و آیکون آشنا · بازخورد و پیشگیری از خطا و بازیابی با «واگرد» هرجا ممکن باشد · هم‌راستایی با دسترس‌پذیری · و نمونه‌سازی و آزمون.

و توصیهٔ خوبی برای آزمون دارد: نپرسید فقط «آیا کار را تمام کرد؟» — بپرسید «فهمید باید چه کند؟ مکث کرد؟ اشتباه حدس زد؟»

«کاهش بار شناختی» هدف نیست

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

بار شناختی دو نوع است و منبع با هر دو یکسان برخورد می‌کند:

  • - باری که کارِ کاربر نیست: پیدا‌کردن دکمه، به‌یادآوردن شمارهٔ سفارش، رمزگشایی آیکون، فهمیدن اینکه در کدام گام است. این بار خالص هدر است و هر مقدارش را باید حذف کرد.
  • - باری که خودِ کارِ کاربر است: انتخاب بین دو طرح بیمه، تصمیم دربارهٔ اینکه این پزشک متخصص درست است یا نه، فهمیدن اینکه این هزینه ارزشش را دارد. حذف این بار طراحی نیست — تصمیم‌گرفتن به‌جای کاربر است.

و بعد مسئلهٔ یادگیری. «بازشناسی بر بازیابی» برای رابطی که کاربر سالی دو بار از آن استفاده می‌کند درست است، و برای ابزاری که روزی چهل بار باز می‌شود غلط است — چون کاربر حرفه‌ای دقیقاً بازیابی می‌خواهد: میان‌بر صفحه‌کلید، دستور تایپی، حرکت حفظ‌شده.

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

پس پرسش را عوض کنید: نه «چقدر بار کم کردم؟» بلکه «کدام بار را کم کردم — باری که کار است یا باری که مانع کار است؟»

«۷±۲» آن چیزی نیست که فکر می‌کنید

این بخش هم افزودهٔ مترجم است و کوتاه است، ولی مهم: منبع «۷ به‌علاوه‌منهای ۲» را به‌عنوان پایهٔ اصل بار شناختی می‌آورد، و این عدد آن حرف را نمی‌زند.

  • - آن عدد از آزمون گسترهٔ حافظه می‌آید — تعداد قلم‌هایی که کسی می‌تواند از حفظ تکرار کند. برآوردهای امروزی به حدود ۴ نزدیک‌ترند، نه ۷.
  • - و مهم‌تر: قلم‌هایی که روی صفحه دیده می‌شوند در حافظهٔ کاری نگه‌داشته نمی‌شوند. منوی مرئی چیزی برای حفظ‌کردن نیست، پس محدودیت حافظهٔ کاری هیچ حرفی دربارهٔ «منو باید هفت گزینه داشته باشد» ندارد.

آنچه واقعاً برای یک فهرست مرئی مهم است هزینهٔ اسکن است، و هزینهٔ اسکن به برچسب و گروه‌بندی بستگی دارد، نه به تعداد. فهرست سی‌تایی خوب‌گروه‌بندی‌شده از فهرست هفت‌تایی بی‌ساختار بهتر عمل می‌کند — و کوتاه‌کردن منو به هفت قلم با پنهان‌کردن بقیه زیر «بیشتر»، بار را کم نکرده؛ جابه‌جا کرده.

کاهش بار و پنهان‌کردن تصمیم یک حرکت‌اند

ابزارهای کاهش بار در شکل با الگوهای تاریک یکسان‌اند
نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

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

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

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

آزمونی که کار می‌کند این است: آیا این پیش‌فرض در حالتی که به ضرر ماست هم به سود کاربر است؟

  • - اگر «طرح پیشنهادی» هرگز ارزان‌ترین طرح نیست، شما بار را کم نکرده‌اید؛ هدایت کرده‌اید.
  • - اگر «افشای تدریجی» چیزی را پنهان می‌کند که کاربر پیش از پرداخت باید بداند (هزینهٔ ارسال، شرط تمدید خودکار، جریمهٔ لغو)، آن افشای تدریجی نیست.
  • - و اگر گزینهٔ حذف‌شده گزینه‌ای است که کاربر ممکن بود انتخاب کند و ما نمی‌خواستیم، آن «سادگی» نیست.

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

در بافت فارسی: مدل ذهنی از کجا می‌آید

مدل ذهنی محلی، سلسله‌مراتب بدون وزن، ارقام و آزمون نام‌بردن آیکون
نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

این بخش هم افزودهٔ مترجم است و چهار نکته دارد.

یک: مدل ذهنی کاربر ما از کنوانسیون جهانی نمی‌آید — از اپ‌های محلی و رویه‌های غیر‌دیجیتال می‌آید. مدل ذهنی «پرداخت چطور کار می‌کند» از اپ بانک خودش و مسیر رمز دوم و صفحهٔ درگاه ساخته شده. پس اگر یک پرداخت «تمیزتر» طراحی کنید که مرحلهٔ مورد‌انتظار او را حذف کند، کاربر آن را کاهش بار نمی‌خواند — شکست می‌خواند و دوباره تلاش می‌کند یا به پشتیبانی زنگ می‌زند. حذف صفحهٔ تأیید اضافی، مدرکِ کاربر را هم که پرداخت انجام شد حذف می‌کند.

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

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

چهار: «آیکون آشنا» فقط برای کسی آشناست که آموزشش را دیده. سبد خرید و ذره‌بین واقعاً آشنا هستند؛ اما فلاپی‌دیسک ذخیره، روبان نشان‌گذاری و آیکون هم‌رسانی نه. و آزمونش رایگان است: از یک نفر غیر‌طراح بخواهید آیکون را نام ببرد، نه اینکه پیدایش کند. اگر گفت «این چیه؟»، آن آیکون بازشناسی نیست — یک بازیابی است که برچسب ندارد.

و یک نکتهٔ آخر: جملهٔ خوب خود منبع که «تصور نکنید کاربر روی صندلی راحت در اتاقی ساکت نشسته» در بافت ما سخت‌تر صدق می‌کند — گوشی میان‌رده، یک‌دستی، در راه، با اینترنت کند. یعنی کمیاب‌ترین منبع اینجا توجه است، نه حافظه؛ و بارِ توجه با کم‌کردن چیزهای متحرک و همزمان کم می‌شود، نه با کم‌کردن گزینه‌ها.

جمع‌بندی

  • - شناخت در طراحی به شکل فکر‌کردن و درک و به‌یادآوردن و تصمیم‌گرفتن کاربر می‌پردازد: ادراک، توجه، حافظه، تصمیم‌گیری، حل مسئله و مدل‌های ذهنی.
  • - هفت اصلش بار شناختی، توجه و ادراک بصری، بازشناسی در برابر بازیابی، مدل‌های ذهنی، معماری انتخاب، سوگیری‌ها و قابلیت‌ها و بازخورد است.
  • - اما «کاهش بار» هدف نیست: باری که کارِ کاربر نیست را کامل حذف کنید، و باری که خودِ کار است را حذف‌کردنش تصمیم‌گرفتن به‌جای اوست.
  • - و «بازشناسی بر بازیابی» برای ابزار روزمره غلط است؛ رابطی که همهٔ بازیابی را حذف کند کاربر را برای همیشه به نشانه‌هایش وابسته نگه می‌دارد و او هرگز حرفه‌ای نمی‌شود.
  • - «۷±۲» از آزمون گسترهٔ حافظه می‌آید و دربارهٔ فهرست‌های مرئی حرفی ندارد؛ مهم هزینهٔ اسکن است — فهرست سی‌تایی گروه‌بندی‌شده از هفت‌تایی بی‌ساختار بهتر است.
  • - ابزارهای کاهش بار در شکل با الگوهای تاریک یکسان‌اند؛ آزمونش این است: آیا این پیش‌فرض در حالتی که به ضرر ماست هم به سود کاربر است؟
  • - و در بافت ما: مدل ذهنی از اپ‌های محلی می‌آید (حذف مرحلهٔ مورد‌انتظار = شکست) · سلسله‌مراتب فارسی را با اندازه و فاصله بسازید نه وزن · ارقامِ قابل‌تطبیق را لاتین بگذارید · و آیکون را با «نامش را بگو» آزمون کنید.

منبع

این نوشته «بازنویسی آزاد» است از مطلب What is Cognition in UX/UI Design? در وب‌سایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF؛ بدون نام نویسندهٔ مشخص). مفاهیم پایه — تعریف شناخت در طراحی به‌عنوان شکل فکر‌کردن و درک و به‌یادآوردن و تصمیم‌گرفتن کاربر و کار طراح در پشتیبانی از آن، فهرست فرایندهای شناختی شامل ادراک و توجه و حافظه و تصمیم‌گیری و حل مسئله و مدل‌های ذهنی، مثال اپلیکیشن نوبت‌گیری پزشک با آیکون مبهم و لایه‌های پنهان و جزئیات بیمه، پنج فایدهٔ طراحی برای شناخت شامل کاهش سرخوردگی و افزایش کاربردپذیری و بهبود تبدیل و نگه‌داشت و پشتیبانی یادگیری و عادت و تقویت دسترس‌پذیری، هفت اصل شناختی شامل بار شناختی با استناد به ۷±۲ و افشای تدریجی، توجه و ادراک بصری و اصول گشتالت، بازشناسی در برابر بازیابی و نسبتش با ارزیابی اکتشافی، مدل‌های ذهنی و مثال آیکون سبد خرید، تصمیم‌گیری و معماری انتخاب با قانون هیک و پیش‌فرض هوشمند و مسیر پیشنهادی، سوگیری‌های شناختی شامل لنگر‌انداختن و سوگیری تأییدی و دسترس‌پذیری و توصیهٔ اثبات اجتماعی، و قابلیت‌ها و بازخورد، و شش گام پیاده‌سازی شامل پژوهش و نقشه‌برداری شناختی و معماری اطلاعات و الگوهای بصری و بازخورد و پیشگیری از خطا و دسترس‌پذیری و نمونه‌سازی و آزمون به‌همراه توصیهٔ پرسیدن «فهمید باید چه کند؟ مکث کرد؟» — از این منبع گرفته شده. منبع به ویدیوهای Alan Dix، William Hudson، Vitaly Friedman و Mia Cinelli ارجاع می‌دهد. متن فارسی، ساختار بخش‌ها و همهٔ تحلیل‌ها کاملاً مستقل نوشته شده‌اند.

متن مقالهٔ اصلی تحت هیچ لایسنس بازی منتشر نشده است؛ به همین دلیل اینجا ترجمهٔ کلمه‌به‌کلمه ارائه نشده و متن کامل انگلیسی (به‌همراه همهٔ تصاویر و ویدیوها) در لینک زیر در دسترس است.

بخش‌های افزودهٔ مترجم: صورت‌بندی آغازین دربارهٔ برخورد «حذف تا‌جای‌ممکن بخش کار» با هدف «پشتیبانی یادگیری و حافظهٔ عضلانی»؛ کل بخش «کاهش بار شناختی هدف نیست» شامل تفکیک باری که کارِ کاربر نیست از باری که خودِ کار است با نمونه‌های هر دو و نتیجه‌گیری تصمیم‌گرفتن به‌جای کاربر، تحلیل غلط‌بودن «بازشناسی بر بازیابی» برای ابزار پرتکرار و نیاز کاربر حرفه‌ای به میان‌بر، تشخیص اینکه توصیهٔ خود منبع دربارهٔ میان‌برها اصلش را نقض می‌کند، صورت‌بندی وابستگی دائمی به نشانه‌ها، و بازنویسی پرسش سنجش؛ کل بخش «۷±۲ آن چیزی نیست که فکر می‌کنید» شامل منشأ عدد در آزمون گسترهٔ حافظه و برآورد امروزی حدود ۴، استدلال اینکه قلم‌های مرئی در حافظهٔ کاری نگه‌داشته نمی‌شوند، و جانشین‌کردن هزینهٔ اسکن با مقایسهٔ فهرست سی‌تایی گروه‌بندی‌شده و هفت‌تایی بی‌ساختار و نقد پنهان‌کردن زیر «بیشتر»؛ کل بخش «کاهش بار و پنهان‌کردن تصمیم یک حرکت‌اند» شامل تشخیص یکسانی شکلی ابزارهای توصیه‌شده با الگوهای تاریک، نشان‌دادن انجام‌دادن همان کار در بند سوگیری‌های خود منبع و بی‌کفایتی قید «اخلاقی» به‌عنوان آزمون، آزمون پیشنهادی «آیا در حالتی که به ضرر ماست هم به سود کاربر است»، سه نمونهٔ محک، و استدلال ناکافی‌بودن آزمون کاربردپذیری برای تشخیص این دو؛ و کل بخش بافت فارسی شامل تحلیل منشأ مدل ذهنی از اپ‌های محلی و رویه‌های غیر‌دیجیتال و پیامد حذف مرحلهٔ مورد‌انتظار، مسئلهٔ ضعف وزن در فونت‌های فارسی و توصیهٔ ساخت سلسله‌مراتب با اندازه و فاصله و رنگ، قاعدهٔ ارقام لاتین برای اقلام قابل‌تطبیق، آزمون «نام ببر» برای آیکون، و استدلال کمیاب‌تر‌بودن توجه از حافظه در بافت گوشی میان‌رده و استفادهٔ در‌راه.

تصاویر: هر سه نمودار این صفحه طراحی مستقل مترجم است. تصاویر نسخهٔ اصلی با لایسنس CC BY-SA 4.0 و اجازهٔ استفادهٔ منصفانه منتشر شده‌اند؛ اینجا بازتولید نشده‌اند و در مطلب اصلی قابل مشاهده‌اند.

مشاهدهٔ مقالهٔ اصلی
سپنتا پویا

مترجم: سپنتا پویا

طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی به فارسی برمی‌گردانم.

دربارهٔ من

در این مقاله

  • - تعریف
  • - چرا برای شناخت
  • - هفت اصل
  • - گام‌های پیاده‌سازی
  • - کاهش بار هدف نیست
  • - ۷±۲
  • - کاهش یا هدایت
  • - در بافت فارسی

برچسب‌ها

  • شناخت
  • بار شناختی
  • مدل ذهنی
  • UX
  • ترجمه