راهنمایی طراحی سایت + نکاتی برای حرفه ای شدن

وقتی نوبت به طراحی یا بازطراحی یک وب سایت می رسد، به راحتی می توان از زیبایی شناسی استفاده کرد. آیا آن سایه آبی درست به نظر می رسد؟ آیا لوگو باید در سمت راست صفحه باشد یا سمت چپ؟ اگر یک GIF متحرک غول پیکر را در وسط صفحه قرار دهیم چه؟

با این حال، در دنیایی که مردم بیش از 1.8 میلیارد وب‌سایت دارند که به طور بالقوه می‌توانند روی آن‌ها وارد شوند، باید مطمئن شوید که وب‌سایت شما فقط یک چهره زیبا نیست. باید برای قابلیت استفاده، استفاده از وب سایت شما و تجربه کاربری (UX) و لذت تعامل با وب سایت شما طراحی شود.

اکنون، شما می‌توانید سال‌ها صرف مطالعه نکات و نکات این رشته‌ها کنید، اما برای اینکه به شما یک نقطه جهش بدهیم، فهرستی از دستورالعمل‌های اساسی و بهترین شیوه‌هایی که می‌توانید در طراحی مجدد وب‌سایت یا وب‌سایت بعدی خود اعمال کنید، گردآوری کرده‌ایم. راه اندازی. سپس، ما 10 ویژگی را که برای عملی کردن این توصیه‌ها در سایت خود نیاز دارید، بررسی می‌کنیم. شیرجه بزنیم

1. سادگی

در حالی که ظاهر وب سایت شما مطمئناً مهم است، اکثر مردم به سایت شما نمی آیند تا میزان نرمی طراحی را ارزیابی کنند. آن‌ها می‌خواهند عملی را انجام دهند یا اطلاعات خاصی را پیدا کنند.

بنابراین، عناصر طراحی غیرضروری (یعنی آنهایی که هیچ هدف کاربردی ندارند) فقط باعث می‌شود که بازدیدکنندگان نتوانند آنچه را که می‌خواهند انجام دهند را به انجام برسانند و سخت‌تر کنند.

از دیدگاه کاربری و UX، سادگی بهترین دوست شماست. اگر تمام عناصر صفحه لازم را دارید، ساده کردن آن سخت است. شما می توانید این اصل را به اشکال مختلف به کار ببرید، مانند:

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

2. سلسله مراتب بصری

سلسله مراتب بصری که کاملاً با اصل سادگی گره خورده است به معنای مرتب کردن و سازماندهی عناصر وب سایت است تا بازدیدکنندگان به طور طبیعی ابتدا به سمت مهم ترین عناصر جذب شوند.

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

در مثال زیر از Spotify، می‌توانید ببینید که عنوان اصلی “دریافت 3 ماه Premium رایگان” با اندازه و موقعیت صفحه در بالای سلسله مراتب بصری قرار دارد. قبل از هر چیز چشم شما را به ماموریت آنها جلب می کند. پس از آن، CTA “دریافت 3 ماه رایگان” دنبال می‌شود که اقدامی را درخواست می‌کند. کاربران می توانند روی این CTA کلیک کنند یا موارد منوی بالا را برای اقدامات بیشتر اسکن کنند.

3. قابلیت کشتیرانی

برنامه ریزی برای ناوبری بصری در سایت شما برای کمک به بازدیدکنندگان در یافتن آنچه به دنبال آن هستند بسیار مهم است. در حالت ایده‌آل، یک بازدیدکننده باید در سایت شما قرار بگیرد و نیازی نباشد که به طور گسترده در مورد اینکه کجا کلیک کنید بعد فکر کند. حرکت از نقطه A به نقطه B باید تا حد امکان بدون اصطکاک باشد.

در اینجا چند نکته برای بهینه سازی ناوبری سایت شما وجود دارد:

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

یک اشاره دیگر: هنگامی که متوجه شدید ناوبری اصلی (بالا) سایت شما چیست، آن را ثابت نگه دارید. برچسب‌ها و مکان پیمایش شما باید در هر صفحه ثابت بماند.

4. سازگاری

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

