«Глупая последовательность», по словам Ральфа Уолдо Эмерсона, «является ошибкой маленьких умов».
Многие разработчики искренне согласились бы с этим мнением, особенно если бы им навязали «последовательность» излишне усердных юзабилити.
Пользователям нужна согласованность
Существует мало сомнений в том, что последовательность важна для пользователей. Согласованность облегчает использование сайтов, поскольку посетителям не нужно изучать новые приемы при перемещении.
Сайты должны быть внутренне согласованными: стандарты и соглашения должны устанавливаться и применяться ко всему контенту. Например, у пользователя, который встречает «Поиск» в правом верхнем углу на одной странице, будут проблемы, если он будет произвольно перемещен в другие места на других страницах сайта.
Сайты также должны быть внешне согласованными, то есть в соответствии с общей практикой. Пользователи будут склонны применять правила, которые они изучили в другом месте, даже если эти правила на самом деле не применяются к текущему сайту. Они приносят на ваш сайт свой опыт и ожидания. Если вы игнорируете это, вы рискуете вызвать замешательство и отчуждение.
Последовательность имеет смысл
Последовательность имеет деловой смысл. Это позволяет разрабатывать небольшой набор шаблонов для страниц и других элементов дизайна и применять их по всему сайту. Это облегчает написание, публикацию и обслуживание, а также поддерживает реализацию XML, CSS и других технологий, основанных на структурированном контенте.
Хотя некоторые разработчики считают согласованность смирительной рубашкой, она также имеет много преимуществ. Это избавляет от необходимости принимать одно и то же решение снова и снова (будут ли наши метки полей выровнены по левому или правому краю?) И позволяет использовать шаблоны и предварительно определенные фрагменты кода.
Аспекты согласованности
Согласованность применяется ко многим элементам на веб-сайте. Давайте рассмотрим некоторые из них, поймем, почему они имеют значение, и узнаем, как мы можем быть последовательными в их применении.
язык
Является ли «двойной верхний кулачок» таким же, как «двойной верхний распредвал»? Мой механик знает, а я нет. Использование нескольких терминов для одной и той же вещи является серьезной причиной путаницы. Вы можете минимизировать эту путаницу, используя только утвержденные условия.
Например, если вы продаете телефоны, вы можете выбрать «мобильный телефон» и использовать его вместо синонимов, таких как «мобильный телефон», «мобильный» или «телефон». Конечно, пользователи по-прежнему должны иметь возможность выполнять поиск по любому из этих терминов — и, в идеале, даже по орфографическим ошибкам. Например, индекс продукта для телекоммуникационной компании должен содержать список «мобильные телефоны», «телефоны» и «мобильные телефоны».
Вы также должны иметь последовательный «голос». Не переключайтесь с теплых и дружелюбных на одной странице на законных и угрожающих на другой. Если вы называете пользователя «вы» в одном разделе сайта, избегайте использования таких терминов, как «Мой адрес электронной почты» в другом.
Быть последовательным в вашем использовании языка очень сложно без редакторского обзора вашего контента. Как минимум, определите одного человека, который отвечает за проверку всего содержимого вашего сайта перед публикацией.
Согласованный язык сделает ваш сайт более простым и авторитетным.
Элементы пользовательского интерфейса
Часто существует тенденция делать умные вещи с элементами пользовательского интерфейса — часто с лучшими намерениями — которые вызывают проблемы. Например, некоторые сайты выполняют действие, когда пользователь выбирает кнопку выбора (или переключатель). Такое поведение может быть очень запутанным, если оно неожиданно. Сохранение одного клика за счет последовательного поведения, вероятно, не очень хорошая стратегия.
Самое основное требование для согласованности в элементах пользовательского интерфейса — это применять их так, как они изначально определены. Например:
- Опциональные кнопки (переключатели) только для взаимоисключающих элементов, поэтому пользователь может выбрать только один вариант
- Установите флажки, если пользователь может выбрать один или несколько параметров
Избегайте применения ненужной графической обработки, которая может сбить пользователя с толку, делая его пользователем того типа элемента пользовательского интерфейса, который они используют. Кнопки выбора должны быть круглыми, флажки квадратными. Редактируемые поля должны иметь белый фон; не редактируемые поля должны быть серыми.
В качестве примера рассмотрим страницу «расширенного поиска» Google , которая содержит текстовые поля, кнопки, раскрывающиеся списки, кнопки выбора, ссылки и различные другие элементы, которые все четко различимы в том, что они собой представляют.
Сравните это с Flash-версией веб-сайта Mont Blanc , где новый пользовательский интерфейс, хотя и визуально привлекательный, стильный и фирменный, сравнительно сложен в использовании и навигации.
раскладка
Если бы ваш веб-сайт был первым в мире, вы могли бы быть абсолютно свободны в том, как вы разместили свои страницы. Вы можете решить, что основная навигация должна быть в правой части экрана, вторичная навигация в нижней части и контент в верхнем левом углу.
Однако существующая общая практика ограничивает то, что вы можете сделать. Конечно, вы все равно можете выбрать необычный макет, но при этом вы рискуете запутать своих пользователей, чей общий опыт работы в Интернете заставляет их ожидать определенных соглашений.
Например, логотип компании должен появиться в левом верхнем углу страницы. HSBC , Wired и No Logo — это очень разные организации с очень разными веб-сайтами, но каждая из них размещает логотип (со связанной ссылкой на главную страницу) в левом верхнем углу. Некоторые другие устоявшиеся соглашения:
- Навигация сверху или слева (или оба)
- Панировочные сухари (если используются) под основной навигацией
- Контент в центре страницы
- Связанные материалы и рекламные акции справа
- Поиск в правом верхнем углу (хотя есть много исключений из этого)
Выбирая варианты макета для своего сайта, проведите час, путешествуя по подобным сайтам, и почувствуйте общую практику. Отойдите от этой общей практики, только если у вас есть веские причины для этого.
У людей есть сильная память для определения местоположения, и ваши дизайны могут использовать эту характеристику, резервируя определенные местоположения для элементов экрана (навигация, поиск, вход в систему, контент) и применяя их последовательно. В юзабилити-тестах мы видели, как пользователи полностью теряют навигационные элементы, которые кажутся одинаковыми, но фактически изменились — пользователи просто не регистрируют изменения и не могут найти контент или функции, которые им нужны.
функции
Другой аспект согласованности касается функций, которые поддерживает ваш веб-сайт. Например, веб-сайт общественного транспорта может предлагать расписание, информацию о тарифах и планировщик поездки. Краткий обзор таких сайтов — например , BVG в Берлине , Metlink в Мельбурне и Bart в Сан-Франциско — покажет, что планировщик поездки или ссылка на него могут появиться на главной странице.
Аналогичным образом, можно ожидать, что веб-сайт кинотеатра будет предлагать систему бронирования билетов. Если ваш сайт не может предоставить такую ожидаемую функциональность (например, по бюджетным причинам), вам следует как минимум предоставить информацию об эквивалентных функциях (например, номер телефона для бронирования).
Визуальная обработка
Визуальная обработка часто является областью, в которой разработчики будут иметь большую свободу передвижения. Однако, как только вы выбрали визуальный язык, важно придерживаться его. Когда пользователь перемещается по вашему сайту, визуальная обработка дает уверенность в том, что он все еще находится на том же месте, и создает общее впечатление профессионализма и надежности.
Визуальная обработка применяется не только к очевидным элементам, таким как логотипы и навигация, но также к элементам контента, шрифтам и фонам. Использование CSS может помочь обеспечить согласованность этих элементов.
Пример последовательной визуальной обработки и макета см. На веб-сайте Red Hat . Относительно небольшое количество четко обозначенных элементов обеспечивает согласованное представление контента на всем сайте. Первичная навигация становится очевидной (и усиливает брендинг). Вторичная и вспомогательная навигация сразу идентифицируются. Столбцы применяются последовательно и рационально (один столбец для плотного копирования; макет с двумя или тремя столбцами для страниц обзора с несколькими ссылками). Все таблицы используют одинаковое расположение, цвета и шрифты.
Последовательность может быть вашим другом
Последовательность может быть чем-то, что вы можете использовать в своих интересах, а не смирительной рубашкой, которая излишне стесняет вас. Это может помочь минимизировать ваши затраты на разработку и обслуживание, избавить вас от необходимости беспокоиться об относительно тривиальных проблемах проектирования и обеспечить расширенный пользовательский интерфейс для ваших клиентов.