چگونه از قانون فیت در طراحی سایت تان استفاده نمایید

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

طراحی سایت در مشهد
 با استفاده از قانون Fitt ، CTA های بهتری را ایجاد نمایید.
وقتی بین دو نقطه حرکت می کنید مجبورید که از مسیر با کمترین مقاومت بروید. این پدیده به عنوان "مسیر مورد علاقه " شناخته شده است.
یک مسیر مورد علاقه دارای کوتاه ترین مسیر یا راحت ترین مسیر برای انتقال بین دو نقطه است. اگر که شما یک مسیر کوتاه تری را مشاهده نمودید که از جاده ای جدا شده است آنگاه با یک مسیر مورد علاقه مواجه شده اید. مردم نیز بطور مشابه در وب سایت شما عمل می کنند. به جای دنبال کردن مسیر مکان نما که آن را طراحی نموده اید آنها کوتاه ترین مسیر ممکن را بین موقعیت کنونی موس خود و یک شئ ( همانند CTA ) انتخاب خواهند نمود.
اگر CTA شما بیش از حد کوچک است یا از مکان نمای کاربر خیلی دورتر است کاربر شما ممکن است در مقابل حرکت مکان نما مقاومت نماید و بر روی CTR شما تاثیر بگذارد.
در واقع این قانون فیت است. قانون فیت بیان می کند که زمان لازم برای حرکت سریع به یک هدف ، تابعی از نسبت بین فاصله تا هدف و عرض هدف است.
به عبارت دیگر، هدف بزرگتری که به موقعیت کنونی شما نزدیکتر باشد احتمال بیشتری دارد که توجه ( و کلیلک ) را به خود جلب نماید.
 چگونه از قانون فیت در طراحی سایت تان استفاده نمایید
این حقیقت را در نظر بگیرید که اکثر کاربرانی که به وب سایت شما می ایند معمولا دارای یک موقعیت مکان نمای پیش فرض هستند. اغلب اوقات مکان آن در نزدیکی نوار آدرس جستجوگر است زیرا جایی است که کاربر URL سایت را در آن تایپ می کند.
هر CTA قرار گرفته دور از نوار آدرس ، در طرف مقابل قانون فیت قرار خواهد داشت -  فاصله برای رسیدن به آن، بسیار زیاد است و ایجاد مقاومت می کند.
بنابراین اطمینان حاصل کنید که CTA های خود را در نزدیکی نوار آدرس در بالای قاب قرار داده اید.
CTA درست یا غلط
قانون فیت همچنین بیان می دارد که دکمه های بزرگتر دارای کلیک های بیشتری نیز هستند.
به هر حال در نظر داشته باشید که این رابطه خطی نیست. همانطور که SmashingMagazine بیان می دارد – بیشتر از یک اندازه خاصی دیگر CTA های بزرگ باعث افزایش CTRها نمی شوند.
قانون فیت
بنابراین، CTA های خود را بزرگ نگه دارید، اما نه خیلی بزرگ که هیچ تاثیر معنی داری بر CTR ها نداشته باشند.
برای مثال، در نظر بگیرید که چگونه HubSpot از چندین CTA ("تماس با ما" و "شروع به کار") در بالای فولدر استفاده می کند.
به کاربران برای تصمیم گیری در مورد اکتشاف نماینده کمک کنید
مغز ما تصمیمات بی شماری را در هر روز می گیرد (35000 تصمیم گیری، اگر یک منبع کافی باشد)
از زمانی که برای کار میرویم که چگونه عصرهایمان را صرف کنیم، مغز ما مقدار زیادی انرژی را برای تصمیم گیری اختصاص می دهد.
در واقع، مغز ما اغلب برای مطابقت تقاضا با انرژی در دسترس در تقلا است (روانشناسان آن را "خستگی تصمیم" می نامند).
برای مطابقت با این تقاضای بیش از حد، از اکتشافات (Heuristics) استفاده می کنیم. Heuristics یک واژه گسترده برای مدل های ذهنی است که ما برای تصمیم گیری سریع استفاده می کنیم.
این مدلها از طریق آموزش یا تجربه یادگیری می شوند.
به عنوان مثال، اگر چیزی کمیاب باشد، فرض می کنیم که ارزشمند است، زیرا تجربه ما به ما آموخته است که اشیاء نادر بسیار ارزشمند هستند (این "اکتشافات کمبود" نامیده می شود). یکی از مهمترین اکتشافات برای طراحان، اکتشاف نمایشی هستند.
اکتشافات نمایشی بیان می دارند که ما احتمال چیزی که براساس رویدادهای والد آن است را تعیین می کنیم.
به طور مثال اگر شما فردی را با یک گیتار، کاپشن چرم و موی بلند می بینید تصور خواهید کرد که وی یک نوازنده راک است نه یک اسب سوار؛ تمام رویدادهای والد ( گیتار، ژاکت، موی بلند ) به این احتمال اشاره دارند.
بطور مشابه وقتی که شما یک متن آبی را در صفحه وب می بینید فرض خواهید کرد که یک لینک است.
چرا؟ زیرا سال ها استفاده از اینترنت به شما آموخته است که آبی = لینک.
چگونه می توانید از اکتشافات نمایشی در طراحی های تان استفاده کنید.
اکتشافات نمایشی می توانند کارهای بسیاری را برای ایجاد یک تجربه کاربری بهتر انجام دهند.
با رفتار کردن براساس توقعات کاربرهایتان شروع نمایید. اگر که می خواهید افراد بر روی یک لینک کلیک کنند آن را آبی بسازید نه اینکه خاکستری تیره.
بطور مشابه، کاربران از CTA ها انتظار دارند که روشن و برجسته باشند.
شما همچنین می توانید از اکتشافات نمایشی برای واضح ساختن مطالب استفاده نمایید.
برای مثال اگر که شما یک ردیف دکمه دارید، یک دکمه خاص را پر رنگ تر کنید یا آن را با یک رنگ متفاوتی نشان دهید تا به این ترتیب نظر افراد را بیشتر به آن جلب نمایید. کاربران تصور خواهند کرد که آن دکمه همانند المان های والد خود نیست و بایستی مهم باشد.
در شکل زیر، دکمه آبی توجه ما را به خود جلب می کند زیرا مشابه با المان های والد خود نیست ( دکمه های سبز).
CPA
به عنوان مثال، در صفحه خانگی Buzzfeed، دکمه قرمز "Trending" توجه را جلب می کند، زیرا با عناصر مجاور متفاوت است.
Buzzfeed
    دریافت کلیک بیشتر با اثر موقعیت یابی سریال
