Визуальная структура интерфейса.

Чем более структурировано и сжато представлена информация, тем быстрее и эффективнее человек изучает и осмысливает ее. Структурированное представление данных также помогает читать длинные номера и числа (например, номера телефонов или кредитных карт). Специфические элементы управления улучшают структурирование ввода (например, календарь для выбора даты).

Любой интерфейс должен быть удобен и понятен пользователю. В процессе создания его визуальной иерархии нужно учитывать приоритетность тех или иных элементов в интерфейсе с точки зрения их важности – от самого важно до менее важных. Хорошо построенная иерархия элементов на странице позволяет быстрее найти интересующую информацию.

Информация разбивается на секции и подсекции, которые представляются в иерархической форме с обозначениями и выделением важного.

Свойства блоков и элементов, которые строят иерархию:

· размер - чем больше элемент, тем большее значение он имеет;

· контраст - если один элемент имеет темный фон, а соседний - более светлый, то первый будет более заметен;

· цвет - позволяет привлекать внимание к более важным блокам в дизайне страницы;

· расположение элементов - может группировать отдельные части интерфейса в блоки, тем самым указывая их принадлежность друг к другу;

· выравнивание элементов друг относительно друга может также определять их значение на странице;

· вертикальный ритм - пункты в списках, отношение заголовка к контенту, высота строк контента - это то, что позволяет пользователю легко сориентироваться в информации, понять, что и к чему относится.

Особенности восприятия и работы с текстом при проектировании интерфейсов.

Процесс чтения представляет собой интерпретацию слов с целью понять их значение. Владелец сайта или разработчик ПО для облегчения процесса восприятия информации должен обращать внимание на следующие факторы:

· сложные написания и шрифты - текст со сложными для узнавания характеристиками и фигурами будет трудно читать;

· мелкий шрифт - визуальная система читателя с большим трудом разбирает символы такого размера;

· специфические или незнакомые термины - режим автоматического чтения сменятся у пользователя на сознательное обдумывание незнакомого термина;

· текст на шумном фоне - визуальный шум внутри и вокруг текста мешает распознаванию характеристик, символов и слов;

· многочисленные повторения - если в тексте слишком много повторений, читатель не только теряет строку, но и с трудом извлекает из последовательности символов действительно важную информацию;

· выравнивание по центру - Если текст выровнен по центру или по правому краю страницы, то первые буквы строк расположены не в столбец, а разнесены по разным позициям. Таким образом, автоматическое движение глаз переносит взгляд в неверную точку, и нам приходится сознательно корректировать себя.

Особенности цветового восприятия. Рекомендации по использованию цвета при проектировании интерфейсов.

У способности людей воспринимать цвет есть свои сильные стороны и ограничения, многие из которых важно учитывать при разработке интерфейсов:

· зрение оптимизировано для распознавания контрастных цветов (границ), а не абсолютной яркости - наша визуальная система чувствительна не к яркости, а к контрасту;

· умение различать цвета зависит от того, каким образом цвета представлены. Есть 3 фактора, влияющих на способность их различать:

1) бледность (более бледные цвета сложнее различать);

2) размер (чем меньше или тоньше объекты, тем сложнее различать их цвета);

3) разъединение (чем дальше друг от друга находятся образцы цвета, тем сложнее различать их цвета).

· некоторые люди не различают цветов (цветовая слепота - наследственная, реже приобретённая особенность зрения человека, выражающаяся в неспособности различать один или несколько цветов);

· внешние факторы (вариации цветных дисплеев; наличие дисплеев, которые работают с оттенками серого; угол обзора; окружающее освещение).

Рекомендации по использованию цвета при проектировании интерфейсов:

· дифференцировать цвета не только по тону, но и по насыщенности и яркости;

· использовать выразительные цвета;

· избегать цветов, воспринимаемых одинаково людьми с цветовой слепотой;

· использовать цвет в сочетании с другими подсказками;

· разделять сильные противоположные цвета;

· учитывать особенности периферического зрения:

1) помещать сообщения туда, куда смотрит пользователь;

2) обозначать ошибку;

3) использовать символ, сигнализирующий об ошибке;

4) использовать красный свет только для обозначения ошибок.