Как разработать дизайн программы

Содержание

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

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

В том, как она проходит и из каких этапов состоит, нам помог разобраться Денис Элиановский — дизайн-директор компании JTC. Они входят в топ 50 крупнейших поставщиков банковского ПО в России и ведут полный цикл разработки сложных IT-продуктов.

Шаг 1: Первоначальная подготовка

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

Основы веб-дизайна с нуля. Урок #1. Практика в Figma для начинающих.

Именно поэтому мало просто один раз встретиться с заказчиком и спросить, чего он хочет. Нельзя просто опираться на визуальные представления руководства — нужно детально изучить специфику будущего продукта, аналоги со стороны потенциальных и прямых конкурентов, предыдущие и текущие версии приложения, если таковые имеются. Для этого JTC подключает собственных бизнес-аналитиков, которые на протяжении длительного времени анализируют все ключевые аспекты бизнеса. Всё это нужно, чтобы по итогу сформировать:

бизнес-требования;
стейкхолдер-требования;
функциональные и нефункциональные требования;
требования для перехода с имеющейся версии.

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

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

UX-исследование — это быстрое полезное действие, которое можно сделать еще на ранних этапах разработки, тем самым избежав ошибок, которые бы вышли в продакшен.

— Денис Элиановский, дизайн-директор JTC

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

ПЕРЕДЕЛКА! Как сделать 3D дизайн-проект квартиры без знаний программ?

Количественный/качественный. В первом случае результат может быть массовым и измеримым, например опрос с конкретными вариантами ответов. Качественный же требует более глубокой оценки, содержащей рассуждение и пояснения о проверяемых направлениях (если неудобно, то почему, чего не хватает, как было бы лучше и так далее).

Поведенческий/отношенческий. Первый помогает ответить на вопрос, что и как делает пользователь, позволяя понять, как улучшить имеющийся интерфейс. Второй — понять, что думает пользователь, что ему нравится или не нравится и так далее.

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

Исходя из этих отличий и задач исследования JTC может выбрать самый подходящий метод. Например, проверку концепции, оценку предпочтений, этнографические исследования, сортировку карточек и так далее. Всего в арсенале команды более двадцати методов тестирования.

На основании анализа аудитории и ее поведения пользователи делятся на несколько групп, для каждой из которых создается определенный персонаж. Это может быть: условная бабуля, зумер, молодая мамочка и так далее. Каждый из типажей пользователей досконально прописывается, и под каждого составляется сценарий, по которому тот обычно взаимодействует с приложением. На профессиональном сленге это называется User Story Mapping. В дальнейшем полученные инсайты становятся частью стейкхолдер-требований.

Шаг 2: Подготовка макетов перед передачей программистам

Теперь, когда имеется четкое представление о поведенческих сценариях и определена общая стилистика, нужно собрать всё воедино, провести полноценное юзабилити-тестирование и подготовить проект к сдаче айтишникам.

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

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

Шаг 3: Техническая доработка и финальные испытания

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

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

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

После запуска приложения команда JTC проводит такие тесты, как удаленное исследование, юзабилити бенчмаркинг, анализ кликстрима, A/B-тесты, исследования истинного намерения. Это позволяет доработать приложение и исправить выявленные ошибки последующими обновлениями.

Спорим, ты предполагал, что всё это происходит намного проще. Что просто один дизайнер за пару дней отрисовывает все ключевые окна в одном стиле, добавляет действующие кнопки. На самом деле качественный и продуманный дизайн приложения — это кропотливый труд целой команды специалистов. Если говорить о том, сколько человек задействованы в JTC, то на один проект выделяется:

директор по дизайну;
бизнес-аналитик;
два UX/UI-дизайнера;
UX-тестер;
ассистент;
иллюстратор;
графический дизайнер;
видеооператор;
менеджер проекта.

И всё это лишь необходимый минимум. Чем больше проект и амбициознее планы клиента, тем больше работников привлекает JTC для каждого из этапов.

JTC — эксперт в области построения экосистем и систем ДБО как на базе собственной платформы Salto и продуктов Salto Avanti («Сальто Аванти») для юридических лиц и Salto Rondata («Сальто Рондата») для физических лиц , так и в области построения систем ДБО на заказ. Среди их клиентов ты встретишь таких гигантов российской банковской индустрии, как ВТБ, Газпромбанк и «Открытие».

Источник: brodude.ru

Разработка дизайна приложений. UX/UI-дизайн приложений

Создание дизайна является важным этапом в процессе проектирования и разработки мобильного приложения. Рассказываем, что представляет из себя UI/UX-дизайн и как сделать его уникальным и современным.

