Пользователь
0,0
рейтинг
6 мая 2013 в 16:51

Дизайн → Usability чеклист из песочницы

image

Небольшой и полезный чеклист по usability. Проверьте свой ресурс перед тем как перейти к юзер-тестированию. Не претендует на «столп usability», которому необходимо следовать, но здесь собраны довольно полезные вещи.

User experience

  • Персонализация. Валюта, язык, специфичные для определенных стран моменты, налоги и опции доставки должны меняться в зависимости от того, откуда пользователь. Геолокация по IP не должна быть включена без разрешения пользователя.
  • Регистрация несет за собой смысл. Например, кнопка «бесплатный период использования» (free trial) несет вполне ощутимый толк, а вот просто ссылка на форму регистрации нет.
  • «Прозрачное ценообразование». Цены сразу видны, нет никаких «подводных камней», аля мелкие ценники внизу, звездочки, сноски и т.д.
  • Страницы сами не обновляются. Пользователь может быть крайне удивлен, если, например, на новостном сайте вдруг сверху выскочит новость.
  • Информация на вашем ресурсе достоверная. Нет битых ссылок, ссылки ведут на соответствующие тематике ресурсы, правильные контакты (по которым можно дозвониться или найти офис), на сайте размещены фото реальных людей (которые действительно имеют отношение к тематике сайта или его функционированию). Ну и не забывайте про качественный дизайн (напомню, статья не про дизайн, а про usability).
  • Изображения должны доносить всю необходимую информацию: должна быть возможность увеличить изображение и рассмотреть детали.

Домашняя страница

Тут стоит конечно же упомянуть разногласия в названиях этого пункта. «Домашняя страница», она же в большинстве случаев «Landing Page» (хотя и не всегда), «стартовая страница» так же относится к этой странице. Хорошая статья на Хабре.
  • Ясный и четкий призыв к действию (англ. call for action). Пользователь знает, что делать дальше и какую выгоду это ему принесет. Четко выражена цель и назначение сайта.
  • Имя авторизованного пользователя отображается на странице. К примеру, не просто «добрый день сэр», а «добрый день Иван».
  • Все основные изменения анонсируются на домашней странице.
  • Контактная информация и информации о компании (расположение) должна быть легко доступна с домашней страницы.
  • Политика конфиденциальности. Если ваш сайт собирает информацию пользователей, об этом должно быть сказано на домашней странице.
  • Все изображения и видео несут за собой вполне определенный смысл и цель. Никаких непонятных стоковых фото топ-моделей. Только высококачественные фото и видео, относящееся к вашей деятельности. Видео и звуковые эффекты не должны автоматически проигрываться, если только пользователь не ожидает этого (уведомите посетителя о начале видео или мелодии).
  • URL должен работать без приставки www.

Доступность

  • Alt атрибуты должны быть прописаны для нетекстовых блоков, таких как изображения и карты. Подписи и транскрипции желательны для аудио и видео элементов.
  • Цвет сам по себе не используется для передачи информации.
  • Текст остается читаемым после отключения стилей. Полезная ссылка для проверки.
  • Доступная навигация. По сайту возможно перемещаться без мышки, используя только клавиатуру. Все специальные клавиатурные сочетания используемые для навигации не скрыты от пользователя.
  • Избегайте использования Flash, на данный момент можно обойтись и без него (надеюсь на правильное понимание этого пункта).
  • Ссылки, кнопки, чекбоксы кликаются без труда. Например, пользователь может отметить чекбокс путем нажатия на текст, относящийся к этому пункту.

Навигация

  • Важные ссылки не размещены в динамических (крутящихся, вертящихся) элементах.
  • Избегайте сортировки по алфавиту, где это возможно. Используйте группировку по категориям или другим важным параметрам. Хорошая статья по этому поводу (на английском).
  • Пользователь должен знать где он находится, на какой именно странице, в каком разделе. Тут помогают, всеми любимые, хлебные крошки.
  • Навигация всегда постоянна, не меняется от страницы к странице.
  • Ссылка содержательна и указывает, куда именно она ведет исходя из темы и содержания. Не просто «тырц» или «нажмите сюда»
  • Описание сайта есть в title окна, тем самым сайт легко добавить в закладки и не забыть о чем он.
  • URL сайта легко запоминаем. Ну и конечно всегда стоит использовать Человекоподобные УРЛ.

Поиск

  • На сайте есть поиск, если конечно сайт не состоит из двух страниц.
  • Поиск есть на каждой странице, а не только на домашней.
  • Поле для поиска позволяет увидеть, что там написано.
  • Поиск — поле, а не ссылка на отдельную страницу.

