Оптимизация интерфейсов под touch-девайсы

Павел Шут, EPAM Systems

Mobile UX

Новые проблемы

• стратегия оптимизации контента• оптимизация под контекст использования• новые способы интерактивности (жесты)• создание новых стандартов

Особенности устройств

• Разные размеры и пропорции экранов• Прямое взаимодействие с экраном• Ограниченная интерактивность • Многообразие платформ и возможностей

браузеров• Ограниченные ресурсы

Претензии пользователей

1. скорость загрузки сайта2. работоспособность сайта3. удобство использования

UX-оптимизации для устройств

Текст

• Сделайте текст больше »

Текст

• Сделайте текст больше• Оставляйте место для текста• Избегайте несистемных шрифтов »

» Избегай несистемных шрифтов

• Не все браузеры поддерживают• меньше скачивать• меньше ресурсозатраты девайса — лучше

впечатления

Текст

• Сделайте текст больше• Оставляйте место для текста• Избегайте несистемных шрифтов• Текст в картинках — зло

Картинки

Картинки

• избегайте больших картинок • очень большие картинки могут не

отображаться совсем• чем меньше картинок, тем лучше• @2x картинки не всегда нужны• Используйте CSS-градиенты и векторные

иконки

Ввод данных

Ввод данных

• сделайте больше поля ввода• побольше расстояние между кнопками• не стилизуйте раскрывушки!• ставьте подписи перед полями ввода

Интерактив

Интерактив

• Предусматривайте разные способы ввода: выпадающие меню и контекстные действия должны открываться по нажатию

• Не забывайте делать состояния для кнопок и других интерактивых элементов

• Избегайте модальных диалогов – неудобно, бывает много косяков– вместо них попробуйте аккордионы, эл-ты, которые

появляются на месте нажатия, не поверх страницы• Избегайте фиксированных элементов (которые не

скроллятся со страницей)

Интерактив

• Предусматривайте разные способы ввода: выпадающие меню и контекстные действия должны открываться по нажатию

• Не забывайте делать состояния для кнопок и других интерактивых элементов

• Избегайте модальных диалогов – неудобно, бывает много косяков– вместо них попробуйте аккордионы, эл-ты, которые

появляются на месте нажатия, не поверх страницы• Избегайте фиксированных элементов (которые не

скроллятся со страницей)

Вывод

• Проще• Больше• Гибче

Спасибо!