Особенности проектирования интерфейсов

Фил Смирнов, 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. ____________________