طراحی سایت چیست؟ | همه چیز در مورد طراحی وب

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

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

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

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

همچنین همه جنبه‌های اساسی طراحی وب همچون پوشش تلفن همراه و تست‌های مختلف را بررسی می‌کنیم.

طراحی سفر کاربر

معماری اطلاعات

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

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

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

همچنین معماران اطلاعات دسترسی به نتایج آزمایش‌های قابل‌استفاده برای دیدن این‌که آیا کاربران قادر به هدایت شدن به شکل مؤثر هستند یا نه را نیاز دارند.

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

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

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

هدایت جهانی

هدایت سنگ بنای کاربردی بودن است. اگر کاربران نتوانند در وب‌سایت شما مسیرشان را پیدا کنند، مهم نیست وب‌سایتی که ساخته‌اید چقدر ظاهر خوبی داشته باشد. به همین خاطر در ناوبری وب‌سایتتان باید چند اصل را رعایت کنید:

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

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

چند نکته را در هنگام طراحی وب ناوبری در نظر بگیرید:

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

برای مثال، از منوی همبرگری پرهیز کنید اگر اکثریت کاربران شما با معنای آیکون‌ها به خودی خود آشنا نیستند.

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

لینک‌ها و گزینه‌های منوی سایت

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

تفاوت میان لینک‌ها داخلی و خارجی را بشناسید. کاربران انتظار رفتار متفاوتی برای لینک‌های داخلی و خارجی دارند. همه لینک‌های داخلی باید در تب مشابه باز شوند (به این صورت شما به کاربر این اجازه را می‌دهید تا از گزینه «برگشت» استفاده کند).

اگر تصمیم گرفتید لینک خارجی در صفحه‌ای جدید باز شوند، باید هشداری پیش از اینکه صفحه جدید یا تب جدیدی باز شود، بنویسید. می‌توانید برای این کار، متنی را به لینک اضافه کنید، برای مثال «در صفحه جدیدی باز می‌شود».

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

دکمه «برگشت» در مرورگر

دکمه «برگشت» شاید دومین دکمه کنترل UI مشهور در مرورگر باشد (بعد از قسمت خالی جستجو). مطمئن شوید دکمه «برگشت» مطابق انتظارات کاربر کار می‌کند.

وقتی کاربری لینکی را روی صفحه دنبال می‌کند و سپس دکمه «برگشت» را میزند، انتظار دارد به جای مشابهی که قبلاً در صفحه اصلی داشته برگردد.

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

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

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

درحالی‌که این عنصر نیاز به توضیحات فراوانی ندارد، اما اشاره به برخی نکات حائز اهمیت است:

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

جستجو

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

قوانین ساده‌ای که در ادامه آمده را در هنگام طراحی وب قسمت جستجو، دنبال کنید:

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

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

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

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

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

طراحی وب صفحات اختصاصی

• استراتژی محتوا

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

در ادامه چند نکته کاربردی در ارتباط با بهبود جامعیت محتوا آمده است:

از تلنبار اطلاعات پرهیز کنید.

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

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

حداکثر 5 تا 7 ورودی را در هر صفحه پرداخت نمایش می‌دهد و موارد جزئی‌تر را به تدریج نمایش می‌دهد.

از اصطلاحات خاص پرهیز کنید.

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

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

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

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

از بزرگ‌نویسی همه حروف پرهیز کنید.

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

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

• ساختار صفحه

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

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

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

از شبکه طرح استفاده کنید.

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

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

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

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

• سلسله‌مراتب بصری

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

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

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

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

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

رفتار اسکرول کردن

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

بهبود رفتار اسکرول کردن با رعایت کردن چند نکته زیر امکان‌پذیر است:

افراد را به سمت اسکرول کردن تشویق کنید.

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

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

معرفی خوبی ارائه دهید. یک معرفی خوب، زمینه را برای محتوا و پاسخ به سؤالات کاربر فراهم می‌سازد که «این صفحه درباره چیست؟»

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

گزینه‌های ناوبری ثابت.

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

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

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

در هنگام بارگذاری محتوای جدید، بازخورد بصری ارائه کنید.

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

چرا که بارگذاری محتوا در طول اسکرول کردن قرار است بسیار سریع باشد (نباید بیش از 2 تا 10 ثانیه طول بکشد)، شما می‌توانید از انیمیشن‌های جذاب برای نشان دادن اینکه سیستم مشغول کار است، استفاده کنید.

اسکرول کردن را ندزدید.

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

• بارگذاری محتوا

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

