Мешкова М.А. Диссертация Методология разработки системы тестирования (1194684), страница 9

Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 9)

Последовательность качественных показателей объектов в порядке простоты их усвоения пользователем:

– цифровая информация;

– цвета;

– буквы.

На рисунке 8 представлена зависимость времени восприятия элемента от его типа [42].

Рисунок 8 – Зависимость времени восприятия элемента от его типа

Пример использования правила 7 2 представлен на рисунке 9. В данном примере в навигации представлено 5 пунктов меню, остальные пункты находятся в дополнительном разделе, открывающемся при нажатии на иконку.

Рисунок 9 – Пример использования правила 7 2

В следующем примере на рисунке 10 можно заметить несоблюдение правила 7 2. Пунктов меню довольно много, они выстроены в два уровня и практически не отличаются друг от друга стилистически, поэтому являются неудобными для восприятия. Решить данную проблему можно с помощью сокращения пунктов меню и введения подпунктов меню.

Рисунок 10 – Пример несоблюдения правила 7±2

3.10.2 Геометрическая память человека

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

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

3.10.3 Группировки объектов

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

Пример очевидной группировки представлен на рисунке 11. В данном примере расстояние между объектами выбрано таким образом, что пользователь без особого труда может соотнести объект и подпись к нему, поэтому информация об объекте воспринимается как единое целое.

Рисунок 11 – Пример очевидной группировки

На рисунке 12 представлен пример неочевидной группировки. В данном примере необходимо приложить определенные усилия, чтобы соотнести надписи и объекты.

Рисунок 12 – Пример неочевидной группировки

Группировку можно использовать не только при работе с изображениями или блоками, данный принцип можно применять и при работе с текстом. В данном случае буквы могут являться объектами, а строки – группами объектов или строки будет являться объектами, параграфы – группой объектов.

Пример текстовой группировки представлен на рисунке 13. В первом случае группировка является очевидной и не вызывает затруднений при распознании, во втором примере принадлежность заголовка второго уровня становится менее очевидной, поэтому приходится дополнительно смотреть по контексту, в третьем примере заголовок второго уровня сливается с основным текстом и практическим не соотносится со вторым абзацем.

Рисунок 13 – Пример текстовой группировки

3.10.4 Контраст формы

При фокусировке внимания пользователя более сильное внимание привлекают сложные объекты (рисунок 14). Это можно объяснить тем, что на сложных объектах пользователь фокусирует внимание в первую очередь неосознанно, основываясь на подсознательной функции различения объектов от фона.

Рисунок 14 – Контраст формы

При проектировании графических интерфейсов дизайнеры намеренно усиливают очевидность фона для упрощения восприятия, используя при этом затемнение, размытие и другие приемы.

Также необходимо учитывать, что обратный контраст формы работает неэффективно. Например, довольно сложно выделить простой геометрический объект из множества сложных объектов (рисунок 15).

Рисунок 15 – Обратный контраст формы

3.10.5 Баннерная слепота

Баннерная слепота заключается в особенности восприятия web-страниц, когда пользователь постепенно перестает замечать баннеры. Это связано с тем, что сигнал определенной частоты постепенно удаляется из общей полосы частоты и со временем данный сигнал становится все слабее, а со временем может пропасть.

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

Рисунок 16 – Карта просмотра web-страницы

3.10.6 Лица и взгляд

Подсознательно в первую очередь пользователь будет обращать внимание на лица людей и направление их взгляда. Данный принцип часто используется в рекламе и при создании рекламных web-страниц.

На рисунке 17 представлена карта просмотра страницы. В данном примере видно, что на втором изображении взгляд ребенка направлен на текст и таким образом, текст становится более привлекательным для пользователя.

Рисунок 17 – Карта просмотра web-страницы

3.10.7 Контраст цвета

Контраст цвета является очень сильным выделителем для информации. Данный подход вызывает раздражение сетчатки глаза и хорошо привлекает внимание. Необходимо помнить, что контрастный акцент должен привлекать сильное внимание, поэтому подобных акцентов не должно быть много, в противном случае данный эффект не будет работать.

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

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

Также при использовании цветовых контрастов необходимо помнить о существовании людей, которые не различают цвета.

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

В отличие от обратного контраста формы, обратный контраст цвета работает, но его лучше не использовать, потому что пользователю будет некомфортно работать с большим контрастным полем.

3.10.8 Контраст размера

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

Контраст размера основан на том, что объект большего размера кажется важнее, потому что подсознательно он кажется пользователю ближе или опаснее.

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

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

Наиболее часто контраст размеров применяется в текстовой информации web-приложения. Для основного текста используется меньший размер шрифта, чем у заголовков и заголовки разного уровня выполняются разными размерами шрифта для указания их значимости (рисунок 18).

Рисунок 18 – Использование контраста размера в тексте

На рисунке слева заголовки хорошо отличимы от текста благодаря контрасту размера, данное различие происходит на подсознательном уровне, а на рисунке справа приходится ориентироваться по контексту.

3.10.9 Контраст движения

Инстинктивно пользователь прежде всего акцентирует свое внимание на движущимся объекте, поэтому в современных web-интерфейсах анимации уделяется достаточно большое внимание. В концепции Material Design также уделено большое значение анимации.

Основные принципы использования анимации в Material Design:

– естественное ускорение и замедление. При создании анимации объекты не двигаются линейно, а двигаются с ускорением и замедлением, потому что это выглядит более естественно. Причем ускорению уделяется большее значение, чем замедлению, потому что ускорение связано с появлением какого-то события, а замедление в основном используется для закрытия данного события и данное действие уже не является важным для пользователя;

– элементы интерфейса кажутся ощутимыми, несмотря на то, что они находятся по ту сторону экрана. Это связано с использованием визуальных эффектов, которые выглядят как результат прямой манипуляции с объектом;

– движение должно начинаться в той точке, в которой произошло взаимодействие с пользователем, чтобы пользователь не отвлекался от данного действия;

– плавная анимация является более естественной и приятной для восприятия пользователем.

3.9.10 Чтение информации

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

3.9.11 Изображения с текстом

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

3.9.12 Пиктограммы

Пиктограммы являются удобным инструментом при работе с интерфейсом, потому что пиктограммы относятся к изображениям, которые привлекают большее внимание пользователя, чем текст. Единственной проблемой при использовании пиктограмм является то, что смысл пиктограмм является не всегда понятным, поэтому рекомендуется делать описание к пиктограммам или выводить подсказку при наведении на них.

3.9.13 Контраст фона

Характеристики

Список файлов ВКР