Графический дизайн для разработчиков программ In English    
Услуги Статьи Портфолио Частые вопросы О компании Вакансии Контакты
 

Дизайн пользовательского интерфейса сенсорного киоска e-port

Группа e-port — один из первых российских представителей индустрии, уделивших особое внимание визуально-эргономическим качествам интерфейса киосков. Последняя версия всех элементов интерфейса терминалов оплаты e-port была разработана компанией VisualPharm. Терминал позволяет организовать прием платежа без участия оператора за любые услуги, доступные в Платежной системе e-port, в удобной и интуитивно понятной форме.

 

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

  • Использование корпоративных цветов компании e-port
    Цветовое решение фоновых изображений близко к корпоративному синему цвету e-port из соображений брэндинга. Из тех же соображений кнопки «К оплате», «Другой платеж», «Совершить платеж» и др. выполнены в оранжевом корпоративном цвете e-port.

  • Рациональное использование пространства экрана
    Для более рационального использования пространства экрана мы выбрали вертикальное расположение полей — одно под другим. Второстепенные элементы управления, такие как кнопки "Назад", "Отмена", вынесены с основного поля в колонку слева и сделаны темнее, чтобы не отвлекать внимание от основных элементов. Такое расположение также позволяет избежать ошибок, которые часто случаются, если кнопки подтверждения и отмены находятся рядом.

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

  • Удобство использования функциональных кнопок
    Кнопки были сделаны достаточно большими для того, чтобы пользователю было удобно на них нажимать.
  • Последовательность стиля
    Основные функциональные кнопки и все заголовки расположены одинаково. Например, кнопки «Назад», «Отмена» и заголовки экранов всегда находится на одном и том же месте. Все кнопки сделаны в одном стиле.

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

  • Возможноcть использования терминалов людьми, не владеющими русcким языком
    Экраны были разработаны так, чтобы терминалами e-port могли пользоваться люди, не владеющим русским языком.


Экран «Оплата услуг»

Проведенный нами анализ терминалов конкурентов e-port показал, что большинство киосков позволяет оплачивать услуги, но первый экран, который видит пользователь — экран «Оплата услуг» — не содержит никакой информации, что, как минимум, не логично. Представьте себе, что вы заходите в магазин «Продукты», а там вместо названий отделов висит табличка «Продукты» и вам надо подтвердить охраннику, что вы намерены купить продукты :) Поэтому на первом экране мы сразу показываем категории услуг, которые можно оплатить.

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

Категории расположены в порядке востребованности услуг.

Категория "Другое" расположена в нижней правой части экрана, там, где пользователи могут ожидать увидеть ее или кнопку "Далее".

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

Экран «Введите номер телефона»

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

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

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

Экран "Внесение наличных" (до внесения денег)

До внесения денег в большинстве терминалов показывается информация вида «Вы внесли 0 руб. 00 копеек». Представьте себе операционистку в банке, которая говорит вам: «Здравствуйте, Вы внесли на счет 0 руб. 00 копеек» :) В терминалах e-port до внесения денег пользователь видит инструкции по совершению платежа.

Экран "Внесение наличных" (после внесения денг)

После того, как купюра вставлена в купюроприемник, появляется информация о внесенной сумме, комиссии системы и размере платежа.

Экран «Подтверждение платежа»

На экране не показывается никакой личной информации. Чтобы человек, который стоит за вами в очереди, меньше знал и крепче спал :)

Загрузочный экран

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

Заставка "Вам необходимо дополнительное время?"

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

Заставка "Терминал не работает"

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



Nothing here
Важное замечание: все права на данные изображения принадлежат нашим клиентам. Графика размещена в портфолио с их разрешения и только для того, чтобы вы могли оценить качество работ VisualPharm.

Следующая страница  
Предыдущая страница
В начало портфолио
 
© 2009 VisualPharm. Все права защищены. 

Защита интеллектуальной собственности Конфиденциальность