i forum julia_klimentovskaya_041712_reduced

Особенности UX проектирования для мобильных платформ

Особенности UX проектирования для мобильных платформ

Юлия КлиментовскаяHead of UX and Design

© 2012 Cogniance Inc. All Rights Reserved.

http://www.gracerodriguez.com/2011/10/cereal-killer-user-experience-vs-user-interface-ux-v-ui/

http://www.flickr.com/photos/annaveyard/5828303133/

30% - первый день

7% - через 10 дней

2% - через месяц

1% - длительное использование

30-60 секунд - критические

1 ошибка - потеря пользователя


1. Форм-фактор

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

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

4. Особенности девайса

5. Актуальность

Основные UX факторы


Форм-фактор

• Количество информации на экране

• Приоретизация контента и действий

• Дефрагментация контента на блоки

• Вид отображения информации

• Выбор и размер контролов


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

• Кто будет пользоваться?

• Какие задачи нужно решить?

• Когда и где чаще будут использовать?

• Эмоциональная связь с пользователем

• Интерфейс удобен, эстетичен и полезен


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

ЭмпаX тия (греч. ἐν – «в» + греч. πάθος –

«страсть», «страдание») – осознанное

сопереживание текущему

эмоциональному состоянию другого

человека, без потери ощущения внешнего

происхождения этого переживания.


http://startupsthisishowdesignworks.com/

Минимализм

http://startupsthisishowdesignworks.com/

Стандарты

http://cogniance.com

Эстетика


GPSСенсор приближенияАкселерометрФотокамераВидеокамераВспышкаГромкоговорительКомпасМикрофонGPRS, WiFi..

Особенности девайса


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

http://resizemybrowser.comhttp://responsivepx.com/

Mobile vs. Web

• Контент, специфический для времени и

контекста• Один скрин/одно приложение одномоментно• Вертикальная навигация вместо

горизонтальной – 90% • Минимум графики• Глобальная навигация вместо контекстной• Футер почти не используется• Минимум помощи• Частые прерывания в работе

Mobile vs. Web


• Нативное приложение• Контент доступный через веб-браузер• Гибридное приложение

Выбор?


Responsive Design

• Соответствие гайдлайнам, gestures• Минимум графики – HTML5 + CSS (тени,

градиенты, скругления, шрифты). Контраст.• Определение вероятных действий

пользоватлей• Удобная навигация, расположение

контролов• Акцент/подсветка главного действия• Фреймворки – jQuery, Sencha, Jo, jQTouch

Best Practices


• Lazy loading, прогрес бары и спиннеры –

2 сек., сабнейлы, валидация данных,

статус системы, плавные преходы,

фоновый режим• Кликабельные элементы – фидбэк• Обратная связь – подтверждение

действий• Запоминать предпочтения

пользователей• Избегать скроллинг

Best Practices


• Полноэкранный режим, скейлинг и

поворот• Всегда кнопка Закрыть в попапе• Приложение/выбор/действие – 3 шага• Lazy loading, прогрес бары и спиннеры –

2 сек., сабнейлы, валидация данных,

статус системы, плавные преходы,

фоновый режим• Кликабельные элементы – фидбэк

Best Practices


Спасибо!


Юлия Климентовская

Head of UX & Design

[email protected]

www.cogniance.com

i forum julia_klimentovskaya_041712_reduced

Documents

ux head of ux

best practices lazy

responsive design

gestures html5

gps gprs