Выводы и рекомендации по юзабилити

Все согласятся, что удобство использования - важный аспект веб-дизайна. Независимо от того, работаете ли вы над веб-сайтом-портфолио, интернет-магазином или веб-приложением, важно сделать ваши страницы простыми и удобными для использования посетителями. За прошедшие годы было проведено множество исследований по различным аспектам веб-дизайна и дизайна интерфейсов, и полученные результаты помогают нам улучшить  работу по разработке дизайна.

Вот 10 полезных выводов и рекомендаций, которые могут помочь  улучшить взаимодействие с пользователем на  веб-сайтах.

1. Ярлыки Форм лучше всего работают над полем

Исследование  обнаружило , что идеальное место для меток в формах над полями. Во многих формах метки помещаются слева от полей, создавая макет из двух столбцов; Хотя это выглядит хорошо, это не самый простой в использовании макет. Это почему? Поскольку формы обычно ориентированы вертикально; т.е. пользователи заполняют форму сверху вниз . Пользователи просматривают форму вниз по мере продвижения. А перейти по метке к полю, расположенному ниже, проще, чем найти поле справа от метки.

Размещение меток слева также создает другую проблему: вы выравниваете метки по левому или по правому краю? Выравнивание по левому краю делает форму доступной для сканирования, но отключает метки от полей, что затрудняет определение того, какая метка к какому полю относится. Выравнивание по правому краю делает обратное: это делает форму красивой, но менее удобной для сканирования. Ярлыки над полями работают лучше всего в большинстве случаев. Исследование также показало, что надписи не должны выделяться жирным шрифтом, хотя эта рекомендация не является окончательной.

 

2. Пользователи сосредотачиваются на лицах

Люди инстинктивно замечают других людей сразу же, как только они попадают в поле зрения. На веб-страницах мы, как правило, сосредотачиваемся на лицах и глазах людей, что дает маркетологам хорошую технику для привлечения внимания. Но наше влечение к лицам и глазам людей - это только начало; Оказывается, мы на самом деле смотрим в том направлении, куда смотрит человек на изображении.

Вот исследование с отслеживанием взгляда, которое демонстрирует это. Нас инстинктивно тянет к лицам, но если это лицо смотрит куда-нибудь, а не на нас, мы также посмотрим в этом направлении . Воспользуйтесь этим явлением, привлекая внимание пользователей к наиболее важным частям вашей страницы или объявления.

 

3. Качество дизайна - Показатель надежности

Были проведены различные исследования, чтобы выяснить, что влияет на восприятие людьми доверия к веб-сайту:

 

 Элементы компьютерной надежности

Элементы, влияющие на доверие к сети: первые результаты исследования самоотчета

Мы не знаем, насколько хорошо приложение Fever , но гладкий пользовательский интерфейс и веб-сайт производят отличное первое впечатление.

 

Одним из интересных открытий этих исследований является то, что пользователи действительно судят о книге по ее обложке … или, скорее, о веб-сайте по его дизайну. Такие элементы, как макет, согласованность, типографика, цвет и стиль, влияют на то, как пользователи воспринимают ваш сайт и какое изображение вы проецируете. Ваш веб-сайт должен создавать не только хороший имидж, но и привлекательный для вашей аудитории.

 

Другими факторами, влияющими на доверие, являются: качество содержания веб-сайта, количество ошибок, частота обновлений, простота использования и надежность авторов.

 

4. Большинство пользователей  не пользуются прокруткой

сколько пользователи прокручивают (в разделе «Приоритезация веб-юзабилити» ), показало, что только 23% посетителей прокручивают страницу при первом посещении веб-сайта. Это означает, что 77% посетителей не будут прокручивать ; они будут просто просматривать содержимое над сгибом (т. е. область страницы, которая видна на экране без прокрутки вниз). Более того, процент пользователей, выполняющих прокрутку, уменьшается при последующих посещениях, и только 16% прокручивают при втором посещении. Эти данные подчеркивают, насколько важно размещать ваш ключевой контент на видном месте, особенно на целевых страницах.

Это не значит, что вы должны втиснуть все в верхнюю часть страницы, просто вы должны использовать эту область наилучшим образом. Переполнение его контентом просто сделает его недоступным; когда пользователь видит слишком много информации, он не знает, с чего начать.

 

