Веб-дизайн

Определение поверхности

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

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

Возможно, вы думаете, что визуальный дизайн целиком сводится к эстетической стороне дела. У каждого свой вкус и свои представления о том, что такое визуально привле­кательный дизайн, поэтому за любыми доводами, касаю­щимися дизайнерских решений, стоят личные предпочте­ния, верно? Конечно, чувство прекрасного у каждого свое, но это не означает, что решения по поводу визуального ди­зайна должны быть основаны на том, что кажется «класс­ным» каждому из участников дискуссии.

Всемирная паутина как программный интерфейс

Всемирная паутина как гипертекстовое информационное пространство

Компоновка

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

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

Следуйте за взглядом

Один из самых простых способов оценить визуальный ди­зайн страницы - ответить на такие вопросы: Куда в пер­вую очередь направляется взгляд? Какой элемент дизайна первым притягивает внимание пользователя? Направлено ли оно на что-то важное для стратегических целей сайта или первый объект, попадающий в поле зрения, отвлекает пользователя от его (или ваших) целей?

Исследователи применяют сложное оборудование, отсле­живающее движение зрачков (eyetracking), когда хотят точно знать, на что смотрят испытуемые и как их взгляд перемещается по странице. Однако в целях оптимизации визуального дизайна страницы вы можете просто поспра­шивать других людей или даже самого себя. Такой подход

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

Затем постарайтесь определить, куда направляется взгляд. Если в качестве испытуемого вы используете самого себя, обратите внимание на непроизвольные движения глаз. Не особенно задумывайтесь о том, на что вы смотрите, просто дайте взгляду естественно перемещаться по странице. Ес­ли испытуемым является кто-то другой, попросите его на­зывать элементы страницы в том порядке, в каком они привлекают внимание.

Вы обнаружите, что, вообще говоря, движение глаз у раз­ных людей происходит по практически одинаковым траек­ториям - ведь это движение бессознательно и инстинктив­но. Когда кто-то сообщает вам, что его взгляд следует по нетипичной траектории, это, скорее всего, означает, что он не осознает действительное движение глаз или говорит вам то, что вы, по его мнению, хотите услышать (или и то, и другое сразу).

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

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

• Во-вторых, она предлагает пользователю своего рода «экскурсию» по странице, раскрывая имеющиеся воз­можности, но не перегружая его подробностями. Есте-

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

На визуально нейтральном макете (вверху слева) нет выделяющихся частей. Можно использовать контраст для ведения взгляда пользователя по странице (вверху справа) или привлечения его внимания к нескольким ключевым элементам (внизу слева). Злоупотребление этим приемом создает впечатление замусорен - ности (внизу справа).

Движение взгляда пользователя по странице не является случайным. Оно определяется сложным набором глубоко

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