توهم تمامیت چیست و چطور میشه ازش جلوگیری کرد؟

توهم تمامیت چیست و چطور میشه ازش جلوگیری کرد؟, پیشرو وب, طراحی سایت در کرج, طراحی وب سایت در کرج, طراحی سایت

کاربران وقتی به یک صفحه وب نگاه میکنن ممکنه فکر کنن که کل صفحه رو دارن میبینن فارغ از اینکه اطلاعات بیشتری در پائین تر از اونچه میبینن وجود داره.
 
نگاه کردن به یک صفحه وب مثل نگاه کردن به یک منظره از یک دوربین دوچشمیه. شما از دوربین تنها یک بخش کوچکی از منظره رو میبینین و برای دیدن کل منظره باید دوربین رو بالا پائین و یا چپ و راست ببرین. مثل یک صفحه وب که برای دیدن تمام محتوای موجود کاربران ممکنه نیاز باشه که اسکرول کنن.
 
وقتی به منظره از دوربین دوچشمی نگاه میکنیم، میدونیم که در هر جهتی منظره وسیعی وجود داره و ما باید دوربین رو برای کشف تمامی اونها حرکت بدیم. ولی در وب، کاربران برای فهمیدن اینکه چیزی برای کشف کردن وجود داره به طراحی اون صفحه بسنده میکنن. ممکنه بخش مهمی از محتوا پائینتر از دید اولیه کاربر باشه و کاربران تا زمانی که ندونن چیزی اونجا وجود داره و یا تشویق به اسکرول کردن نشن، اون رو نمیبینن.
 
پس یکی از وظایف طراحان اینه که طوری صفحه رو طراحی کنن که کاربران رو به سمت محتوای باارزش و مهم راهنمایی کنه و خیلی واضح کاربران متوجه بشن که محتوای صفحه ادامه داره.
 
تعریف توهم تمامیت
توهم تمامیت موقعی اتفاق میوفته که محتوای قابل رویت در نمایشگر به نظر کامل میرسه، در حالیکه اطلاعات بیشتری خارج از محدوده قابل رویت وجود داره. این اصطلاح توسط Bruce Tognazzini در سال ۱۹۹۸ مطرح شد. توهم موقعی رخ میده که طراحی بصری در هدایت کاربران به محتوای بیشتر که خارج از نمایشگر وجود داره، ناکارا باشه. تصور اینکه یک صفحه کامله در حالیکه نیست، یک شکست کاربردپذیری جدیه که باعث میشه کاربران اطلاعات باارزشی رو از دست بدن و اونها رو از رسیدن به اهدافشون بازمیداره.
 
۱۸ ساله که ما به طراحان بابت این مسئله کاربردپذیری هشدار دادیم اما چرا دوباره اون رو مطرح میکنیم؟ چونکه سایتها همچنان این اشتباه رو مرتکب میشن و چونکه ما همچنان در تحقیقات در حال انجام کاربرانی رو میبینیم که در دام توهم تمامیت میوفتن. بیاید آخرین میخ این تابوت رو بکوبیم و بالاخره توهم تمامیت رو در وب ریشه کن کنیم و دیگه مجبور نباشیم این بحث رو در سال ۲۰۳۴ با شما مطرح کنیم.
 
توهم تمامیت در ابعاد عمودی
در روزهای اولیه وب، کاربران کمتر احتمال داشت به پائین صفحه اسکرول کنن. از اون زمان کاربران به اسکرول کردن عمودی عادت کردن. با این حال فقط به خاطر اینکه کاربران یاد گرفتن اسکرول کنن نمیتونیم از اونها انتظار داشته باشیم که حتی در صورتی که هیچ نشانه ای برای دعوت اونها به انجام این کار وجود نداشته باشه، باز این کار رو انجام بدن. اگه شما فکر کنید که اطلاعات بیشتری وجود نداره چرا اسکرول کنید؟
 
اینها لیستی از استایلهای طراحی هستن که اغلب نشون دهنده پایان محتوای مربوط هستن و توهم تمامیت رو به وجود میارن:
 
گرافیکها، تصاویر و یا ویدئوهای بزرگ: مد اخیر طراحی برپایه تصویر باعث شده خیلی از وب سایتها از تصاویر یا ویدئوهای بزرگ جذاب و جلب کننده در محدوده بالای صفحه استفاده کنن. این روش اغلب باعث میشه که محتوای مهم در پائین تر از محدوده قابل رویت و دید بلافاصله قرار بگیره و هیچ سرنخ اضافه ای به کاربران برای اسکرول کردن نمیده.
 

Maple.com یک سرویس دهنده ارائه غذا در نیویورکه یک ویدئوی بزرگ که به طور خودکار پخش میشه رو در بالای صفحه طوری که تمام ارتفاع رو میگیره قرار داده. در تمامی دستگاهها محتوا در زیر این تصویر قرار میگیره و در دید اول دیده نمیشه.

 
در مثال بالا، ویدئوی بزرگ که با یک call to action قوی همراه شده این تصور رو ایجاد میکنه که صفحه کامله، در حالیکه تمامی جزئیات در رابطه با این شرکت در پائینتر مشخص شدند. طراحی یک طبقه اشتباه رو ساخته یا به نظر میرسونه که صفحه وب تمام شده. غیاب هرگونه عنصر راهبری این تاثیر رو بیشتر کرده.
 
