Правила хорошего веб-дизайна

  1. На каждой странице в левом углу распологается лого или название фирмы, которое является ссылкой на первую страницу (за исключением первой страницы, где лого не является ссылкой). Нельзя делать ссылку на ту же самую страницу.
  2. Создан поиск на сайте, если он содержит много страниц.
  3. На страницах короткие и конкретные заголовки. Заголовки должны четко передавать содержание страницы.
  4. Страница должна быть структурирована так, чтобы было возможно глазами «просканировать», тоесть не нужно перерабатывать огромное количество информации, чтобы найти нужную. Используются группировка и подзаголовки, чтобы разделить тексты на более мелкие легко прорабатываемые отрывки.
  5. Простая навигация. Текст помещен на разные страницы, на основной странице минимум текста и ссылки на остальную информацию, а так же обзор того, что и в каком порядке стоит «прощелкать», чтобы добраться до нужной информации.
  6. Используются фотографии продукта, но не очень большие, замедляющие загрузку страницы. Для этого используются маленькие картиночки-ссылки далее на большие фотографии. Некоторые фотографии при необходимости с более сложным решением: увеличением и поворотом. Титульная страница ограничена обзорными и маленькими картинками.
  7. При создании маленьких картинок не используется просто уменьшение, тоесть при изменении картинки она не превращается в пиксельный мусор, непригодный для использования. Вместо этого из первоначальной картинки вырезана наиболее важная деталь и уменьшена.
  8. При использовании ссылок, ссылки делаются в виде заголовков, чтобы пользователь понимал, куда попадет, щелкнув на данной ссылки.
  9. Каждая страница доступна людям с особыми потребностями. Особенно слепым (озвучка).
  10. При создании страниц допустимо использовать проверенные другими элементы анимации, можно использовать схожие методы. Страницы «действуют» схоже, так как пользователи ожидают того, что они умеют использовать (например банковские странички).

10 наиболее распространенных ошибок

веб-дизайна

  1. Плохой поиск – поиск слово в слово уменьшает дружелюбность, так как они не способны учитывать ошибки ввода и падежи. Такие системы поиска очень сложны для пожилых и детей. Так же создает проблемы поисковая система, которая показывает результат поиска по количеству присутствия, а не по важности. Если навигация не работает, пользователь обращается к поиску. Если и поиск не помогает, пользователь просто покидает страницу и не возвращается на нее.
  2. Чтение PDF-файлов в браузере -  пользователь ненавидять чтение PDF-файлов в браузере. PDF-файл предусмотрен для распечатывания, а не для просмотра на экране: маленькие шрифты, отсутствие навигации, бесконечная прокрутка это только малая часть того, что раздражает пользователя и ломает его хорошее отношение к сайту.
  3. Оставленный без изменения цвет ссылки, уже посещенной. Хорошая, проработанная навигация дает обзор, где пользователь в данный момент находится, это кульминация его пути. Обзор проработанных ссылок помогает сделать выбор пользователю, куда идти дальше. Если пользователь знает, какие страницы он уже посетил, он не будет тратить время на повторное их посещение.
  4. Текст, который нельзя «проскользнуть». Текстовый мусор убийственен для интерактивного пользования. Он пугает, скучен и его больно читать. Чтобы текст был легко читаем и «сканируем» глазами, можно использовать следующие уловки:
  1. Подзаголовки
  2. Списки
  3. Выделенные заметки
  4. Короткие отрывки
  5. Перевернутые пирамиды (наиважнейшая информация в начале страницы)
  6. Легкий стиль
  7. Текст очищенный от рекламы и рыночного языка
  1. Фиксированный размер шрифта. Следует учитывать увеличение и уменьшение шрифта на странице при создании сайта. Что для простоты создания описывается в CSS файлах.
  2. Заголовки, плохо видемые для поисковых систем. Поиск наиважнейший способ для пользователя найти необходиму страницу. В целом для пользователя важно, чтобы заголовки давали представление о содержании страницы. Важно, чтобы новый пользователь нашел по заголовкам в поисковой системе нужную информацию. Поисковые системы показывают обычно 66 символов от заголовка страницы.
  3. Схожесть с рекламными банерами. Селектируемое внимание у пользователя в последнее время стало более развитым. Пользователи научились незамечать рекламу на сайтах, если она не отвечает их нуждам. В следствии чего отсеиваются и элементы сайта, которые могут быть схожеми с рекламными банерами. Некоторые примеры отсеивания рекламы:
  1. Банерная «слепота» – остается вне зоны внимания все, что по форме схоже с банером.
  2. Анимационная «слепота» - пользователь отстраняется от всего, что излишне мигает и двигается.
  3. Выключение всплывающих элементов (pop-up) – их как правило закрывают при помощи программ раньше, чем они успевают вообще появиться.
  1. Нарушение конвенций о дизайне. Постоянство и гармония одни из наиважнейших основ используемости сайта: если все идет так как всегда, то пользователь не должен беспокоиться, а что может произойти дальше; они знают, что их ждет дальше. Если пользователь чувствует себя уверенным, он не захочет уйти со страницы. Чем больше выполняются ожидания пользователя, тем больше ему нравится сайт, он чувствует себя в безопасности и не возникает страха, что можно сделать что-то неправильно.
  2. Открытие нового окна браузера. Пользователей раздражает черезмерное открытие новых окон браузеров при нажатии на новую ссылку. Это схоже с продавцом стирального порошка, который прежде чем предложить новый товар испачкал вам рубашку.
  3. Оставление вопросов пользователя без ответа. Пользователь очень сосредоточены на своей цели. Они посещают страницу, чтобы найти там что-то необходимое, например, купить какой-то продукт. Самые большие провалы давать пользователю только самую элементарную информацию. Очень часто оставляют детали неуказанными, бояст не соответствовать ожиданиям пользователя. С другой стороны продукт или услуга пестрят рекламным языком. Самая большая ошибка – не указать цену, если имеешь дело с продажей товара.

Jakob Nielsen (перевод Татьяны Тамбовцевой)

Veebirakenduste disain Microsoft Silverlight tehnoloogia alusel. Microsoft Veebistuudium 2010.