1. Оптимизация интерфейсов
под touch-девайсы
Павел Шут, EPAM Systems

2. Mobile UX

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

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

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

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

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

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

10. » Избегай несистемных шрифтов
• Не все браузеры поддерживают
• меньше скачивать
• меньше ресурсозатраты девайса — лучше
впечатления

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

12. Картинки

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

14. Ввод данных

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

16. Интерактив

17. Интерактив
• Предусматривайте разные способы ввода:
выпадающие меню и контекстные действия
должны открываться по нажатию
• Не забывайте делать состояния для кнопок и других
интерактивых элементов
• Избегайте модальных диалогов
– неудобно, бывает много косяков
– вместо них попробуйте аккордионы, эл-ты, которые
появляются на месте нажатия, не поверх страницы
• Избегайте фиксированных элементов (которые не
скроллятся со страницей)

19. Интерактив
• Предусматривайте разные способы ввода:
выпадающие меню и контекстные действия
должны открываться по нажатию
• Не забывайте делать состояния для кнопок и других
интерактивых элементов
• Избегайте модальных диалогов
– неудобно, бывает много косяков
– вместо них попробуйте аккордионы, эл-ты, которые
появляются на месте нажатия, не поверх страницы
• Избегайте фиксированных элементов (которые не
скроллятся со страницей)

20. Вывод
• Проще
• Больше
• Гибче

21. Спасибо!