این بدان معنا نیست که هر صفحه باید از یک طرح پیروی کند. در عوض، طرح‌بندی‌های مختلفی را برای انواع خاصی از صفحات (به عنوان مثال، صفحات فرود، صفحات اطلاعاتی و غیره) ایجاد کنید. با استفاده مداوم از این طرح‌بندی‌ها، درک نوع اطلاعاتی که احتمالاً در یک صفحه خاص پیدا می‌کنند را برای بازدیدکنندگان آسان‌تر می‌کنید.

در مثال زیر، می‌توانید ببینید که Airbnb از طرح‌بندی یکسانی برای همه صفحات «راهنما» خود استفاده می‌کند، که یک روش معمول است. تصور کنید اگر هر صفحه «راهنما» طرح‌بندی منحصربه‌فرد خود را داشته باشد، از دیدگاه یک بازدیدکننده چگونه خواهد بود. احتمالاً شانه بالا انداختن زیادی وجود خواهد داشت.

5. پاسخگویی

طبق آمار Statista، 48 درصد از بازدیدهای جهانی صفحه از دستگاه های تلفن همراه مانند گوشی های هوشمند و تبلت ها بوده است. و طبق تحقیقات ما، 93٪ از مردم یک وب سایت را به دلیل عدم نمایش درست در دستگاه خود ترک کرده اند.

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

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

در نهایت، ارائه یک تجربه عالی در دستگاه‌های مختلف مهم‌تر از یکسان به نظر رسیدن آن دستگاه‌ها است.

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

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

6. قابلیت دسترسی

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

مانند پاسخ گویی، دسترسی به کل سایت شما اعمال می شود: ساختار، قالب صفحه، تصاویر و محتوای نوشتاری و بصری. دستورالعمل‌های دسترسی به محتوای وب (WCAG)، که توسط ابتکار دسترسی به وب و کنسرسیوم وب جهانی توسعه یافته است، دستورالعمل‌هایی را برای دسترسی به وب تنظیم می‌کند. در یک مفهوم گسترده، این دستورالعمل ها بیان می کنند که وب سایت ها باید:

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

7. قراردادی بودن

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

قرار دادن پیمایش اصلی در بالای (یا سمت چپ) یک صفحه.
قرار دادن لوگو در بالا سمت چپ (یا مرکز) یک صفحه.
لوگو را قابل کلیک می کند، بنابراین همیشه بازدیدکننده را به صفحه اصلی باز می گرداند.
داشتن پیوندها و دکمه‌هایی که وقتی روی آن‌ها قرار می‌گیرید، رنگ/ظاهر تغییر می‌کنند.
استفاده از نماد سبد خرید در یک سایت تجارت الکترونیک. این نماد همچنین دارای یک نشان شماره است که نشان دهنده تعداد اقلام در سبد خرید است.
اطمینان از اینکه اسلایدرهای تصویر دارای دکمه هایی هستند که کاربران می توانند برای چرخاندن دستی اسلایدها کلیک کنند.
در حالی که برخی ممکن است به خاطر منحصر به فرد بودن آنها را از پنجره بیرون بیاندازند، این یک اشتباه است. هنوز فضای زیادی برای خلاقیت در محدودیت های متعارف وب وجود دارد.

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

به همین ترتیب، می‌توانید تجربه‌ای به یاد ماندنی ایجاد کنید و در عین حال انتظارات کاربر را برآورده کنید. اگر آنچه را که کاربران پیش بینی می کنند نقض کنید، ممکن است از سایت شما احساس ناراحتی و یا حتی ناامیدی کنند.

8. اعتبار

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

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

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

9. کاربر محوری

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

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

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

در اینجا چند ابزار تست کاربر برای شروع کار آورده شده است:

Website Grader: ابزار رایگان ما وب سایت شما را بر اساس چندین عامل ارزیابی می کند: تلفن همراه، طراحی، عملکرد، SEO و امنیت. سپس پیشنهادات مناسبی برای بهبود ارائه می دهد. می توانید در پست وبلاگ اختصاصی ما درباره Website Grader اطلاعات بیشتری کسب کنید.
Crazy Egg: چندین دامنه را در یک حساب ردیابی کنید و با استفاده از چهار ابزار مختلف اطلاعاتی – نقشه حرارتی، نقشه اسکرول، روکش و کنفتی، اطلاعاتی درباره عملکرد سایت خود کشف کنید.
Loop11: از این ابزار برای ایجاد آسان تست‌های قابلیت استفاده استفاده کنید – حتی اگر تجربه HTML ندارید.

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