Mobile UI @Levelapp.me

UI мобильных приложений

Илья Чернецкийi-Free Innovationsicher@i-free.com

@daydreamer

Чем я занимаюсь

• http://getdealhunter.com• http://coinkeeper.me• http://relevanceto.me• Еще несколькими мобильными

приложениями, которые еще не выпущены

О чем я НЕ расскажу сегодня

• О том чем UI отличается от UX• О семантической разметке• О «применении BMC, Empathy Map,

диаграммы Кано для оценки Usability в рамках UCD подхода»

О чем я расскажу сегодня

• О способах взаимодействия с touch-интерфейсами

• Об основных типах навигации• О практике проектирования мобильных

интерфейсов• О том как создать оригинальный интерфейс• О том почему нужно (хоть и опасно) рвать

шаблоны пользователей• Об инструментах проектирования

Старые добрые интерфейсы

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

Touch-интерфейс

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

поворот и т.п.)• Голосовой ввод

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

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

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

Что нужно знать о проектировании мобильных интерфейсов?

• iOS Human Interface Guidelines• Android Design• Pttrns.com

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

Нижний (или верхний) таббар

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

Dashboard

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

Боковая навигация

А также

А также

А также

А также

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

С чего начать проектирование?

• Опередите основное и самое частое действие пользователя после открытия приложения

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

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

• Нажать на кнопку «Добавить»• Выбрать откуда списываем• Выбрать на что расходуем• Ввести сумму• Выбрать дату• Нажать «Сохранить»

• Как уменьшить количество действий вдвое?

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

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

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

благодарен)

А дальше?

• Напишите список того, что еще может делать пользователь в приложении

• Оптимизируйте

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

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

Помните об инструментарии

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

(потряхивание, поворот и т.п.)• Голосовой ввод

Как создать оригинальный интерфейс?

• Поймите зачем вам нужен оригинальный интерфейс

• Попробуйте 5, 10, 20, 30 существующих заменителей и поймите что в них не так

• Изучайте опыт других, копируйте понравившиеся приемы себе

• Ищите цитаты и аналогии

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

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

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

Почему полезно рвать шаблоны пользователей?

• Потому что без этого невозможен прогресс • «Лучше день потерять, потом за пять

минуть долететь»• Оригинальность привлекает обозревателей

и ревьюеров аппстора• И в конце концов, зачем делать то, что уже

тысячи раз сделано до вас?

Почему опасно рвать шаблоны пользователей?

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

Какие инструменты проектирования использовать?

• Balsamiq Mockups• Mockup Builder• Invision• Proto.lo• UI stencils• Доска и маркер• Бумага и ручка

Нужно ли тестировать интерфейсы и как?

• Нужно, но осторожно• Фокус группы не работают• Индивидуальные интервью не обеспечивают

репрезентативность• Лучший способ тестирования – это MVP• Он же – самый дорогой из вышеперечисленных• Если вы создали приложение для себя – у вас

есть по крайней мере один пользователей, если «для людей» – может не быть ни одного

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

Поверьте человеку с маркетинговым образованием

Вопросы?

Илья Чернецкийi-Free Innovationsicher@i-free.com

@daydreamer