[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Лена Очкова", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","\u0432\u0435\u0431_\u0432\u0435\u0440\u0441\u0438\u044f","coinkeeper","\u0443\u0447\u0451\u0442_\u0444\u0438\u043d\u0430\u043d\u0441\u043e\u0432","\u043b\u0438\u0447\u043d\u044b\u0439_\u0431\u044e\u0434\u0436\u0435\u0442"], "comments": 64, "likes": 17, "favorites": 8, "is_advertisement": false, "section_name": "default", "id": "12072" }
Лена Очкова
8 052

Кейс из России: Как создавалась веб-версия сервиса для управления личными финансами CoinKeeper

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

Редакция vc.ru публикует материал с разрешения авторов.

Краткое содержание предыдущих серий

Четыре года назад в App Store появилась первая версия CoinKeeper.

Разрабатывая CoinKeeper, мы изучили множество существовавших на тот момент приложений для учета личных финансов. Практически все они имели два существенных недостатка:

  • Добавление любой операции было сложным и долгим процессом выбора из нескольких выпадающих меню.
  • Чтобы составить полную текущую картину  —  сколько денег в наличии, сколько потрачено, сколько еще можно потратить  —  нужно было совершить много действий, данные были «размазаны» по разным экранам.

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

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

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

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

  • Как максимально эффективно использовать большую площадь экрана?
  • Как можно заносить операции так, чтобы это было не просто быстрее, чем у конкурентов, но и быстрее, чем в нашем собственном мобильном приложении?
  • Как обеспечить наглядность отображаемых данных?

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

Принцип 1. Максимально быстрое занесение операций

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

Альтернативные методы — распознавание выписок, сканирование чеков или копирование в приложение транзакционных SMS — имеют много ограничений и не подходят для большинства людей. При этом CoinKeeper для Android распознает банковские SMS, и мы прямо сейчас активно улучшаем эту функцию. Загрузка данных через интернет-банки тоже может подойти части пользователей, поэтому мы работаем и в этом направлении.

Тем не менее, в первую очередь мы должны обеспечить максимально быстрый и удобный «ручной» ввод операций. У нас было много разных идей и мнений.

Давайте просто скопируем наш крутой мобильный интерфейс, зачем ломать то, что здорово работает.

На экране компьютера наш фирменный метод перетаскивания монеток уже не так удобен. Перетащить монету пальцем на небольшом экране телефона в кошелек — точная и практически мгновенная операция.

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

Может, сделать выбор счетов и категорий из выпадающего меню?

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

Что если использовать виртуальную клавиатуру и вносить операции только при помощи мыши?

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

Рассуждая таким образом и моделируя разные интерфейсы, мы пришли к выводу, что ввод операций должен происходить только при помощи клавиатуры, по аналогии с Autosuggest в Google. Например, после ввода «как» вы видите вереницу вариантов от «как назвать эту любовь» до «как варить рис» и можете быстро выбрать нужный.

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

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

Принцип 2. Одностраничный интерфейс

Изначально мы хотели сделать в интерфейсе три раздела: главный экран с основными показателями, историю операций и экран отчетов и статистики. Это более или менее привычно и знакомо по множеству других интерфейсов PFM-сервисов (персональных финансовых менеджеров — прим. ред.).

Мы сами используем этот подход в приложениях для iPhone и Android, поэтому видим и все его недостатки. Чем больше разделов, тем реже люди туда заходят. Например, до разделов статистики в наших приложениях доходит не более 15% ежедневных посетителей. Кто-то не находит, кому-то лень — в итоге потенциально ценная и интересная информация проходит мимо них.

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

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

Например, если я вижу в отчете, что по какой-то статье расходов у меня потрачена большая сумма, то я хочу посмотреть, на что именно и когда я ее потратил, а это уже более подробная статистика и история операций.

Чтобы структурировать все данные и их представления, мы разделили экран на три части:

  • поле ввода операции;
  • ключевые показатели и отчеты;
  • история операций (лента).

В ленте операций находятся исходные данные, введенные вами, а ключевые показатели представляют эти данные в разных срезах.

В ключевых показателях мы отвечаем на вопросы:

  • Сколько у меня денег и где они находятся.
  • Сколько потрачено на различные нужды в текущем периоде.
  • Сколько средств получено и откуда.
  • Как распределяются расходы и доходы в текущем или прошлых периодах.
Мы сохранили преемственность с мобильным CoinKeeper, представив остатки на счетах и кошельках в виде монет и блоки статистики в привычном для вас виде. Таким образом, у нас получился следующий интерфейс для веб-версии CoinKeeper:


Практически все блоки интерактивны. Нажатие на счет, категорию расхода или тег отфильтровывает статистику и операции. Например, вот так.

Что дальше

Сейчас у нас готова первая версия CoinKeeper Web 0.1, в которой можно:
  • добавить операцию (но пока нельзя отредактировать ее);
  • посмотреть список счетов и суммы на них;
  • посмотреть список операций.

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

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

#Интерфейсы #веб_версия #CoinKeeper #учёт_финансов #личный_бюджет

Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления