Article by: Luke Wroblewski
Originally published on UXmatters on 03.11.2008
Translated by: Victor Malyy (UX-UA)
Недавно у меня была возможность отреагировать на распространенные заблуждения, касательно роли графического дизайна, которые все еще сильны в умах руководителей высшего звена, менеджерского состава и специалистов по маркетингу.
Есть ли что-то, что укажет на неправильность некоторых утверждений о графическом дизайне? Что члены команды проектирования могут сделать для того, чтобы открыть правду о графическом дизайне для своих коллег и людей, от которых зависит принятие ключевых решений?
Хотя графические дизайнеры могут за время своей карьеры столкнуться со множеством барьеров в разных предметных областях деятельности, существует три из них, с которыми они встречаются чаще всего:
- Графический дизайн – это то, что делает вещи красивыми;
- Выделяющиеся элементы приложения могут улучшить графический дизайн;
- Графический дизайн можно представлять не в цельном виде
Графический дизайн – это то, что делает вещи красивыми
В то время как все думают о том, что команда дизайнеров просто делает элементы продукта симпатичными, существует устойчивое утверждение того, что графический дизайн является серьезным фактором успеха приложения. Говорят, это последний шаг, который вносит ту самую изюминку в продукт и делает его привлекательным.
Вероятно, это заблуждение произрастает из общих представлений людей о дизайне в индустриальном веке – стиль программных продуктов начал создаваться в до этого невозможных способах, и такие дизайнеры как Реймонд Лои (Raymond Lowey), получили признание за их эстетический подход к дизайну еще недавно «бледных» продуктов.
Имея очевидной задачей улучшение эстетики продукта, графический дизайн содержит в себе далеко идущий потенциал коммуникации с людьми. Через визуальную организацию элементов, дизайнеры могут посылать пользователям ключевые сообщения, которые, в то же время, отвечают на их ключевые вопросы:
- Что это?
- Как это можно использовать?
- Почему меня это должно заботить?
Ответы на эти вопросы – это ключевой компонент пользы приложения и удобства его использования, особенно, если речь идет об интерактивных продуктах. Наверное, лучшим способом проиллюстрировать это, будет следующий пример.
На рисунках 1, 2 и 3 присутствует общий набор элементов, характерный для любого веб-приложения. Кроме того, все эти элементы содержат в себе одинаковый набор шрифтов, цветов, градиентов и изображений. Главным отличием этих трех вариантов дизайна является визуальная организация элементов. Это различие показывает три возможных приоритетных варианта использования приложения.
Рисунок 1: изначальный дизайн веб-приложения
На рисунке 1, основной элемент приложения делает легко понятным его основную функцию – поиск информации о клиентах. Вторичными задачами здесь являются возможности редактирования, удаления или дополнения существующей информации пользователем. На рисунке 2 акцент сделан на коммуникации между клиентом и компанией. А уже во вторую очередь пользователь может просматривать, редактировать и удалять информацию о клиентах.
Рисунок 2: то же веб-приложение с иной визуальной организацией элементов
Наконец, вариант приложения на третьем рисунке ставит во главу угла возможность редактировании информации о клиенте. Просмотр информации о контактах, как и отслеживание текущей коммуникации, наоборот, имеют здесь не главное значение.
Рисунок 3: другой подход к визуальной организации элементов все того же приложения
Все эти три варианта визуальной организации приложения обеспечивают уникальные приоритетные действия пользователя: поиск контактной информации, управление текущей коммуникацией с клиентом и редактирование данных о клиентах. Однако в каждом случае набор внутренних элементов оставался тем же – те же цвета, шрифты и изображения.
Очевидно, что графический дизайн делает больше, чем просто превращает приложение в более красивое. Он связан с ключевой функцией приложения – Что это? – также помогая понять как пользоваться этой функциональностью – Как это можно использовать? – в то же время делая приложение эстетически привлекательным.
Можешь сделать это большего размера?
Как уже неоднократно доказано сайтами подобными make my logo bigger, заказчики часто просят визуальных дизайнеров придать выраженности каким-то элементам страниц. В то самое время, когда такие действия оправданы для определения самых важных элементов страницы, они также демонстрируют другое заблуждение о визуальном дизайне: чтобы улучшить графический дизайн веб-сайта, необходимо сделать некоторые его элементы больше, выразительнее, и, например, красными – или, в некоторых случаях, применить все эти способы одновременно.
Удельный «вес» каждого элемента страницы напрямую зависит от того, что его окружает. Поместите большой красный круг на белую страницу, и он привлечет к себе много внимания. Поместите его рядом с десятью розовыми кольцами, и этот эффект пройдет. Таким образом, подчеркивание важности любого элемента страницы, это процесс изменения дизайна в целом, а не каждого элемента в отдельности. Придание отдельным элементам дополнительного визуального веса может сломать всю структуру, а также размыть связи между родственными элементами, приоритетными действиями пользователя и прочим.
Если вы учтете просьбы всех тех, кто хочет сделать что-то “больше и ярче”, у вас есть все шансы для того, чтобы сделать интерфейс с элементами, каждый из которых равнозначно перетягивает внимание пользователя на себя – и, как результат, ни один из этих элементов не будет работать вообще. Заметьте разницы в дизайне страниц загрузки для двух разных браузеров, показанных на рисунках 4 и 5. Firefox имеет явный вызов к действию загрузки браузера, а также остальные элементы страницы, связан
Рисунок 4: страница загрузки Firefox
Страница загрузки Flock’а, показанная на рисунке 5, имеет в себе так много выделяющихся элементов, что команда решила внести целых 4 вызова к действию загрузки браузера – в правом верхнем углу страницы, в нижней части меню, расположенного слева, в правой верхней части горизонтальной новостной панели и в футере. Если бы на этой странице не было так много выделяющихся элементов, Flock вполне мог бы обойтись одной кнопкой для загрузки браузера – как у Firefox.
Рисунок 5: страница загрузки Flock
Графический дизайн можно представлять не в цельном виде
Факторы, делающие подкчеркивание важности некоторых элементов страницы сложным делом без цельного взгляда на ее дизайн, также не способствуют тому, чтобы изменения были изолированны. Однако большинство просьб к дизайнерам сводятся к тому, что необходимо подчеркнуть элементы изолированно: ты бы мог сделать логотип больше? Как насчет поменять цвет этой полосы? Может, попробуем поместить сюда другое изображение?
В то время, как подобные просьбы помогают дизайнерам осознать что же все-таки на самом деле важно для их клиентов и коллег, они в своей сути не учитывают целостный подход, просто необходимый для хорошего дизайна. Изменение цвета может перевести к пересмотру всей палитры сайта из-за того, что, скажем, дизайнер мог предусмотреть данный цвет для подчеркивания каких-то главных пользовательских действий. А изменение изображения может привести ко сдвигу всех окружающих его изображений из-за того, что визуальный центр нового изображения будет уже не там, где у старого. И так далее…
Общий графический дизайн продукта является результатом баланса всех его элементов – это помогает разобраться с предназначением продукта, со способами его использования и его полезностью. Поэтому, когда дизайнер изменяет один элемент, он должен немного изменить и все остальные для сохранения общего визуального баланса. Решения об изолированных изменениях не добавляют ничего нового, а, лишь, разрушают дизайн.
Web-ориентированные продукты особо восприимчивы к изменениям в изоляции. Из-за того, что есть возможность разрабатывать и тестировать отдельные компоненты независимо друг от друга, проектная команда часто совмещает вещи работавшие корректно индивидуально, с допущением того, что они будут работать так же и друг с другом. Рисунок 6 показывает возможные последствия такого подхода.
Возможно, что header этой страницы E-bay отлично показал себя при А/Б-тестировании, логотип PayPal получил хорошие оценки фокус-групп, а рекламная фотография набрала больше всего кликов, но сочетание трех этих элементов не создает эффективного дизайна. А в догонку, многие элементы на этой странице кажутся конкурирующими между собой.
Рисунок 6: главная страница eBay Italy
Будем надеяться, что эти примеры демонстрируют конструктивное опровержение частых заблуждений о роли визуального дизайна. Но убеждение коллег и клиентов в том, что графический дизайн это не стилизация и не выпячивание элементов вперед, может остро требовать вашего собственного опыта, чтобы дать им правдивый взгляд на потенциал визуального дизайна.
Если вы заметили какие-либо заблуждения о роли визуального дизайна в вашей профессиональной жизни, или готовы поделиться положительным опытом, который демонстрирует истины визуального дизайна, сделайте это в комментариях ниже!
Очевидно что графический дизайн делает больше, чем просто превращает приложение в более красивое. Он связан с ключевой функцией приложения – Что это? – также помогая понять как пользоваться этой функциональностью – Как это можно использовать? – в то же время делая приложение эстетически привлекательным.
Автор статьи: Luke Wroblewski
Оригинал статьи опубликован в Uxmatters (03.11.2008)
Перевод статьи: Виктор Малый (UX-UA)
Оставить комментарий