Basecamp отлично использует пространство. Над сгибом (высотой 768 пикселей) отображается большой снимок экрана, слоган, ценностное предложение, призыв к действию, список клиентов, видео и короткий список функций с изображениями.

Это наиболее важно для домашней страницы, на которую попадет большинство новых посетителей. Так что предоставьте там самое необходимое:

 

Название сайта, Ценностное предложение веб-сайта (т. Е. Какую выгоду пользователи получат от его использования),

Навигация по основным разделам сайта, актуальным для пользователя.

Однако с тех пор привычки пользователей значительно изменились. Недавние исследования доказывают, что пользователям достаточно удобна прокрутка и в некоторых ситуациях они готовы прокручивать страницу до конца. Многим пользователям удобнее прокручивать, чем разбивать на страницы, и для многих пользователей наиболее важная информация на странице не обязательно размещается «в верхней части страницы» (что из-за разнообразия доступных разрешений экрана является довольно устаревшим, устаревшим термином ). Поэтому рекомендуется разделить макет на разделы для удобства сканирования, разделив их большим количеством белого пространства.

 

5. Синий - Лучший цвет для ссылок

Придать вашему сайту уникальный дизайн - это здорово, но когда дело доходит до удобства использования, лучше всего делать то, что делают все остальные. Соблюдайте условности, потому что, когда люди посещают новый веб-сайт, они в первую очередь ищут вещи там, где они их нашли на большинстве других веб-сайтов; они используют свой опыт, чтобы понять смысл этого нового содержания. Это известно как шаблоны использования . Люди ожидают, что некоторые вещи будут одинаковыми, например, цвета ссылок, расположение логотипа веб-сайта, поведение вкладок навигации и так далее.

Google сохраняет все ссылки на своих веб-сайтах синим не зря: этот цвет знаком большинству пользователей, поэтому их легко найти.

Какого цвета должны быть ваши ссылки? Первое, что нужно учитывать - это контраст: ссылки должны быть достаточно темными (или светлыми), чтобы контрастировать с цветом фона. Во-вторых, они должны выделяться цветом остального текста; Итак, никаких черных ссылок с черным текстом. И, наконец, исследования показывают , что если удобство использования является вашим приоритетом, лучше всего использовать синий цвет для ссылок. Цвет ссылки по умолчанию в браузере синий, поэтому люди этого ожидают. Выбор другого цвета ни в коем случае не проблема, но это может повлиять на скорость, с которой пользователи его находят.

 

6. Идеальное Окно Поиска.

Какая идеальная ширина окна поиска? Что-то подобное существует юзабилити по длине поисковых запросов в окнах поиска на веб-сайте (Приоритет веб-юзабилити). Оказывается, что большинство сегодняшних окон поиска слишком короткие. Проблема с короткими полями заключается в том, что даже если вы можете ввести длинный запрос, только часть текста будет видна за раз, что затрудняет просмотр или редактирование того, что вы ввели.

 

средняя ширина окна поиска составляет 18 символов . Данные показали, что 27% запросов были слишком длинными, чтобы в них уместиться. Расширение поля до 27 символов позволит удовлетворить 90% запросов . Помните, что вы можете установить ширину с помощью em, а не только пикселей и точек. Один em - это ширина и высота одного символа «m» (с использованием любого размера шрифта, установленного на веб-сайте). Итак, используйте эту меру, чтобы масштабировать ширину поля ввода текста до 27 символов.

Как правило, окна поиска лучше слишком широкие, чем слишком короткие, чтобы пользователи могли быстро просмотреть, проверить и отправить запрос. Это очень простое правило, но, к сожалению, его слишком часто игнорируют или игнорируют. Некоторые отступы в поле ввода также могут улучшить дизайн и удобство использования.

 

7. Белое пространство улучшает понимание

Большинству дизайнеров известно значение белого пространства, то есть пустого пространства между абзацами, изображениями, кнопками и другими элементами на странице. Белое пространство убирает загромождение страницы, давая предметам возможность дышать. Мы также можем группировать элементы вместе, уменьшая расстояние между ними и увеличивая пространство между ними и другими элементами на странице. Это важно для отображения взаимосвязей между элементами (например, демонстрации того, что эта кнопка применяется к этому набору элементов) и построения иерархии элементов на странице.

Обратите внимание на большие поля содержимого, отступы и интервалы между абзацами на Netsetter. Все это пространство делает контент легким и удобным для чтения.

 

