Редизайн-задание

image

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

Дизайн программы Приват24 для Android

Если вы пользуетесь услугами ПриватБанка и имеете смартфон, то, скорее всего, знакомы с этой программой. Она доступна в Google Play и Apple iTunes.

Зимой этого года была представлена новая версия, стилизованная под дизайн Android 4. Лично я не поклонник внешнего оформления элементов интерфейса Android 4. Например, не все люди поймут, что полоска – это поле ввода, а треугольник внизу – раскрывающийся список.

Оригинальный дизайн

Дизайн программы выглядит вот так:

design

В заголовке программы находится логотип программы (также выполняет роль кнопки «Назад»), «Хлебные крошки» и кнопки управления. Ниже расположены закладки 3 основных разделов. Под ними расположено содержание разделов. На главном экране приложения в самом низу расположен улыбающийся человечек без подписи и пояснений. Оказалось, что он отвечает за шаблоны операций.

Если продвинуться дальше главного экрана программы, то сразу видны проблемы:

design

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

Неверно назначены иконки для кнопок. Скорее всего, вы подумали, что это кнопки «Настройки», «Обновить» и «Меню»? На самом деле это «Меню» (операции), «Обновить» и «Настройки».

В содержимом также есть проблемы. Мы читаем горизонтально по строкам, а в пункте «Карты» данные расположены в столбец. Соответственно, напротив названия карты вы видите сумму, а напротив номера карты – валюту карты. Вторая проблема заключается в том, что при длинном названии карты и сумме, например, 10 000,00 грн для данных не хватит места.

Переворачиваем телефон в альбомный режим и видим новые проблемы:

image

Закладки выбиваются из общей сетки в дизайне. Мешает логотип.

«Хлебных крошек» нет. Для них не осталось места. Теперь пользователь не сможет быстро узнать, где он находится.

Проблема с отображением данных также присутствует. И это при том, что в моей Motorola Defy используется длинный экран 480х854 пикселей, а не более стандартный 480х800.

Моя версия дизайна

Первым делом я решил уйти от оригинальной цветовой гаммы и сделать дизайн светлым по таким причинам:

  • Лучше читается
  • Темный дизайн сильнее блекнет на улице
  • Используя «выворотку» (светлый шрифт на темном фоне), вам придется использовать больший размер и жирность шрифтов для лучшей читабельности. Некоторые надписи не вместятся по ширине.
  • Фирменные цвета компании белый и зеленый.

design

Я решил исправить логическое расположение данных о картах. Также было бы интересно реализовать настраиваемый главный экран: пользователь сам решает, какие ярлыки расположить на главном экране.

Шаблоны операций теперь стали более очевидными, благодаря заголовку.

Кнопки управления я вынес вниз на отдельную прозрачную панель (непрозрачность – 80%) и снабдил надписями. Вообще, не ко всем пунктам различных программ можно придумать очевидные иконки для людей всех возрастов. Поясняющие надписи не помешают. Теперь для них достаточно места.

Панель с кнопками я разместил внизу в портретном режиме. Сейчас устройства на Android очень сильно увеличились в размерах. На устройствах с экраном более 4 дюймов уже тяжело дотянуться до верхних кнопок и вкладок.

Я отошел от стандартного оформления вкладок Android 4:

image

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

Пользователю не обязательно нажимать на вкладки. Для перехода можно использовать жесты листания вправо и влево

Была исправлена иерархия информации с помощью перемещения «хлебных крошек»:

design

В горизонтальном положении так же видны улучшения:

design

Присутствуют «хлебные крошки». Кнопки меню я перенес наверх на прозрачную темную панель. Данные о карте даже в узкой колонке не накладываются друг на друга. Замечу, что дизайн я нарисовал в размере 400х800 пикселей, а в оригинальном дизайне такие проблемы наблюдаются даже на экране 480х854.

Для выделения в левой колонке активного пункта я использовал белый цвет. Это позволяет сформировать единое пространство с правой колонки.

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

Мой вариант:

design

Почему я выбрал такой вариант:

  • Если поставить малый интервал отображения ошибки, то пользователь не успеет прочитать
  • Слишком длинный – надоест ждать
  • Подтверждение нажатием кнопки здесь тоже не подходит, потому что от пользователя не нужно выполнение какой-либо операции. Также применение кнопки потребует от пользователя прицеливания, чтобы ее нажать. Это может быть не очень удобно в некоторых ситуациях.

Основной экран программы приглушается, чтобы явно показать неактивность приложения.

Окно с описанием ошибке также исчезнет, если вы нажмете одну из кнопок навигации на вашем устройстве. Я не стал об этом писать в сообщении, чтобы не было «много букв» и не перегружать пользователя. Такое себе «пасхальное яйцо» для экспериментаторов.

Дизайн Приват24 на iOS

Скажу честно, что опыта взаимодействия с устройствами Apple у меня нет. Скачал iOS 7 UI pack и по нему ознакомился.

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

image

Есть еще очень низкий шанс по пути до «места назначения» ошибочно нажать на пальцем на экран. Наверное, дело сноровки.

Оригинальный дизайн мобильного приложения

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

design

Мой вариант дизайна приложения

Скажу сразу, что без опыта работы с устройством, я скорее всего во многом попал мимо. 🙂

Первый вариант дизайна выполнен в стандартном стиле расположения элементов для iOS:

design

Название расположено по центру, кнопки управления также на верхней. Закладки расположены на нижней панели. Не смог придумать иконки для пунктов «Услуги» и «Сервисы». Слишком уж разношерстное наполнение этих разделов. К тому же слово «Services» переводится как услуги.

Второй вариант дизайна является больше адаптацией версии для Android и экспериментальным:

design

Закладки приложения расположены на верхней панели, а нижняя панель отведена для кнопок. Кнопка «Выйти» наименее используемая и поэтому расположена в более трудном месте (для правшей).

Третий вариант дизайна отличается плиточным расположением элементов, как и в оригинальной программе. Также чисто эксперимент:

design

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

Дизайн промо-страницы

Оригинальный дизайн страницы

В исходнике дизайн имеет такой вид:

image

Начнем с ошибок по порядку.

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

В представлении страницы совершенно потерялась ключевая фраза всей страницы «Выставить счет». Эта фраза должна просто «бить» в глаза пользователю.

Иконки шагов данного процесса нарисованы хорошо, но не совсем понятен телефон с кнопкой «Оплатить» в пункте «Отправить счет».

Преимущества сервиса малозаметны и, скорее всего, будут пропущены взглядом пользователям, следящим за стрелкой.

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

Форма запроса содержит слишком много ярких отвлекающих элементов. Пользователь может отвлечься и сделать ошибку. Я бы расположил выбор валюты до самой таблицы. Иконка «Добавить логотип» где-то не там. Если у пользователя возникнут трудности с заполнением формы, то нет ссылки на помощь. Кнопки добавления и применения выглядят одинаково.

Раздел «Тарифы» я вы бы выполнил в виде таблицы, чтобы акцентировать внимание на выгодных тарифах банка.

В пустом «подвале» содержится единственная ссылка, благодаря которой страница не является тупиковой и можно куда-то из нее выйти.

Мой вариант дизайна

Моя концепция дизайна страницы:

design site

Заголовок стал максимально броским. Преимущества расположены рядом. Если же пользователь раздумывает над нажатием кнопки «Выставить счет», то рядом есть кнопка «Узнать больше», которая расскажет подробности о сервисе.

Адаптация дизайна страницы к мобильным устройствам:

design site

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

Share This:

Pavel Churiumov

Beginner web-programmer and not beginner designer. :)

Leave a Reply