Мы компания Disrapp, которая в первую очередь известна мобильными приложениями для учёта личных финансов CoinKeeper.
Особенностью CoinKeeper является то, что сервис изначально появился только на мобильных платформах. Тому, как создавался интерфейс CoinKeeper, и как мы сейчас превращаем его из мобильного в “настольный”, и посвящена эта заметка.
Краткое содержание предыдущих серий
4 года назад в Apple AppStore появилась первая версия CoinKeeper.
Мы уверены, что финансовое планирование, учёт расходов и доходов — должны быть неотъемлемой частью жизни любого человека, как чистка зубов или занятие спортом. Но привычку учитывать свои финансы не так легко выработать. Люди начинают вести учёт, забывают ежедневно вносить расходы и бросают через 1–2 недели.
CoinKeeper создавался для облегчения боли мучительного ежедневного добавления расходов. Когда основной способ расчёта — наличные, неудобно регулярно добавлять операции при помощи компьютера, и самый лучший PFM(Personal Finance Manager) в первую очередь должен быть мобильным.
Разрабатывая CoinKeeper, мы изучили множество существовавших на тот момент приложений для учета личных финансов. Практически все они имели два существенных недостатка:
1. Добавление любой операции было сложным и долгим процессом выбора из нескольких выпадающих меню
2. Чтобы составить полную текущую картину — сколько денег в наличии? сколько потрачено? сколько еще можно потратить? — нужно было совершить много действий, данные были “размазаны” по разным экранам
Мы решили эти две проблемы одним махом, создав главный экран с основными показателями и придумав механику перетаскивания монеток. Для занесения операций нужно сделать всего три действия: перетянуть монету, ввести сумму и выбрать день. Подобный интерфейс CoinKeeper позволяет быстро, одним движением, осуществлять операции между множеством счетов и категорий.
Во многом благодаря этому интерфейсу, каждый день более 35 000 человек заносят более 120 000 операций. По оценкам рынка, CoinKeeper является лидером среди российских сервисов учета личных финансов. Причём, в отличие от конкурентов, мы до сих пор представлены только мобильными приложениями для App Store и Google Play. Тем не менее со временем стало понятно, что существует масса сценариев, для которых мобильного устройства недостаточно. Этим летом мы начали работу над web-версией CoinKeeper, чтобы дать ещё большему количеству людей классный инструмент для управления своими деньгами.
Пока шла подготовительная работа над серверной частью, мы решали: как же должен выглядеть интерфейс CoinKeeper на экране браузера?
Вопросы появлялись один за другим:
Как максимально эффективно использовать большую площадь экрана? Как можно заносить операции так, чтобы это было не просто быстрее, чем у конкурентов, но и быстрее, чем в нашем собственном мобильном приложении? Как обеспечить наглядность отображаемых данных?
И мы думаем, что нашли ответы
При разработке web-интерфейса CoinKeeper, мы сохранили для себя два основных принципа, которые использовали в работе над мобильными версиями.
Принцип 1. Максимально быстрое занесение операций.
В идеале занесение операций должно происходить вообще участия пользователей. Но сегодня российские банки не дают доступа к операциям своих клиентов, даже с их согласия. Альтернативные методы — распознование выписок, сканирование чеков или копирование в приложение транзакционных SMS — имеют много ограничений и не подходят для большинства людей. При этом CoinKeeper для Android распознаёт банковские SMS, и мы прямо сейчас активно улучшаем эту функцию. Загрузка данных через интернет-банки тоже может подойти части пользователей, поэтому мы работаем и в этом направлении. Тем не менее, в первую очередь мы должны обеспечить максимально быстрый и удобный “ручной” ввод операций.
У нас было много разных идей и мнений.
Давайте просто скопируем наш крутой мобильный интерфейс, зачем ломать то, что здорово работает!
На экране компьютера наш фирменный метод “перетаскивания” монеток уже не является таким удобным. Перетащить монету пальцем на небольшом экране телефона в кошелёк — точная и практически мгновенная операция. Но если использовать для этого мышь, то удобный интерфейс превращается в боль. В этом случае начинает сильно мешать необходимость постоянного переключения между клавиатурой и мышью. Например, для ввода 10 операций нужно не только точно перетаскивать нужную монету, но и каждый раз отвлекаться на клавиатуру и вносить данные.
Может сделать выбор счетов и категорий из выпадающего меню?
В этом случае не требуется точность в перетаскивании монеток, но такой интерфейс никак не будет отличаться в лучшую сторону от многих других похожих друг на друга сервисов. Множество действий: клик-прокрутка-клик-клик. К тому же и в данном случае остаётся проблема переключения между клавиатурой и мышью.
Использовать виртуальную клавиатуру и вносить операции только при помощи мыши?
В этом случае мы не используем сильное преимущество компьютеров, быстрый ввод при помощи физической клавиатуры, к тому же в CoinKeeper к операциям можно добавить теги и комментарии, а делать это с помощью мыши и виртуальной клавиатуры — полный мазохизм.
Рассуждая таким образом, и моделируя разные интерфейсы, мы пришли к выводу, что ввод операций должен происходить только при помощи клавиатуры, по аналогии с Autosuggest в Google. Например, после ввода “как” вы видите вереницу вариантов от “как назвать эту любовь” до “как варить рис” и можете быстро выбрать нужный.
Можно еще быстрее!
Для проверки этой гипотезы мы заложили один вариант фразы, которую понимает программа. Но мы планируем, что добавлять операции можно будет “естественным языком”, в том числе голосом или в чате Telegram, а алгоритм будет понимать и подсказывать наиболее подходящие счета, кошельки, теги или категории расходов.
Сделав этот первый шаг, и начав самим пользоваться прототипом web-версии CoinKeeper, мы сразу обнаружили, что благодаря использованию клавиатуры и автоподстановке, ввод операции занимает считанные секунды.
Принцип 2. Одностраничный интерфейс
Изначально мы хотели сделать в интерфейсе три раздела: Главный экран с основными показателями, Историю операций и экран Отчетов и статистики. Это то, что более-менее привычно и знакомо по множеству других интерфейсов PFM-сервисов.
Мы сами используем этот подход в приложениях для iPhone и Android, поэтому видим и все его недостатки. Чем больше разделов, тем реже люди туда заходят. Например, до разделов статистики в наших приложениях доходят не более 15% ежедневных посетителей. Кто-то не находит, кому-то лень, в итоге потенциально ценная и интересная информация проходит мимо них.
Поэтому мы поставили перед собой задачу максимально тесно связать между собой все имеющиеся у нас данные и отобразить их на одной странице.
Сломав старую парадигму, мы осознали, что между основными показателями, статистикой и историей операций есть прочная взаимосвязь. По большому счёту мы храним у себя лишь историю операций, а операция это: счёт, категория расхода, сумма, дата, тег и комментарий. Всё остальное — это производные от этих операций, представление данных под тем или иным углом. Меняя угол зрения, мы можем видеть разные показатели, отчеты и статистику.
Например, если я вижу в отчете, что по какой-то статье расходов у меня потрачена большая сумма, то я хочу посмотреть на что именно и когда я ее потратил, а это уже более подробная статистика и история операций.
Чтобы структурировать все данные и их представления мы разделили экран на 3 части:
1. Поле ввода операции
2. Ключевые показатели и отчеты
3. История операций(Лента)
В Ленте операций находятся исходные данные введённые пользователями, а ключевые показатели представляют эти данные в разных срезах.
В ключевых показателях мы отвечаем на вопросы:
Сколько у меня денег и где они находятся?
Сколько потрачено на различные нужды в текущем периоде?
Сколько средств получено и откуда?
Как распределяются расходы и доходы в текущем или прошлых периодах?
Мы сохранили приемственность с мобильным CoinKeeper, представив остатки на счетах и кошельках в виде монет и блоки статистики в привычном для пользователей виде.
Таким образом, у нас получился следующий интерфейс для web CoinKeeper
Практически все блоки интерактивны. Нажатие на счет, категорию расхода или тег “отфильтровывает” статистику и операции.
Например, вот так.
Наши выводы
Важно выделить основные(1-2) ценности продукта, которые важны для людей, реализовать их при помощи интерфейса и убедиться, что они устраняют конкретную боль пользователей
Если вы создаёте продукт для конечного пользователя, вначале убедитесь, что вы сами готовы использовать своё решение и уверены в нём, а только потом начинайте сбор обратной связи
Важно максимально полно задействовать преимущества той или иной платформы. В нашем случае, это привело к использованию жестов для мобильных устройств, и вводу данных с клавиатуры в случае «настольной» версии
Не стоит «в лоб» переносить опыт использования мобильных платформ на веб и наоборот
Что дальше?
Сейчас у нас готова первая версия CoinKeeper Web 0.1, в которой можно:
1. Добавить операцию (но пока нельзя отредактировать ее)
2. Увидеть список счетов и суммы на них
3. Посмотреть список операций
Как бы мы ни верили в правильность нашего подхода к интерфейсам, по-настоящему оценить его можно только на основе обратной связи от пользователей и статистики.
Поэтому сегодня мы приглашаем премиум-пользователей CoinKeeper на закрытое тестирование. В первую очередь мы хотим оценить, насколько быстро можно привыкнуть к новому способу ввода операций, и будет ли он настолько же быстр для пользователей, как и для нас.
Пока тестирование будет доступно только для постоянных пользователей CoinKeeper с премиум-подпиской. Если среди хабравчан есть такие — заполняйте анкету, нам важно ваше мнение о новом способе ввода операций в CoinKeeper!
Мы в свою очередь обещаем поделиться результатами тестирования, обратной связью от пользователей и дальнейшим ходом разработки.
Спасибо за внимание, будем рады услышать ваши истории о создании интерфейсов на новых платформах.
ссылка на оригинал статьи http://habrahabr.ru/post/271263/
Добавить комментарий