طراحی اسکلت صفحه: قوانین گشتالت

قوانین گشتالت

(زمان مورد نیاز برای مطالعه: ۷ دقیقه)

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

 

قوانین گشتالت

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

قوانین گشتالت

 

قانون همسایگی

بر اساس قانون همسایگی، فاصله المان‌ها از هم باعث جهت‌دهی به ذهن ما در گروه‌بندی اون‌ها میشه. یک المان به همراه همسایه‌هاش در یک گروه قرار می‌گیره. از این گروه انتظار میره که رفتاری مشابه و یا در یک راستا و هدف داشته باشند. در مثال زیر، یک Text Field رو می‌بینیم که بخش‌هایی مثل عنوان، پیام کمکی و تعداد کاراکتر‌های مجاز رو داره. چون همه این‌ها کنار هم هستند، کاربر همگی رو یک‌دست و در یک گروه می‌بینه. حالا اگه پیام کمکی، فاصله بیشتری از Text Field نسبت به باقی بخش‌ها داشت، دیگه بخشی از Textfield در نظر گرفته نمیشد.

قانون همسایگی گشتالت

 

قانون شباهت

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

قانون شباهت

 

قانون ادامه داشتن

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

قانون ادامه داشتن

قانون بسته بودن

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

قانون بسته بودن گشتالت

 

قانون تقارن

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

قانون تقارن گشتالت

 

قانون زمینه/پس‌زمینه

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

قانون زمینه/پس‌زمینه گشتالت

 

قانون سرنوشت مشترک

۶ قانون قبلی گشتالت، مربوط به المان‌ها و اشیاء ثابت هستند. آخرین قانون گشتالت، یعنی سرنوشت مشترک، مربوط به اشیاء متحرک هست. قانون سرنوشت مشترک می‌گه که المان‌هایی که با هم حرکت می‌کنند، در ذهن انسان‌ها در یک گروه قرار می‌گیرند. مثالی که خیلیامون انجامش دادیم، Drag & Drop کردن چند آیتم در ویندوز و به‌صورت کلی، سیستم‌ عامل‌ها هست. چیزی که قانون سرنوشت مشترک رو جذاب می‌کنه اینه که بر خلاف قانون همسایگی، حتی اگه المان‌ها از هم فاصله داشته باشند، اما با هم حرکت کنند، باز هم داخل یک گروه قرار می‌گیرند. در شکل زیر، قانون سرنوشت مشترک برای کنترل صدا به‌خوبی نشون داده شده. اینجا اگه صدا هم داشته باشیم، اون هم جزء یکی از المان‌های با سرنوشت مشترک حساب میشه.

قانون سرنوشت مشترک گشتالت

 

جمع‌بندی

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

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

دیدگاه‌ها

  • آتنا

    ۱۳۹۸-۰۲-۰۵

    مقاله مفیدی بود مثال هاش بیشتر برام جالب بود ممنون

    پاسخ

ارسال نظر