سرعت اینترنت بد می‌تواند باعث واکنش کند شود یا عملیات ممکن است کمی طول بکشد تا تکمیل شود. اما مهم نیست دلیل چنین رفتاری چه باشد، وب‌سایت شما باید سریع واکنش نشان دهد.

مطمئن شوید بارگذاری معمولی وب‌سایتتان، طول نمی‌کشد.

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

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

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

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

همان‌طور که لوک وروبلسکی اشاره می‌کند «نشانگر پیشرفت، به این اشاره دارد که افراد باید منتظر بمانند. درست مثل نگاه کردن به ساعت –وقتی این کار را می‌کنید، انگار زمان می‌ایستد.»

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

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

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

دکمه‌ها

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

مطمئن شوید عناصر قابل کلیک شبیه یکدیگر باشند.

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

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

دکمه‌ها را طبق کاری که انجام می‌دهند، برچسب‌گذاری کنید.

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

برچسب‌های گیج‌کننده همچون «ثبت کنید» و برچسب‌های انتزاعی (همچون در حال پیگیری) اطلاعات کافی درباره عملکرد دکمه نمی‌دهند.

طراحی وب دکمه‌ها باید دائمی باشد.

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

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

طراحی صفحات اختصاصی

هویت بصری

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

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

اصولی که در ادامه آمده به شما در یکپارچه‌سازی تصاویر طراحی وب سایت تان کمک می‌کند:

• مطمئن شوید تصاویر مرتبط هستند. یکی از بزرگ‌ترین خطرات در طراحی وب، تصاویری است که پیام‌های اشتباه منتقل می‌کنند. تصاویری را انتخاب کنید که به شکلی قدرتمند اهداف محصولات شما را حمایت می‌کنند و مطمئن شوید تصاویرتان با متن شما مرتبط باشند.
• از عکس‌های عمومی افراد استفاده نکنید. استفاده از صورت انسان در طراحی وب روشی مؤثر برای درگیر کردن کاربران است. دیدن صورت‌های دیگر انسان‌ها باعث می‌شود افراد حس کنند دارند به آن‌ها متصل می‌شوند و فقط قرار نیست محصولی بخرند. با این حال، بسیاری از وب‌سایت‌ها از عکس‌های عمومی مردم برای ساخت حس اعتماد استفاده می‌کنند. آزمایشات نشان می‌دهد چنین عکس‌هایی به‌ندرت ارزش طراحی دارد.
• از تصاویر با کیفیت بالا استفاده کنید. کیفیت تصاویر وب‌سایت شما تأثیر بسیار زیادی روی انتظار کاربرانتان از خدمات شما می‌گذارد. مطمئن شوید تصاویری که می‌گذارید به اندازه همه پلتفرم‌ها باشند. تصاویر نباید کیفیت پیکسلی داشته باشند بنابراین حتماً اندازه‌های رزولوشن آن را بررسی کنید. عکس‌ها را با کیفیت اصلی‌شان نمایش دهید.

ویدئو

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

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

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

دکمه‌های عمل‌گرا

عمل‌گرا (CTA) دکمه‌هایی هستند که کاربران را به سوی هدفشان راهنمایی می‌کنند. کل هدف دکمه‌های عمل‌گرا این است که بازدیدکنندگان را به هدف دلخواهشان برسانند. برخی مثال‌های دکمه‌های عمل‌گرا به شرح زیر است:

«نسخه آزمایشی را آغاز کنید.»

• «کتاب را دانلود کنید.»
• «برای به روزرسانی، ثبت‌نام کنید.»
• «مشاوره بگیرید.»

وقتی دکمه‌های عمل‌گرا را در طراحی وب وارد می‌کنید، چند نکته را در نظر بگیرید:

• اندازه. دکمه‌های عمل‌گرا باید به اندازه‌ای بزرگ باشند که از دور دیده شوند اما نه آن‌قدر بزرگ که توجه کاربر را از دیگر محتوای وب‌سایت پرت کند. برای تأیید اینکه دکمه عمل‌گرای شما مهم‌ترین عنصر روی صفحه است، آزمایش 5 ثانیه‌ای را امتحان کنید: صفحه وبی را به مدت 5 ثانیه نگاه کنید و سپس چیزی که به خاطرتان مانده را بنویسید. اگر دکمه عمل‌گرا در فهرستتان بود، پس تبریک میگویم. اندازه آن مناسب است.
• برتری بصری. رنگی که برای دکمه‌های عمل‌گرا انتخاب می‌کنید، تأثیر بسیار زیادی بر اینکه توجه را جلب کند، دارد. با رنگ می‌توانید اطمینان حاصل کنید دکمه‌های موردنظرتان بر اساس برتری بصری توجه افراد را جلب می‌کنند. تضاد میان رنگ‌ها بهترین عملکرد را در دکمه‌های عمل‌گرا برایتان به ارمغان می‌آورد.
• فضای منفی. مقدار فضای اطراف دکمه عمل‌گرا بسیار مهم است. فضای سفید (یا منفی) فضای خالی اساسی می‌سازد و میان دکمه با دیگر عناصر فاصله می‌اندازد.
• متن کنش-محور. متنی برای دکمه بنویسید که بازدیدکنندگان را به وادار به انجام عملی کند. با افعالی همچون «شروع کنید»، «به دست آورید» یا «بپیوندید» آغاز کنید.

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

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

