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

 

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

 

اسکرول بی نهایت در برخی موارد مانع دسترسی کاربر به فوتر سایت میشود. این مسئله یکی از چالش های مهم استفاده از اسکرول بی نهایت میباشد: زیرا با اسکرول کردن کاربر به سمت پایین بقیه محصولات لود میشوند و کاربر تنها چند ثانیه فوتر را دیده و با لود شدن بقیه محصولات دوباره فوتر از دید کاربر خارج میشود. چنانچه آیتم ها زیاد باشند مانع دسترسی کاربر به فوتر میشوند. و این مشکل بسیار مهم است زیرا معمولاً فوتر حاوی اطلاعات مفیدی مانند لینک های کمکی، اطلاعات پشتیبانی و تماس و ... میباشد.
در طی مطالعات و بررسی طراحی سایت های برتر تجارت الکترونیک، مشخص شد که تنها 8% آن ها از دکمه های ادامه استفاده کرده اند. دکمه ادامه (load more) یک طراحی بسیار ساده است که از کاربر میخواهد در صورت تمایل به دیدن نتایج بیشتر، کلیک کند.
کاربران سایت هایی را که دارای دکمه ادامه بوده اند باز هم بیشتر از سایت های دارای صفحه بندی مشاهده کرده و راضی بوده اند. در مقایسه با اسکرول بی نهایت، در سایت ها با دکمه ادامه کاربران تمرکز بیشتری بر روی دیدن تک تک محصولات دارند و سریع نگاه کرده و رد نمی شوند.

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

یک راه حل مناسب برای بارگذاری محصولات در یک دسته بندی ترکیب حالت load more با اسکرول بی نهایت به صورت lazy load میباشد. به این صورت که ابتدا 10 -30 محصول در صفحه اولیه نمایش داده میشوند و بعد 10-30 محصول دیگر هم از طریق lazy load بارگذاری میشوند تا زمانی که به 50-100 محصول برسیم و بعد از آن دکمه load more ظاهر میشود. با کلیک کردن بر روی دکمه ادامه 10-30 محصول دیگر هم بارگذاری میشوند و عملیات lazy load دوباره تکرار میشود تا 50-100 محصول بعدی و بعد از آن دوباره دکمه load more ظاهر میشود. دکمه load more  بعد از 50-100 محصول وقفه ای ایجاد میکند و کاربر را متوقف میکند در حالی که lazy load عملکرد را بهبود بخشیده و زمان بارگذاری و لود سرور را کاهش میدهد.
توجه داشته باشید که تعداد محصولات بارگذاری شده در هر بار مهم میباشد. مطالعات نشان میدهند که تعداد مناسب بستگی به نوع محصولات و مفهوم کلی سایت دارد. در لیست هایی که شامل محصولات فنی با ویژگی های خاص مانند محصولات سخت افزاری، قطعات و ... میباشند سعی کنید تعداد محصول کمتری در هر بار لود شود. ولی تجربه نشان داده است که کاربران قابلیت دیدن لیست های طولانی و بلند بالایی از محصولات ظاهری و تزئینی دارند مانند لوازم دکوراسیون، مبلمان و ... 
به این ترتیب صفحات با سرعت بیشتری لود میشوند زیرا تعداد محصول کمتری در ابتدا بارگذاری میشود.
علاوه بر این در این حالت در دسته بندی های کوچک و متوسط، lazy load به کاربر اجازه میدهد تا لیست محصولات را با سرعت بیشتر و وقفه کمتری مشاهده نماید. و در لیست های طولانی تر با وجود دکمه load more هم یک وقفه ای ایجاد میشود و به کاربر اجازه داده میشود تا محصولات را با دقت بیشتری ببیند و هم امکان دسترسی به فوتر را ایجاد می نماید.
یکی از مشکلات اسکرول بی نهایت و lazy load این بود که کاربر به فوتر دسترسی نداشت و تنها چند ثانیه فوتر را می دید ولی استفاده از دکمه load more این مشکل را تا حد زیادی برطرف میکند.

