Пользовательский интерфейс (UI) — это «оболочка» приложения, которую пользователь видит каждый день. Эффективность работы юзера напрямую зависит от того, насколько логичный и качественный UI. Руководитель отдела дизайна ИТ-компании True Engineering Дина Мильштейн рассказала, как сделать удобный и красивый интерфейс технологического продукта.
Что такое технологический продукт
Технологический продукт — это тот, что существует для потребителя в цифровом мире. Например, маркетплейс, приложение для заказа такси, платформа для онлайн-обучения.
Продукт может быть ориентирован на широкие массы. Тогда мы учитываем возможности и особенности потенциальной аудитории в целом: возраст, место жительства и т. д. Но продукт может быть ориентирован на более узкую группу людей. Например, на сотрудников компании металлургического завода. Если мы создаем мобильное приложение для работников автотракторного цеха, он должен учитывать особенности их работы и решать конкретные задачи.
Для каждой аудитории существуют свои особенности создания UI. Положительный пользовательский опыт и лояльность юзеров к компании напрямую зависят от удобства и простоты использования вашего приложения. Большинство наших примеров — про то, как создавать специализированный цифровой продукт, который является ежедневным рабочим инструментом.
Что учитывать при создании пользовательского интерфейса
Не усложнять вещи, которые должны быть простыми
Начинка у продукта может быть «интеллектуальнее» пользовательской части и забирать на себя сложности, ограничения, правила, бизнес-логику, а пользователю оставлять простые шаги.
Рассмотрим пример графического терминала для авиакомпании S7. Продукт создан для кассиров. Пользовательский интерфейс приложения сделан во многом по тому же принципу, что и сайты для покупки авиабилетов для обычных пользователей. Но кассирам доступно больше опций, чем покупателям. Они могут работать в приложении более свободно.
Основная задача при работе с терминалом — это быстрая выписка авиабилетов и дополнительных услуг на борту. Кассир должен зайти в интерфейс, создать бронирование, найти подходящий для пассажира рейс. Далее, продать дополнительные услуги: багаж, специальное питание. В завершении выписать готовую квитанцию и билет.
Раньше UI терминалов были больше похожи на командную строку для написания программного кода. При этом кассир мог совершать любые действия на свое усмотрение. Для этого нужно было быть очень опытным и знающим специалистом, иначе возникали ошибки. Далеко не все могли учесть скрытые нюансы.
Сейчас сценарий выписки билета разложен по шагам. На каждом из них нужно сделать только одно действие: система проверяет, подстраховывает и предлагает только доступные варианты. Все как для обычных пользователей.
Успешный продукт — это столько информации, сколько нужно для принятия решения. Сложную начинку нужно делать простой. Вместо чтения мануалов специалист должен сразу зайти в продукт и начать с ним работать.
Изучать свою аудиторию
При проектировании макетов нужно брать во внимание не только верхнеуровневые задачи от владельцев бизнеса, но и более «приземленные» — от тех пользователей, которые работают с интерфейсом каждый день.
К примеру, при создании UI сервиса командировок мы предположили, что работникам будет удобнее прикладывать чек в хронологическом визарде командировки, где будет хорошо видно, куда вписывать питание, а куда – транспорт, проживание.
При подробном изучении пользователей выяснилось, что чеки они прикладывают не сами. Причем, заливают все документы разом, и им хронологический визард не нужен. Для них гораздо удобнее завести чеки списком, не разбираясь, что за питание, а что за проживание.
Брать во внимание обстоятельства использования продукта
Вот мы собрали весь пул нужной нам информации, следующий этап — спроектировать макеты.
В страховом приложении мы проектировали раздел для оформления ДТП. Мы понимали, что когда пользователь попадает в ДТП, ему нужно точно знать, как действовать. Неважно, в какой ситуации оказался человек: посередине дороги среди ездящих машин, на холоде или на слепящем солнце, в стрессе или в спешке.
Пользователь не должен догадываться, что скрывается за яркими картинками, тонкими эстетичными серыми шрифтами или логическими развилками. Главное — точное понимание информации, что написано или изображено на экране. Мы учли это и сделали раздел не таким визуально, как все остальные в приложении: оставили минимум простых шагов, добавили четкий крупный текст и сформулировали однозначные фразы.
Говорить с пользователем на одном отраслевом языке
Если приложение рассчитано на профессионального пользователя, тексты должны быть написаны под него. Надо сделать так, чтобы терминология не отличалась от профессионального контекста: сокращения, сленг, словосочетания должны быть именно такие, как пользователи сами читают, пишут и говорят.
Если в коммерческих приложениях для массового потребителя мы избегаем сложные термины, то в специализированных приложениях нужно оперировать всеми терминами в полном объеме — так, чтобы пользователь прошел все шаги своей работы на одном дыхании.
С другой стороны, стоит помнить, что всегда есть новичок, который только-только начал знакомиться с приложением. Наша задача — ему помочь с ним разобраться. Для этого можно создать полноценный help-центр с часто задаваемыми вопросами.
Бесшовно переключаться между смежными продуктами
Когда мы пересаживаемся с MacOS на Windows, то чувствуем дискомфорт: вроде функционал одинаковый, но работает все по-разному. В такой ситуации человек начинает концентрироваться не на работе, а на поиске нужного функционала. Поэтому все элементы в экосистеме бренда — цвета, шрифты, любые иконки, уведомления, должны быть отрисованы по единому принципу. Все должно быть предсказуемо.
Думать про удобство, не забывая про красоту
Утилитарность подхода к созданию специализированных приложений намекает на то, что удобство влечет за собой некрасивое визуальное воплощение. Мы считаем, что даже обычная таблица может быть и эстетичной, и наглядной.
Интерфейс приложения — это часть пользовательского опыта, который формирует отношение к бренду. Создаем мы упаковку сендвича или экран для регистрации пассажиров — важно помнить, что мы делаем это для людей, которые хотят выполнить свою работу беспроблемно и эффективно.
Фото на обложке: Freepik /
Нашли опечатку? Выделите текст и нажмите Ctrl + Enter
Материалы по теме
-
Пройти курс «Самое важное o 115-ФЗ»
- 1 Что такое автоматизированное тестирование, зачем нужно и какие проблемы могут возникнуть при внедрении
- 2 5 фреймворков для построения дизайн-процессов в компании
- 3 Клиентский опыт (Customer Experience): основные компоненты, метрики для анализа, стратегия управления
- 4 Как сделать тёмную тему в приложении: пошаговая инструкция с примерами
ВОЗМОЖНОСТИ
28 января 2025
03 февраля 2025
28 февраля 2025