Элементы сайта

Навигация
 
Выбор оптимального пути следования.
 
Типы навигации:
 
1. Глобальная. Меню.
 
2. Локальная. Ссылки внутри разделов страницы, которые помогают переходить на подобные страницы.
 
3. Контекстная. Динамическая область сайта, которая предоставляет набор релевантных ссылок.
 
Как сделать меню более эффективным:
 
1. Навигация должна быть заметной.
 

  • ● Бургер только для мобильных
  • ● Навигация в привычном месте.
  • ● Выделять ссылки.
  • ● Размещать кросс-ссылки (с этим товаром покупают…)

 
2. Навигация должна быть понятной.
 

  • ● Выделять текущее положение
  • ● Выделять открытые ранее ссылки
  • ● Ясная формулировка

 
3. Навигация должна быть удобной.
 

  • ● Чем крупнее объект и чем меньше до него расстояние, тем проще и быстрее с ним взаимодействовать.
  • ● Основное меню должно быть под рукой.

 
Карусель

елемент сайта карусель

Это набор слайдов.
 
Ошибки юзабилити при создании карусели:
 
1. Автослайдинг после начала взаимодействия. Необходимо переводить на “ручной режим” управление слайдами после начала взаимодействия.
 
2. Переключение набора слайдов по одному. В случае, если на слайд-шоу размещена группа изображений, то нужно переключать элементы не по одному, а сразу группами.
 
3. Непонятное отображение прогресса. Пользователю необходимо максимально просто показать этап, на котором он сейчас находится.
 
4. Бесконечный слайдинг. Пользователю необходимо понимать, когда он закончил просмотр контента. Добавьте ограничитель в виде отключенной стрелки.
 
5. Мелкая зона для взаимодействия. Объекты, с которыми нужно взаимодействовать должны быть больше курсора мыши.

обьекты сайта

При построении сайтов используют информационную архитектуру – заложенный сценарий, по которому пользователь воспринимает информацию.
Карточный дизайн направляет пользователя по логической цепочке. Он опирается исключительно на изображения. И это его сильная сторона. Такой сайт хорошо подходит под мобильный дизайн.
 
Формы
 
Какие бывают поля:
 

  • ● инпут;
  • ● тектовое поле;
  • ● сабмит;
  • ● селектбокс, мульти-селект и комбобокс;
  • ● чекбокс и радио-баттон;
  • ● аплоад-баттон и драгэнддроп-ареа;
  • ● и другие.

 

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

1. Сделать форму короче
 

  • ● Удалить поля о сборе информации, которая может быть получена другим способом
  • ● Поля для несрочной информации
  • ● Поля для информации, которая может быть упущена без потери

 
2. Группируй поля.
 
3. В одну колонку. Исключение – адреса, индекс и т.д. Такую информацию можно разместить несколькими ячейками в строке.
 
4. Логическая последовательность полей.
 
5. Избегать комментариев к полям внутри самого поля, если после заполнения невозможно прочитать, для какой информации предназначалась ячейка.
 
6. Текстовые поля должны быть того же размера, что и ожидаемые вводные данные.
 
7. Обязательные поля.
 
8. Объясни требования к заполнению.
 
9. Избегать кнопки сброса и очистки.
 
10. Сообщения об ошибках показывать с объяснением дальнейших действий.
 
11. Не слишком агрессивно показывать окно об ошибках.
 
Выключка имеет значение
 

  • ● Числа выравниваются по правому краю;
  • ● Числа выравниваются по левому краю;
  • ● Заголовки выравниваются по той же стороне, что и данные под ними;
  • ● Не используй выравнивание по центру;
  • ● Вертикальное выравнивание должно быть всегда по верху.

 
Понятные названия
 

  • ● Тайтлы обязательно должны сопровождать данные;
  • ● Таблицы нужно называть коротко и четко;

 
Единицы измерения
 
Самые распространенные метки, используемые в таблицах – это единицы измерения данных, зачастую они повторяются в каждой новой точке данных. Вместо того, чтобы повторять метку, просто включи ее в первую точку данных каждой колонки.
 
В одну колонку
 
Если все данные правильно выровнены в таблице, то линии становятся ненужными. Используй черезполосицу. Она позволяет значительно сократить вертикальное пространство, занимаемое таблицами и при этом упрощает сравнение множества показателей в одной строке.