Особенности проектирования интерфейсов
Фил Смирнов, Motka Design Studiohttp://motka.ru
для мобильных устройств
О чем я расскажу:• Коротко о моем собственном опыте проектирования интерфейсов
• Платформы для мобильных приложений. Единый кроссплатформенный интерфейс.
• Принципиальные различия мобильных и web- интерфейсов.
• “Язык” интерфейса. Стандартизация UI элементов и парадигм. В чем креатив?
• Методика процесса проектирования
Мой опыт проектирования
• Что такое проектирование? Зачем оно нужно с точки зрения дизайнера?
• Скорость, Гибкость, Целесообразность• Газета.Ру - Motka - inVenture
• News360 - Pronto - Vidimax / Vichatter
• UXi Copenhagen, Web 2.0 EXPO
Мобильные платформы 2012
• iPhone
• iPad
• Android Phone 2.x
• Android Honeycomb(Tablet)
• Windows Phone 7/8
• Blackberry + Playbook
• Symbian native
• HTML5+CSS3 (webkit)
• Opera Mini
• Kindle, Bada, etc..
Что называют мобильными приложениями?
Единый кроссплатформенный интерфейс
• Различия в парадигмах UI: iPhone vs Android
• Различный форм-фактор экрана: Smartphone vs Tablet
• Ограничения: HTML5 vs Native
Технически - самый компромиссный вариант: HTML5 приложение + Sencha/PhoneGap bundle
Различия мобильных и web-интерфейсов
• Контекст использования• Размеры экрана
• Кол-во информации• Модальности/параллельные потоки• Цена клика, интерактивность• Geo-location
Стандартизация UI
• Что в ней хорошего? Зачем она нужна?“Язык” интерфейса.
• Стандартные контролы• Стандартные пиктограммы (quiz?
awesome font)
• Работа с референсами
Куда девать “креатив”?• Метафора (от красоты отдельных экранов, к цельному впечатлению)
• Easy-to-use - универсальная мотивация
• “Рыба” - Interface design is copywriting (диалог с пользователем)
• Анимация, переходы - возможность объяснить что к чему, без слов.
Методика проектирования
• Сбор бизнес-требований• Портрет ЦА• Юзкейсы
• Навигационная карта (Objects + Actions + Paradigms)
• Wireframes (схемы страниц)
Что на выходе?
• Как показывать результат клиенту?• Задача? - Решение!• Картинки или прототип?• Связка с дизайном и разработкой
(feedback loops, agile development)
Спасибо за внимание!
Что вам запомнилось?
1. ____________________
2. __________________
3. ____________________