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