Top.Mail.Ru
Колонки

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

Колонки
Дина Мильштейн
Дина Мильштейн

Руководитель отдела дизайна в ИТ-компании True Engineering

Елизавета Шатохина

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

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

 

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

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

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

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

 

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

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

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

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

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

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

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

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

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

 

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

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

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

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

 

 

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

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

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

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

 

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

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

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

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

 

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

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

 

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

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

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

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

Подписывайтесь на наш Telegram-канал, чтобы быть в курсе последних новостей и событий!

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter

Материалы по теме

  1. 1 Интерактивные сайты: что это такое и как они решают задачи бизнеса
  2. 2 Советы бизнесу: как сформулировать задачу для дизайнера, чтобы получить качественный результат
  3. 3 Как провести аудит мобильного приложения
  4. 4 Дизайнеры смогут получить оценку работ от экспертов CreativePeople и Red Collar
  5. 5 Из дизайнера в инженеры: как спроектировать сложный интерфейс, если никто не знает, что должно получиться в итоге
ArtTech — карта разработчиков арт-технологий
Все игроки российского рынка технологий для искусства
Перейти