8 اصل تاثیرگذار درباره طراحی سایت که باید بدانید(قسمت دوم)
قسمت اول
اصل 6 : قوانین طراحی گشتالت
گشتالت ، تئوری ذهن و فکر است و بر این اساس است که چشم انسان قبل از دیدن جزییات به نمای کلی توجه می کند. منظور من شکل زیر است :
توجه کنید که در نگاه اول یک سگ را دیدید بدون اینکه بر روی نواحی سیاه رنگی که سگ از آنان تشکیل شده تمرکز کنید.
نکته کلیدی این نظریه اینست که افراد ، کلیت آبجکت را قبل از اجزاء می بینند . کاربران ابتدا نمای کلی وب سایت شما را می بینند قبل از اینکه هدر ، منو ، فوتر و چیزهای دیگر را تمایز دهند . Kurt Koffka یکی از بزرگان و پایه گذاران گشتالیسم می گوید : " کلیت آبجکت مستقل از اجزائش ، وجود دارد " .
تئوری گشتالت با 8 قانون ، چگونگی درک افراد از چیزی که می بینند را توضیح می دهد . این قوانین عبارتند از :
1.قانون مجاورت
افراد ، آبجکت ها را بر اساس نزدیکیشان در فضا ، با هم گروه بندی می کنند سپس این گروه ها را به عنوان آبجکتی واحد در نظر می گیرند.
برای یک طراحی وب سایت موثر ، باید بدانید ، چیزهایی که با هم نباشند به عنوان شیئی واحد در نظر گرفته نخواهند شد . بر همین اساس برای اینکه کاربر یک سری المنت ها را بصورت واحد در نظر بگیرد ( نویگیشن منو ، فوتر و ... ) باید آنها را در گروههای نزدیک به هم قرار دهید.
سایت Craiglist از این قانون برای برای راحت کردن کاربینندگان در تشخیص ساب منو های مربوط به منو For sale استفاده کرده.
2. قانون شباهت
افراد آبجکت های شبیه به هم را در یک گروه قرار می دهند . این شباهت می تواند در زمینه شکل ، رنگ ، سایه و چیزهای دیگر باشد .
در شکل زیر ، ذهن بیننده نقاط سفید را در یک گروه و سیاه ها را نیز بدلیل شباهت ظاهری در گروهی دیگر قرار می دهد :
سایت Codeschool تمامی متن های گواهی (testimonial box) را شبیه به هم ساخته ، تا بتوان آنها را یک گروه دانست :
3.قانون بسته شدن
افراد به دنبال اشکال کامل هستند .در شکل هایی که کامل نیستند و یا اشکالی که یکی از اجزایشان مفقود شده ، ضمیر ما بصورت خودکار ، قسمت گم شده را جایگزین می کند . بدون قانون بسته شدن ، در شکل پایین ما باید یک سری خط با طولهای متفاوت ببینیم ، اما به استناد این قانون ، ما این خطها را به صورت اشکال کامل می بینیم :
استفاده از قانون بسته شدن باعث می شود لوگو ها یا عناصر طراحی خیلی جذاب شوند . مثالی جالب در این رابطه توسط Sir Peter Scott برای صندوق جهانی طبیعت در سال 1961 طراحی شده :
4. قانون تقارن
مغز ، تمایل دارد اجسام را بصورت متقارن حول یک نقطه تصور کند . برای ایجاد تصاویر دلپذیر ، یکی از تکنیک ها ایجاد آن با استفاده از اجزاء زوج ( 2 ، 4 ، 6 ...) است .
مغز وقتی دو آبجکت متقارن را که به هم متصل نیستند می بیند ، به صورت طبیعی متمایل است که آن را بصورت یک شکل منسجم و متصل تصور کند .
هنگامی که به شکل بالا نگاه می کنیم ، مغز تمایل دارد ، 3 جفت براکت متقارن ببیند به جای اینکه این شکل را بصورت 6 براکت جدا از هم تصور کند .
ذهن افراد اشکال متقارن را به غیرمتقارن ترجیح می دهد . در شکل زیر ، 3 ستون متوازن و یک منحنی ، به زیبایی طراحی سایت BootB افزوده :
5. قانون سرنوشت مشترک
مغز ما تمایل دارد که آبجکت ها را بصورت خط هایی که در یک مسیر در حال حرکتند تصور کند .ما تمایل داریم که اشیاء را بر اساس حرکت تخیلی آنها بر روی مسیرهایشان گروه بندی کنیم.
برای مثال اگر یک سری نقطه داشته باشیم که نیمی از آنان به سمت بالا و نیم دیگر به سمت پایین حرکت کنند ، این نقاط را می توان بصورت دو دسته نقطه مجزا تصور کرد.
افراد بصورت ذاتی تمایل دارند دست ها و یا میله هایی که به سمت خاصی متمایل شده اند را در یک گروه قرار دهند ، چون آنها به یک جهت اشاره دارند . شما می توانید از این اصل برای هدایت کاربران به هدفتان ( مانند فرم ثبت نام ، دکمه خاصی و ... ) استفاده کنید .
6. قانون تداوم
افراد تمایل دارند که یک خط را بعنوان آبجکتی که جهتش را ادامه می دهد تصور کنند . در حالتی که تقاطعی میان آبجکت ها ( مانند چند خط ) بوجود بیاید ، مغز تمایل دارد که دو خط مربوطه را به عنوان دو شکل بی وقفه در نظر بگیرد . آبجکت ها حتی با قطع شدن ، پیوسته در نظر گرفته می شوند .
وب سایت Fixel این قانون را در متصل کردن شکل افراد به توضیحاتشان بکار برده :
چندین قانون دیگر گشتالت نیز وجود دارد از جمله "شکل و زمینه" یا "قانون گشتالت خوب" ( مغز تمایل دارد که آبجکت ها را در صورتی که الگویی معمول ، ساده ومنظم را تشکیل دهند در یک گروه قرار دهد – مانند حلقه های المپیک ) ، اما بنظر میرسد قوانین گفته شده ، برای کار ما کافی است .
اصل 7 : فضای سفید و طراحی پاکیزه
فضای سفید ( که فضای منفی نیز گفته می شود ) جزیی از قسمت خالی صفحه است . این قسمت فضای میان گرافیک ها ، مارجین ها ، فضاهای میان ستون ها ، فضاهای میان خط ها و دیگر عناصر بصری می باشد .
این عنصر ، صرفا نباید به عنوان فضای " خالی " در نظر گرفته شود ، بلکه آن عنصری مهم در طراحی است که می تواند باعث شود آبجکت های درونشان بخوبی مشخص باشند . فضای سفید ، یکی از اجزاء سلسله مراتب در وب سایت است .
یک صفحه بدون فضای سفید ، بسیار شلوغ و درهم ریخته و پر از متن و شکل اعصاب خرد کن است که خواندن آن زجرآور است که کاربران حتی زحمت خواندن آن را نیز به خود نمی دهند . به همین دلیل است که از لحاظ روان شناسی وب سایت های ساده تر ، تاثیرگزار تر هستند .
فضای سفید کافی وب سایت به کاربر حس تمیزی را القاء می کند. طراحی پاکیزه سفید برای انتقال یک پیام روشن ضروریست ، فضای سفید به معنای محتویات کمتر نیست بلکه به معنی استفاده صحیح و بهینه از فضای صفحه است . برای اجراء یک طراحی پاکیزه ، باید در استفاده درست از فضای سفید برای انتقال صحیح پیام خبره شوید .
Made.com بخوبی این کار را انجام داده :
استفاده درست از فضای سفید تمرکز کاربر بر روی پیام اصلی و عناصر بصری هدف را آسانتر می کند و خواندن متن اصلی را راحت تر می کند .
فضای سفید ظرافت و پیچیدگی را ارتقاء داده و خوانایی و تمرکز بر روی صفحه را آسانتر می کند.
اصل 8 : تیغ اُکام
اصل تیغ اکام بیان می دارد که در انتخاب میان فرضیه ها ، آن که کمترین پیش فرض و درنتیجه ساده ترین توضیح را ارائه می دهد برنده است . این اصل در طراحی این گونه بیان می شود که معمولا بهترین راه حل ساده ترین راه حل است .
تیم Pipedrive در پستی در باره تجربه شان در مورد Anglepad می گویند :
" افراد تیم انجل پد و مدیرانشان در چند زمینه ما را حیرت زده کردند . آنها گفتند ‘ کلی آیتم در هوم پیج تان وجود دارد ‘ که در ابتدا با این نصیحت موافق نبودیم ، اما پس از تجربه اش کلی تعجب کردیم ، بر اساس حرف آنها 80% آیتم ها را حذف کردیم و فقط یک دکمه ثبت نام و یک لینک بیشتر بدانیم را به جا گذاشتیم . نتایج حیرت انگیز بود ، ثبت نام کنندگان 3 برابر شدند."
این تئوری فقط در مورد نتایج بصری نیست بلکه در مورد عملکرد هم صادق است . بعضی بنگاهها – مانند 37Signals – سادگی را به یک مدل کسب و کار تبدیل کرده اند. در این پاراگراف از کتاب Rework که نویسنده اش یکی از موسسان این کمپانی است آمده :
" خیلی از افراد از اینکه محصولاتمان از رقباء کارایی کمتری دارند از ما متنفرند . آنها ، بابت اینکه محصولاتمان شامل حال آنها نمی شود ، ما را محکوم می کنند .اما ما بابت قابلیت هایی که محصولاتمان ندارند به اندازه قابلیت هایی که دارند افتخار می کنیم . ما محصولاتمان را ساده طراحی می کنیم زیرا اعتقاد داریم نرم افزارها خیلی پیچیده طراحی می شوند : ویژگی های فراوان ، دکمه های زیاد و درنتیجه گیج شدن های پی در پی ."
طراحی مختصر و ساده همیشه به معنای طراحی کاربردی و موثر نیست . اما بر اساس تجربیات من ، سادگی همیشه از پیچیدگی موثر تر است و به همین دلیل است که همیشه در تلاش برای ساده تر کردن طراحی هستم.
خلاصه
طراحی وب موثر و طراحی هنری یکی نیست .
شما در طراحی سایت باید اهداف تجاریتان را در نظر گرفته و برای کاربران طراحی کنید . اصول گفته شده ، به شما در طراحی زیبا که اهداف مالیتان را نیز براورده کند کمک شایانی می کند.
