مقالات تجربه کاربری - قانون شباهت
قانون شباهت
قانون شباهت 
قانون شباهت (Law of Similarity) چیست؟
💡 این متن «بازنویسی آزاد» است: ایدهها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثالهای تازه بازگو شدهاند و ترجمهٔ کلمهبهکلمه نیست. بخشهای افزودهٔ مترجم در جعبهٔ منبع مشخص شدهاند.
مجاورت میگوید اینها با هماند. شباهت میگوید اینها از یک جنساند. و این دو حرف متفاوت است.
تعریف
قانون شباهت، اصلی گشتالتی است که میگوید «آدمها عنصرهایی را که ویژگیهای بصری مشابهی دارند — مثل رنگ، اندازه، شکل — مرتبط ادراک میکنند.»
و این مفهوم بنیادی توضیح میدهد که مغز چطور اطلاعات بصری را در گروههای معنادار سازمان میدهد، بهجای ادراک عنصرهای منفرد.
خاستگاه
و مکتب گشتالت در دههٔ ۱۹۲۰ آلمان شکل گرفت، از کار سه روانشناس پیشگام: ماکس ورتهایمر، کورت کوفکا و ولفگانگ کهلر.
و کوفکا اصل مرکزی گشتالت را در یک جمله خلاصه کرد: «کل، چیزی جدا از مجموع اجزاست.»
و آن جمله دقیقتر از ترجمهٔ رایجش است. کوفکا نگفت «بیشتر از مجموع اجزا» — گفت «جدا از» آن.
و تفاوتش این است که کل، چیز دیگری است؛ نه نسخهٔ بزرگشدهٔ اجزا.
و این نظریهپردازان بعدها از ولفگانگ متزگر (۱۹۳۶) اثر گرفتند.
و چارچوبهایی ساختند که توضیح میداد انسان چطور ناخودآگاه عنصرهای طرح را بر پایهٔ اصول سازمان بصری به هم وصل میکند.
چطور کار میکند
و این اصل از راه پردازش شناختی خودکار کار میکند.
و مغز اشیایی را که ویژگی مشابهی دارند گروه میکند: شکل · اندازه · رنگ · بافت · و جهتگیری.
و این تمایل طبیعی اجازه میدهد انسان الگو و نسبت و ساختار را در محیط بصری پیچیده ادراک کند.
و پنج ویژگی بالا همارز نیستند، و این نکتهای است که منبع نمیگوید.
و در عمل، ترتیب قدرتشان این است: رنگ قویترین است، بعد شکل، بعد اندازه، و جهتگیری و بافت ضعیفترین.
و پیامد عملیاش این است که اگر دو عنصر همرنگ باشند، تفاوت شکلشان بهسختی دیده میشود — و برعکسش صادق نیست.
چهار فایده
انسجام بصری — گروهکردن عنصرهای مشابه، طرح همبسته میسازد، جایی که کاربر نسبتها را راحت تشخیص میدهد.
اطلاعات سازمانیافته — طراح با دادن ویژگی بصری مشابه به عنصرهای مرتبط، اطلاعات را بیواسطه ساختار میدهد و سلسلهمراتب را روشن.
ناوبری بهتر — نشانهٔ بصری یکدست به کاربر کمک میکند ساختار رابط را بفهمد و کارکرد موردنظرش را سریعتر پیدا کند.
درگیری بیشتر — طرح خوشظاهری که از شباهت استفاده میکند، تعامل و رضایت بیشتری میسازد.
سه فن عملی
یکدستی بصری. برای آیکون، شکل و سبک و پالت مشابه بازشناسی و کاربردپذیری را بهتر میکند. و برای تایپوگرافی، قلم و اندازه و سبک یکدست، طرح همبسته و قابل تشخیص میسازد.
گروهبندی و دستهبندی. سه ابزار دارد.
- - رنگ — آبی برای کنش اصلی، سبز برای کنش ثانویه.
- - شکل — آیکون دایرهای برای شبکههای اجتماعی، مربعی برای اطلاعات تماس.
- - و اندازه — تصویر بزرگ برای محتوای اصلی، کوچکتر برای فرعی.
برجستهکردن عنصر مهم. با متمایزکردن بصری عنصر کلیدی از راه رنگ یا اندازه یا شکل، توجه کاربر جلب میشود و سلسلهمراتب روشنی ساخته.
و فن سوم در واقع شکستن شباهت است، نه ساختنش.
و همین نکتهای اساسی را میگوید: شباهت فقط وقتی معنا دارد که چیزی از آن بیرون بماند.
و صفحهای که همهچیزش شبیه هم است، هیچ گروهی ندارد — یک گروه بزرگ دارد، که همان چیزی است که نداشتن گروه است.
شش نمونه
- - آمازون — دکمههای نارنجی و طلایی متمایز برای فراخوان اصلی.
- - ایبی — دکمههای مشابه برای دستههای اندازه، در حالی که جستوجو متمایز برجسته میماند.
- - فلیپکارت — تقسیم محتوا به دستههای مرتب، با تکیه بر شباهت.
- - گوگل درایو — تایپوگرافی و آیکون و رنگ یکدست در سراسر محصول.
- - اسپاتیفای — گروهکردن فهرستهای پخش جدا از آهنگهای منفرد، با نشانهٔ بصری یکدست.
- - و متریال دیزاین — سامانهٔ طراحی گوگل که بهشدت بر شباهت تکیه دارد.
و نمونهٔ ایبی دقیقترینشان است، چون هم استفاده از شباهت را نشان میدهد و هم شکستنش را — در یک صفحه.
شواهد اثربخشی
- - توجه بصری — کاربر تمرکزش را راحتتر به سمت عنصرهای همسبک میبرد.
- - سلسلهمراتب بصری — شباهتِ خوببهکاررفته، سلسلهمراتب روشنی میسازد که ناوبری را جهت میدهد.
- - و بازشناسی و یادآوری — شباهت بصری مشترک، تشخیص الگو و نگهداشت اطلاعات را بهتر میکند.
هفت بهترینروش
- - یکدستی را تضمین کنید — ویژگی بصری یکسان برای کارکرد یا دستهٔ یکسان، در سراسر رابط.
- - کنتراست را راهبردی به کار ببرید — توازن شباهت با کنتراست، برای برجستهکردن عنصر مهم.
- - فضای منفی را مدیریت کنید — فضای سفید، تنفس بصری میدهد و قاببندی بخشها را ممکن میکند.
- - از استفادهٔ بیش از حد بپرهیزید — کاربرد مفرط، شلوغی بصری میسازد.
- - بافت فرهنگی را در نظر بگیرید — رنگ و شکل و نماد در فرهنگهای مختلف معنای متفاوتی دارند.
- - آزمون و تکرار کنید — با آزمون کاربردپذیری و بازخورد، اثربخشی را بسنجید.
- - و بهروز بمانید — از روندها و زبانهای طراحی نوظهور آگاه باشید.
چهار دام
وابستگی سلسلهمراتب — فقط به شباهت تکیه نکنید؛ اصول گشتالتی دیگر (مجاورت، بستار) را هم به کار ببرید.
تمایز ناکافی — تکیهٔ بیش از حد بر شباهت ممکن است کاربر را از تشخیص دستهها و گونههای مختلف بازدارد.
سردرگمی و ابهام — کاربرد بیفکر شباهت، گیجی میسازد. شباهتها باید مربوط و معنادار باشند.
محدودشدن انعطاف طراحی — پیروی سخت از شباهت ممکن است خلاقیت را محدود کند.
و دام دوم و سوم با هم یک قاعده میسازند: هر شباهت بصری، به کاربر یک وعده میدهد.
و وعدهاش این است که این چیزها از یک جنساند و مثل هم رفتار میکنند.
و اگر رفتارشان یکی نباشد، شباهت بصری به دروغ تبدیل میشود — و کاربر با کلیککردن کشفش میکند.
و بدترین صورتش این است: دو چیزی که مثل هم به نظر میرسند و یکی برگشتپذیر است و دیگری نیست.
تفاوت با مجاورت
و منبع تفکیک را روشن میگوید: شباهت عنصرهای دارای ویژگی بصری مشترک را گروه میکند، و مجاورت عنصرهای نزدیک به هم را.
و این دو مکمل هم کار میکنند — شباهت نسبت بصری میسازد و مجاورت گروهبندی فیزیکی.
و منبع فهرست کاملی از اصول خویشاوند هم میدهد.
مجاورت · پیوستگی · بستار · پیوندیافتگی · شکل و زمینه · و تقارن و نظم.
در موبایل، انیمیشن و دسترسپذیری
در موبایل شباهت ارزش ویژهای دارد. رنگ و شکل یکدست برای دکمههای ناوبری، تشخیص سریع کارکردهای مرتبط را ممکن میکند — و بار شناختی را در محیط تنگ موبایل کم.
در انیمیشن شباهت انسجام بصری میسازد، توجه را با الگوی حرکتی یکپارچه هدایت میکند، ریتم و جریان میسازد، و از روایتگری پشتیبانی میکند.
در دسترسپذیری استفاده از رنگ و شکل و سبک یکدست برای دکمههای همکنش، به کاربر با اختلال بینایی کمک میکند و ناوبری را روان.
و گروهکردن اطلاعات مرتبط بر پایهٔ ظاهر، به کاربران با معلولیت شناختی کمک میکند محتوا را بفهمند — و از پیروی از WCAG پشتیبانی میکند.
در بافت فارسی
یک: شباهت در تایپوگرافی فارسی سختتر ساخته میشود. تعداد قلمهای فارسیِ باکیفیت کم است، و خانوادههای قلم اغلب وزنهای کامل ندارند.
و نتیجهٔ عملیاش این است که باید سلسلهمراتب را با اندازه و رنگ بسازید، نه با وزن قلم.
چون سه وزن متمایز اغلب در دسترس نیست.
دو: آیکونهای وارداتی شباهت را میشکنند. ترکیب آیکون از دو مجموعهٔ مختلف — یکی برای مفاهیم عمومی و یکی برای مفاهیم محلی — دو زبان بصری میسازد.
و همانطور که در سامانهٔ طراحی نوشتم، بهتر است یک مجموعه را بردارید و موارد کمشده را در همان سبک بسازید.
سه: معنای رنگ اینجا کاملاً همان معنای جهانی نیست. بند «بافت فرهنگی» در فهرست بالا برای ما بند اصلی است.
و همانطور که در نمادگرایی رنگ نوشتم، سبز و سرخ در بافتهای مختلف بار متفاوتی دارند.
و رنگبندیِ کنش اصلی و ثانویه را نباید بیآزمون وارد کرد.
چهار: عدد لاتین در متن فارسی، شباهت را میشکند. رقمهای لاتین و فارسی دو جنس بصری متفاوتاند.
و اگر در یک صفحه هر دو به کار بروند، کاربر آنها را دو دستهٔ اطلاعاتی میبیند — حتی وقتی از یک جنساند. پس یکی را انتخاب کنید و همهجا نگهش دارید.
جمعبندی
- - قانون شباهت: آدمها عنصرهایی را که ویژگی بصری مشابهی دارند مرتبط ادراک میکنند
- - ورتهایمر · کوفکا · کهلر · دههٔ ۱۹۲۰ آلمان — و بعدها اثر ولفگانگ متزگر (۱۹۳۶)
- - کوفکا: «کل، چیزی جدا از مجموع اجزاست» — نه «بیشتر از» آن؛ کل چیز دیگری است
- - پنج ویژگی گروهکننده: شکل · اندازه · رنگ · بافت · جهتگیری
- - و همارز نیستند: رنگ قویترین است، بعد شکل و اندازه، و بافت و جهتگیری ضعیفترین
- - چهار فایده: انسجام بصری · اطلاعات سازمانیافته · ناوبری بهتر · درگیری بیشتر
- - سه فن: یکدستی بصری · گروهبندی با رنگ و شکل و اندازه · برجستهکردن عنصر مهم
- - و فن سوم در واقع شکستن شباهت است: شباهت فقط وقتی معنا دارد که چیزی از آن بیرون بماند
- - نمونهها: آمازون · ایبی · فلیپکارت · گوگل درایو · اسپاتیفای · متریال دیزاین
- - هفت بهترینروش، و چهار دام: وابستگی سلسلهمراتب · تمایز ناکافی · ابهام · محدودشدن انعطاف
- - و هر شباهت بصری یک وعده است: این چیزها از یک جنساند و مثل هم رفتار میکنند
- - بدترین نقض این وعده: دو چیز مثل هم که یکی برگشتپذیر است و دیگری نیست
- - و در فارسی: سلسلهمراتب را با اندازه و رنگ بسازید نه با وزن قلم · یک مجموعهٔ آیکون · رنگ را بیآزمون وارد نکنید · و یک جنس رقم انتخاب کنید
منبع
این نوشته «بازنویسی آزاد» است از مطلب What is the Law of Similarity? در وبسایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF؛ بدون نام نویسندهٔ مشخص). مفاهیم پایه — تعریف قانون شباهت بهعنوان اصلی گشتالتی و نقلقولش دربارهٔ ادراک مرتبط عنصرهای دارای ویژگی بصری مشابه مثل رنگ و اندازه و شکل، و توضیح سازماندادن اطلاعات بصری در گروههای معنادار توسط مغز؛ خاستگاه یعنی شکلگیری مکتب گشتالت در دههٔ ۱۹۲۰ آلمان از کار ماکس ورتهایمر و کورت کوفکا و ولفگانگ کهلر، نقلقول کوفکا دربارهٔ جدابودن کل از مجموع اجزا، و اثرگرفتن بعدی از ولفگانگ متزگر در ۱۹۳۶ و ساختن چارچوبهای توضیحدهندهٔ وصل ناخودآگاه عنصرها؛ سازوکار پردازش شناختی خودکار و پنج ویژگی گروهکننده یعنی شکل و اندازه و رنگ و بافت و جهتگیری و نقلقول دربارهٔ گروهکردن خودکار؛ چهار فایده یعنی انسجام بصری و اطلاعات سازمانیافته و ناوبری بهتر و درگیری بیشتر با شرحشان؛ سه فن عملی یعنی یکدستی بصری در آیکون و تایپوگرافی، گروهبندی با رنگ و شکل و اندازه با نمونههایشان، و برجستهکردن عنصر مهم؛ شش نمونه یعنی آمازون و ایبی و فلیپکارت و گوگل درایو و اسپاتیفای و متریال دیزاین با شرحشان؛ سه شاهد اثربخشی یعنی توجه بصری و سلسلهمراتب بصری و بازشناسی و یادآوری؛ هفت بهترینروش؛ چهار دام یعنی وابستگی سلسلهمراتب و تمایز ناکافی و سردرگمی و ابهام و محدودشدن انعطاف طراحی؛ تفکیک شباهت از مجاورت و مکملبودنشان و فهرست کامل اصول خویشاوند؛ و بخشهای موبایل و انیمیشن و دسترسپذیری با جزئیاتشان و ارجاع به WCAG — از این منبع گرفته شده. متن فارسی، ساختار بخشها و همهٔ تحلیلها کاملاً مستقل نوشته شدهاند.
متن مطلب اصلی تحت هیچ لایسنس بازی منتشر نشده است؛ به همین دلیل اینجا ترجمهٔ کلمهبهکلمه ارائه نشده و متن کامل انگلیسی (بههمراه همهٔ منابع مرتبط) در لینک زیر در دسترس است.
بخشهای افزودهٔ مترجم: صورتبندی آغازین دربارهٔ تفاوت حرف مجاورت و شباهت؛ تحلیل دقت جملهٔ کوفکا و تفکیک «جدا از مجموع اجزا» از ترجمهٔ رایج «بیشتر از»، با نتیجهگیری اینکه کل چیز دیگری است نه نسخهٔ بزرگشدهٔ اجزا؛ گزارهٔ همارز نبودن پنج ویژگی گروهکننده و ترتیب قدرتشان یعنی رنگ و شکل و اندازه و بعد جهتگیری و بافت، و پیامد عملیاش دربارهٔ دیدهنشدن تفاوت شکل در دو عنصر همرنگ؛ تحلیل فن سوم بهعنوان شکستن شباهت بهجای ساختنش، و گزارهٔ اینکه شباهت فقط وقتی معنا دارد که چیزی از آن بیرون بماند، با نتیجهگیری دربارهٔ صفحهٔ همهشبیه؛ برجستهکردن نمونهٔ ایبی بهعنوان دقیقترین چون هم استفاده و هم شکستن شباهت را در یک صفحه نشان میدهد؛ ترکیب دام دوم و سوم در قاعدهٔ «هر شباهت بصری یک وعده است» با صورتبندی محتوای وعده، پیامد نقضش یعنی تبدیلشدن شباهت به دروغ و کشفشدنش با کلیک، و بدترین صورتش یعنی دو چیز مثل هم که یکی برگشتپذیر است و دیگری نیست؛ و کل بخش بافت فارسی شامل سختتر بودن ساختن شباهت تایپوگرافیک بهدلیل کمبود قلم و وزن و توصیهٔ ساختن سلسلهمراتب با اندازه و رنگ، شکستن شباهت توسط آیکونهای وارداتی از دو مجموعه و توصیهٔ ساختن موارد کمشده در همان سبک، اصلیبودن بند بافت فرهنگی برای خوانندهٔ فارسی و هشدار دربارهٔ واردکردن بیآزمون رنگبندی کنش، و شکستن شباهت توسط ترکیب رقم لاتین و فارسی و توصیهٔ انتخاب یک جنس رقم
تصاویر: هیچ تصویری از مطلب اصلی بازتولید نشده است. هر سه نمودار این صفحه طراحی مستقل مترجم است.
مشاهدهٔ مطلب اصلی
مترجم: سپنتا پویا
طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی به فارسی برمیگردانم.
دربارهٔ من