Особенности UX проектирования для мобильных платформ Особенности UX проектирования для мобильных платформ Юлия Климентовская Head of UX and Design © 2012. - презентация

1 Особенности UX проектирования для мобильных платформ Особенности UX проектирования для мобильных платформ Юлия Климентовская Head of UX and Design © 2012 Cogniance Inc. All Rights Reserved.

2

3

4

5

6

7

8 30% - первый день 7% - через 10 дней 2% - через месяц 1% - длительное использование секунд - критические 1 ошибка - потеря пользователя © 2012 Cogniance Inc. All Rights Reserved.

9 1. Форм-фактор 2. Область применения 3. Цель взаимодействия 4. Особенности девайса 5. Актуальность Основные UX факторы © 2012 Cogniance Inc. All Rights Reserved.

10 Форм-фактор

11 Количество информации на экране Приоретизация контента и действий Дефрагментация контента на блоки Вид отображения информации Выбор и размер контролов © 2012 Cogniance Inc. All Rights Reserved.

12 Область применения

13 Кто будет пользоваться? Какие задачи нужно решить? Когда и где чаще будут использовать? Эмоциональная связь с пользователем Интерфейс удобен, эстетичен и полезен © 2012 Cogniance Inc. All Rights Reserved.

14 Цель взаимодействия

15 Эмпа́тия (греч. ν – «в» + греч. πάθος – «страсть», «страдание») – осознанное сопереживание текущему эмоциональному состоянию другого человека, без потери ощущения внешнего происхождения этого переживания. © 2012 Cogniance Inc. All Rights Reserved.

16 Минимализм

17 Стандарты

18 Эстетика © 2012 Cogniance Inc. All Rights Reserved.

19 GPS Сенсор приближения Акселерометр Фотокамера Видеокамера Вспышка Громкоговоритель Компас Микрофон GPRS, WiFi.. Особенности девайса © 2012 Cogniance Inc. All Rights Reserved.

20 Актуальность

21

22 Mobile vs. Web

23 Контент, специфический для времени и контекста Один скрин/одно приложение одномоментно Вертикальная навигация вместо горизонтальной – 90% Минимум графики Глобальная навигация вместо контекстной Футер почти не используется Минимум помощи Частые прерывания в работе Mobile vs. Web © 2012 Cogniance Inc. All Rights Reserved.

24 Нативное приложение Контент доступный через веб-браузер Гибридное приложение Выбор? © 2012 Cogniance Inc. All Rights Reserved.

25 Responsive Design

26 Соответствие гайдлайнам, gestures Минимум графики – HTML5 + CSS (тени, градиенты, скругления, шрифты). Контраст. Определение вероятных действий пользоватлей Удобная навигация, расположение контролов Акцент/подсветка главного действия Фреймворки – jQuery, Sencha, Jo, jQTouch Best Practices © 2012 Cogniance Inc. All Rights Reserved.

27 Lazy loading, прогрес бары и спиннеры – 2 сек., сабнейлы, валидация данных, статус системы, плавные преходы, фоновый режим Кликабельные элементы – фидбэк Обратная связь – подтверждение действий Запоминать предпочтения пользователей Избегать скроллинг Best Practices © 2012 Cogniance Inc. All Rights Reserved.

28 Полноэкранный режим, скейлинг и поворот Всегда кнопка Закрыть в попапе Приложение/выбор/действие – 3 шага Lazy loading, прогрес бары и спиннеры – 2 сек., сабнейлы, валидация данных, статус системы, плавные преходы, фоновый режим Кликабельные элементы – фидбэк Best Practices © 2012 Cogniance Inc. All Rights Reserved.

29 Спасибо! © 2012 Cogniance Inc. All Rights Reserved. Юлия Климентовская Head of UX & Design