Course User interface at Bionic University by Oleksandr Lisovskyi

1. USER INTERFACE
lesson №8

2. Alex Lisovsky
Co-Founder at ZZ Photo, UX/UI designer
alexander.lisovsky@gmail.com
facebook.com/alexlisovsky, pinterest.com/alexlisovsky,
twitter.com/lisovsky

3. Принципы создания интерфейсов
для больших экранов
http://getpocket.com/a/read/752558457

4. Принципы создания интерфейсов
для больших экранов
http://getpocket.com/a/read/752558457
В ходе исследования среди 1 333
пользователей, выяснили,
что 75% людей взаимодействуют с
приложениями при помощи больших
пальцев рук, а 49% из них держат
устройство одной рукой.

5. http://getpocket.com/a/read/752558457

6. Amazon Music App
http://getpocket.com/a/read/752558457

7. Где решение?

8. Решения на уровне операционной системы
Мобильные операционные системы содержат
встроенные средства, облегчающие доступ к
элементам управления. Например, Apple
разработала сервис под названием Reachability,
благодаря которому пользователь с помощью
двойного «тапа» может свернуть приложение так,
чтобы оно занимало лишь половину экрана.
Это делает те элементы, до которых невозможно
дотянуться привычным способом, доступными без
лишних сложностей.
http://getpocket.com/a/read/752558457

10. Свайп в сторону
Жест прокрутки лишь облегчает доступ
к элементам управления и меню при
использовании захвата телефона одной
рукой, однако никак не помогает
взаимодействовать с самим контентом.
http://getpocket.com/a/read/752558457

11. Свайп в сторону
http://getpocket.com/a/read/752558457

12. Элементы управления внизу экрана
Для того, чтобы облегчить совершение
самых распространенных действий,
разработчикам приложений следует
перенести элементы управления в нижнюю
часть экрана. С помощью этого решения не
только снимаются проблемы с доступностью
нужных кнопок и меню, но и улучшаются
многие другие важные метрики.
http://getpocket.com/a/read/752558457

14. Недавно Facebook
провела тестирование,
которое показало, что
перенос меню iOS-
приложения в нижнюю
часть экрана позволил
повысить показатели
вовлеченности и
удовлетворенности,
пользователям даже
стало казаться, что
приложение работает
быстрее.
http://getpocket.com/a/read/752558457

15. Action button
Cледует учитывать особенности конкретной
операционной системы — в Android нижняя часть
экрана зарезервирована для системных кнопок
навигации, поэтому если в приложении элементы
управления также будут расположены снизу, это
повысит количество ошибочных нажатий на
системные кнопки.
В руководстве разработчика Android четко сказано
о том, что использовать нижнюю часть экрана
нежелательно.
http://getpocket.com/a/read/752558457

16. Action button
Cуществует решение, которое позволит облегчить
работу с приложением на смартфоне с большим
экраном и не запутает.
Всплывающие кнопки действия показываются
«поверх» остальных элементов интерфейса и
появляются после нажатия на тот или иной пункт
меню. Они не являются элементами управления в
общепринятом смысле, но в случае приложения
Amazon Music их использование могло бы быть
оправданным.
http://getpocket.com/a/read/752558457

18. Система оплаты
проезда в киевском
метро

19. Практическое задание:
Создаем прототип терминала
самообслуживания в метро.
Функционал позволяет:
- Купить жетоны
- Купить карточку
- Пополнить карточку
- (ваши предложения)

20. Проблема

21. Текущие решения

22. История
Get your travel information,
accommodations, and tickets
in an instant - electronically!
Imagine the ease...the
simplicity! Trip-a-matic,
activated by push buttons and
your charge plate, checks
accommodations, makes
reservations, prints tickets and
bills you later!
Jules Verne never imagined it
this quick!
This is a 1956 ad for General
Motors New Departure

23. Сценарий?

24. Сценарий

25. Ограничения

26. Вдохновение

27. Практическое задание:
Создаем прототип терминала
самообслуживания в метро.
Функционал позволяет:
- Купить жетоны
- Купить карточку
- Пополнить карточку
- (ваши предложения)

28. Варианты решения: NFC
Система мобильных платежей (wireless-based payment system) —
система мобильной коммерции, обрабатывающая операции
электронной коммерции с поддержкой инфраструктуры
беспроводных сетей и беспроводного Интернет. В отличие от
систем интернет-платежей, использующих инфраструктуру сети
Интернет и WWW, беспроводные платёжные системы
обрабатывают запросы от мобильных устройств и привязанных к
определйнному месту терминалов. Эти системы объединяют
следующие особенности[1]:
1. Возможность оплаты с помощью мобильного устройства.
2. Возможности обработки транзакций POS-терминалов, точек
обслуживания, географически привязанных транзакций.
3. Безопасные протоколы беспроводных платежей.

29. Варианты решения: NFC

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

31. Варианты решения: NFC

32. Варианты решения

33. Варианты решения

34. Варианты решения

35. Варианты решения

36. Варианты решения

37. Дополнение

38. Дополнение

39. Дополнение

40. Дополнение

41. Дополнение

42. Alex Lisovsky
Co-Founder at ZZ Photo
UX/UI designer
alexander.lisovsky@gmail.com
facebook.com/alexlisovsky, pinterest.com/alexlisovsky,
twitter.com/lisovsky