Визуальный дизайн: страничная иерархия продукта (продолжение) (original) (raw)
Люк Роблевски (Luke Wroblewski) автор книги «Разглядывая сайт: Визуальный подход к веб-юзабилити» (Site-Seeing: A Visual Approach to Web Usability), которая посвящена тому, как с помощью визуального дизайна повысить пригодность сайта к использованию. Люк ведёт блог Functioning Form о различных сторонах дизайна.
Джош Потер из User Interface Engineering беседует с Люком на тему роли дизайна. Вот вторая часть беседы:
UIE: Вот вы пишите, что людям легче воспринимать содержимое веб-страницы, если она выражает чёткую иерархию элементов или доходчивый и упорядоченный поток информации. Какие техники вы могли бы порекомендовать дизайнерам, желающим работать со страничной иерархией? Бывают ли случаи, когда чёткая иерархия нежелательна?
Люк Роблевски: Эффективная страничная иерархия должна быть привязана к потребностям пользователя. Первым делом, когда я начинаю разработку страничного дизайна, я прислушиваюсь к тому, чем люди хотели бы заниматься на этой странице и что они хотели бы на ней видеть, то есть, её предназначение и контекст, а затем расставляю приоритеты. Имея перед собой такой список приоритетов, я прорабатываю его сверху вниз, присваивая каждому из элементов меньший или такой же визуальный вес, что и у предыдущего элемента. Это помогает удостовериться, что между ключевыми элементами страницы достаточный уровень контраста.
Слишком часто содержимое веб-страницы выглядит совершенно одинаково и пользователи не могут понять с чего им начинать. Или же наоборот – детали страницы настолько разнообразны, что пользователь начинает шарахаться от одного элемента к другому, каждый из которых пытается привлечь к себе внимание. Эффективная иерархия подразумевают ровно такое различие между элементами, которое позволило бы провести пользователя по странице в предопределённой последовательности.
Единственный случай, когда я не рекомендую использовать чётко выраженную иерархию, это когда сайт предназначен для бессистемного исследования. В этом случае, равнозначная визуальная важность каждого из функциональных элементов, а также содержания будет способствовать продолжительному исследованию страницы. Это хорошо работает для сайтов, у которых все элементы переплетены между собой, в отличие от сайтов с более жесткой структурой.
Вы упомянули такие сайты, как Craigslist и MySpace [часть 1] и, я думаю, что там вы встретите гораздо меньше визуальной иерархии, поскольку доминирующей деятельностью пользователя там является исследование. В этом случае, если всё содержание и каждый элемент функционала будут иметь одинаковый визуальный вес, это будет больше способствовать постоянному исследованию. Однако, слабовыраженная визуальная иерархия приведёт к плохим последствиям для сайта, который предназначен для каких-то конкретных задач. В этом случае, просто необходимо подчеркнуть иерархию, чтобы доходчиво передать способ выполнения задачи. Текучий, однотонный дизайн MySpace окажется катастрофой для сайта, который продаёт авиабилеты.
Как изменилось отношение к визуальному дизайну с появлением таких приложений, как Rich Internet Applications и AJAX? Поставило ли это перед дизайнерами какие-нибудь новые задачи?
По мере того, как сайты открывают такие возможности интерактива, которые ранее были доступны только в десктопных приложениях, мы должны быть уверенны, что пользователи о них знают и понимают, как ими пользоваться. Например, такой вариант взаимодействия, как заполнение формы, не требует со стороны пользователя какого-то иного типа поведения. Достаточно просто вводить текст, а в случае необходимости, появятся какие-нибудь рекомендации.
Однако, те дополнительные возможности интерактива, которые открывает, например, Ajax, не всегда можно вовремя обнаружить даже там, где они могли бы пригодиться. Дело в том, что такие опции, как щелчок правой кнопкой и перетаскивание объектов совершенно не видимы, поскольку не предусмотрены веб-браузерами. Именно поэтому нам необходимы эффективные средства коммуникации, которые помогали бы нам выражать через интерфейс то, какие возможности есть у пользователя и как их использовать.
Сейчас многие сайты решают эту задачу с помощью кнопки «Помощь», которая вызывает пояснительный текст. Думаю, что со временем выработается какой-то стандартный визуальный язык, который будет сообщать возможность дополнительного интерактива.
Возьмите, к примеру, иконку шоппинг-карты. Ни один Интернет-магазин не даёт никакого вспомогательного текста, который бы объяснял, на что она указывает. Просто, со временем, это обозначение вошло в стандартный Интернет-лексикон.
Какие распространённые грабли следует избегать из тех, что могут встретиться при работе над редизайном сайта?
Лично я, занимаясь оформлением сайта, слишком много внимания уделяю графике. По мере того, как я отображаю визуальную иерархию, о которой говорилось ранее, у меня получаются более уникальные визуальные решения, чем требуется на самом деле. В этом случае, бывает полезно заново проанализировать элементы на странице и если необходимо, придать большей визуальной согласованности и однородности, тем из них, которые между собою как-то связанны.
Также, очень полезно смотреть на визуальный дизайн с точки зрения самого необходимого. Действительно ли нужен какой-то особенный фон, размер и цвет шрифта и эффект тени чтобы лучше выразить содержание? Насколько я замечаю, в большинстве случаев происходит сверхдизайн, используется слишком много разных цветов и графических элементов, в результате всё сливается в общий визуальный шум.
Если убрать второстепенные детали, то станет легче понять, какие являются самыми важными. Всё, что не прибавляет дополнительной ценности должно быть удалено. То есть, я бы посоветовал избегать переизбытка визуальных деталей и стремиться к минимальному количеству выразительных элементов.
Насколько необходимо привлекать опытного художника-графика чтобы разработать для сайта хороший визуальный дизайн? Есть ли какие-то вещи, которые выглядят впечатляюще и вместе с тем не требуют большого мастерства?
Большинство, начинают изучения визуального дизайна с того, что открывают Photoshop или другой какой редактор изображений и перетаскивают туда-сюда по экрану разные картинки и цвета. Очень редко, кто-нибудь уделяет время изучению основных принципов эффективной визуальной коммуникации. Самый лучший способ начать развивать свой дизайнерский лексикон, это изучить, каким образом люди осмысляют то, что они видят. Однако, даже изучив всю теорию, как и для любого мастерства, останется необходимость в практическом опыте.
Вы рекомендуете нанимать визуального дизайнера, в постоянные сотрудники?
Я рекомендую взять на полную занятость человека, который компетентен в вопросах разработки визуального дизайна для веб-сайта настолько, чтобы самому этим заниматься или же руководить человеком, который сможет это делать – не важно, как мы его назовём – интерфейс-, интерактив- или веб-дизайнером. Я говорю это поскольку, в большинстве случаев, веб-сайт не должен ограничиваться простой информационной навигацией.
Веб-приложения позволяют людям общаться между собой, например, чтобы вместе участвовать в какой-то работе или же просто создавать и делиться контентом. Подобное взаимодействие требует полноценного понимания поставленной задачи, информационной архитектуры и многого другого. Задача вашего дизайнера в том, чтобы осознать задачу во всей её полноте и реализовать её с помощью серии веб-страниц и/или же элементов пользовательского интерфейса. Если этот человек способен воплотить решение этой задачи визуально – значит, тем лучше. Если же нет, тогда необходимо подключить к работе того, кто может это сделать.
На что следует обращать внимание менеджер, при приёме на работу визуального дизайнера?
В первую очередь, человек должен иметь представление об основных принципах визуального дизайна и уметь применять их на практике. Как я уже говорил [часть 1], чтобы объяснить инвесторам и коллегам, почему было использовано определённое визуальное решение, необходимо уметь работать за рамками субъективного восприятия визуального дизайна.
Во вторую очередь, человек должен быть хорошо подкован в продакт-дизайне. Да, конечно, эстетическая сторона занимает существенную часть продакт-дизайна. Однако, он ею не ограничивается. Тот визуальный дизайнер, который имеет опыт или хорошо разбирается в бизнесе, инженерии, юзабилити или информационной архитектуре сможет применить эти знания в продакт-дизайне. Это особенно важно понимать, поскольку визуальный дизайн продукта напрямую зависит от интерактивного дизайна, информационной архитектуры и бизнеса. Чем лучше визуальный дизайнер может вникнуть в задачи вышеперечисленных дисциплин, тем удачнее он сможет реализовать их принципы в работе с клиентом.
Оригинал:
uie.com
Перевод с английского:
Роман Равве