Ad
More Related Content
What's hot (17)
Similar to Mobile UI @Levelapp.me (20)
Ad
More from Ilya Chernetskiy (Tchernetski) (14)
Ad
Mobile UI @Levelapp.me
- 1. UI мобильных приложений Илья Чернецкий i-Free Innovations [email protected] @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 • Ввод с клавиатуры • Перемещение в пространстве (потряхивание, поворот и т.п.) • Голосовой ввод
- 8. Современные мобильные интерфейсы
- 9. Помните о богатстве своего инструментария
- 10. Что нужно знать о проектировании мобильных интерфейсов? • iOS Human Interface Guidelines • Android Design • Pttrns.com
- 11. Три основных типа навигации Нижний (или верхний) таббар
- 12. Три основных типа навигации Dashboard
- 13. Три основных типа навигации Боковая навигация
- 14. А также
- 15. А также
- 16. А также
- 17. А также
- 18. Существующие гайдлайны – не панацея и иногда даже вредны
- 19. С чего начать проектирование? • Опередите основное и самое частое действие пользователя после открытия приложения • Разложите его на составные части • Уберите половину • Придумайте как ускорить остальные
- 20. Пример: занесение расходов • Нажать на кнопку «Добавить» • Выбрать откуда списываем • Выбрать на что расходуем • Ввести сумму • Выбрать дату • Нажать «Сохранить» • Как уменьшить количество действий вдвое?
- 23. Сэкономьте время пользователя на самых частых действиях (и он будет вам благодарен)
- 24. А дальше? • Напишите список того, что еще может делать пользователь в приложении • Оптимизируйте
- 25. Пример: куда засунуть дополнительные действия?
- 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 [email protected] @daydreamer