با توجه به طبیعت جستجو معمولاً نتایج جستجو بسیار زیاد بوده و بیشتر از یک لیست محصول یا دسته بندی هستند. بنابراین وجود هزاران آیتم در نتیجه یک جستجو به خصوص در سایت های بزرگ، اتفاق غیر منتظره ای نیست.
بعلاوه در جستجو، نتایج با توجه به میزان مرتبط بودنشان مرتب سازی میشوند. بنابراین 50 نتیجه اول در مقایسه با 100 نتیجه اول معمولاً بسیار مرتبط تر به موضوع مورد جستجو میباشند. بنابراین کاربر بیشتر از اینکه تمایل به اسکرول کردن دیدن نتایج بعدی داشته باشد، تمایل دارد نتایج اولیه را با دقت بیشتری بررسی کند.
بنابراین تنها باید بین 25 تا 75 آیتم در نتیجه یک جستجو بارگذاری شوند و حالت اسکرول بی نهایت به هیچ وجه نباید برای نشان دادن نتایج جستجو مورد استفاده قرار گیرد. صفحه بندی و دکمه load more گزینه های مناسب تری برای نمایش نتایج جستجو هستند زیرا کاربر را تشویق به تمرکز بیشتر بر روی آیتم ها میکنند و مانع اسکن سریع آیتم ها توسط کاربر میشوند.
حداکثر تعداد محصولاتی که به صورت پیش فرض لود میشوند میتواند به طور پویا و با توجه به میزان ارتباط نتایج جستجو با یکدیگر، تنظیم شود. اکثر موتورهای جستجو، به هر نتیجه جستجو با توجه به میزان ارتباطشان با موضوع جستجو، امتیازی اختصاص میدهند و آن هایی که امتیازشان بیشتر است را در صفحه اول نتایج نمایش میدهند.

 

منبع: طراحی سایت وب وان

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

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

با توجه به سبک مینیمال و مسطح امروزی در طراحی سایت، ایجاد طرح و بافت خاص، دیگر مانند گذشته رایج نیست. ولی هنوز هم در بسیاری از وب سایت ها نمونه های آن دیده میشود.
ایجاد تغییر از عنصری با حالت مسطح به عنصری با طرح و بافت خاص یا حالت 3 بعدی باعث ایجاد تمرکز و توجه بر روی آن عنصر میشود.
یک عنصر متنی را با الگو یا طرحی خاص در نظر بگیرید. انواع اصلی طرح ها و الگوها دو نوع زبر و صاف میباشند. این الگوها میتوانند به صورت ترکیبی یا به تنهایی باعث ایجاد جذابیت و تمایز ظاهری شوند.

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

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

•    رنگ های گرم و سرد و خنثی را با یکدیگر ترکیب کنید.
•    رنگ ها را با اضافه کردن رنگ ها و تن های دیگر تغییر دهید.
•    رنگ های تیره و روشن را با هم ترکیب کنید.
•    عناصر بدون رنگ اضافه کنید. در فضاهایی با رنگ های زیاد، عناصر با رنگ سفید یا سیاه میتوانند تأکید زیادی ایجاد کنند و در فضای سفید و سیاه هم اضافه کردن رنگ باعث ایجاد کنتراست میشود.

یک شکل یا ویژگی غیرمنتظره و منحصر به فرد میتواند کنتراست کافی را به طراحی شما اضافه کند. کار غیر منتظره در یک طراحی به معنی استفاده از چیزی است که از همه عناصر موجود در طراحی متفاوت است ولی همچنان با آن ها هارمونی هم دارد.
این نوع عناصر عبارتند از :
•    ایجاد عدم تقارن با یک عنصر در یک طراحی متقارن
•    یک نشانه یا علامت بصری در طراحی مانند یک شکل مشخص یا الگوی چشم گیر همانطور که در سایت Vibrant در تصویر بالا استفاده شده است.
•    تغییر در یک الگو یا عنصر تکرار شونده
•    تغییر راستای یک عنصر یا متن مانند مثال Anima در بالا (با حرف "I")
•    تغییر پوزیشن یا سایز یک عنصر در یک ردیف
•    سبک های متفاوت تصویری مانند استفاده از تصاویر گرافیکی و انیمیشن
•    ترکیب عناصر ظاهری ساده و پیچیده یا سبک های تایپوگرافی

نکته خوب در مورد تغییر کنتراست بین عناصر، تأثیر فوری آن بر روی طراحی وب سایت شما میباشد. یا تغییر دادن شکل عناصر میتوانید و ایجاد کنتراست کافی میتوانید کاربر را به سمت چیزی که میخواهید در سایتتان بیشتر دیده شود، هدایت نمایید.