10 правил юзабилити. Разбираемся на примерах — Дизайн на vc.ru
С каждым днем все больше услуг, начиная от сферы образования и до медицины, переходят в онлайн. Растет спрос, растет предложение, и конкуренция среди онлайн-площадок также стремится вверх. Грамотное и удобное оформление систем необходимо не только чтобы привлечь пользователей, но и чтобы их удержать.
30 199 просмотров
Совместно с UI/UX дизайнерами Forte Group мы решили разобраться в 10-ти правилах эвристики, на которых зиждется весь User Experience, а значит весь опыт взаимодействия с онлайн-системами.
UX дизайн или User Experience — это любой опыт, который пользователь получает при взаимодействии с объектом. Это может быть как опыт использования приложения, так и дверной ручки.
Чтобы продемонстрировать важность UX, обратимся к статистике от ведущего в мире UX агентства — Intechnic:
— 70% пользователей могут уйти с сайта, если им не понравится дизайн интерфейса;
— 62% из них поделится своим негативным опытом с другими пользователями;
— 79% никогда не вернутся на сайт, если им было трудно его использовать в первый раз.
Чтобы ваш сайт или приложение не превратилось в головоломку, проверьте свой продукт 10 правилами юзабилити. Сформулировал их еще в 90-х годах Якоб Нильсен и назвал правилами эвристики. Не смотря на то, что эти правила были придуманы порядка 30-ти лет назад, они актуальны до сих пор.
Давайте пройдемся по каждому из них отдельно и рассмотрим примеры, где они работают, а где нет. В дальнейшем вы сможете использовать этот список, как чек-лист при создании интерфейса. Погнали!
1. Видимость статуса системы
Пользователь всегда должен понимать, что происходит в данный момент в системе (на сайте, в приложение и тп). Производя какие-то действия, пользователь должен понимать, есть у системы отклик или нет. Интерфейс может реагировать через прелоадеры, сообщать о статусах загрузки, объяснять через прогресс бары, счетчики и тд. Кроме этого, статус может сообщаться через окна успешных действий и ошибках. В общем, все элементы, которые помогают понять пользователю, что система работает.
Например, Facebook был одной из первых компаний, которая сделала мобильное приложение и решила кастомизировать прелоадер, значок загрузки при каждом запуске приложения. Но пользователям это не нравилось, они отправляли жалобы о том, что Facebook стал слишком медленно работать.
2. Схожесть системы с реальным миром
Система должна быть очень простой и не превращать взаимодействие с ней в головоломку. Символы внутри системы тоже должны быть простыми и схожими с теми, которые мы используем в реальной жизни.
Система должна быть понятна пользователю не только визуально, но и вербально. Говорите с вашим пользователем на одном языке. Например, на банковских сайтах от слов «лизинг», «факторинг» и «переуступка долга» у пользователя могут разбегаться глаза. Сложные конструкции словно обвиняют в пропуске пар по курсу экономики в университете.
Классный пример можно найти у компании Spotify (музыкальный стриминговый сервис). Когда ты случайно лайкаешь песню, а потом убираешь лайк, внизу выскакивает фраза «Let’s pretend that never happened»(Давай притворимся, что ничего не произошло). Пользователю приятно, так как система дает лаконичный и по-дружески шуточный фидбек.
3. Свобода действий
Действие отмены — самое частое действие, которое совершает пользователь во всех онлайн-системах. Поэтому третье правило звучит так, чтобы любая система предлагала возможность дублировать или отменить последнее совершенное действие.
Это настолько важно, что команда IOS разработала отдельное действие отмены для смартфонов: встряхнуть телефон.
Несмотря на то, что система должна развязывать руки пользователю, до сих пор не все мессенджеры активировали опцию редактирования отправленных сообщений.
Вот еще один неудачный пример, где во время использования сайта магазина одежды, достаточно агрессивно выныривает реклама их мобильного приложения. При просмотре товара, рекламный pop-up закрывает важную кнопку назад. Чтобы вернуться, пользователю нужно искать кнопку назад в браузере и есть вероятность, что после таких игр в кошки-мышки пользователь вообще не вернется на сайт.
4. Стандарты
Есть стандарты однотипных систем, которых стоит придерживаться. Любые отклонения могут привести пользователей в заблуждение. Будет странно, когда ваши подразделы будут кардинально отличаться от подразделов конкурентов. Пользователь просто не сможет их сравнить.
Все знакомы с навигацией интернет-магазинов: меню слева, сверху разделы и поля для логина и пароля, корзина. Это все стандартизировано. Очень сложно найти интернет-магазин, который кардинально отличается от конкурентов.
Еще пример — меню почтовых агентов. Мы уже привыкли, что первыми в списке всегда будут входящие, а в конце списка будут папки Спам и Корзина.
Плохой пример. На сайте BBC есть секция, где люди оставляют комментарии, за которые можно голосовать. Рейтинги Highest обозначены стрелкой вниз, а Lowest стрелкой вверх, (здесь нет логики). Логичнее сделано на Stackoverflow (сайт вопросов\ответов о программировании).
Лучше использовать интуитивно понятные стандарты, чем изобретать велосипед и пытаться переучивать пользователей.
В дизайне любой системы стоит придерживаться одной цветовой гаммы. В примере ниже указана кнопка «Купить», отрисованная разными цветами. Пользователь сразу начинает сомневаться, одну и туже функцию выполняют эти кнопки или нет.
Если система дает сигнал пользователю, что большая красная кнопка выполняет важные действия, она должна выполнять их во всей системе. Ни зеленая или серая, а красная. Должна прослеживаться однородность системы.
5. Предотвращение ошибок
Лучше предупредить о возможности ошибки, чем придумывать красивые и содержательные сообщения о последствиях. Всегда продумывайте сценарии, в которых может возникнуть ошибка, и старайтесь ее предотвратить.
Например, наши гаджеты, которыми мы пользуемся каждый день, предупреждают нас push-уведомлениями, звуковыми сигналами или вибрацией о низком заряде батареи.
Понятно, что ничего не произойдет, если твоя зубная щетка будет разряжена и ты не сможешь почистить зубы. Но, если речь идет о каком-то серьезном оборудовании, где на кону стоит жизнь человека или его здоровье, предупреждающие сигналы очень важны.
Еще пример. При оплате картой онлайн, система сразу подсказывает в полях для заполнения, какую информацию ожидает от пользователя: номер карты, срок действия, имя. Или, когда мы придумываем пароль для регистрации аккаунта, сайт показывает, какие условия для пароля выполнены, а какие нет. Например, в пароле нет заглавной латинской буквы.
6. Узнаваемость
Нельзя заставлять пользователя слишком много думать. Всё взаимодействия должны происходить на интуитивном уровне. Например, всем знакомый знак.
А теперь представьте: вы пошли в бар, выпили коктейль, решили сходить в туалет и видите вот такое.
И не понимаете, в какую вам дверь. Это очень креативно, но заставляет пользователя думать. В итоге, он может не найти то, что искал, либо найти, но поздно:)
Ниже еще пример с эскалаторами, как одна мелкая деталь может полностью изменить восприятие пользователя.
Иконки всё чаще заменяют текст и упрощают нам жизнь, но стоит их использовать аккуратно. Ведь метафоры на иконках могут быть не так очевидны.
Если ты сомневаешься, что твоя иконка считывается правильно, лучше используй текст.
7. Гибкость
Мы никогда не знаем, с каким опытом придет пользователь на наш сайт или приложение, поэтому всегда выигрывают системы, в которых есть ускорители и возможность настраивать действия. Ниже вы найдете поп-ап, у которого есть минимум 4 способа закрытия. Все нашли?
Если система может предоставить пользователю несколько способов совершения одного действия, то пусть сделает это. Если убрать кнопку Close и крестик, то пользователи, у которых не было опыта взаимодействия, с клавишей Esc или с правилом «кликнуть по свободному пространству вокруг поп-апа», растеряются и не сразу смогут закрыть окно.
Еще пример — лайки в инстаграме. Поставить лайк публикации можно не только, кликнув на иконку сердечка, но просто два раза нажав по экрану.
Работа ускорителей хорошо представлена на сайтах покупки билетов. В поле, где вы начинаете вводить желаемое направление маршрута, система сразу начинает вам предлагать варианты на основе уже введенных данных. Если вы ищите маршрут туда-обратно, курсор сам перескакивает из поля туда, в поле обратно, когда вы определяетесь с выбором направления.
8. Простота
Восьмое правило — это эстетика минимализма в дизайне. Чем проще сайт визуально и функционально, тем быстрее пользователь достигнет своей цели на нем. Ниже пример очень перегруженного британского сайта для покупки машин в лизинг.
Обратный пример — поисковик Google. Здесь всё просто, лаконично и интуитивно понятно.
9. Понимание проблем и их решение.
Невозможно избежать ошибок при работе системы. Главное — это правильно объяснить пользователю, почему произошла ошибку и что с этим делать дальше.
Например, при регистрации нового пользователя система подсветит поле ввода, если пользователь с таким именем уже существует. А еще система может предложить варианты свободных имен на основе введенных ранее данных.
Еще пример: сайты для поиска работы. Любой пользователь может опечататься при вводе данных, но система все равно понимает его, обрабатывает запрос и выдает результат. Если бы система не поняла запрос, то поиск не дал бы никаких результатов. Пользователь мог не перепроверить свои действия и уйти с негативным опытом.
10. Справочные материалы и документация
Почти 10% пользователей читают справочные материалы или проходят туториал для использования системы. Чаще всего пройти туториал система предлагает при первом скачивании или регистрации. У пользователя должен быть выбор: проходить обучение или нет. Справочные материалы всегда должны быть легко доступны, даже если пользователь при первом визите в систему отказался проходить туториал.
Хороший пример туториал от IOS по использованию мышки. Здесь показывается не только ее функционал, но и как она взаимодействует в интерфейсе. Сам туториал можно включить и выключить.
Для знакомства пользователей с масштабными и сложными сайтами чаще всего используют FAQ или часто задаваемые вопросы.
На этом всё. Надеемся, вы найдете эти советы и примеры полезными и в дальнейшем будете использовать их при работе с системами. Творите:)
Рекомендации по улучшению юзабилити сайта. Как не допускать распространенных ошибок?
5 — рейтинг статьи
19 Сен 2019
Привлечь посетителей на сайт – это только половина успеха. Нужно заинтересовать аудиторию, сделать пребывание на страницах максимально комфортным и увлекательным. Если не уделить этому вопросу должного внимания, пользователи будут быстро покидать сайт, ухудшатся поведенческие факторы, вырастет процент отказов, трафик превратится в пустой звук. Как это отразится на конверсии – предугадать несложно. Вот почему в план продвижения любого проекта в обязательном порядке включаются работы по улучшению юзабилити сайта. Под этим термином подразумевается обширный комплекс факторов, влияющих на удобство пользования веб-ресурсом.
Оптимизатор, веб-разработчик и дизайнер должны прилагать совместные усилия для того, чтобы интерфейс и функционал были интуитивно понятны широкому кругу посетителей. Хорошее юзабилити – это когда каждый клик дает определенный результат, ничто не мешает аудитории комфортно пользоваться сайтом, просмотр страниц вызывает только положительные эмоции. Посетители должны иметь возможность:
- быстро разобраться в системе навигации;
- без проблем найти нужный продукт;
- воспользоваться поисковыми фильтрами, отсортировать товары;
- ознакомиться с важной информацией о компании, гарантиях, условиях сотрудничества;
- увидеть актуальные контакты на отдельной странице и в шапке сайта;
- посмотреть местоположение на интерактивной карте;
- несколькими кликами оформить покупку или заказать услугу;
- оставить заявку на обратный звонок;
- с любой страницы одним кликом вернуться на главную;
- просматривать страницы на мобильных устройствах;
- без затруднений читать тексты;
- легко скроллить страницы, разворачивать изображения;
-
по мере необходимости находить и использовать доступный функционал.
Ошибки юзабилити могут возникнуть по разным причинам: например, если функционал создается в угоду слишком навороченному дизайну. В результате вместо удобного интерфейса пользователь получает набор «креативно» оформленных страниц, на которых невозможно найти нужную информацию. В один интернет ресурс пытаются поместить десятки функций, которые путают посетителей и отвлекают внимание от продукта. Внешне площадка производит яркое впечатление, а по факту – доставляет аудитории массу неудобств. Нередко встречается и другая крайность, когда сайт выглядит откровенно сырым и недоработанным: функций очень мало, дизайн устарел, контент почти отсутствует. Подобные ресурсы не вызывают интереса и не стимулируют пользователей к активному взаимодействию.
Проблемы с функционалом
Можете забыть о хороших поведенческих факторах и высокой конверсии сайта до тех пор, пока не будут устранены следующие проблемы:
- Длительное ожидание загрузки страницы.
Вопрос решается оптимизацией кода и графики, удалением тяжелых элементов либо переездом на более современный хостинг.
- Отсутствие адаптации под мобильные устройства. Есть два пути решения проблемы: создать отдельную мобильную версию или воспользоваться возможностями адаптивной верстки.
- Неработающие формы и кнопки. Проверьте работоспособность каждого функционального элемента. Убедитесь в том, что заказы из корзины не теряются, а данные заполнения форм действительно приходят на вашу электронную почту.
- Неправильно оформленная страница ошибки 404. Полностью избежать появления недоступных страниц не получится, поэтому займитесь оформлением оригинальной страницы ошибки 404. Не забудьте добавить на нее активную ссылку и приглашение вернуться на сайт.
- Технические сбои. От таких проблем не застрахован даже самый ультрасовременный ресурс. Регулярно мониторьте проект на наличие ошибок и оперативно устраняйте выявленные неполадки.
- Наличие назойливой рекламы и всплывающих окон.
Нет ничего хуже для пользователя (особенно для мобильного), чем навязчивая реклама или всплывающие блоки с приглашением «подписаться», «зарегистрироваться», «не уходить так быстро» и пр. Если без них обойтись сложно, обеспечьте простую возможность закрыть нежелательное окно.
- Слишком долгий путь к кнопке «купить/заказать». Отлично, если для покупки в онлайн-режиме пользователю достаточно 2-3 кликов мыши. Очень плохо, если процедура оформления заказа кажется слишком трудоемкой. Чтобы усложнить жизнь потенциальному покупателю, достаточно добавить в форму заказа десяток обязательных полей.
Запутанная навигация, большая вложенность подразделов
Каждая категория не должна включать больше 1-2 подкатегорий. Это касается как каталога товаров/услуг, так и других разделов – блога, портфолио, новостной ленты и т. д. Разбивку товаров нужно производить не на свое усмотрение, а по результатам анализа реальных запросов пользователей. Нельзя забывать про «хлебные крошки» — без них посетители могут заблудиться на просторах веб-ресурса. Обеспечьте наличие этих элементов и убедитесь в корректности их работы.
Громоздкий интерфейс
Иногда за нагромождением дизайнерских «фишек» сложно рассмотреть суть коммерческого предложения. Законы юзабилити создаются естественным путем и основываются на особенностях психологии покупателя, поэтому у любого креатива должны быть стандартные границы. В первую очередь, ресурс должен решать определенные проблемы целевой аудитории. Все остальное – вторично. Убедитесь в том, что дизайнер не просто рисует красивые картинки, а создает эффективный продающий веб-инструмент. Если над визуализацией вашего проекта работает профессионал, то не навязывайте ему свое мнение и в принятии концептуальных решений полностью доверяйте специалисту. И помните: дизайн создается не для владельца сайта, а для клиентов компании.
Текстовый и графический контент
Главные ошибки создания контента, негативно влияющие на юзабилити:
-
«Простыни» текстов без логичной структуры.
Не думайте, что статьи может писать любой человек, знакомый с грамотой и техникой быстрого набора на клавиатуре. Созданием текстового контента должны заниматься профессиональные копирайтеры. Если сомневаетесь в их компетентности в вашей отрасли, предоставьте возможность консультироваться с экспертами.
- Некачественные фото. Посетители хотят видеть четкие изображения товара, чтобы рассмотреть его в мельчайших деталях. Если есть возможность, создайте собственную базу авторских фото или трехмерных моделей. А если приходится заимствовать картинки, выбирайте только качественные варианты с хорошим разрешением.
Основы юзабилити закладываются на этапе создания сайта. Если этот вопрос не был проработан своевременно, то исправлять ошибки приходится уже после запуска на этапе внутренней оптимизации веб-ресурса. В любом случае, начинать работу в этом направлении никогда не поздно. Если у вас есть сомнения, все ли в порядке с вашим сайтом, обращайтесь в нашу компанию. Мы проведем юзабилити аудит и предоставим список индивидуальных рекомендаций по улучшению этого показателя.
Не забывайте оставлять комментарии – какие составляющие юзабилити вы считаете самыми важными? Какие сайты вызывают у вас интерес, а какие – вызывают желание закрыть страницу?
ОЦЕНИТЬ СТАТЬЮ :
(Голосов: 1, Рейтинг: 5) |
ПОДЕЛИТЬСЯ:
Please enable JavaScript to view the comments powered by Disqus.
10 полезных выводов и рекомендаций по юзабилити — журнал Smashing Magazine
- 13 мин чтения
- UX, Методические рекомендации, Исследование пользователей, Удобство использования, Психология, UX
- Поделиться в Twitter, LinkedIn
Об авторе
Дмитрий Фадеев — создатель Usaura, службы микроюзабилити-тестирования, и основатель UsabilityPost, блога о хорошем дизайне и пользовательском опыте. …
Больше о
Дмитрий ↬
Вот 10 полезных выводов и рекомендаций по юзабилити , которые могут помочь вам улучшить взаимодействие с пользователями на ваших веб-сайтах.
1. Метки форм лучше всего работают над полем
Исследование, проведенное UX Matters, показало, что идеальное расположение меток в формах — над полями. Во многих формах метки помещаются слева от полей, создавая двухколоночный макет; хотя это выглядит хорошо, это не самый простой в использовании макет. Почему это? Поскольку формы обычно ориентированы вертикально; то есть пользователей заполняют форму сверху вниз . Пользователи просматривают форму вниз по мере продвижения. И перейти по метке к полю ниже проще, чем найти поле справа от метки.
Больше после прыжка! Продолжить чтение можно ниже ↓
В Tumblr есть простая и элегантная форма регистрации, соответствующая рекомендациям UX Matter.
Расположение меток слева также создает другую проблему: вы выравниваете метки по левому или правому краю? Выравнивание по левому краю делает форму доступной для сканирования, но отключает метки от полей, что затрудняет определение того, какая метка относится к какому полю. Выравнивание по правому краю делает обратное: оно создает красивую, но менее удобочитаемую форму. Ярлыки над полями работают лучше всего в большинстве случаев. Исследование также показало, что ярлыки не должны быть жирными, хотя эта рекомендация не является окончательной.
2. Пользователи Фокусируются на лицах
Люди инстинктивно замечают других людей, как только они попадают в поле зрения. На веб-страницах мы обычно фокусируемся на лицах и глазах людей, что дает маркетологам хороший способ привлечь внимание. Но наше влечение к лицам и глазам людей — это только начало; оказывается, мы на самом деле смотрим в том направлении, куда смотрит человек на изображении.
Тепловая карта ребенка, смотрящего прямо на нас, из исследования UsableWorld.
А теперь малыш просматривает содержимое. Обратите внимание на увеличение количества людей, которые смотрят на заголовок и текст.
Вот исследование с отслеживанием движения глаз, которое демонстрирует это. Мы инстинктивно тянемся к лицам, но если это лицо смотрит не на нас, а куда-то еще, мы тоже будем смотреть в этом направлении . Воспользуйтесь этим явлением, привлекая внимание пользователей к наиболее важным частям вашей страницы или объявления.
Были проведены различные исследования, чтобы выяснить, что именно влияет на восприятие людьми достоверности веб-сайта:
- Stanford-Makovsy Web Credibility Study 2002: Изучение того, что делает веб-сайты заслуживающими доверия сегодня
- Что делает веб-сайт заслуживающим доверия? Отчет о большом количественном исследовании
- Элементы компьютерного доверия
- Элементы, влияющие на доверие к сети: первые результаты самостоятельного исследования (Материалы конференции ACM CHI 2000 по человеческому фактору в вычислительных системах, версия 2, Нью-Йорк : ACM Press)
Мы не знаем, насколько хорошо приложение Fever, но гладкий пользовательский интерфейс и веб-сайт производят отличное первое впечатление.
Одним из интересных результатов этих исследований является то, что пользователей действительно судят о книге по ее обложке … точнее, сайт по его дизайну. Такие элементы, как макет, согласованность, типографика, цвет и стиль, влияют на то, как пользователи воспринимают ваш веб-сайт и какое изображение вы создаете. Ваш веб-сайт должен создавать не только хорошее изображение, но и подходящее для вашей аудитории.
Другими факторами, влияющими на доверие, являются: качество контента веб-сайта, количество ошибок, частота обновлений, простота использования и надежность авторов.
Исследование Джейкоба Нильсена о том, сколько пользователей прокручивают страницу (в разделе «Приоритет веб-юзабилити»), показало, что только 23% посетителей прокручивают страницу при первом посещении веб-сайта. Это означает, что 77% посетителей не будут прокручивать ; они просто увидят содержимое над сгибом (то есть область страницы, которая видна на экране без прокрутки вниз). Более того, процент пользователей, которые прокручивают страницу, уменьшается с последующими посещениями, и только 16% прокручивают страницу при втором посещении. Эти данные показывают, насколько важно размещать ключевой контент на видном месте, особенно на целевых страницах.
Это не означает, что вы должны втиснуть все в верхнюю часть страницы, просто вы должны максимально использовать эту область. Переполнение его контентом просто сделает контент недоступным; когда пользователь видит слишком много информации, он не знает, с чего начать поиск.
Basecamp прекрасно использует пространство. Над сгибом (высотой 768 пикселей) он показывает большой скриншот, слоган, ценностное предложение, призыв к действию, список клиентов, видео и краткий список функций с изображениями.
Это наиболее важно для домашней страницы, на которую попадает большинство новых посетителей. Поэтому предоставьте там основные сведения:
- Название веб-сайта,
- Ценностное предложение веб-сайта (т.
е. какую выгоду пользователи получат от его использования),
- Навигация по основным разделам веб-сайта, которые имеют отношение к пользователю. .
Однако с тех пор привычки пользователей значительно изменились. Недавние исследования доказывают, что пользователям вполне комфортно пользоваться прокруткой, и в некоторых ситуациях они готовы прокручивать страницу до конца. Многим пользователям удобнее использовать прокрутку, чем нумерацию страниц, и для многих пользователей самая важная информация на странице не обязательно размещается «вверху» (что из-за разнообразия доступных разрешений экрана является довольно устаревшим, устаревшим термином). ). Поэтому хорошей идеей будет разделить ваш макет на разделы для удобства просмотра, разделив их большим количеством пробелов.
Для получения дополнительной информации, пожалуйста, ознакомьтесь со статьями Paging VS Scrolling (Университет Уичито – SURL), Разрушая миф о сгибе (ящики и стрелки). ( благодарностей, Фред Леук ).
Придать вашему веб-сайту уникальный дизайн — это здорово, но когда дело доходит до удобства использования, лучше всего делать то, что делают все остальные. Соблюдайте условности, потому что, когда люди посещают новый веб-сайт, они в первую очередь ищут вещи там, где они нашли их на большинстве других веб-сайтов; они используют свой опыт, чтобы понять смысл этого нового контента. Это известно как схемы использования . Люди ожидают, что некоторые вещи будут одинаковыми, например, цвета ссылок, расположение логотипа веб-сайта, поведение навигации с вкладками и так далее.
Google помечает все ссылки на своих веб-сайтах синим цветом по той причине, что этот цвет знаком большинству пользователей, что облегчает их поиск.
Какого цвета должны быть ваши ссылки? Первое соображение — контраст: ссылки должны быть достаточно темными (или светлыми), чтобы контрастировать с цветом фона. Во-вторых, они должны выделяться цветом на фоне остального текста; так что никаких черных ссылок с черным текстом. И, наконец, исследования показывают (Ван Шайк и Линг), что если удобство использования является вашим приоритетом, то лучше придерживаться синего цвета для ссылок. Цвет ссылки браузера по умолчанию — синий, поэтому люди этого ожидают. Выбор другого цвета ни в коем случае не является проблемой, но может повлиять на скорость, с которой его находят пользователи.
6. Идеальное окно поиска имеет ширину 27 символов
Какова идеальная ширина окна поиска? Что-то подобное существует? Джейкоб Нильсен провел исследование юзабилити длины поисковых запросов в окнах поиска на веб-сайте (приоритет веб-юзабилити). Оказывается, большинство современных поисковых окон слишком короткие. Проблема с короткими окнами заключается в том, что даже если вы можете ввести длинный запрос, в каждый момент времени будет видна только часть текста, что затрудняет просмотр или редактирование того, что вы набрали.
Исследование показало, что среднее окно поиска имеет ширину 18 символов . Данные показали, что 27% запросов были слишком длинными, чтобы в них поместиться. Расширение поля до 27 символов удовлетворит 90% запросов . Помните, что вы можете установить ширину, используя ems, а не только пиксели и точки. Один em — это ширина и высота одного символа «m» (с использованием любого размера шрифта, установленного на веб-сайте). Итак, используйте эту меру, чтобы масштабировать ширину поля ввода текста до 27 символов.
Поле поиска Google достаточно широкое, чтобы вместить длинные предложения.
Поле поиска Apple слишком короткое, что обрезает запрос «Microsoft Office 2008».
Как правило, поля поиска лучше делать слишком широкими, чем слишком короткими, чтобы пользователи могли быстро просмотреть, проверить и отправить запрос. Это правило очень простое, но, к сожалению, его слишком часто игнорируют. Некоторые отступы в поле ввода также могут улучшить дизайн и взаимодействие с пользователем.
7.

