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

به طور کلی با توجه به عملکرد رفتاری و روانشناختی افراد نظریات و قواعدی نیز وجود دارد که کمک به فهم حالات فرد میکند. معمولا اشخاص از الگو های رفتاری مشابهی پیروی می کنند برای مثال اگر حادثه ی ناگواری برایشان اتفاق بیفتد ناراحت شده و گریه میکنند, اگر موفقیتی کسب کنند خوشحال میشوند و ...در طراحی رابط کاربری یکی از مهم ترین اصولی که یک طراح رابط کاربری باید بداند این است که چه کسانی و به چه منظور از محصول مورد نظر استفاده میکنند و همیشه در تلاش باشد تا تجربه ی بهتری در استفاده از محصول را برای کاربر خلق کند .اصولا کاربر هسته ی مرکزی است که محصولات برای خلق تجربه ی بهتر برای او طراحی و باز طراحی می شوند.انسان ها با توجه به ساختار ذهنی مشابه معمولا رفتار های مشابهی نیز در مواجهه با برخی مسائل از خود نشان میدهند. یکی از نظریه هایی که به این موضوع میپردازد نظریه گشتالت است . طبق این نظریه کلِ هر چیزی، فراتر از مجموع اجزای آن است. برای مثال ما با گوش فرادادن به نت‌های مجزای یک ارکستر سمفونی، قادر به درک تجربه گوش دادن به خود آن نیستیم.گشتالت دارای هفت اصل است که در این نوشته برآنیم تا با مرور این اصول و کاربرد آن در طراحی رابط کاربری, تجربه ی بهتری را برای کاربر در استفاده از محصولاتمان رقم بزنیم.اصل اول:قانون مجاورت - The law of proximityدر این اصل زمانی که کاربر دسته ای از اشکال, نوشته ها و اجزای موجود در صفحه را می بیند. آن دسته از اجزا که فاصله ی کمتری از هم داشته و به هم نزدیکترند را در یک گروه قرار می دهد.کاربرد قانون مجاورت در UXبه مثال های زیر دقت کنید : لیبل همیشه نزدیک به کادر متن قرار میگیرد و کاربر این دو را در یک گروه در نظر گرفته و با توجه به متن لیبل کادر را پر میکند.اصل دوم:قانون شباهت - The law of similarityدر این قانون زمانی که عناصری شبیه هم وجود داشته باشند فرد آنها را در یک دسته قرار میدهد و معمولا هم انتظار رفتار یا کاربرد یکسانی از آنها دارد.در مثال زیر با اینکه همه دایره ها یک اندازه و یک شکل هستند به علت وجود سه رنگ متفاوت کاربر آن دسته از دایره هایی ک دارای رنگ یکسانی هستند را در یک گروه دسته بندی میکند.کاربرد قانون شباهت در UXدر مثال زیر همانطور که مشاهده میکنید در کادرهایی که با رنگ سبز مشخص شده اند چون شبیه به هم هستند کاربر هردو را در یک گروه در نظر گرفته و در نظر دارد آن ها را پر کند, حال آنکه دو عنصری که پایین با رنگ قرمز مشخص شده را به خاطر شکل ظاهریشان دکمه شناسایی میکند و میداند که میتواند آن ها را بفشارد. اصل سوم:قانون تداوم - The law of continuityدر قانون تداوم, انسان معمولا عناصری که در یک خط صاف و یا منحنی به دنبال هم ردیف شده اند را بیشتر مرتبط در نظر میگیرد. در مثال زیر هم شاهد دو گروه هستیم که ذهن, عناصری که به دنبال هم روی یک خط هستند را مرتبط تر در نظر دارد مثلا ارتباط بیشتری بین عناصر درون هر کادر قرمز وجود دارد.کاربرد قانون تداوم در UXدر مثال زیر دسته بندی های املاک, وسایل نقلیه, لوازم الکترونیکی, مربوط به خانه و ... چون در یک راستا قرار دارند ارتباط بیشتری دارند تا دسته بندی املاک و خدمات با زیر دسته بندی لوازم الکترونیکی که شامل موبایل و رایانه و ... میشوند.اصل چهارم:قانون تکمیل - The law of closureذهن ما به دنبال یک الگوی واحد و قابل تشخیص عناصر بصری پیچیده را ساده سازی کرده و به طور ناخوداگاه اشیا ناقص را کامل میکند و چیزی منسجم را از قسمتهایی ایجاد می کند که به طور عینی ناسازگار هستند.چیزی که در پایین به شکل سگ میبینیم در واقع مجموعه از نقاط می باشد که ذهن با توجه به مواردی که در حافظه ذخیره کرده آن را ساده سازی کرده و به شکل سگ مشاهده می شود.کاربرد قانون تکمیل در Graphic Designاین قانون در طراحی لوگو با کمک گرفتن از فضای منفی صفحه کاربرد دارد به طوری که طراح, لوگویی را طراحی میکند که ذهن کاربر آن را در فضای صفحه تکمیل میکند.اصل پنجم:قانون شکل و زمینه - The law of figure-groundانسان به طور غریزی اشیا را یا در پیش زمینه (foreground) و یا در پس زمینه (background) درک می کند و به عنوان یک انسان در لحظه می تواند روی یکی از آن ها تمرکز کند.در تصویر زیر در پس زمینه یک هلال میبینیم و در پیش زمینه یک دایره :کاربرد قانون شکل و زمینه در UXبا در نظر داشتن این قانون برای ایجاد navigation panel, modals و dialogs در طراحی صفحات وب و موبایل اپلیکیشن ها استفاده میکنیم.اصل ششم:قانون منطقه مشترک - The law of common-regionاین اصل ارتباط نزدیکی با اصل مجاورت دارد.در این اصل بیان می کنیم زمانی که اشیا در منطقه ی بسته ای در کنار هم قرار میگیرند, ذهن آن ها را یک گروه تشخیص می دهد و عناصری خواهیم داشت که عضو یک گروه هستند حال اگر ناحیه ای دور تا دور تعدادی از این المان ها ایجاد کنیم, آن ها به عنوان یک گروه جداگانه رفتار می کنند.کاربرد قانون منطقه مشترک در UXدر UX این قانون در استفاده از cards دیده می شود. در مشاهده ی card اطلاعات روی آن در یک گروه دسته بندی می شود حتی اگر در نزدیکی المان و اطلاعات موجود در جاهای دیگر صفحه باشد.اصل هفتم:قانون نقطه کانونی - The law of focal pointاین اصل بیان می کند عنصری که از نظر ظاهری با بقیه عناصر متفاوت باشد, زودتر نظر بیننده را به خود جلب می کند.مواردی مانند فونت, رنگ, اندازه و شکل عناصری که می توانند ایجاد شباهت کنند اگر روی یک عنصر خاص اعمال شوند می توانند ایجاد تمایز نیز کنند.در مثال زیر چشم مخاطب اول به دایره کوچک جلب می شود چون از لحاظ ظاهری اندازه ای متفاوت با بقیه دایره ها دارد.کاربرد قانون نقطه ی کانونی در UXمثال بسیار بارز این قانون در کاربری و جای گزاری دکمه ها در طراحی می باشد به همین خاطر برای تشخیص سریع دکمه ها از بقیه عناصر توسط کاربر از رنگ های جلب توجه کننده, شکل متفاوت استفاده می شود تا کاربر به راحتی و سرعت عمل بالا دکمه را در صفحه تشخیص داده و از آن در صورت لزوم استفاده کند.هفت اصل بالا به طراح تجربه ی کاربری کمک می کند تا در مرحله ی wireframing با دقت و دانش بیشتری از عملکرد و نحوه ی تعامل کاربر با محصول از المان ها استفاده کند به طوری که در محصول نهایی, نرخ تعامل کاربر با محصول مورد نظر بیشتر شود.