فرم‌های وب

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

• تنها چیزهایی که لازم است را بپرسید. تنها چیزهایی که واقعاً نیاز دارید را بپرسید. هر قسمت اضافه‌ای که به فرم خود می‌افزایید روی اثرگذاری آن تأثیر می‌گذارد. همیشه به اینکه چرا اطلاعات خاصی را از کاربران می‌خواهید و چگونه قرار است مورداستفاده قرار بگیرند، فکر کنید.
• فرم را به صورت منطقی بچینید. سؤال‌ها باید به صورت منطقی از نظرگاه کاربران پرسیده شود نه از نظرگاه پایگاه داده یا درخواستی که دارید. برای مثال، خواستن آدرس فرد پیش از نام او قطعاً اتفاق درستی نیست.
• زمینه‌های مرتبط را در یک گروه قرار دهید. اطلاعات مرتبط یک گروه را در یک مجموعه یا بلوک قرار دهید. جریانی که از یک مجموعه سؤال به مجموعه سؤال بعدی دارید، فرمتان را زیباتر خواهد کرد. گروه‌بندی زمینه‌های مرتبط با یکدیگر نیز به کاربر کمک می‌کند که رابطه‌ منطقی بین سؤالات را پیدا کند.

انیمیشن

طراحان بی‌شماری از انیمیشن به عنوان عنصر کاربردی برای افزایش رابط کاربری استفاده می‌کنند. انیمیشن دیگر صرفاً برای خوشایندی نیست –اکنون یکی از مهم‌ترین ابزار برای تعامل مؤثر است.

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

در ادامه برخی موارد آمده که می‌تواند به شما در استفاده از انیمیشن کمک کند:

بازخورد بصری بر اساس عملکرد کاربر.

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

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

قابلیت مشاهده وضعیت سیستم.

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

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

انتقال ناوبری.

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

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

انیمیشن برندسازی.

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

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

نکاتی در ارتباط با تلفن همراه

امروزه، تقریباً 50 درصد کاربران از طریق تلفن‌های همراهشان به وب دسترسی دارند. این چه معنایی برای شما طراحان وب دارد؟ به این معنا است که باید استراتژی‌ای مربوط به تلفن همراه هنگامی‌که طراحی هر وب‌سایت پیش رویتان است، داشته باشید.

طراحی وب واکنش‌گرا داشته باشید.

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

به دنبال طرح تک‌ستونی باشید.

طرح تک‌ستونی معمولاً روی تلفن‌های همراه بهترین عملکرد را دارد. نه‌تنها یک تک‌ستونی به شما در مدیریت فضای محدود روی صفحه نمایش کوچک کمک می‌کنند بلکه به راحتی می‌توانید بین رزولوشن ابزارهای متفاوت و وضعیت «پرتره» یا «منظره» تفاوتی قائل شوید.

از الگوی «اولویت +» برای اولویت‌بندی ناوبری در طول طراحی وب استفاده کنید.

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

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

گاردین از الگوی اولویت + برای بخش ناوبری خود استفاده می‌کند. موارد کم‌اهمیتش وقتی برای کاربر مشخص می‌شود که روی دکمه «همه» کلیک کند.

مطمئن شوید تصاویر به خوبی برای نمایشگرها و پلتفرم‌های دیگر آماده شده‌اند.

یک وب‌سایت باید روی همه دستگاه‌ها و همه رزولوشن‌ها متناسب باشد. مدیریت، دست‌کاری و انتقال تصاویر یکی از چالش‌های اصلی طراحان وب است که هنگام ساختن وب‌سایت‌های واکنش‌گرا با آن روبرو می‌شوند. برای ساده کردن این کار، می‌توانید از ابزارهایی همچون Responsive Image Breakpoints Generator برای تولید تصاویر مناسب استفاده کنید.

