انتخاب زبان

طراحی وب‌سایت؛ کمک به فهم، تصمیم و تکمیل کار

محتوا، ناوبری، دسترس‌پذیری و سرعت را حول مسیر واقعی مشتری ترکیب کنید.

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

صفحهٔ دسکتاپ و نمایشگر هماهنگ موبایل، مسیری روشن و دسترس‌پذیر برای انجام یک کار نشان می‌دهند.

هدف‌های یادگیری

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

تصمیم پشتیبانی‌شدهٔ صفحه را تعریف کنید

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

مسیر قابل‌فهم بسازید

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

توانایی و شرایط متفاوت را لحاظ کنید

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

سرعت و نگهداری را جزو طراحی بدانید

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

چرخهٔ طراحی مبتنی بر کار

به‌جای تأیید صفحه‌های جدا، مسیر کامل را بازبینی کنید.

  1. شناخت

    کار کاربر و اطلاعات لازم را شناسایی کنید.

  2. سازمان‌دهی

    ساختار روشن محتوا و ناوبری بسازید.

  3. ساخت

    تعامل دسترس‌پذیر و واکنش‌گرا پیاده کنید.

  4. ارزیابی

    تکمیل را ببینید، مانع را رفع و دقت را حفظ کنید.

جدول مقایسه

بازبینی عملی صفحه
حوزهپرسششاهد
محتوابازدیدکننده تناسب خدمت را می‌فهمد؟دامنهٔ دقیق و تیتر قابل‌فهم
تعاملکار بدون ماوس کامل می‌شود؟مسیر صفحه‌کلید، فوکوس و خطای قابل اصلاح
چیدماناطلاعات در عرض کم حفظ می‌شود؟بررسی موبایل واقعی و متن بزرگ
عملکرداطلاعات اصلی قابل پیش‌بینی ظاهر می‌شود؟چیدمان پایدار و رسانهٔ متناسب
مثال کاربردی

فرم تماسی که کامل به نظر می‌رسید

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

  1. بررسی صفحه‌کلید نشان می‌دهد کاربر اطلاعات ناقص را تشخیص نمی‌دهد.
  2. تیم برچسب، توضیح خطا و مسیر فوکوس روشن می‌افزاید.
  3. اصلاح، تأیید ارسال و پیگیری وعده‌داده‌شده را در نمایشگر کوچک و بزرگ می‌آزماید.

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

فهرست اقدام‌ها

  • کار و اقدام بعدی را نام ببرید.
  • تیتر و لینک معنادار به کار ببرید.
  • صفحه‌کلید و اصلاح خطا را بررسی کنید.
  • عرض کم و متن بزرگ را بیازمایید.
  • مسئول محتوا و نگهداری را تعیین کنید.

خطاهای رایج

تأیید قالب خالی

چیدمان مناسب متن نمایشی کوتاه ممکن است با ترجمه و تصویر واقعی خراب شود.

امتیاز خودکار به‌جای تجربه

امتیاز بالا ثابت نمی‌کند ناوبری، متن یا تعامل پیچیده برای همهٔ کاربران کار می‌کند.

پرسش و پاسخ

واکنش‌گرایی یعنی کوچک کردن صفحهٔ دسکتاپ؟

خیر؛ چیدمان و تعامل باید با حفظ اطلاعات ضروری و ترتیب خواندن و فوکوس مناسب سازگار شوند.

دسترس‌پذیری را می‌توان فقط آخر کار افزود؟

اصلاح دیرهنگام ممکن است، اما پرداختن به محتوا، ساختار و تعامل در سراسر طراحی و توسعه آسان‌تر است.

منابع و مطالعهٔ بیشتر

  1. اصول دسترس‌پذیریW3C Web Accessibility Initiative

    راهنمای اصلی بین‌المللی نیازهای مهم و پیوند استاندارد مرتبط را توضیح می‌دهد.

  2. نکات عملی طراحی و توسعهW3C Web Accessibility Initiative

    W3C منابع آغازین نویسنده، طراح و توسعه‌دهنده را می‌دهد؛ چک‌لیست کوتاه، ممیزی کامل انطباق نیست.

مفاهیم این درس

بازگشت به وبلاگ