خانه خلاقیت مانایید
خانه خلاقیت مانایید
خواندن ۸ دقیقه·۱ ماه پیش

طراحی وب سایت به کمک اصول و قواعد UX – بخش دوم: قوانین گشتالت

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

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

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

قوانین گشتالت چیست؟

چرا بعضی از طرح ها جذاب‌ترند؟ چرا کار کردن با برخی رابط ها کاربری راحت تر و یادگیر کار با آن ساده تر است؟ پاسخ ،اصول و قوانین کلی UX .  اصول گشتالت به عنوان بخشی از این اصول کلی کمک می‌کند تا طرح هایی ارایه کنیم که برای کاربر جذابتر و به اصطلاح کاربر پسند تر باشد. روانشناسی گشتالت توسط گروهی از روانشناسان آلمانی در سال ۱۹۲۰ به جهت شناخت و توصیف چگونگی درک اطلاعات بصری توسط انسان ها و فرآیند های مربوط به آن ایجاد گردیده است.

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

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

کاربرد قوانین گشتالت در طراحی سایت

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

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

اهمیت کاربرد قوانین گشتالت در طراحی سایت

چرا به عنوان طراح سایت باید درباره ی این نظریه و قوانینش بدانیم؟ اگر در مورد کارکرد مغز اطلاع داشته باشیم و بدانیم که مغز چگونه اطلاعات را بررسی و تفسیر می‌کند و چگونه این تفاسیر منجر به تصمیم گیری می‌شود، می‌توانیم؛

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


اصل مجاورت (Proximity)

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

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



اصل مشابهت(Similarity)

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

مثال عملی: در یک فروشگاه آنلاین پوشاک که کار کردیم، تمام دکمه‌های “افزودن به سبد خرید” موجود در سایت رو به رنگ سبز و با فونت بولد طراحی کردیم. این شباهت باعث شد که کاربران خیلی سریع بفهمن کجا باید کلیک کنن. این نوع استفاده از شباهت، در نهایت باعث افزایش سرعت خرید و کاهش نرخ ترک سایت شد. در مثال زیر  سایت دراپ باکس (Dropbox) نیز دقیقا از همین تکنیک برای طراخی دگمه های فراخوان (CTA) استفاده کرده است.



اصل بستار (Closure)

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

شاید بتوان گفت که این اصل از قوانین گشتالت از کمال‎گرایی انسان سرچشمه می‎گیره. این اصل رابطه نزدیکی باقانون پراگنانس  (pragnanz) داره. پراگنانس را می‌‎توان این‎طور توضیح داد که، ‎‏مغز انسان ذاتا در صدد کامل کردن تجربه‌‎های ناقص و تکته تکه از محیط پیرامون خود است. بنابراین هنگامی که تصویری را به صورت چند پاره میبینیم مغز ما اون رو به صورت کامل درک ‎می‌کنه.

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



قانون تداوم (Continuity)

چشم انسان تمایل داره که مسیر خطوط و اشکال رو دنبال کنه. این قانون به طراحی کمک می‌کنه تا کاربر به طور طبیعی از یک بخش به بخش دیگر هدایت بشه. و یا ارتباط بین دو بخش رو به کمک خصوط بین آنها درک کنه. این اصل ارتباط نزدیکی با قانون اتصال یکنواخت (Law of Uniform Connectedness) دارد.

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



اصل تقارن  (Symmetry)

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

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



قانون شکل و زمینه (Figure and Ground)

آخرین اصل از قوانین گشتالت  که بررسی میکنیم، قانون شکل زمینه است. این قانون بیان می‌کنه که مغز تمایل داره بخش‌های مهم یک تصویر رو به عنوان “شکل” و بقیه رو به عنوان “زمینه” تشخیص بده. این قانون به طراحان کمک می‌کنه تا تمرکز کاربر رو به سمت بخش‌های مهم هدایت کنند.

مثال عملی: در طراحی وب‌سایت برای یک رستوران، ما تصاویری با کیفیت و بزرگ از طرف ها غذا در پس زمینه سفید قرار دادیم تصاویر این بشقاب های غذا به عنوان “شکل” و فضای سفید پشت اون‌ها به عنوان “زمینه” بود.  این کار تمرکز کاربر را به سمت غذاها هدایت می‌کرد و باعث میشد تشویق بشه که بقیه غذاهای موجود در منو رو هم بررسی کنه.



سخن آخر


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

❤️خوشحال میشم اگر نظرت رو در مورد این مقاله با من به اشتراک بذاری و اگر واست مفید بود به دگران معرفیش کنی یا لایکش کنی.

طراحی سایترابط کاربریطراحی uxآموزش طراحی ux
به رسم خلقت از خلاقیت میگوییم ...
شاید از این پست‌ها خوشتان بیاید