Найти дизайн-решение для продукта — практическое руководство

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

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

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

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

Формулировка тезисов может помочь задать направление и описать возможные дизайн-решения. И такие решения будут глобальными — то есть касаться сайта или продукта в целом. Более детальные определения возникнут позже. Хотя вы ещё обнаружите, что некоторые тезисы могут быть вполне конкретными и служить опорой при выборе направления.

Три типа тезисов в отношении направления дизайна:

• Принципы определяют, что должен и что не должен решать дизайн. Эти тезисы, как правило, базируются на исследованиях. А если их можно привязать к исследованиям, тогда их можно считать заключениями.
• Концепты определяют глобальный подход к продукту, который выражается как центральная тема или идея.
• Модели описывают продукт абстрактно, показывая лежащую в основе структуру, процесс или подход. Они показывают, как будет работать продукт (до запуска функциональности).

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

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

Можно продемонстрировать такой подход через дизайн шаблона экрана, показав на нём сообщение со словом «Спасибо!» вместо слишком формального «Благодарим вас» или чересчур фамильярного «Красавчик!».

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

Применяя то или иное решение, вы не просто спрашиваете себя: «Будет ли это работать?», — вы также задаётесь вопросом: «Достаточно ли у меня знаний, чтобы понять, будет ли это работать?». То есть всего один шаг на пути решения проблемы может открыть какую-то дополнительную информацию или, наоборот, вызвать больше вопросов. В результате команда сможет ориентироваться на полученные данные при определении направления развития продукта.

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

В индустрии не существует стандартов о том, как формулировать принципы дизайна. Поэтому вы не нарушите никаких предписаний, если примените графики или представите всё в форме диалога. Однако традиционно принцип — это одно предложение, как правило, выраженное в повелительном наклонении.

Мне нравятся эти принципы, однако они не относятся к определённому продукту или компании. Между тем принципы наиболее сильны, когда актуальны для конкретного продукта.

Иногда принципы состоят из одного или двух слов, как будто завершающих выражение: «Принцип ...».

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

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

Например, я формулирую принципы как прямое следствие того, что мы выяснили в результате исследований. Я отдаю предпочтение заключениям, потому что именно они выглядят наиболее логично: «Мы узнали, что пользователи часто теряются в системе. Заключение здесь состоит в том, что в приоритете у UI-дизайнера должно быть прояснение контекста».

Заключения отвечают на вопрос: «Ну и что?». Ведь после того, как вы соберёте много данных, вам потребуется объяснить, почему все они важны. Обычно я фиксирую такую информацию в табличке, которая содержит вопросы по проекту, ответы, которые я нашёл, и заключения, к которым мы в итоге пришли.

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

Для формирования принципов дизайна не существует стандартов. Хотя в интернете и в книгах можно найти массу предложений. А я приведу несколько своих.

Принципы должны максимально подходить для определённого продукта. «Легко использовать» — не слишком действенный принцип, потому что его можно применить ко всему на свете.

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

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

Хорошие принципы бросают прямой вызов дизайнерам — они вынуждают ещё раз взглянуть на свою работу. Да, принципы заставляют немного понервничать.

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

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

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

Конкретный и провокационный принцип может восприниматься как удар хлыстом: «Делай это, причём делай именно так». Но по-настоящему хороший принцип одновременно вдохновляет, показывает ещё более амбициозные цели. Он открывает возможности, подталкивает к исследованиям.

Резюмируя выступление Стефана Хофнагельса из Microsoft в 2009 году, Люк Вроблевский пишет: «Цели — это вершины гор, на которые вы пытаетесь забраться. Принципы [дизайна] — это дорога, по которой можно дойти до вершины этой горы».

Один из принципов управления продуктом моего клиента заключался в том, чтобы постоянно сосредотачивать команду на плохих новостях: на всех экранах была информация о том, что сегодня в ИТ-отделе пошло не так, насколько всё плохо и что в связи с этим предпринимается.

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

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

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

