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

Мы собрали 11 советов, которые помогут спроектировать интерфейс, решающий задачи пользователей.

Учитывайте потребности аудитории

Графический дизайн — тонкое искусство, где нет предела совершенству. Чтобы сделать крутой проект, необязательно иметь 10-летний опыт работы в «Фотошопе».

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

90% дизайнеров идут следующим путем:

1. Вспоминают, каким софтом они пользовались.
2. Смотрят примеры интерфейсов на популярных ресурсах вроде Dribbble, Behance, Awwards.
3. Делают несколько вайрфреймов в сервисе или рисуют «скелет» от руки.
4. Утверждают наброски.
5. Переходят к реализации «чистовика».

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

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

Анализируйте конкурентов

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

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

Как анализировать конкурентов:

1. Найдите лидеров ниши. Анализируйте русскоязычные и зарубежные источники. Если надо создать сайт, отправляйтесь в выдачу поисковых систем. Для приложения главными источниками являются контентные маркетплейсы Google Play, App Store.
2. Протестируйте UI. Выпишите на листочек сильные и слабые стороны. Проанализируйте 3-5 примеров по теме, затем соберите данные воедино.
3. Уделите внимание нестандартным фишкам. Главная задача любого интерфейса — привлечь внимание пользователя. Если удастся его заинтересовать, он заполнит форму, подпишется на рассылку по электронной почте и выполнит другие действия. Посмотрите, чем привлекают аудиторию конкуренты. Возможно, это креативная анимация, нестандартные модули или необычные виджеты.
4. Используйте полученную информацию с выгодой для себя. Анализ помогает выбрать направление и даёт точку опоры. Первое желание, которое возникает у дизайнера с недостатком идей — посмотреть, как сайт или приложение сделали коллеги.

Используйте инструменты прототипирования

В прошлой статье мы говорили о почти неизвестном понятии wireframe. Это черно-белый набросок будущего UI. Не будем ещё раз рассказывать о важности создания черновых вариантов. В материале, по ссылке выше, есть множество аргументов. Скажем только, что дополнительный прототип не будет лишним.

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

Делайте несколько вариантов

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

Чтобы избежать подобных ситуаций, воспользуйтесь нашими советами:

1. До создания проекта согласуйте с заказчиком нюансы и уточните, что предварительно надо будет одобрить прототип.
2. После завершения работы над вайрфреймом ждите обратной связи.
3. Разработайте несколько вариантов UI на основе утвержденной схемы.

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

Конечно пользовательский интерфейс — это не 5 вариантов логотипов, которые можно отрисовать за несколько часов. Никто не говорит, что надо создать 3 варианта для 5-страничного сайта. Обычно в этих случаях футер и хедер остаются постоянными во всех разделах. Меняется только область контента.

Уделите время типографике

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

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

Важные правила:

1. Используйте меньше шрифтов. В идеале 1, максимум 2-3. Главное, чтобы в тексте была гармония. Посмотрите на контент со стороны, если диссонанса нет — выбор сделан правильно.
2. Забудьте о центрировании. Не нужно выравнивать весь текст по середине. Этот подход не имеет ничего общего с перфекционизмом. Вспомните о сетках и направляющих. Когда каждый элемент на своём месте интерфейс кажется родным.
3. Соблюдайте баланс декоративных элементов. Завитки, кружочки выглядят необычно, но надо использовать их с умом.
4. Следите за размерами. Некоторые дизайнеры расставляют акценты с помощью увеличения. Они делают заголовок большим и добавляют полужирный эффект, абзацы при этом выглядят маленькими и незаметными. Хотя в них обычно больше полезной информации.

Продумайте сценарии взаимодействия

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

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

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

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

Выберите минималистичность

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

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

Секрет успеха минимализма в простоте. Зачем использовать 10 блоков, если можно разработать логическую структуру и объединить их в один. Юзеры ценят заботу и экономию времени. Чем быстрее они получат то, зачем пришли, тем лучше.

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

Отдайте контроль пользователям

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

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

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

Проверьте юзабилити

Удобство и логичность — два важных критерия, которые влияют на user experience. Сайт или приложение могут быть супер креативными, но если есть проблемы с юзабилити, контент пройдёт мимо получателя.

Советы:

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

Раскрывать информацию надо по шагам. Процесс можно представить, как чтение книги. Когда она написана легко и последовательно, от повествования сложно оторваться. Если удастся сделать UI с таким же эффектом, успех гарантирован.

Предусмотрите обратную связь

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

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

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

Не забудьте про адаптивность

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

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

Благодаря существованию онлайн-редакторов вроде Figma, работа с адаптивным интерфейсом сильно упрощается. Теперь необязательно знать все разрешения. Создали базовый вариант, выбрали инструменты проверки адаптивности и занимаетесь исправлением ошибок.

Искусственный интеллект ещё не научился делать всю работу за дизайнеров, но некоторые задачи легко автоматизировать. Работа с responsive design в «Фигме» пока далека от идеала. Разработчики платформы активно прислушиваются к пожеланиям аудитории и внедряют новые фишки. Через пару лет сервис станет ещё более удобным.

Поручите создание интерфейса опытным дизайнерам веб-студии IDBI. Мы проанализируем аудиторию вашего продукта, конкурентов и вместе создадим графическое воплощение вашей идеи.