понятно, удобно, комфортно. Коротко о главном / Digital Professionals Hub corporate blog / Habr
В современном мире понимание основ юзабилити является необходимостью. Большинство посетителей сайта не совершают действий, которых от них ждут владельцы ресурсов. Люди не заказывают товар, не регистрируются, не подписываются на обновления и т.д. В чем причина такого поведения пользователей?Причина проста – ресурс оказывается неудобным для пользователя. Например, для того чтобы «заказать» продукт, приходится пройти несколько страниц, а кнопку регистрации и вовсе невозможно обнаружить. Это делает ресурс неконкурентоспособным.
Как уменьшить количество отказов от использования сайта? Если проект нуждается в основательном подходе, можно обратиться в студию, к специалистам. Юзабилити-лаборатории предлагают не только различные варианты тестирования и проектирование интерфейса. А если бюджет ограничен, можно попробовать познать азы юзабилити самостоятельно.
Для самостоятельной разработки интерфейса нужно учитывать несколько простых правил:
- Правило 7-ми.
Известно, что способности человеческого мозга небезграничны. Человек способен держать в кратковременной памяти не более 5-9 сущностей. Поэтому не следует размещать в навигации больше 7 пунктов.
В то время как сайт Российских Железных дорог — отличный пример того, как делать не надо. От количества разрозненной информации пестрит в глазах, хочется просто закрыть его и больше никогда не заходить. - Правило 2х секунд.
Чем меньше пользователь ждет отклика программы, сайта или приложения, тем больше вероятность того, что он не откажется от использования этого продукта. 2 секунды – это оптимальный временной интервал отклика программы, именно к нему стоит стремиться. Так что стоит сто раз подумать, прежде чем ставить на сайт тяжелую флэшевую заставку, как это сделали на mtv.ru. - Правило 3х кликов.
Никому не нравится серфить страницы, в поисках необходимой информации и функционала. У посетителя должна быть возможность попасть с главной страницы на любую другую страницу сайта, сделав не более 3-х кликов. Это способствует и более успешной индексации сайта поисковыми роботами. - Правило Фиттса
Опубликованная Паулем Фиттсом в 1954 году модель движений человека, определяет время, необходимое для быстрого перемещения в целевую зону как функцию от расстояния до цели и размера цели. - Перевернутая пирамида
Этого принципа придерживается сам гуру юзабилити, Якоб Нильсен. Статья должна начинаться с итогового вывода, за которым следуют ключевые моменты, а завершаться наименее важной для читателей информацией. Это оптимально для веба, где пользователь хочет получить информацию максимально быстро.
Но даже спроектированный по всем правилам интерфейс стоит протестировать. Фокус-группы – самый доступный способ для тестирования «своими силами».
Тестирование состоит из четырех этапов:
- Подбор фокус-группы. Тестировщики должны соответствовать вашей целевой аудитории. Не стоит просить бабушку протестировать приложение для поиска обновлений драйверов.
- Составление плана тестирования – списка задач, для выполнения которых разработан ваш продукт. Именно этому списку будут следовать тестировщики. Если вы делаете интернет-магазин, в список должны быть включены такие задачи как поиск товара, получение информации о товаре, путь от получения информации о товаре к его заказу, удаление товара из корзины.
- Выполнение тестировщиками списка задач и фиксирование ошибок. Ошибкой можно считать все что угодно: слишком сложная капча, отсутствие сообщения от сервера о том, что «товар добавлен в корзину», невозможность изменить количество товаров в корзине или отменить действие, и т.д.
- После выявления и исправления ошибок цикл тестировки нужно пройти заново. Цикл должен повторяться до тех пор, пока результаты не будут удовлетворять необходимым требованиям.
Оценка качества интерфейса должна проводиться на каждом этапе проекта. Не откладывайте тестирование юзабилити до самого последнего момента. Серьёзные ошибки просто нельзя будет исправить из-за того, что проект находится на завершающей стадии. И тогда — либо переделывать заново, либо получить низкий показатель юзабилити.
Пример по теме
Напоследок разберем типичные ошибки на примере сайта известного исполнителя Влада Топалова. Предположим, мы хотим договориться о выступлении с его менеджментом и хотим найти на сайте их контакты. И вот тут начинается квест!
Первое, что мы видим на сайте, это черную заставку со ссылкой «enter» и предложением обновить флеш-плеер.
Кнопка «enter» звучит как призыв попасть на главную страницу сайта. Но вместо главной страницы попадаем на «чистый лист».
Здесь взгляд приковывает изображение красной ленты, и мы, конечно, думаем, что это ссылка, и может даже на меню. Но нет – это всего лишь символ борьбы со СПИДом, который призван обозначить общественную позицию певца и не более. И тогда рука тянется в левый верхний угол. А там и не меню вовсе, а кнопка полноэкранного режима. Несколько секунд в замешательстве, и поиски окончены, вожделенное меню внизу, в центре экрана. Кликаем… и видим ПЛЕЕР! Нас снова обманули.
Пока в плеере транслируется клип, мы продолжаем искать меню. Теперь оно наверху, в самом центре. В выпадающем списке мы, наконец, наблюдаем желанное слово «Контакты». Но и тут не все так просто. Эти контакты нельзя скопировать. Придется переписывать вручную!
Теперь о цифрах. Время ожидания отклика в зависимости от скорости соединения может разниться, но в любом случае это будет больше 2х секунд. А путь до страницы контактов менеджмента занял 7 кликов. А мог бы занять всего один.
habr.com
Юзабилити веб сайта — основные принципы usability web сайтов
Юзабилити (от английского usability — «удобство использования) — это качественная оценка простоты и комфорта работы с сайтом. Пользователь должен без труда находить нужную информацию, не теряясь в функционале и многочисленных страницах, и при этом получать эстетическое удовольствие от работы с ресурсом.- Конверсия. Правильно продуманная навигация подтолкнет пользователя выполнить целевое действие: позвонить в компанию, скачать прайс-лист, заказать товар, воспользоваться услугой и т.д. Важно грамотно выстроить повествование и структуру, ведь если посетитель задумается хотя бы на несколько секунд или не сразу поймет, что делать дальше — можно его потерять. К примеру, если, попав на главную страницу, он с первых же строк не узнает о сфере работы компании, не сориентируется, где находится и что делать дальше — он без сожалений закроет вкладку. Если он не найдет развернутых ответов на интересующие вопросы в виде статьи, видео, графики — произойдет то же самое.
- Посещаемость. Пользователь вернется на сайт только в том случае, если ему понравится с ним работать. А потому ресурс должен быть удобным и понятным со всех позиций: текст, навигация, интерфейс, последовательность действий и т.д. Благодаря обилию выбора современному потребителю не приходится долго разбираться в тонкостях работы с сайтом: сложно здесь — он перейдет к конкурентам, у которых понятнее и проще.
Принципы юзабилити web-ресурса
Разработка юзабилити сайта базируется на главном правиле: «чем проще — тем лучше». Чем более привычную структуру и интерфейс видит пользователь — тем легче ему сориентироваться и тем меньше времени он потратит, чтобы найти нужный раздел, т.к. будет чувствовать себя более уверенно.
Потому, к примеру, ссылки в тексте лучше делать привычного цвета — ярко-синими. Можно использовать и другие выделяющиеся цвета, но человек потратит больше времени на поиск.
1. Дизайн — залог доверия к сайту
Не перегружайте визуальную часть множеством деталей, цветов и динамичных элементов. Пользователя ничего не должно отвлекать от восприятия информации. А при длительном нахождении на ресурсе он не должен уставать от обилия контраста, плохой читабельности текста, разноплановой графики. Упор — на минималистичный дизайн: в сумме с уникальностью следует продумать сочетание цветов фона и шрифта, число и вид изображений.
Еще один важный момент: грамотно продуманный «внешний вид» сайта — залог доверия со стороны потребителя, попавшего к вам впервые. Простота и доступность использования, цветовые сочетания, стиль, подходящие вашей целевой аудитории картинки, качество контента, отсутствие ошибок — все это влияет на расположение к ресурсу.
Пример сайта, перенасыщенного графикой. Дизайн пестрит рассеивающими внимание цветовыми сочетаниями, обилием картинок.
2. Логичный структурированный контент
Один из главных факторов юзабилити — удобное восприятие текстов. Структура, оформление, информативность, логическая разбивка, оптимизация, отсутствие ошибок — все эти параметры важно учитывать при написании статьи. Если это длинный текст-руководство — сделайте оглавление в виде ссылок, чтобы пользователь мог быстро найти нужный раздел.
Согласно отчетам компаний Clicktale и CX Partners, длина страницы не влияет на то, будет ли пользователь изучать контент ниже или нет. Важнее грамотно продуманная структура графики и текста: выделение приоритетной информации, последовательность расположения.
3. Важная информация — в левом углу
Посетители просматривают web страницу по F-образному шаблону: внимание концентрируется в верхнем левом углу и ограничивается первыми несколькими абзацами текста в убывающем порядке. Потому при распределении важной информации использование такой схему увеличит вероятность того, что посетитель быстро найдет нужные данные, увидит самое важное, бегло пробежавшись по разделу взглядом.
4. Общение с пользователем
Успешная регистрация, принятый заказ, несуществующая страница — человек должен быть всегда в курсе происходящего. Причем во всех подробностях. Если он зарегистрирован в системе — расскажите, что делать дальше, если заказ принят: укажите номер, время ожидания звонка, контактные данные; если попал на страницу 404 — как найти нужную информацию или куда вернуться.
Попав на такую страницу 404, пользователь не растеряется и, скорее всего, не сразу покинет ресурс.
5. Отмена действия
У человека должна быть возможность передумать. К примеру, социальная сеть ВКонтакте позволяет восстановить страницу после ее удаления. Некоторые интернет-магазины — изменить или удалить заказ после его оформления, откорректировать способ доставки и оплаты. Все это — составные части юзабилити веб сайта.
6. Ненавязчивое предложение помощи
Не нужно настаивать на общении. Большие выскакивающие окна с предложением помочь в выборе, цветная полоска с номером телефон, занимающая треть экрана — подобные элементы не только смотрятся навязчиво, отталкивают посетителя, но и закрывают часть функционала. В примере ниже — форму подбора товара. Окно помощи должно легко скрываться, потому крестики и другие подобные значки нужно делать заметными, а не полупрозрачными или сливающимися с фоном.
Лучше, чтобы изначально данная форма была в свернутом состоянии, но при этом заметной — к примеру, в виде яркой боковой вкладки. И при этом не перекрывала часть контента на странице. Последнее относится и к кнопкам социальных сетей.
7. Разговор на понятном языке
Не делайте упор на специализированные термины — говорите проще, чтобы пользователю не пришлось тратить время на толкование непонятного слова. Если без узких понятий, пояснений не обойтись — разрабатывайте всплывающие окна. Это же касается заполнения форм: если вы диктуете определенные условия в виде длины имени, пароля, формата телефона, допустимой географии — укажите это в виде подсказок.
8. Отказ от резких перемен
Это касается пунктов меню, названия и вида кнопок, их расположения. Представьте перестановку в любимом супермаркете: после года ежедневных покупок вы вдруг замечаете, что руководство решило поменять местами отделы, товары, сделать редизайн. И теперь молоко стоит на прилавке для сметаны, каши — там, где раньше были масла, а вместо замороженной вишни вы находите свиные почки. Указатели стали красивее, но совершенно другими — как и привычные значки скидок. Итог: вы теряетесь и тратите намного больше времени, чем обычно, чтобы изучить новое оформление и сориентироваться, заново привыкнуть.
То же самое относится к веб-дизайну: пользователь не только потратит больше времени, но и разочаруется, заметив, что вместо значка корзины теперь — «Добавить товар», вместо «Каталог» — «Продукция», а привычные объемные кнопки обтекаемой кнопки стали плоскими и рублеными. Потому задумав «перестановку», не шокируйте посетителя — изменения должны быть постепенными и не менять кардинально привычную структуру.
9. Все возможности — на виду
Удачное решение — когда пользователь видит все разделы, в которые может перейти, т.к. в любой момент может быстро сориентироваться, где находится и как вернуться обратно. Если на сайте планируется много контента — резонно предусмотреть горизонтальное верхнее, вертикальное меню (и то, и другое — возможно, с подразделами), а также «подвал». Если речь идет о минималистичной «визитке» или landing page — достаточно только верхнего горизонтального меню.
Если категорий очень много — добавьте пункт «Карта сайта», который позволит пользователю сориентироваться, какие разделы содержит ресурс и как ему туда попасть. Не стоит пренебрегать «хлебными крошками» — навигационной цепочкой в верхней части блока контента, которая подсказывает, по какой схеме человек попал на страницу.
Пример удачной карты сайта
10. Форма регистрации и заказа: чем лаконичнее — тем лучше
Чем больше полей для заполнения — тем меньше пользователю хочется тратить на это время. Причем компоновка полей, надписей, подбор шрифтов могут быть идеальными, а вот длина — отталкивающей. Современные основы юзабилити заставляют веб-разработчиков сокращать длину этих форм до минимума, нещадно выкидывая вопросы об образовании, уровне дохода, профессии и т.д. Но! Сравните две формы: несмотря на наличие всего пары дополнительных полей, заполнять первую хочется меньше, чем вторую. Не говоря уже о требовании обязательно указать номер телефона.
11. Заметное длинное поле поиска
Соответствующая кнопка — лучший помощник посетителя. Особенно если речь идет о крупном ресурсе. Строку поиска пользователь должен обнаружить без труда. Чтобы при первом знакомстве он не тратил на обнаружение соответствующей строки даже несколько секунд.
Еще один важный момент — длина поля поиска. Согласно исследованию Якоба Нильсена, в среднем туда вмещается 18 символов, а оптимальная длина — 27 символов. В 90% случаев сюда поместится даже длинный запрос, чтобы пользователь его полностью увидел и исправил при надобности. Для установки нужной ширины используйте относительную единицу «em», равную размеру используемого шрифта.
Строка поиска — не в шапке сайта, а под презентацией, внизу страницы. Не самый удобный вариант, учитывая, что пользователь автоматически ищет эту опцию в верхней части сайта.
12. Больше свободного пространства
Сайт можно сравнить с жилой комнатой: если каждый квадратный метр чем-то занят — человек будет чувствовать себя неуютно. Аналогично и здесь: если страница будет переполнена полезными блоками, разделами, ремарками и прочей информацией — посетитель потеряется и не поймет, куда устремить внимание в первую очередь. Современный дизайн склонен к минимализму: на странице — только самое важное.
Множество блоков с практически незаметными рамками, обилие разнообразной графики, отсутствие выделения приоритетной информации не дают понять, на что обращать внимание в первую очередь при попадании на сайт.
После того как все принципы юзабилити учтены, переходят к тестированию, которое проводится постоянно, т.к. любая ошибка может оттолкнуть потенциального клиента.
Тестирование юзабилити
Новый интерфейс оценивается с двух позиций:
- Качественная. В данной категории анализируется функциональность ресурса, целевая направленность, грамотность составления структуры и подготовки контента, а также другие параметры, перечисленные в предыдущем разделе. Важно проверить сайт на ошибки: битые ссылки, редиректы, внешний вид страницы 404 и т.д.
- Количественная. Здесь оценивается скорость загрузки страниц, время отклика, перехода между страницами, поиска нужного раздела или кнопки.
Тестирование проводится самостоятельно либо при помощи специальных сервисов — к примеру, Яндекс.Метрика. Чтобы оценить юзабилити своими силами, нужно потратить немного времени: набрать группу из 5-6 человек из категории целевых пользователей, подготовить для них задания и вопросы по работе ресурса, сделать выводы из полученных результатов, исправить найденные ошибки. После внесенных изменений следует заново собрать фокус-группу.
Важно применять правила юзабилити не в самый последний момент: чем раньше разработчик начнет планировать структуру и внешний вид будущего ресурса — тем больше аспектов продумает, более качественный результат получит и сможет без спешки внести все коррективы. Предварительно следует проанализировать сайты конкурентов, выявив их слабые и сильные стороны, а также оценить предыдущий ресурс при его наличии, обнаружив моменты, требующие улучшения.
Статью подготовила Виктория Закирова.
www.ashmanov.com
Главные принципы Usability и основные правила
Что собой представляют главные принципы Usability? На этот и многие другие вопросы вы найдёте ответы в статье. Принципами «Юзабилити» называют общепринятые взгляды на взаимодействие с дизайном, которые ввёл Нельсен Якоб (основоположник «Юзабилити»). Эти воззрения, скорее, являются набором правил, а не жёсткими руководствами, поэтому их именуют «Эвристиками». Всего таких принципов существует десять.
Видимость статуса
Первый принцип Usability — видимость статуса системы. Эта позиция говорит о том, что пользователь должен знать, где он остановился и что происходит. Если это сложная регистрация, нужно указывать, что это второй шаг или третий.
Эффективность
Следующий принцип Usability – эффективность. Фактически он означает, что между каждым пользователем и системой должна быть связь. Ваш сайт должен быть настроен под определённую аудиторию, вам нужно разговаривать с ней на её языке, применяя её уровень подготовленности и обозначения. Поэтому веб-узел всегда необходимо разрабатывать для своей публики. Это касается не только структуры, но и текстов, дизайна, помощи, визуального восприятия информации и так далее.
Свободный выбор
Что собой представляет третий принцип Usability? Свобода выбора. Это пользовательское управление, которое необходимо, чтобы клиент всегда мог контролировать ситуацию. К примеру, если человек заполняет форму, он всегда должен видеть кнопку «очистить форму». А если в ней несколько шагов предусмотрено? Пользователь должен всегда иметь возможность вернуться к предыдущим пунктам или пропустить какой-нибудь из них, чтобы немного позже повторить действие.
Благодаря такой ситуации у пользователя появится впечатление, что всем управляет именно он, что его не пытаются запутать или обмануть. И мудрёный на первый взгляд интерфейс при верном подходе станет обыкновенным. Ведь человеку гораздо проще выполнить несколько простых действий, чем одно сложное.
Стандарты
Четвёртый принцип Usability – последовательность и стандарты. В Сети уже существуют определённые устоявшиеся стереотипы (контакты в верхнем углу, вид корзины и так далее). Тем не менее одно обозначение может иметь несколько видов, поэтому неопытный пользователь среди них может запросто заблудиться. К примеру, электронные корзины идентичны тележкам, обычным корзинам, ультрамодным пакетикам и прочему. А для появления последовательности необходимо выбрать какой-нибудь определённый стиль, который нужно соблюдать везде. Это касается и вёрстки, и шрифтов, и текста, и картинок.
Профилактика ошибок
Пятый принцип Usability – профилактика ошибок. Это правило гласит, что ошибку нужно не исправлять, а предупреждать. Всегда нужно ликвидировать случайные, ненужные действия и везде, где можно, упрощать выбор. Это может быть обычная подсказка при вводе с клавиатуры чего-либо.
Это касается и кнопок. К примеру, предложение «Принять» обычно делают ярче и крупнее, чем просьбу «Очистить форму». Вы должны подсказывать известные вам сведения о вводимой информации (код региона, формат телефона и так далее).
Упрощение
Шестым принципом является правило «Выяснить проще, чем вспомнить». Упрощайте жизнь пользователям максимально, запоминайте ранее вводимые ими сведения (даже с их прошлых посещений сайта), делайте им подсказки. К примеру, если вы используете многошаговую систему регистрации, показывайте человеку уже заполненные поля, если они пригодятся ему в будущем.
Гибкость
Седьмой принцип Usability – гибкость использования. Согласно этому правилу интерфейс должен быть эластичным, он обязан настраиваться на преобладающую аудиторию. Здесь базовый упор делается на простоту с учетом обычного пользователя. Детали для продвинутых должны быть небольшими. Их можно расположить в менее заметных частях экрана, так как такие люди их везде найдут.
Дизайн
Принцип дизайна Usability восьмой по счёту. Он заключается в эстетике и минимализме. Согласно этому правилу в интерфейсе должна отсутствовать информация, которая пользователю не нужна. Также не должны в нём находиться и те сведения, которые человеку понадобятся в редких случаях.
Аналогично нужно создавать формы: нельзя спрашивать у пользователя данные, которые вам не нужны. К сожалению, этой позицией почти никто не пользуется. Для того чтобы лишь поздравить с именинами или Новым годом, у клиентов в 90% случаев требуют предоставить и дату дня рождения, и домашний номер телефона, и мобильный, e-mail и даже адрес.
Помощь
Главные принципы Usability должен знать каждый веб-мастер. Девятым воззрением этой научно-прикладной дисциплины является оказание помощи пользователям в понимании и исправлении ошибок. Обо всех промахах людям нужно сообщать обычным, «человеческим» языком, а не компьютерным. Если неверно создана ссылка, не нужно писать просто 404. Сообщите так: «При вводе страницы произошла ошибка». Если, заполняя форму, пользователь запамятовал указать свой номер телефона, напишите, что имеется погрешность при вводе данных, а не просто «ошибка форма».
Поддержка
Почему главные принципы Usability так важны? Давайте рассмотри десятый принцип, который называется «Документация и помощь». Материалы и поддержка должны быть простыми и понятными, легкодоступными, соответствовать целям пользователя. Вдобавок документация не должна быть объёмной. Необходимо, чтобы она содержала чёткие шаги. Если материалы слишком большие, можно сделать краткую навигацию для быстрого перехода по разделам, а также поиск по поддержке.
«Юзабилити»
Итак, мы рассмотрели главные принципы Usability. Но что же это за дисциплина? «Юзабилити» является мерой качества пользовательского опыта, полученного при взаимодействии с системой или продуктом. К примеру, это может быть программное приложение, веб-сайт или что-нибудь иное.
Специалисты User Interfase Engineering определили, что в 60% случаях люди не могут разыскать необходимые им сведения в вебе. В итоге у них снижается производительность труда. Они не желают больше возвращаться на сайт, из-за которого вынуждены терять драгоценное время.
Известно также, что Forrester Research получил некоторые цифры, которые показывают суммы убытков, появившихся из-за некачественного «юзабилити» сайтов. Сетевые магазины теряют около 50% клиентов, которые не могут найти необходимый продукт. Примерно 40% пользователей не желают возвращаться на сайт, с которым им не понравилось работать.
Якоб Нельсен утверждает, что исследование поведения людей в вебе показало, что они отвратительно воспринимают веб-узлы со сложным дизайном и медленные сайты. Он говорит, что пользователи не желают ждать. Им также не хочется выяснять, как пользоваться домашней страницей. Нигде нет инструкций по сайтам или обучения веб-проектам. Якоб знает, что люди хотят бегло просканировать страницы и моментально понять функциональность веб-узла.
Создание
Что такое разработка Usability? Принцип её заключается в методологическом подходе к созданию сайта или любого иного пользовательского интерфейса. Такая разработка состоит из нескольких методов, которые в процессе используются последовательно:
- сбор требований;
- создание и анализ прототипов;
- оценка противоположных вариантов дизайна;
- изучение вопросов пользователей;
- предложение решений и анализ сайта (либо любого иного интерфейса).
Тестирование
А что такое тестирование Usability? Принцип этого нюанса не каждый знает. Вообще, он является частью процесса создания «Юзабилити». В типичном тесте человеку необходимо выполнить несколько задач с помощью прототипа (или иной системы). Во время работы наблюдатель записывает, что говорит и делает пользователь. Как правило, такой тест проводится с одним или двумя людьми, действующими совместно.
Анализ может собирать такие данные, как ошибки, которые делают пользователи, последовательность действий человека для достижения цели, время и место возникновения трудностей у аудитории, насколько нравится продукт людям, и их скорость выполнения задач. Большинство тестов используются для выявления и решения любых проблем, появляющихся у публики.
Шаги дисциплины
Из каких шагов состоит «Юзабилити»? Для планировки веб-сайта сначала нужно понять, для чего вы его разрабатываете, для кого, зачем и когда ваши читатели будут посещать ваш ресурс. Если вы ответите на эти вопросы, то выявите назначение своего сайта. Определённые цели зависят от аудитории веб-узла и вашей организации.
Кроме того, вы должны определить задачи сайта «Юзабилити». В соответствии с общими целями ваш ресурс должен быть эффективен в применении, прост в обучении, лёгок для запоминания при повторных посещениях. А ещё нужно, чтобы он удовлетворял пользователя.
Каждая цель «Юзабилити» важна для большинства веб-узлов, но вы можете выделить и иные для разных аудиторий и ситуаций. Известно, что дизайн базируется на потребностях людей, поэтому нужно собирать сведения не только о них, но и о том, в какой мере существующий сайт их удовлетворяет. Есть несколько приёмов сбора данных, которые включают логи сервера, формы обратной связи, тестирование «Юзабилити» существующего веб-узла.
Для людей проще взаимодействовать с реальным примером, чем рассуждать, что же лучше всего будет работать. Полезные результаты всегда можно получить с помощью прототипа сайта, который имеет минимум контента и лишён графики. Такой элементарный прототип годится для первого цикла тестов.
Контент размещать следует лишь тот, который необходим пользователям сайта. Если вы располагаете горой сведений, выберите из них те, которые будут полезны и приятны вашей аудитории. Вся информация должна быть разбита на маленькие кусочки с подзаголовками, так как люди хотят быстро прочесть то, что их интересует. Из текста нужно удалить необязательные слова, использовать таблицы и списки.
Далее осуществляется интерактивный процесс – тестирование «Юзабилити», о котором мы писали выше. Иногда нужно интерфейс, уже спроектированный в соответствии со всеми правилами, протестировать. Кстати, фокус-группы являются самым доступным способом для анализа «своими силами».
Составляющие
Итак, используя правила и принцип Usability, вы сможете создать ресурс, которым будете гордиться. Наличие этого удивительного предмета является качественным признаком, который определяет, в какой мере интерфейс пользователя лёгок в применении. Слово «юзабилити» также означает коллекцию методов, улучшающих сайт в процессе его создания.
У «Юзабилити» имеется пять количественных составляющих:
- Эффективность: после ознакомления пользователей с дизайном, как быстро они выполнят то же задание?
- Обучаемость: насколько легко люди могут реализовать базовые задачи, впервые используя незнакомый им интерфейс?
- Ошибки: сколько погрешностей делает человек, насколько они серьёзны, легко ли он может их исправить?
- Запоминаемость: если пользователь вернулся к интерфейсу через определённый период времени, удастся ли ему восстановить свои навыки работы с ним?
- Удовлетворённость: до какой степени человеку приятно пользоваться данным интерфейсом?
Кроме «Юзабилити», существует ещё множество иных важных качественных признаков дизайна. Одним из ключевых является полезность. Этот признак описывает функциональность технического решения и определяет полезность интерфейса пользователям. «Юзабилити» и практичность одинаково важны: зачем пользоваться удобной программой, если она даёт не тот результат, который вам необходим? Плохой считается и та программа, которая гипотетически работает так, как вам нужно, но вам не нравится её сложный интерфейс. Для анализа полезности проекта можно пользоваться теми же средствами, что и при изучении качества его «Юзабилити».
В Web-e «Юзабилити» считается необходимым условием выживания. Если с сайтом сложно работать, посетители с него очень быстро уходят. Если на главной странице веб-узла ясно и чётко не указано, чем занимается предприятие, какие задачи ресурс позволяет выполнить, пользователи будут искать другой веб-узел. Люди уйдут также, если сайт запутан, информация на нём трудна для понимания и не отвечает на их ключевые вопросы.
Не существует таких посетителей, которые на освоение интерфейса сайта тратят своё время или внимательно изучают инструкции по работе с ним. В Web-e много других ресурсов, поэтому если посетитель наткнулся на трудность, вы его потеряете.
fb.ru
5 главных принципов хорошего юзабилити сайта
Юзабилити стало товаром. За последние несколько лет мы привыкли к определенным стандартам в веб-дизайне. Чтобы произвести впечатление на ваших посетителей, вам нужно создать что-то лучше, чем просто удобный веб-сайт. Это не означает, что удобство использования стало менее важным. Просто теперь оно лишь создаёт основу для положительного пользовательского опыта взаимодействия с вашим сайтом.
Источник фото: https://blog.optimalworkshop.com/Хороший юзабилити предполагает дизайн сайта, ориентированный на пользователя. И процесс проектирования, и разработка сосредоточены вокруг потенциального пользователя, чтобы убедиться, что его цели, ментальные модели и требования выполнены, что позволит создавать продукты, которые являются эффективными и простыми в использовании.
Вот 5 основных принципов хорошего юзабилити сайта
1. Удобство и доступность
Давайте начнем с базового, но главного аспекта юзабилити: удобство и доступности вашего сайта. Если люди пытаются получить доступ к вашему веб-сайту, но он не работает по какой-либо причине – ваш сайт бесполезен.
Мало того, что пользователи будут разочарованы, вы также будете терять новых клиентов и прибыль каждый раз, когда ваш сайт будет недоступен.
Вот 3 основные вещи, которые обязательно должны быть соблюдены:
- Время работы сервера – важно убедиться, что посетители не получают сообщение об ошибке при попытке загрузить ваш сайт. Инвестируйте в хороший хостинг.
- Неработающие ссылки – дважды проверьте, что на вашем сайте нет мертвых ссылок. SEO-инструменты, такие как Ahrefs и Screaming Frog, просканируют ваш сайт и найдут все неработающие ссылки.
- Мобильная адаптивность – убедитесь, что ваш сайт корректно отображается на экранах разных размеров и даже при медленном соединении. Хорошая мобильная версия поможет вашему сайту получать больше трафика из поиска.
Amazon.com является прекрасным примером удобного веб-сайта по многим причинам.
Во-первых, настольная версия сайта оптимизирована как для планшетов, так и для настольных экранов. Компоновка элементов является гибкой и настраивается автоматически при уменьшении размера экрана. Для мобильных устройств существует версия сайта с понятным интерфейсом, меньшим количеством беспорядка и четкой иерархией контента. Эта облегченная мобильная версия работает даже при медленном мобильном интернет-соединении
Во-вторых, у Amazon.com практически не бывает сбоев в работе серверов. Это именно то, что вы ожидаете от компании такого масштаба. Постоянная доступность сайта делает Amazon надежной и заслуживающей доверия сервисной платформой.
И последнее, но не менее важное: Amazon активно заботится о доступности своего ресурса для всех людей. На своем веб-сайте они заявляют: «Мы всегда ищем способы улучшить юзабилити сайта для наших клиентов, в том числе для людей с ограниченными возможностями». Для программ чтения с экрана они специально рекомендуют свой мобильный сайт с более четким представлением контента.
2. Понятность
Можно сказать, что суть юзабилити – понятность.
Если вы отвлекаете или вводите в заблуждение своих посетителей, им либо потребуется больше времени, чтобы найти то, для чего они пришли, либо они могут забыть о своей первоначальной цели. В любом случае, они не будут воспринимать ваш сайт как удобный для пользователя и есть вероятность, что они останутся недовольны и больше никогда не зайдут к вам.
Посетители приходят на ваш сайт с определенными целями. Ваша задача – помочь им как можно быстрее достичь этих целей. Если вам удастся сделать это, ваши посетители будут довольны, и вы заложите основу для положительного опыта.
Четкий и удобный дизайн может быть достигнут благодаря следующим вещам:
- Простота – сосредоточьтесь на том, что важно. Если вы не отвлекаете своих посетителей, они с большей вероятностью будут делать то, что вы от них хотите.
- Преемственность – придерживайтесь того, что люди уже знают. Нет ничего плохого в поиске вдохновения на других сайтах.
- Последовательность – все страницы сайта должны быть исполнены в едином дизайне.
- Направляемость – ведите ваших посетителей за руку. Не ожидайте, что они будут изучать ваш сайт самостоятельно. Вместо этого проведите их через свой сайт и покажите, что вы можете предложить.
- Обратная связь – обратная связь необходима при любом взаимодействии с сайтом. Вам нужно знать, что пользователи думают в каждый момент времени и что у них получается, а что-нет.
- Хорошая информационная архитектура – понимайте ментальные модели ваших посетителей и то, как они ожидают, что вы структурируете контент на своем сайте.
Apple известна своими удобными в использовании продуктами. Простота и фокус на том, что действительно важно, проглядывается и на их сайте.
Общий вид очень элегантный и минималистичный. Существует много пустого пространства, и только соответствующий контент представлен в простой и понятной форме. Классическое верхнее навигационное меню содержит логотип и кнопку «Домой», магазин, различные категории товаров, ссылку на страницу поддержки и функцию поиска. Нижний колонтитул сайта содержит классические вторичные ссылки, такие как Условия использования и Политика конфиденциальности.
Здесь нет отвлекающих факторов, что позволяет пользователям легко достигать тех целей, ради которых они зашли на сайт. Например, выбирая категорию «Mac» в верхней части навигации, вы получаете визуальный обзор различных доступных продуктов Mac. Кроме того, вы получаете суб-навигацию со списком всех сопутствующих товаров, относящихся к этой категории. Стерильный дизайн делает сайт таким же интуитивно-понятным в использовании, как и все другие продукты Apple.
3. Обучаемость
Обучаемость является еще одним важным аспектом юзабилити.
Ваша цель – создавать интуитивно понятный интерфейс – интерфейс, которым можно будет пользоваться без инструкций или большого количества проб и ошибок. Ключом к интуитивному дизайну является использование того, что люди уже знают, или создание чего-то нового, чем легко научиться пользоваться.
В настоящее время люди знакомы с большим количеством удобных интерфейсов, используемых в Интернете. Если ваш похож на один из них, то вы соответствуете ожиданиям ваших посетителей и помогаете им быстрее достигать своих целей. Людям нравятся шаблоны и преемственность и им легко воспринимать то, с чем они уже знакомы.
Если вы применяете новые элементы в своем дизайне, обязательно используйте их последовательно и помогите людям на начальном этапе их освоения. Например, вы можете предложить дополнительную информацию или инструкции при первом использовании вашего сайта или продукта. Сделайте их простыми и наглядными, чтобы посетители легко запомнили их.
Хотя дизайн сайта Microsoft выглядит свежо и современно, макет остается классическим и соответствует тому, что большинство из нас знает о сайтах. В верхнем левом углу есть логотип, указывающий нам, на каком ресурсе мы находимся. Справа вверху есть кнопка поиска, которое позволяет нам искать на сайте любой случайный термин. Чуть ниже представлено верхнее навигационное меню с основными категориями сайта. Нажав на категорию, мы получаем раскрывающееся меню со всем контентом, доступным в этой категории.
Внизу есть раздел с социальными сетями и футер сайта, содержащий другие сайты Майкрософт и дополнительные ссылки.
Сайт понятен и прост в навигации. Знакомый макет помогает людям быстро найти то, что они ищут.
4. Достоверность
Доверие является ключевым аспектом любого веб-сайта.
Даже если люди находят контент, который они ищут, если они не доверяют ему, этот контент бесполезен. Ваш сайт может привести к тому, что его посетители будут скептически относиться к вам по разным причинам, таким как сомнения в том, существуете ли вы на самом деле, какая у вас репутация и качественный ли контент размещаете.
Важно, чтобы люди знали, что вы настоящая компания и работают у вас реальные люди. Создайте страницу «О нас» с вашими контактными данными и, если возможно, физическим адресом.
Конечно, ваш контент также играет важную роль для восприятия надежности вашего сайта. Убедитесь, что вы честны и уверены в своем контенте. Избегайте ошибок, таких как неправильная грамматика или орфографические ошибки. Не скромничайте в своих знаниях. Если вы являетесь экспертом в своей области, убедитесь, что люди знают об этом. Например, чтобы привлечь посетителей, вы можете показать отзывы о вас, ссылки от авторитетных сайтов или количество подписчиков в ваших социальных сетях.
Бренд L’ORÉAL отлично справляется с построением доверительного отношения со стороны посетителя.
Помимо профессионального дизайна, который соответствует изысканной репутации бренда, они предлагают много высококачественного контента, чтобы продемонстрировать то, что они являются экспертами в своей области.
Например, весь раздел контента содержит информацию об исследованиях и инновациях. Это свидетельствует об участии бренда в профессиональных исследованиях и отражает высокое качество его продукции. Другой раздел сайта посвящен обязательствам, демонстрируя, что бренд ответственно подходит к тому, чем он занимается.
Помимо исследований, бренд также демонстрирует отзывы экспертов и фотографии знаменитостей, таких как Джулия Робертс, чтобы убедить людей в качестве и популярности их продуктов. С L’ORÉAL очень легко связаться, что также повышает доверие к бренду. Связаться с ним можно не только через социальные сети – у них есть физический адрес и номер телефона.
5. Актуальность
И последнее, но не менее важное: релевантность способствует удобству использования веб-сайта.
Недостаточно, чтобы ваш сайт был понятным – ваш контент должен быть актуальным. Опять же, важно, чтобы вы знали своих пользователей и зачем они посещают ваш сайт.
Начните с определения того, кто ваши посетители. Далее узнайте их цели при посещении вашего сайта и определите пользовательские сценарии, которые демонстрируют, в каких ситуациях люди посещают ваш сайт и какой контент они ищут. Любое дизайнерское решение, которое вы принимаете, должно сделать ваш сайт более удобным для пользователей.
Nike сделал образцовую работу, расставив приоритеты для своего контента с акцентом на своих пользователей.
Бренд предлагает спортивную одежду и экипировку для разных видов спорта. Когда вы заходите на их сайт, вы можете выбрать их в магазине «Мужчины», «Женщины» или «Дети». В каждой из этих вкладок есть выбор вида спорта. Вместо того, чтобы группировать людей только по возрасту или полу, Nike определяет своих посетителей как спортсменов в конкретной дисциплине.
Например, если вы ищете новые кроссовки для бега, вам не хочется просматривать всю обувь для тенниса или занятий в помещении. Nike позволяет вам просматривать магазин в соответствии с вашими конкретными целями.
Юзабилити – это тесты, тесты и ещё раз тесты
Хорошее юзабилити не создается в одночасье. Оно зависит от того, доступен ли ваш сайт, понятен ли он, заслуживает ли он доверия, является ли он понятным любому человеку и насколько актуальную информацию он предоставляет людям, которые посещают его.
Перевод – crazyegg.com (англ.)
Предлагаем вам также ознакомиться с чек-листом по юзабилити сайта и другими статьями о разработке сайта:
web-optimizator.com
Элементарные основы юзабилити. Главные принципы Usability и основные правила
О юзабилити» url=»http://marketnotes.ru/about-usability/usability-principls/»>Читая про эвристические методики оценки дизайна и юзабилити, я обратил внимание, что все ссылаются на некие общепринятые принципы юзабилити, однако, никто не пишет какие. Тут два варианта: или они настолько понятны и естественны, что о них даже и не стоит говорить, или же толком никто не знает, что же это за принципы. Проанализировав статьи, которые на них ссылаются, да и просто подумав обе поисковые системы, я пришел к неутешительному выводу: толком никто ничего не знает, а все статьи – это неточные копии одной из статей Якоба Нельсона. Некоторые даже оставили ссылку на эти самые общепринятые принципы.
Увы, я не нашел ни одной статьи на русском (или украинском) языке, где бы они раскрывались. А посему, я решил, что стоит все-таки перевести и немного расшифровать эти самые принципы.
Итак, 10 общепринятых принципов юзабилити. Рассмотрим их более подробно.
1. Видимость статуса системы.
Этот принцип означает, что пользователь ВСЕГДА должен знать, что происходит и на каком участке пути он остановился. Если это сложная регистрация, указывайте, что это 2 шаг из 3. Если что-то закачивается или работает какой-то скрипт – выводите % обработки. И т.д.
Простой пример – уверен что каждый сталкивался с ситуацией, когда вы по какой-то иконке кликнули, но ничего не происходит. Судя по тому, как активно крутиться винт и мигает монитор – что-то все-таки происходит, и через несколько минут открывается окно программы, например (у меня так до сих пор открывается ИЕ). А что делать в интернете, когда все грузиться не на вашем компьютере, а на сервере в другой стране. Большинство пользователей просто несколько раз нажимают на кнопку «отправить», загружают одни и те же файлы несколько раз и т.п. А все потому, что отсутствует эта самая связь между пользователем и системой.
Следует внимательно следить за тем, чтоб система всегда четко и однозначно реагировала на действие пользователя. Есть такой момент – между действием и реакцией должно пройти максимум 1 секунда – это не причуда юзабилистов. Научно выяснено, что это именно то время, которое наш мозг держит причинно-следственную связь, типа сделал-получил. Если же реакция на ваше действие идет позже, чем через секунду – мозг воспринимает это как отдельное действие, лишь отдаленно связанное с предыдущим.
И еще одна граничная цифры – 10 секунд. Пользователь должен получить то, что он хочет в течении 10 секунд после своего действия (например, просматривая результаты поиска, пользователь открыл 5 окно. Затем быстро просматривает каждое из них. Если после того как он открыл окно в течении 10 секунд он туда не вернулся – считайте что он для вас потерян).
(цифры сам не проверял и не придумывал, взято с книги).
(это пример из Контакта. При загрузке фотографий вы видите процесс и оцениваете, сколько еще осталось ждать).
Следующий принцип говорит нам о том, что ваш сайт должен быть сделан под определенную аудиторию и вы должны общаться с ней на ее языке, используя ее обозначения и уровень подготовленности.
Буквально пару дней назад я смотрел два сайта компьютерной тематики с довольно похожей структурой и дизайном. НО! Один был посвящен особенностям настройки операционной системы, а второй – компьютерные курсы для начинающих.
Как вы понимаете, это две совершенно разные аудитории, и фраза «кликните 35 строку в реестре» будет более чем понятна для аудитории первого сайта, 99% пользователей второго сайта повергнет в шок.
Поэтому, всегда учитывайте свою аудиторию, и делайте сайт всегда для нее. Это касается не только текстов, но и структуры, помощи, дизайна, визуального восприятия информации и т.д.
(уже с первого взгляда понятно, на кого направлена информация на этом сайте. Новичок даже читать не будет что там. Уже по оформлению понятно, что она для программистов).
3. Пользовательское управление (свобода выбора)
Пользователь всегда должен контролировать ситуацию, так сказать держать руку н
offlink.ru
10 полезных выводов и принципов юзабилити / Habr
Каждый согласится, что юзабилити является важным аспектом веб-дизайна. Несмотря на то, работаете ли вы над дизайном сайта портфолио, над он-лайн магазином или веб-приложением, важно сделать страницы удобными и простыми для пользователей. В протяжении последних лет было сделано много исследований о разных аспектах веб-дизайна и дизайна интерфейсов. Результаты этих исследований весьма значимы и помогают нам улучшить качество наших работ. Данная статья содержит 10 полезных выводов и принципов юзабилити, которые помогут вам улучшить впечатления пользователей от ваших сайтов.Исследование, сделанное UX Matters, показало, что лучше всего ярлыки форм ставить над полями формы. На многих формах ярлыки поставлены на левой стороне полей, создавая этим макет с двумя столбцами; в то время как это хорошо выглядит, это не является самым простым макетом для использования. Из за чего же это? Исходя из того, что формы в основном вертикально ориентированы, пользователи вводят информацию в формы сверху вниз. Пользователи идут по формам сверху вниз и для них будет удобней читать ярлыки над полями формы, нежели искать их на левой стороне формы.
Сайт Tumblr имеет простую и элегантную форму регистрации, которая соответствует рекомендациям UX Matter.
Позиционирование ярлыков на левой стороне в свою очередь создает другую проблему: по какому краю вы выровните ярлыки, по левому краю или же по правому? Выравнивание по левому краю делает форму визуально удобной, но разделяет ярлыки от форм, из за чего будет трудно понять какой ярлык относится к какому полю формы.
Выравнивание по правому краю делает обратное: форма приятна на вид, но она уже визуально неудобна. Вставка ярлыков над полями форм будет наиболее удобным в большинстве случаев. Исследование также показало, что ярлыки не должны быть жирными, но эта рекомендация не является обязательной.
Люди инстинктивно замечают других людей сразу же, как они приходят в поле зрения. На веб-страницах мы обращаем основное внимание на лица и глаза, что дает маркетологам хороший инструмент для привлечения внимания. Но наше внимание к лицам и глазам людей это только начало, оказывается, на самом деле мы даже начинаем смотреть в том направлении, куда смотрит человек на картинке.
Тепловая карта отслеживания взора при просмотре изображения с ребенком, который смотрит прямо на нас. Исследование сделано Usable World.
А сейчас ребенок смотрит на контент. Обратите внимание на увеличение количества взоров людей на заголовок и текст.
Это демонстрирует данное исследование отслеживания взора. Мы инстинктивно смотрим в направлении людей, но если люди смотрят на что нибудь другое, мы тоже начинаем смотреть в этом направлении. Пользуйтесь преимуществами данного феномена, чтобы обратить внимание ваших пользователей на важные части вашей страницы.
Были проведены различные исследования для выяснения факторов влияющих на доверие людей к веб-сайту.
Мы не знаем хорошим ли приложением является Fever или нет, но элегантный пользовательский интерфейс и веб-сайт создают отличное первое впечатление.
Одним из интересных выводов этих исследований является тот, что пользователи на самом деле судят о книге по обложке… или, скорее, веб-сайт по своему дизайну. Такие элементы как макет, консистенция, типографика, цвет и стиль влияют на то, как пользователи воспринимают ваш сайт и какую картину вы проецируете. Ваш сайт должен проецировать не только хорошее изображение, но также должен проецировать правильное для вашей аудиенции изображение.
Другими факторами влияющими на доверие к сайту являются: качество контента веб-сайта, количество ошибок, частота обновлений, простота использования, надежность авторов.
Исследование Джакоба Нильсена (Jakob Nielsen) о том, сколько пользователей прокручивают страницу (Определение приоритетов в юзабилити сайтов), выявило, что только 23% пользователей прокручивают страницу при своем первом посещении сайта. Это значит, что 77% пользователей не будут прокручивать страницу, они просто просмотрят контент до надобности прокрутки. Более того, процент пользователей, которые будут прокручивать уменьшится при последующих визитах сайта до 16%. Эти данные свидетельствуют о том, насколько важно показать важную информацию в видном месте, особенно на целевых страницах.
Это не значит, что вы должны собрать чрезмерное количество информации в шапке сайта, это лишь означает, что вы должны использовать эту часть страницы наилучшим образом. Чрезмерное количество информации в шапке сайта просто сделает содержимое недоступным, когда пользователь видит слишком много информации, он не будет знать где именно начать просмотр всего этого.
Basecamp использует место превосходным образом. В верхней части экрана (768 пикселей в высоту) он показывает большой скриншот, подзаголовок, предложение, призыв к действию, список клиентов, видео и краткий список возможностей, с изображениями.
Это самое главное для домашней страницы, на которой все новые пользователи окажутся в первую очередь.
Так предоставьте в этой части сайта основные данные:
- Имя сайта,
- Предложение значимости (тоесть, какие выгоды они получат от его использования),
- Навигация по основным частям сайта, которые важны для пользователя.
Однако с тех пор привычки пользователей существенно изменились. Последние исследования доказывают, что пользователи вполне комфортно себя чувствуют прокручивая, а в некоторых ситуациях они готовы с радостью прокрутить до нижней части страницы. Многим пользователям удобнее прокрутить, чем пользоваться переключателями страниц, и для многих пользователей не обязательно, чтобы важная информация была расположена на верхней части сайта (это из за многообразия мониторов с большим разрешением). Так что это хорошая идея разделить ваш макет на части для удобства просмотра, разделяя их большими пробелами.
Отлично, когда вы создаете для своего сайта уникальный дизайн, но когда речь идет о юзабилити, лучше делать то, что все остальные делают. Следуйте конвенциям, так как когда люди посещают новый сайт, они всегда ищут вещи на тех местах, где они привыкли их находить на других сайтах, они используют свой опыт, чтобы осмыслить новое содержимое. Это называется “использование образцов”. Люди ожидают определенных вещей, таких как цвета ссылок, расположение логотипа сайта, поведение вкладок навигации и т.д.
Google всегда делает свои ссылки синими и на то есть причина: цвет знаком многим пользователем, из за чего ссылки легко обнаружить.
Какой цвет должны иметь ссылки? Первое соображение это контраст: ссылки должны быть достаточно темными (или светлыми) чтобы контрастировать с цветом фона. Следующее, они должны отличаться от остального текста на странице, так что не надо делать черные ссылки, когда сам текст на странице черный. И наконец, исследование показало (Ван Шайк (Van Schaik) и Линг (Ling)), что если вы ставите приоритет на юзабилити, то ссылки лучше делать синими. Цвет ссылок браузера по умолчанию это синий, так что люди ожидают увидеть именно этот цвет. Выбор другого цвета отнюдь не проблема, но пользователям потребуется больше времени на нахождение таких ссылок.
Какая должна быть ширина у идеального поля для ввода поискового запроса? Якоб Нильсен (Jacob Nielsen) провел исследование на тему количества символов в поисковых запросах введенных в поля поиска на сайтах. Оказывается, что большинство сегодняшних полей ввода поискового запроса весьма короткие. Проблема с короткими полями ввода поискового запроса заключается в том, что, несмотря на то, что вы можете писать достаточно длинный поисковой запрос, лишь малая его часть будет видна одновременно, что делает трудным последующую ее правку.
Исследование показало, что в среднем поля ввода поискового запроса имеют ширину в 18 символов. Судя по данным, 27% поисковых запросов были слишком длинными и не поместились в них. Расширение поля ввода поискового запроса до 27 символов в длину позволит поместить в нем 90% поисковых запросов. Помните, что вы можете ставить ширину не только в пикселях и пунктах, но также и в “em” (относительная единица длины, равная размеру текущего шрифта). Таким образом используйте эту величину для установки ширины поля ввода поискового запроса в 27 символов.
Поле ввода поискового запроса Google является достаточно широкой для длинных поисковых запросов.
Поле ввода поискового запроса Apple слишком короткое, запрос “Microsoft Office 2008.”в нем не поместился.
В целом, лучше делать поля поискового запроса слишком длинными, чем слишком короткими, чтобы пользователи могли быстро проверить введенный запрос и отправить его. Это весьма простой совет, но, к сожалению, очень часто его отклоняют и игнорируют.
Большинство дизайнеров знает значение пустого пространства, которое является пространством между параграфами, изображениями, кнопками и другими элементами на странице. Свободное пространство делает объекты на странице более четкими и выделяющимися. Мы можем также группировать пункты за счет уменьшения расстояния между ними и увеличения пространства между ними и другими элементами на этой странице. Это важно для демонстрации отношений между элементами (например, показать, что эта кнопка относится к этой группе элементов) и строения иерархии элементов на странице.
Обратите внимание на широкую границу содержимого и разделение параграфов на сайте The Netsetter. Все это пространство делает содержимое простым и комфортным для чтения.
Свободное пространство тоже делает содержимое более читабельным. Исследование показало, что использование свободного пространства между параграфами и в левой и правой колонках повышает понимание на 20%.
На самом деле, согласно Чаперро (Chaperro), Шайху (Shaikh) и Бейкеру (Baker), макет веб-страницы (включая пробелы, заголовки и отступы) не может заметно повлиять на производительность, однако будет влиять на степень удовлетворенности пользователя.
Исследование Якоба Нильсена (Jakob Nielsen) на тему идеального числа тестирующих юзабилити сайта показало, что всего 5 тестирующих пользователей выявят почти 85% всех проблем на вашем сайте, в то время как 15 тестирующих выявят почти все проблемы.
Самые большие проблемы обычно находятся первым или первыми двумя тестирующими, остальные тестирующие подтверждают эти проблемы и находят остальные мелкие проблемы. Всего два тестирующих пользователя вероятно найдут половину проблем на вашем сайте. Что означает, что тестирование не должно быть обширным или дорогим для получения хороших результатов. Наибольшие успехи достигаются при переходе от 0 тестирующих до 1, так что не бойтесь делать слишком мало: любое тестирование лучше, чем ничего.
Если ваш сайт имеет страницы продуктов, люди, которые будут покупать эти продукты, несомненно, просмотрят их. Но много страниц продуктов содержат недостаточно информации, даже если пользователи их лишь бегло просмотрят. Это серьезная проблема, потому что информация о продукте поможет людям принять решение о покупке. Исследование показало, что 8% проблем с удобством связано с недостаточной информацией о продуктах, что также вызывает 10% потерь клиентов (тоесть пользователь просто покидает сайт).
Apple предоставляет отдельные страницы “Технические характеристики” для каждого из своих продуктов, тем самым отделяя трудные технические детали от легких маркетинговых страниц, но при надобности предоставляя доступ к таким данным.
Предоставьте вашим пользователям подробную информацию о ваших продуктах, но не нагружайте их большим количеством текста. Предоставьте им легкоусвояемую информацию. Разделяйте текст на маленькие блоки и используйте много подзаголовков. Вставьте в такие страницы много изображений вашего продукта и используйте правильный язык: не используйте жаргонные выражения, которые ваши пользователи могут не понять.
Якоб Нильсен, (Jakob Nielsen) в своем топике на AlertBox, говорит о том, что большинство пользователей просто не видит рекламу. Если они ищут какую нибудь конкретную информацию или нацелены на содержимое сайта, то они просто не обратят никакого внимания на баннеры.
Следствием этого является не только то, что пользователи будут избегать рекламы, но что они будут избегать всего, что выглядит как реклама, даже если это не является рекламой. Некоторые пункты меню могут выглядеть как рекламные баннеры, так что будьте осторожны с такими элементами.
Квадратные баннеры на левой стороне сайта FlashDen фактически не являются баннерами: это ссылки на контент на том же сайте. Они слишком похожи на баннеры и могут быть проигнорированы некоторыми пользователями.
Тем не менее, реклама, которая выглядит как контент, может быть посещена людьми, которые ищут именно этот контент на странице. Это может вам принести больше дохода с рекламы, но также может понизить доверие пользователей к вашему сайту, потому как они будут кликать на баннер думая, что это ссылка на материал на сайте. Перед тем как вы решитесь на такое, подумайте, что лучше для вас – краткосрочный доход или долгосрочное доверие?
habr.com
Как создать идеальный интерфейс. Главные принципы Usability и основные правила
12 мая 2011 в 17:03- Блог компании ALEE Software
Споры рационалистов и эмпириков об источнике человеческого знания являются одной из интереснейших страниц в истории философии и психологии. В наше время открытия в области частных наук (нейрофизиологии, когнитивной психологии, лингвистики, исследований искусственного интеллекта и т. п.) заставляют вновь обратиться к данным дискуссиями и посмотреть на традиционные проблемы с неожиданной стороны.
Под эмпиризмом понимается позиция, согласно которой ключевым источником человеческого знания является чувственный опыт. По выражению английского философа 18 века Джона Локка, одного из самых известных приверженцев эмпиризма в философии и психологии, человеческое сознание представляет собой «чистую доску» (tabula rasa), на которую наносятся метки чувственных впечатлений. Интеллект не оказывает никакого влияния на чувственное восприятие; его функции сводятся лишь к обобщению полученных в чувственном опыте данных.
В противоположность эмпиризму рационализм основным источником познания полагает разум. Философы и психологи, стоящие на позициях рационализма, считают, что человеческий разум вовсе не является «чистой доской»: на наше восприятие вещей могут оказывать влияние как врожденные компоненты, так и предшествующий опыт. Экспериментальная психология ХХ века показала, что наше чувственное познание всегда определенным образом ориентировано. Воспринимая новые вещи, мы всегда интерпретируем их на основе целой системы предрассудков и предмнений. Для иллюстрации высказанных тезисов можно, например, сравнить, как одно и то же событие освещается в выпусках новостей на разных телеканалах: на один и тот же визуальный ряд накладываются различные тексты, создающие у зрителей установку, на основе которой осуществляется интерпретация видимого.
Предрассудки и предмнения играют огромную роль в процессе человеко-машинного взаимодействия. Для создания максимально дружественного пользователю интерфейса необходимо принимать во внимания все установки и ожидания пользователей — в противном случае приложение или сайт может получиться неэргономичным или, говоря современным языком, неюзабельным.
Нередко разработчики, дизайнеры и юзабилисты сами забывают о том, что и у них формируется система предрассудков и предмнений, оказывающих влияние на их работу. В результате нередко случается так, что готовый продукт получает высокую оценку программистов и дизайнеров, но не конечных пользователей. Конечно, по материалам многочисленных исследований можно получить более или менее ясное представление о пользовательских потребностях. Но так уж устроен человек, что в своей повседневной деятельности он будет учитывать мнение представителей той группы, в которой он находится постоянно, чем мнение каких-то абстрактных пользователей. На основе материалов блога SixRevisions рассмотрим некоторые типичные пользовательские установки.
«Я знаю, где это должно находиться»
У пользователей Интернета сложилась система представлений о том, где должны быть расположены те или иные элементы сайта. Например, очень многие пользователи «на автомате» начинают искать поле для ввода логина и пароля в правом верхнем углу экрана.
Поле для ввода логина и пароля в правом верхнем углу на сайте Mint.Com.
«Я знаю, как это должно выглядеть»
У пользователей есть система предрассудков и предубеждений, связанных с внешним видом сайтов. Например, графический элемент со скошенными краями почти всегда воспринимается ими как кнопка
thesaker.ru