Что включает в себя дизайн мобильных приложений?

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

UI «User Interface» — пользовательский интерфейс, то есть внешний вид и такие элементы, как цвет, стиль и шрифты;
UX «User Experience» — пользовательский опыт, который определяет то, как приложение будет функционировать и использоваться.

Сами термины UX и UI возникают чаще вместе, чем по отдельности, поэтому многим легко предположить, что это одно и то же.

Но несмотря на то, что работа над UI и UX часто идет рука об руку, и две команды тесно сотрудничают на всем протяжении пути — это два совершенно разных аспекта дизайна и разработки.

Этапы разработки дизайна приложения

Проводятся исследования и анализ целевой аудитории, конкурентов и рынка в целом, подбор референсов.

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

3. Разработка дизайн-макетов

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

Процесс разработки дизайна мобильных приложений

Ревью: 6 этапов процесса работы над дизайном мобильных приложений с полезными советами от практиков.

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

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

1. Погружение

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

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

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

Каковы цели и миссия компании?
За счет чего бизнес получает доход?
Кто является целевой аудиторией?
Каковы ожидания пользователей приложения?
Каковы цели и задачи проектируемого приложения?
Какие проблемы пользователей должно решать приложение?
Какие функции должно включать приложение?

Бизнес-целями клиента часто являются такие вещи, как увеличение продаж, снижение нагрузки на колл-центр или привлечение новых клиентов.

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

2. Исследование

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

Сначала изучаются все доступные материалы проекта, независимо от того, описывают ли они базовую бизнес-идею или предоставляют детальную спецификацию, в которой в полной мере описываются требуемые функциональные возможности и роли пользователей. После того, как вы проанализировали всю информацию, полученную от вашего клиента, создайте персон и карту пути пользователя (CJM).

Создание персоны

‍После того, как у вас появилась возможность пообщаться с реальными пользователями, вы можете создать персон, которые будут основаны на полученных данных, например, персона покупателя, подобная той, что показана на изображении ниже. Вы должны создать персону для каждой уникальной роли пользователя, описывая потребности, цели и болевые точки каждого пользователя. В целом, вам потребуется создать около 3-4 персон.

Создание карты пути пользователя (CJM)

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

Проведение конкурентного анализа

‍Существует два возможных результата проведения конкурентного анализа:

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

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

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

3. Вайрфреймы

‍Вайрфреймы определяют основную структуру, а также информационную иерархию дизайна мобильного приложения, как это показано на изображении ниже. Они помогают определить расположение элементов на экране, которое зависит от того, как информация должна восприниматься пользователями, и помогают предотвратить потерю каких-либо элементов на ранней стадии. Хотя вайрфреймы во многом определяют создание визуального дизайна на более поздних этапах процесса проектирования, они не содержат информации о визуальном оформлении, цветах, типографике или других визуальных элементах.

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

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

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

Юзабилити-тестирование

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

Визуальный стиль

‍Как только клиент утверждает вайрфреймы, команда начинает работу над визуальным стилем приложения. Дизайнеры создают визуальный стиль продукта, учитывая требования бизнеса и особенности целевой аудитории. Команда разрабатывает две или три визуальные концепции проекта, из которых клиент выбирает одну. На изображении ниже показаны две дизайн-концепции, созданные для Greenlight — мобильного приложения для знакомств.

UX-дизайнеры работают над формой, линиями, цветами и типографикой, которые зависят от бренда, создают модборд и оформляют три основных экрана приложения в созданных стилях. Если у клиента уже есть готовый брендбук, включающий логотип, слоган, цветовую схему и элементы пользовательского интерфейса (UI), задача команды — интегрировать их в дизайн приложения.

Руководство по стилю

‍На данном этапе команда проходит три этапа:
Создание руководства по стилю;
Дизайн экранов приложения;
Поддержка команды разработчиков.

Создание руководства по стилю

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

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

Дизайн экранов приложений

‍Команда работает над дизайном всех экранов приложения, как это показано на изображении ниже. Это предполагает отображение всех возможных состояний всех экранов, например, отображение того, как выглядит пустая новостная лента сразу после регистрации или как выглядит сообщение об ошибке, если пользователь предоставляет неверные данные. Если приложение содержит статьи, показывайте примеры как длинных, так и коротких заголовков.

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

Поддержка команды разработчиков

‍Клиент должен одобрить окончательный вариант дизайна приложения, прежде чем мы передадим его разработчикам. Мы используем Zeplin в качестве основного инструмента для взаимодействия с командой разработки.

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

Заключение

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

Источник: www.uprock.ru