اردشیر حکیمی
اردشیر حکیمی
خواندن ۵ دقیقه·۴ سال پیش

اصول گشتالت در طراحی رابط کاربری (UI)

آرایه‌ای از مربع‌های یکسان که در کنار یکدیگر قرار گرفته‌اند. برخی از مربع‌ها با رنگ سیاه پُر شده و الگویی تصویری شبیه به علامت :) را در ذهن بیننده تداعی می‌کنند.
آرایه‌ای از مربع‌های یکسان که در کنار یکدیگر قرار گرفته‌اند. برخی از مربع‌ها با رنگ سیاه پُر شده و الگویی تصویری شبیه به علامت :) را در ذهن بیننده تداعی می‌کنند.


دو مقوله دیزاین و روانشناسی، ارتباطی متقابل با یکدیگر دارند و بر یکدیگر تاثیر می‌گذارند. اصول گشتالت به ما کمک می‌کند که درک بهتری از ارتباط دیزاین و روانشناسی داشته باشیم.

کلمه گشتالت (Gestalt) در زبان آلمانی به معنای فرم و شکل است و اصطلاحا دلالت بر پاره‌ای از اصول ادراک بصری دارد که توسط گروهی از روانشناسان آلمانی در دهه ۱۹۲۰ میلادی مطرح شدند.

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

  • تقدم
  • تجسم
  • چند پایایی
  • تغییر ناپذیری

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


۱. تقدم

ذهن ما در برخورد با عناصر تصویری، تمایل دارد که ابتدا شکل عمومی و مرزهای پیرامونی را ادراک کند. در واقع، مغز، اشیاء ساده و واضح را سریع‌تر از اشیاء پُر‌جزییات تشخیص می‌دهد (شکل ۱).

شکل ۱. ذهن ابتدا کُل لکه‌های سیاه را با هم و به شکل یک سگ می‌بیند؛ سپس تک‌تک لکه‌های مستقل سیاه را تشخیص می‌دهد.
شکل ۱. ذهن ابتدا کُل لکه‌های سیاه را با هم و به شکل یک سگ می‌بیند؛ سپس تک‌تک لکه‌های مستقل سیاه را تشخیص می‌دهد.


۲. تجسم

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

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


۳. چند پایایی

مغز ما معمولا اشیای مبهم را در چند حالت مستقل و متفاوت تفسیر می‌کند و در میان این تفسیرهای گوناگون، به دنبال تفسیری می‌گردد که به واقعیت نزدیک‌تر باشد. در این بین، تفسیر ساده‌تر، شانس بیشتری برای غلبه بر تفسیرهای پیچیده‌تر دارد و بنابراین شانس بیشتری برای ادراک شدن می‌یابد (شکل ۳).

شکل ۳. مغز، اشیای مبهم را در چند حالت مستقل و متفاوت تفسیر می‌کند.
شکل ۳. مغز، اشیای مبهم را در چند حالت مستقل و متفاوت تفسیر می‌کند.


۴. تغییر ناپذیری

مغز ما می تواند اشیاء ساده را فارغ از تغییر درزاویه ی دید، تغییر مقیاس، چرخش و جابجایی آنها، همچنان ادراک کند(شکل ۴).

شکل ۴. تغییر در زاویه دید، مقیاس، چرخش و جابجایی اشیاء بر ادراک آنها تاثیر ندارد.
شکل ۴. تغییر در زاویه دید، مقیاس، چرخش و جابجایی اشیاء بر ادراک آنها تاثیر ندارد.


در این بخش، به ذکر اصول دیگری از گشتالت می‌پردازیم که بر طراحی رابط کاربری موثرند:


اصل هم‌جواری: می‌توان از اصل هم‌جواری، برای گروه‌بندی اطلاعات مشابه، دسته‌بندی محتوا و نظم دادن به چیدمان‌ها استفاده کرد. استفاده صحیح از اصل هم‌جواری، تاثیر مثبتی بر ارتباط بصری و تجربه کاربری دارد (شکل ۵).

شکل ۵. اصل هم‌جواری برای گروه‌بندی و نظم
شکل ۵. اصل هم‌جواری برای گروه‌بندی و نظم


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


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

شکل ۶. عناصری که در یک منطقه مشترک قرار می‌گیرند، به‌عنوان یک گروه ادراک می‌شوند.
شکل ۶. عناصری که در یک منطقه مشترک قرار می‌گیرند، به‌عنوان یک گروه ادراک می‌شوند.


اصل تشابه: عناصری که شباهت بصری بیشتری با هم دارند به یکدیگر مربوط‌تر به نظر می‌رسند. تشابه عناصر مختلف با هم، سبب می‌شود که آنها را در یک گروه مشترک در نظر گیریم و عملکرد مشابهی را در ذهن خود به آنها اختصاص دهیم، هرچند که در واقع چنین نباشد (شکل ۷).

شکل ۷. عناصری که شباهت بصری بیشتری دارند، مرتبط‌تر به نظر می‌رسند.
شکل ۷. عناصری که شباهت بصری بیشتری دارند، مرتبط‌تر به نظر می‌رسند.


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


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

تصویر ۸. محصور‌شدگی یعنی گروهی از اجزاء که به‌صورت یک تصویر واحد ادراک می‌شوند.
تصویر ۸. محصور‌شدگی یعنی گروهی از اجزاء که به‌صورت یک تصویر واحد ادراک می‌شوند.


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

شکل ۹. تقارن
شکل ۹. تقارن


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

شکل ۱۰. امتداد
شکل ۱۰. امتداد


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

شکل ۱۱. اصل سرنوشت مشترک، دلالت بر آن دارد که عناصری که در یک جهت حرکت می‌کنند، مرتبط با یکدیگر به‌نظر می‌رسند.
شکل ۱۱. اصل سرنوشت مشترک، دلالت بر آن دارد که عناصری که در یک جهت حرکت می‌کنند، مرتبط با یکدیگر به‌نظر می‌رسند.




گشتالتGestaltدیزاینرابط کاربریui
فوق دکترا طراحی صنعتی ‏www.researchgate.net/profile/Ardeshir-Hakimi
شاید از این پست‌ها خوشتان بیاید