8 اصل تاثیرگذار درباره طراحی سایت که باید بدانید(قسمت اول)
طرح مسئله
طراحی سایت شما بیش از آنچه تصور کنید ، در تبدیل کاربر به مشتری تاثیرگذار است . شما می توانید از تمامی تکنیک ها برای افزایش فاکتور conversion ( درصد کسانی که در سایت به هدف نهایی مانند خرید اقدام می کنند به کل کاربران سایت ) در سایتتان استفاده کنید ، اما در صورت طراحی بد ، چیزی نصیبتان نمی شود .
طراحی فقط کاری که طراحان انجام می دهند نیست . طراحی نوعی بازاریابی است . طراحی در حقیقت محصول شما و کارکرد آن است . من هرچه بیشتر در مورد طراحی سایت بر دانشم اضافه شد ، نتایج بهتری گرفتم .
در اینجا به بحث پیرامون 8 اصل موثر در طراحی سایت که باید بدانید و اجرا کنید می پردازیم .
اصل 1 : سلسله مراتب بصری
پر سر و صدا ترین مشکلات ، بیشترین توجه را جلب می کنند و زیبا ترین طراحی ها، بیشترین علاقه مندی را. سلسله مراتب بصری ، مهمترین اصل در طراحی سایت خوب است . این اصل بر اساس ترتیب درک چشم انسان از آنچه می بیند ، بنا نهاده شده .
تمرین . لطفا دایره ها داخل عکس زیر را بر اساس اهمیت طبقه بندی کنید.
بدون اینکه چیزی در مورد این دایره ها بدانید نیز به راحتی می توانید آنها را رده بندی کنید . به این اصل ، سلسله مراتب بصری می گویند.
قسمت هایی از وب سایتتان از بقیه بخش ها مهم تر هستند ( فرم ها ، دکمه " همین حالا تماس بگیرید " ، بخش "مزیت های ما" و ... ) ، طبیعتا خواسته شما اینست که این بخش ها بیشتر مورد توجه قرار گیرند . اگر بخش منو سایت شما ، 10 آیتم دارد ، آیا اهمیت تمام آنها یکسان است ؟ بیشتر می خواهید کاربر کجا را کلیک کند ؟ لینک های مهم را برجسته تر کنید.
سلسله مراتب فقط به اندازه عنصر مورد نظر مربوط نیست . مثلا Amazon دکمه “add to cart” را با استفاده از رنگ ، برجسته کرده :
از هدف کسب و کارتان آغاز کنید
عناصر موجود در وب سایتتان را بر اساس اهمیتشان در کسب و کارتان ، درجه بندی کنید. اگر هدف مشخصی نداشته باشید ، طبعا نمی توانید اولویت بندی کنید.
در اینجا برایتان مثالی می آورم ، عکس پایین اسکرین شاتی از سایت William Sonoma است ، هدف آنها فروش ابزار پخت و پز مناسب برای خارج از خانه است.
چشمگیرترین عنصر در صفحه ، قطعه بزرگی از گوشت گریل شده است ( ایجاد نیاز ) ، پس از آن عنوان مربوطه ( توضیح در مورد چیستی آن ) و در نهایت دکمه عمل یا action button ( بدست آوردن ) . رده چهارم سلسله مراتب ، پاراگرافی در ذیل عنوان است ، عنصر پنجم بنری با عنوان حمل رایگان و در انتها نیز نویگیشن بالای صفحه است . در این صفحه سلسله مراتب بصری بخوبی انجام شده .
تمرین. وب گردی کنید و با دقت سلسله مراتب بصری در وب سایت ها را بیابید. سپس به سراغ وب سایت خود بروید و ببینید آیا چیزی مهم ( عناصر کلیدی که بینندگان عمدتا بدنبال آنند ) وجود دارد که در بالای سلسله مراتب بصری نباشد ؟ تغییرش دهید.
اصل 2 : نسبت جادویی
" نسبت طلایی " عدد 1.618 ( عدد فی (ϕ)) است که تمامی عناصر بصری که با این تناسب طراحی شوند زیبایی خاصی پیدا می کنند ( یا حداقل اینطور می گویند ! ) .
از سوی دیگر ،" دنباله فیبوناچی " را داریم که که هر عدد در این دنباله بصورت مجموع دو عدد قبلی تعریف می شود : ...0،1،1،2،3،5،8،13،21 . نکته جالب اینجاست که این دو مقوله به ظاهر بی ربط ، عددی یکسان تولید می کند.
تصویر زیر ، تجسم بصری نسبت طلایی را نشان میدهد :
خیلی از هنرمندان و معماران ، پروژه هایشان را بصورت تقریبی بر اساس نسبت طلایی طراحی می کنند.
آیا می توان این نسبت را برای طراحی وب بکار برد ؟ بله ، چرا که نه . بیایید نگاهی به توییتر بیندازیم :
حالا به سراغ کامنتی از مدیر هنری سایت توییتر می رویم :
" برای کسانی که در مورد نسبت های جدید سایت توییتر کنجکاو هستند ، بدانید که این نسبت ها را اتفاقی انتخاب نکرده ایم .
البته این نسبت برای کم عرض ترین حالت UI طراحی شده . اگر پنجره مرورگر شما پهن تر باشد این نسبت از بین می رود . اما با استفاده از پنجره ای با کم ترین عرض می توانید آنچه در فلسفه طراحی ما وجود دارد بخوبی ببینید و آن نسبت طلایی است ."
بنابراین اگر عرض محتوی وب سایت شما 960پیکسل است آن را به 1.618 تقسیم کرده که به عدد 593 پیکسل می رسید . در نتیجه عرض قسمت محتوی شما باید 593 پیکسل و عرض سایدبارتان 367 پیکسل باشد . اگر ارتفاع صفحه 760 پیکسل است ، می توانید برای زیبایی بیشتر آن را به دو زیرمجموعه 470 پیکسلی و 290 پیکسلی تقسیم کنید ( 760 تقسیم بر 1.618 برابر است با 470 ) .
اصل 3 : قانون هیک
اصل هیک می گوید که با اضافه کردن هر انتخاب جدید ، زمان برای اخذ تصمیم افزایش می یابد.
این موضوع را بارها و بارها در رستوران ها تجربه کرده اید . برای انتخب غذا از منو های پرو پیمان ، کار سختی پیش رو دارید .اما اگر بعنوان غذای اصلی فقط دو انتخاب پیش رو داشته باشید کارتان بسیار ساده تر می شود. این موضوع دقیقا مطابق با اصل " پارادوکس انتخاب " است ، هرچه انتخاب بیشتری به افراد بدهید ، راه را برای انتخاب " هیچکدام " بازتر می کنید .
( **** به شدت به همه دوستان توصیه می کنم به سراغ کتاب The paradox of choice از دکتر Barry Schwartz مراجعه کنید . هم برای توضیح این اصل و هم برای بهداشت روانی در این عصر **** )
هرچقدر کاربران هنگام استفاده از وب سایتتان ، انتخاب های بیشتری داشته باشند ، انتخاب برایشان سخت تر می شود ( البته اگر کلا بی خیال انتخاب نشوند ) . پس برای خلق یک تجربه دوست داشتنی برای کاربرانتان ، گزینه های غیر ضرور را حذف کنید . برای یک طراحی حرفه ای ، پروسه حذف گزینه های زائد باید در تمام طول طراحی وجود داشته باشد .
در زمانه ای با انتخاب های نامحدود ، افراد نیاز به فیلترهای بهتری دارند ! اگر سبد کالاهایی که عرضه می کنید خیلی پر و پیمان است ، برای راحتی کاربران در انتخاب از فیلترهای بهتر استفاده کنید.
Wine Library وب سایتی است که تعداد زیادی انواع نوشیدنی می فروشد. آنها در استفاده از فیلتر ها بسیار خوب عمل می کنند ( در قسمت چپ ) :
اصل 4 : قانون فیت
قانون فیت تصریح می کند که زمان لازم برای حرکت به سوی یک منطقه هدف ( مانند کلیک بر روی یک کمه ) تابعی است از فاصله و اندازه آن هدف . به بیان دیگر ، هرچه شیء بزرگتر و نزدیکتر باشد ، استفاده از آن آسانتر است .
Spotify دکمه play را بصورتی طراحی کرده که استفاده از آن برای کاربران از دیگر دکمه ها آسانتر است :
طراحان این سایت ( در برنامه نسخه دسکتاپ ) این دکمه را در گوشه چپ پایین صفحه قرار دادند که بعنوان در دسترس ترین ناحیه در یک صفحه شناخته میشود زیرا اصولا گوشه ها در طراحی برنامه های دسکتاپ بهترین نقاط برای دسترسی شناخته می شوند . البته این اصل بدلیل اسکرولینگ در مورد طراحی وب صادق نیست .
البته این اصل بدان معنی نیست که بزرگتر همیشه بهتر است . طراحی دکمه ای که نصف صفحه را اشغال می کند ، ایده خوبی نیست ، و البته اثبات این موضوع نیاز به تحقیقات علمی ندارد . دقت کنید که اصل فیت بصورت لگاریتمی عمل می کند و این بدان معناست که نتایج به نسبت فاکتور های اندازه و فاصله بر روی یک منحنی است نه روی یک خط صاف ( نسبت نتیجه به عوامل خطی نیست ) .
یک دکمه کوچک با افزایش اندازه ای 20 درصدی ، افزایش محسوسی در قابلیت استفاده تجربه می کند در صورتی که یک شیء خیلی بزرگ با همان درصد افزایش سایز ، به چنین نتیجه ای دست پیدا نمی کند .
این موضوع شبیه به قانون اندازه هدف است .
اندازه یک دکمه باید متناسب با پیش بینی ما از تناوب استفاده از آن طراحی شود . هنگام طراحی بر اساس تحلیل هایتان ، دکمه های پر کاربرد را بزرگتر طراحی کنید تا استفاده از آن ها راحت تر باشد.
تصور کنید که یک فرم طراحی کرده اید که کاربر باید آن را پر کند ، در پایان فرم دو دکمه “submit “ و “reset” تعبیه کرده اید
99.99999% از کاربران دکمه submit را می زنند . بنابراین باید آن را بزرگتر طراحی کنید.
اصل 5 : قانون سومی ها
استفاده از تصاویر در طراحی ایده خوبیست . تصاویر ، ایده هایتان را سریعتر از هر متنی منتقل می کند .
بهترین تصاویر از قانون سومی ها تبعیت می کنند : یک تصویر را با دو خط عمودی و دو خط افقی با فواصل یکسان به 9 قسمت مساوی تقسیم کنید ، عناصر مهم ترکیبی عکس باید در امتداد این خط ها و یا در تقاطع آنها قرار داشته باشد .
استفاده از تصاویر بزرگ و زیبا به طراحی صفحات کمک شایانی می کند ، اجرا این اصل باعث زیباتر شدن تصاویر و در نتیجه جذاب تر شدن صفحاتتان می گردد .
ادامه در قسمت دوم
