UX фитнес-приложения

04.05.2020
Posted in blog-article
04.05.2020 admin

UX фитнес-приложения

Немного про привратности разроботки правильного дизайна на примере приложения для фитнеса

UX дизайн для фитнес-приложения на примере Manuva

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

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

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

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

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

Задача

UI и дизайн UX для мобильного фитнес-приложения.

Процесс

Группа компаний «Manuva» из Южной Африки обратилась с просьбой разработать новый продукт под названием «Manuva — мобильное приложение для фитнес-профессионалов и посетителей тренажерного зала». Задача приложения – объединить тренеров с потенциальными клиентами, дать возможность удаленного бронирования мест в зале для тех, кто не является членами фитнес-клуба, и облегчить поиск личного тренера.

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

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

Дизайн UX

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

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

Перед вами каркасы, созданные для Manuva app. Дизайнер создал базовую планировку, включая стартовый и домашний экраны.

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

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

В целом, этап wireframing помог наметить визуальную и типографскую иерархию пользовательского интерфейса Manuva, задать интерактивные зоны и элементы, спланировать переходы и отработать взаимодействие с программой.

Дизайн пользовательского интерфейса

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

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

-люди воспринимают цвета по-разному в зависимости от их возраста, пола и культуры.

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

Давайте рассмотрим некоторые из предложенных концепций пользовательского интерфейса.

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

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

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

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

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

Пользовательские иллюстрации для интерактивного учебника

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

Чтобы сделать учебник UI интересным и увлекательным, клиент и дизайнер согласились добавить иллюстрации. Эта задача была передана графическому дизайнеру Марине Соломенниковой. Иллюстрации были созданы в плоском стиле, а цвета соответствовали общей цветовой палитре, примененной в пользовательском интерфейсе. Давайте посмотрим на результат.

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

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

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Contact

Давайте работать вместе!

Пишите нам и найдем точки соприкосновения, может станем партнерами, а может поможем вам зайти в нашу чудесную нишу

Вы разработчик?

Пишите! Нам постоянно нужны новые кадры, либо можем помочь в продвижении вашего приложения

Новичок?

Поможем быстро войти в нишу, не тратя годы на понимание

Давно в нише?

Рады будем пообщаться как на темы whitehat, так и blackhat тематики ^_^ + всегда есть что обсудить по поводу рекламных сетей

ПИШИ В TELEGRAM!

Contact