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

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

اصول طراحی وب سایت خوب و دستورالعمل های طراحی وب سایت موثر

کاربران چگونه فکر می کنند؟

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

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

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

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

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

۱. کاربران را وادار به تفکر نکنید.

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

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

بیایید به یک مثال نگاه کنیم. Beyondis.co.uk ادعا می کند که “فراتر از کانال ها، فراتر از محصولات، فراتر از توزیع” است. چه مفهومی داره؟ از آنجایی که کاربران تمایل دارند وب‌سایت‌ها را مطابق با الگوی «F» کاوش کنند، این سه عبارت اولین عناصری هستند که کاربران پس از بارگیری آن در صفحه مشاهده خواهند کرد.
اگرچه طراحی به خودی خود ساده و شهودی است، اما برای درک اینکه کاربر در مورد صفحه چیست، نیاز به جستجوی پاسخ دارد. این همان علامت سوال غیر ضروری است. وظیفه طراح این است که مطمئن شود تعداد علامت سوال ها نزدیک به 0 است. توضیح تصویری در سمت راست قرار می گیرد. فقط تبادل هر دو بلوک قابلیت استفاده را افزایش می دهد.

ExpressionEngine از ساختار مشابه Beyondis استفاده می کند، اما از علامت های سوال غیر ضروری اجتناب می کند. علاوه بر این، این شعار کاربردی می شود زیرا به کاربران گزینه هایی برای امتحان سرویس و دانلود نسخه رایگان ارائه می شود. با کاهش بار شناختی، درک ایده پشت سیستم را برای بازدیدکنندگان آسان تر می کنید. هنگامی که به این امر دست یافتید، می توانید دلیل مفید بودن سیستم و نحوه بهره مندی کاربران از آن را بیان کنید. اگر مردم راه خود را در وب سایت شما پیدا نکنند، از وب سایت شما استفاده نخواهند کرد.

۲. صبر کاربران را هدر ندهید

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

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

۳. مدیریت تمرکز توجه کاربران

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

Humanized کاملاً از اصل تمرکز استفاده می کند. تنها عنصری که مستقیماً برای کاربران قابل مشاهده است کلمه “رایگان” است که جذاب است، اما همچنان آرام و کاملاً آموزنده است. نکات ظریف اطلاعات کافی در مورد چگونگی یافتن اطلاعات بیشتر در مورد محصول “رایگان” در اختیار کاربران قرار می دهد. تمرکز توجه کاربران به مناطق خاصی از سایت با استفاده متوسط از عناصر بصری می تواند به بازدیدکنندگان شما کمک کند تا از نقطه A به نقطه B برسند بدون اینکه فکر کنند واقعاً چگونه باید انجام شود. هرچه بازدیدکنندگان علامت سوال کمتری داشته باشند، حس جهت گیری بهتری دارند و اعتماد بیشتری نسبت به شرکتی که سایت نشان می دهد، افزایش می دهد. به عبارت دیگر: هر چه کمتر نیاز به تفکر در پشت صحنه باشد، تجربه کاربری بهتر است که در وهله اول هدف استفاده از آن است.

۴. برای قرار گرفتن در معرض ویژگی ها تلاش کنید

طراحی‌های وب مدرن معمولاً به دلیل رویکردشان در راهنمایی کاربران با گام‌های انجام شده ۱-۲-۳ جذاب، دکمه‌های بزرگ با جلوه‌های بصری و غیره مورد انتقاد قرار می‌گیرند. اما از منظر طراحی، این عناصر در واقع چیز بدی نیستند. برعکس، چنین دستورالعمل هایی بسیار مؤثر هستند زیرا بازدیدکنندگان را به روشی بسیار ساده و کاربرپسند از طریق محتوای سایت هدایت می کنند.

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

۵. از نوشتن موثر استفاده کنید

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

Eleven2.com مستقیماً به موضوع می رسد. بدون کلمات زیبا، بدون اظهارات اغراق آمیز. در عوض قیمت: همان چیزی که بازدیدکنندگان به دنبال آن هستند.

یک راه حل بهینه برای نوشتن موثر این است که

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

۶. برای سادگی تلاش کنید

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

فینچ به وضوح اطلاعات مربوط به سایت را ارائه می دهد و به بازدیدکنندگان امکان انتخاب گزینه ها را بدون شلوغ کردن آنها با محتوای غیر ضروری می دهد.

۷. از فضای سفید نترسید

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

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

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

