1. UI мобильных приложений
Илья Чернецкий
i-Free Innovations
icher@i-free.com
@daydreamer

2. Чем я занимаюсь
• http://getdealhunter.com
• http://coinkeeper.me
• http://relevanceto.me
• Еще несколькими мобильными
приложениями, которые еще не выпущены

3. О чем я НЕ расскажу сегодня
• О том чем UI отличается от UX
• О семантической разметке
• О «применении BMC, Empathy
Map, диаграммы Кано для оценки Usability
в рамках UCD подхода»

4. О чем я расскажу сегодня
• О способах взаимодействия с touch-
интерфейсами
• Об основных типах навигации
• О практике проектирования мобильных
интерфейсов
• О том как создать оригинальный интерфейс
• О том почему нужно (хоть и опасно) рвать
шаблоны пользователей
• Об инструментах проектирования

5. Старые добрые интерфейсы
• Клик (чаще всего)
• Ввод данных с клавиатуры
• Drag & drop
• Голосовые команды (очень редко)

6. Touch-интерфейс
• Нажатие
• «Смахивание», «скольжение» и
«вытягивание»
• Движения двумя пальцами (pinch, вращение)
• Длинное нажатие
• Drag & Drop
• Ввод с клавиатуры
• Перемещение в пространстве
(потряхивание, поворот и т.п.)
• Голосовой ввод

7. Первые мобильные интерфейсы

8. Современные мобильные
интерфейсы

9. Помните о богатстве своего
инструментария

10. Что нужно знать о проектировании
мобильных интерфейсов?
• iOS Human Interface Guidelines
• Android Design
• Pttrns.com

11. Три основных типа навигации
Нижний (или
верхний) таббар

12. Три основных типа навигации
Dashboard

13. Три основных типа навигации
Боковая навигация

14. А также

15. А также

16. А также

17. А также

18. Существующие гайдлайны – не
панацея и иногда даже вредны

19. С чего начать проектирование?
• Опередите основное и самое частое
действие пользователя после открытия
приложения
• Разложите его на составные части
• Уберите половину
• Придумайте как ускорить остальные

20. Пример: занесение расходов
• Нажать на кнопку «Добавить»
• Выбрать откуда списываем
• Выбрать на что расходуем
• Ввести сумму
• Выбрать дату
• Нажать «Сохранить»
• Как уменьшить количество действий вдвое?

21. Пример: занесение расходов

22. Пример: занесение расходов

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

24. А дальше?
• Напишите список того, что еще может
делать пользователь в приложении
• Оптимизируйте

25. Пример: куда засунуть
дополнительные действия?

26. Использовать «слайдинг»

27. Помните об инструментарии
• Нажатие
• «Смахивание», «скольжение» и
«вытягивание»
• Движения двумя пальцами (pinch, вращение)
• Длинное нажатие
• Drag & Drop
• Ввод с клавиатуры
• Перемещение телефона в пространстве
(потряхивание, поворот и т.п.)
• Голосовой ввод

28. Как создать оригинальный
интерфейс?
• Поймите зачем вам нужен оригинальный
интерфейс
• Попробуйте 5, 10, 20, 30 существующих
заменителей и поймите что в них не так
• Изучайте опыт других, копируйте
понравившиеся приемы себе
• Ищите цитаты и аналогии

29. Пример: просмотр и добавление
задач в таск-менеджере
- Содержание задачи или события
- Область/проект
- Время
- Приоритет

30. Пример: просмотр и добавление
задач в таск-менеджере

31. Почему полезно рвать шаблоны
пользователей?
• Потому что без этого невозможен прогресс
• «Лучше день потерять, потом за пять
минуть долететь»
• Оригинальность привлекает обозревателей
и ревьюеров аппстора
• И в конце концов, зачем делать то, что уже
тысячи раз сделано до вас?

32. Почему опасно рвать шаблоны
пользователей?
• Потому что вы можете быть неправы
• Потому что пользователя придется обучать
• Потому что не все захотят переучиваться
• Потому что разработка дороже
• Потому что дизайн дается сложнее

33. Какие инструменты проектирования
использовать?
• Balsamiq Mockups
• Mockup Builder
• Invision
• Proto.lo
• UI stencils
• Доска и маркер
• Бумага и ручка

34. Нужно ли тестировать интерфейсы и
как?
• Нужно, но осторожно
• Фокус группы не работают
• Индивидуальные интервью не обеспечивают
репрезентативность
• Лучший способ тестирования – это MVP
• Он же – самый дорогой из
вышеперечисленных
• Если вы создали приложение для себя – у вас
есть по крайней мере один
пользователей, если «для людей» – может не
быть ни одного

35. Юзабилити – такая же
«наука», как маркетинг. В них есть
правила, но побеждают те, кто их
нарушают
Поверьте человеку с
маркетинговым образованием

36. Вопросы?
Илья Чернецкий
i-Free Innovations
icher@i-free.com
@daydreamer