افراد به صورت قابل پیش بینی موارد را به یاد می آورند.
اطلاعات ارائه شده در ابتدا (اولویت) و پایان هر نوع فرمت محتوا (پست وبلاگ، infographic یا ویدیو) توجه بیشتری را جلب می کند و در حافظه باقی می ماند..
این اثر موقعیت سریال است.
همانطور که این نمودار از ویکیپدیا نشان می دهد، میزان یادآوری آیتم های موجود در یک لیست، در ابتدا و انتهای لیست بالا هستند.
روانشناسان این امر را به "اثر ابتدایی" و "اثر پایانی" نسبت میدهند.
اثر ابتدایی
شما موارد اول در لیست را یاد می گیرید زیرا مغز شما فرض می کند که آنها داده های اولیه هستند و از این رو مهم تر هستند. به همین ترتیب، آخرین موارد موجود در لیست را یاد می گیرید زیرا آخرین اطلاعات برای ورود به مغز شما است.
نحوه استفاده از 'Positioning Serial' در طراحی
اثر موقعیت دنباله ای دارای کاربردهای بسیاری در نحوه سازماندهی داده ها در سایت تان است.
اگر یک لینک یا هر محتوایی را میخواهید کاربران شما آن را به خاطر بسپارید، سعی کنید آن را در پایان یا آغاز یک لیست قرار دهید.
برای مثال، در فهرست انتقال Smashing Magazine، مهمترین لینک ها - Books and Jobs – به ترتیب در ابتدا و انتهای منو قرار دارند.
مجله Smashing
از آنجا که SmashingMagazine بلیط های زیادی را نمی فروشد و یا محصولات زیادی را نمی فروشد ، پیوندهای «بلیط و فروشگاه» در وسط منو قرار میگیرند.
به طور مشابه، در نظر بگیرید که چگونه آمازون مشخصه های الکسا را ​​در صفحه محصول خود توصیف می کند:
مطالب برجسته آمازون
آمازون بر توانایی الکسا ​​برای a) پخش موسیقی، b) کنترل نور ها، و c) بهبود همه بروز رسانی ها تاکید می کند.
این کار تصادفی نیست. بر اساس WebsiteSetup، اکثر مردم از Alexa برای کنترل موسیقی و چراغ های هوشمند استفاده می کنند - ویژگی هایی که آمازون آن را تاکید می کند.
موارد تاکید شده آمازون
در این نظرسنجی همچنین نتیجه گرفته شد که اکثر مردم از الکسا استفاده می کنند زیرا مدام در حال بهبود است- یکی دیگر از مشخصه هایی که آمازون بر آن تاکید دارد.
شما می توانید از اثر موقعیت دنباله ای برای سازماندهی اطلاعات مهم در سایت خود استفاده کنید. چیزهایی که می خواهید مردم به یاد داشته باشید باید در ابتدا یا انتهای لیست، یک منوی انتقال یا یک صفحه قرار دهید.
    با پیروی از قانون یک سوم سایت خود را دیدنی و جذاب تر کنید
