در قسمت اول این مجموعه در مورد اشتباهات در طراحی سایت، درمورد مشکلات طراحی و ساخت و تایپوگرافی نوشتم و در قسمت دوم، اشتباهات محتوایی و ایرادات مربوط به کاربرد پذیری رو توضیح دادم.
اگه اونا رو هنوز نخوندید، پیشنهاد من اینه که از قسمت اول شروع کنید.
اما در این مطلب، که قسمت سوم و آخر مجموعه هست، سه مورد دیگه از اشتباهات در طراحی سایت رو بررسی میکنم و پرونده رو می بندم:
- اشتباهات مربوط به هدایت کاربران
- ایرادات گرافیکی و مشکلات طراحی بصری
- اشتباهات فنی
اشتباهات در طراحی سایت، بخش پنجم: اشتباه در هدایت کاربران
-
مشخص نبودن رنگ لینک های مشاهده شده
وقتی من بعنوان یه کاربر، یکی از مطالب شما رو خوندم و به صفحه دیگه ای رفتم، دیگه دوست ندارم از طریق لینک های موجود توی صفحه حاضر، به صفحه قبلی برگردم.
به همین دلیل، بهتره که لینکهای مشاهده شده توسط کاربر رو با یه رنگ دیگه، متمایز کنید و به این ترتیب، به مخاطبتون این پیام رو بدید که: “دوست عزیز! شما قبلا اونجا بودین!“
در غیر این صورت، وقتی کاربر دوباره به اون صفحه برمیگرده، با دیدن محتوای تکراری، خیلی سریع پیج رو میبنده و این یعنی یه امتیاز منفی برای اون صفحه از سایت شما!
-
نمایش ندادن موقعیت کاربر در سایت
کاربری که به سایت شما سر زده، گاهی اوقات از خودش میپرسه “من کجام؟”
علاوه بر این، خیلی مواقع مخاطب شما دوست داره به مطالب مرتبط دسترسی پیدا کنه و وقتی مسیر قرارگیری یه محتوا رو بهش نشون میدین، میتونه با کلیک کردن روی یکی از شاخه های بالایی، به راحتی به موارد مشابه برسه.
برای اینکه مطلب بیشتر توی ذهنتون جا بیفته، این عکس از سایت دیجیکالا رو بینید:
من وقتی به صفحه خرید این پاوربانک سر زدم، احتمالش خیلی زیاده که دلم بخواد یه نگاهی هم به کل دسته “شارژر همراه” بندازم یا یک محصول دیگه از دسته “لوازم جانبی” رو بخرم.
بنابراین، بعنوان ادمین یا طراح سایت، باید حتما این موارد رو در دسترس مخاطب قرار بدید تا بتونه خیلی راحت به چیزایی که میخواد برسه و علاوه بر اون، حس گم شدن توی وبسایت بهش دست نده!
-
غیر قابل کنترل بودن نوار پیمایش (Navigation Bar)
استفاده از انیمیشن در نوار پیمایش سایت (هر چیزی که حرکت کنه، برق بزنه، رنگش عوض باشه یا به هر شکلی، خود به خود تکون بخوره) قاتل توجه کاربره و یکی دیگه از اشتباهات در طراحی سایت محسوب میشه.
به این توجه کنید که مخاطب داره زمانش رو صرف میکنه تا پاسخ سوال یا راه حل مشکلش رو در صفحه شما پیدا کنه و طی این مدت، تا حد ممکن نباید چیزی حواسش رو پرت کنه (خودم این مشکل رو معمولا با پاپ-آپ ها دارم)
خیلی از کاربرهای دیگه هم مثل من، از این موضوع بدشون میاد و احتمالش هست که کلا بیخیال سایت بشن!
بخش ششم: ایرادات گرافیکی و مشکلات طراحی بصری
-
سایز بندی ضعیف و حجم بالای عکس ها
یکی از اشتباهات در طراحی سایت که افراد زیادی اونو انجام میدن، استفاده از عکس های بد و بدرنخوره! (البته وب فارسی توی این موضوع داره خیلی خوب پیشرفت میکنه ولی خب، هنوز خیلی مونده تا به حد مطلوب برسه)
عکسایی با کیفیت پایین، سایت شما رو غیر حرفه ای و ضعیف نشون میده. علاوه بر این، اگه سایز تصاویر موجود توی یک صفحه، زیادی بزرگ باشه، بازم توجه کاربر رو منحرف میکنه و بهش حس بدی میده.
اما از طرفی، استفاده از عکس های زیادی با کیفیت هم میتونه تبدیل به نقطه ضعف بشه.
عکس هایی با کیفیت بالا، معمولا حجم های خیلی زیادی هم دارن و وقتی اونا رو توی صفحه وب قرار بدید، سرعت بارگزاری سایت مثل حلزون کند میشه!
اگه دقت کرده باشید، سایتی مثل دیجیکالا، عکس های زیادی داره، اما خیلی هم کند نیست.
البته کند نبودن اون، علاوه بر حجم و کیفیت عکس ها، به سرعت سرور و کد نویسی حرفه ای هم بستگی داره، اما کیفیت و حجم تصاویرش هم متناسبه.
یکی از راه هایی که میتونید باهاش حجم عکس ها رو برای وب متناسب کنید، استفاده از قابلیت Save for web در فتوشاپ هست.
با استفاده از این قابلیت، حجم عکس‌ها تا حد زیادی متعادل میشه و میتونید همونجا، سایز و ابعادش رو هم تعیین کنید و خروجی خوبی بگیرید.
و خب، بهتره که اینکارا رو به یه گرافیست حرفه‌ای بسپارید.
-
واکنشگرا نبودن تصاویر
حتی خود گوگل هم به طراحان سایت پیشنهاد میکنه که حتما از مدیا کوئری (Media Query) در CSS استفاده کنید.
مدیا کوئری، کمک میکنه که نحوه نمایش سایت و تصاویر در صفحه نمایش های مختلف رو کنترل کنید و اونا رو به دقت تنظیم کنید.
به این ترتیب، دیگه بابت نحوه نمایش تصاویر توی صفحه نمایش‌های کوچیکتر نگرانی نخواهید داشت.
یکی از افتضاح‌ترین اشتباهات در طراحی سایت، اینه که تصاویر موجود توی پیج، بزرگتر از صفحه نمایش کاربر باشه و نصفش از صفحه وب بیرون بزنه!
-
استفاده نکردن از متن جایگزین و نامرتبط بودن نام تصاویر
متن جایگزین، طبق تعریف فنی، وقتی بدرد میخوره که عکس، به هر دلیلی بالا نیاد و امکان نمایش در سایت رو نداشته باشه.
در این مواقع، متن جایگزین (Alt Text) به جای عکس نمایش داده میشه و کاربر متوجه میشه که در اینجا، یه عکس با فلان موضوع وجود داشته
اما این، تنها کاربرد متن جایگزین نیست. موتورهای جستجو (مخصوصا گوگل) از این متون جایگزین استفاده میکنن تا موضوع عکس ها رو بفهمن و اونا رو در نتایج جستجوی تصویر، به کاربرها نشون بدن.
بعلاوه، گوگل از اسم و عنوان عکس ها هم برای تشخیص اونها استفاده میکنه. پس بهتره قبل از آپلود عکس ها رو سایتتون، یه اسم مرتبط و درست و حسابی هم براشون انتخاب کنید.
بخش هفتم: ایرادات فنی
-
کار نکردن سایت
فکر نکنم فاجعه وحشتناک‌تری از بالا نیومدن و کار نکردن سایت وجود داشته باشه!
مهم نیست که چقدر هزینه و زمان و انرژی برای سایتتون صرف کردید. اگه به هر دلیل کار نکنه، تمام اون کارا بیهوده بوده.
پس سعی کنید خیلی سریع راه حل رو پیدا کنید و یه بلایی سرش بیارید تا سرویس زودتر کار کنه! مشکلات دیگه رو میشه به مرور حل کرد، ولی این یکی، باید فورا حل بشه.
از کار افتاد سایت ممکنه دلایل زیادی داشته باشه، اما چندتا از رایج ترین مشکلاتی که باعث این موضوع میشه، اینه:
- از کار افتادن سرور و هاست (چک کنید ببینید نیاز به تمدید داره یا نه و به پشتیبانی هاست پیام بدید)
- نصب کردن یه افزونه یا پلاگین مخرب (معمولا این بلا سر سایت هایی میاد که از سیستم های مدیریت محتوای متن باز مثل وردپرس استفاده میکنن)
- حذف شدن یا تغییر اشتباهی یه بخش از کدهای سایت (ممکنه که وقتی داشتید با کدهای سایت سروکله میزدید، یه بخش رو اشتباهی خراب کرده باشید)
- هک شدن سایت (از اون مسائلیه که به راحتی حل نمیشه، مگه اینکه خوش شانس باشید!)
- و …
-
استفاده خیلی زیاد از جاوا اسکریپت
فکر کنید که تمام انیمیشن ها، حرکات، استایل و … در سایت شما، به جاوا اسکریپت وابسته باشه!
اگه کاربری، اجرای جاوااسکریپت در مرورگرش رو غیرفعال کرده باشه، سایت شما هم تا حد زیادی از کار می افته یا درست اجرا نمیشه!
به این ترتیب، سعی کنید تا حد امکان وابستگی سایت به جاوااسکریپت رو کمتر کنید تا دچار این اشتباه رایج در طراحی سایت نشید.
الان خیلی از کارهایی که جاوااسکریپت در خصوص ظاهر سایت میتونه انجام بده، از عهده CSS3 هم برمیاد (مثل انیمیشن و حرکت) پس تا حد امکان، این کارها رو به CSS بسپارید.
-
استفاده نکردن از قابلیت کَش مرورگر (Browser Caching)
وقتی که قابلیت کش و حافظه پنهان در سایت شما فعال باشه، مرورگر کاربر به صورت خودکار، فایل های مختلف سایت رو دانلود و روی کامپیوتر مخاطب ذخیره میکنه.
به این ترتیب، از این به بعد، هر بار که یوزر به سایت شما سر بزنه، دیگه نیازی نیست که همه چیز از اول روی مرورگر دانلود و بارگزاری بشه و بروزر (Browser)، فایلهایی که از دفعه پیش ذخیره کرده بود رو دوباره به صورت خودکار لود میکنه.
-
فشرده نکردن کدهای سایت
هر بخش غیر ضروری در کدهای سایت (مخصوصا کدهای استایل و جاوااسکریپت) میتونه سرعت بارگزاری سایت شما رو کم کنه.
فشرده سازی این کدها، حجم فایل ها رو پایین میاره و به این ترتیب، سرعت سایت بالاتر میره.
مهمترین بخش های غیر ضروری در کد، اینها هستن:
- کامنت ها
- فاصله های بین خطوط و عبارات
- کدهای بلا استفاده
البته به جای اینکه به صورت دستی اینکارا رو انجام بدید، میتونید از سرویس های مختلفی استفاده کنید که با یه سرچ کوچیک توی گوگل، میتونید بهشون دسترسی داشته باشید.
اگر هم پیدا نکردید (که خیلی عجیبه!) میتونید بهم پیام بدید تا راهنمایی تون کنم.
توی این مجموعه، سعی کردم تا جایی که میشه، اشتباهات در طراحی سایت رو بررسی کنم و راه حل هایی رو برای حل اونا ارائه بدم.
البته توی حیطه وب و برنامه نویسی، پیدا کردن مشکل، معمولا مساوی با حل اونه!
ولی خب، طبیعتا اینا تنها مواردی نیست که میتونه شما رو در مسیر طراحی سایتتون اذیت کنه!
اگه مورد دیگه ای بوده که خیلی روی مختون رفته و ممکنه بدرد من و بقیه بخوره، ممنون میشم اگه توی بخش کامنت ها بهش اشاره کنید و اگه به مشکلی برخوردید که من بررسیش نکردم و نمیدونید چطور حلش کنید، ازم بپرسید.
خوشحال میشم که بتونم کمک کنم!
آخرین دیدگاه‌ها