Ссылки

  • Важные действия обозначены кнопками, а не ссылками. К примеру, «купить» или «оплатить» должны быть кнопками, а не ссылками.
  • Ссылки не открываются в новом окне браузера, ну или вкладке, если это конечно не pdf файл (хорошая статья на английском по этому поводу).
  • Ссылки легко узнаваемы. По их виду понятно, что они кликабельные. Другие элементы не должны выглядеть, как ссылки, к примеру, следует избегать подчеркнутого текста.
  • Уже посещенные ссылки отображаются отличным от непосещенных ссылок цветом.
  • Не должно быть битых ссылок (проверить можно на этом ресурсе).

Layout aka разметка

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

Процесс

  • Система отслеживания ошибок (Issue tracker). необходим для решения спорных моментов в области Usability/UX.
  • Юзер тестирование проведено на целевых группах и на разных стадиях проекта. Желательно не вовлекать в юзер тестирование тех людей, которые участвовали в разработке вашего ресурса.
  • Приоритет. Изменения вносятся в соответствии с их приоритетом. Не забыть учесть такие важные моменты, как цели проекта, бюджет, сроки, состав исполнителей и т.д.
  • ROI (окупаемость инвестиций) измнений. Считаем стоимость сайта до начала процесса создания и после.

Формы

  • Простота. Только самые необходимые вопросы задаются в ваших формах.
  • Следует избегать огромных выпадающих меню. Для разрешения этого момента можно использовать поле, которое будет валидироваться на сервере и выдавать результаты по мере заполнения. Так длинные выпадающие списки приводят к неудобному скроллингу.
  • Существует формат вводимых данных. К примеру телефонных номеров и кредитных карточек.
  • Поля для заполнения подписаны соответствующими тэгами. К примеру адрес, имя (поддерживают автозаполнение).
  • Не забыть про подтверждение формы.
  • Сообщение об ошибке заполнения должно отображаться рядом с тем полем, в котором сделана ошибка.

Контент

  • Контраст. Фон и текст на нем должны контрастировать. Можно воспользоваться вот этим сервисом для проверки.
  • Контент разделим, четко видны отступы между абзацами и частями текста, заголовки легко читаемы.
  • Контент написан понятным для пользователя языком, нет перегрузки предложений. Интересный сервис на заметку — www.read-able.com
  • Контактная информации компании хорошо читаема и различима. Клик по email не открывает приложение для почты (Outlook и тому подобные) автоматически.
  • Контент действительно полезен и отвечает на основные вопросы пользователя, он так же должен быть актуален. Нет никаких длинных инструкций и приветственных сообщений аля «Добро пожаловать на наш сайт».
  • Использование верхнего регистра внутри текста крайне нежелательно.


