معرفي مطالب جالب با لينك منبع

چگونه از قانون فيت در طراحي سايت تان استفاده نماييدآيا مي دانيد كه چرا دكمه ها بايستي با يك اندازه خاصي باشند و لينك هاي مهم بايستي در شروع ليست قرار گيرند؟ و يا چرا بايستي اقلام مشابه را در يك گروه قرار دهيد؟
به عنوان يك طراح، ممكن است تمام اين كارها را بطور شهودي انجام دهيد يا بدليل آنكه به عنوان متداول ترين عمل شناخته شده اند..
اما حقيقت آن است كه آنچه كه ما به عنوان يك عرف در مي شناسيم در واقع ريشه در روانشناسي دارد.

طراحي سايت در مشهد
مايك والاگر، يك كار خارق العاده اي را اوايل سال در 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 مي بايست شامل همه گزينه ها در زير زبانه «بيشتر» در منوي اصلي خود مي بود، خوانندگان را مي توانست خسته كند.

وظيفه طراحان
به عنوان يك طراح، شما حال مي دانيد كه طراحي سايت موثر خيلي بيشتر از اين است كه به سادگي باعث شويم همه چيز خوب به نظر بيايد. شما همچنين بايد كاربران را متقاعد كنيد و بر انتخاب آنها تأثير بگذاريد.
دانستن علت موجود در آن سوي شيوه هاي طراحي مرسوم باعث اتخاذ تصميمات بهتر در طراحي مي شود.
شما مي توانيد با اجراي برخي از اين نظريه هاي روان شناسي شروع كنيد.

چگونه از قانون فيت در طراحي سايت تان استفاده نماييدآيا مي دانيد كه چرا دكمه ها بايستي با يك اندازه خاصي باشند و لينك هاي مهم بايستي در شروع ليست قرار گيرند؟ و يا چرا بايستي اقلام مشابه را در يك گروه قرار دهيد؟
به عنوان يك طراح، ممكن است تمام اين كارها را بطور شهودي انجام دهيد يا بدليل آنكه به عنوان متداول ترين عمل شناخته شده اند..
اما حقيقت آن است كه آنچه كه ما به عنوان يك عرف در مي شناسيم در واقع ريشه در روانشناسي دارد.

طراحي سايت در مشهد
مايك والاگر، يك كار خارق العاده اي را اوايل سال در 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 مي بايست شامل همه گزينه ها در زير زبانه «بيشتر» در منوي اصلي خود مي بود، خوانندگان را مي توانست خسته كند.

وظيفه طراحان
به عنوان يك طراح، شما حال مي دانيد كه طراحي سايت موثر خيلي بيشتر از اين است كه به سادگي باعث شويم همه چيز خوب به نظر بيايد. شما همچنين بايد كاربران را متقاعد كنيد و بر انتخاب آنها تأثير بگذاريد.
دانستن علت موجود در آن سوي شيوه هاي طراحي مرسوم باعث اتخاذ تصميمات بهتر در طراحي مي شود.
شما مي توانيد با اجراي برخي از اين نظريه هاي روان شناسي شروع كنيد.