Большинство дизайнеров знают ценность белого пространства, которое представляет собой пустое пространство между абзацами, картинками, кнопками и другими элементами на странице. Пустое пространство избавляет страницу от беспорядка, позволяя элементам «дышать». Мы также можем группировать элементы, уменьшая расстояние между ними и увеличивая расстояние между ними и другими элементами на странице. Это важно для отображения взаимосвязей между элементами (например, показывая, что эта кнопка относится к это набор элементов) и построение иерархии элементов на странице.
Обратите внимание на большие поля содержимого, отступы и расстояние между абзацами в The Netsetter. Все это пространство делает контент легким и удобным для чтения.
Пустое пространство также делает содержимое более читабельным. Исследование (Lin, 2004) показало, что правильное использование пробелов между абзацами, а также на левом и правом полях увеличивает понимание почти на 20% . Читателям легче сосредоточиться и обработать контент с большим интервалом.
На самом деле, по словам Чаперро, Шейха и Бейкера, макет веб-страницы (включая пробелы, заголовки, отступы и рисунки) может не оказывать заметного влияния на производительность, но влияет на удовлетворенность пользователей и впечатления от них.
8. Эффективное пользовательское тестирование не должно быть обширным
Исследование Джейкоба Нильсена об идеальном количестве испытуемых в тестах удобства использования показало, что тесты с участием всего пяти пользователей выявляют около 85% всех проблем с вашим веб-сайтом, тогда как 15 пользователи найдут почти все проблемы.
Источник: Jakob Nielsen’s AlertBox
Крупнейшие проблемы обычно обнаруживаются первыми одним или двумя пользователями, а следующие тестировщики подтверждают эти проблемы и обнаруживают оставшиеся незначительные проблемы. Только два тестовых пользователя, скорее всего, обнаружат половину проблем на вашем сайте. Это означает, что тестирование не должно быть обширным или дорогостоящим, чтобы дать хорошие результаты. Наибольший прирост достигается при переходе от 0 тестовых пользователей к 1, поэтому не бойтесь делать слишком мало: любое тестирование лучше, чем ничего.
9. Информативные страницы продуктов помогут вам выделиться
Если на вашем веб-сайте есть страницы продуктов, люди, совершающие покупки в Интернете, обязательно просматривают их. Но на многих страницах продуктов недостаточно информации, даже для посетителей, выполняющих быстрое сканирование. Это серьезная проблема, потому что информация о продукте помогает людям принять решение о покупке. Исследования показывают, что некачественная информация о продукте является причиной около 8% проблем с юзабилити и даже 10% сбоев пользователей (т. е. пользователь сдается и покидает веб-сайт) (Приоритет веб-юзабилити).
Apple предоставляет отдельные страницы «Технические характеристики» для своих продуктов, что позволяет отделить сложные детали от более простых маркетинговых страниц, но обеспечивает легкий доступ, когда они необходимы.
Предоставьте подробную информацию о своих продуктах, но не попадайте в ловушку, бомбардируя пользователей слишком большим количеством текста. Сделайте информацию легко усваиваемой . Сделайте страницу доступной для сканирования, разбив текст на более мелкие сегменты и используя множество подзаголовков. Добавьте много изображений для своих продуктов и используйте правильный язык: не используйте жаргон, который ваши посетители могут не понять .
10. Большинство пользователей слепы к рекламе
Якоб Нильсен сообщает в своей записи AlertBox, что большинство пользователей практически слепы к рекламным баннерам. Если они ищут фрагмент информации на странице или поглощены контентом, их не будет отвлекать боковая реклама.
Смысл этого не только в том, что пользователи будут избегать рекламы, но и в том, что они будут избегать всего, что выглядит как реклама, даже если это не реклама . Некоторые сильно стилизованные элементы навигации могут выглядеть как баннеры, поэтому будьте осторожны с этими элементами.
Квадратные баннеры на левой боковой панели FlashDen на самом деле не являются рекламой: это ссылки на контент. Они выглядят неудобно близко к рекламным баннерам, поэтому некоторые пользователи могут их не заметить.
Тем не менее, объявления, которые выглядят как контент, заставят людей смотреть и кликать. Это может принести больше дохода от рекламы, но происходит за счет доверия ваших пользователей, поскольку они нажимают на то, что они считали подлинным контентом. Прежде чем пойти по этому пути, подумайте о компромиссе: краткосрочный доход по сравнению с долгосрочным доверием .
Бонус: результаты наших тематических исследований
В последние годы редакция журнала Smashing Magazine провела ряд тематических исследований, пытаясь определить общие дизайнерские решения и практики. До сих пор мы анализировали веб-формы, блоги, типографику и портфолио; и другие тематические исследования будут опубликованы в следующем месяце. Мы нашли несколько интересных шаблонов, которые могут послужить ориентиром для вашего следующего дизайна.
Здесь мы рассмотрим некоторые методы и шаблоны проектирования, которые мы обнаружили в наших тематических исследованиях, в этом кратком, компактном обзоре для вашего удобства.
Согласно нашему исследованию типографии:
- Высота строки (в пикселях) ÷ размер шрифта основного текста (в пикселях) = 1,48 . 1.5 обычно рекомендуется в классических типографских книгах, поэтому наше исследование подтверждает это эмпирическое правило. Очень немногие веб-сайты используют что-то меньшее, чем это. И количество веб-сайтов, превышающих 1,48, уменьшается по мере удаления от этого значения.
- Длина строки (в пикселях) ÷ высота строки (в пикселях) = 27,8 . Средняя длина строки составляет 538,64 пикселя (исключая поля и отступы), что довольно много, учитывая, что многие веб-сайты все еще имеют основной текст с размером шрифта от 12 до 13 пикселей.
- Расстояние между абзацами (в пикселях) ÷ высота строки (в пикселях) = 0,754 . Оказывается, расстояние между абзацами (то есть расстояние между последней строкой одного абзаца и первой строкой следующего) редко совпадает с интерлиньяжем (что было бы основной характеристикой идеального вертикального ритма). Чаще всего расстояние между абзацами составляет всего 75% от начального. Причина может заключаться в том, что интерлиньяж обычно включает пространство, занимаемое нисходящими элементами; и поскольку у большинства символов нет выносных элементов, под строкой создается дополнительное пустое пространство.
- Оптимальное количество символов в строке от 55 до 75 . Согласно классическим типографским книгам, оптимальное количество символов в строке составляет от 55 до 75, но на практике более популярно от 75 до 85 символов в строке.
Согласно нашему исследованию дизайна блога (больше не в сети):
- Макеты обычно имеют фиксированную ширину (в пикселях) (92%) и обычно располагаются по центру (94%).
Ширина фиксированных макетов варьируется от 951 до 1000 пикселей (56%).
- На главной странице показаны отрывки из 10-20 сообщений (62%).
- 58% общего макета веб-сайта используется для отображения основного контента.
Согласно нашему исследованию дизайна веб-формы:
- Ссылка для регистрации называется «зарегистрироваться» (40%) и находится в правом верхнем углу.
- Формы регистрации имеют простой макет, чтобы не отвлекать пользователей (61%).
- Заголовки полей ввода выделены жирным шрифтом (62%), а поля расположены по вертикали чаще, чем по горизонтали (86%).
- Разработчики, как правило, включают несколько обязательных и необязательных полей.
- Подтверждение электронной почты не дается (82%), но подтверждение пароля предоставляется (72%).
- Кнопка «Отправить» выравнивается либо по левому краю (56%), либо по центру (26%).
Согласно нашему исследованию дизайна портфолио:
- 89% макетов располагаются по центру по горизонтали, и большинство из них имеют большое горизонтальное навигационное меню.
- 47,2% портфолио имеют клиентскую страницу, а 67,2% имеют ту или иную форму отдельной страницы услуг.
- 63,6% имеют подробную страницу для каждого проекта, включая тематические исследования, отзывы, слайд-шоу со скриншотами, черновиками и эскизами.
- На контактных страницах указаны маршруты проезда, номер телефона, адрес электронной почты, почтовый адрес, визитная карточка и онлайн-форма,
Другие ресурсы
Возможно, вы захотите ознакомиться со статьями по теме:
- 30 вопросов удобства использования, о которых следует знать
- 10 Полезные выводы и рекомендации по юзабилити
- 9 Распространенные ошибки юзабилити в веб-дизайне
- 10 принципов эффективного веб-дизайна
У вас есть какие-нибудь мысли по поводу того, что мы рассмотрели, или знаете другие полезные выводы по юзабилити? Пожалуйста, оставьте комментарий ниже.
(al)
Отчет о результатах тестирования удобства использования | Usability.