هر زمان که یک عکس می گیرید، یک نقاشی ایجاد می کنید و یا صفحه خود طراحی می کنید، باید به طرح و ساختار آن توجه داشته باشید.
اگر این کار را نتوانستید، باعث ایجاد ریسک ابهام و سردرگمی می شوید.
مرسوم ترین ساختار طراحی به عنوان سیستم شبکه ای شناخته می شود. با این حال، این روش ها خلاقیت را محدود می کنند و اغلب به صفحات بی روح و خشک منجر می شوند – همانطور که همه طراحان می دانند.
در عوض، از اصل شناخته شده به عنوان قانون یک سوم تبعیت کنید.
قانون یک سوم ریشه در نسبت طلایی دارد که به لحاظ تاریخی به زیبایی ارتباط دارد - همانطور که همه طراحان می داند.
در عکاسی، قانون یک سوم باعث می شود تصاویر به نظر پویاتر و از لحاظ بصری جلب کننده هستند.
اساسا، اینروش  شامل تقسیم صفحه شما به سه بخش (هم به صورت عمودی و افقی) است.
محل تقاطع بین تقسیم افقی و عمودی به عنوان منطقه کانونی یا نقطه کانونی شناخته می شود. این جایی است که شما باید عناصر کلیدی را برای ایجاد حداکثر تاثیر بر روی هر طراحی  قرار دهید همانطور که WebsiteSetup نشان می دهد.
نقطه کانونی
نحوه استفاده از 'قانون یک سوم' در طراحی
اول، سعی کنید به صورت سه تایی طراحی کنید.
به عبارت دیگر، اگر شما 12 قطعه شبکه بندی را داشته باشید، آنها را به سه ستون هر کدام با چهار شبکه تقسیم کنید.
همچنین سعی کنید مهمترین عناصر خود را در مناطق مرکزی یا نزدیک به آن حفظ کنید.
برای مثال، از صفحه اصلی Sia دیدن کنید:
قانون یک سوم
توجه کنید که چگونه تصویر و شعار محصول به طور مستقیم در محدوده کانونی قرار دارند.
مثال دیگری از NNGroup وجود دارد:
گروه NN
CTA و متن کلیدی در نزدیکی نقاط کانونی قرار دارند.
به خاطر داشته باشید که موارد را مستقیما در محدوده کانونی به طور مداوم قرار ندهید. انجام این کار یک حس رباتیک به صفحه شما می دهد و منجر به احساس نا آشنایی خواهد شد.
یکپارچه کردن برخی عدم تقارن ها و ایجاد نقص برای جلب توجه و حفظ آن.
 
    اثر گشتالت / روانشناسی گشتالت
