mobile ui @levelapp.me
DESCRIPTION
TRANSCRIPT
Чем я занимаюсь
• 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• Он же – самый дорогой из вышеперечисленных• Если вы создали приложение для себя – у вас
есть по крайней мере один пользователей, если «для людей» – может не быть ни одного
Юзабилити – такая же «наука», как маркетинг. В них есть правила, но побеждают те, кто их нарушают
Поверьте человеку с маркетинговым образованием
