Проект трекера для собак Mishiko разрабатывается с 2015 года, и за это время мы прошли через десятки итераций в дизайне — как самого трекера, так и мобильного приложения.
Специально для нашего блога, мы попросили ведущего дизайнера Mishiko Дарью Иващенко рассказать историю дизайна приложения Mishiko.
Дарья Иващенко, Mishiko:
Когда проект создается несколько лет, невозможно избежать глобальных перемен. В случае с Mishiko, мобильное приложение — лишь одна из частей большого цикла, который включает и платформу, и «железо», и производство. Эволюцию — или, скорее, смену векторов развития проекта — можно проследить уже по иконке приложения и тому, как кардинально она менялась от раза к разу:
Но начнем по порядку.
Итак, первое, с чем мы столкнулись — разработка главной страницы приложения. На старте, мы размышляли над содержимым, которое тут должно отображаться. Это могла быть лента по типу Facebook, или только базовая информация про активность собаки. Либо главная функция — локация собаки, а всё остальное должно было в дополнительных вкладках?
Мы много думали над разными элементами геймификации, ачивками и бейджами по типу Foursquare, и поэтому мы хотели разместить на первой странице по-максимуму информации про друзей-собаководов владельца гаджета. Параллельным функционалом (от которого мы, впрочем, не отказались) стала идея соцсети для поиска потерянных собак. Поэтому в это же время у нас возникла идея с картой собак поблизости (включая объявления про «потеряшек»), а также возможность просто познакомиться с новыми друзьями рядом с домом.
По нашей логике, для получения ачивок, не обязательно было каждый раз брать новые рекорды. Наоборот — даёшь каждому по ачивке: пролежал пёс дома целый день? Лови ачивку «камень». Но такие шуточные награды не мешали и основной линии с достижением новых целей и соревнований по активности с соседскими собаками.
У нас было много мыслей насчет геймификации и социализации внутри приложения. А в идеале мы хотели эти две вещи сделать еще и вместе. Мы думаем, что было бы круто не просто делиться с друзьями информацией о новых достижениях целей, но и о побитых рекордах. То есть когда твоя собака была наиболее активна за всю историю использования Mishiko.
Наконец, мы хотели сделать еще и специальные достижения. Например, за посещение одних и тех же мест по много раз: ходишь ты с собакой в зоомагазин-ходишь, и бац: у тебя бейдж «главный на районе». Или у тебя 50 друзей собаководов — ура, получай ачивку. Или твой мопс стал в этот день самым активным псом на районе! Держи новый бейдж.
Идея ачивок особенно вскружила нам голову, когда мы изначально выбрали общий мультяшный стиль проекта. Тогда основным маскотом-персонажем должен был стать вот этот парень:
Почему мы решили от него отказаться? Потому что у нас поменялись задачи бизнеса.
Да, это немного грустно, когда приходилось перекраивать всё так сильно, но в целом нормальная ситуация. Важно понимать, что мы постоянно были завязаны на «железо», которое постоянно менялось, на итоговую цену устройства и другие вопросы — и всё это влияло на стиль Mishiko. Мультяшный стиль начал выглядеть просто нелепо, когда мы получили более-менее финальные варианты промышленного дизайна трекера, его компоновки и, конечно, когда узнали его итоговую цену — около 10 тысяч рублей.
Пока, мультяшный стиль!
При разработке первых MVP приложения, мы начали с разработки черновых вайфреймов. Вот они:
И уже на этом этапе всплыла одна из первых гипотез, которую мы отклонили фактически сразу — это навигация «слева», как тут:
Первые же тесты показали, что навигация снизу в нашем случае увеличивает время пользователя в приложении в несколько раз. Использование приложения Mishiko куда больше похоже на Instagram, чем на какое-нибудь приложение с трекингом вроде каршеринга. Мы не хотим, чтобы пользователь зашел, увидел локацию питомца — и сбежал. Вместо этого, наша цель — чтобы он зашел, посмотрел интересные данные об активности собаки, изучил в графиках данные по активности за неделю или месяц, вспомнил свои прогулки. Ну или зашел в календарь событий и обновил список «собачьих дел» вроде похода к ветеринару или в груминг салон. Мы не хотим, чтобы пользователь использовал приложение в спешке.
Понимая, что мы не можем за один шаг перейти от MVP к финальному продукту, мы начали резать фичи на основные и опциональные. Первое от чего пришлось отказаться к релизу — от ленты по типу Facebook.
Второе изменение — мы начали измерять активность в баллах, а не во «времени активности», как это было на старте. Тесты показали, что воспринимать достижения в баллах гораздо проще, чем во «времени» того, сколько времени собака провела в каком режиме (сильная активность/слабая/сон).
Мы понимаем, что баллы — это, конечно, тоже абстрактная система мер. Но она поясняет цель: вот для твоей собаки нужно столько-то баллов. И рядовому юзеру не так и важно, как они считаются — а кому интересно, тот уже изучит детальные графики и нашу методику расчетов. Возможно, мы в итоге отойдем и от бальной системы, но большинство фитнес-приложений тоже меряют всё в баллах. Это упрощает работу с самыми разными типами активности — будет ли это бег, плавание, ходьба, что угодно.
В-третьих, мы изменили формат отображения основного экрана активности. Давайте об этом расскажем подробнее.
При работе над экраном активности — основным в приложении Mishiko — получили от команды инженеров базовые вводные. Итак, девайс собирает от акселерометра данные по ускорению, достаточные, чтобы отличать активность трех типов. Покой, средняя активность и высокая активность.
Чтобы визуализировать эти (казалось бы, несложные) данные, мы столкнулись с целым рядом технических проблем. Вот один из первых вариантов визуализации, который мы придумали:
Что тут путало людей? Как минимум то, что типы активности были того же цвета, что и дневные рекорды. Всем казалось что если день окрашен в синий цвет — то собака была малоактивна столько-то времени. Хотя по факту это просто не самый активный день по сумме всех трех типов активности. Это было дизайнерской ошибкой. Другой момент — на этом этапе, мы еще считали активность в минутах, а не баллах, и это было тоже жутко неудобно для пользователя.
Тогда мы попробовали вот такой вариант:
Как видно, стало гораздо проще и понятнее. Синим мы отмечали «обычный» день, когда собака не достигла цели по баллам. По мере достижения цели, цвет меняется сначала на голубой, а потом на желтый — когда уже «взят» новый рекорд.
Параллельно мы тестировали вариант с кругом, который «наматывает» на себя новые круги другого цвета. Вот этот вариант:
В чем была проблема? Мы решили протестировать эту гипотезу по визуализации: один наш дизайнер был в Берлине и ездил на велосипеде. И у него случилось следующее: когда баллы перешагнули за первый круг, то цвет поменялся с темно-синего на голубой (то есть начался второй круг). Но когда испытуемый превысил второй круг и перешел на третий, кружок начинал уже просто крутиться по новой. Это было очень неудобно и непонятно. Поэтому мы добавили доп. цвета поверх этого, чтобы избежать таких накладок.
В ходе ряда экспериментов с визуализацией, например вот таких:
… Мы пришли вот к такому итоговому варианту:
Мы упразднили все лишние «кружки», оставили только базовый минимум. Графики за день со временем решено было тоже убить, потому что по итогам тестов мы видели, что это ненужная информация для большинства собаководов.
А что с графиками активности? О, это отдельная история. Поехали
Первое, что мы подумали, когда начали работать со статистикой — что это всегда хардкор для обычного пользователя. Нам казалось, что, когда юзер залезает в данные, он уже сразу готов к «жести». И чем «злее» выглядят данные, чем больше будет красивых графиков, тем интереснее пользователю. И мы попробовали с этим поэкспериментировать. Получилось интересно, но в целом у пользователей сложные графики вызывали больше вопросов, чем ответов. Посмотрите сами и попробуйте тут разобраться:
Смежный вопрос, который мы часто обсуждали — необходимость сократить числа, когда мы говорим про баллы. Причина проста: вначале мы делили детализацию на 1000-2000 баллов или вообще сотни. Сотни отмели первыми: их часто путают с процентами и это плохая ассоциация.
Тогда мы добавили еще один «ноль», начали тестировать алгоритмы устройства, и увидели, что при количестве баллов около 2000, у тебя дополнительные баллы даются уже за большое количество шагов. То есть ты получишь условный +1 балл не за 15 шагов, а хотя бы за сотню. А так как весь трекинг происходит практически в реальном времени, создается ощущение, что обновлений нет или они не работают, когда проходишь небольшую дистанцию. Тогда мы пришли к более пугающим цифрам (20-30 тысяч), которые взамен дают осязаемый результат при любом количестве баллов. Погулял — получил пару тысяч, прошел пару шагов — получил пару десятков баллов.
В итоге мы привели дизайн статистики к вот такому минималистичному виду:
Как он вам? Давайте обсудим)
Специально для нашего блога, мы попросили ведущего дизайнера Mishiko Дарью Иващенко рассказать историю дизайна приложения Mishiko.
Дарья Иващенко, Mishiko:
Когда проект создается несколько лет, невозможно избежать глобальных перемен. В случае с Mishiko, мобильное приложение — лишь одна из частей большого цикла, который включает и платформу, и «железо», и производство. Эволюцию — или, скорее, смену векторов развития проекта — можно проследить уже по иконке приложения и тому, как кардинально она менялась от раза к разу:
Но начнем по порядку.
Итак, первое, с чем мы столкнулись — разработка главной страницы приложения. На старте, мы размышляли над содержимым, которое тут должно отображаться. Это могла быть лента по типу Facebook, или только базовая информация про активность собаки. Либо главная функция — локация собаки, а всё остальное должно было в дополнительных вкладках?
Мы много думали над разными элементами геймификации, ачивками и бейджами по типу Foursquare, и поэтому мы хотели разместить на первой странице по-максимуму информации про друзей-собаководов владельца гаджета. Параллельным функционалом (от которого мы, впрочем, не отказались) стала идея соцсети для поиска потерянных собак. Поэтому в это же время у нас возникла идея с картой собак поблизости (включая объявления про «потеряшек»), а также возможность просто познакомиться с новыми друзьями рядом с домом.
По нашей логике, для получения ачивок, не обязательно было каждый раз брать новые рекорды. Наоборот — даёшь каждому по ачивке: пролежал пёс дома целый день? Лови ачивку «камень». Но такие шуточные награды не мешали и основной линии с достижением новых целей и соревнований по активности с соседскими собаками.
У нас было много мыслей насчет геймификации и социализации внутри приложения. А в идеале мы хотели эти две вещи сделать еще и вместе. Мы думаем, что было бы круто не просто делиться с друзьями информацией о новых достижениях целей, но и о побитых рекордах. То есть когда твоя собака была наиболее активна за всю историю использования Mishiko.
Наконец, мы хотели сделать еще и специальные достижения. Например, за посещение одних и тех же мест по много раз: ходишь ты с собакой в зоомагазин-ходишь, и бац: у тебя бейдж «главный на районе». Или у тебя 50 друзей собаководов — ура, получай ачивку. Или твой мопс стал в этот день самым активным псом на районе! Держи новый бейдж.
Идея ачивок особенно вскружила нам голову, когда мы изначально выбрали общий мультяшный стиль проекта. Тогда основным маскотом-персонажем должен был стать вот этот парень:
Почему мы решили от него отказаться? Потому что у нас поменялись задачи бизнеса.
Да, это немного грустно, когда приходилось перекраивать всё так сильно, но в целом нормальная ситуация. Важно понимать, что мы постоянно были завязаны на «железо», которое постоянно менялось, на итоговую цену устройства и другие вопросы — и всё это влияло на стиль Mishiko. Мультяшный стиль начал выглядеть просто нелепо, когда мы получили более-менее финальные варианты промышленного дизайна трекера, его компоновки и, конечно, когда узнали его итоговую цену — около 10 тысяч рублей.
Пока, мультяшный стиль!
Тестируем дальше
При разработке первых MVP приложения, мы начали с разработки черновых вайфреймов. Вот они:
И уже на этом этапе всплыла одна из первых гипотез, которую мы отклонили фактически сразу — это навигация «слева», как тут:
Первые же тесты показали, что навигация снизу в нашем случае увеличивает время пользователя в приложении в несколько раз. Использование приложения Mishiko куда больше похоже на Instagram, чем на какое-нибудь приложение с трекингом вроде каршеринга. Мы не хотим, чтобы пользователь зашел, увидел локацию питомца — и сбежал. Вместо этого, наша цель — чтобы он зашел, посмотрел интересные данные об активности собаки, изучил в графиках данные по активности за неделю или месяц, вспомнил свои прогулки. Ну или зашел в календарь событий и обновил список «собачьих дел» вроде похода к ветеринару или в груминг салон. Мы не хотим, чтобы пользователь использовал приложение в спешке.
Болезненные изменения
Понимая, что мы не можем за один шаг перейти от MVP к финальному продукту, мы начали резать фичи на основные и опциональные. Первое от чего пришлось отказаться к релизу — от ленты по типу Facebook.
Второе изменение — мы начали измерять активность в баллах, а не во «времени активности», как это было на старте. Тесты показали, что воспринимать достижения в баллах гораздо проще, чем во «времени» того, сколько времени собака провела в каком режиме (сильная активность/слабая/сон).
Мы понимаем, что баллы — это, конечно, тоже абстрактная система мер. Но она поясняет цель: вот для твоей собаки нужно столько-то баллов. И рядовому юзеру не так и важно, как они считаются — а кому интересно, тот уже изучит детальные графики и нашу методику расчетов. Возможно, мы в итоге отойдем и от бальной системы, но большинство фитнес-приложений тоже меряют всё в баллах. Это упрощает работу с самыми разными типами активности — будет ли это бег, плавание, ходьба, что угодно.
В-третьих, мы изменили формат отображения основного экрана активности. Давайте об этом расскажем подробнее.
Показываем активность
При работе над экраном активности — основным в приложении Mishiko — получили от команды инженеров базовые вводные. Итак, девайс собирает от акселерометра данные по ускорению, достаточные, чтобы отличать активность трех типов. Покой, средняя активность и высокая активность.
Чтобы визуализировать эти (казалось бы, несложные) данные, мы столкнулись с целым рядом технических проблем. Вот один из первых вариантов визуализации, который мы придумали:
Что тут путало людей? Как минимум то, что типы активности были того же цвета, что и дневные рекорды. Всем казалось что если день окрашен в синий цвет — то собака была малоактивна столько-то времени. Хотя по факту это просто не самый активный день по сумме всех трех типов активности. Это было дизайнерской ошибкой. Другой момент — на этом этапе, мы еще считали активность в минутах, а не баллах, и это было тоже жутко неудобно для пользователя.
Тогда мы попробовали вот такой вариант:
Как видно, стало гораздо проще и понятнее. Синим мы отмечали «обычный» день, когда собака не достигла цели по баллам. По мере достижения цели, цвет меняется сначала на голубой, а потом на желтый — когда уже «взят» новый рекорд.
Параллельно мы тестировали вариант с кругом, который «наматывает» на себя новые круги другого цвета. Вот этот вариант:
В чем была проблема? Мы решили протестировать эту гипотезу по визуализации: один наш дизайнер был в Берлине и ездил на велосипеде. И у него случилось следующее: когда баллы перешагнули за первый круг, то цвет поменялся с темно-синего на голубой (то есть начался второй круг). Но когда испытуемый превысил второй круг и перешел на третий, кружок начинал уже просто крутиться по новой. Это было очень неудобно и непонятно. Поэтому мы добавили доп. цвета поверх этого, чтобы избежать таких накладок.
В ходе ряда экспериментов с визуализацией, например вот таких:
… Мы пришли вот к такому итоговому варианту:
Мы упразднили все лишние «кружки», оставили только базовый минимум. Графики за день со временем решено было тоже убить, потому что по итогам тестов мы видели, что это ненужная информация для большинства собаководов.
А что с графиками активности? О, это отдельная история. Поехали
Показываем статистику по активности
Первое, что мы подумали, когда начали работать со статистикой — что это всегда хардкор для обычного пользователя. Нам казалось, что, когда юзер залезает в данные, он уже сразу готов к «жести». И чем «злее» выглядят данные, чем больше будет красивых графиков, тем интереснее пользователю. И мы попробовали с этим поэкспериментировать. Получилось интересно, но в целом у пользователей сложные графики вызывали больше вопросов, чем ответов. Посмотрите сами и попробуйте тут разобраться:
Смежный вопрос, который мы часто обсуждали — необходимость сократить числа, когда мы говорим про баллы. Причина проста: вначале мы делили детализацию на 1000-2000 баллов или вообще сотни. Сотни отмели первыми: их часто путают с процентами и это плохая ассоциация.
Тогда мы добавили еще один «ноль», начали тестировать алгоритмы устройства, и увидели, что при количестве баллов около 2000, у тебя дополнительные баллы даются уже за большое количество шагов. То есть ты получишь условный +1 балл не за 15 шагов, а хотя бы за сотню. А так как весь трекинг происходит практически в реальном времени, создается ощущение, что обновлений нет или они не работают, когда проходишь небольшую дистанцию. Тогда мы пришли к более пугающим цифрам (20-30 тысяч), которые взамен дают осязаемый результат при любом количестве баллов. Погулял — получил пару тысяч, прошел пару шагов — получил пару десятков баллов.
В итоге мы привели дизайн статистики к вот такому минималистичному виду:
Как он вам? Давайте обсудим)