Проектирование интерфейсов как процесс достижения цели

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

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

Интерфейс как цель

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

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

Таким образом интерфейс над которым работает дизайнер (правильнее назвать продукт) нужно рассматривать как цель к которой нужно прийти. А для любой цели важно детальное описание благодаря которому формируется четкое видение будущего результата, иначе подсознание человека не поймет…

Работа подсознания

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

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

Три уровня дизайна

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

Для начала нужно понять, что любой интерфейс, будь это интерфейс программы, веб-приложения, сайта, мобильного приложения и так далее (речь о программных интерфейсах) нужно рассматривать как некий продукт который решает определенную задачу, или набор задач. Кроме того продукт этот интерактивный и динамичный а это значит, что он может пребывать в различных состояниях, то есть изменяться под воздействием неких сил. Такой силой, в основном, является пользователь… К чему это я? А к тому, что продукт получается весьма сложно устроенный, не смотря на его внешнюю простоту. У такого простого элемента интерфейса как кнопка может быть 5 состояний которые отражают 5 различных способов взаимодействия с ней. Если умножить количество элементов на одном экране на общее количество экранов и еще умножить на количество состояний элементов, а потом вспомнить о том, что все эти состояния должны быть связаны логикой которая должна быть понятной пользователю, который не хочет разбираться в логике, а хочет быстро решить свою проблему мы поймем, что перед интерактивным дизайнером стоит задача весьма нетривиальная, я бы даже сказал сложная. А что нужно делать со сложными задачами? Правильно, их нужно разделить на более простые подзадачи.

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

Дизайн продукта

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

1. Определить конечные цели и потребности проекта (бизнеса) и область работ (сайт, приложение, программа и т. д.).
2. Исследовать кто конечный пользователь продукта, каковы его цели и потребности, с какими проблемами сталкивается сейчас.
3. Описать персонаж пользователя на основе полученных данных и держать его перед глазами в течение всей работы над проектом.
4. Изучить уже существующие решения и конкурентов, если таковые есть.
5. Сфокусироваться на проблемах и сгенерировать идеи на основе которых будут писаться сценарии.
6. Описать будущий опыт работы с продуктом с помощью пользовательских сценариев и сторибордов. Нужно охватить все ключевые сценарии, должно быть понятно как работает продукт, но без детализации. Именно со сценариев начинается проектирование интерфейса.
7. Сделать первые концептуальные наброски.

Пример типичного пользовательского сценария

Дизайн взаимодействия

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

1. Определить технические ограничения исходя из специфики продукта (сайт, приложение, программа и т. п.).
2. Выявить и записать все сценарии использования (метод скоростной фиксации).
3. Составить диаграммы потоков задач опираясь на ключевые пользовательские сценарии. Диаграмма отображает алгоритм работы, шаги которые должен пройти пользователь для достижения цели по каждому сценарию.
4. Используя сценарии использования и диаграммы потоков задач составить информационную структуру продукта (разбивка по экранам/страницам).
5. На основе сценариев, диаграмм потоков задач и структуры описать функционал и информационное наполнение для каждого экрана/страницы.
6. Разработать прототипы будущего продукта. Чем больше вариантов прототипов тем лучше.
7. Провести эвристическую оценку интерфейса используя 10 эвристик Якоба Нильсена.
8. Провести тестирование прототипа на основе ключевых сценариев использования. Внести исправления, при необходимости.
9. Составить карту переходов используя экраны прототипов.

Пример прототипа интерфейса в виде карты переходов

Дизайн графического интерфейса

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

1. Определить общее настроение и тон визуальной и текстовой коммуникации.
2. Определить стиль визуального оформления.
3. Проработать несколько вариантов графического оформления для ключевых экранов. Выбрать один и проработать все экраны.
4. Подготовить графику для вёрстки и руководство для программистов.
5. Проверить результаты работы программистов.

Макеты будущего продукта высокого разрешения

Заключение

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

Хочешь изучить UX/UI Design и научиться проектировать сайты и приложения?

Приходи на онлайн-курс, который помогает изучить методику и прямо во время обучения сделать проект для портфолио. Зписывайся на курс по ссылке 👉 https://hyperschool-digital-product-design.webflow.io/