ادراکات ما اغلب می تواند ما را فریب دهد.
به عنوان مثال، اگر خودروی مجاور شما به سمت شما حرکت کند، در حالی که بدون حرکت ایستاده اید، مغز شما ممکن است تصور کند شما در حال حرکت هستید.
قوانینی که درک ما را ایجاد می کنند در روانشناسی گشتالت بررسی می شوند.
شما به عنوان یک طراح، احتمالا با روانشناسی گشتالت آشنا هستید، چه بصورت تئوری یا در عمل. بسیاری از یافته های ما از ادراک بدست آمده از آن بدست می آید.
در زیر، من درباره دو قانون که بویژه برای طراحان هستند صحبت کرده ام:
    A. قانون Pragnanz
قانون Pragnanz بیان می کند که وقتی انسان ها گروهی از اشیا را ببینند، ابتدا آنها را به طور کلی و سپس به صورت اشیاء فردی می بینند.
به طور مشابه وقتی بازدیدکنندگان روی صفحه شما قرار می گیرند، آن را به عنوان یک شی بزرگ می بینند.
و اگر این کل به نظر برسد  که خراب باشد، بازدید کنندگان شما مممکن است در انبوه آن غرق شوند و آنجا را ترک کنند، حتی اگر درک عناصر فردی آن آسان باشد.
این قانون یکی از دلایلی است که طراحان فضاهای خالی را در طرح های خود قرار می دهند.
استفاده اپل از فضای خالی یک مدل بسیار خوبی برای دنبال کردن است. هنگامی که شما در صفحه اصلی اپل قرار می گیرید، بلافاصله می توانید دریابید که چگونه هر بخش به یکدیگر متصل شده است.
فضای خالی
    B. قانون شباهت
اصل اساسی دیگر در روانشناسی گشتالت، قانون شباهت است.
این امر بر پایه فرضیه ای است که افراد علاقه دارند که اقلام شبیه به هم را در یم گروه قرار دهند.
فقط در مورد چگونگی سازماندهی یخچال خود فکر کنید. شما احتمالا یک بخش برای میوه ها و سبزیجات دارید، یکی دیگر برای نوشیدنی ها، و دیگری برای چاشنی جات.
همین اصل را در صفحات خود اعمال کنید.
اقلام را که می خواهید به یکدیگر ارتباط نزدیک داشته باشند در یک گروه قرار دهید.
صفحه ثبت نام Zappo را بررسی کنید:
در صفحه PageNotice Zappos Regisation دو فیلد ایمیل بسیار نزدیک به یکدیگر هستند.
آنها با هم گروه بندی شده اند تا جهت گیری فکری کاربر را تقویت کنند و تجربه آنها را بهبود بخشند. به این طریق بلافاصله که به صفحه نگاه کنید در میابید که دو فیلد ایمیل مربوط به یک دسته هستند.
 
    مردم را وادار کنید که بر روی CTA ها با دنبال کردن نگاه خیره تمرکز نمایند.
به نظر می رسد که مغز انسان به دیدن چهره ها در اشیاء بطور روزمره سخت فعالیت می کند
این همه مطلب نیست - ما همچنین سخت تلاش می کنیم تا نگاه چهره ای که به آن نگاه می کنیم را دنبال کنیم. به عنوان یک نظریه، ما این توانایی را به صورت راهی برای ایجاد ارتباطات اجتماعی ایجاد نموده ایم.
این پدیده به عنوان دنبال کردن نگاه خیره و یا توجه مشترک شناخته می شود.
به عنوان مثال، اگر فردی به یک تصویر در سمت چپ خیره شده باشد ، احتمالا ما نیز همان جهت نگاه خواهیم کرد.
دنبال کردن نگاه خیره
نحوه استفاده از " دنبال کردن نگاه خیره" در طراحی سایت
شما می توانید از دنبال کردن نگاه خیره برای جلب توجه به یک منطقه خاصی از صفحه تان استفاده نمایید.
برای مثال، این صفحه ورود را در نظر بگیرید:
دنبال کردن نگاه خیره
از آنجا که چهره غالب در تصویر – چهره زن - به نظر می رسد به سمت راست است، چشم های ما بطور غریزی به همان جهت کشیده می شود.
این امر توجه را به فرم جلب می کند - عنصری که ما می خواهیم کاربران ما بر آن تمرکز کنند.
یکی دیگر از مطالعات ردیابی چشم نشان داد که وقتی صورت در صفحه اول (در این مورد، صورت کودک) به متن خیره می شود، مردم به آن توجه بیشتری می کنند.
دنبال کردن نگاه خیره 2
اگر از هر گونه تصاویری از افراد در طراحی وب سایت خود استفاده می کنید، مطمئن شوید که آنها را به گونه ای هدایت کنید تا توجه بیشتری به CTA های خود داشته باشند. این یک تغییر کوچک است، اما می تواند به پیشرفت های بزرگی در CTR ها منجر شود.
 
    با کاهش گزینه ها ، انتخاب کردن را راحت تر نمایید (قانون هیک)
