2 posts tagged

Интерфейсы

Редизайн: приложение WebMoney для macOS

Иногда использую WM, если верить вики, то система немножко популярна: под данным за 2015 год у нее 30 000 000 аккаунтов. 160 000 000 транзакций за 2014 год. Общий объем — 17 000 000 000 $. Основные пользователи — Россия и Украина.

Но при впечатляющих числах, создается ощущение, что дизайну их приложений уделяют весьма малое внимание. С безопасностью все очень хорошо (хоть иногда и достаточно мудрено), а вот с дизайном как-то не складывается. Но самое печальное то, что он совсем неудобный и делали его как будто новички. Я, конечно, тот ещё «эксперт» в интерфейсах, но подумал почему бы не попробовать его обновить.

Накидал основные экраны в сексуально сером

Было: стартовый экран

Вот так нас встречает WebMoney при открытии. Тут есть сразу все: все наши кошельки, последние операции по всем счетам, подраздел с оплатой услуг, верхнее меню (где также есть раздел оплаты услуг). Нажав на неочевидный плюсик в правом верхнему углу, мы можем добавить карту или другой кошелек. А нажав на три точки, откроется другое контекстное меню с настройками и FAQ. Там же есть пункт Refresh, который обновляет данные о кошельках (зачем?).



Еще мне понравился пункт More, при нажатии на него, открываются пункты, которые не влезли. То есть пункт меню «История» не влез и находится непонятно где :) А пункт весьма полезный.


Стало: стартовый экран

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

Выйти из аккаунта и задать вопрос, можно по нажатию на юзерпик. Чтобы выйти из аккаунта в старом интерфейса, потребуется нажать на те славные 3 точки, выбрать настройки, там выбрать подменю Account и нажать Sign Out. 2 действия вместо 4-х :)

Само приложение занимает на 18% меньше места по горизонтали и легко адаптируется под различные устройства. Сама навигация здесь — это чисто «мобильная история», но не вижу тут ничего плохого :)

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

Было: кошелёк

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

З — забота



Из плохого: дублируется функция обмена денег, она указана иконкой, а также есть в «трех точках». Ну и куда же без Refresh’a:

Стало: кошелёк

Все разделы я решил сделать без модальных окон, оставив их только для операций. Все действия с кошельком я вынес на плашку. Ну и сделал самые часто используемые кнопки «Снять» и «Внести».


По клику на 3 точки, откроются не самые часто используемые доп.действия с кошельком: создание веб-страницы для перевода на него (что-то типо PayPal.Me), установка лимитов и отвязка кошелька с вашего аккаунта.


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

Было: денежный перевод

Тут все понятно, только смущает контекстное меню, перед формой перевода


Стало: денежный перевод

Тут минимум новшеств. Убрал контекстное меню, добавил возможность сохранить перевод в избранное и использовать как шаблон.

Было—стало: услуги

Тут изменений почти нет, только стилизация

Было: история

Здесь есть все нужное, кроме сортировки по кошелькам

Также в карточке операции нет пункта с номером транзакции, она почему-то находится в описании платежа.

Стало: история

Добавил сортировку по кошелькам + сортировку по конкретному пользователю или услуги. Также можно скачать выписку в формате csv. Если нажимаем на получателя или отправителя и видим экран со всеми операциями по этому счёту.

В карточке товара только суть. По клику на получателя, перейдём на его страницу в системе (пример).

Было—стало: чаты

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

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

Было—стало: контакты

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

Итого

В целом интересный опыт, дальше лучше :)

16 October 2017   UI   Дизайн   Интерфейсы   Мое

Идея: табы в iOS-плеере Music

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

Внизу добавляется иконка со всеми табами


Табы переключаются свайпами. Закрыть их можно свайпом вверх.


Наглядная анимашка

9 September 2017   Apple   Дизайн   Идея   Интерфейсы