در یک مطالعه کاربردپذیری ما از کاربران خواستیم که این سایت رو ببینن و بفهمن که این شرکت چه خدماتی ارائه میده. از ۸ کاربر،۶ تای اونها نفهمیدن که میتونن صفحه رو اسکرول کنن. به دلیل اینکه هیچ لینک یا call to action دیگه ای موجود نیست، تمامی کاربران ما دکمه Get Started رو انتخاب کردن و با یک سری از مدالها که ازشون اطلاعات شخصی میپرسیدن مواجه شدن که تازه بعدش متوجه شدن که این خدمات در محدوده اونها قابل ارائه نیست! ۷۵ درصد از کاربران تست شده سردرگم شدن و نه تنها زمان و انرژیشون رو صرف پر کردن جزئیات در سایت کردن بلکه نتونستن بفهمن که شرکت دقیقا چه کار انجام میده.
 
خطوط افقی جداکننده: توهم تمامیت میتونه هر جایی از صفحه اتفاق بیوفته و فقط مختص بالای صفحه (مثل مثال بالا) نیست. برشی که در محتوا به وسیله یک خط افقی که در عرض صفحه امتداد یافته ایجاد میشه میتونه یک مانع دیداری بسازه و کاربران رو از اسکرول بیشتر پشیمون کنه. اگه کاربران به این خطوط افقی قوی درون محتوا برخورد کنن، ممکنه اون رو به عنوان تنها پایان یک بخش تصور نکنن، بلکه فکر کنن صفحه اینجا تموم میشه.
 

Virginamerica.com شامل خطوط افقی که در عرض صفحه بین بخشهای صفحه امتداد پیدا کردن. اینها به اشتباه انتهای محتوا رو نشون میدن.

 
فضای سفید وسیع بین عناصر محتوا: وقتی که فاصله های افقی (فاصله بین عناصر یک صفحه) خیلی بزرگ باشن یا محتوا کاملا فضای دربرگیرنده خودش رو پر نکنه، خلاء بزرگ بین عناصر محتوا برای کاربرانی که موقع اسکرول کردن صفحه با اینها برخورد میکنن میتونه به عنوان نشانه پایان صفحه تلقی بشه. چرا شما باید به اسکرول کردن ادامه بدید وقتی که به نظر میاد اطلاعات بیشتری نخواهید دید؟
 

Urbanoutfitters.com بخشهای محتوا با سایه شفاف قرمز مشخص شده. فاصله های بزرگ افقی بین بخشها به نظر میرسونه که صفحه کامل شده، در حالیکه محتوای بیشتری در پائینتر وجود داره.

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

salon.com آگهی های بزرگی رو در وسط بدنه محتوای اصلی نشون میده. مشخص نیست که مقاله بعد از آگهی ها ادامه داره.

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

برای مرور اخبار در اپلیکیشن iOS Yahoo Digest، کاربران برای دیدن خبر بعدی باید به طرفین حرکت کنن. این حرکت شبیه برداشتن کارت بالایی از یک دست کارت، برای آزاد کردن کارتهای زیری است (و برای همینه که این الگوی تعامل رو بهش «دسته کارت» میگن). در این مورد، نمایشگر نشانه های مشخص تصویری نداره که امکان حرکت افقی به طرفین رو نشون بده.

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

Novartis.com نقاط پائین نشانه های ضعیفی هستن: اونها قابل توجه نیستن و فلشهای راهبری تنها وقتی روی تصاویر باشی نمایش داده میشن. اما جنبه مثبتش اینه که سایت با نمایش لبه بالایی بخشهای بعدی (همکاری، فرصت شغلی، اخبار و تحقیقات) در زیر تصاویر چرخشی، به اسکرول کردن عمودی تشویق میکنه.

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

Secondstory.com از طرح افقی استفاده میکنه. بلافاصه واضح نیست که محتوای اضافی در سمت راست خارج از نمایشگر وجود داره. کاربران باید فلش زرد سمت راست رو ببینن که در جایی غیر قابل انتظار و روی یک گرافیک درخشنده پنهان شده یا به طور ماهرانه ای با موسشون روی اسکرول بار پائین صفحه مانور بدن.

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

Delish.com: آگهی داخل مقاله با یک تشویق به ادامه خواندن همراهه. (اگرچه با یک فونت نسبتا کم کنتراست).

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

Netflix.com از تصاویر چرخشی برای نمایش برنامه ها در هر دسته بندی استفاده میکنه. نمایش بخشی از آیتمها در لبه راست نمایشگر به ادامه داشتن گزینه ها کمک میکنه.

 
روی دستگاههای زیادی تست کنید برای اطمینان از اینکه عناصر طراحی در خلال اندازه های مختلف نمایشگر کار میکنن.

لینک منبع