Skip links

یکپارچگی طراحی سایت – چگونگی برقراری تطابق و هماهنگی

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

برخی از طراحان سایت به عناصری مثل سربرگ (header)، منو، دکمه‎ها توجه نمی‎کنند. در طراحی سایت این اجزا باید انسجام و یکپارچگی وجود داشته باشد تا دسترسی و استفاده از سایت برای کاربر ساده‌تر باشد. مواردی مانند هدر صفحه، navigation ، menus ، CTA button و … فهرستی که بی پایان به نظر می رسند. 
در صورتی که طراحان سایت ها با برقراری ارتباط بین عوامل صفحه به سادگی می توانند مدت زمان حضور کاربران در سایت را افزایش دهند. طراحی سایت ساده، زیبا و کاربردی به کاربران احساس اعتماد بخشیده و به آنها اجازه می دهد تا ارتباط سریعتری را با وب سایت شما برقرار کنند.

طراحی سایت مطابق با انتظارات کاربران

بسیاری از کاربران انتظار دارند که ویژگی‌های مشخص در تمامی صفحات وب یکسان باشد. اسکورول ها به صورت عمومی کار کنند، لینک ها قابل کلیک باشند و navigation ها هم از قسمت سمت راست بالای صفحه بارگزاری شوند و قرارگیری منو در بالای صفحه و …
اما چگونگی برآورد کردن انتظارات کاربران کاملا بستگی به شما دارد. اینکه چه طراحی را می خواهید انتخاب کنید:  طراحی سایت  یکپارچه یا طراحی سایت یکنواخت؟
برای بررسی این موضوع می توانید به سایت  BodyBuilding.com مراجعه کنید.

این سایت ورودی به صفحات مختلف مانند فروشگاه های الکترونیک، راهنماهای کمک آنلاین و همینطور وب سایت های گفتگو محسوب می شود. تمامی این وب سایت ها دارای طراحی و  navigation مشابهی هستند که با تمامی سایت ها سازگاری دارند.
کاربران به دنبال طراحی سایت های خاص و  اعجاب انگیز نیستند بلکه به دنبال خدمت یا محصولی هستند که به همان بهانه نیز وارد سایت شما شده اند. آنها به دنبال دست یافتن به ساده ترین نتیجه از جستجوهایشان هستند. طراحی سایت مطابق با میل کاربران در رسیدن به این هدف بسیار سودمند است.
خود را به جای کاربران تان قرار داده و به جای آنها فکر کنید. چگونه یک سایت می تواند شما را به مطالعه مضاعف تشویق کند؟ یا اینکه چطور یک فروشگاه آنلاین می تواند شما را به خرید ترغیب کند؟
به این سوالات همزمان که طرح های خود را پیش می برید، فکر کرده و پاسخ دهید. چه مواردی باید در صفحه وجود داشته باشند تا این تفکر به کاربران تان منتقل شود؟
برای مثال صفحه خانگی وب‌سایت Sketch یکی از صفحاتی است که انسجام در آن به نحو مطلوبی رعایت شده است. این صفحه وب دارای دو CTA (Call to Action) است. یکی برای دانلود دمو و دیگری برای خرید

بازدیدکننده جدید در نگاه اول عملکرد کل سایت را می ببیند و با منوهای آن آشنا می‌شود، اما فردی که به‌عنوان کاربر وب‌سایت وارد سایت می شود مایل است دسترسی به بخش پشتیبانی آسان و سریع باشد. در منوی هدایتگر این وب‌سایت تمامی این امکانات چه برای کاربر جدید و چه برای کاربر تازه‌وارد قرار داده‌شده است
در ابتدا بدانید که هدف بازدیدکننده از مراجعه به وب‌سایت چیست. اگر این هدف مشخص باشد بهتر می‌توانید انسجام در طراحی سایت را همگام با انتظارات کاربر ایجاد نمایید.
نکته دیگری که باید مورد توجه قرار داد، طراحی سایت مجدد و به روزسانی آن است. سایت  Reddit را در نظر بگیرید که بیش از ١۰ سال از فعالیت آن می گذرد. در این مدت Layout آن دچار تغییراتی شده اما این تغییرات محدود و جزیی بوده اند به طوری که امروز این طراحی سایت بسیار شبیه به طراحی سال ٢۰۰۵ آن  است.

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

طراحی سایت و جلوه های بصری

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

منوهای وب ‌سایت P’unk Avenue بسیار دقیق و منحصر به ‌فرد طراحی شده اند. در منوهای این سایت توضیحات جزئی و کاربردی در خصوص محتوای هر صفحه ارائه‌ شده است.
توضیحاتی که به آنها اشاره شد در صفحه نمایش‌های بزرگ دارای جزییات بیشتری هستند اما اگر همین صفحات بر روی صفحه‌ نمایش‌های کوچک‌تر  مانند تبلت یا موبایل باز شوند، در یک منوی همبرگری جمع خواهند شد. این موضوع می‌تواند برای طراحی سایت‌ ها به‌ منظور سازگاری با صفحه ‌نمایش‌های کوچک مورد توجه وبمستر ها قرار گیرد.
وب‌سایت خبری  Guardian  جزو وب سایت هایی است که دارای منوهای بسیاری است و در هر بخش از آن نیز زیر منویی دیده می شود. بنابراین می‌توان نتیجه گرفت در مواقعی که موضوعات زیادی در منوی سایت وجود دارد، بهتر است از زیر منوها استفاده شود.

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

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

تکرار سبک  layout

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

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

از این روش می‌توان برای طراحی صفحات نیز استفاده کرد. یکی از وب‌ سایت‌هایی که از روش تکرار سبک برای طراحی صفحات استفاده کرده است، وب‌سایت Algolia است.

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

هماهنگی با برند تجاری

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

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

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

کلام آخر

این نکته کلیدی را فراموش نکنید که تمامی کاربران به وب‌سایت‌هایی علاقه مند هستند که از یکپارچگی درونی برخوردار هستند.

Leave a comment

این وب سایت از کوکی ها برای بهبود تجربه وب شما استفاده می کند.
خانه
فروشگاه
مقالات
جست و جو
Explore
Drag