View
413
Download
4
Category
Preview:
DESCRIPTION
Citation preview
Оптимизация интерфейсов под touch-девайсы
Павел Шут, EPAM Systems
Mobile UX
Новые проблемы
• стратегия оптимизации контента• оптимизация под контекст использования• новые способы интерактивности (жесты)• создание новых стандартов
Особенности устройств
• Разные размеры и пропорции экранов• Прямое взаимодействие с экраном• Ограниченная интерактивность • Многообразие платформ и возможностей
браузеров• Ограниченные ресурсы
Претензии пользователей
1. скорость загрузки сайта2. работоспособность сайта3. удобство использования
UX-оптимизации для устройств
Текст
• Сделайте текст больше »
Текст
• Сделайте текст больше• Оставляйте место для текста• Избегайте несистемных шрифтов »
» Избегай несистемных шрифтов
• Не все браузеры поддерживают• меньше скачивать• меньше ресурсозатраты девайса — лучше
впечатления
Текст
• Сделайте текст больше• Оставляйте место для текста• Избегайте несистемных шрифтов• Текст в картинках — зло
Картинки
Картинки
• избегайте больших картинок • очень большие картинки могут не
отображаться совсем• чем меньше картинок, тем лучше• @2x картинки не всегда нужны• Используйте CSS-градиенты и векторные
иконки
Ввод данных
Ввод данных
• сделайте больше поля ввода• побольше расстояние между кнопками• не стилизуйте раскрывушки!• ставьте подписи перед полями ввода
Интерактив
Интерактив
• Предусматривайте разные способы ввода: выпадающие меню и контекстные действия должны открываться по нажатию
• Не забывайте делать состояния для кнопок и других интерактивых элементов
• Избегайте модальных диалогов – неудобно, бывает много косяков– вместо них попробуйте аккордионы, эл-ты, которые
появляются на месте нажатия, не поверх страницы• Избегайте фиксированных элементов (которые не
скроллятся со страницей)
Интерактив
• Предусматривайте разные способы ввода: выпадающие меню и контекстные действия должны открываться по нажатию
• Не забывайте делать состояния для кнопок и других интерактивых элементов
• Избегайте модальных диалогов – неудобно, бывает много косяков– вместо них попробуйте аккордионы, эл-ты, которые
появляются на месте нажатия, не поверх страницы• Избегайте фиксированных элементов (которые не
скроллятся со страницей)
Вывод
• Проще• Больше• Гибче
Спасибо!
Recommended