۸. ارتباط موثر با یک “زبان قابل مشاهده”

آرون مارکوس در مقالات خود در مورد ارتباط بصری موثر، سه اصل اساسی را در استفاده از به اصطلاح “زبان قابل مشاهده” بیان می کند – محتوایی که کاربران روی صفحه می بینند.

• سازماندهی: ساختار مفهومی واضح و ثابتی را در اختیار کاربر قرار دهید. سازگاری، چیدمان صفحه نمایش، روابط و قابلیت کشتیرانی مفاهیم مهم سازمان هستند. کنوانسیون ها و قوانین یکسان باید در مورد همه عناصر اعمال شود.
• صرفه جویی کنید: با کمترین نشانه و عناصر بصری بیشترین کار را انجام دهید. چهار نکته اصلی که باید در نظر گرفته شود: سادگی، وضوح، متمایز بودن و تاکید. سادگی فقط شامل عناصری می شود که برای ارتباط بسیار مهم هستند. وضوح: همه اجزا باید طوری طراحی شوند که معنای آنها مبهم نباشد. متمایز بودن: ویژگی های مهم عناصر ضروری باید قابل تشخیص باشند. تاکید: مهمترین عناصر باید به راحتی درک شوند.
• ارتباط: مطابقت ارائه با قابلیت های کاربر. رابط کاربری برای برقراری ارتباط موفق باید خوانایی، خوانایی، تایپوگرافی، نمادگرایی، نماهای متعدد و رنگ یا بافت را متعادل نگه دارد. از حداکثر استفاده کنید 3 تایپ در حداکثر اندازه 3 نقطه – حداکثر 18 کلمه یا 50-80 کاراکتر در هر خط متن.

۹. کنوانسیون ها دوستان ما هستند

طراحی متعارف عناصر سایت منجر به یک وب سایت خسته کننده نمی شود. در واقع، قراردادها بسیار مفید هستند زیرا منحنی یادگیری را کاهش می‌دهند، یعنی نیاز به فهمیدن نحوه کار کردن چیزها. به عنوان مثال، اگر همه وب‌سایت‌ها نمایش تصویری متفاوتی از فیدهای RSS داشته باشند، یک کابوس قابل استفاده خواهد بود. این تفاوت چندانی با زندگی عادی ما ندارد، جایی که ما تمایل داریم به اصول اولیه نحوه سازماندهی داده ها (پوشه ها) یا خرید (جایگزینی محصولات) عادت کنیم. با کنوانسیون ها می توانید اعتماد، قابلیت اطمینان کاربران را به دست آورید و اعتبار خود را ثابت کنید. انتظارات کاربران را دنبال کنید – درک کنید که آنها از ناوبری سایت، ساختار متن، محل جستجو و غیره انتظار دارند. یک مثال معمولی از جلسات قابلیت استفاده این است که صفحه را به ژاپنی ترجمه کنید (با فرض اینکه کاربران وب شما ژاپنی نمی دانند، به عنوان مثال با Babelfish) و به آزمایش کنندگان قابلیت استفاده خود وظیفه ای برای یافتن چیزی در صفحه به زبان های مختلف ارائه دهید. اگر قراردادها به خوبی اعمال شوند، کاربران قادر خواهند بود به یک هدف نه چندان خاص دست یابند، حتی اگر یک کلمه از آن را درک نکنند. استیو کروگ پیشنهاد می‌کند که بهتر است فقط زمانی نوآوری کنید که می‌دانید واقعاً ایده بهتری دارید، اما وقتی ندارید از مزایای قراردادها استفاده کنید.

۱۰. زود تست کنید، اغلب تست کنید

این به اصطلاح اصل TETO باید برای هر پروژه طراحی وب اعمال شود، زیرا تست های قابلیت استفاده اغلب بینش های مهمی را در مورد مشکلات و مسائل مهم مربوط به یک طرح بندی ارائه می دهند. نه خیلی دیر، نه خیلی کم و نه به دلایل اشتباه تست کنید. در مورد دوم، درک این نکته ضروری است که اکثر تصمیمات طراحی محلی هستند. این بدان معناست که شما نمی توانید به طور کلی پاسخ دهید که آیا یک طرح بندی بهتر از دیگری است یا خیر، زیرا باید آن را از یک نقطه نظر بسیار خاص تجزیه و تحلیل کنید (با توجه به الزامات، سهامداران، بودجه و غیره).

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