Несмотря на то, что мобильные технологии развиваются в настоящее время быстрее и стремительнее всех остальных отраслей, многие разработчики финансовых программ и приложений до сих пор копируют модели интерфейса с интерфейсов сайтов и программ, разработанных под стационарные компьютеры. И это с учетом того, что такие интерфейсы не подходят для мобильных устройств.
Маленький размер экрана, специфические, присущие только мобильным устройствам, пользовательские элементы управления, толстые пальцы и многие другие факторы, свойственные мобильному пользовательскому опыту требуют особого отношения к проектированию программ и приложений для мобильных устройств.
С некоторыми моими размышлениями относительно этой проблемы вы можете ознакомиться в другой моей статье под названием “Ultimate Guide to Designing NFC Mobile Apps You Won’t be Ashamed Of”. А в этой статье мы рассмотрим с вами простые варианты мобильного перевода денежных средств с текущего счета на сберегательный счет, опираясь на то, как это возможно сделать с помощью стационарного компьютера. Я объясню, как совершить эту операцию с помощью простых и доступных шаблонов. Эти же модели можно использоваться в разработке более сложных приложений, например для регистрации в социальных сетях или для оплаты через мобильной устройство.
Мы специально не будем называть в этой статье какие-либо компании. Если вы ищите критику мобильного приложения какой-либо компании, то вам точно не сюда. Но если вы хотите узнать, как разработать приложение для мобильного банкинга, то эта статья вам поможет.
Давайте начнем с основы: выбор счета. Тут существует два способа: через «сортировщика» (в Android называется «spinner») и с помощью специальной страницы выбора (другое название «table view»).
Первый вариант
Первое на что обращают свое внимание разработчики, приступая к работе над мобильными приложениями, это интерфейс рабочего стола с выпадающим меню. Вот примерная картина для мобильной трансакции (то есть перевода между двумя своими счетами, текущим и сберегательным):
Классический вариант перевода денежных средств с одного счета на другой посредством интернета.
Выпадающие меню – это неплохой вариант для интернет — банкинга, при наличии у пользователя от 1 до 20 счетов. Каждая учетная запись может быть указана в выпадающем меню: имя и баланс счета:
Выбор учетной записи с помощью выбора веб – платформы.
Как адаптировать этот вариант для мобильных пользователей? На самом деле, этот вариант не очень хорошо адаптируется под мобильные устройства. Однако в настоящее время, как я уже говорил выше, слепое копирование интерфейсов для стационарных компьютеров – довольно распространенная практика. И главная причина состоит в том, что вместо 20 или 30 вариантов, которые могут отображаться в выпадающем меню, стандартная система выбора iPhone показывает только 2 или 3 аккаунта:
Выбор учетной записи в IOS.
В Android 4.0 (последняя версия Android, названная Sandwich Ice Cream), ситуация немного лучше. Вместо программы выбора, Android OS использует счетчик наложение, который показывает 8 вариантов. К сожалению, параметры форматирования весьма ограничены, и текстовая область в покрытии составляет около 20%, потому что счетчик не использует всю ширину экрана мобильного устройства. В итоге каждый аккаунт растягивается на несколько строк, что приводит к путанице и неудобству чтения:
Выбор учетных записей в Android.
Интересно, что некоторые интернет — банки используют этот шаблон для отображения списка счетов. А также, чтобы избежать путаницы, они используют короткие номера для учетных записей, такие как CHK, SAV и CC1. Эти аббревиатуры работают достаточно хорошо для текста в банковской сфере, где важна краткость («CU l8r»). А обычный пользователь вряд ли обрадуется, увидев в своем смартфоне такое сокращение. Оно скорее подходит для корпоративного программного обеспечения. И хотя программа для мобильного банкинга далека по своей сути от игры Angry Birds или приложения для совершения покупок на Amazon, чтобы привлечь пользователей нам нужно больше уделить времени внешнему виду нашего приложения.
Второй способ
Второй способ больше подходит к нашей задаче. При его использовании приложение может демонстрировать нам более 10 аккаунтов со счетами одновременно. Как говорит в своем руководстве для разработчиков компания Apple «Если вам нужно отобразить большое количество данных, мы рекомендуем использовать таблицы. Чем больше высота таблицы, тем быстрее прокручивает ее пользователь».
Вот как должно это выглядеть:
Выбор учетной записи с помощью специальной страницы.
Преимущества второго способа включает в себя:
- Любой шрифт и брендинг, который вам нравится;
- Независимость от платформы;
- Использование по всей ширине страницы;
- Текст переносится по мере необходимости, так что пользователю будет комфортно просматривать несколько профилей;
- Демонстрация по 10 или более вариантов одновременно, с удобной функцией прокрутки.
А также вы легко можете отображать полное имя каждой учетной записи.
Как это можно использовать с формой? Один популярный шаблон является формой со специальной страницей выбора.
Форма со специальной страницей выбора
Идея проста: скопировать стандартную форму интерфейса, но использовать второй способ, а не первый, то есть специальные страницы выбора.
С помощью этого мобильного шаблона, передача потока с одного счета на другой будет выглядеть следующим образом:
- Бланк;
- Выделение страницы, чтобы выбрать счет, откуда будут отправляться денежные средства;
- Возврат к форме с заполненными полями информацией о счете, откуда будут отправляться денежные средства;
- Выделение страницы, чтобы выбрать сче …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров