ميهن مگ

نکات مهم آناتومی وبسایت

6 روز پیش

نکات مهم آناتومی وبسایت

مطالبی که هر‌ طراح باید در‌ رابطه با آناتومی وبسایت بداند

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

قدم اول: ابتدا درباره‌ی سیر حرکت کاربر در صفحات فکر‌ کنید

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

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

 

 

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

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

مسیر‌یابی یا Navigation نیز یکی از مفاهیم کلیدی در طراحی است، هرچقدر هم که صفحات زیبا باشند اگر کاربر نتواند مسیرمورد نظرش را براحتی پیدا‌کند زحمت شما بی‍‌‍فایده خواهدبود.

 سه ویژگی اصلی مسیریابی مطلوب:

  1. سادگی
  2. شفافیت
  3. سازگاری

 

 

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

قدم دوم: استفاده صحیح از سلسله‌‌ مراتب بصری

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

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

 

 طرح متناسب با اسکن چشمی انسان

انسان برای اسکن مطالب از دو الگوی کلی استفاده می‌کند:

  1. الگوی به شکلF
  2. الگوی به شکلZ

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

دراینجا باید اشاره کنیم که گروه نیلسن-نورمن، که اولین‌بار در سال ۲۰۰۶ این الگو را کشف کردند، اخیرا مطالعات خود را بازبینی کرده و برخی از تصورات اشتباه دررابطه با آن را آشکار ساخته‌اند؛ الگویF برای کاربران و نیز کسب‌و‌کارها مناسب نیست و بهتر است از آن پرهیز شود.

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

چند روش برای هدایت بازدیدکنندگان به سوی مطالب مورد‌نظر:

  • قرار دادن مهمترین مفاهیم در دو پاراگراف اول
  • استفاده صحیح از هدینگ و ساب‌هدینگ ها
  • نمایش کلمات و اصطلاحات مهم با فونت متفاوت
  • گروه‌بندی مطالب مرتبط به هم
  • استفاده‌ی به‌موقع و مناسب از عددگذاری‌ها و بیان موردی مطالب

 

 

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

 

اولویت بندی بصری عناصر

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

 

مطالب مرتبط :

 

  1. اندازه

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

 

 

  1. رنگ

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

 

 

  1. قالب یا Layout

قالب‌بندی صحیح می‌تواند بازدیدکنندگان را در صفحات درگیر‌کرده و آنها را به سمت مهمترین مطالب هدایت کند.

 

 

  1. فضای خالی

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

 

 

  1. استایل

استفاده از یک استایل متناسب با برند، مسیری مناسب برای ایجاد ارتباط با کاربر و انتقال موثر پیام مورد‌نظر فراهم می‌کند.

 

 

قانون سه‌بخشی را پیاده کنید

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

 

 

قدم سوم: بر کلید CAT یا دعوت به انجام کار تمرکز کنید

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

نکاتی برای طراحی کلید‌های CAT

باید این کلیدها قابل کلیک باشند

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

 

 

 

برچسب گذاری واضح کلیدها

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

 

 

مهمترین CTA ها را هایلایت کنید

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

مطالب مرتبط :

 

 

لطفا امتیاز دهید
0
برچسب ها :

دیدگاه شما

پانزده − سیزده =

بدون دیدگاه