طراحی وب چیست؟ در این مقاله با مهارت‌هایی همچون طراحی بصری تا طراحی اصولی، از سفر کاربر تا طراحی اختصاصی صفحات و تمامی جنبه‌های طراحی وب آشنا می‌شوید.
طراحی وب به مهارت زیادی نیاز دارد. فرد باید مهارت‌های مختلفی را برای طراحی وب به کار ببندد، از طراحی بصری (وب‌سایت چگونه به نظر می‌رسد) تا طراحی اساسی (وب‌سایت چگونه کار می‌کند). برای تسهیل این مسیر، راهنمایی که در ادامه آمده، آماده شده است.
در این مطلب، ما روی اصول اصلی، موارد اکتشافی و رویکردهایی تمرکز خواهیم کرد که به شما در ساخت تجربه کاربری عالی برای وبسایتتان، کمک شایانی خواهد کرد.
با چیزهای جهانی همچون سفر کاربر (چگونگی تعریف اسکلت وب‌سایت) شروع می‌کنیم و سپس به صفحات اختصاصی می‌پردازیم (چه چیزی باید در طول طراحی وب در نظر گرفته شود).
همچنین همه جنبه‌های اساسی طراحی وب همچون پوشش تلفن همراه و تست‌های مختلف را بررسی می‌کنیم.
افراد اغلب از اصطلاح «معماری اطلاعات» (IA) برای تعریف منوهای یک وب‌سایت استفاده می‌کنند. اما این درست نیست. درحالی‌که منوها بخشی از IA هستند اما فقط یکی از جنبه‌های آن به شمار می‌روند.
IA به‌طورکلی به معنای سازمان‌دهی اطلاعات به شکلی شفاف و منطقی است. چنین سازمان‌دهی، هدف شفافی را دنبال می‌کند: کمک به کاربران جهت هدایت‌پذیری در مسیر پیچیده‌ای از اطلاعات. IA خوب، سلسله‌مراتبی می‌سازد که هم ردیف انتظارات کاربران است. اما سلسله‌مراتب خوب و هدایت بصری به شکل اتفاقی، رخ نمی‌دهد. آن‌ها نتیجه تحقیق و آزمایش کامل کاربر هستند.
راه‌های زیادی برای تحقیق درباره نیازهای کاربر وجود دارد. اغلب، یک معمار اطلاعات نقش فعالی در مصاحبه‌های کاربر یا مرتب‌سازی کارت‌ها دارد، جایی که معمار به طور مستقیم انتظارات کاربر را می‌شنود یا می‌بیند و کاربران احتمالی چگونه گروه‌های مختلف اطلاعاتی را دسته‌بندی می‌کنند.
همچنین معماران اطلاعات دسترسی به نتایج آزمایش‌های قابل‌استفاده برای دیدن اینکه آیا کاربران قادر به هدایت شدن به شکل مؤثر هستند یا نه را نیاز دارند.
(مرتب‌سازی کارت روش ساده‌ای برای فهمیدن این است که چگونه می‌توان به بهترین شکل محتوا را بر اساس ورودی کاربر، دسته‌بندی کرد. یکی از دلایل اینکه چرا معماران اطلاعات از مرتب‌سازی کارت خوششان می‌آید به خاطر شفافیت الگوهایی است که معمولاً در دل این مسیر به وجود می‌آید.)
ساختار منو باید مبتنی بر نتایج مصاحبه‌های کاربر باشد و مرتب‌سازی کارت باید برای اینکه بفهمیم مدل ذهنی کاربر رضایت‌بخش است یا نه، مورد آزمایش قرار گیرد. محققان UX از تکنیکی به نام آزمایش درخت استفاده می‌کنند تا ثابت کنند موفق عمل می‌کند یا نه. این کار درست پیش از طراحی وب برای رابط کاربری واقعی انجام می‌شود.
(آزمایش درختی، روشی قابل‌اعتماد برای فهمیدن این است که کاربر می‌تواند با ساختار منوهای پیشنهاد شده کار کند یا نه)
هدایت سنگ بنای کاربردی بودن است. اگر کاربران نتوانند در وب‌سایت شما مسیرشان را پیدا کنند، مهم نیست وب‌سایتی که ساخته‌اید چقدر ظاهر خوبی داشته باشد. به همین خاطر در ناوبری وبسایتتان باید چند اصل را رعایت کنید:
سادگی. ناوبری باید طوری طراحی شود تا بازدیدکنندگان را به جایی که می‌خواهند بروند جذب کند و این کار باید با سریع‌ترین کلیک ممکن اتفاق بیفتد.
چند نکته را در هنگام طراحی وب ناوبری در نظر بگیرید:
الگوی منوی سایت را مبتنی بر نیازهای کاربران انتخاب کنید. منوی سایت باید منطبق با نیازهای اکثریت کاربران وبسایتتان باشد. یک گروه مخاطب هدف معین، انتظار نوع خاصی از تعامل با وب‌سایت شما را دارند، پس کاری کنید این انتظارات به نفع شما تمام شود.
برای مثال، از منوی همبرگری پرهیز کنید اگر اکثریت کاربران شما با معنای آیکون‌ها به خودی خود آشنا نیستند.
لینک‌ها و گزینه‌های منوی سایت
لینک‌ها و گزینه‌های ناوبری، عوامل کلیدی در پروسه هدایت و داشتن اثر مؤثر در سفر کاربر هستند. در ادامه قوانینی درباره این عناصر تعاملی آمده است:
تفاوت میان لینک‌ها داخلی و خارجی را بشناسید. کاربران انتظار رفتار متفاوتی برای لینک‌های داخلی و خارجی دارند. همه لینک‌های داخلی باید در تب مشابه باز شوند (به این صورت شما به کاربر این اجازه را می‌دهید تا از گزینه «برگشت» استفاده کند).
اگر تصمیم گرفتید لینک خارجی در صفحه‌ای جدید باز شوند، باید هشداری پیش از اینکه صفحه جدید یا تب جدیدی باز شود، بنویسید. می‌توانید برای این کار، متنی را به لینک اضافه کنید، برای مثال «در صفحه جدیدی باز می‌شود».
دکمه «برگشت» در مرورگر
دکمه «برگشت» شاید دومین دکمه کنترل UI مشهور در مرورگر باشد (بعد از قسمت خالی جستجو). مطمئن شوید دکمه «برگشت» مطابق انتظارات کاربر کار می‌کند.
وقتی کاربری لینکی را روی صفحه دنبال می‌کند و سپس دکمه «برگشت» را میزند، انتظار دارد به جای مشابهی که قبلاً در صفحه اصلی داشته برگردد.
از موقعیت‌هایی که در آن کلیک کردن روی «برگشت»، کاربر را به بالای صفحه ابتدایی برمی‌گرداند به جای اینکه در جای قبلی که آن را ترک کرده بوده بازگرداند، به شدت پرهیز کنید.
گم شدن جایی که روی آن بودند، کاربر را وادار می‌کند تا محتوایی که پیش از این گشته را مجدداً بگردد. جای تعجبی ندارد که کاربران به سرعت بدون وجود عملکرد «برگشت به موقعیت قبلی» ناامید می‌شوند.
بردکرامب، مجموعه‌ای است از لینک‌های متنی است که به عنوان راهنمای ناوبری در وب‌سایت‌ها مفید واقع می‌شوند. این دومین طرح ناوبری است که معمولاً موقعیت مکانی کاربر در وب‌سایت را به او نشان می‌دهد.
درحالی‌که این عنصر نیاز به توضیحات فراوانی ندارد، اما اشاره به برخی نکات حائز اهمیت است:
جستجو
برخی کاربران وارد یک وب‌سایت می‌شوند و به دنبال چیز مشخصی هستند. آن‌ها نمی‌خواهند از گزینه‌های ناوبری استفاده کنند. آن‌ها می‌خواهند در قسمت جستجو بنویسند و چیزی که دنبالش هستند را ثبت کنند و صفحه موردنظرشان را پیدا کنند.
قوانین ساده‌ای که در ادامه آمده را در هنگام طراحی وب قسمت جستجو، دنبال کنید:
این مطالعه نشان می‌دهد که مناسب‌ترین نقطه بالا سمت چپ یا بالا سمت راست هر صفحه وب‌سایت است. کاربران می‌توانند به راحتی آن را با استفاده از «الگوی F شکل» پیدا کنند.
درواقع وقتی یک بخش جستجو بسیار کوچک است، کاربران وادار می‌شوند از کلمات کم برای جستجوی چیزی که می‌خواهند، استفاده کنند. گروه نیلسن نورمن، بخش جستجویی که بتوان در آن 27 حرف را دید پیشنهاد می‌کنند چرا که 90 درصد جستجوها همین اندازه را شامل می‌شوند.
شاید مهم‌ترین چیز درباره استراتژی محتوا تمرکز بر روی اهداف صفحات به صورت جداگانه باشد. فهمیدن هدف صفحه و نوشتن محتوا مطابق با هدف.
در ادامه چند نکته کاربردی در ارتباط با بهبود جامعیت محتوا آمده است:
از تلنبار اطلاعات پرهیز کنید.
تلنبار اطلاعات یکی از مشکلات جدی است. باعث می‌شود تا کاربران نتوانند تصمیم بگیرند یا کاری کنند، چرا که احساس می‌کنند اطلاعات زیادی برای مصرفشان وجود دارد.
روش‌های ساده‌ای برای کاهش سطح اطلاعات وجود دارد. یکی از تکنیک‌های رایج، خرد کردن محتوا به محتواهای کوچک‌تر برای کمک به فهم کاربران و هضم بهتر آن است. یک فرم پرداخت بهترین مثال است.
حداکثر 5 تا 7 ورودی را در هر صفحه پرداخت نمایش می‌دهد و موارد جزئی‌تر را به تدریج نمایش می‌دهد.
از اصطلاحات خاص پرهیز کنید.
هر اصطلاح یا عبارت ناشناخته که بر روی صفحه ظاهر شود، بار شناختی کاربر را افزایش می‌دهد. شرط درست عمل کردن این است که برای همه خوانندگان بنویسید و کلماتی انتخاب کنید که فهم آن برای همه گروه‌های کاربر ساده و شفاف باشد.
بخش‌هایی با محتوای طولانی که جزئیات بسیاری دارند را کم کنید.
در جایی که تلنباری اطلاعات وجود دارد سعی کنید از پاراگراف‌های طولانی متنی استفاده نکنید، به خصوص اگر وب‌سایت شما مبتنی بر مصرف اطلاعات و محتوا نیست.
برای مثال، اگر نیاز به فراهم کردن جزئیات درباره خدمت یا محصولی که دارید می‌باشد، سعی کنید جزئیات را به صورت قدم به قدم ارائه کنید. کم بنویسید تا خوانده شود. طبق گفته رابرت گانینگز در کتابش به نام «چگونگی شفاف‌سازی نویسندگی تجاری» برای خواندن راحت، بیشتر جملات باید 20 کلمه‌ای یا کمتر باشند.
از بزرگ‌نویسی همه حروف پرهیز کنید.
همه متونی که بزرگ نوشته می‌شوند به شکل کوچکش هم خواندنی هستند درست مثل لوگوها. با این حال از کلمات طولانی (همچون پاراگراف‌ها، برچسب‌ها یا توصیه‌ها به صورت بزرگ) خودداری نمایید.
همان‌طور که مایلز تینکر در کتابش به نام خوانایی چاپ اشاره کرده، همه کلماتی که بزرگ نوشته می‌شوند سرعت خواندن را کم می‌کنند. همچنین بیشتر خوانندگان این جور متون را خواندنی نمی‌دانند.
یک صفحه با ساختار خوب، این‌گونه است که به کاربر هر چیزی که به آن نیاز دارد را نشان می‌دهد کجا واقع‌شده است. درحالی‌که هیچ قانون خاصی وجود ندارد، راهنمایی‌های کمی وجود دارند که به شما در ساخت ساختاری یکپارچه کمک خواهند کرد:
ساختار صفحه خود را قابل پیش‌بینی کنید.
طراحی وب تان را مطابق انتظارات کاربر خود اجرا نمایید. وب‌سایت‌هایی با دسته‌بندی مشابه را در نظر بگیرید و ببینید کدام عناصر را برای استفاده در کدام صفحه به کار گرفته‌اند. از الگوهایی که مخاطب هدف شما با آن آشنا است استفاده کنید.
از شبکه طرح استفاده کنید.
شبکه طرح، یک صفحه را به مناطق اصلی تقسیم می‌کند و روابط میان عناصر را با اندازه و موقعیت‌های مکانی‌شان تعریف می‌کند. با کمک شبکه، ترکیب بخش‌های متفاوت یک صفحه به صورت طرحی منسجم، آسان‌تر می‌شود.
(سیستم‌های طرح و شبکه‌ها، بخشی از میراث طراحی وب هستند و هنوز هم به دنیایی چند صفحه‌ای مرتبط هستند. شبکه‌های طرح ادوبی XD، این امکان را به طراحان می‌دهد تا طراحی‌های منظمی برای صفحه نمایش‌های مختلف آماده کنند و عناصر متناسب با یکدیگر را از طریق سفارشی‌سازی شبکه‌ها، مدیریت کنند.)
از وایرفریم وفاداری کم به محصول نهایی برای جلوگیری از شلختگی استفاده کنید.
شلختگی زیاد باعث کاهش ارتباط با مخاطب می‌شود. هر دکمه، تصویر و خط متنی که اضافه می‌شود، صفحه را پیچیده‌تر می‌کند. پیش از ساختن صفحه با عناصر واقعی، یک وایرفریم بسازید، آن را تجزیه و تحلیل کنید و سپس از شر هر چیزی که ضروری نیست خلاص شوید.
افراد بیشتر دوست دارند نگاهی اجمالی به صفحه وب بیندازند به جای اینکه هر چیزی که درون آن است را بخوانند. بنابراین، اگر بازدیدکننده‌ای می‌خواهد محتوایی پیدا کند یا کاری انجام دهد، شروع به مرور اجمالی می‌اندازد تا جایی که لازم است برود را پیدا کند.
شما به عنوان طراح، می‌توانید با طراحی سلسله‌مراتب بصری خوب، به آن‌ها کمک کنید. سلسله‌مراتب بصری به ارائه منظم عناصر به ترتیبی که نشان‌دهنده میزان اهمیتشان است، اشاره دارد (یعنی، جایی که چشم بازدیدکننده باید در ابتدا متمرکز شود و سپس به کجا نگاه کند و همین طور الی آخر). یک سلسله‌مراتب بصری مناسب، مرور اجمالی وب‌سایت را ساده می‌سازد.
از الگوهای مرور طبیعی استفاده کنید. به عنوان طراح، ما کنترل زیادی روی اینکه افراد وقتی صفحه‌ای را می‌بینند، به کجا نگاه کنند، داریم. برای تنظیم مسیری درست برای چشم‌های بازدیدکنندگان، می‌توانیم از دو الگوی مرور طبیعی استفاده کنیم.
الگوی F شکل و الگوی Z شکل. برای صفحات محتوا-محور، همچون مقالات و مطالب جستجو شده، الگوی F بهتر است چرا که الگوی Z برای صفحاتی است که متن-محور نباشند.
رفتار اسکرول کردن
افسانه‌ای که میان طراحان وب وجود دارد این است که افراد اسکرول نمی‌کنند. برای روشن شدن موضوع باید بگوییم: امروزه، همه اسکرول می‌کنند.
بهبود رفتار اسکرول کردن با رعایت کردن چند نکته زیر امکان‌پذیر است:
افراد را به سمت اسکرول کردن تشویق کنید.
با وجود این حقیقت که افراد معمولاً به محض باز شدن یک صفحه شروع به اسکرول می‌کنند، اما محتوای بالای صفحه هنوز هم از اهمیت بسیار زیادی برخوردار است.
چیزی که در بالای صفحه قرار می‌گیرد، اثر و انتظار کیفیت برای بازدیدکنندگان است. افراد اسکرول می‌کنند اما تنها وقتی‌که محتوای بالای صفحه برایشان تعلیق داشته باشد. بنابراین، قوی‌ترین محتوای خود را در بالای صفحه قرار دهید.
معرفی خوبی ارائه دهید. یک معرفی خوب، زمینه را برای محتوا و پاسخ به سؤالات کاربر فراهم می‌سازد که «این صفحه درباره چیست؟»
گزینه‌های ناوبری ثابت.
وقتی صفحات طولانی می‌سازید به خاطر داشته باشید که کاربران هنوز به موقعیت اولیه‌ای که در آن بودند گرایش دارند و نیز نیاز دارند تا منوی ناوبری همراهشان باشد.
صفحات طولانی می‌توانند ناوبری کاربران را دچار مشکل کنند اگر نوار ناوبری در هنگام اسکرول شدن، از بین برود، آن‌ها همیشه مجبورند وقتی در انتهای وب‌سایت قرار دارند مجدداً، اسکرول کنند و به بالای صفحه وب‌سایت برسند.
راه‌حل مشخص این موضوع منوی چسبان است که موقعیت اولیه را نشان می‌دهد و همیشه بر روی صفحه قرار دارد.
در هنگام بارگذاری محتوای جدید، بازخورد بصری ارائه کنید.
به خصوص برای صفحات وبی که بارگذاری محتوا به صورت پویا انجام می‌شود (همچون وب‌سایت‌های خبری)، بسیار مهم است.
چرا که بارگذاری محتوا در طول اسکرول کردن قرار است بسیار سریع باشد (نباید بیش از 2 تا 10 ثانیه طول بکشد)، شما می‌توانید از انیمیشن‌های جذاب برای نشان دادن اینکه سیستم مشغول کار است، استفاده کنید.
اسکرول کردن را ندزدید.
اسکرول دزدیده شده یکی از اعصاب‌خردکن‌ترین چیز است چرا که کنترل کاربر را از او می‌گیرد و رفتار اسکرول کردن به حد زیادی غیر قابل پیش‌بینی می‌شود. وقتی طراحی وب می‌کنید این اجازه را به کاربر دهید تا حرکت کردن در وب‌سایت را به عهده بگیرند.
بارگذاری محتوا ارزش شفافیت اضافه را دارد. درحالی‌که پاسخ سریع، بهترین عملکرد است اما اوقاتی وجود دارد که وب‌سایت شما نیاز به زمان بیشتری برای انتقال محتوا به بازدیدکننده دارد.
سرعت اینترنت بد می‌تواند باعث واکنش کند شود یا عملیات ممکن است کمی طول بکشد تا تکمیل شود. اما مهم نیست دلیل چنین رفتاری چه باشد، وب‌سایت شما باید سریع واکنش نشان دهد.
مطمئن شوید بارگذاری معمولی وبسایتتان، طول نمی‌کشد.
میزان توجه و صبر کاربران بسیار کم است. طبق تحقیقات گروه نیلسن نورمن، 10 ثانیه محدوده زمانی است که توجه کاربر به کاری معطوف می‌شود.
وقتی بازدیدکنندگان مجبور می‌شوند برای بارگذاری وب‌سایتی صبر کنند، ناامید می‌شوند و احتمالاً اگر وب‌سایت به سرعت برایشان بارگذاری نشود آن را ترک می‌کنند. حتی با بهترین طراحی وب بصری هم که باشد، کاربر در صورت طولانی شدن زمان بارگذاری آن را ترک می‌کند.
از اسکلت‌های صفحه نمایش در طول بارگذاری استفاده کنید.
بسیاری از وب‌سایت‌ها از نشانگر پیشرفت برای نشان دادن اینکه داده‌ها در حال بارگذاری است، استفاده می‌کنند. درحالی‌که قصد پشت نشانگر پیشرفت مثبت است (ارائه بازخورد بصری)، نتیجه ممکن است منفی باشد.
همان‌طور که لوک وروبلسکی اشاره می‌کند «نشانگر پیشرفت، به این اشاره دارد که افراد باید منتظر بمانند. درست مثل نگاه کردن به ساعت –وقتی این کار را می‌کنید، انگار زمان می‌ایستد.»
جایگزینی عالی به جای نشانگر پیشرفت وجود دارد: اسکلت‌های صفحه نمایش. این صفحات اساساً نسخه موقتی و خالی صفحه هستند که در آن اطلاعات به تدریج بارگذاری می‌شوند.
به جای نمایش نشانگر بارگذاری، طراحان می‌توانند از اسکلت‌های صفحه نمایش برای جلب توجه کاربر روی پیشرفت واقعی استفاده کنند و انتظار کاربر برای چیزی که قرار است پیش بیاید را برآورده می‌سازند.
این کار حسی می‌سازد که انگار همه چیز به سرعت در حال رخ دادن است، همان‌طور که اطلاعات به تدریج نمایش داده می‌شوند و افراد می‌بینند که وب‌سایت واقعاً دارد کاری انجام می‌دهد و ارزش صبر کردن دارد.
دکمه‌ها برای ایجاد جریان ارتباطی نرم بسیار مهم است. ارزش این را دارد که برای داشتن بهترین عملکرد با دکمه‌ها، به این نکات توجه کنید:
مطمئن شوید عناصر قابل کلیک شبیه یکدیگر باشند.
با دکمه‌ها و دیگر عناصر تعاملی، به این فکر کنید که میزان برقراری ارتباط مؤثر دکمه‌های شما چقدر است. کاربران چگونه آن عنصر را به عنوان دکمه می‌فهمند؟ فرم باید تابعی را دنبال کند: شکلی که یک چیز به نظر می‌رسد به کاربران نحوه استفاده خودش را توضیح می‌دهد.
عناصر بصری که شبیه دکمه یا لینک هستند اما قابل کلیک نیستند (همچون کلماتی که زیر آن‌ها خط کشیده شده که لینک نیستند یا عناصری که پس‌زمینه مستطیلی پشتشان دارند اما دکمه نیستند.) به راحتی می‌توانند کاربران را گیج کنند.
دکمه‌ها را طبق کاری که انجام می‌دهند، برچسب‌گذاری کنید.
برچسب روی هر عنصر واکنش‌گرایی همیشه باید به آن کارکردی که برای کاربر دارد اشاره کند. کاربران احساس راحت‌تری می‌کنند اگر عملکرد دکمه را از ابتدا بدانند.
برچسب‌های گیج‌کننده همچون «ثبت کنید» و برچسب‌های انتزاعی (همچون در حال پیگیری) اطلاعات کافی درباره عملکرد دکمه نمی‌دهند.
طراحی وب دکمه‌ها باید دائمی باشد.
چه آگاهانه یا غیرآگاهانه، کاربران جزئیات را به خاطر می‌آورند. در هنگام مرور یک وب‌سایت، آن‌ها شکل عنصر خاصی را با عملکرد دکمه مرتبط می‌سازند.
بنابراین، تداوم نه‌تنها به یک طراحی وب زیبا منجر می‌شود بلکه تجربه آشنایی برای کاربران به همراه دارد. استفاده از سه شکل متفاوت در یک بخش وب‌سایت (همچون نوار سیستم) نه‌تنها گیج‌کننده بلکه شلخته نیز هست.
همان‌طور که میگویند، یک تصویر ارزش هزاران کلمه را دارد. بشر موجودی بصری‌پسند است و قادر است به سرعت اطلاعات بصری را پردازش کند؛ 90 درصد اطلاعاتی که دریافت می‌کنید و به مغز ما منتقل می‌شود، بصری است.
تصاویر، روشی قدرتمند برای جلب توجه کاربر و تمایز محصولات است. یک تصویر می‌تواند اطلاعات بیشتری را نسبت به بلوک‌های طراحی‌شده متنی به بیننده منتقل کند. علاوه بر این، تصاویر از موانع زبانی به‌گونه‌ای عبور می‌کنند که برای متن ساده نیست.
اصولی که در ادامه آمده به شما در یکپارچه‌سازی تصاویر طراحی وب سایت تان کمک می‌کند:
با افزایش سرعت اینترنت، ویدئوها بسیار محبوب شدند به خصوص با در نظر گرفتن اینکه زمان گذراندن در وب‌سایت‌ها را افزایش می‌دهند. امروزه، ویدئوها همه‌جا هستند.
ما آن‌ها را روی دسکتاپ‌ها، تبلت‌ها و تلفن‌ها می‌بینیم. وقتی به طور مؤثر استفاده شود، ویدئو می‌تواند یکی از ابزارهای قدرتمند و در دسترس برای درگیر کردن مخاطب باشد احساس زیادی را به دیگران منتقل می‌کند و حس خوبی به آن‌ها می‌دهد.
عمل‌گرا (CTA) دکمه‌هایی هستند که کاربران را به سوی هدفشان راهنمایی می‌کنند. کل هدف دکمه‌های عمل‌گرا این است که بازدیدکنندگان را به هدف دلخواهشان برسانند. برخی مثال‌های دکمه‌های عمل‌گرا به شرح زیر است:
«نسخه آزمایشی را آغاز کنید.»
وقتی دکمه‌های عمل‌گرا را در طراحی وب وارد می‌کنید، چند نکته را در نظر بگیرید:
می‌توانید دکمه عمل‌گرا را به سرعت با استفاده از افکت مات، آزمایش کنید. آزمایش مات، تکنیکی سریع برای ارزیابی این است که آیا چشم کاربر جایی که شما می‌خواهید را می‌بینید یا نه.
از صفحه‌تان اسکرین شات بگیرید و افکت مات را در ادوبی XD به کار بگیرد. با نگاه کردن به نسخه مات صفحه‌تان، کدام عنصر بیشتر توجهتان را جلب می‌کند؟ اگر اتفاقی که افتاده را دوست ندارید، صفحه‌تان را مجدداً طراحی کنید.
پر کردن فرم یکی از مهم‌ترین انواع تعامل برای کاربران وب است. درواقع، یک فرم اغلب به عنوان قدم نهایی در کامل کردن یک هدف در نظر گرفته می‌شود. کاربران باید بدون هیچ‌گونه ابهامی قادر به تکمیل فرم باشند.
طراحان بی‌شماری از انیمیشن به عنوان عنصر کاربردی برای افزایش رابط کاربری استفاده می‌کنند. انیمیشن دیگر صرفاً برای خوشایندی نیست –اکنون یکی از مهم‌ترین ابزار برای تعامل مؤثر است.
با این حال، انیمیشن اگر در زمان و مکان درستش مورداستفاده قرار گیرد، در طراحی وب می‌تواند رابط کاربری را ارتقا بخشد. یک رابط کاربری خوب انیمیشنی هدفی دارد و آن هدف، معنا و کارکرد است.
در ادامه برخی موارد آمده که می‌تواند به شما در استفاده از انیمیشن کمک کند:
بازخورد بصری بر اساس عملکرد کاربر.
طراحی وب عاملی خوب، بازخوردی را ارائه می‌دهد. بازخورد بصری زمانی که بخواهید به کاربران درباره نتیجه عملیاتشان گزارشی دهید، بسیار خوب است. در مواردی که عملیات به خوبی انجام نشده، انیمیشن کاربردی می‌تواند اطلاعاتی درباره مشکل ارائه کند و این کار می‌تواند به ساده‌ترین و سریع‌ترین شکل اتفاق بیفتد.
برای مثال، انیمیشن لرزشی می‌تواند در هنگام وارد کردن پسورد اشتباه مورداستفاده قرار گیرد. به راحتی می‌توان فهمید که این تکان خوردن علامتی جهانی برای گفتن "نه" است چرا که سر تکان دادن ساده در ارتباطات بین فردی وجود دارد.
قابلیت مشاهده وضعیت سیستم.
یکی از 10 روش کاربردی بودن جیکوب نیلسن، قابلیت مشاهده وضعیت سیستم است که در میان مهم‌ترین اصول طراحی رابط کاربری قرار دارد. کاربران می‌خواهند وضعیت کنونی خود را در سیستم با توجه به زمانی که سپری شده بدانند و یک اپ نباید بگذارد آن‌ها حدس بزنند، باید از طریق بازخورد بصری مناسب به کاربر بگوید چه اتفاقی دارد رخ می‌دهد.
عملیات بارگذاری و دانلود داده‌ها، فرصت بزرگی برای وجود انیمیشن‌های کاربردی را فراهم می‌کنند. برای مثال، یک نوار بارگذاری انیمیت شده نشان می‌دهد که این پروسه با چه سرعتی قرار است انجام شود و انتظاراتی برای سرعت عملکرد آن در کاربر ایجاد می‌کند.
انتقال ناوبری.
انتقال ناوبری، یعنی جابجایی میان وضعیت‌های مختلف وب‌سایت –برای مثال، از نگاهی سطح بالا به نگاهی جزئی. به طور پیش‌فرض، وضعیت اغلب شامل برش‌هایی می‌شود که می‌تواند دنبال کردن سایت را دشوار سازد.
انیمیشن کاربردی می‌تواند در طول این لحظات تغییر یابد و کار را ساده کند و آن‌ها را از طریق زمینه ناوبری و تغییراتی که روی صفحه نشان داده می‌شود و از طریق ساخت اتصالی بصری، انتقال دهد.
انیمیشن برندسازی.
فرض کنید شما ده‌ها وب‌سایت دارید که ویژگی‌های مشابهی دارند و به کاربران در انجام امورشان کمک می‌کنند. احتمالاً همه آن‌ها، رابط کاربری خوبی پیشنهاد می‌دهند اما یکی که مردم واقعاً آن را دوست دارد چیزی بیشتر از رابط کاربری خوب پیشنهاد می‌دهد.
ارتباطی حسی با کاربران برقرار می‌کند. انیمیشن برندسازی، نقش مهمی در مشارکت دادن کاربران بازی می‌کند. می‌تواند از ارزش‌های برند یک شرکت حمایت کند، قدرت محصولات را برجسته کند و رابط کاربری حیرت‌انگیزی ایجاد کند.
امروزه، تقریباً 50 درصد کاربران از طریق تلفن‌های همراهشان به وب دسترسی دارند. این چه معنایی برای شما طراحان وب دارد؟ به این معنا است که باید استراتژی‌ای مربوط به تلفن همراه هنگامی‌که طراحی هر وب‌سایت پیش رویتان است، داشته باشید.
بسیار ضروری است که وب‌سایت خود را برای انواع صفحات نمایش تلفن همراه و دسکتاپ بهینه‌سازی کنید، هر کدام از ابزارها، رزولوشن تصویر متفاوتی دارند و تکنولوژی‌های مختلفی آن‌ها را پشتیبانی می‌کند.
به دنبال طرح تک‌ستونی باشید.
طرح تک‌ستونی معمولاً روی تلفن‌های همراه بهترین عملکرد را دارد. نه‌تنها یک تک‌ستونی به شما در مدیریت فضای محدود روی صفحه نمایش کوچک کمک می‌کنند بلکه به راحتی می‌توانید بین رزولوشن ابزارهای متفاوت و وضعیت «پرتره» یا «منظره» تفاوتی قائل شوید.
از الگوی «اولویت +» برای اولویت‌بندی ناوبری در طول طراحی وب استفاده کنید.
اولویت + اصطلاحی است که توسط مایکل شارناگل تعریف شد تا نوعی از ناوبری را توصیف کند که آن چیزی که مهم‌ترین عنصر است را درخواست کند و موارد کم‌اهمیت‌تر را پشت دکمه «بیشتر» پنهان کند. این باعث می‌شود که از فضای در دسترس صفحه نیز استفاده شود.
همان‌طور که فضا افزایش می‌یابد، تعداد گزینه‌های ناوبری در معرض دید افزایش می‌یابد که می‌تواند منجر به قابلیت مشاهده بیشتر و مشارکت بیشتر شود. این الگو به خصوص برای وب‌سایت‌های محتوا محور با برگه‌ها و صفحات متفاوت خوب است (همچون وب‌سایت‌های خبری یا فروشگاه‌های خرده‌فروشی بزرگ).
گاردین از الگوی اولویت + برای بخش ناوبری خود استفاده می‌کند. موارد کم‌اهمیتش وقتی برای کاربر مشخص می‌شود که روی دکمه «همه» کلیک کند.
مطمئن شوید تصاویر به خوبی برای نمایشگرها و پلتفرم‌های دیگر آماده شده‌اند.
یک وب‌سایت باید روی همه دستگاه‌ها و همه رزولوشن‌ها متناسب باشد. مدیریت، دست‌کاری و انتقال تصاویر یکی از چالش‌های اصلی طراحان وب است که هنگام ساختن وب‌سایت‌های واکنش‌گرا با آن روبرو می‌شوند. برای ساده کردن این کار، می‌توانید از ابزارهایی همچون Responsive Image Breakpoints Generator برای تولید تصاویر مناسب استفاده کنید.
روی وب تلفن همراه، تعامل از طریق ضربه انگشت اتفاق می‌افتد نه کلیک ماوس. این به این معنا است که قوانین متفاوتی در هنگام طراحی وب اهداف و تعامل لمسی، صدق می‌کند.
هدف لمس باید از اندازه مناسبی برخوردار باشد.
همه عناصر تعاملی (همچون لینک‌ها، دکمه‌ها و منوها) باید قابل ضربه زدن باشند. درحالی‌که وب دسکتاپ به خوبی برای لینک‌هایی که کوچک هستند عمل می‌کند، وب تلفن همراه نیاز به دکمه بزرگ‌تری دارد که بتواند به راحتی با شست فشرده شود.
وقتی از ضربه انگشت به عنوان روش ورودی اولیه وب‌سایت استفاده می‌کنید، به مطالعات آزمایشگاه لمسی MIT بر‌گردید تا اندازه مناسبی برای دکمه‌هایتان انتخاب کنید.
مطالعات نشان می‌دهد که سایز متوسط انگشت بین 10 و 14 میلی‌متر است و طیف نوک انگشت از 8 تا 10 میلی‌متر است که یک فضای 10*10 را می‌طلبد.
نشانگرهای بصری قدرتمندتر تعاملی.
در وب تلفن همراه، هیچ وضعیت شناوری وجود ندارد. درحالی‌که روی دسکتاپ، این امکان فراهم است تا وقتی ماوس روی عنصری قرار می‌گیرد از بازخورد بصری متفاوتی برخوردار شود (برای مثال، پایین افتادن منو هنگامی‌که ماوس روی آن قرار می‌گیرد)، کاربر تلفن همراه باید ضربه بزند تا جوابی بگیرد.
بنابراین کاربران باید قادر باشند پیش‌بینی کنند اگر دستی به دکمه‌ای بزنند چه واکنشی نشان خواهد داد.
محصولات امروز باید در دسترس همگان باشند بدون توجه به توانایی افراد. طراحی سایت برای کاربرانی که اختلالاتی دارند، روشی است که طراحان می‌توانند از این طریق با افرادی که توانایی استفاده را ندارند همدردی کنند و با آن‌ها چیزهای جدیدی را تجربه کنند.
بسیاری از وب‌سایت‌ها از تضاد کمی برای کپی متن برخوردار هستند. درحالی‌که تضاد پایین ممکن است بیشتر رواج را داشته باشد درعین‌حال بسیار غیرقابل‌دسترس است. تضاد پایین به خصوص برای کاربرانی که کم‌بینا هستند یا چشمان ضعیفی دارند بسیار دشوار است و مشکل ایجاد می‌کند.
متن‌هایی که تضاد پایینی دارند را به سختی می‌توان از روی دسکتاپ خواند اما وقتی دشوارتر می‌شود که وارد تلفن همراه شود. تصور کنید می‌خواهید متنی با تضاد رنگی پایین را بر روی ابزار تلفن همراه بخوانید درحالی‌که زیر نور خورشید راه می‌روید.
این نکته خوبی است که طراحی بصری قابل‌دسترس بهتر از طراحی بصری برای همه کاربران است.
هرگز قابلیت استفاده را فدای زیبایی نکنید. مهم‌ترین ویژگی متن و دیگر عناصر مهم وب‌سایت خوانایی است. خوانایی نیاز به تضاد کافی میان متن و رنگ پس‌زمینه دارد. برای اطمینان از خوانا بودن می‌توانید از افرادی که اختلال بصری دارند کمک بگیرید.
همچنین راهنمای دسترسی محتوای وب، توصیه‌هایی در این ارتباط دارد. مقدار تضادی که در ادامه آمده برای متن بدنه و متن تصاویر پیشنهاد شده است:
متن کوچک باید میزان تضاد حداقلی 4.5:1 نسبت به پس‌زمینه داشته باشد. میزان 7:1 ترجیحاً.
کاربرانی که کوررنگی دارند.
تخمین زده شده که 4/5 درصد جمعیت جهان کوررنگی دارند ( 10 به 12 در مردان و 1 به 200 در زنان)، 4 درصد از دید کم رنج می‌برند (1 به 30 در افراد) و 0/6 درصد نابینا هستند (1 به 188 در افراد). به راحتی می‌توان فراموش کرد که ما برای این گروه از کاربران نیز طراحی می‌کنیم چرا که بیشتر طراحان تجربه چنین مشکلاتی را ندارند.
برای اینکه طراحی سایت را متناسب با چنین کاربرانی انجام دهیم باید از تک رنگ برای انتقال معنا پرهیز کنیم. همان‌طور که W3C می‌گوید، رنگ نباید به عنوان «تنها عنصر بصری انتقال اطلاعات، نشان‌دهنده عمل، پاسخ‌دهی یا تمایزبخشی به عناصر بصری مورداستفاده قرار گیرد.»
یک مثال رایج در جایی که رنگ به عنوان تنها وسیله انتقال اطلاعات به شمار می‌رود، علامت هشدار در فرم‌ها است. پیام‌های خطا و موفقیت اغلب به رنگ سبز و قرمز هستند.
اما قرمز و سبز رنگ‌هایی هستند که تحت تأثیر کمبود بینایی قرار می‌گیرند این رنگ‌ها را به سختی می‌توان برای افرادی که کوررنگی دارند متمایز کرد.
به احتمال زیاد، شما پیام‌های اشتباهی همچون «فضایی که قرمز است باید پر شود» مواجه شده‌اید درحالی‌که ممکن است آن را مشکل بزرگی نبینید ولی این پیام هشدار در فرمی نشان داده می‌شود که برای افراد کم‌بینا بسیار دشوار و ناامیدکننده است. طراحان باید از رنگی استفاده کنند که در هر وضعیتی قابل‌مشاهده باشد.
در برخی از فرم‌ها می‌توانید علاوه بر رنگ سبز یا قرمز، در انتها بنویسید که کدام قسمت دچار اشتباه است که مشکل آن قسمت به طور جداگانه بررسی شود.
تصاویر و تصویرسازی‌ها بخش مهمی از طراحی سایت هستند. افراد نابینا از تکنولوژی‌های خاصی همچون صفحه‌خوان استفاده می‌کنند تا صفحه وب‌سایت را برایشان تفسیر کند.
صفحه‌خوان، تصاویر را با تکیه بر متن جایگزینی که برای تصاویر طراحی کرده‌اید می‌خواند. اگر آن متن وجود نداشته باشد یا به اندازه کافی توضیح نداده باشید، کاربران نابینا قادر به دریافت اطلاعات شما نخواهند بود.
2 مثال را در نظر بگیرید اول، تردلس، فروشگاه مشهور تی‌شرت. این صفحه حرف زیادی درباره چیزی که می‌فروشد ندارد. تنها اطلاعات متنی در دسترس، ترکیبی از قیمت و اندازه است.
دومین نمونه از اسوس است. این صفحه پیراهن مشابه همان قبلی می‌فروشد اما اطلاعات جایگزین متنی دقیقی برای وب‌سایت خود ارائه می‌کند. این به افرادی که از صفحه خوان استفاده می‌کنند کمک می‌کند تا تصور کنند چه چیزی می‌خواهند بخرند.
وقتی متن جایگزینی برای تصاویر می‌نویسید، به موارد زیر توجه کنید:
همه تصاویر معنادار نیاز به توضیح متنی جایگزین دارند. (تصویر معنادار به اطلاعاتی که منتقل می‌کنید، کمک شایانی می‌کنند.)
اگر عکسی که استفاده کرده‌اید صرفاً جنبه تزئینی دارد و هیچ کاربردی در انتقال اطلاعاتی که به کاربر می‌دهید، ندارد و بدتر ممکن است باعث به اشتباه انداختن او شود، نیازی به استفاده از متن جایگزین ندارید.
کاربران مشخصی به وسیله کیبورد در اینترنت جستجو می‌کنند نه ماوس. برای مثال، افراد با اختلالات حرکتی که نمی‌توانند به خوبی دستشان را برای گرفتن ماوس تکان دهند، از این دسته هستند.
آسان ساختن عناصر ناوبری و تعاملی ساختن آن‌ها برای این گروه از کاربران، باعث می‌شود که آن‌ها با تمرکز روی دکمه تب، به همه‌جای وب‌سایت دسترسی داشته باشند.
در ادامه چند قانون ساده در ارتباط با ناوبری کیبورد را مرور می‌کنیم:
آزمایش کردن بخش اساسی پروسه طراحی UI است. و درست مثل هر بخش دیگری از طراحی سایت به صورت چرخه‌ای و تکراری است. بازخوردهای پروسه طراحی خود را جمع‌آوری کنید و مجدداً آزمایش کنید.
کاربران از صفحات وبی که به کندی بارگذاری شوند متنفر هستند. به همین خاطر است که سرعت پاسخ، از عوامل مهم در وب‌سایت‌های مدرن است. طبق گروه نیلسن نورمن، سه محدودیت زمان پاسخ‌دهی وجود دارد:
0/1 ثانیه: احساس سریع بودن به کاربر می‌دهد.
به طور مشخص نباید کاربران را 10 ثانیه برای هر چیزی در وب‌سایتمان معطل کنیم. اما حتی چند ثانیه تأخیر –که به‌طورمعمول اتفاق می‌افتد- می‌تواند تجربه‌ای ناخوشایند باشد. کاربران از صبر کردن زیاد کلافه می‌شوند.
چه چیزی معمولاً باعث کند شدن زمان بارگذاری می‌شود؟
مطالب سنگین (همچون ویدئو و اسلایدها)
ابزاری همچون Page Speed Insights به شما در فهمیدن دلیل کندی وب‌سایت کمک خواهند کرد.
آزمایش A/B زمانی ایده آل است که به دنبال انتخاب بین دو نسخه طراحی باشید (همچون نسخه موجود و نسخه بازطراحی صفحه‌تان). این روش تست متشکل است از نمایش یکی از دو نسخه به صورت تصادفی به تعداد مشخصی از کاربر و سپس بررسی و تجزیه و تحلیل اینکه کدام‌یک مؤثرتر واقع‌شده‌اند.
پروسه طراحی UI دو گام مهم دارد: نمونه‌سازی طراحی و توسعه راه‌حلی کاربردی. گامی که این دو را به یکدیگر وصل می‌کند دستیار نام دارد. به محض اینکه طراحی به مرحله نهایی می‌رسد و آماده رسیدن به توسعه‌دهنده است، طراحان مشخصاتی آماده می‌کنند که در آن سندی است که توصیف می‌کند طراحی پیش رو چگونه باید کدنگاری شود.
مشخصات این اطمینان را می‌دهد که طراحی باید طبق همان چیزی که طراحی‌شده به‌کارگیری شود. دقت در مشخصات بسیار مهم است چرا که مشخصات غیر دقیق باعث می‌شود توسعه‌دهنده بر حدس و گمان خود تکیه کند یا مجبور باشد برگردد و از طراح پاسخ سؤالاتش را بگیرد. اما سرهم‌بندی دستی مشخصات می‌تواند سخت باشد و معمولاً زمان زیادی می‌گیرد و این زمان بسته به پیچیدگی طرح متفاوت خواهد بود.
با ویژگی طراحی مشخصات در ادوبی XD طراحان می‌توانند URL عمومی برای توسعه‌دهنده بسازند تا فضای کار را ببینید و اندازه‌ها و طرح‌ها را داشته باشند. طراحان دیگر نیاز به صرف زمان برای نوشتن مشخصات و رنگ‌ها و این مسائل برای توسعه‌دهنده ندارند.
درست مثل هر جنبه دیگری از طراحی، نکاتی که در اینجا به اشتراک گذاشته شد صرفاً یک شروع است. این ایده‌ها را با ایده‌های خودتان ترکیب کنید تا بهترین نتیجه را بگیرید. با وب‌سایت خود به عنوان پروژه‌ای در حال تغییر و تحول برخورد کنید و از تجزیه و تحلیل‌ها و بازخوردها برای بهبود مداوم استفاده کنید. و به خاطر داشته باشید که طراحی فقط برای طراحان نیست. بلکه برای کاربران است.
طراحی وب سایت شخصی/شرکتی خود را چگونه انجام داده اید؟
تجربه ای در زمینه طراحی سایت برای خود دارید؟ طراحی سایت اختصاصی چه چالش هایی برای شما داشته است؟
در صورت تمایل به یادگیری می توانید مقالات طراحی سایت آران را دنبال کنید.
چنانچه در حوزه طراحی سایت نیازمند ارائه مشاوره و خدمات حرفه ای و تخصصی هستید می توانید از طریق این صفحه با ما در ارتباط باشید.
