Мы не устаем писать о том, как важен дизайн в разработке мобильных приложений, в особенности если это MVP. Однако вокруг данной темы остается довольно много недопонимания и путаницы. Где заканчивается дизайн интерфейса и начинается UX дизайн? Какой этап важнее? Что такое вайрфреймы и прототипирование? Давайте разбираться по порядку.
Время чтения: 6 минут
Ищете слаженную команду разработки?
Поможем с дизайном и разработкой приложений для бизнеса и стартапов
Начнем с понятия «интерфейс». Простыми словами, это набор средств, которые позволяют взаимодействовать двум системам и решать какую-то задачу. И если посмотреть внимательно, то интерфейсы повсюду.
Возьмем, к примеру, смеситель в ванной. Есть 3 варианта: установить ручки-крутилки, рычаг или сенсорный кран. Материалы и внешний вид тоже бывают разными. Но во всех случаях речь идет про элемент управления краном, позволяющий регулировать напор и температуру воды — это тоже своего рода интерфейс.
Если вы сантехник, то, конечно, можете сами выбрать один из вариантов. Но лучше узнать у хозяина квартиры, какой способ взаимодействия с водопроводной системой он предпочитает. Также вам вряд ли придет в голову установить посреди ванной комнаты водоразборную колонку: такой вариант уж точно не является современным, и к тому же плохо решает задачи пользователя.
Так же и с приложениями: то, что пользователь видит, запуская ваш продукт, и есть интерфейс, он же UI (User Interface). Задача дизайнера — через интерфейс показать пользователю, как работает приложение, и привести его к желаемому результату, будь то заказ продуктов из магазина или установка будильника. Но как узнать, что именно пользователь ждет от приложения? Как он будет с ним взаимодействовать? Какие у него предпочтения? Ответы на эти вопросы находятся в плоскости UX дизайна (User eXperience).
UX дизайн — это так называемый «дизайн пользовательского опыта». Из него следует UI дизайн — «дизайн пользовательского интерфейса». У каждого из них свои задачи.
Если вернуться к примеру про смеситель, то все, что касается материалов, цвета, формы и маркировки, относится к UI, а принцип работы — к UX.
Как вы можете видеть, UI и UX тесно связаны. UX не воплотить визуально без UI-дизайна. Но и красивый интерфейс, разработанный без глубокого понимания пользователя, скорее всего окажется неудачным.
Неудивительно, что сейчас UI не рассматривают в отрыве от UX, а соответствующая профессия звучит как UI/UX дизайнер.
Как правило, процесс разработки пользовательского интерфейса начинается с исследования пользователей и конкурентов, а завершается тестированием и передачей разработчикам необходимых материалов. Однако у каждого агентства могут быть свои «фишки» и своя последовательность этапов.
Один из вариантов организации процесса проектирования UI
Мы уже писали об особенностях нашего дизайн-процесса в целом ⤵️
А в этой статье мы хотим шаг за шагом показать этапы разработки пользовательского интерфейса на примере одного из наших проектов — Friday, мобильного приложения для организации вечеринок с друзьями. Оно дает возможность пользователям создавать свои ивенты, а также присоединяться к мероприятиям друзей — посиделкам в баре, походу в кино, домашней вечеринке. Итак, первый шаг…
Процесс проектирования интерфейса стоит начать с аналитики. Ключевые задачи при этом следующие:
Более подробно об анализе конкурентов и исследовании целевой аудитории можно прочитать в нашем блоге ⤵️
В ходе работы над приложением Friday мы провели количественный и качественный конкурентный анализ, а информацию о потребителях нам предоставил заказчик.
Интересно, что на рынке почти не было приложений, которые решали бы те же задачи. Были приложения для организации больших ивентов, а для маленьких компаний мы нашли буквально 1-2. Поэтому пришлось анализировать косвенных конкурентов, например, соцсети.
На основании собранной информации аналитики прорабатывают пользовательские сценарии, а UX UI дизайнеры создают карту пути пользователя. У нас в Purrweb ключевым инструментом на данном этапе является диаграмма связей, она же — карта функциональности или «майндмэп».
Майндмэп — это схематичное изображение всех функций продукта и навигации между ними.
Майндмэп позволяет увидеть весь маршрут взаимодействия пользователя с приложением, что очень удобно, ведь перед дизайнерами стоит задача упростить навигацию. Так, в приложении Friday мы сократили процесс создания вечеринки до трех шагов.
Разработка карты функциональности занимает всего лишь 8-10 часов, зато позволяет избежать недопонимания с заказчиком и подготовить основу для полноценного дизайна.
Когда карта функциональности утверждена, начинается работа над вайрфреймами — грубым наброском структуры и содержания продукта.
Итоговый дизайн может отличаться от вайрфрейма
Вайрфреймы нужны для того, чтобы более подробно проработать навигацию, продумать расположение основных элементов на экранах приложения и понять, как пользователь будет взаимодействовать с этими элементами.
Данный этап присутствует не у каждого агентства, но мы опытным путем пришли к тому, что концепт — лучший способ утвердить дизайн будущего приложения.
В презентации концепта представлено несколько ключевых экранов, уже воплощенных в графике. То есть в ходе работы над концептом закладывается основа UI-дизайна всего приложения. На этом этапе мы в Purrweb также создаем UI-киты из ключевых элементов интерфейса (кнопок, иконок, виджетов, индикаторов, шаблонов). Эта полезная практика впоследствии существенно облегчает труд разработчиков и экономит бюджет стартапера.
Мы прорабатываем экраны, которые наиболее наполнены контентом, чтобы максимально отразить визуал. Потом собираем UI-кит из того, что есть, чтобы задать дальнейший вектор. По сути, цветовая гамма, шрифты, какие-то карточки, кнопки уже готовы на этапе концепта.
Для разработки концепта мы используем сервис Readymag. Это удобный онлайн-инструмент для создания лендингов и презентаций. Такое представление идеи будущего продукта намного нагляднее и понятнее для клиента, чем просто демонстрация нескольких экранов.
Еще больше полезных материалов в нашем Telegram-канале Стартап-пикап.
Вместе с концептом обычно утверждаются цветовая схема и шрифты. Затем все это необходимо масштабировать на остальные части приложения и доработать, например, отрисовать иконки или иллюстрации.
Не стоит забывать, что UI-дизайн также должен учитывать предпочтения пользователей. Изначально интерфейс Friday был спроектирован в темной теме, так как она сильнее ассоциировалась с вечеринками. Но многим людям в целом не нравится темная тема, поэтому мы добавили и светлую тоже, чтобы у пользователей был выбор.
Прототип — это интерактивный макет, который отражает внешний вид и функции приложения. Благодаря его «кликабельности», можно оценить логику работы продукта. Поэтому он в первую очередь нужен самим дизайнерам, чтобы убедиться в отсутствии ошибок в user flow. Чем еще полезен прототип:
Существует множество программных продуктов для проектирования интерфейсов, с помощью которых можно создать и прототип. Дизайнеры Purrweb используют облачное решение Figma, поскольку оно идеально подходит для командной работы: можно работать вместе в одном файле и синхронизировать изменения. Помимо этого, Figma содержит много функций, упрощающих работу над интерфейсом, например, автоматическое выравнивание всех отступов и массовое редактирование компонентов.
Как только прототип закончен, согласован, и внесены последние коррективы, наступает время передать его разработчикам. Purrweb — агентство полного цикла, поэтому наши дизайнеры работают бок о бок с разработчиками, и после передачи всех материалов получают обратную связь. Они всегда в курсе того, какие недочеты дизайна всплывают в ходе разработки, и это позволяет предотвращать подобные проблемы в будущем.
→ Вот уже 10 лет мы помогаем стартапам создавать красивые и удобные приложения. Если у вас есть идея, но вы не знаете, с чего начать — заполните форму ниже, и мы свяжемся с вами.
Насколько публикация полезна?
Оцени эту статью!
17 оценок, среднее 4.6 out of 5.
Оценок пока нет. Поставьте оценку первым.
Так как вы нашли эту публикацию полезной...
Подписывайтесь на нас в соцсетях!
Читать
Ваша заявка уже у нас :)
Обычно ответ занимает от 12 до 24 рабочих часов.
Может, вы хотите запланировать онлайн встречу?
Извините, что-то пошло не так при отправке запроса.
Попробуйте позже.