10 чудових порад щодо юзабіліті
Оригінал: http://promolab.org/go.php?url=http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/
Автор: Dmitry Fadeyev (Smashing Magazine)
Переклад: http://promolab.org/go.php?url=http://maax.ws/usability/61
Кожен погодиться, що юзабіліті є важливим аспектом веб-дизайну. Незважаючи на те, чи працюєте ви над дизайном сайту портфоліо, над онлайн магазином або веб-додатком, важливо зробити сторінки зручними і простими для користувачів. У протягом останніх років було зроблено багато досліджень про різні аспекти веб-дизайну і дизайну інтерфейсів. Результати цих досліджень вельми значущі і допомагають нам поліпшити якість наших робіт. Дана стаття містить 10 корисних висновків і принципів юзабіліті, які допоможуть вам поліпшити враження користувачів від ваших сайтів.
Ярлики полів форм краще ставити над полями форми
Дослідження, зроблене http://promolab.org/go.php?url=http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php, показало, що найкраще ярлики форм ставити над полями форми. На багатьох формах ярлики поставлені на лівій стороні полів, створюючи цим макет з двома стовпцями; в той час як це добре виглядає, це не є найбільш простим макетом для використання. Із за чого ж це? Виходячи з того, що форми в основному вертикально орієнтовані, користувачі вводять інформацію у форми зверху вниз. Користувачі йдуть за формами зверху вниз і для них буде зручніше читати ярлики над полями форми, ніж шукати їх на лівій стороні форми.
Сайт http://promolab.org/go.php?url=http://www.tumblr.com/ має просту й елегантну форму реєстрації, що відповідає рекомендаціям UX Matter.
Позиціонування ярликів на лівій стороні в свою чергу створює іншу проблему: за яким краєм ви вирівнюєте ярлики, по лівому краю або ж по правому? Вирівнювання по лівому краю робить форму візуально зручною, але розділяє ярлики від форм, із за чого буде важко зрозуміти який ярлик відноситься до якого полю форми.
Вирівнювання по правому краю робить протилежне: форма приємна на вигляд, але вона вже візуально незручна. Вставка ярликів над полями форм буде найбільш зручним в більшості випадків. Дослідження також показало, що ярлики не повинні бути жирними, але ця рекомендація не є обов'язковою.
Користувачі концентруються на обличчях
Люди інстинктивно помічають інших людей відразу ж, як вони приходять в полі зору. На веб-сторінках ми звертаємо основну увагу на обличчя, і очі, що дає маркетологам хороший інструмент для залучення уваги. Але нашу увагу до осіб і очам людей це тільки початок, виявляється, насправді ми навіть починаємо дивитися в тому напрямку, куди дивиться людина на малюнку.
Теплова карта відстеження погляду під час перегляду зображення з дитиною, який дивиться прямо на нас. Дослідження зроблено http://promolab.org/go.php?url=http://usableworld.com.au/2009/03/16/you-look-where-they-look/.
А зараз дитина дивиться на контент. Зверніть увагу на збільшення кількості поглядів людей на заголовок і текст.
Це http://promolab.org/go.php?url=http://usableworld.com.au/2009/03/16/you-look-where-they-look/ відстеження погляду. Ми інстинктивно дивимося в напрямку людей, але якщо люди дивляться на що-небудь інше, ми теж починаємо дивитися в цьому напрямку. Користуйтеся перевагами даного феномена, щоб звернути увагу ваших користувачів на важливі частини вашої сторінки.
Якість дизайну є показником довіри
Були проведені різні дослідження для з'ясування факторів, що впливають на довіру людей до веб-сайту.
- http://promolab.org/go.php?url=http://captology.stanford.edu/pdf/Stanford-MakovskyWebCredStudy2002-prelim.pdf
- http://promolab.org/go.php?url=http://captology.stanford.edu/pdf/p61-fogg.pdf
- http://promolab.org/go.php?url=http://captology.stanford.edu/pdf/p80-fogg.pdf
- Елементи, які впливають на показник довіри до сайтів: Попередні Результати Дослідження (матеріали ACM CHI 2000 конференції з людським фактором в обчислювальних системах, v.2, Нью-Йорк: ACM Press)
Ми не знаємо чи хорошим додатком є Fever http://promolab.org/go.php?url=http://feedafever.com/ чи ні, але елегантний користувальницький інтерфейс і веб-сайт створюють відмінне перше враження.
Одним із цікавих висновків цих досліджень є те, що користувачі насправді судять про книгу по обкладинці ... або, скоріше, веб-сайт за своїм дизайном. Такі елементи, як макет, консистенція, типографіка, колір і стиль впливають на те, як користувачі сприймають ваш сайт і яку картину ви проеціруете. Ваш сайт повинен проектувати не тільки гарне зображення, але також повинен проектувати правильне для вашої аудієнції зображення.
Іншими чинниками що впливають на довіру до сайту є: якість контенту веб-сайту, кількість помилок, частота оновлень, простота використання, надійність авторів.
Більшість користувачів не прокручує
Дослідження Якоба Нільсена (Jakob Nielsen) про те, скільки користувачів прокручують сторінку (Визначення пріоритетів у юзабіліті сайтів: http://promolab.org/go.php?url=http://www.useit.com/prioritizing/), виявило, що тільки 23% користувачів прокручують сторінку при своєму першому відвідуванні сайту. Це означає, що 77% користувачів не будуть прокручувати сторінку, вони просто переглянуть контент до потреби прокручування. Більше того, відсоток користувачів, які будуть прокручувати зменшиться при наступних візитах сайту до 16%. Ці дані свідчать про те, наскільки важливо показати важливу інформацію у видному місці, особливо на цільових сторінках.
Це не означає, що ви повинні зібрати надмірна кількість інформації в шапці сайту, це лише означає, що ви повинні використовувати цю частину сторінки найкращим чином. Надмірна кількість інформації в шапці сайту просто зробить вміст недоступним, коли користувач бачить дуже багато інформації, він не буде знати де саме почати перегляд всього цього.
http://promolab.org/go.php?url=http://www.basecamphq.com/ використовує місце чудовим чином. У верхній частині екрана (768 пікселів у висоту) він показує великий скріншот, підзаголовок, пропозиція, заклик до дії, список клієнтів, відео та короткий список можливостей, з зображеннями.
Це найголовніше для домашньої сторінки, на якій усі нові користувачі опиняться в першу чергу.
Так надайте в цій частині сайту основні дані:
- Ім'я сайту,
- Пропозиція значущості (тобто, які вигоди вони отримають від його використання),
- Навігація по основних частин сайту, які важливі для користувача.
Найкращий колір для посилань це синій
Дуже добре, коли ви створюєте для свого сайту унікальний дизайн, але коли мова йде про юзабіліті, краще робити те, що всі інші роблять. Дотримуйтесь конвенціями, тому що коли люди відвідують новий сайт, вони завжди шукають речі на тих місцях, де вони звикли їх знаходити на інших сайтах, вони використовують свій досвід, щоб осмислити новий вміст. Це називається «використання зразків». Люди очікують певних речей, таких як кольори посилань, розташування логотипу сайту, поведінка вкладок навігації і т.д.
Google всегда делает свои ссылки синими и на то есть причина: цвет знаком многим пользователем, из за чего ссылки легко обнаружить.
Який колір повинні мати посилання? Перше міркування це контраст: посилання повинні бути досить темними (або світлими) щоб контрастувати з кольором фону. Наступне, вони повинні відрізнятися від іншого тексту на сторінці, так що не треба робити чорні заслання, коли сам текст на сторінці чорний. І нарешті, дослідження показало (Ван Шайко (Van Schaik) і Лінг (Ling)), що якщо ви ставите пріоритет на юзабіліті, то посилання краще робити синіми. Колір посилань браузера за умовчанням це синій, так що люди очікують побачити саме цей колір. Вибір іншого кольору аж ніяк не проблема, але користувачам буде потрібно більше часу на знаходження таких посилань.
Ідеальне поле введення пошукового запиту має бути 27 символів у ширину
Яка повинна бути ширина біля ідеального поля для введення пошукового запиту? Якоб Нільсен (Jacob Nielsen) провів дослідження на тему кількості символів в пошукових запитах введених у поля пошуку на сайтах. Виявляється, що більшість сьогоднішніх полів вводу пошукового запиту дуже короткі. Проблема з короткими полями введення пошукового запиту полягає в тому, що, незважаючи на те, що ви можете писати досить довгий пошукової запит, лише мала частина його буде видно одночасно, що робить важким подальшу її правку.
Дослідження показало, що в середньому поля введення пошукового запиту мають ширину в 18 символів. Судячи за даними, 27% пошукових запитів були занадто довгими і не помістилися в них. Розширення поля введення пошукового запиту до 27 символів у довжину дозволить помістити в ньому 90% пошукових запитів. Пам'ятайте, що ви можете ставити ширину не тільки в пікселях і пунктах, але також і в «em» (відносна одиниця довжини, що дорівнює розміру поточного шрифту). Таким чином використовуйте цю величину для встановлення ширини поля введення пошукового запиту до 27 символів.
Поле введення пошукового запиту Google є досить широкою для довгих пошукових запитів.
Поле введення пошукового запиту Apple занадто коротке, запит "Microsoft Office 2008." В ньому не помістився.
Загалом, краще робити поля пошукового запиту занадто довгими, ніж занадто короткими, щоб користувачі могли швидко перевірити введений запит і відправити його. Це досить проста порада, але, на жаль, дуже часто її відхиляють і ігнорують.
Вільний простір покращує розуміння
Більшість дизайнерів знає значення порожнього простору, який є простором між параграфами, зображеннями, кнопками та іншими елементами на сторінці. Вільний простір робить об'єкти на сторінці більш чіткими і виділеними. Ми можемо також групувати пункти за рахунок зменшення відстані між ними і збільшення простору між ними та іншими елементами на цій сторінці. Це важливо для демонстрації відносин між елементами (наприклад, показати, що ця кнопка відноситься до цієї групи елементів) і будівлі ієрархії елементів на сторінці.
Зверніть увагу на широку кордон вмісту і поділ параграфів на сайті The Netsetter: http://promolab.org/go.php?url=http://thenetsetter.com/blog/. Все це простір робить вміст простим і комфортним для читання.
Вільний простір теж робить вміст більш легкий для читання. Дослідження показало, що використання вільного простору між параграфами і в лівій і правій колонках підвищує розуміння на 20%.
Насправді, згідно з Чаперро (Chaperro), Шайху (Shaikh) і Бейкеру (Baker), макет веб-сторінки (включаючи пробіли, заголовки і відступи) не може помітно вплинути на продуктивність, проте буде впливати на ступінь задоволеності користувача.
Ефективне користувацьке тестування не повинно бути великим
Дослідження Якоба Нільсена (Jakob Nielsen) на тему ідеального числа тестуючих юзабіліті сайту показало, що всього 5 тестуючих користувачів виявлять майже 85% всіх проблем на вашому сайті, у той час як 15 тестуючих виявлять майже всі проблеми.
Найбільші проблеми зазвичай знаходяться перший або першими двома тестерами, решта тестуючі підтверджують ці проблеми і знаходять інші дрібні проблеми. Всього два тестуючих користувача ймовірно знайдуть половину проблем на вашому сайті. Що означає, що тестування не повинно бути великим або дорогим для отримання гарних результатів. Найбільші успіхи досягаються при переході від 0 тестуючих до 1, так що не бійтеся робити занадто мало: будь-яке тестування краще, ніж нічого.
Інформаційні сторінки про продукт допоможуть вам виділитися
Якщо ваш сайт має сторінки продуктів, люди, які будуть купувати ці продукти, без сумніву, переглянуть їх. Але багато сторінок продуктів містять недостатньо інформації, навіть якщо користувачі їх лише побіжно переглянуть. Це серйозна проблема, тому що інформація про продукт допоможе людям прийняти рішення про покупку. Дослідження показало, що 8% проблем зі зручністю пов'язано з недостатньою інформацією про продукти, що також викликає 10% втрат клієнтів (тобто користувач просто залишає сайт).
Apple надає окремі сторінки «Технічні характеристики» для кожного зі своїх продуктів, тим самим відокремлюючи важкі технічні деталі від легких маркетингових сторінок, але при потребі надаючи доступ до таких даних.
Надайте вашим користувачам докладну інформацію про ваші продукти, але не навантажуйте їх великою кількістю тексту. Необхідно надати їм легкозасвоювану інформацію. Розділіть текст на маленькі блоки і використовуйте багато підзаголовків. Вставте в такі сторінки багато зображень вашого продукту і використовуйте правильну мову: не використовуйте жаргонні вирази, які ваші користувачі можуть не зрозуміти.
Більшість користувачів не бачить рекламу
Якоб Нільсен, (Jakob Nielsen) у своєму топіку на http://promolab.org/go.php?url=http://www.useit.com/alertbox/banner-blindness.html, говорить про те, що більшість користувачів просто не бачить рекламу. Якщо вони шукають якусь конкретну інформацію або націлені на матеріали сайту, то вони просто не звернуть ніякої уваги на банери.
Наслідком цього є не тільки те, що користувачі будуть уникати реклами, але що вони будуть уникати всього, що виглядає як реклама, навіть якщо це не є рекламою. Деякі пункти меню можуть виглядати як рекламні банери, так що будьте обережні з такими елементами.
Квадратні банери на лівій стороні сайту FlashDen: http://promolab.org/go.php?url=http://www.flashden.net/ фактично не є банерами: це посилання на контент на тому ж сайті. Вони дуже схожі на банери і можуть бути проігноровані деякими користувачами.
Проте, реклама, яка виглядає як контент, може бути переглянута людьми, які шукають саме цей контент на сторінці. Це може вам принести більший дохід з реклами, але також може знизити довіру користувачів до вашого сайту, тому як вони будуть клікати на банер думаючи, що це посилання на матеріал на сайті. Перед тим як ви зважитеся на таке, подумайте, що краще для вас – короткостроковий дохід або довгострокова довіра?