از «قابل کلیک» بسوی «قابل ضربه»

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

هدف لمس باید از اندازه مناسبی برخوردار باشد.

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

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

مطالعات نشان می‌دهد که سایز متوسط انگشت بین 10 و 14 میلی‌متر است و طیف نوک انگشت از 8 تا 10 میلی‌متر است که یک فضای 10*10 را می‌طلبد.

نشانگرهای بصری قدرتمندتر تعاملی.

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

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

دردسترس‌پذیری

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

کاربران کم‌بینا

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

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

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

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

همچنین راهنمای دسترسی محتوای وب، توصیه‌هایی در این ارتباط دارد. مقدار تضادی که در ادامه آمده برای متن بدنه و متن تصاویر پیشنهاد شده است:

متن کوچک باید میزان تضاد حداقلی 4.5:1 نسبت به پس‌زمینه داشته باشد. میزان 7:1 ترجیحاً.

• متن بزرگ (وضعیت بولد آن 14 و معمولی آن 18 و بیشتر باشد) باید میزان تضاد حداقلی 3:1 نسبت به پس‌زمینه خود داشته باشد.
• می‌توانید از بررسی کنند تضاد رنگی WebAIM استفاده کنید تا به سرعت بفهمید در وضعیت درستی قرار دارید یا نه.

کاربرانی که کوررنگی دارند.

تخمین زده شده که 4/5 درصد جمعیت جهان کوررنگی دارند ( 10 به 12 در مردان و 1 به 200 در زنان)، 4 درصد از دید کم رنج می‌برند (1 به 30 در افراد) و 0/6 درصد نابینا هستند (1 به 188 در افراد). به راحتی می‌توان فراموش کرد که ما برای این گروه از کاربران نیز طراحی می‌کنیم چرا که بیشتر طراحان تجربه چنین مشکلاتی را ندارند.

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

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

اما قرمز و سبز رنگ‌هایی هستند که تحت تأثیر کمبود بینایی قرار می‌گیرند این رنگ‌ها را به سختی می‌توان برای افرادی که کوررنگی دارند متمایز کرد.

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

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

کاربران نابینا

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

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

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

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

وقتی متن جایگزینی برای تصاویر می‌نویسید، به موارد زیر توجه کنید:

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

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

تجربه دوست‌دار کیبورد

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

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

در ادامه چند قانون ساده در ارتباط با ناوبری کیبورد را مرور می‌کنیم:

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

آزمایش کردن

آزمایش چند باره

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

آزمایش زمان بارگذاری صفحه

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

0/1 ثانیه: احساس سریع بودن به کاربر می‌دهد.

• 1 ثانیه: کاربر را در افکارش شناور می‌گذارد اما کاربر تأخیری جزئی تجربه می‌کند.
• 10 ثانیه: محدودیت را به قدری جابجا می‌کند که تمرکز کاربر پرت شود. تأخیر 10 ثانیه‌ای اغلب باعث می‌شود کاربر وب‌سایت را ترک کند.

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

چه چیزی معمولاً باعث کند شدن زمان بارگذاری می‌شود؟

مطالب سنگین (همچون ویدئو و اسلایدها)

• کدهای بک-اند بهینه‌سازی نشده
• مشکلات مرتبط با سخت‌افزار (زیرساختی که اجازه عملکرد سریع نمی‌دهد)

ابزاری همچون  Page Speed Insights به شما در فهمیدن دلیل کندی وب‌سایت کمک خواهند کرد.

آزمایش A/B

آزمایش A/B زمانی ایده آل است که به دنبال انتخاب بین دو نسخه طراحی باشید (همچون نسخه موجود و نسخه بازطراحی صفحه‌تان). این روش تست متشکل است از نمایش یکی از دو نسخه به صورت تصادفی به تعداد مشخصی از کاربر و سپس بررسی و تجزیه و تحلیل اینکه کدام‌یک مؤثرتر واقع‌شده‌اند.

دستیار توسعه‌دهنده

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

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

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

نتیجه‌گیری

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

طراحی وب سایت شخصی/شرکتی خود را چگونه انجام داده اید؟

تجربه ای در زمینه طراحی سایت برای خود دارید؟ طراحی سایت اختصاصی چه چالش هایی برای شما داشته است؟

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

چنانچه در حوزه طراحی سایت نیازمند ارائه مشاوره و خدمات حرفه ای و تخصصی هستید می توانید از طریق این صفحه با ما در ارتباط باشید.