Пустое пространство также делает контент более читабельным. Исследование (Lin, 2004) показало, что правильное использование пробелов между абзацами, а также на левом и правом полях увеличивает понимание почти на 20% . Читателям легче сосредоточиться и обработать обширный контент.

 

Фактически, макет веб-страницы (включая пустое пространство, заголовки, отступы и рисунки) не может существенно влиять на производительность, но влияет на удовлетворенность пользователей и их опыт.

 

8. Эффективное пользовательское тестирование не обязательно должно быть обширным.

тесты с участием всего пяти пользователей выявляют около 85% всех проблем с вашим сайтом, тогда как 15 пользователей обнаруживают практически все проблемы.

Самые большие проблемы обычно обнаруживают первые один или два пользователя, а следующие тестеры подтверждают эти проблемы и обнаруживают оставшиеся незначительные проблемы. Только два тестовых пользователя наверняка найдут половину проблем на вашем сайте. Это означает, что для получения хороших результатов тестирование не должно быть обширным или дорогостоящим. Наибольший выигрыш достигается при переходе от 0 тестовых пользователей к 1, поэтому не бойтесь делать слишком мало: любое тестирование лучше, чем ничего.

 

9. Информативные страницы продуктов помогут вам выделиться

Если на вашем веб-сайте есть страницы продуктов, люди, совершающие покупки в Интернете, обязательно будут их просматривать. Но на многих страницах продуктов не хватает информации даже для посетителей, которые быстро просматривают. Это серьезная проблема, потому что информация о продукте помогает людям принять решение о покупке. Исследования показывают, что плохая информация о продукте является причиной около 8% проблем с удобством использования и даже 10% ошибок пользователя (т. Е. Пользователь отказывается и покидает веб-сайт) (Приоритет удобства использования в Интернете).

 

Apple предоставляет отдельные страницы «Технические характеристики» для своих продуктов, на которых сложные детали хранятся отдельно от более простых маркетинговых страниц, но при этом обеспечивается легкий доступ, когда они необходимы.

Предоставляйте подробную информацию о своих продуктах, но не попадитесь в ловушку, закидывая пользователей слишком большим количеством текста. Сделайте информацию удобной для восприятия . Сделайте страницу доступной для сканирования, разбив текст на более мелкие сегменты и используя множество подзаголовков. Добавьте множество изображений для своих продуктов и используйте правильный язык: не используйте жаргон, который ваши посетители могут не понять .

 

10. Большинство пользователей не обращают внимания на рекламу

что большинство пользователей практически не замечают рекламных баннеров. Если они ищут фрагмент информации на странице или увлечены контентом, они не будут отвлекаться на рекламу сбоку.

 

Следствием этого является не только то, что пользователи будут избегать рекламы, но и то, что они будут избегать всего, что выглядит как реклама, даже если это не реклама . Некоторые элементы навигации с большим стилем могут выглядеть как баннеры, поэтому будьте осторожны с этими элементами.

 

Квадратные баннеры на левой боковой панели FlashDen на самом деле не являются рекламой: это ссылки на контент. Они выглядят неудобно близко к рекламным баннерам и поэтому могут быть упущены некоторыми пользователями.

 

Тем не менее, реклама, которая выглядит как контент, заставит людей искать и нажимать. Это может принести больший доход от рекламы, но это происходит за счет доверия ваших пользователей, поскольку они нажимают на то, что, по их мнению, является подлинным контентом. Прежде чем пойти по этому пути, подумайте о компромиссе: краткосрочный доход или долгосрочное доверие .

 

. До сих пор мы анализировали веб-формы, блоги, типографику и портфолио; и другие тематические исследования будут опубликованы в следующем месяце. Мы нашли несколько интересных паттернов, которые могут служить ориентирами для вашего следующего дизайна.

 

Здесь мы рассмотрим некоторые практики и шаблоны проектирования, которые мы обнаружили в наших тематических исследованиях в этом кратком компактном обзоре, для вашего удобства.

 

Согласно нашему исследованию типографии :

Высота строки (в пикселях) ÷ размер шрифта основного текста (в пикселях) = 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% имеют подробную страницу для каждого проекта, включая тематические исследования, отзывы, слайд-шоу со скриншотами, черновиками и набросками.

Страницы контактов содержат маршруты проезда, номер телефона, адрес электронной почты, почтовый адрес, vCard и онлайн-форму,