بایدها و نبایدها در طراحی سایت

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

 

12 "باید" در طراحی وب سایت

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

1- ثبات رابط کاربری

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

 

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


2- طراحی آسان برای استفاده از نویگیشن

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

3- تغییر رنگ لینک های بازدید شده

پیوند ها نقش مهمی در فرایند پیمایش بازی می کنند. وقتی پیوند های بازدید شده تغییر رنگ نمی دهند، کاربران می توانند ناخواسته همان صفحات را بارها و بارها باز کنند. اگر کاربر بداند در گذشته یا حال چه لینک هایی را سر زده است بهتر می تواند تصمیم بگیرد سراغ چه لینک های دیگری برود.

 


4- آسان سازی پیمایش سایت

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

 

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

 

5- جدی گرفتن مطالب وب سایت

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

6- بررسی خطا های وب سایت

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

7- کمترین تعداد گزینه

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


 

8. درگیر کردن کاربران با scrolling

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


9- عنوان هر گزینه، مطابق با کاری که انجام می دهد

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

 

 


10- کارها را به گونه ای ایجاد کنید که عمل می کنند

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

 

11- انعطاف پذیری سایت

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

 

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

12- طراحی خود را تست کنید

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

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

به طور کلی مجموعه کارهایی که باید انجام شود به چند دسته تقسیم میشود:
*انتخاب یک CMS مناسب
*انتخاب یک فریم ورک CSS  
*استفاده از تجربه موفق و برای پروژه های جدید
 
CMSها نقش پنهانی در سایت ها دارند. در این مقاله سعی بر این شد که به بخش بصری یا UI در طراحی سایت بپردازم. این بخش که به Frontend  هم معروف است نقش ارتباط با کاربر را دارد و برنامه های پیچیده و تودرتو را برای کاربر به شکلی زیبا و مرتب نمایش می دهد. این بخش در مرورگرهای مختلف به طور یکسان دیده نمی شود؛مثلا در مرورگر اینترنت اکسپلورر قبل از 9 IE اکثر افکت ها اجرا نمی شوند و با Html 5 , css3  به خوبی کار نمی کنند. برای حل این مشکل ابزارهایی مانند Gulp  و Rework  تولید شده اند. حتی آزمایشگاه های تست و تنظیم مانند Babel  یا Kohana عملکرد کدهای شما را تضمین می کنند و هر چند که معمولا در پروژه های معمولی این همه دقت به کار برده نمی شود و معمولا طبق یک چارچوب مشخص می توان با خیال راحت طراحی را انجام داد. مثلا Bootstrap به عنوان یک چارچوب استاندارد است که پروژه را در یک قالب مشخص قرار می دهد و امکانات واکنش گرایی را به سایت اضافه می کند.
 
بعد از پایان برنامه نویسی با فایل های ریز و درشتی از js ,css روبرو می شویم که در هنگام بالا آمدن سایت مجبورند لود شوند و از نظر تکنیکی اتفاق جالبی نیست. از نظر SEO  هم اگر فایل های js,css در یک فایل Minify شوند بهتر است و موجب افزایش سرعت لود و پردازش می شود. در این راستا روش های مختلفی وجود دارد؛مثلا در وردپرس از افزونه Better WordPress Minify میتوان استفاده کرد اما در روش دیگر که خیلی حرفه ای تر است از Gulp استفاده می شود.
 
انتخاب رنگ ها از اهمیت بسیار بالایی برخوردار است. در سایت های رسمی چند رنگ که در طیف مشخصی قرار دارند می توانند زیبایی خیره کننده ای را ایجاد کنند. متاسفانه در این صنعت در ایران از شیوه های سنتی بسیار استفاده می شود و این باعث می شود که خروجی چندان جالبی از پوسته یا Templete دیده نمی شود. بهتر است از فرد با تجربه ای که با گرافیک و طراحی سروکار دارد استفاده شود تا چیدمان و انتخاب رنگ ها به خوبی انتخاب شوند.
 
تست کیفیت در سایت طراحی شده مهم است استفاده از ابزارهای رایگان مانند html validator یا css validator به شما در بازبینی و بررسی خطا ها کمک می کنند. این خطا ها شاید در ظاهر سایت دیده نمی شود اما ممکن است در برخی از مرورگرها نادیده گرفته نشوند و قسمت حاوی خطا به کلی بهم ریخته دیده شود. از نظر SEO  هم نداشتن این قبیل خطاها از اهمیت بالایی برخوردار است.
 
استفاده بهینه از ابزارها باید به خوبی در نظر گرفته شود. فرض کنید پروژه طراحی سایت اگر قرار است فلان افکت ها و فلان ابزارها را داشته باشد اصلا این به معنی سنگین شدن نیست، استفاده بهینه از ابزارها نه تنها موجب کاهش کیفیت نمی شود بلکه موجب بالا رفتن کارایی و قابلیت ها می شود و از نظر کاربران خوشایند و باارزش است.
 
در پایان استفاده از تجربه های موفق می تواند نمونه کارهای درخشانی را برای شما خلق کند.
 

    مطالبی که به شما پیشنهاد میشود