Визуальный дизайн: индивидуальность содержания и представления

Вот первая часть беседы:

UIE: Некоторым может показаться, что название вашей книги «Визуальный подход к веб-юзабилити» это оксюморон. Что бы вы сказали, если бы вас спросили: разве не юзабилити больше относится к сфере практического использованию, а визуальный дизайн к хорошему внешнему виду?

Люк Роблевски: Сперва, давайте разберёмся, что такое «практическое использование». Когда вы заходите на веб-сайт, вы читаете текст, переходите от одного пункта меню к другому, разглядываете картинки, просматриваете списки и заполняете формы. На протяжении всего этого времени вы пользуетесь своим зрением, которое позволяет понимать смысл того, что отображается на экране, поскольку все элементы сайта представлены визуально (за исключением, конечно, если вы пользуетесь скрин-ридером).

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

Таким образом, с помощью визуального представления вы можете сообщать своим пользователям основной смысл. Отвечая на вопрос «Что это?», мы говорим о применимости. Отвечая на вопрос «Как этим пользоваться?», мы говорим о пригодности (usability).

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

Почему вы считаете, что две эти темы (пригодность и визуальный дизайн) часто не ассоциируются друг с другом?

Кёрт Клонингер (Curt Cloninger) уже писал о том, что эксперты по юзабилити свалились с Марса, а графические дизайнеры с Венеры¹, думаю, что в этой шутке, на самом деле, только доля шутки. Хотя, честно говоря, я думаю тут дело в том, что большинство людей совершенно не разбираются в том, каким образом наше сознание осмысляет то, что мы наблюдаем глазами. В результате, часто люди относят юзабилити к сфере «практического использования» - если использовать ваш термин – вместо того чтобы задуматься о том, насколько визуальная коммуникация помогает облегчить использование функционала сайта.

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

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

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

Однажды вы сказали, что «визуальный дизайн можно рассматривать, как переплетение между собой двух частей: визуальной организации и индивидуальности». Почему вы даёте именно такое объяснение визуальному дизайну? Что полезного могут извлечь дизайнеры из этого различения?

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

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

Я сознательно пытаюсь отделить обсуждения индивидуальности от обсуждений визуальной организации, чтобы различать субъективное принятие решений от решений, которые основываются на испытанных и надёжных принципах. Как я уже упомянул, выбор цветов и шрифта, которые составляют индивидуальность сайта, имеют мощный потенциал коммуникации. Они требует персональной, субъективной реакции. Именно поэтому обсуждения визуального дизайна часто уступают место разговорам на тему предпочтений, типа: «Мне не нравится оранжевый».

Если на мгновение отвлечься от этой поверхностной животной реакции на индивидуальность веб-сайта, то можно было бы демонстрировать, как применялись основные принципы восприятия и визуальной организации для достижения конкретных бизнес-целей или же потребностей пользователя. К примеру, «Согласно результатам нашего исследования, большинство пользователей ищут на этой странице данную информацию. В результате, она получает наибольший визуальный вес на этой странице – что достигается путём сильного контраста с фоном». Чтобы правильно понять суть решений, которые предлагают визуальные дизайнеры, чтобы подчеркнуть для пользователя взаимосвязи между разными частями содержания, необходимо отказаться от субъективного взгляда, который присутствует во многих дизайнерских обзорах. Это может помочь дизайнерам лучше объяснить и продать свой подход.

У каждого ли сайта есть индивидуальность? Какие элементы дизайна создают хорошую индивидуальность и каким образом дизайнер может уловить индивидуальность своего сайта (или чего бы то ни было)?

Всё на свете имеет индивидуальность, хочет оно этого или же нет. Исследования Байрона Риверса (Byron Reeves) и Клиффорда Нааса (Clifford Naas) из Media Equation демонстрируют, что мы наделяем индивидуальностью даже наши телевизоры, компьютеры и прочие формы медианосителей. С тех пор, как Интернет стал ещё одним видом медиа, каждый сайт который мы создаём, также, несомненно, имеет свою индивидуальность.

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

Я не считаю, что вопрос в том, как создать «хорошую» индивидуальность. Скорее можно говорить о «соответствующей» индивидуальности. Соответствующая индивидуальность легко запоминается, отражает суть вашего бренда и поощряет дальнейшей участие. Обратите внимание на индивидуальность веб-сайта Apple и его подборку цветов, шрифтов и вообще макет. Сайт стремиться воплотить образ «классной, лёгкой в использовании технологии» и его индивидуальность удачно отражает это.

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

Всвязи с успехами таких не особенно изощрённо оформленных сайтов, как Craigslist, MySpace и Del.icio.us, ведётся множество дискуссий на тему «кривого дизайна». Почему этот кривой дизайн работает? Какой урок мы можем извлечь из их успеха?

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

Пренебрегая визуальным дизайном, видя в нём лишь возможность сделать сайт более или менее красивее, вы теряете одну из возможностей общаться со своими клиентами. Как я уже говорил, дизайн больше относиться к коммуникации, чем к стилизации.

Популярность сайтов типа Craiglist и Del.icio.us зиждется на их содержании. Вопрос лишь в том, насколько нравится их аудитории пробираться через нескладную графику сайта и неудобочитаемый текст? Думаю, не очень но, тем не менее, индивидуальность содержания – оно может быть ценным, прикольным, стоящим и прочее – убеждает закрывать глаза на всё остальное. Обрадовалась бы аудитория если бы индивидуальность представления более соответствовала индивидуальности содержания? Несомненно. Ведь содержание им нравиться, не так ли?

Текст представлен World Web Studio. World Web Studio - web-communications partner. Успешный опыт работы 2000-2008. Самое крупное web-коммуникационное агентство в Украине. Полный цикл услуг - адаптация ИМК для web - комплексный web-development - реклама и продвижение брендов в web. Более 500 реализованных проектов. Принципы работы: креативность, технологичность, эффективность. www.worldwebstudio.com