Сообщая о результатах теста удобства использования, вы должны сосредоточиться в первую очередь на своих выводах и рекомендациях, которые различаются по уровням серьезности. Включите соответствующую информацию из плана тестирования и представьте достаточно подробностей, чтобы метод можно было идентифицировать. Делайте разделы короткими, используйте таблицы для отображения метрик и по возможности используйте наглядные примеры для демонстрации проблемных областей.
Анализ данных
В конце юзабилити-тестирования вы соберете несколько типов данных в зависимости от метрик, которые вы определили в своем плане тестирования. Анализируя собранные данные, внимательно прочитайте заметки, ищите закономерности и обязательно добавляйте описание каждой из проблем. Ищет тенденции и ведет учет проблем, возникших у участников.
Количественные данные | Качественные данные |
---|---|
|
|
Отчеты об уровнях серьезности проблем
При просмотре данных учитывайте, насколько глобальна проблема на сайте и насколько серьезна (или серьезна) проблема. Ваши выводы могут иметь значение для других страниц сайта (глобальных). Например, вы можете обнаружить, что участники не могут найти на странице то, что им нужно, из-за плотности текста. Вы могли бы сказать, что нужно исправить только эту страницу, но вы также должны учитывать, сколько других страниц одинаково плотно заполнено текстом.
Некоторые проблемы в большей степени способствуют тому, что участники не могут завершить сценарии, чем другие. Чтобы помочь дифференцировать, вы должны отметить серьезность проблем по трех- или четырехбалльной шкале. Например:
- Критический : Если мы не исправим это, пользователи не смогут завершить сценарий.
- Серьезный : многие пользователи будут разочарованы, если мы не исправим это; они могут отказаться.
- Незначительное : пользователи раздражены, но это не мешает им завершить сценарий. Это следует пересмотреть позже.
Написание отчета о тестировании удобства использования
В целом, ваш отчет должен включать в себя справочную информацию, вашу методологию, результаты тестирования, выводы и рекомендации. Существует ряд шаблонов отчетов, которые вы можете адаптировать, чтобы помочь вам сообщить о своих выводах.
- Сводная информация : Включите краткую сводку, включая то, что вы тестировали (веб-сайт или веб-приложение), где и когда проводилось тестирование, информацию об оборудовании, что вы делали во время тестирования (включите все материалы тестирования в качестве приложения), группу тестирования и краткое описание возникших проблем, а также того, что сработало.
- Методология : Включите методологию тестирования, чтобы другие могли воссоздать тест. Объясните, как вы провели тест, описав сеансы тестирования, тип тестируемого интерфейса, собранные метрики и обзор сценариев задач. Опишите участников и предоставьте сводные таблицы анкетных/демографических ответов (например, возраст, профессии, использование Интернета, посещенные сайты и т. д.). Предоставьте краткие сводки демографических данных, но не указывайте полные имена участников
- Результаты теста : Включите анализ того, что записали координатор и регистраторы данных.
Опишите задачи, которые имели самые высокие и самые низкие показатели выполнения. Предоставьте сводку показателей успешности выполнения задач по участникам, задачам и среднему показателю успешности по задачам и отобразите данные в таблице. Используйте одну и ту же модель для всех показателей. В зависимости от собранных вами показателей вы можете захотеть отобразить:
- Количество и процент участников, выполнивших каждый сценарий, и все сценарии (для этого часто хорошо подходит столбчатая диаграмма)
- Среднее время, затрачиваемое на выполнение каждого сценария для тех, кто завершил сценарий
- Результаты удовлетворенности
- Комментарии участников могут быть включены, если они носят иллюстративный характер.
- Выводы и рекомендации : Перечислите свои выводы и рекомендации, используя все ваши данные (количественные и качественные, примечания и электронные таблицы). Каждый вывод должен основываться на данных — на том, что вы действительно видели и слышали.
Вы можете захотеть иметь только один общий список выводов и рекомендаций, или вы можете захотеть получить выводы и рекомендации от сценария к сценарию, или вы можете захотеть иметь как список основных выводов и рекомендаций, которые охватывают сценарии, так и сценарий- отчет по сценарию. Иметь ввиду:
- Хотя большинство отчетов о юзабилити-тестировании фокусируются на проблемах, также полезно сообщать о положительных результатах. То, что работает хорошо, должно поддерживаться посредством дальнейшего развития.
- Полностью негативный отчет может обескуражить; это помогает команде узнать, когда с веб-сайтом все в порядке.
- Каждый вывод должен включать как можно более конкретное изложение ситуации.
- Каждый вывод (или группа связанных выводов) должен включать рекомендации о том, что делать.
Включение визуальных элементов для иллюстрации конкретных моментов
Вы можете сделать отчет более информативным и интересным, включив в него визуальный контент. Вы можете рассмотреть возможность включения:
- Снимки экрана, чтобы читатели могли наглядно представить, что вы тестировали. Включите части экранов, чтобы проиллюстрировать определенные области, которые работают особенно хорошо или вызывают проблемы у пользователей.
- Короткие видеоролики для иллюстрации конкретных моментов , если вы представляете отчет в электронном виде и у читателей отчета есть доступная технология для просмотра видеоклипов. Люди, которые не наблюдали реальных тестовых сессий, часто больше всего убеждаются в проблемах и необходимости их устранения, просматривая и слушая соответствующие видеоклипы.
Внедрение и повторное тестирование
Чтобы тест удобства использования имел какую-либо ценность, вы должны использовать полученные знания для улучшения сайта. Возможно, вы не сможете выполнить все рекомендации. Разработка любого продукта представляет собой серию компромиссов, в которых вы балансируете график, бюджет, доступность людей и необходимые изменения.