По своей сути все они являются идеями, опирающимися на техническую и визуальную составляющие. Без одного не может правильно функционировать другое, но именно внешний вид приложений — это то, с чем мы сталкиваемся каждый день. Без правильного, качественного и продуманного UX/UI продукт будет просто неконкурентоспособен, и поэтому крупные компании тратят огромные суммы на разработку дизайна своих приложений.
В том, как она проходит и из каких этапов состоит, нам помог разобраться Денис Элиановский — дизайн-директор компании JTC. Они входят в топ 50 крупнейших поставщиков банковского ПО в России и ведут полный цикл разработки сложных IT-продуктов.
Шаг 1: Первоначальная подготовка
Разработка дизайна приложения — сложный процесс, в котором специалисты должны учесть все возможные пожелания клиента и одновременно с этим сделать задумку функциональной и приятной для глаза. Поэтому начинается всё со сбора данных. Это стратегический момент, который позволяет максимально точно определить цели и будущий фронт работ.
Именно поэтому мало просто один раз встретиться с заказчиком и спросить, чего он хочет. Нельзя просто опираться на визуальные представления руководства — нужно детально изучить специфику будущего продукта, аналоги со стороны потенциальных и прямых конкурентов, предыдущие и текущие версии приложения, если таковые имеются. Для этого JTC подключает собственных бизнес-аналитиков, которые на протяжении длительного времени анализируют все ключевые аспекты бизнеса. Всё это нужно, чтобы по итогу сформировать:
- бизнес-требования;
- стейкхолдер-требования;
- функциональные и нефункциональные требования;
- требования для перехода с имеющейся версии.
Далее следует разработка вайрфреймов. Это первоначальный, сделанный в максимально быстрой манере набросок приложения, позволяющий определить базовую структуру продукта и визуализировать исходный интерфейс.
Основная цель такого наброска — упрощение коммуникации с заказчиком, в ходе которой можно точнее определить функциональные и стейкхолдер-требования. Уже на этой стадии некоторые поставщики ПО, например JTC, начинают проводить UX-тесты.
— Денис Элиановский, дизайн-директор JTC
Количественный/качественный. В первом случае результат может быть массовым и измеримым, например опрос с конкретными вариантами ответов. Качественный же требует более глубокой оценки, содержащей рассуждение и пояснения о проверяемых направлениях (если неудобно, то почему, чего не хватает, как было бы лучше и так далее).
Поведенческий/отношенческий. Первый помогает ответить на вопрос, что и как делает пользователь, позволяя понять, как улучшить имеющийся интерфейс. Второй — понять, что думает пользователь, что ему нравится или не нравится и так далее.
Участие продукта. Это может быть естественное использование, взаимодействие по заранее спланированному сценарию или может быть опрос аудитории о ее предпочтениях, то есть полностью без участия продукта.
Исходя из этих отличий и задач исследования JTC может выбрать самый подходящий метод. Например, проверку концепции, оценку предпочтений, этнографические исследования, сортировку карточек и так далее. Всего в арсенале команды более двадцати методов тестирования.
На основании анализа аудитории и ее поведения пользователи делятся на несколько групп, для каждой из которых создается определенный персонаж. Это может быть: условная бабуля, зумер, молодая мамочка и так далее. Каждый из типажей пользователей досконально прописывается, и под каждого составляется сценарий, по которому тот обычно взаимодействует с приложением. На профессиональном сленге это называется User Story Mapping. В дальнейшем полученные инсайты становятся частью стейкхолдер-требований.
Шаг 2: Подготовка макетов перед передачей программистам
Теперь, когда имеется четкое представление о поведенческих сценариях и определена общая стилистика, нужно собрать всё воедино, провести полноценное юзабилити-тестирование и подготовить проект к сдаче айтишникам.
Начинается всё с прототипирования, до которого у дизайнеров есть только наброски макетов и постановка к нему. Общаться с заказчиком и пользователями, просто показывая им статичные картинки, очень непродуктивно. Поэтому необходимо создать кликабельный прототип. В процессе дизайнеры также проверяют разные теории и гипотезы, прорабатывая и отрисовывая сразу несколько вариантов, но лишь один из них доживает до презентации заказчику.
— Денис Элиановский, дизайн-директор JTC
в рамках отчета о тестировании ДБО для физических лиц Salto Rondata
Таким образом, первый кликабельный прототип, попавший в руки клиента, — это даже не десятая версия дизайна. Большую часть визуальных и функциональных проблем выявляют и перерабатывают специалисты JTC. Все неудачные варианты отсеиваются еще внутри команды дизайнеров.
Следующий важный этап — ранние Usability-тесты. Вспоминая классификацию методов из первого шага, мы можем определить их как поведенческий качественный тест. То есть для них отбирается небольшая группа людей (пять-семь человек) разного возраста и профессий и внимательно изучается то, что они делают с приложением. При выборе такой фокус-группы важно опираться на целевую аудиторию — тех, кто будет непосредственными пользователями.
Сразу дам ответ на самый популярный вопрос наших клиентов, который звучит так: «Вы, наверное, всё сами на себе тестируете, чтобы результаты получились хорошие?» Нет. Мы не то что свои результаты не включаем в тесты — мы стараемся даже не включать в тесты людей с профессиональной деформацией, то есть тех, кто профессионально занимается тестами за деньги. А также мы исключаем дизайнеров, программистов и прочих, которые тоже этой профессиональной деформации подвержены.
— Денис Элиановский, дизайн-директор JTC
Однако и здесь есть свои нюансы: чем больше респондентов участвует в проверке, тем меньше средняя эффективность. Проще говоря, люди замечают одни и те же ошибки, поэтому оптимальное число тестирующих — пять-семь человек. Так что лучше тестировать меньшими группами, но делать это чаще.
Собрав все необходимые данные, дизайнеры проводят работу над ошибками, которые смог непредвзятым взглядом выявить простой пользователь. Все дальнейшие обсуждения с заказчиком ведутся уже не в плоскости «нравится / не нравится», а в контексте цифр, полученных в результате исследований.
После всех этих этапов и устранения ошибок можно подготавливать проект к передаче программистам. Для того чтобы в процессе верстки, написания кода и интеграции с API не возникли проблемы, которые исказят согласованный дизайн, нужно составить UI-kit. Это своего рода шпаргалка для разработчиков, в которой будут прописаны все основные нюансы, начиная с размеров и расположения кнопок и заканчивая правилами использования цветов и анимацией между страницами.
Шаг 3: Техническая доработка и финальные испытания
Несмотря на то, что программисты получают четкие гайдлайны в виде UI-kit, необходимо, чтобы за всем процессом технической реализации наблюдал дизайнер. Авторский надзор позволит предупредить важные ошибки и, если что-то вдруг пойдет не так, исправить это на ранних стадиях. Постоянная и качественная коммуникация между дизайнером и программистом позволит донести всю логику, заложенную в макеты.
Далее, прежде чем выпустить приложение в официальные магазины, необходимо провести финальное тестирование. Для этого пишутся юнит-тесты, проводятся функциональные, нагрузочные, пенетрейшн-тесты и так далее. Хоть ими уже занимается отдел тестирования, дизайнеры должны быть начеку, чтобы в случае чего оперативно внести срочные правки.
Это один из самых важных этапов. Если приложение сразу после выхода будет тормозить, выдавать ошибки и не прогружать страницы, у человека может сложиться негативное впечатление. Он просто снесет его, поставит низкую оценку, и тогда уже у других потенциальных пользователей возникнут сомнения, нужно ли им вообще такое приложение.
После запуска приложения команда JTC проводит такие тесты, как удаленное исследование, юзабилити бенчмаркинг, анализ кликстрима, A/B-тесты, исследования истинного намерения. Это позволяет доработать приложение и исправить выявленные ошибки последующими обновлениями.
- директор по дизайну;
- бизнес-аналитик;
- два UX/UI-дизайнера;
- UX-тестер;
- ассистент;
- иллюстратор;
- графический дизайнер;
- видеооператор;
- менеджер проекта.
И всё это лишь необходимый минимум. Чем больше проект и амбициознее планы клиента, тем больше работников привлекает JTC для каждого из этапов.
JTC — эксперт в области построения экосистем и систем ДБО как на базе собственной платформы Salto и продуктов Salto Avanti («Сальто Аванти») для юридических лиц и Salto Rondata («Сальто Рондата») для физических лиц, так и в области построения систем ДБО на заказ. Среди их клиентов ты встретишь таких гигантов российской банковской индустрии, как ВТБ, Газпромбанк и «Открытие».
Комментарии
(0)