اصول طراحی سایت چیست؟ چه روش هایی برای طراحی سایت وجود دارد؟ سفر کاربر یعنی چی؟ UI و UX به چه معناست؟ تمام این ها سوالاتی هستند که هر کسی که بخواهد وبسایتی را طراحی کند، به ذهنش خطور میکند. دیدگاه های مختلفی برای طراحی سایت وجود دارد.
عده ای طراحی سایت را صرفا راه اندازی صفحات میدانند. عده ای دیگر جزییات بیشتری را میخواهند در نظر بگیرند. فرقی نمیکنه دیدگاه شما چه باشد، تنها چیزی که باید در ذهن خود داشته باشید این است که وبسایت شما باید برای کاربر آسان باشد. قانون Easy-to-Use یا User Friendly بودن یک وبسایت دقیقا به اصول طراحی یک وبسایت اشاره میکند. در این مقاله سعی میکنیم اصول طراحی وبسایت را به طور رایگان به شما بگوییم.
تا آخر مقاله همراه ما باشید.
اصول طراحی سایت:
هر سایتی یک هدف خاصی پشتش دارد. بسته به نوع سایتی که دارید طراحی میکنید، باید اصول طراحی آن را بیابید. برای این کار شما تنها باید به نمونه های مشابه آن دقت کنید. به عنوان مثال، چندی پیش یک وبسایت فروشگاهی خارجی به ما سپرده شد. ما برای طراحی این وبسایت، نیاز به این داشتیم تا با ذهنیت افرادی که در آن کشور با یک وبسایت کار میکنند آشنا شویم.
کاری که ما کردیم این بود که شروع کردیم به نگاه کردن به وبسایت های رغیب. متوجه شدیم که کاربران اینگونه وبسایت ها با اصول طراحی خاصی آشنا هستند.
ساختار هدر:
اولین چیزی که متوجه شدیم و به اصول طراحی آن وبسایت بردیم، ساختار هدر وبسایت بود. فهمیدیم که در نگاه اول باید هدر دارای اطلاعاتی مانند دسته بندی محصولات مورد نظر باشد. به عنوان مثال متوجه شدیم که یخچال ها باید در سه دسته قرار بگیرند و این نیاز به یک مگا منو داشت. سپس متوجه شدیم که اکثر این کاربران نیازی به عضویت ندارند، هرچند که دکمه عضویت در بالای هدر وبسایت های رغیب قرار داشت، ما هم میبایست این دکمه را در بالا قرار میدادیم.
ساختار صفحه اصلی:
با نگاه کردن به صفحات اصلی این وبسایت ها، متوجه شدیم که ابتدا یک معرفی کوتاه از کسب و کار را نوشته بودند. سپس برند هایی را که میخواستند تا مشتری بداند را گذاشته بودند. در ادامه اکثر این وبسایت ها محبوب ترین محصولات خود را گذاشته بودند. در نهایت یک توضیحی از کل کسب و کار قرار داده بودند.
ساختار صفحات محصول:
صفحات محصول بسیار برای ما جالب بودند. ما معمولا در ایران صفحات محصولات را خیلی خاص و با خلاقیت طراحی میکنیم. در صورتی که در وبسایت هایی که بررسی کردیم، دیدیم که صرفا صفحه محصول شامل عکس محصول، توضیحات و دکمه خرید محصول قرار داده شده بود. آن هم به صورت کاملا ساده و بدون اشکال عجیب و قریب! پس ما هم میبایست چنین صفحاتی را برای وبسایت مقصد درست میکردیم.
ساختار صفحات پرداخت و سبد خرید:
تا به اینجا که اصول طراحی وبسایت های این چنینی تفاوت های جالبی با وبسایت های ایرانی داشت! برخلاف نظر ما، تمام وبسایت ها از ساختار های بسیار ساده ای استفاده کرده بودند. این ساختار ها شامل هیچگونه المان های گرافیکی خاص نبود و صرفا یک صفحه وب قابل فهم و آسان بود. در صفحات پرداخت نیز صرفا جداول محصولات در سبد خرید و فاکتور خرید وجود داشت که صراحتا نتیجه خرید را با قیمت کل و قیمت هر کالا نشان میداد.
از این تجربه چه چیزی یاد میگیریم؟
اصول طراحی وبسایت برای وبسایت ها بسیار متفاوت میتواند باشد. اما نکته قابل تامل، سادگی و کارآمدی این وبسایت ها بود. در کشور ما ایران، وبسایت ها را به صورت عجیبی زیبا خلق میکنند. درسته که زیبایی چشم نواز است، اما اگر زیبایی باعث گیجی شود، عملا هیچ سودی برای یک وبسایت ندارد.
پس اولین درسی که یاد گرفتیم این بود : سادگی = کارآمدی
رنگ ها صحبت میکنند!
در اصول طراحی وبسایت یک نکته را نباید فراموش کرد آن هم رنگ ها هستند. رنگ ها نشان دهنده این هستند برند شما چه رنگیست.
در یکی از اصول بازاریابی که به آن بازاریابی حسی میگویند، چشم ما نقش مهمی دارد. رنگ ها را تصور کنید. الان من میخواهم از شما تعدادی سوال بپرسم. میخواهم چند تا از وبسایت هایی را که همه دیدند را با یکدیگر تصور کنیم تا اهمیت رنگ ها را بهتر درک کنیم.
- دیجیکالا چه رنگیست؟
- علی بابا چه رنگیست؟
- دیوار چه رنگیست؟
- فیسبوک چه رنگیست؟
- یوتیوب چطور؟
همانطور که میبینید، وقتی به هرکدام از این وبسایت ها فکر میکنیم، رنگ برند آن ها را نیز به یاد میاوریم. آیا تا به حال به این نکته دقت کرده اید که چرا به عنوان مثال ما در یوتیوب رنگ قالب را قرمز میبینیم؟ این چه تاثیری دارد؟
جواب ساده به این سوال:
فرض کنید شما وقتی دیوار را سرچ میکنید در یک وبسایت دیگری که اتفاقا هم اسم آن هست وارد شوید. اتفاقی که میافتد، اگر آن وبسایت از رنگ خنثی خاکستری و قرمز دیوار استفاده نکرده باشد، شما به راحتی متوجه تفاوت این وبسایت با وبسایت اصلی میشوید. این تنها یک جواب ساده بود.
پس یکی اصول های طراحی وبسایت داشتن یک رنگ سازمانی است.
اصول طراحی سایت: دکمه های آن!
دکمه ها در وبسایت، هرچند که شاید کاربران عادی متوجه نشوند، دارای کاربرد بسیار مهمی هستند. اهمیت این دکمه ها به این است که نشان دعوت به عمل یا Call to Action هستند. شما با دکمه ها به کاربر میگویید که کلیک کنند، خرید کنند، اطلاعات بیشتری بخوانند و …
در این حالت، دکمه ها باید شکل و شمایلی متفاوت از آن چه که ساختار کل وبسایت دارد، داشته باشند. اما این دلیل آن نیست که شما باید دکمه های رنگارنگی را در وبسایت قرار دهید.
اصول طراحی سایت ها به ما اجازه میدهد تا حداکثر از 3 مدل دکمه در ساختار های سایت استفاده کنیم. دکمه ها کاربرد های زیادی دارند. برخی از این دکمه ها برای Call to Action هستند، برخی برای هشدار و برخی برای اطلاعات هستند. البته شاید بتوان دسته بندی بیشتری را به کاربرد دکمه ها اضافه کرد.
اصول طراحی وبسایت: عکس ها!
عکس ها قسمت زیباسازی وبسایت ها هستند. شما میتوانید با استفاده از عکس های زیبا در داخل اصول طراحی سایت خود، جلوه سایت خود را زیباتر کنید. اما تمام عکس های سایت شما باید ساختاری مشابه داشته باشند. به عنوان مثال، به یاد محصولات دیجیکالا بیافتید.
ساختار این عکس ها به چه صورت است؟ کاملا درسته! پشت زمینه سفید با عکس محصول. حالا تصور کنید که هر محصول یک تصویر و رنگ پشت زمینه خاصی داشت. چشم شما هیچ علاقه ای به نگاه کردن به این وبسایت نشان نمیداد و شما به محض ورود، دچار گیجی و بستن وبسایت میشدید.
اصول طراحی سایت: ساختار بندی یا Layout:
ساختار بندی یا Layout یکی دیگر از موضوعات مهم اصول طراحی سایت است. بیاید این موضوع را با یک مثال توضیح دهیم. همین صفحه مقاله وبسایت ما را در نظر بگیرید.
همانطور که میبینید، شما در ابتدای صفحه، با عنوان مقاله و عکس مقاله روبرو میشوید. در ادامه با اطلاعات تکمیلی آن و در نهایت با متن مقاله. در آخر صفحه هم که بخش دیدگاه قرار دارد.
حالا فرض کنید اگر ساختاربندی این صفحه ما به صورت زیر بود:
ابتدا دیدگاه ها قرار داده میشد، سپس عکس مقاله. بعد از مقاله اطلاعات تکمیلی و در نهایت خود مقاله. نظرتون چیه؟ خوب بود یا گیج کننده؟
اصول طراحی سایت: سفر کاربر چیست؟
شاید این عبارت را قبلا شنیده باشید. سفر کاربر جزء مهم ترین بخش های برنامه ریزی سایت است. شما باید در وبسایت خود تعیین کنید که کاربر از کجا شروع کند و به کجا برود و در نهایت چه عملی انجام دهد. به این پروسه سفر کاربر یا User’s Journey میگویند.
به عنوان مثال، ما میخواهیم که محصولی را در وبسایت خود به کاربر بفروشیم. پس یک مسیر خوب برای کاربر میتواند به صورت زیر باشد:
- کاربر بتواند محصول خود را پیدا کند
- سپس او بتواند اطلاعات محصول را به راحتی بخواند و عکس های آن را ببیند
- احتمالا کاربر ما نیاز دارد تا دیدگاه سایر کسانی که محصول را خریده اند را نیز بخواند، پس باید یک قسمت دیدگاه ها وجود داشته باشد.
- کاربر ما متقاعد شده، حالا باید به راحتی دکمه افزودن به خرید را پیدا کند. این دکمه میتواند در پایین صفحه به صورت شناور قرار داده شده باشد یا یک جای صفحه به صورت کاملا واضح دیده شود
- کاربر با کلیک بر روی دکمه سبد خرید، باید بتواند به صفحه مد نظر برود. در آن صفحه قرار است جزییات سفارش خود را ببیند.
- کاربر میداند که برای محصولی که خریداری میکند، باید آدرس محل سکونت خود را بدهد تا بسته پستی به دستش برسد. پس این بخش باید به خوبی مشخص باشد.
- کاربر میخواهد پرداخت نهایی را انجام دهد. پس باید دکمه پرداخت را به راحتی پیدا کند.
- به سرعت بالایی برخوردار باشد و برای برسی این مورد میتوانید از PageSpeed Insights استفاده کنید.
احتمالا هرگونه خلاقیت عجیب در روند بالا دچار گیج شدن کاربر شده و در نهایت پروسه خرید با شکست مواجه میشود.
کلام آخر:
اصول طراحی سایت یکی از مهمترین بخش هایی است که عزیزانی که میخواهند Front-end وبسایت را طراحی کنند باید مد نظر داشته باشند. تمام این کار ها فقط و فقط ساده باشد تا کاربر بتواند به راحتی کار خود را انجام دهد.
