اشتباهات مهم در طراحی صفحه اول سایت
مقالات طراحی سایتچه مواردی را باید در طراحی صفحه اول هر وب سایتی درنظر داشته باشیم تا یک طرح بی نقص یا کم نقص را ارائه کنیم ؟ نکات مهمی که هر طراحی باید آنها را رعایت کند !!!
اگر شما نیز یک طراح سایت هستید و فعلا در زمینه فرانت‌اند فعالیت دارید ، لازم است تا درمورد برخی موارد اطلاع داشته باشید !! به عبارتی شما نمی‌توانید هر المانی را هرجای صفحه قرار دهید و هر بخشی را در داخل بخش دیگر فراخوانی کنید ! برای طراحی سایت یک موضوع در بخش UI و یک موضوع دیگر در قسمت UX مطرح است که یک طراح حرفه‌ای باید هردوی این موارد را بایکدیگر ترکیب کند تا طرح او بی نقص باشد .
این مقاله بیشتر بر محوریت UX تمرکز دارد چراکه وقتی کاربر وارد سایت شد لازم است تا درجهت دسترسی به عناصر مختلف صفحه مشکلی نداشته باشد . صفحه اصلی سایت ، قلب تپنده سایت شما است و در اکثر مواقع ، کاربر در همین صفحه از سایت فرود خواهد آمد و از طریق بخش‌های مختلف صفحه اصلی ، به سایر قسمت‌های سایت شما دسترسی خواهد داشت .
برای صفحه اصلی سایت لازم است تا برخی موارد را حتما درنظر داشته باشید تا بتوانید تاحد ممکن کاربر سایت را به درستی راهنمایی کنید . این موارد را در ادامه صفحه بصورت دقیق بررسی خواهیم کرد .
فرم در صفحه اول ممنوع!
در گذشته فرم‌های خبرنامه در داخل صفحات اصلی و بخش انتهای صفحه وجود داشت که شما ضمن وارد کردن ایمیل ، از آخرین اخبار و رویدادهای سایت مطلع می‌شدید که با بوجود آمدن خبرنامه پیامکی این فرم‌ها کم رنگ شدند . این فرم با توجه به اینکه دارای یک ورودی ایمیل و صرفا یک دکمه بود ، مشکلی را در طراحی ایجاد نمی‌کرد و قابل قبول بود اما وجود فرم‌هایی مثل فرم تماس با ما در صفحه اصلی حقیقتا به دور از یک UI و UX خوب است .
در برخی وب سایت‌ها شاهد این موضوع هستیم که فرم تماس با چند ورودی مختلف ( نام ، نام خانوادگی ، ایمیل یا موبایل ، موضوع پیام و متن پیام ) وجود دارد . این نوع فرم باید در داخل صفحه تماس با ما و بخش مخصوص به خود قرار داشته باشد و جای فرم تماس در صفحه اصلی هرچند در انتهای آن نیست !
صفحه بندی مقالات یا محصولات
اگر وارد صفحه آرشیو مقالات یا محصولات شوید ، معمولا به تعداد مشخصی مطالب یا محصولات را مشاهده می‌کنید و مابقی آنها ( درصورت بیشتر بودن از یک تعداد مشخص ) در صفحات 2 و 3 و … نمایش داده می‌شود . صفحه بندی مختص صفحات آرشیو است . در برخی وب سایت‌های جدید یا مبتدی ، شاهد هستیم که داخل صفحه اصلی سایت ، در بخشی از صفحه لیست آخرین مقالات یا محصولات وجود دارد و البته اصلا لینکی برای مشاهده مابقی محصولات وجود ندارد و بخش صفحه بندی ظاهر شده است .
این بخش صفحه بندی یکی از بدترین اشتباهات داخل صفحه اول سایت است و هرگز نباید آن را در صفحه اول ظاهر کنید . دقت داشته باشید که ارسال Query String در صفحه اول برای صفحه بندی ، هم از نظر سئو و هم از نظر UX و UI تماما اشتباه است .
مسیر راهنما یا Breadcrumb
مسیر راهنما یکی از بخش‌هایی است که در صفحات داخلی سایت آن را مشاهده می‌کنید و به کاربر نمایش خواهد داد که شما از چه مسیری وارد صفحه فعلی شده‌اید . این مسیر راهنما در هر صفحه دیگری هم که باشد ، داخل صفحه اصلی سایت به هیچ عنوان نباید قرار داشته باشد .
این مسیر راهنما شاید در صفحات لندینگ پیج مثل صفحات جشنواره و … نیز که موقتی هستند وجود نداشته باشد ( شاید هم وجود داشته باشد ) اما داخل صفحه اصلی سایت هرگز نباید این مسیر راهنما را ایجاد کنید .
ویدیوهای بسیار بزرگ و سنگین
گاها شاهد هستیم که برای معرفی شرکت یا مجموعه و فروشگاه ، یک ویدیو بزرگ در همان ابتدای صفحه قراردارد که اگر اندازه و ابعاد این ویدیو مناسب نبوده و حجم آن بسیار زیاد باشد ، اولا زمان بارگذاری سایت افزایش خواهد یافت و دوم اینکه روی UI و UX سایت تاثیر بسیار منفی خواهد داشت .
انتظار کاربر برای بارگذاری یک ویدیو ، ایجاد اختلال در نمایش سایر قسمت‌های سایت بواسطه وجود این ویدیو و بسیاری موارد دیگر ، مستقیما بروی سایت شما تاثیر دارند لذا باید دقت کنید ک ویدیو در محل درست و به شکل درست نمایش داده شود .
تکرار مجدد یک section
تکرار یک بخش بیش از یکبار بسیار اشتباه است . تصور کنید که شما یک قسمت شگفت انگیز برای خرید محصولات فروشگاه دارید . این قسمت در ابتدای سایت ظاهر خواهد شد . تصور کنید شما همین قسمت را یکبار دیگر در انتهای سایت یا اواسط صفحه مجدد قرار دهید ( به عبارتی اصرار بسیار زیادی به فروش محصول دارید ) در این شرایط شما با تکرار یک section در دو بخش از یک صفحه ، اشتباه زیبایی را مرتکب شدید .
استفاده از تگ h1 بیش از یکبار
برخی از سایت‌ها برای ایجاد عناوین بزرگ در صفحه اول ، بجای ایجاد font size بزرگ روی فونت ، از تگ h1 استفاده می‌کنند که در حالت کلی ، اندازه فونت بزرگتری دارد اما لازم است اطلاع داشته باشید که داخل هر صفحه باید تنها از یک تگ h1 استفاده شود . البته که شما اگر 10 تگ h1 نیز قرار دهید از نظر ظاهری و نمایش مشکلی ندارید اما اگر فردا روزی سایت خود را سئو کنید ، یکی از اولیه‌ترین اشکالات سایت شما که رویت خواهد شد ، وجود تگ h1 به تعداد بیش از یک عدد در سایت است .
قراردادن منو اصلی مجدد در فوتر
در بالاتر به مشکل تکرار مجدد یک section اشاره کردیم اما موضوع منو اصلی تفاوت دارد . گاها در برخی سایت‌ها شاهد هستیم که منو اصلی یا همان منوی بالای سایت در قسمت پایین سایت ( فوتر ) نیز تکرار شده است یا در دیزاینی متفاوت ، تمامی لینک‌های بالای سایت در فوتر سایت نیز وجود دارد که این نیز از نظر قواعد سئو و همچنین UX اشتباه است .
دکمه منو موبایلی در حالت دسکتاپ
یکی از مواردی که در طراحی واکنشگرا مهم است ، واکنشگرا بودن سایت است که البته در حالت موبایل باید یک دکمه جهت نمایش منوی سایت وجود داشته باشد . این دکمه نباید در حالت دسکتاپ نمایش داده شود و تنها لازم است تا در عرض های مشخصی مثلا عرض 768 پیکسل به پایین نمایش داده شود . برخی وب سایت‌ها زحمت عدم نمایش این دکمه را در حالت غیر از موبایل و تبلت به خودشان نمی‌دهند و درنتیجه با کلیک روی این دکمه در حالت دسکتاپ ، یک منوی کناری نیز باز خواهد شد که این امر نیز اشتباه است و باید به آن توجه شود .
عدم داشتن منو در سایت
یکی دیگر از موارد مربوط به منو که شاید از نظر شما خنده دار باشد این است که در برخی سایت‌ها اصلا چیزی بنام منو وجود ندارد ، و شما بعنوان کاربر استفاده کننده از سایت ، زمانی که وارد سایت شدید ، سردرگم هستید اصلا اطلاع ندارید که برای مشاهده مثلا لیست محصولات باید از کدام بخش وارد شوید . لذا وجود یک منو اصولی نیز بسیار مهم است .
لوگوی بسیار بزرگ ، محل نامناسب برای لوگو
لوگوی سایت یک اندازه استاندارد دارد و لازم نیست شما جهت نمایش بهتر لوگو ، آن را در ابعاد بسیار بزرگی داخل سایت قرار دهید . معمولا لوگوی سایت را در وب سایت‌های راست به چپ ، در راست ترین قسمت سایت یا به عبارتی نقطه شروع سایت قرار می‌دهند و در سایت های چپ به راست ، در سمت چپ هدر است و عموما لوگو داخل منو اصلی سایت قرار دارد .
نمایش لوگو در پایین‌تر از ابتدای سایت به هویت شما و برندسازی سایت آسیب های شناختی وارد خواهد کرد از این جهت بهتر است نماد کسبوکار شما در همان ابتدای سایت مشخص بوده و در محل درست با ابعاد درست نمایش داده شود .
اسلایدرهای تمام صفحه بسیار بزرگ و حجیم
در برخی وب سایت‌ها شاهد این موضوع هستیم که وقتی وارد صفحه اول سایت می‌شویم ، یک اسلایدر بسیار بزرگ که کل صفحه نمایش را پوشش داده و به دلیل ابعاد بزرگ آن ، تصاویر داخل آن نیز بزرگ و درنتیجه حجیم هستند ، زمان بسیار زیادی را جهت بارگذاری نیاز دارند از این جهت بهتر است اسلایدر در ابعاد مناسب داخل صفحه اول سایت قرار داشته باشد تا کاربر بتواند علاوه بر اسلایدر ، بخش‌هایی از پایین صفحه را نیز مشاهده کند و به سمت پایین اسکرول کند .
همچنین وجود اسلایدر با ابعاد بزرگ و حجم بالا ، باعث تاخیر در بارگذاری سایت نیز خواهد شد که از نظر سئو بهینه نیست . لذا در این مورد دقت لازم را داشته باشید .
ایجاد سایدبارهای بی معنی
طراحی صفحه اصلی وب سایت‌ها اکنون دیگر از حالت قدیمی و دمده خارج شده است و بصورت دو ستون یا سه ستون ( در صفحه اصلی ) اجرا نمی‌شوند و سایت شما دارای یک بدنه کلی است که این بدنه بصورت بخش به بخش یا همان section به section جدا شده و هر section خود به بخش‌های مختلف تقسیم شده است .
امروزه در داخل صفحه اول سایت‌ها ستون کناری یا اصطلاحا sidebar جهت نمایش آخرین مطالب و تبلیغات و … به ندرت وجود دارد . خصوصا سایت‌های شرکتی و فروشگاهی چنین مواردی را باید رعایت کنند . اما در سایت‌های خبری هنوز هم صفحه اصلی سایت‌ها بصورت دو ستون و گاها سه ستون طراحی می‌شود چراکه در این سایت‌ها تعدد مطالب و دسته‌بندی مطالب بسیار زیاد است و از این جهت ایجاب می‌کند که بخش‌های بزرگ و کوچک بسیاری جهت نمایش محتو ایجاد شود که استفاده از ستون کناری در این نوع سایت معقولانه‌تر است .
استفاده از عناصر ثابت بسیار زیاد
عناصر ثابت عبارتند از المان‌هایی از صفحه که با حرکت شما به سمت بالا یا پایین ، در صفحه همواره ثابت هستد همانند دکمه تماس ، ارتباط در واتساپ ، دکمه چت آنلاین و … درصورتی که کاربر شما وارد حالت موبایل در سایت شما شود ، به دلیل اینکه فضای مشاهده سایت کمتر است ، اگر عناصر ثابت داخل صفحه بسیار زیاد باشند ، کاربر یک UX بشدت بد را تجربه خواهد کرد و این عناصر ثابت به او اجازه نخواهند داد تا با المان‌های سایت به درستی کار کند .
همچنین بهتر است این عناصر در سایت‌های راست به چپ ، در سمت چپ صفحه قرار داشته باشند ( به این دلیل که شروع متون در این سایت‌ها از سمت راست است و متن زیر المان‌های ثابت مخفی نشود ) . به همین ترتیب در سایت‌های چپ به راست نیز بهتر است این المان‌های ثابت در سمت راست صفحه باشند و ابعاد و تعداد آنها در حالت موبایل مدیریت شود .
درمورد اشکالات طراحی صفحه اول سایت می‌توان موارد بسیاری را ذکر کرد اما بخش‌های ارائه شده در بالا ، همگی در دسته الویت‌ها قرار دارند و لذا باید توجه کنید که از اشتباه در مورد هرکدام بپرهیزید . امید است که این محتوا از سایت سئو نود برای شما علاقمندان مفید واقع شده باشد .
سلام گفتیم سایدبار به تعداد زیادی خوب نیست ، طراحی سه ستون الان دیگه استفاده نمیشه