10 основных советов по дизайну Вашего сайта
24.06.2018
Веб-сайт — это интерфейс, пространство, в котором разные вещи встречаются, общаются и влияют друг на друга.
Дизайн интерфейса представляет собой подмножество дизайнов пользовательского интерфейса.
В нем основное внимание уделяется более широкой картине: то есть всему опыту, а не только интерфейсу.
1. Знайте своих пользователей.
Вы должны знать, кто ваши пользователи — внутри и снаружи.
Это означает знание всех демографических данных, которые могут использовать ваши приложения для аналитики, а также — что им нужно, и что мешает им достичь своих целей.
2. Определите, как люди используют ваш интерфейс.
Примеры прямых взаимодействий:
— Нажатие кнопки
— Прокрутка карты
— Перетаскивание элемента кончиком пальца
— Примеры косвенных взаимодействий
— Указание и щелчок мышью
— Использование ключевых команд / ярлыков
— Ввод в поле формы
Если вы разрабатываете для пожилых людей или других людей с ограниченной ручной ловкостью, не опирайтесь на прокрутку.
Если вы разрабатываете для писателей, которые взаимодействуют с приложениями с помощью клавиатуры, поддерживайте все обычные сочетания клавиш, чтобы свести к минимуму время работы с мышью.
3. Установите ожидания.
Установка ожиданий с помощью дизайна:
— Выделение кнопки, соответствующей желаемому действию
— Использование широко понятого символа (например, мусор для кнопки удаления, знак плюса для добавления чего-либо или увеличительное стекло для поиска) в сочетании с копией
— Выбор цвета с соответствующим значением (зеленый для кнопки «идти», красный для «стоп»)
— Установка ожиданий с копией
— Написание кнопки очистки кнопки
— Обеспечение направленной / обнадеживающей копии в пустых состояниях
— Предоставление предупреждений и запрос подтверждения
Для действий с необратимыми последствиями, например, для постоянного удаления чего-либо, имеет смысл спросить людей, уверены ли они.
4. Научитесь предвидеть ошибки.
Люди ошибаются, но они не должны (всегда) страдать от последствий. Существует два способа уменьшить влияние человеческой ошибки:
— Предотвратите ошибки, прежде чем они произойдут
— Предоставьте способы исправить их после того, как они произойдут
Когда вы пишете сообщения об ошибках, убедитесь, что они выполняют две вещи:
— Объясните проблему. Например: «Ты сказал, что родился на Марсе, который люди не колонизировали. Все же.»
— Объясните, как это исправить. Например: «Пожалуйста, введите место рождения здесь, на Земле».
Принцип предвосхищения ошибки пользователя называется принципом poka-yoke. Poka-yoke — это японский термин, который переводится как «ошибка проверки».
5. Дайте обратную связь.
В реальном мире окружающая среда дает нам обратную связь. Мы говорим, а другие отвечают. Мы царапаем кошку, и она мурлычет или шипит.
Если вы используете индикаторы выполнения на своем сайте, подумайте о том, чтобы попробовать некоторые визуальные трюки, чтобы сделать загрузку более быстрой.
6. Подумайте о размещении и размере элементов.
Сделайте кнопки и другие «цели клика» (например, значки и текстовые ссылки) достаточно большими, чтобы их можно было легко увидеть и щелкнуть.
Это особенно важно в меню и других списках ссылок, так как недостаточное пространство оставит людей, которые снова и снова будут щелкать неправильные ссылки.
Сделайте кнопки для наиболее распространенных действий более крупными и более заметными.
Направляйте навигацию (и другие общие интерактивные элементы, например, строки поиска) по краям или углам экрана.
Пока вы думаете о размещении элементов и их размерах, всегда учитывайте свою модель взаимодействия.
Если для вашего сайта требуется горизонтальная прокрутка, а не вертикальная прокрутка, вам нужно подумать о том, где и как указать пользователям этот необычный тип взаимодействия.
7. Не игнорируйте стандарты.
Будучи очень креативными типами, дизайнеры, как правило, любят изобретать вещи, но это не всегда лучшая идея.
8. Сделайте ваши интерфейсы легкими для изучения.
Чем проще, тем легче запомнить в краткосрочной перспективе.
Поэтому, ограничьте количество вещей, которые человек должен помнить, чтобы эффективно использовать ваш интерфейс.
Вы можете облегчить это, разбивая информациюьна маленькие куски.
Избегайте использования «узнать больше» и аналогично неспецифического текста в ссылках и кнопках.
9. Сделайте принятие решений простым.
Чем больше вариантов вы представляете пользователю, тем труднее ему принимать решение.
Это влияет почти на все, что мы строим:
— Общие макеты
— Меню навигации
— Цены
— Индексы блога
— Контентные ленты
Именно поэтому целевые страницы и электронные письма, не связанные с рассылкой новостей, должны иметь только один призыв к действию.
10. Просматривайте информацию о динамике развития сайта.
Настройте аналитику для своего сайта и регулярно анализируйте ее.
