Советы по юзабилити дизайна
Категория 1. Управляйте вниманием пользователя
Выделите точку входа в интерфейс
В каждом интерфейсе должна быть чёткая отправная точка. Куда зрители должны посмотреть вначале? Сделайте это очевидным.
Создайте визуальный контраст для заголовков страниц
Создайте визуальный контраст для заголовков страниц
Не стоит комбинировать разные способы выделения для одного заголовка (например, большой, жирный ярко-красный заголовок будет в большинстве случаев избыточным). Принимая решение о визуальном выделении, примите в расчёт то, как оно может выглядеть в адаптивных версиях.
Направляйте пользователей с помощью визуальной иерархии
Избегайте пустых пространств, «запертых» внутри композиции
Эти несколько советов построены на принципе F-паттерна считывания контента. То есть, пользователи читают сверху-вниз слева-направо и дизайнеру следует избегать неожиданных «прыжков» и «развилок» в восприятии. Всё верно, но не стоит забывать, что некоторые языки читаются справа-налево. Это раз.
А два — интерфейсы, с которыми пользователи работают ежедневно, не обязательно должны быть легко воспринимаемыми. Они должны быть удобными для выполнения задач пользователя. Например, профессиональные веб-интерфейсы могут обладать высоким порогом входа для новых пользователей, но после его преодоления работа будет значительно эффективнее, что окупит время на обучение.
Компонуйте элементы в одну колонку
Перекройте один элемент другим, чтобы подчеркнуть целостность
Проектируйте интерфейс с учётом гештальт-принципов
Мы буквально завалены раздражителями в интерфейсах. Согласно гештальт-психологии, мы постоянно стараемся преодолеть этот хаос, упрощая наше восприятие. Мы группируем объекты, разбиваем элементы на категории, пытаемся увидеть картину целиком.
Некоторые из принципов: сходство, близость, замыкание, связь, непрерывность и фигура и фон.
Принципы гештальта
Расположите близкие по смыслу функции или пункты меню ближе друг к другу
Переместите заголовки ближе к релевантному тексту
Поместите заголовок в один блок с озаглавленным текстом
Артемий Лебедев в 2006 году написал параграф Ководства «Теория близости». В проектировании это до сих пор одно из популярнейших правил по частоте использования. На второе место я бы поставил цветовое кодирование. Затем всё остальное.
Демонстрируйте изменения интерфейса, не вводя пользователя в замешательство
Иногда интерфейс видоизменяется прямо на глазах у пользователя. Сделайте эти изменения заметными, но не вводящими в замешательство
Добавьте анимацию изменений в интерфейсе
Выделите элементы, из-за которых возникла ошибка
Хороший интерфейс всегда информирует пользователя о том, что происходит. Отправляются данные — нам об этом говорит анимированная иконка, товар добавился в корзину — значок корзины видоизменился заметным образом (изменились цвет и состав), удалили пункт в списке — остальные элементы поползли вверх, нажали на якорную ссылку — страница плавно и быстро скроллится к нужному месту, а не мгновенно переносится в нужные координаты. И так далее и тому подобное.
Оба совета из статьи охватывают все вышеперечисленные вещи, поэтому тут без критики, я с этим пунктом согласен.
Уберите или снимите акцент с ненужной информации
Наша способность фокусироваться не безгранична. Ненужные элементы будут истощать этот ресурс. Поэтому удерживайте внимание пользователей на важных сведениях и функциях.
Затемните фон за поп-апом или модальным окном
На всех изображениях откажитесь от излишних украшений
Уберите ненужные рамки вокруг элементов
Удалите излишние или очевидные инструкции
Не могу промолчать, глядя на картинку выше. С одной стороны совет хороший, а с другой очевидность или неочевидность тех или иных инструкций — дело субъективное. И иногда лучше расстроить кого-то излишними инструкциями, чем не дать их тому, кто без них не справится с задачей, поставленной перед интерфейсом. Все точки над i расставят тесты.
Спрячьте важные, но редко используемые настройки, возможности и сведения
Покажите, что содержимое есть за границей видимой области
Большинство современных браузеров прячут полосы прокрутки, когда вы их не используете. Оставьте пользователям подсказки, что за границей видимой области тоже есть содержимое.
Пусть элементы обрезаются границей видимой области
Добавьте тень, чтобы показать глубину
С помощью слов или графики покажите, что ниже есть дополнительное содержимое
Категория 2. Ведите пользователей к цели
Делайте часто используемые функции и важную информацию доступнее пользователям
Предугадывайте стремления пользователей. После этого располагайте объекты этих стремлений в максимальной доступности.
Предлагайте быстрые варианты для поиска с первых введённых символов
Создавайте значения по умолчанию в соответствии с самыми частыми запросами
Показывайте полезную информацию при наведении курсором на объекты
Ага, только дополнительно подумайте над тем, как это будет работать на устройствах с тач-скрином!
Не прячьте часто используемые функции
Показывайте на дашбордах важную информацию
Помещайте популярные варианты в самый верх выпадающих списков
Сообщайте о статусах процессов
Снижайте уровень неопределённости, демонстрируя пользователю релевантную информацию о состоянии системы.
Демонстрируйте состояние прогресса и оставшееся время до завершения машинных процессов
Демонстрируйте текущее состояние сложных или растянутых во времени процессов
В рамках последовательности экранов указывайте общее количество шагов
Показывайте количество элементов в категориях
А это, друзья, редкий пример таких советов, которые будут действовать, даже если вырвать их из контекста.
Предлагайте несколько путей достижения одной и той же цели
Разные пользователи отдают предпочтение разным сценариям работы с системой. Создавайте разные пути для достижения одних и тех же целей и позволяйте пользователям самостоятельно выбирать те варианты, которые лучше подходят для их привычных сценариев работы
Позвольте авторизоваться как с помощью имени пользователя, так и с помощью адреса электронной почты
Предложите выполнять повторяющиеся функции с помощью клавиатуры
Позвольте перетаскивать элементы курсором
Позвольте редактировать данные напрямую
Предлагать пользователям альтернативные пути решения задач я бы не стал. На самом деле можно дать комментарий по каждому из советов. Авторизация с использованием разных логинов — сложное и важное решение. Оно будет зависеть от системы управления сайтом, требований к безопасности, бизнес-требований к системе, а не от прихоти дизайнера.
Сопровождение повторяющихся функций клавиатурными шорткатами подходит в основном для настольных интерфейсов, а захламлять ими интерфейсы, которыми пользуются с планшетов, не стоит. Перетаскивание элементов курсором иногда может привести к нежелательным последствиям. Например, когда вы хотели выделить текст в элементе, а вместо этого утащили его.
Поэтому, здесь тоже нужно принимать взвешенное решение и учесть много факторов. То же касается и редактирования данных напрямую. То есть, все эти советы по-своему хороши, но в отрыве от контекста могут здорово навредить.
Сообщайте о требованиях и параметрах интерактивных элементов
Подготовьте пользователей к каждому взаимодействию с интерфейсом. Что им понадобится? Как им перейти к следующему шагу?
Опишите требования к данным, которые вводят пользователи
Давайте обратную связь и требования к паролю в режиме реального времени
Сопровождайте элементы форм универсальными обозначениями
Показывайте, какие поля форм обязательны к заполнению
Подсказывайте, что произойдёт в результате взаимодействия с интерфейсом
Прежде чем пользователь совершит какое-то действие в интерфейсе, он должен понимать, что получит в результате этого действия
Пишите на кнопках, что конкретно произойдёт после нажатия
Показывайте, как будет выглядеть результат уже на этапе ввода данных
Показывайте, что будет следующим в списке
Используйте «умные» пункты меню, дающие детальную информацию о результатах их использования
Эти советы хороши с точки зрения маркетинга. Они помогают ответить на вопрос «что произойдёт, когда я нажму на эту кнопку?» Это снижает уровень неуверенности перед совершением тех или иных действий и повышает конверсии на посадочных страницах.
Награждайте и создавайте чувство уверенности у пользователей, идущих к цели сквозь ваши интерфейсы
Приближаются ли пользователи к цели? Увенчалось ли успехом их предыдущее действие? Сообщите им об этом. И приободрите продолжить путь.
Соблюдайте соответствие между ссылками и страницами, на которые они ведут
Награждайте маленькими победами в начале пути
Полосы прогресса начинайте со значений выше 0%
А также не заканчивайте полосы прогресса значениями 100%, т.к. в этот момент пользователь может решить, что задача выполнена, и как-нибудь нарушить сценарий. Лучше подзадержаться на 99%, а затем сразу показать сообщение о том, что всё готово.
Закрывайте главные потребности пользователей
Зачастую интерфейсы решают лишь потребности, лежащие на поверхности. Смотрите шире. Всегда задумывайтесь над тем, зачем именно пользователям нужны те или иные функции или информация. Затем предложите решение, которое нужно им на самом деле.
Указывайте, открыт или закрыт ваш офис прямо сейчас
Указывайте актуальность ближайших событий относительно сегодняшнего дня
Второй совет во многих случаях работать не будет, будьте осторожны. Иногда нам не важно, сколько дней, часов или минут назад произошло то или иное событие, а важно, когда и во сколько.
Категория 3: уменьшите умственные усилия ваших пользователей и поддерживайте скорость их движения сквозь интерфейсы
Избавьте пользователей от подсчётов в уме
Никогда не заставляйте пользователей заниматься математикой в ваших интерфейсах. Пускай за них это делает компьютер.
Показывайте оставшееся количество всяких штук
Только в тех местах, где эта информация действительно нужна. О, кстати! По легенде мобильные операторы не показывают остаток на счету постоянно на экране телефона, потому что это будет склонять пользователей распоряжаться средствами более экономно.
Сообщайте о текущем положении пользователя в интерфейсе
Интерфейсы чем-то похожи на аэропорты. Без указателя «вы находитесь здесь» пользователи могут заблудиться. Поэтому создавайте такие указатели.
Выделяйте текущий раздел в меню навигации
Я на практике чаще всего использую выделение цветом. Причём, текущий пункт выделяется менее ярким цветом, чем все остальные (название страницы и так продублировано заголовком, а пользователь, обращаясь к меню навигации, в большем числе сценариев захочет не убедиться, где он находится в структуре сайта, а перейти в соседние разделы).
Подчёркивание в веб-интерфейсах всё же ассоциируется со ссылкой, поэтому, если один пункт подчёркнут, то и остальные тоже (но бывают исключения), жирность изменяет ширину блока, в котором находится текст, поэтому во многих случаях может вызвать внезапные сдвиги и переносы слов.
Поэтому я бы рекомендовал использовать цвет, указатель и фон именно в такой приоритетной последовательности.
В сложных интерфейсах используйте «хлебные крошки» и пошаговые карты
Размещайте полезную информацию в начале заголовков страниц
Упрощайте задачи, связанные с выбором
Выбор требует от пользователя определённых усилий. Уменьшите эти усилия, упростив выбор.
Выделяйте опции, которые выберут большинство пользователей
В поле поиска сразу предлагайте самые распространённые запросы по мере ввода
Не создавайте гигантских категорий в меню навигации
В целом всё так, но давайте рассмотрим подробнее первый и третий пример.
В первом примере возможны варианты, когда выделяют не самый часто выбираемый товар, а тот, который стоит продвигать. Здесь бизнес-составляющая вступает в борьбу с пользовательской.
А в третьем примере бывают десятки случаев, когда имеет смысл в категории показать большое количество информации и таким образом сделать её гигантской. Например, в интерфейсах, где не требуется низкий порог входа, такое решение будет уместным
Используйте общепринятые интерфейсы в веб-дизайне
Креативность — это здорово. Но не убегайте далеко от общепринятых вещей в дизайне. Пользователи уже привыкли к определённым структурам и шаблонам. И они популярны именно потому что хорошо работают.
Используйте общепринятые меню навигации
Помещайте вспомогательные элементы в правый верхний угол
Оба совета без конкретных примеров проектов кажутся не очень полезными. Глядя на второй совет, задаёмся вопросом, а что нам делать, если на нашем проекте присутствуют все перечисленные вещи? Помещать их в правый верхний угол?
Нет. Механизмы расстановки элементов по странице гораздо глубже и сложнее, чем может показаться на первый взгляд. Поэтому подчеркну лишь часть совета, написанного выше: не занимайтесь креативом, не понимая принципов, по которым создавались общепринятые паттерны в дизайне. Если же вы их понимаете, то кто же, кроме вас, придумает ещё более эффективные паттерны, чем те, которые уже существуют? ;)
Предоставляйте обратную связь после каждого взаимодействия
Когда пользователи взаимодействуют с вашим интерфейсом, они должны получать обратную связь в режиме реального времени. Завершилась ли операция успехом? Или наоборот? Что изменилось?
Показывайте сообщения об успешном завершении важных взаимодействий
Выделяйте объекты, на которые пользователь навёл курсор
Очень дельный совет. Во время проектирования начинающие специалисты часто упускают эти моменты. Я называю многие завершённые сценарии «тупиковыми» страницами и прорабатываю их отдельно. Что видит пользователь после того, как он успешно выполнил свою задачу на сайте? Куда ему идти дальше? Какую информацию он хотел бы получить прямо сейчас?
Уменьшайте негативные эффекты во время ожидания
Избавляйтесь от всех ненужных периодов ожидания. Но если всё же пользователи вынуждены ожидать, минимизируйте негативный эффект от этого процесса.
Используйте спокойные цвета в загрузочных анимациях, чтобы уменьшить раздражение
Синий цвет снижает раздражение (и повышает расслабленность). Когда пользователи смотрят на синие индикаторы загрузки, время для них летит быстрее
Поддерживайте вовлечённость пользователей во время длинных периодов ожидания
Заранее предотвращайте загрузку файлов, не подходящих по типу или размеру
Показывайте серию возникающих задач целиком
Замечательные советы! Сразу вспоминается интерфейс Youtube, который во время загрузки видеоролика на сервис позволяет заполнить все поля, необходимые для публикации, а после загрузки и вовсе уйти с этой страницы. Уведомление о завершении обработки ролика мы получим на адрес электронной почты.
Не рассчитывайте на память пользователей
Не заставляйте пользователей хранить всё в памяти. Держите всю уместную информацию у них перед глазами.
Подписи к полям форм всегда должны быть видимы
Размещайте тексты плейсхолдеров вне элементов форм
Добавляйте кнопки «Копировать» рядом с данными, которые нужно переносить в другие поля
На самом деле в формах из двух-трёх суперочевидных полей можно пренебречь правилами и про подписи, и про плейсхолдеры.
Что касается кнопки «Копировать», то на практике чаще применяется приём автоматического копирования в буфер обмена при клике по полю с нужными данными. При этом пользователь видит сообщение на заметном месте вроде: «Ваши данные скопированы в буфер обмена». Но лично мне больше нравится именно решение с кнопкой как более предсказуемое и очевидное.
Избегайте зигзагообразных паттернов движения глаз
Уменьшите количество движения глаз «туда-обратно» ваших пользователей. Держите всю добавочную информацию поближе к основной.
Группируйте схожую информацию, чтобы помочь пользователям сравнивать объекты
Выравнивайте подписи к полям в формах по правому краю
Cовет-то полезный, да только приведённые примеры не имеют ничего общего с реальностью. Что в списке товаров, что в формах, решение о том, как они будут выглядеть, принимается на основе гораздо большего количества параметров, чем «зигзагообразное» движение глаз.
Наглядно показывайте, с какими элементами интерфейса можно взаимодействовать
Пользователи должны определять, какие элементы интерактивны (и как с ними взаимодействовать). Если вы знакомы с UX/UI, то вы, вероятно, знаете такие понятия, как аффордансы и сигнифаеры, популяризованные Доном Норманом в его «Дизайне привычных вещей».
Создавайте кнопки с использованием трёхмерных характеристик
Добавляйте текстуры в виде точек для элементов, которые можно перетаскивать
Используйте иконки и символы, чтобы передать значение взаимодействий
Согласен. Любые интерактивные элементы должны сразу восприниматься, как интерактивные. Ссылки, кнопки, динамические объекты. Распространённая ошибка у начинающих дизайнеров: оформить некоторые элементы так, что единственным индикатором их потенциальной интерактивности будет курсор, превращающийся в палец при наведении.
Общайтесь с пользователями с помощью знакомых всем слов и символов
В большинстве случаев ясность послания выигрывает у креатива и жаргонизмов
Разговаривайте на языке пользователя, а не системы
Надпись на левой части картинки: «Системная ошибка! Бла-бла-бла на компьютерном жаргоне»
Надпись на правой части картинки: «Упс, что-то пошло не так! Но вы можете исправить это с помощью…»
Предлагайте кнопку перевода для иностранных языков
Используйте цвета, подходящие по смыслу
В непрофессиональных интерфейсах действительно нужно говорить на языке пользователя. А красные кнопки вряд ли будут ассоциироваться с безопасным действием.
Однако, из трёх советов в качестве универсального я бы оставил только первый. Встроенный перевод — это дополнительное функциональное требование к системе, а цвета элементов — вопрос субъективный, требующий тестирования в разных конкретных случаях.
Увеличьте считываемость вашего интерфейса
Большинство пользователей будут продвигаться по интерфейсу, бегло его просматривая. Не стоит с этим бороться. Наоборот, воспользуйтесь этим. Сделайте ваш интерфейс более удобным для беглого просмотра.
Сокращайте объём параграфов и выделяйте основные мысли
Размещайте важную информацию в начале списковых элементов
Добавляйте чередующиеся горизонтальные полосы в таблицы
Пишите подзаголовки, раскрывающие суть абзацев
Разбивайте текст визуальным разнообразием
Так и хочется на этот набор советов ответить фразой «Спасибо, Кэп!» А значит это отличные советы для начинающих!
Делайте текст максимально читабельным
Очевидно, что текст обязан быть легко читаемым. Однако, вот несколько дополнительных советов, которые позволят сделать его считываемость ещё более высокой!
Создавайте сильный контраст между текстом и фоном
Выравнивайте большинство текстов по левому краю
Оба совета универсальны. Несмотря на их очевидность, до сих пор можно часто встретить посадочные страницы с красивыми картинками, на которых невозможно считать текстовое торговое предложение.
Выравнивание текста по левому краю также рекомендуется в большинстве случаев. Исключения можно перечислить по пальцам и все они связаны с одноколоночными узкими интерфейсами (в основном это мобильные приложения и посадочные страницы).
Используйте единый стиль в интерфейсах
Если в ваших интерфейсах одни и те же элементы будут выполнены в разных стилях, пользователям потребуется больше времени на их изучение. Упростите для них эту работу, используя единый стиль и лейаут.
Подготовьте руководство по стилю интерфейса
Нужно вдохновение? Попробуйте взглянуть на руководство по стилю Мэйлчимпа
Располагайте меню навигации в одних и тех же местах
Создавайте красивые, визуально сбалансированные интерфейсы
Интерфейсы более удобны, когда они приносят эстетическое удовольствие пользователю. Этот принцип называется эффектом эстетического юзабилити Куросу и Кашимура, 1995.
Создавайте интерфейсы, используя математические законы
Используйте контрастирующие шрифты
Эстетичность дизайна — понятие субъективное и требует проверки разных вариантов на разных аудиториях. На этапе проектирования такая проверка зачастую невозможна, поэтому не стоит придавать этому большое значение. Однако, также замечу, что, чем опытнее проектировщик, тем более эстетичными кажутся его прототипы окружающим, а это является дополнительным аргументом в пользу работы с конкретным исполнителем.
Категория 4: максимизируйте совместимость для всех пользователей и сценариев
Максимизируйте совместимость с учётом уровней знаний и навыков пользователей
Ваши пользователи будут представлять новичков, опытных пользователей или нечто среднее. Проектируйте интерфейсы с учётом этих уровней.
Используйте вводные интерфейсы в нужном количестве
Существует четыре основных стратегии по созданию вводных интерфейсов:
Они могут быть легко размещены в матрице 2х2. Используйте диаграмму ниже для выбора стратегии по созданию вводных интерфейсов, подходящей именно для вашего интерфейса.
Добавляйте всплывающие подсказки, чтобы помочь новичкам, при этом не отвлекая опытных пользователей
Используйте методы карточной сортировки при создании информационной архитектуры
Вот и подобрались мы к советам, важность которых сложно переоценить, хотя выглядят они довольно капитанскими. Один из сложных навыков проектировщика: в процессе работы удержать в голове множество параллельных сценариев от лица разных типов пользователей, которые происходят в одних и тех же интерфейсах.
Стоит забыть о ком-то из них — и получится урезанный вариант. Или, наоборот, стоит увлечься теми пользователями, которые представлены очень малочисленной группой от всей аудитории, — и получится интерфейс, неудобный для большинства.
Если вы не знаете про методы карточной сортировки, — рекомендую поискать информацию в интернете и изучить её. Это распространённая вспомогательная методология для формирования навигационных решений и рубрикаторов.
Максимизируйте совместимость с процессами работы, привычными пользователям
У пользователей будут свои разные потребности. Проектируйте интерфейсы таким образом, чтобы они отвечали разным пользовательским подходам к работе.
Позвольте пользователям выбирать способ отображения данных
Дайте пользователям выбирать способы сортировки данных
Дайте пользователям управлять количеством отображаемых данных
Используйте метод персонажей для описания процессов работы с интерфейсом от лица разных пользователей
Решение о том, стоит ли давать пользователям свободу выбора, принимается на основе большого количества факторов. И нужно понимать, что представленные советы работают только в том случае, если это решение было принято в пользу свободы.
Что касается сортировок и фильтраций, рекомендую ознакомиться с моим «старым, но полезным» видеоуроком по проектированию универсальных каталогов.
Максимизируйте доступность вашего интерфейса
Сделайте ваш интерфейс доступным для пользователей с ограниченными возможностями. Это не только хорошая практика, но и в некоторых странах повод для получения дополнительных привилегий.
Одновременно используйте разные индикаторы для выделения информации
Около 8% мужчин плохо различают цвета. Старайтесь никогда не выделять элементы только с помощью цвета. Используйте дополнительные подсказки в виде разных форм объектов и иконок.
Семантическая разметка подойдёт не только для людей с ограниченными возможностями. Если она используется, ваши сайты можно будет просматривать в режиме удобного чтения статей, либо перемещаться от блока к блоку с помощью голосового управления (не только, если пользователь слеп, но и, например, если он управляет автомобилем).
Второй совет будет сильно зависеть от контекста, но в большинстве случаев его действительно стоит применять. А вот ссылка на материал про 8% мужчин.
Максимизируйте доступность для полей ввода данных и для крайних сценариев
Пользователи должны иметь возможность вводить разнообразные данные без негативных последствий.
Избавьтесь от неожиданно неприятных посланий в автоматически сгенерированных сообщениях
Надпись на левой картинке: «Желаем повеселиться в Освенциме!». Надпись на правой картинке: «Хорошей поездки!».
Используйте элементы форм, которые «съедают» разные форматы данных
Показывайте результаты, которые решают задачи ищущего
Используйте поисковые поля, которые справляются с опечатками, синонимами и вариациями написания
В рамках реализации этих советов основная нагрузка ляжет на специалистов, работающих с кодом. Дизайнеры и проектировщики обычно не хотят заниматься описанием свойств таких полей в функциональных спецификациях.
Использование этих советов может оказаться одной из ступенек для перехода проектировщиков на новый качественный уровень работы.
Максимизируйте доступность для всех контекстов
Ваш интерфейс должен работать во всех контекстах использования (на разных устройствах, браузерах и т.д.)
Создавайте инструкции для разных браузеров
Надпись справа: «Вижу, вы используете Firefox».
На маленьких устройствах используйте выпадающие списки, занимающие весь экран
Давайте согласимся с советами, но с одной оговоркой. «Ваш интерфейс должен работать в тех контекстах использования, которые удовлетворяют целевой аудитории вашего проекта». Нецелесообразно тратить на оптимизацию проектов значительные ресурсы только для того, чтобы угодить доле процента ваших пользователей.
Категория 5. Помогайте пользователям сталкиваться с меньшим количеством потенциальных ошибок и преодолевать их
В большинстве интерфейсов совсем избежать ошибок невозможно. И если они возникают, помогите вашим пользователям преодолеть их быстро и с лёгкостью.
Предотвратите возможность возникновения ошибок
При создании интерфейса не стоит сразу сосредотачиваться на решениях для демонстрации возникающих ошибок. Вместо этого попробуйте спроектировать его так, чтобы этим ошибкам невозможно было появиться.
Отключайте кнопки сразу после того, как по ним кликнули
Не просите пользователей кликнуть по кнопке «Подтвердить» один раз. Если они могут кликнуть несколько раз, они кликнут. Вместо этого отключайте их после клика. Таким образом вы не позволите случайно отправить данные несколько раз
Предлагайте такие поля ввода данных, которые не позволят ввести неподходящие значения
Используйте отзывчивые активацию и отключение элементов в формах
Оформляйте текстовые поля так, чтобы они соответствовали вводимым данным
Эти рекомендации стоит применять в своей работе всегда! Только осторожнее с советом про оформление текстовых полей: не забудьте проконсультироваться с вашим программистом о типе данных, которые вы хотите из этих полей забирать.
Отслеживайте сигналы о том, что пользователь вот-вот допустит ошибку
Какие самые распространённые ошибки генерируют пользователи в вашем интерфейсе? Определите сигналы, предшествующие этим ошибкам, и постарайтесь в момент их возникновения предупредить пользователей.
Отслеживайте слова, которые выражают намерение пользователя
Надпись слева: «Ваше сообщение было отправлено».
Надпись справа: «Вы хотели прикрепить файл к сообщению? Вы написали «Я прикрепил», однако на самом деле ничего не прикрепили». И кнопки «Редактировать» и «Отправить»
Напомните пользователям, что они уже приобрели товар, чтобы они случайно не купили его ещё раз
Надпись на левой кнопке: «Купить».
Надпись на правой кнопке: «Купить ещё один экземпляр».
Первый совет имеет отношение к почтовым клиентам и вряд ли пригодится в работе рядовому проектировщику. Реализацию второго совета ни разу не встречал на практике. Поэтому особо на них не заостряем внимание и двигаемся дальше.
Отделите функции, влекущие за собой большие последствия, чтобы уменьшить вероятность их случайного использования
Пользователи будут терять сосредоточенность. Этого вы не в силах предотвратить. Однако вы можете визуально отделить «мощные» функции от остальных, чтобы уменьшить потенциальное количество случайных ошибок и потерянных данных.
Отделяйте «мощные» функции расстоянием или цветом
Добавляйте ограничения для функций, влекущих за собой крупные изменения, которые невозможно откатить назад
Эти два совета универсальны и действуют во всех случаях. Кнопки выхода из аккаунтов должны размещаться в тех местах, где по ним случайно не кликнешь.
А любые удаления критически важных данных должны сопровождаться дополнительными подтверждениями этих действий, либо возможностью откатить их.
Предоставляйте возможности легко откатить или отменить действия
Всегда позволяйте пользователям вернуться назад или восстановить страницу в исходное состояние.
Лучше используйте откаты, а не дополнительные подтверждения
Давайте возможность вернуться «на исходную» в рамках любой страницы или функции вашего интерфейса
Например, в некоторых выпадающих списках нет вариантов, позволяющих ничего не выбирать. И после того, как пользователи что-то выбрали, у них уже нет возможности отказаться от своего выбора.
Явно показывайте кнопку «Закрыть» на модальных окнах
Эта часть статьи радует универсальными советами.Только не забывайте в сложных фильтрах добавлять кнопки сброса к параметрам по умолчанию.
А ещё давайте вспомним интерфейсы, в которых кнопка «закрыть» в модальных окнах появляется не сразу, а по таймеру (если понимаете, о чём я) — и отправим проклятья их авторам!
Минимизируйте негативный эффект от прерванных последовательностей действий
Пользователи должны иметь возможность вернуться к тому месту в последовательности, на котором они прервали свою работу, не потеряв данных.
Сохраняйте введённые пользователями данные
Дайте пользователям вернуться в то же место последовательности, на котором они прервали свою работу в предыдущий раз
И снова всё будет зависеть от технических ограничений системы и пользовательских сценариев. Советы хороши, но не универсальны, используйте их с умом.
Увеличивайте размеры подвижных частей и кликабельных зон
Пользователи не идеальны. Они делают ошибки своими курсорами. Создавайте гибкие, прощающие эти ошибки, интерфейсы.
Увеличивайте кликабельные зоны элементов за счёт прозрачных границ
Добавляйте небольшую задержку при уводе курсора с всплывающих меню
Делайте ссылкой весь контейнер, содержащий пункт меню
Делайте ссылками корневые пункты меню навигаций, элементы списков, и дополнительные иконки
Часто пользователи кликают на некликабельные элементы. Не боритесь с этими ошибками. Вместо этого добавьте этим элементам кликабельность.
Показывайте ценные и подбадривающие сообщения об ошибках
Никогда не пишите стандартное сообщение «Произошла ошибка!» Объясните причину её возникновения и, при возможности, пути решения.
Объясняйте причины возникновения ошибок
Надпись слева: «Упс! Произошла ошибка».
Надпись справа: «Упс! Это старый пароль».
Направляйте пользователей к документации или в службу поддержки в случае возникновения сложных ошибок
Надпись слева: «Упс. Произошла ошибка по причине XYZ. Теперь вы сами за себя».
Надпись справа: «Упс. Произошла ошибка по причине XYZ. Вы можете её исправить с помощью ABC. Кликните, чтобы узнать детали».
Избегайте обращений к пользователю на «вы» в сообщениях об ошибках
Надпись слева: «Упс! Вы забыли ввести индекс».
Надпись справа: «Упс! Пожалуйста, введите индекс».
Редкие проектировщики занимаются сообщениями об ошибках. Обычно эта задача ложится на плечи программистов, да и то, потому что им деваться некуда. А зря!
Сохраняйте информацию о предыдущих действиях пользователей
Напоминайте пользователям о действиях, совершённых ими ранее в вашем интерфейсе.
Показывайте последние поисковые запросы пользователей
Выделяйте посещённые ссылки другими цветами
Отмечайте, какие элементы пользователи уже просмотрели
Здесь всё не так однозначно. Историю поисковых запросов иногда лучше не показывать в соответствии с политикой безопасности проекта. Не все посещённые ссылки следует выделять цветом. Чаще всего это нужно только в интерфейсах, где задача пользователя — последовательно просмотреть разные материалы под разными ссылками и не повториться.
Не забывайте, что существует такой тип целевой аудитории, который пользуется семейным компьютером для просмотра одних и тех же ресурсов. Это, конечно, притянуто за уши, но хорошо иллюстрирует, что не стоит слепо следовать советам, приведённым выше.
Анализируйте поведение пользователей на сайте, чтобы обнаруживать проблемы с интерфейсом
Постоянно вносите итерационные улучшения в интерфейс. Для начала воспользуйтесь простыми советами ниже.
Собирайте обратную связь от пользователей в соответствующих местах интерфейса
Частые ошибки дизайна веб-страницы
Простые советы по верстке и оформлению, которые помогут создать красивую страницу сайта
Ошибки в дизайне лендинга
1. Нет разделения на смысловые блоки
Информацию проще воспринимать, если она разделена на блоки по смыслу. Чтобы визуально отделить блоки друг от друга, используйте большие отступы (от 120 до 180px) и отделяйте блоки с помощью разного цвета фона.
Между смысловыми блоками маленькие отступы и нет разделения с помощью цвета — информацию тяжело воспринимать, непонятно, какой текст к чему относится
Отступы достаточно большие и блоки разделены цветом — видно, что это блоки разной информации
2. Разные отступы между элементами
Между смысловыми блоками должны быть одинаковые расстояния. Иначе страница будет выглядеть неаккуратно, и может создаться ощущение, что блоки неравнозначны по смыслу.
Разные отступы —неаккуратно, и есть ощущение, что информация о компании относится к обложке, хотя все блоки равнозначны по смыслу
Одинаковые отступы помогают воспринимать смысловые блоки как равнозначную информацию
3. Маленькие отступы, не позволяющие разделить смысловые блоки сайта
Чтобы разные смысловые части не выглядели как единое целое, важно их разделять и использовать достаточно большое расстояние между ними (не менее 120 px).
Маленькие отступы — блоки сайта прилипают друг к другу. Это перегружает страницу и создает путаницу, как будто это одно целое, а не разные по смыслу части
Отступы достаточно большие, сразу понятно, что блоки разные по смыслу
4. Текст плохо читается на фотографии
Текст не должен сливаться с фоновым изображением. Чтобы он хорошо читался, можно наложить на фотографию фильтр контрастного тексту цвета. Чаще всего используют черный, но можно использовать яркие цвета и комбинировать их.
Еще один вариант — использовать изначально контрастную тексту фотографию или располагать текст так, чтобы он был на затемненном участке изображения.
Текст трудно прочитать, фотография слишком светлая
На фотографию наложен фильтр, и текст теперь легко читается
Как правильно сочетать текст и изображения
5. Много стилей
Большое количество разных стилей типографики и оформления на одной странице выглядит непрофессионально и затрудняет восприятие информации. Чтобы этого не происходило, ограничьтесь одним шрифтом, одним цветом и двумя видами насыщенности шрифта (например, normal и bold).
Из-за большого количества стилей типографики непонятно, какая информация важная, а какая второстепенная
Использован один шрифт, цвет и два вида насыщенности. Типографика выглядит аккуратно и понятно
6. Узкий цветной блок
Выделение цветом отдельных узких элементов страницы дробит смысловые блоки и выглядит неаккуратно. Например, заголовки уже выделяются среди текста размером, насыщенностью шрифта, а также отступами.
Если нужно выделить какую-то информацию на странице - применяйте цветной фон для всего смыслового блока: и для заголовка, и для текста, относящегося к нему
Заголовки, выделенные цветным фоном дробят смысловые блоки и выглядят отдельными самодостаточными элементами
Заголовок и текст, относящийся к нему, имеют общий фон. За счет этого видно, что это один смысловой блок
7. Много текста в узких колонках
Когда в узких колонках много текста, его трудно читать — глазам все время приходится перескакивать с одной строки на другую. К тому же это выглядит некрасиво. Лучше уменьшить количество колонок и сократить текст, иначе его просто никто не будет читать.
Длинный текст в колонках (еще и с выключкой по центру) неудобно читать
Текста в колонках немного, легко прочитать
8. Много текста с выравниванием по центру
Центральная выключка (равнение по центру) текста уместна при небольшом количестве слов, иначе его будет сложно воспринимать. При этом текст стоит сделать покрупнее, от 24 пикселей.
Если вам необходимо большое количество текста, используйте блок с раскрывающимся текстом (в Тильде TX12, TX16N или кнопка BF703).
Текста с центральной выключкой очень много, читается с трудом
Короткий текст под заголовком (все с центральной выключкой) создают хорошую композицию
9. Текст накладывается на важную часть изображения
Не стоит располагать текст на значимых частях фотографии и мелких деталях. Так и изображение не будет видно, и текст будет читаться тяжело. Попробуйте поварьировать выключку текста (равнение по центру или левому краю) и его вертикальное расположение.
Заголовок мешает рассмотреть лицо человека, и текст на фоне мелких деталей сложно читать
Изображение и текст вместе создают хорошую композицию, видно детали фотографии, текст легко прочитать
10. Несоблюдение визуальной иерархии
Чтобы на странице была видна смысловая иерархия информации, заголовок на обложке должен быть крупнее остальных заголовков на странице либо такого же размера (например, если в заголовке на обложке много слов).
Заголовок на обложке неоправданно меньше, чем последующий заголовок, это создает путаницу. Кажется, что второй заголовок важнее
Заголовок на обложке крупнее, чем в следующем блоке, все выглядит последовательно и гармонично
То же самое относится к визуальной иерархии внутри смыслового блока. Заголовок должен быть самым крупным, а подзаголовок меньше и с меньшей насыщенностью шрифта. Названия преимуществ — заметно меньше, чем заголовок и такой же насыщенности. Описание преимуществ набрано самым мелким текстом.
Таким образом, даже при беглом просмотре страницы посетитель увидит, какая информация самая важная и какая вторичная.
Заголовок меньше, чем названия преимуществ и кажется второстепенным, хотя по смыслу он важнее
Заголовок самый крупный, названия преимуществ меньше, но тоже выделяются среди текста
Подробнее о визуальной иерархии сайта
11. Один смысловой блок визуально распадается на два
Полноэкранное изображение или галерея, расположенные после текста, смотрятся как самостоятельный блок. Если добавить галерее поля, то за счет общего фона текст и изображение будут выглядеть единым смысловым блоком.
Галерея во всю ширину экрана кажется не связанной с заголовком выше и выглядит как самостоятельный блок
Галерея расположена на общем фоне с заголовком — все вместе смотрится единым блоком
12. Слишком крупный длинный заголовок
Очень крупный шрифт хорошо подойдет для короткой фразы. Если заголовок длинный, лучше использовать меньший размер шрифта, так его будет легче читать и всем элементами на обложке не будет тесно.
Слишком крупный заголовок — заслоняет почти всю обложку, элементам тесно, текст тяжело прочитать
Хорошая композиция, все элементы обложки сбалансированны, текст легко читается
13. Неуместное использование обводки в кнопках
Обводка нужна, чтобы сделать прозрачную кнопку. Добавлять обводку к цветной кнопке не нужно — это лишний и бессмысленный элемент интерфейса, который перегружает страницу и усложняет восприятие контента.
14. Слишком много цветов
Большое количество цветовых акцентов создает путаницу на странице: непонятно, что важнее. Достаточно использовать 1−2 цвета, чтобы выделить важные элементы.
Много ярких цветов, непонятно, на что в первую очередь обратить внимание
Один цветовой акцент создает разнообразие, но не отвлекает от содержания страницы
15. Перегруженное меню
Человек заходит на сайт, чтобы найти решение своей проблемы. Помогите ему в этом. Используйте меню, чтобы посетителю сайта было проще сориентироваться и быстрее найти то, что ему нужно. Не перегружайте меню избыточной информацией. Оптимальное количество пунктов меню — 5-7.
В меню слишком много информации, поэтому в нем сложно сориентироваться
Информации в меню немного, легко сориентироваться
Ошибки в дизайне статьи
1. Длинный сплошной текст
Длинный и не разделенный на абзацы текст снижает удобство чтения. Чтобы в тексте было проще ориентироваться, стоит разделить его на абзацы и разбавить, например, ключевой фразой или изображением.
Сплошную пелену текста сложно воспринимать глазу
В тексте расставлены акценты, благодаря которым его легче читать
2. Заголовок стоит на равном расстоянии от предыдущего и следующего абзаца
Заголовок не должен «летать» между текстами предыдущей и следующей главы, потому что по смыслу он относится к последующему абзацу. Расстояние над заголовком должно быть раза в 2−3 больше, чем расстояние под ним. А расстояние под заголовком должно быть примерно равным расстоянию между абзацами или немного больше. Так заголовок будет визуально относиться к последующему тексту.
Заголовок находится на равном расстоянии от абзацев снизу и сверху и непонятно, к чему относится
За счет небольшого отступа под заголовком видно, что он относится к последующему тексту
3. Смысловая иерархия не соблюдается
Контраст в типографике помогает визуально разделить уровни текста и четко распределить иерархию. Самыми крупными должны быть заголовки, подзаголовки могут быть заметно меньше, но отчетливо выделяться в тексте.
Заголовок и подзаголовок практически одинакового размера, выглядят как равнозначные уровни текста
Видно, что заголовок важнее по смыслу, чем подзаголовок
4. Разные отступы сверху и снизу одного смыслового блока
Равнозначные по смыслу блоки должны выглядеть соответственно и располагаться на равном расстоянии друг от друга
Слишком маленький отступ между обложкой и фотографией автора, кажется, что к обложке автор имеет большее отношение, чем к тексту
Отступы одинаковые, блоки выглядят как равнозначные элементы
5. Подпись расположена слишком близко к иллюстрации
Хотя иллюстрация и подпись образуют единую структуру, это два отдельных элемента, и текст не должен вторгаться на территорию изображения.
Подпись приклеилась к изображению и мешает восприятию (и картинки, и текста)
Между картинкой и подписью есть воздух, при этом понятно, что подпись относится к фотографии
6. Между подзаголовком и текстом мало места
Подзаголовок и последующий текст связаны, но если абзацный отступ внутри текста оказывается больше, чем расстояние между всем текстом и подзаголовком, конструкция становится дисгармоничной.
Отступ между заголовком и текстом меньше, чем отступ между абзацами
Отступ после заголовка чуть больше, чем отступ между абзацами
7. Основной текст расположен близко к акценту
Акцент внутри основного текста (например, ключевая фраза или цитата) — самостоятельный объект. И чтобы он действительно выделялся и бросался в глаза, его нужно отделять от основного текста отступами от 75 до 120 px.
Отступ между основным текстом и акцентом слишком маленький
Акцент выделяется в тексте благодаря большим отступам
8. Слабый контраст элементов
Если вы решили сделать акцент на какой-то фразе — будьте смелее, сделайте ключевую фразу крупнее основного текста на 10-15 px, пусть важная мысль действительно выделяется из окружающего текста.
Ключевая фраза как будто притворяется частью текста и не хочет выделяться. Выглядит неаккуратно
Ключевая фраза выделена за счет крупного шрифта и отступов
9. Цветной фон для узкого блока
Чтобы выделить какой-то небольшой блок (например, информацию об авторе), достаточно сделать хороший отступ, это создаст пространство вокруг. Выделять эту информацию на цветном фоне не стоит, это будет выглядеть неуместно.
Подзаголовок также не следует выделять цветом, вполне достаточно того, что он крупнее основного текста и отделен отступами.
10. Между двумя полноэкранными изображениями есть пустое пространство
Расположение нескольких полноэкранных изображений подряд не следует оставлять между ними отступ — граница между фотографиями и так будет видна, незачем добавлять лишний элемент, не несущий никакой смысловой нагрузки.
Пустое пространство между полноэкранными изображениями выглядит бессмысленно и некрасиво
Фотографии выглядят гармонично
11. Много выделений в тексте
Акценты (в данном случае жирное начертание) хорошо работают, когда их мало. Большое количество выделений в тексте затрудняют чтение.
Много выделено жирным, текст рябит в глазах
Небольшое выделение акцентирует внимание на элементе, но не мешает читать весь текст
12. Много стилей типографики
В тексте оформление не должно преобладать над удобочитаемостью. Чем меньше стилей типографики, тем лучше видны акценты в тексте. Достаточно выделять заголовки и подзаголовки, а также делать контрастными ключевые фразы.
В тексте слишком много акцентов и выделений, рябит в глазах и неудобно читать
Стилей типографики немного, четко видны акценты и иерархия в тексте
13. Выравнивание по центру в длинном тексте
Выключку (выравнивание) по центру обычно используют в заголовках и выносах — акцентах в тексте, чтобы выделить элемент из массы. Когда весь текст выровнен по центру, это значительно снижает удобство чтения.
Текст с центральной выключкой выглядит неопрятно, его неудобно читать
Равнение по левому краю лучше всего воспринимается глазом
14. Заголовок прилип к фотографии
Заголовок — самостоятельный элемент. Он не должен быть расположен слишком близко к следующей за ним иллюстрации. Чтобы заголовок хорошо сочетался с изображением, сделайте отступ не менее 60 px и добавьте подзаголовок, он раскроет содержание и правильно расставит акценты.
Заголовок расположен слишком близко к фотографии, нет воздуха
Заголовок отделен от изображения подзаголовком и относится ко всему разделу, а не только к картинке
15. Неуместное использование курсива
Курсив используется для того, чтобы выделить слово или короткую фразу в тексте. Он не так сильно бросается в глаза, как жирное начертание, но позволяет сделать акцент в определенном месте.
Набирать весь текст или заголовки курсивом не следует. В текстах, набранных шрифтами без засечек, курсив лучше не использовать совсем
Фраза уже выделяется в тексте за счет размера и отступа, курсив уже излишен
Курсив на своем месте — небольшой акцент в основном тексте
16. Смещение блоков относительно центра и друг друга
Этот досадный промах вы легко обнаружите сами, если после всех манипуляций с текстом (изменение размера шрифта, выравнивания, отступов) просто сделаете паузу и посмотрите на то, что получается.
Заголовок и описание смещены влево, а текст вправо
Все элементы текста складываются в гармоничную композицию