Прошу сделать отметку о том, что данный топик является переводом. Спасибо ресурсу userium.com
@LeDantu
карма
9,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (35)

  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      site.ru/index.php?id=category&action=view // не ЧПУ
      site.ru/category/view/eto-cheloveko-url // ЧПУ
    • +10
      Вероятно, автор хотел сказать нам о ЧеловекоПОНЯТНЫХ УРЛ, а не ЧеловекоПОДОБНЫХ конечно же.
    • +11
      http://cowboys.com/3O<-<
      
      • НЛО прилетело и опубликовало эту надпись здесь
      • +4
        Тогда уж как-то так…
        http://cowgirlz.com/O3-<
    • +1
      Меня тоже улыбнула подобная расшифровка термина ЧПУ ;)) Либо я просто не встречался с ней, либо автор не очень вдумывается с смысл произносимых слов. Опечатка думаю тут исключена.
  • +1
    По мне, так вместо ЧПУ намного удобнее структура как на хабре.
    Т.е. когда вместо
    habrahabr/post/usability-checklist-numero-dos/
    использоуют что-то вроде
    habrahabr/post/178867
    • –4
      А чем habrahabr/post/178867 не ЧПУ? Под ЧПУ имеется ввиду отсутствие get запросов.
      • +3
        habrahabr/post/178867 не get запрос?
      • +3
        Вы наверное имели ввиду GET параметров запроса, так как любой запрос на получение ресурса — это GET запрос. )))

        Однако все же по ЧПУ, на мой взгляд, подразумевается не столько отсутствие GET параметров, сколько общая структурированость и читаемость URL'ов.
        • –3
          Под get запросом я имел ввиду как-раз таки отсутствие параметров в явном виде. А ЧПУ в данном случае пост под номером 178867, т.к. мне удобнее прочитать номер поста чем непонятный текст в латинице, который только сбивает с толку.
          • 0
            Да, на хабре не ЧПУ
            Номер поста — это вообще ни о чем. Ничего не объясняет ни разу.
            • 0
              И всё-таки вы правы от части.
              1. Согласен, что айдишник статьи мало о чём говорит, но тем не менее сама ссылка позволяет человеку чётко понять, что по ней находится какой-то пост, а не список пользователей, не список используемой литературы, т.п.
              2. В продолжение к предыдущему пункту, сравните с habrahabr.ru?view=1¶m=178867
              • +1
                Ок, мало информативный УРЛ так наверно лучше :)

                ЧПУ это когда
                домен/post/usabiliti-cheklist

                Вот тут сразу понятно, перед нами ЧПУ :)

                На новостниках часто еще и дата подставляется ставится
                • 0
                  Согласен (:
    • 0
      Подходит для часто обновляемого контента
  • +5
    Контактная информации компании хорошо читаема и различима. Клик по email не открывает приложение для почты (Outlook и тому подобные) автоматически.


    Не очень понятно, а что должно происходить при клике на электропочту?
    • 0
      В оригинале то же самое о_О

      Contact and company information is clearly displayed. Clicking the email address doesn't automatically open a mail application.


      Странно.
      • 0
        Может «клик по адресу электронной почты сам вам не откроет почтовую программу»? В смысле, что нужно проставлять для него якорь с mailto:
  • +6
    Этот пост написан не самым человекопонятным текстом.
    • +5
      Зато слегка «человекоподобным» :)
  • 0
    Объясните сокральный смысл использования человекопонятного url?
    • 0
      К примеру можно позвонить другу и продиктовать ему адрес на интересную статью
      habrahabr.ru/index.php?view=post&id=178867
      вместо:
      habrahabr.ru/post/178867/
      • 0
        1. И часто вы звоните и диктуете адреса? Не проще смской/почтой/любым_месенджером отправить?
        1.0. Теперь представьте, как вы диктуете habrahabr/post/34786855 и mycoolsite.dot/istorii/sluchaj_s_moim_kotom (или mycoolsite.dot/stories/once_with_my_cat) человеку, который плохо знает английский.
        2. Если честно, то я давно перестал понимать смысл ЧПУ для людей. Если приглядеться, то люди ими не пользуются ( по крайней мере, в моём окружении нет таких) — «оценивают» только поисковики. На деле, человеку что sush349.dot/kopw?op=783&uyy=123 скопировать, что mycoolsite.dot/topics/animals/bear — одинаковая трудоёмкость. Поэтому значимость ЧПУ завышена.
        3. Задумайтесь, что даже если вы саппорт на каком-нибудь сайте, то объяснять вы будете не диктовкой ссылок, а описанием какую кнопку и где нажать.
        • +2
          Диктовал наверно ни разу, а вот смской отправлял, к сожалению остались люди которые не пользуются почтой/любым_месенджером.
          А ещё периодически вижу как люди, особенно более старшее поколение, записывает адрес на обычном листочке бумаги.
          И именно в этом случае habrahabr/post/34786855 более ЧПУ чем mycoolsite.dot/istorii/sluchaj_s_moim_kotom.
          А если представить ещё что пользователь более образованный, то он может вообще для себя отметить только 34786855. Но к сожалению тут вмешиваются другие силы и чаще мы видим mycoolsite.dot/istorii/sluchaj_s_moim_kotom
    • 0
      Тут мой ответ uriy.me/good-url. Правда писал давно и сейчас ответил бы ещё обширней.
  • 0
    промахнулся
  • 0
    Поправьте пожалуйста:

    … Цена сразу видны...


    … Страница сами не обновляются...

    • 0
      Опечаток намного больше. Предлагаю автору хорошенько перечитать пост и исправить.
  • 0
    … и последний пункт:
    • Если вы делаете сайт для китайцев, выполняйте все предыдущие пункты с точностью до наоборот
  • 0
    Хороший пост в правильном направлении. Я тоже думал написать такой. Единственное, что у меня вызывает серьёзное возражение — это поиск. На мой взгляд, на многих сайтах, особенно корпоративных, наличие поиска — это признание поражения навигации.
  • +1
    Смысл человекопонятного URL не в том, чтобы его можно было продиктовать по телефону, или чтобы понять из URL тему топика. Смысл ЧПУ в том, чтобы удалить номер поста — и попасть на список постов, а если это была страница участника — попасть на страницу поиска участников и т.д. Основная миссия ЧПУ — в том, чтобы можно было понять, куда попадёшь, если изменишь адрес определённым образом. К сожалению, у Хабра такого ЧПУ нет, но с другой стороны — не очень-то и нужен.
    • 0
      Никогда не понимаю, почему многие называют миссию по достижению удобства веб-адресов термином ЧПУ. Ведь основные принципы ЧПУ — это только малая часть тех правил, которых стоит придерживаться при разработке удобных интернет ресурсов. Плюс ко всему, принципы ЧПУ не всегда и не везде применимы и уместны, а вот над удобством адресов всегда можно подумать в контексте задачи. Я предпочитаю называть это прямым и понятным термином «Юзабилити URL» (Usability URL). А то, что вы перечислили — это всего лишь небольшая часть того, чем нужно оперировать при достижении юзабилити URL. Я чуть выше кинул ссылку на свою старую статью по данной теме.
  • 0
    Довольно неплохой чек-лист, хотя конечно не универсальный и местами несколько спорный ИМХО…

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