Web-сайт для посетителей: визуальное восприятие

Поскольку посетители взаимодействуют с сайтом визуальным образом, то, прежде всего, необходимо рассмотреть свойства визуального восприятия человека. Это поможет осознанно подходить к разработке интерфейса сайта и в случае возникновения спорных моментов при общении с другими людьми, которые имеют отношение к сайту, аргументировано объяснять свою точку зрения.
В общем случае следовало бы говорить о пространственно визуальном восприятии, но, поскольку web-страница - плоское изображение, то все значительно упрощается.
Относительность
Понятие относительности возникает при наблюдении более одного предмета и может относиться:
  • к пространству - расположение предметов в пространстве - относительно точки наблюдения, по отношению друг к другу, постороннему предмету и др.
  • к размерам - один предмет больше другого, одно тело выше другого и т.п.
  • к направлению и скорости движения предмета - направление и скорость перемещения предметов будет зависеть от положения точки наблюдения.
Понятие относительности очень важно при разработке композиции web-страницы, поскольку для удобства восприятия функционально связанные элементы должны находиться радом, а размеры отдельных элементов должны быть согласованы друг с другом с учетом удобства взаимодействия с ними, "визуальной памяти человека" их важности и функционального назначения. Здесь также используется понятие "различимости" - если элементы сделать очень маленькими (мелкий шрифт текста) или расположены слишком близко друг от друга, то посетителю придется прилагать дополнительные усилия для их распознавания. Мелкий шрифт осложняет чтение, маленькие графические изображения, как и близкое их относительное расположение, затрудняют их распознавание и попадание курсором мыши в их область. Неудобство возникает и тогда, когда элементы на странице слишком большие или они находятся далеко друг от друга. Задача разработки интерфейса как раз и заключается в том, чтобы у посетителя не возникало желание что-либо подвинуть. Заметим, что в приложениях пользователю предоставляется возможность произвести настройку интерфейса - располагать, группировать и изменять размеры панелей инструментов, окон и др. (хотя этой возможностью пользуется намного меньше людей, чем можно предположить). Обычную web-страницу посетитель может только просматривать! Поэтому задача удобного для использования интерфейса web-страницы полностью ложится на разработчика.
Визуальная память
Понятие относительности неразрывно связано с другим свойством - визуальной памятью, которая помогает человеку запоминать увиденное. Совместно с анализом это ускоряет распознавание объектов и композиции, поскольку нет необходимости изучить их снова. Именно в этом и заложена идея "постоянства интерфейса". Если пользователь имеет небольшой опыт работы с каким-то windows-приложением, то, открыв незнакомое приложение, он видит уже знакомые эму элементы - главное меню, панели инструментов, полосы прокрутки, строку состояния и др. Он "вспоминает", где примерно располагаются те или иные команды главного меню - "Открыть" или "Cохранить файл", "Копировать", "Помощь" и др. Он вспоминает как визуальную, так и функциональную составляющие того или иного, знакомого элемента. Из этого не следует, что пользователь "правильно" использует те или иные элементы управления и последовательность действий. Он пытается применить опыт работы с одним приложением на работу с незнакомым ему приложением, не особенно задумываясь, чем они отличаются. Если при этом он получил требуемый результат, то это воспринимается как удобство работы с этой программой. Я бы даже сказал так, визуальная память зачастую преобладает над логикой, поэтому наблюдение "непривычного" элемента управления, его "нестандартного" расположения или поведения практически всегда ставит пользователя в тупик (уже и не помню сколько раз мне приходилось убирать с экрана пользователя "непонятно откуда появившуюся панель" или находить нужную кнопку, потому что "все куда-то пропало"). Но, если Windows-приложения в общем случае стандартизированы в интерфейсной части, то в ctnb Интернет посетителей "ждут" работы многих web-дизайнеров, которые стремятся придумать что-то свое, "интереснее этих надоевших серых кнопок и ужасных полос прокрутки".
На web-страницах, в основном, используются пользовательские элементы управления. Поэтому вопрос "что это?" возникает у посетителей намного чаще, чем у пользователей приложений. Посетитель просматривает большое количество разных web-страниц. Немного освоившись, он начинает применять данный опыт при работе с незнакомыми web-страницами. Например, если посетитель чаще всего видел размещение логотипа в левом верхнем углу, то, открывая незнакомую ему web-страницу, он "ожидает" его увидеть в левом верхнем углу. Вообще фраза "посетитель ожидает увидеть" как нельзя точно отражает поведение большинства посетителей web-страниц "ведомых интуицией". Вопрос, нужно ли тогда менять то, к чему привыкли посетители? Чаще всего нет, хотя есть одно но. Если идея позволяет не нарушая базовые принципы построения интерфейса увеличить удобство и эффективность работы постоянных посетителей, то такое решение может иметь место. Креативность заключается не в том, чтобы озадачить посетителя "нестандартным элементом управления", а в том, чтобы предложить ему удобное и эффективное решение. Но при этом нужно помнить, что "заставить" посетителя принять что-то новое, хотя и очень удобное, очень сложно. По своему опыту могу сказать, что обычный посетитель крайне редко "находит и пользуется" новым сервисом на сайте до тех пор, пока ему лично не продемонстрируешь и не объяснишь его преимущества, услышав в ответ: "Да, это действительно удобно".
"Постоянство интерфейса" - "не принимаемый" и "ненавистный" многими web-дизайнерами принцип построения web-страниц. Да и некоторые пользователи забывают, что "красиво не значит удобно". Помню, один сотрудник часто возмущенно говорил мне: "... твои сайты сразу видны, потому что выглядят стандартно - шапка, навигация слева, текст справа - неинтересно". Эта фраза web-дизайнером воспримется как приговор, а специалистом по юзабилити как похвала.
Последовательность
Это свойство отражает процесс изучения предмета - последовательное изучение. Глаза человека устроены так, что они не могут охватить весь предмет сразу. Простые предметы - квадрат, круг, треугольник человек распознает быстро. Но сложные предметы распознаются постепенно, благодаря постоянным движениям зрачка. Глаз хаотично "сканирует" весь предмет, многократно "скользя" по нему и изучая контуры. Изучение происходит с постепенной детализацией в зависимости от важности предмета изучения для человека, то есть изучение предмета происходит "от общего к частному". На общем уровне человек использует критерии и оценки, что позволяет ему быстро сориентироваться в ситуации. Критерии и оценка - важнейшие защитные механизмы человека, наравне с реакцией и рефлексами. Поэтому распознавание объектов часто происходит на оценочном уровне, без его детального изучения.
Свойство последовательного визуального восприятия говорит о том, что посетитель не может "увидеть" всю web-страницу сразу, он может просматривать и изучать ее последовательно, переходя с одной области на другую. В общем случае этот процесс хаотичный, но, как мы увидим дальше, он все же имеет некоторую направленность.
Фокусировка и оценка
В поле зрения человека попадает большое количество предметов. Однако человек в каждый момент времени фокусирует свое внимание в пределах определенной и весьма небольшой области, выделяя в ней предметы в то время, как все остальное в области зрения становится фоном.
web-страница полностью попадает в поле зрения посетителя, но для нового посетителя она является фоном. Этому способствует и то, что в отличие от windows-приложений, где области и элементы имеют псевдо-трехмерный (выпуклый) вид, на web-странице области и подавляющее большинство элементов управления плоские. Т.е. web-страница воспринимается как рисунок, а не объект интерактивного взаимодействия, как windows-приложение. Как же обратить внимание посетителя на важные элементы страницы? Необходимо использовать акценты - "ключевые точки остановки". Без этого посетитель будет "метаться взглядом" по всей видимой области страницы не понимая, что же ему делать и где может находиться в этом визуальном шуме необходимая ему информация?
Чтобы понять, насколько мала область фокусировки зрения при работе с элементами управления, я приведу стандартную панель инструментов Word.
Панель инструментов Word
Посмотрите 3-5 секунды только на букву "Ж". Что Вы видите? Слева видна цифра 12 и треугольник открытия списка, а справа - наклонная буква "К" и, возможно, буква "Ч". То есть, в данном случае мы видим +1(+2) элемента слева и +1(+2) элемента справа от элемента, на котором мы фокусируем взгляд. А все остальное можно описать так - слева - длинная строка и еще что-то, справа несколько небольших областей, что-то красное и еще что-то. Получается следующая картина различимости.
Панель инструментов Word
Это пример статичного фокуса, когда мы постоянно смотрим на один и тот же элемент страницы. На практике взгляд посетителя скользит по областям незнакомой ему страницы и "выхватывает" отдельные элементы из различных блоков. Что же помогает ему производить фокусировку в пределах определенной области, например, навигации и др.? Визуальная память. Имея предыдущий опыт взаимодействия c web-страницами, он, попадая на незнакомую ему страницу, "вспоминает" его: если на большинстве web-страниц навигация находилась в левой части страницы, то ему достаточно окинуть взглядом левую часть страницы, чтобы посмотреть, есть ли там что-то похожее на ссылки. Мы подошли еще к одному свойству - человек может "вспомнить" предмет по быстрому наблюдению какой-то его части, например: окно-дом, клавиши - пианино или рояль и др.
Реакция на движение
Скорость реакции зрения на движущиеся предметы намного выше, чем на неподвижные. С точки зрения физиологии это связано с тем, что движущиеся предметы могут представлять опасность для человека (тоже самое можно наблюдать и у животных). Поэтому в природе человека предусмотрена мгновенная реакция, поскольку зрение - самое быстрое и восприимчивое к информации чувство человека.
Это свойство восприятия можно использовать для привлечения внимания посетителя к какому-то объекту на странице. Но не забывайте, что движение - очень сильный элемент воздействия на посетителя. Поэтому очень часто оно не привлекает внимание, а отвлекает от работы и вызывает сильное раздражение. Особенно это относится к "бегущей строке" и баннерам. Посетитель хочет увидеть информацию о товаре, а вместо этого ему подсовывают "плавающую" панель навигации или бегущую строку "Рады Вас приветствовать, нам исполнилось 50 лет".
Можете ли вы вспомнить хотя бы один анимационный элемент в windows-приложениях, кроме индикатора процесса? Представьте себе баннер, красующийся на месте панелей инструментов в Word, Excel или CorelDraw! Нетрудно представить, какими словами "наградит" пользователь разработчиков. А в Web это стало нормой!
Иллюзии
Обман зрения. Причина этого заключается в физических свойствах предмета и в особенностях строения глаза. Графические иллюзии могут возникнуть, когда человек видит более одного предмета или несколько вариантов композиции из одних и тех же предметов, в результате наблюдения которых мозг производит сравнительную оценку.
Иллюзия черных кружочков Иллюзия не параллельности
Рис. 1. Иллюзия черных кружочков и иллюзия не параллельности.
Посмотрите на рис. 1 Расстояния между кружками равны их диаметрам, но кажутся намного больше, а параллельные прямые в правой части рисунка кажутся непараллельными.
Выше мы привели примеры "классических" иллюзий, а могут ли они возникнуть на web-странице? Чаще всего встречаются иллюзии, связанные с цветом.
Кажется, что синие квадраты больше красных, их края непараллельны и сглажены, а сами они смещены и "вдавлены"
Рис. 2. Кажется, что синие квадраты больше красных, их края непараллельны и сглажены, а сами они смещены и "вдавлены".
Вдавливание особенно заметно при использовании разноцветного текста на черном фоне.
Кажется, что нечётные строки "вдавлены"
Рис. 3. Кажется, что нечётные строки "вдавлены".
Эти примеры могут показаться "натянутыми", если бы они встречались не так часто на web-страницах.
Использование ассоциаций
Свойство зрения устанавливать связь одного изображения с другим. Чтобы вызвать ассоциацию нужно просто нарисовать что-то и задать вопрос - на что это похоже?
Ассоциации
Ассоциации могут вызывать определенные чувства и оценку.
Ассоциации
Пиктограммы на кнопках - ассоциативность "изображение-действие", которое помогает пользователям выполнять необходимые им действия. Без пиктограмм пользователям пришлось бы читать длинные названия команд, что требует времени и намного большего места для хорошей различимости.
На web-страницах используются как общепринятые пиктограммы: изображение домика - переход на главную страницу сайта, изображение конверта - вызов почтового агента, тележка на колесах - корзина товаров - переход на страницу заказанных товаров, так и пользовательские, которые зачастую являются элементами оформления, что вызывает множество вопросов у посетителей.
Цветовое восприятие
Цвет оказывает сильное воздействие на психологию посетителя. Мы не будем углубляться в теорию цвета, но отметим, что у каждого человека есть свои предпочтения и восприятие того или иного цвета и их сочетаний. Сейчас многие говорят о наступлении эпохи "Web 2" - "пастельные цвета, плавные переходы в оформлении элементов web-страниц", в отличие от жестких цветов "палитры 216". Я считаю, что цветовое оформление web-страниц должно существовать не само по себе, "потому что так красиво", а для того, чтобы оно помогало воспринимать информацию. Часто забывается тот факт, что при прочих равных условиях само чтение информации с экрана монитора намного труднее по сравнению с чтением книги, но плюс к этому ряд умельцев "стараются всеми способами" сделать процесс чтения интересной статьи просто невыносимым "экспериментируя" с цветами при оформлении текста.
Оглавление
Copyright © 2016