Критически важно, чтобы команда принимала непосредственное участие во всех исследованиях — в этом случае она сможет помочь и с написанием принципов. А если команда будет участвовать в создании принципов, она примет их. При этом, когда дизайнеры будут сталкиваться с этими принципами, они так или иначе будут вспоминать о результатах исследования, которые смогут эффективно интегрировать в работу.

Принципы проектирования пользовательского опыта Windows возникли напрямую из исследований. Читая эти принципы, можно практически услышать дословные выдержки из отзывов пользователей:

• Уменьшайте количество концептов, чтобы повысить доверие.
• Мелочи имеют значение — и хорошие, и плохие.
• Будьте крутыми и внешне, и на деле.
• Фокусируйтесь на отвлекающих элементах, а не на возможности найти то, что нужно.
• Персонализация, а не кастомизация.
• Оцените жизненный цикл пользовательского опыта.
• Время имеет значение, поэтому разрабатывайте продукт для тех, кто постоянно в движении.

Вы можете поспорить, что в этих принципах нет конкретики. Однако если принять во внимание размах проекта — целая операционная система, — то можно заметить, что они достаточно провокационные и вдохновляющие.

«Фокусируйтесь на отвлекающих элементах, а не на возможности найти то, что нужно» — это смелое утверждение, поскольку оно предлагает улучшить дизайн, не привязываясь к какому-то определённому решению. Другими словами, оно открывает простор для обсуждения.

Одна из моих самых любимых сцен в «Безумцах» (телешоу о рекламных агентствах в 60-е годы) — это презентация для Kodak в конце первого сезона. Kodak выводит на рынок новый продукт — кольцевой диамагазин, который облегчает хранение и показ фотослайдов. Сотрудники называют его «колесом» и признают: «Да, мы знаем, что колесо — это не впечатляющая технология».

Креативный директор Дон Дрейпер (главный персонаж этого телевизионного шоу) объясняет, что в этом продукте важна не технология — важно установить связь с воспоминаниями и эмоциями. Затем агентство раскрывает свой концепт для этой кампании — это карусель.

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

Если для описания проектора слайдов использовать слово «карусель», то возникшая метафора будет излучать определённый смысл. Слово «карусель» демонстрирует два способа выразить большую идею:

• Какие чувства вызывает продукт: карусель вызывает радость от повторного проживания счастливых воспоминаний.
• Как работает продукт: кружащаяся карусель иллюстрирует хранение и показ слайдов из колеса.

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

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

Также мы тщательно продумали описание того, как именно пользователи будут ощущать безграничную силу вместе с этим продуктом:

• Пользователи должны видеть своевременное обновление статуса.

• У приложения должный быть низкий входной барьер.

• Нужно обеспечить возможность экспериментировать со стилями при создании нового контента.

Мы также описали, что означает фраза «сила и гибкость» с точки зрения пользователя:

• Знание: нужны правильные данные, чтобы пролить свет на неотложные потребности.
• Отзывчивость: возможность немедленно дать ответы на запросы акционеров.
• Исполнение: моментальное включение в работу жизненно важного инструмента.
• Контроль: возможность настроить свой контент так, чтобы он подходил для удовлетворения разных потребностей.
• Комфорт: приложение должно служить продолжением для процесса мышления самого пользователя.

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

Например, корзина — это распространённая метафора, которая часто используется на площадках электронной торговли. Однако её можно использовать не только в этой сфере. Сама идея добавления покупок в корзину — это знакомая метафора, которая передает структуру, лежащую в основе сайта.

Например, мы воспользовались этой метафорой на сайте для определения профориентации: студенты нажимали «добавить профессию в корзину» после проведения оценки.

Существуют и другие проверенные схемы для описания структуры сайта. Для интернет-приложений, помимо корзины, есть ещё два распространенных приема:

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

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

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

• Темы: о чем контент, какова его тематика.
• Действия: какие задачи поддерживает контент (например, продукт для проведения исследований или продукт для определения неполадок).

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

#Интерфейсы