طراحی قالب وردپرس

طراحی رابط کاربری وب

در طراحی رابط کاربری (User Interface) سخن از تصویرها و رنگ‌ها و… است که به طور کلی می‌توان گفت هرآنچه که کاربران در طراحی های رابط کاربری در وب میبیند را شامل می شود.

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

گشتالت چیست؟

«گشتالت» (Gestalt) یکی از اصول مهم در درک بصری انسان است که بسیاری از اصل های طراحی رابط کاربر بر طبق همین اصل گشتالت بنا شده‌است. گشتالت به معنی علم روانشناسی شناخت فرم و شکل است. این نظریه بر این باور است که مغز انسان در درک موضوع‌های پیچیده و سخت که از قسمت ها و اجزای مختلف تشکیل شده باشد، ابتدا آن را به صورت واحد و جمع بندی‌شده درک می‌کند پس درنتیجه اگر جزئیات آن موضوع سخت و پیچیده  اجزای ارتباط منطقی با هم  داشته‌باشند، در اصطلاح گشتالت آن موضوع محکم تر و درک و فهم پیچیدگی‌های آن آسان تر و راحت‌تر خواهد شد.
موارد  پایه نظریه گشتالت:

پیدایش (EMERGENCE)

قبل از این که جزییات دیده شوند کلیات آن دیده می شود.

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

برای مثال به تصویر زیر نگاه کنید:

 

شما در نگاه اول طرح یک سگ را مشاهده می‌کنید. به جای این که چیزهایی مثل پا، سر، دم و اجزای دیگر سگ را ببینید.
حالا از این تئوری چگونه در طراحی سایت خود استفاده کنیم ؟

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

جسمیت دادن (REIFICATION)

ذهن ما قادر به پر کردن فضا های خالی می‌باشد.

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

طراحی رابط کاربری (UI) اثربخش با شناخت روانشناسی بصری

هریک از شکل‌های بالا یک ترفند دیداری می‌باشند. که در واقعیت، تمامی این شکل‌ها گنگ و ناقصی می‌اشند، اما مغز ما قادر است با این شکل‌ها ارتباط برقرار کند. برای مثال در شکل A مغزما به ما می گوید که این ۳ دایره ناقص یک مثلث را شکل می‌دهند. حالا از این تئوری چگونه در طراحی وب خود استفاده کنیم‌؟

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

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

طراحی رابط کاربری (UI) اثربخش با شناخت روانشناسی بصری

چند تفسیری (MULTISTABILITY)

ذهن ما به دنبال جلوگیری از عدم قطعیت است.

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

حال به تصویر زیر نگاه کنید شما چهره یک پیرزن یا چهره یک زن جوان را خواهید دید، اما در لحظه قادر نخواهید بود هر ۲ تصویر ببینید.

طراحی رابط کاربری (UI) اثربخش با شناخت روانشناسی بصری

حالا از این تئوری چگونه در طراحی سایت خود استفاده کنیم؟

شما باید از تفاسیر متعدد دوری کنید! باید طراحتان  چندین بار چک کنید ؛ به طوری که فقط با همان تفسیر و منظوری که می‌خواهید دیده شود.

دیجیتال مارکتینگ

خواندن مطالب زیر را نیز به شما پیشنهاد میکنیم:

پرسش و پاسخ، نظر

سوال یا نظری دارید؟ بنویسید و ارسال کنید.

طراحی شده توسط تیم توسعه و طراحی آرنیکاوب - بروزرسانی در فروردین 1398