Мнения / Дизайн

Как создать удобный и красивый интерфейс технологического продукта

Главное правило — не усложняйте вещи, которые должны быть простыми

30 ноября 2023, 16:00

5 минут

Как создать удобный и красивый интерфейс технологического продукта

Дизайн

Автор:

Дина Мильштейн

Пользовательский интерфейс (UI) — это «оболочка» приложения, которую пользователь видит каждый день. Эффективность работы юзера напрямую зависит от того, насколько логичный и качественный UI. Руководитель отдела дизайна ИТ-компании True Engineering Дина Мильштейн рассказала, как сделать удобный и красивый интерфейс технологического продукта.

Что такое технологический продукт

Технологический продукт — это тот, что существует для потребителя в цифровом мире. Например, маркетплейс, приложение для заказа такси, платформа для онлайн-обучения.

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

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

Что учитывать при создании пользовательского интерфейса

Не усложнять вещи, которые должны быть простыми

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

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

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

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

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

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

Изучать свою аудиторию

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

К примеру, при создании UI сервиса командировок мы предположили, что работникам будет удобнее прикладывать чек в хронологическом визарде командировки, где будет хорошо видно, куда вписывать питание, а куда – транспорт, проживание.

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

Брать во внимание обстоятельства использования продукта

Вот мы собрали весь пул нужной нам информации, следующий этап — спроектировать макеты.

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

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

Говорить с пользователем на одном отраслевом языке

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

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

С другой стороны, стоит помнить, что всегда есть новичок, который только-только начал знакомиться с приложением. Наша задача — ему помочь с ним разобраться. Для этого можно создать полноценный help-центр с часто задаваемыми вопросами.

Бесшовно переключаться между смежными продуктами

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

Думать про удобство, не забывая про красоту

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

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

Фото на обложке: Freepik / Freepik

Подписаться на телеграм-канал