اشتباهات مهم در طراحی سایت
مقالات طراحی سایتچگونه با کارها ساده که حتی فکرش را نمیکنید ، مسبب فرار کاربر از سایت خودتان میشوید ؟ در این مقاله چند نمونه از اصلی ترین اشتباهاتی که مسبب کاهش تعامل کاربران با سایت شما هستند را ذکر کردیم که مطالعه آنها برای هر وب مستری ضروری است !
اشتباهات مهم در طراحی سایت را میتوان هم در بخش طراحی قالب و هم در بخش برنامهنویسی سایت بررسی کرد اما از آنجایی که اکثر این اشتباهات در ظاهر سایت بیشتر از باطن سایت یا همان قسمت بکاند قابل مشاهده هستند لذا در این مقاله منظور از اشتباهات مهم در طراحی سایت ، بیشتر مربوط به قسمت دیزاین و فرانت اند است .
اشتباهاتی که در این صفحه خدمتتان معرفی خواهد شد مواردی هستند که ممکن است از نقطه نظرهای مختلف در هر سایتی بررسی شوند و لزومی به اصلاح آنها در همه سایتها نیست به این دلیل که ممکن است تمامی این موارد در یک سایت وجود نداشته باشد و یا از همان ابتدا بصورت صحیح در سایت درج شده باشد .
دوستانی که در زمینه UI و همچنین UX فعالیت دارند ، صرفا دوستانی نیستند که توسط ابزارهای طراحی ، شروع به کنارهم قراردادن برخی باکس و تصاویر و … کنند . این عزیزان لازم است تا بخوبی رفتار کاربر را در سایتی که موضوع آن مشخص است مدنظر داشته و به نحوهی چینش المانها ، رنگ بندی ، ابعاد و فواصل را تنظیم کنند که کاربر نهایی هنگام استفاده از سایت ، در دسترسی داشتن به قسمتهای مختلف مشکلی را احساس نکند .
UX همان تجربه کاربری است و اینکه کاربر سایت شما تا چه حدی امکان استفاده از امکانات و ابزارهای سایت را به سادگی داشته باشد . در برخی سایتها شاهد این موضوع هستیم که در حال مشاهد یک محصول هستیم و دقیقا همان محصولی است که به دنبال آن بودیم اما دکمه افزودن به سبدخرید را در صفحه پیدا نمیکنیم . این یعنی یک UX نامناسب ! سایت شما بدون وجود کاربران ، معنی و مفهوم و درآمد مورد انتظار را ندارد لذا در بحث UX باید حداقل اشتباهات یا نواقص را داشت .
یک UX خوب مسبب این خواهد شد که کاربر شما ، صرفا برای یکبار شما را همراهی نکند و یک مخاطب وفادار برای شما باشد . برخی از این اشتباهات مهم در طراحی سایت که در ادامه خدمتتان معرفی خواهد شد مربوط به بخش طراحی ، بخشی مربوط به تولید محتوا و قسمتی دیگر نیر مربوط به سئو سایت است .
استفاده از افکتهای بی مفهموم در سایت
ازجمله مواردی که در گذشته و بیشتر در سیستم های وبلاگی همچون بلاگفا و … مسبب ایجاد کمی تفاوت میشدند ، وجود میزان زیادی انیمیشن و جلوههای خاص بود که شاید در زمان خودش کمی ایجاد تفاوت کرده بود و همه به دنبال اسکریپتهای انیمیشنی بودند ، اما امروزه دیگر این انیمیشنها معنی و مفهوم خاصی ندارند . برای مثال تغییر آیکون موس به اشکالی همچون قلب و … یا بارش برف و ستاره داخل صفحه و امثال این گزینهها ! حتی پخش موزیکهایی که قابلیت توقف هم نداشتند ازجمله مواردی هستند که اکنون از نظر UX به هیچ عنوان خوشایند نیست .
این موارد مربوط به وبلاگهای رایگان بودند و در حدود 10 تا 15 سال پیش و زمانیکه کاربران به تازگی وارد دنیای وسیعتری از اینترنت شدند جذاب بود اما در حال حاضر این موارد جذابیتی ندارد و برای وب سایتی که نشانگر یک کسبوکار است هیچ یک از این موارد نباید استفاده شود . این افکتها بیشتر جنبه تزئینی برای بخشهایی دارد که کاربر نیازمند درخواست خدمات خاصی نیست و هدف او صرفا مطالعه و گردش است .
اینگونه تصور کنید که وارد یکی از وب سایتهای معروف شده باشید و در داخل صفحه افکت بارش برف در حال اجرا باشد ! چه حسی به شما دست خواهد داد ؟ لذا از بکار گرفتن هرگونه المان اضافی که کاربر را اذیت کرده و یا جنبه غیررسمی به سایت شما دهد خودداری کنید .
استفاده از طیفهای رنگی بسیار زیاد
وب سایتها معمولا همگی دارای یک رنگ سازمانی مشخص هستند . رنگی که در داخل وب سایتها استفاده میشود 2 یا نهایتا 3 رنگ است . البته ممکن است رنگهای دیگر و بیشتری نیز داخل سایت در بخشهای مختلف مورد استفاده قرار گیرد . اما تعدد این رنگها به شکلی نیست که نمای کلی سایت و وجه بصری آن را دچار اختلال در نمایش کند . رنگهای اصلی که داخل سایت استفاده میشوند معمولا از 2 رنگ تشکیل شده است . برای مثال در سایت سئونود ، رنگ قرمز و رنگ مشکی دو رنگ اصلی هستند و رنگهای سفید و طوسی رنگ مکمل میباشند .
اگر در طراحی سایت ، تعداد رنگهای شاخص را بسیار بیشتر از حد استاندارد در نظر بگیرید ، مشاهده خواهید کرد که وبسایت شما در اصل جنبه رنگین کمان به خود گرفته و از حالت سنگینی خارج شده است . بنابراین تمرکز خود را روی بهبود رنگ سازمانی و طیفهای رنگی نزدیک به آن قرار دهید . اختلاف رنگ بسیار زیاد میان رنگ سازمانی و سایر رنگهای سایت نیز یکی از اشتباهات مهم در طراحی سایت است که اگر طرح کلی پوسته شما توسط UX کار طراحی شود باید بدرستی لحاظ گردد .
استفاده از فونت های متفاوت
برخی از افراد هنوز تصور میکنند که صفحات وب سایت همانند برنامه Word در مجموعه نرم افزار آفیس هستند و میتوانند هر فونت دلخواهی را در داخل آن و در بخشهای مختلف استفاده کنند . در طراحی سایت ، توسط کدهای زبان Css و یک آدرسدهی اصولی ، یک فونت واحد در کل قالب سایت معرفی شده و برای نمایش تمامی متون از هر وزن و اندازه ، از همان فونت استفاده میشود .
حتی اگر در تنظیمات سایت شما ، امکان تغییر فونت نیز وجود داشته باشد ، این تنظیمات مربوط به تغییر فونت کلی سایت خواهد بود و ابزارهایی که در داخل ادیتور متن سایت شما قرار گرفته است ، مسبب تغییر فونت نخواهند شد . لذا این طراح سایت است که طبق سلیقه و درخواست شما ، یک فونت واحد را در سایت شما به کار خواهد برد .
پس همانطورکه اشاره شد وب سایتها فونت سازمانی خود را در داخل قالب خود به شکل یک فایل مشخص دارند و شما امکان تغییر فونت به روش دیگری را ندارید . همچنین علاوه بر اینکه باید از یک فونت واحد استفاده کنید ، فونت شما نیز باید وزن و خوانایی خوبی داشته باشد . برخی از فونتهای فارسی در اندازههایی مثل 12 یا 13 پیکسل دچار شکستگی حروف میشوند و لذا در دستگاههای موبایل مسبب کاهش خوانایی متون خواهند شد . همچنین دقت داشته باشید که برای استفاده از فونت بهتر است از حالت CDN استفاده نکنید ( یعنی فونت را از اینترنت لود نکنید و فایل فونت را مستقیما داخل فایل قالب قرار دهید ) .
استفاده از تبلیغات و پاپآپ
استفاده از تبلیغات و پاپآپ های زیاد و بی مورد نیز یکی دیگر از اشتباهات مهم در طراحی سایت است . زمانیکه شما وارد وب سایتی شدید و هنوز اطلاع ندارید که داستان از چه قرار است ( در چند ثانیه اول ورود به سایت هستید ) فورا یک یا چندین پنجره برای شما به شکل پاپآپ نمایش داده میشوند . تجربه نشان داده است که این پنجره ها باعث میشوند تا کاربر حتی زحمت تماشای وب سایت شما را به خود نداده و مستقیما از وب سایت خارج شود .
همچنین زمانیکه شما در ابتدای تمام صفحات حجم زیادی از تبلیغات را جهت نمایش قرار میدهید ، کاربر هنگام ورود به صفحه ، در اکثر موارد ، اطلاعی ندارد که تا چه اندازه باید اسکرول در صفحه به سمت پایین داشته باشد تا به بخشهای پایینتر صفحه رسیده واز تبلیغات گذر کند .
تبلیغات عموما در سایدبار سایتها ( ستون کناری صفحات ) و به تعداد بسیار کم قرار داده میشوند . البته توجه داشته باشید که موضوع تبلیغات به همان بحث تبادل لینک باز میگردد و تمام تاثیر مثبت یا منفی آن به سئو سایت شما ارتباط دارد . پس لازم است تا در این مورد نیز با احتیاط عمل کنید . درکل بنرهای تصویری تبلیغات را نباید بیش از اندازه استفاده کنید .
استفاده از تصاویر زیاد ، کم کیفیت یا غیرمرتبط
تصاویر همیشه عضو جدایی ناپذیر سایت هستند و میتوان گفت تصورکردن یک سایت بدون تصویر عملا غیرممکن است . از این جهت نیز باید در استفاده از آنها بسیار هوشمندانه عمل کرد . اول از همه اینکه اگر قصد دارید تا در رابطه با مطلب خاصی ، تصویری را آماده کنید حتما به مرتبط بودن تصاویر با متن دقت کنید . به این دلیل که تصاویر به نوشتهها مرتبط هستند و کاربران علاوه بر متن ، بخشی از پیام را نیز توسط تصاویر درک میکنند ، لذا بکارگیری تصاویری درست ، حائز اهمیت بسیار است .
تعداد تصاویر نیز یکی دیگر از مباحث مهم است . اگر تعداد تصاویر مورد استفاد در صفحه شما ، از حدی بیشتر باشد معمولا کاربران ازنظر روانی اذیت میشوند . نمیتوان گفت تعداد تصاویر در یک مقاله با مثلا 1000 کلمه ، باید چه تعداد باشد . ممکن است متن شما آموزشی باشد و از این جهت نیز لازم باشد تا برای هربخش ، تصویر مرتبط با آن را ارائه کنید . اما ارائه تصویر زمانی که به آن نیازی نیست حواس خواننده را از متن اصلی دور خواهد کرد مخصوصا اگر این تصاویر نامرتبط باشد .
یک موضوع مهم دیگر نوع و ظاهر تصاویر است و هر اندازه که تصاویر شما حرفهای باشند به همان اندازه خودتان نیز حرفهای هستید . برای کاربران خود ارزش قائل باشید و همچنین وجه کار وب سایت خودتان را نیز بهتر نشان دهید . اگر برای محصولات خود از یک مجموعه عکاسی متخصص استفاده میکنید ، قطعا کیفیت تصاویر شما بسیار مناسب بوده و مهمتر اینکه این تصاویر مختص بیزنس خود شما هستند و ضمن ارزش دادن به کسبوکار خودتان ، تصاویری باکیفیت و جدید در سایت دارید .
به همین دلیل تاحد ممکن ، تصاویر را از سایتهای دیگر عینا ذخیره کرده و داخل سایت خود قرار ندهید . علاوه بر جنبه رعایت قوانین کپی رایت ، شما بعنوان یک بیزنس لازم است تا برای خودتان یک ویترین اختصاصی داشته باشید .
تکرار کلمات در صفحه و تاکید روی یک کلمه خاص
نگارش و تولید محتوا در سایت ، خود یک دانش جداگانه است و کار هر کسی نیست . هنگامی که شما در صفحه خاصی از سایت بروی محتوای مشخصی کار میکنید با موضوعی به نام چگالی کلمه روبرو هستید که تعداد دفعات بکارگیری این کلمه نسبت به کل متن را مشخص خواهد کرد .
شما باید به کاربر فضایی جهت ایجاد آرامش هنگام استفاده از سایت را دهید . به این معنی که وقتی کاربر وارد سایت شد نباید او را به موضوعی بیش از حد ترغیب کنید . تصور کنید که موضوع صفحه شما خرید گوشی آیفون 12 است ، هنگامی که کاربر وارد صفحه شد محتوای شما اینگونه است :
کاربر در این قسمت که هنوز سطر اول وب سایت نیز میباشد ، 4 بار کلمه آیفون 12 را مشاهده کرده است . بنظرتان کمی بیش از حد به کاربر فشار برای خرید وارد نشده است ؟ ممکن است یکی از عناوین ” مثل آیفون 12 ارزان شد ” برای او جذاب باشد اما بسیاری از عناوینی که در ابتدای صفحه هستند برای او جالب نیستند ، پس هدف ما یافتن همان یک عنوان جذاب و استفاده از آن در سایت و در بخشهای صحیح است تا کاربر را با آن ترغیب کنیم نه اینکه کلمات مشخصی را در همان اول سایت به شکل مرتب تکرار کنیم .
اگر تصمیم دارید تا درمورد تولید محتوای سایت خودتان یکبار برای همیشه بصورت اصولی و با خیالی آسوده تولید محتوا انجام دهید ، پیشنهاد میکنیم از دوره ارائه شده در بالا بنام ” شاهکار تولید محتوا ” حتما استفاده کنید . این دوره آموزشی برای تمامی دسته بندی وب سایتها به شکلی اصولی و دقیق ، سیرتاپیاز داستان را خدمتتان آموزش داده است .
طراحی بیش از حد ساده یا بیش از حد پیچیده
همانگونه که گفته شد تجربه کاربری در طراحی تمامی وب سایت بسیار مهم است . از این جهت باید قالب وب سایت نیز به شکلی باشد تا کاربر هنگام ورود به وب سایت ، اولا اینگونه تصور نکند که درسایت شما محتوایی مفید وجود ندارد و دوما اینگونه نباشد که اطلاع نداشته باشد به کدامین بخش از سایت باید مراجعه کرده و جواب پاسخ خود را در چه بخشی جستجو کند .
این موضوع نیز یکی از اشتباهات مهم در طراحی سایت است که امروزه بسیار مشاهده میکنیم . هنگام ورود به سایت ، به قدری تعدد منوها یا المانهای ابتدای سایت بسیار است که تنها 10 دقیقه باید صرف گشتن بین آنها نمود تا به هدف و مقصود خود رسید .
پس متناسب با کسبوکار خود و موضوع وب سایت سعی کنید تا در قدم اول ، دستهبندی های مهم و موضوعات اصلی را در اختیار کاربر قرار دهید و درنهایت به تدریج با رفتن به صفحات داخلی او را راهنمایی کنید . این خود یکی از تکنیکهای افزایش نرخ زمان حضور کاربر در سایت و چرخش او بین صفحات وب سایت است که موضوع بسیار چالش برانگیزی در طراحی قالب سایت و همچنین بخش بندی موضوعات مختلف در صفحات است .
استفاده از ویدیوهای زیاد در سایت
توجه داشته باشید که اگر سایت شما با محوریت یک سایت ارائه ویدیو فعالیت نمیکند پس باید درمورد ویدیوهایی که داخل سایت خودتان قرار میدهید به شکلی درست عمل کنید .
اولا اطلاع داشته باشید که ویدیو سبب بالا رفتن حجم صفحه شما و در تاخیر در بارگذاری آن خواهد شد و شما برای ایجاد یک محتوای مناسب ، لازم است تا از ویدیو تنها در بخشهایی که واقعا به وجود آن نیاز است ، استفاده کنید . در برخی از وبسایت ها حتی در بخشهایی که نیازی به تکمیل محتوا توسط ویدیو نیست ، بازهم یک ویدیو چند دقیقهای داخل صفحه وجود دارد که کمکی به تکمیل محتوای صفحه نکرده و صرفا چون مدیر سایت اینکونه تصور کرده است که استفاده از ویدیو برای سئو سایت ( افزایش رتبه سایت داخل گوگل ) تاثیر مثبت دارد ، داخل اکثر صفحات ویدیوهای باربط و بی ربط قرار داده است .
باتوجه به اینکه گوگل در سالهای اخیر ، سیاستهای خود در مورد وضعیت ایندکس کردن ویدیوهارا تغییر داده است لذا باید بدرستی درمورد آنها عمل کرد . اگر در این مورد نیاز به راهنمایی و مطالعه دقیق دارید میتوانید از مقاله بالا کمک بگیرید .
استفاده نکردن از فرم های سازمان سنجش در سایت
این تیتر خنده دار اما تامل برانگیز برای چیست ؟ فرم سازمان سنجش !! یکی دیگر از مواردی که امروزه نباید در سایتهای خودتان بعنوان یک اشتباه بزرگ انجام دهید ، استفاده و قراردادن فرمهایی است که اطلاعات درخواست شده در آنها بسیار زیاد است . برای مثال یکی از نمونههای ساده فرم ورود به سایت است . درحال حاضر سایتهای بزرگ و مجموعههایی که مخاطبین هدف برای آنها مهم است ، نهایت سادگی برای دسترسی کاربر را ایجاد میکنند که یکی از بخشها مربوط به فرم ورود و ثبت نام در سایت است .
اگر دقت کنید در فرمهای ورود و ثبتنام امروزه تنها شماره تماس درخواست میشود و کاربر پس از وارد کردن صحیح شماره تماس خود ، با دریافت یک کد تایید در تلفن همراه خود و احراز هویت فوری ، امکان استفاده از خدمات سایت را دارد . اما اکنون تصور کتید برای یک ثبت نام اولیه مواردی همچون نام ، نام خانوادگی ، نام پدر ، تاریخ تولد و … را از کاربر درخواست کنید ؟! سایت شما ثبت نام آزمونهای آزمایشی برای کنکور یا سنجش نیست پس نهایت سادگی را برای کاربران و مخاطبین خودتان ایجاد کنید تا درصورت تمایل خودشان بعدها از طریق بخش پروفایل وارد سایت شده و موارد مورد نیاز جهت خدمات بیشتر را تکمیل کنند .
برای نمونه اگر شما قصد دارید تا امکان افزودن کارت بانکی در سایت خودتان قرار دهید ، مخاطب را تنها زمانی ملزم به تکمیل اطلاعات شناسنامهای کنید که قصد استفاده از خدمات این بخش را دارد وبرای کسی که صرفا بازدید کننده است ، نیازی به دریافت چنین اطلاعاتی نیست . لذا سادگی در فرمهای سایت مثل فرم تماس و فرم دیدگاه و … را در الویت قرار دهید . در سایت های وردپرسی و داخل فرم ارسال دیدگاه ، فیلد وب سایت را حتما حذف کنید چراکه نه به آن نیازی دارید و نه اجازه دهید تا ناخواسته در قسمت دیدگاه سایت شما ، ایجاد بکلینکهای ناخواسته شود .
امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت
نقشه راه فرانت
اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید
اگر قصد دارید تا میانبر بزنید و یادگیری css را با یادگیری tailwind همزمان کنید که تایم یادگیری را بهینه نمائید ، پس در این مقاله همراه ما باشید تا یک مسیر روشن و درست خدمتتان معرفی کنیم !
انتخاب کننده marker چیست و برای چه مواردی کاربرد دارد ؟ تغییر آیتم های مارکر پیشفرض در لیست های غیرترتیبی به کمک Css !
با سلام . پاپ آپ که همیشه برای تبلیغات هست و در حال حاضر جز تبلیغ فایده ای نداره . برای شبکه های اجتماعی که مخصوصا ایرانی هم هستند چون حجم کاربران زیاده و مدت ماندگاری اونها در یک صفحه خیلی زیاده ، بسته شدن سریع پاپ آپ ها مشکل ساز نمیشه اما برای سایت های معتبر شما اصلا پاپ اپ نمی بینید . در مورد فلش پلیر هم با اومدن Html5 کلا جمع شده اما برخی سایت ها هنوز به Html5 مهاجرت نکردند و مجبورن استفاده کنند . در سئو فلش پلیر اصلا تایید شده نیست .