شما هرگز نمی توانید گزینه های زیادی داشته باشید، درست است؟
اما اگر هدف شما این باشد که کاربران خود را به تصمیم گیری وادار کنید، وجود گزینه های زیاد واقعا می تواند خسته کننده باشد.
این امر به خصوص هنگامی که زمان تصمیم گیری می شود بیشتر آشکار می گردد. هرچه تعداد انتخاب های موجود بیشتر باشد، زمان بیشتری برای تصمیم لازم است.
این امر به عنوان قانون هیک شناخته می شود.
قانون هیک می گوید که تعداد بهینه ای از گزینه ها وجود دارد. فراتر از این گزینه ها، ارائه گزینه های بیشتر باعث خستگی کاربر می شود و موجب می شود که تصمیم گیری ها را به تاخیر بیندازند و یا حتی رها کنند.
 قانون هیکس
این نمونه دیگری از "خستگی تصمیم گیری" است. کاربران شما هر روز صدها تصمیم می گیرند زمانی که شما آنها را مجبور به تصمیم گیری بین 2 روش مختلف پرداخت یا 6 طرح قیمت گذاری مختلف می کنید، در واقع توان تصمیم گیری آنها را کاهش می دهید..
 نحوه استفاده از قانون هیک در طراحی
اگر مجبور بودم قانون هیک را به سه کلمه تقلیل دهم ، این بود: " محدود کردن انتخاب ها ".
در مورد تعداد مواردی که از طریق بازدید در صفحه شما ایجاد می شود فکر کنید.
آیا آنها باید وقت خود را در خواندن صفحه «درباره ما» سرمایه گذاری کنند، ویدیویی را ببینند که محصول شما را توضیح می دهد یا یک پست وبلاگ را بخواند؟
در حالی که آنها فکر می کنند، این امر منجر به عدم اقدام برای هر گونه تصمیم گیری درباره گزینه های در دسترس می شود.
این امر به ویژه در صفحات مهم "پول" مانند صفحه پرداخت شما صادق است. سعی کنید گزینه های اضافی را از این صفحه حذف کنید.
برای مثال، در صفحه پرداخت آمازون تقریبا هر پیوند خروجی حذف شده است، به جز خط مشی های حفظ حریم خصوصی و صفحات ToC.
صفحه پرداخت آمازون
با محدود کردن انتخاب های موجود ، آمازون شما را مجبور به تمرکز بر روی کار در دسترس می کند – پرداخت نهایی.
به همین دلیل است که نباید کاربران خود را مجبور به انجام بیش از یک تصمیم در یک صفحه کنید. صفحه قیمت گذاری شما باید فقط قیمت گذاری داشته باشند. صفحه تماس شما باید فقط فرم تماس داشته باشد و غیره.
به عنوان مثال، اگرچه Buzzfeed روزانه صدها محتوا را تولید می کند، در منوی انتقال، بیشتر گزینه ها در زیر منوی کشویی «بیشتر» پنهان می شوند.
 
اگر Buzzfeed می بایست شامل همه گزینه ها در زیر زبانه «بیشتر» در منوی اصلی خود می بود، خوانندگان را می توانست خسته کند.
 
وظیفه طراحان
به عنوان یک طراح، شما حال می دانید که طراحی سایت موثر خیلی بیشتر از این است که به سادگی باعث شویم همه چیز خوب به نظر بیاید. شما همچنین باید کاربران را متقاعد کنید و بر انتخاب آنها تأثیر بگذارید.
دانستن علت موجود در آن سوی شیوه های طراحی مرسوم باعث اتخاذ تصمیمات بهتر در طراحی می شود.
شما می توانید با اجرای برخی از این نظریه های روان شناسی شروع کنید.