Золотое правило №4. Визуальная ясность. - Uexpert
  • +7 (495) 055-13-58
    (9:00-20:00)
  • Бесплатная консультация

Золотое правило №4. Визуальная ясность.

· 15 января, 2017 · Золотые правила создания успешных веб-сайтов

Почему нам не хочется смотреть сайты, где нет четкого порядка, где всё валяется как попало, как-будто никто тут не убирался уже много лет? Потому что разработчики предлагают нам самим потратить своё время и силы для того, чтобы найти нужную нам информацию. Но как правило сейчас много сайтов по любой теме и мы уходим туда, где нас уважают, где всё прибрано и вся информация уже упорядочена должным образом.

Zastavki-dlya-sai-ta.006

Создайте ясную структуру и иерархию всех визуальных элементов. Поддерживайте визуальное сканирование интерфейса. Минимизируйте визуальный шум.

Тексты:

  • Пригодны для сканирования
  • Есть четкая визуальная иерархия и структура
  • Более важные элементы более заметны (цвет, размер, расположение)

Тексты должны быть пригодны для сканирования. Это, можно сказать, главная и основная мысль Стива Круга, который говорит о том, как пользователи используют интернет: они не читают, они сканируют информацию. Как только человек видит первое, что ему кажется, похожим на то, что он ищет – туда он и идет. Если речь о ссылке, пользователь кликнет по первой же, которая похожа на то, что он ищет.

Графика:

  • Используйте принципы гештальта
  • Используйте законы композиции
  • Учитывайте эффект «баннерной слепоты»
  • Используйте простые фоны

Уже проведено достаточное количество исследований (в частности с использованием метода eye-tracking), которые говорят нам о том, что пользователи не смотрят на объекты, которые напоминают им рекламные баннеры. Это называется эффектом «баннерной слепоты». Поэтому старайтесь не создавать таких объектов у себя на страницах.

Навигация:

  • Ссылки должны выглядеть как ссылки (цвет, подчёркивание, форма курсора при наведении, и пр.)
  • Отмечены посещённые ссылки
  • Показывайте разницу между внутренними и внешними ссылками
  • Обозначайте ссылки на страницы, открывающиеся в другом окне

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

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

Формы ввода данных:

  • Пользователь должен легко распознавать элементы управления по их внешнему виду (кнопки, строки ввода, флажки и пр.)
  • Длина полей ввода должна соответствовать количеству символов запрашиваемой информации
  • Используйте принципы гештальта
  • Используйте законы композиции

Пользователь должен легко распознавать элементы управления по их внешнему виду. Очень часто любят дизайнеры рисовать что-то. У них работа такая. Им надо рисовать. Но бывает так, что люди вообще не догадываются, что это строка ввода. Так классно нарисовано, что вообще непонятно, что туда текст вбивать можно.

Длина полей ввода должна соответствовать количеству символов запрашиваемой информации. Бывает, что вам необходимо ввести 20 цифр – например 20-значный номер вашего счета, а вам поле дают на 5 цифр. Или наоборот, обратная ситуация – поле ввода большое, а вам туда нужно ввести две цифры. У человека есть психологические ожидания – если ширина поля не соответствует количеству цифр вводимой информации пользователь начинает сомневаться и думать, что может я чего-то не знаю или не понимаю, они же вот столько просят, а я вот столько даю.

Категория: Визуальные элементы, составляющие пользовательский интерфейс.

Поделитесь в соц. сетях:

Другие материалы



Запросите





Нажимая на кнопку вы даёте своё согласие на обработку персональных данных. Политика обработки персональных данных

Свяжитесь с нами

  • info@uexpert.ru
  • +7 (495) 055-13-58