Bear Tracker. Sports activity tracker
Предыстория проекта
Я долго искал приложение на свои часы на Wear OS и телефон и в каждом мне не хватало функций. И основные проблемы это либо нет возможности подключить внешний пульсометр, либо нет интеграции со Страва, либо нет возможности настроить интервальную тренировку. После дней поисков, когда я устанавливал приложения снова и снова я понял, что в одном приложении похоже есть функции, которые мне нужны, но я не мог понять как им пользоваться. Так и не разобравшись я его удалил. Но потом ещё через несколько дней бесплодных поисков, я решил попробовать разобраться снова. Нашёл инструкцию на сайте этого приложения и после двух часов попыток я разобрался как мне настроить всё что мне нужно и это работало хорошо. Приложение называется Gear Tracker.
Моя мотивация
Тот факт, что в приложении имеются все нужные мне функции и одновременно сложный опыт знакомства с приложением мотивировал меня сделать проект редизайна этого приложения, чтобы создать лучшее приложение для бега доступное для Wear OS.
Project goals
Основной целью своего редизайна я ставил упрощение ознакомления с приложением для нового пользователя.
В процессе общения с разработчиком приложения я узнал, что он не доволен, тем как приложение называется и тем как выглядит основная иконка. Цель создать дружелюбный, привлекательный, весёлый образ.
Ход работы
Затеяв редизайн приложения, я решил пообщаться с разработчиком приложения я узнал, что он разрабатывает приложение в одиночку не готов делать редизайн приложения. Поэтому я решил, что сделаю проект как минимум для своего портфолио.
Я выделил особенно трудные места и UX-паттерны, которые будут препятствиями для нового пользователя, по моему мнению. Основываясь на этих предположениях я спроектировал новое приложение и сделал прототип в Figma. И я решил, провести пользовательский тест приложения и прототипа с людьми увлеченными бегом, которые никогда раньше не пользовались приложением. Целью интервью было понять, насколько действительно новым пользователям будет трудно настроить приложение, и также понять насколько те места, которые я выделил действительно являются трудными для нового пользователя. Да, тут есть не логичность. Я действительно мог провести usertest приложения перед редизайном. Но честно говоря, я не понимал изначально как далеко готов зайти при создании этого проекта.
Особенность этого приложения
Приложение имеет идентичные функции и выглядит почти одинаково на часах и на телефоне. Это фактически и является одним и тем же приложением для часов и для телефона за исключением не больших изменений в расположении элементов. Разработчик утверждал, что ему так очень удобно вести работу, и что это позволяет экономить много времени. Ведь нужно писать одно приложение на два устройства с небольшими изменениями, а не два отдельных приложения. Этой же идеи придерживался и я при создании своего проекта
User test of Gear Tracker app
Project tasks:
1. Иконки настроек сделать более заметными
2. Разработка компановки action menu
3. Сделать настройку лэйаутов понятнее
Показать кликабельные зоны, сделать понятным обозначение не выбранного параметра, настройка edge menu, верхнее название закрыто, переместить подписи вниз и сделать шрифт крупнее
4. Cмена названия и разработка нового логотипа
Перемещение перетаскиванием удобнее чем перемещать на один пункт каждый развызывая Action menu
1. Иконки настроек сделать более заметными
Problem
Иконки шестерёнок и ползунков расположены в непривычном месте и слишком маленькие.
Они не воспринимаются как интерактивные элементы. В интервалах в переключающейся иконке сложно запомнить какая иконка будет следующей потому что их много, и поэтому легко пропустить нужную иконку.
Task
Сделать иконки шестерёнок и ползунков такого же размера как и другие интерактивные иконки, отделить от ведущей иконки.
Solution
Расположить иконку справа. На экране часов иконка помещается.
Expected outcome
Иконки стали заметнее и новому пользователю легко найти иконку шестерёнки, и легко понять, что иконка интерактивная.
В интервалах удалось избавиться от иконок ползунков, и интерфейс стал более привычным.
Before
After
2. Improving of Action menu
Problem
Не привычный паттерн с указателем и вторым нажатием. Не привычно, что после нажатия на иконку кажется, что ничего не происходит. А чтобы узнать названия всех функций, нужно прокликать их все по очереди.
Не информативные не соответствующие смыслу иконки, а иногда и одинаковые иконки добавляют сложности пути пользователя.
Task
Разработать расположение функций action menu так, чтобы все названия были видны и чтобы этот макет легко было переиспользовать для всех подобных меню.
Разработать иконки соответствующие функциям.
Solution
Простой список функций лучше всего подходит если названия могут быть длинными да ещё и на разных языках. В меню, в которых есть функциии перемещения и добавления стрелки располагаются вверху в ряд.
Конечно, на часах такой список не поместится на одном экране, но основная настройка будет происходить на телефоне, а настройки в часах на случай, если пользователь забыл что-то донастроить.
Expected outcome
Пользователю не придётся решать головоломку
Before
After
3. Сделать настройку лэйаутов понятнее
Problems
Не сразу понятно, что поле показателя интерактивно.
Волнистая линия, тильда, вводит в ступор
При первом открытии экрана Edge layouts не очевидно, где пользователь оказался, что тут можно делать, и чем это полезно во время активности.
Верхний параметр из Edge layouts закрывает или расположен слишком близко к названию верхнего параметра из Main Layouts
а) Шрифт названия параметра плохо читаем, особенно на часах.
б) Не понятно к какому параметру относится название параметра — оно ровно посередине между показателями.
в) Нарушено естественное движение глаз сверху вниз при считывании текста. Цифры бросаются в глаза первыми из-за размера текста, а во вторую очередь взгляд переходит на мелкое название параметра. Движение глаз при этом снизу вверх.
Tasks
Показать кликабельные зоны каждого отдельного поля для параметров
Придумать понятное обозначение не выбранного параметра.
Сделать переход в editing edge layout и его редактирование понятным и удобным
Изменить компоновку блока параметра, для лучшей читаемости, и …
…чтобы устранить накладывание элементов друг на друга.
Solution
Кликабельные зоны показать лёгким выделением. Слишком насыщенное выделение будет препятствовать пониманию того как будет выглядеть layout во время активности.
Использовать знак "+" для обозначения того, что можно дабавить параметр
Объединить Main layouts и Edge layouts на одном экране и расположить на разных табах.
5. Сблизить цифры и название параметра, увеличить размер шрифта названия параметра.
Expected outcome
Пользователь открыв экран понимает:
что на на поле показателя можно нажать …
… даже если показатель не выбран.
что оказавшись на табе Edge layout он может добавить и отредактировать параметры по краям экрана.
5. что за параметр уже выбран, и к какому параметру относится название
Before
After
Cмена названия и разработка нового логотипа
Problems
Первая версия приложения разрабатывалась для серии часов Samsung Gear. Часы Samsung больше не продаются под таким названием, а название приложения осталось, поэтому у разработчика было ощущение что название устарело. Также у разработчика было ощущение, что логотип очень сухой с мелкими деталями и хорошо бы добавить эмоций в логотип и название.
Tasks
Разработать привлекательный для новичков в беге логотип.
Solution
Я понял, от опытных бегунов, что они выбирают часы брендов специализирующихся на трекинге спортивной активности. А часами на Wear OS пользуются те, кто хотел приобрести смарт-часы, а уже потом заинтересовался бегом. Так что это скорее всего не опытные бегуны. Поэтому образ я выбирал исходя из того, что логотип должен быть милым, чтобы привлечь новичков.
Expected outcome
Больше пользователей будет скачивать приложение. Пользователи радуются увидев, что милый логотип приходит в движение при загрузке приложения