چه چیزی یک ظاهر تازه را به سبک حرفه‌ای طراحی سایت تبدیل می‌کند؟ پاسخ، هماهنگی انتخاب‌های بصری با محتوای واقعی و کاری است که مخاطب باید انجام دهد، نه پیروی از جلوه‌های پرطرفدار. سبک بصری (Visual Style) یعنی مجموعه تصمیم‌های تکرارشونده درباره رنگ، حروف، تصویر و چیدمان.
در ارزیابی Iran Designer نیز بهتر است «جدید» را به معنای مناسب‌بودن برای نیاز فعلی کسب‌وکار بخوانیم، نه صرفاً متفاوت‌بودن با نسخه قبلی. یک سایت خلوت با متن ناخوانا همچنان مسئله دارد؛ سایتی با ظاهر آشنا، اگر انتخاب را روشن کند و قابل نگهداری باشد، انتخاب قابل دفاع‌تری است.
ظاهر را در برابر وظیفه صفحه بسنجید
سلسله‌مراتب بصری (Visual Hierarchy) یعنی هدایت ترتیب توجه مخاطب با اندازه، جایگاه و تفاوت ظاهری عناصر. برای نمونه، در صفحه معرفی تجهیزات صنعتی، نام محصول و کاربرد آن باید پیش از تزئینات دیده شوند. اگر تصویر بزرگ صفحه توجه را می‌گیرد اما تشخیص کاربرد محصول دشوار است، وزن بصری عناصر با وظیفه صفحه هماهنگ نیست.
کنتراست (Contrast) یعنی تفاوت روشنایی دو سطح کنار هم. برای متن معمولی، حداقل نسبت کنتراست در سطح AA استاندارد WCAG برابر ۴٫۵ به ۱ است. اما رنگ تنها معیار نیست؛ پیوند و پیام خطای فرم باید بدون اتکا به رنگ هم تشخیص‌پذیر باشند، مثلاً با زیرخط پیوند و توضیح نوشتاری خطا.
در سفارش طراحی وب‌سایت، این معیارها را به مشاهده تبدیل کنید: مخاطب باید موضوع صفحه را تشخیص دهد، متن را بخواند و مسیر ارتباط را پیدا کند. زیبایی‌ای که یکی از این کارها را دشوار کند، هزینه استفاده دارد؛ حتی اگر در یک تصویر ثابت چشمگیر باشد.
سه زبان بصری برای سه نوع پیام
رویکرد محتوایی یعنی چیدمانی که خواندن و فهم استدلال را در اولویت می‌گذارد. عنوان‌های روشن، عرض مناسب سطر و فاصله میان بندها ابزارهای اصلی آن هستند. این انتخاب برای توضیح خدمات پیچیده مناسب است، اما بدون تنوع سنجیده در تصویر و ساختار، صفحه به توده‌ای از متن تبدیل می‌شود.
رویکرد تصویرمحور یعنی انتقال بخش اصلی پیام با عکس، تصویرسازی یا نمایش تصویری محصول. مزیت آن زمانی معنا دارد که تصویر، اطلاعات بدهد؛ مثلاً جنس سطح یا جزئیات ساخت را نشان دهد. تصاویر تزئینی نامرتبط فقط فضای صفحه را اشغال می‌کنند و بار آماده‌سازی محتوا را بالا می‌برند.
رویکرد شبکه‌ای یعنی سازمان‌دادن محتوا در واحدهای تکرارشونده با روابط منظم. این روش مقایسه خدمات یا محصولات هم‌نوع را آسان می‌کند، به شرط آنکه اطلاعات هم‌جنس در جای مشابه بنشینند. اگر هر واحد داده متفاوتی داشته باشد، نظم ظاهری جای نظم معنایی را می‌گیرد.
این رویکردها رقیب مطلق نیستند. یک سایت می‌تواند صفحه معرفی تصویرمحور و صفحه راهنمای محتوایی داشته باشد؛ انتخاب اصلی، تعیین اولویت هر صفحه است.
|
رویکرد |
کار مناسب |
هزینه یا خطر |
آزمون پذیرش |
|
محتوایی |
توضیح و استدلال |
انباشت متن بدون تفکیک |
یافتن پاسخ میان بندها |
|
تصویرمحور |
نمایش ویژگی دیدنی |
وابستگی به تصاویر مناسب |
فهم ویژگی از تصویر |
|
شبکه‌ای |
مقایسه گزینه‌های مشابه |
یک‌شکل‌کردن داده‌های متفاوت |
مقایسه اطلاعات هم‌جنس |
تناسب سبک را از نوع تصمیم مخاطب بفهمید
اگر مخاطب پیش از تماس باید تخصص، محدوده خدمت و شرایط همکاری را بفهمد، رویکرد محتوایی نقطه شروع مناسب‌تری است. در طراحی سایت شرکتی، صفحه‌ای که فقط شعار و تصویر دارد، پرسش‌های خریدار را به تماس تلفنی منتقل می‌کند. معرفی روشن خدمت باید پیش از دعوت به ارتباط قرار بگیرد.
وقتی ویژگی دیدنی محصول بخش اصلی تصمیم است، تصویرمحوری اولویت دارد؛ البته تصویر باید کنار توضیح لازم بنشیند. برای نمونه، عکس یک صندلی شکل آن را نشان می‌دهد، اما جای مشخصات ابعاد و جنس را نمی‌گیرد. اگر مجموعه بزرگی از گزینه‌های مشابه دارید، ساختار شبکه‌ای برای مقایسه مناسب‌تر است.
سایت کوچک با محتوای محدود الزاماً به شبکه‌ای پیچیده از اجزا نیاز ندارد. هزینه ساخت و نگهداری اجزای بازاستفاده‌پذیر وقتی توجیه دارد که صفحات واقعاً الگوهای مشترک داشته باشند. تحمیل یک ساختار بزرگ به چند صفحه متفاوت، زمان و بودجه را صرف هماهنگی صوری می‌کند.
یکپارچگی را با یک‌شکل‌بودن اشتباه نگیرید
سیستم طراحی (Design System) یعنی مجموعه قواعد و اجزای بازاستفاده‌پذیری که شکل و رفتار بخش‌های سایت را هماهنگ نگه می‌دارد. یکپارچگی یعنی دکمه مشابه، رفتار مشابه داشته باشد؛ نه اینکه صفحه معرفی خدمت و صفحه مشخصات فنی ناچار باشند چیدمان یکسانی داشته باشند.
برای نمونه، سیستم طراحی شبیه دستور زبان است؛ رنگ و اندازه نقش واژه‌ها را دارند، دکمه و کادر فرم جمله‌های آماده‌اند و قواعد چیدمان مشخص می‌کنند این جمله‌ها کجا بنشینند. مرز این تشبیه روشن است: همان‌طور که دستور درست، درستی پیام را تضمین نمی‌کند، هماهنگی ظاهر هم مفیدبودن محتوا یا موفقیت تجاری را ثابت نمی‌کند.
طراحی واکنش‌گرا (Responsive Design) یعنی سازگارشدن چیدمان با فضای نمایش. این سازگاری فقط کوچک‌کردن عناصر نیست. اگر در نمایشگر باریک، تصویر تزئینی پیش از توضیح ضروری قرار بگیرد، ترتیب محتوا باید تغییر کند؛ حذف اطلاعات تصمیم‌ساز برای حفظ ظاهر خلوت، راه‌حل مناسبی نیست.
جزئیات رفتاری نیز بخشی از سبک‌اند. دکمه در حالت انتظار باید وضعیت را نشان دهد و فرم هنگام خطا، توضیح قابل فهم بدهد. طرحی که فقط حالت عادی را نمایش می‌دهد، هنوز درباره بخش مهمی از تجربه استفاده تصمیم نگرفته است.
پیش‌نمایش زیبا را با محتوای دشوار امتحان کنید
مثلاً، در یک سایت تجهیزات صنعتی، نمونه نادرست نام مدل را کوتاه می‌کند تا کارت‌ها هم‌قد بمانند و شرط سازگاری را فقط هنگام بردن نشانگر روی تصویر نشان می‌دهد. ظاهر منظم است، اما خریدار در موبایل راه روشنی برای دیدن اطلاعات ضروری ندارد.
نمونه درست، نام کامل مدل و شرط سازگاری را در متن قابل مشاهده نگه می‌دارد و ارتفاع کارت را با محتوا سازگار می‌کند. جزئیات تکمیلی در صفحه محصول قرار می‌گیرند. تفاوت این دو نمونه در میزان تزئین نیست؛ در حفظ اطلاعاتی است که انتخاب به آن وابسته است.
برای آزمودن طرح، از محتوایی استفاده کنید که محدودیت‌های چیدمان را آشکار کند:
1. یک عنوان بلند و توضیح چندبندی وارد کنید؛ متن باید بدون هم‌پوشانی و پنهان‌شدن اطلاعات اصلی نمایش داده شود.
2. تصویر یکی از موارد را حذف کنید و صفحه را در نمایشگر باریک ببینید؛ جای خالی نباید ترتیب خواندن یا امکان انتخاب را مختل کند.
3. با کلید Tab میان پیوندها و ورودی‌ها حرکت کنید و فرم را ناقص بفرستید؛ محل تمرکز باید دیده شود و پیام خطا راه اصلاح را توضیح دهد.
پیشنهاد طراحی را با هزینه تغییر بسنجید
در پیشنهاد هر تیم طراحی، از جمله ایران دیزاینر، باید رابطه انتخاب‌های ظاهری با کار صفحه روشن باشد. کنار تصویر پیشنهادی، توضیح تغییر محتوا، رفتار در نمایشگر باریک و مسئول نگهداری اجزا را بخواهید. تحویل یک نمای جذاب با تحویل ساختاری که بعداً قابل ویرایش باشد، یکسان نیست.
ظاهر به‌تنهایی فروش را تعیین نمی‌کند؛ تناسب پیشنهاد تجاری، کیفیت ورودی‌ها و پاسخ‌گویی کسب‌وکار نیز در نتیجه دخیل‌اند. بنابراین سبک را ابتدا با انجام درست وظیفه صفحه بسنجید، نه با وعده نتیجه تجاری. پس از انتشار هم خطاهای فرم و دشواری یافتن اطلاعات، نشانه‌های مشخص‌تری برای اصلاح طراحی هستند.
اگر دو پیشنهاد از نظر زیبایی نزدیک‌اند، گزینه‌ای را ترجیح دهید که افزودن خدمت یا تغییر متن در آن به دست‌کاری صفحات متعدد نیاز ندارد. معیار انتخاب روشن است: سبک باید با محتوای بلندتر، نبود تصویر و کار با صفحه‌کلید همچنان قابل استفاده بماند و اصلاح جزئی آن، بازطراحی کل سایت را نطلبد.
گردآوری: گروه خدمات ومحصولات سیمرغ
seemorgh.com
منبع: irandesigner.com
