Проектирование мобильных пользовательских интерфейсов

Алексей Иванов, 2009

О чем пойдет речь

1. Процесс дизайна для мобильных устройств2. Аудитория3. Контекст4. Задачи5. Ограничения и особенности

Процесс

• Процесс все тот же: 1. Исследование пользователей и предметной

области2. Моделирование персонажей и контекстов

использования3. Выработка требований 4. Концептуальное проектирование5. Детальное проектирование6. Сопровождение разработки 

 1. Нюансы мобильного проектирования касаются, в

первую очередь, задач пользователей, контекста использования продукта и технических ограничений.

Аудитория

Аудитория

• Отличается от аудитории немобильной версии • Другие персонажи, другой контекст, разные потребности

и задачи• Пользователи мобильны, легко отвлекаются, постоянно

взаимодействуют с окружающей средой

Контекст

Контекст

Контекст

— один из самых важных аспектов, который нужно учитывать при проектировании мобильных продуктов:  • В какой окружающей среде и где географически

находится пользователь?• Что он делает одновременно с использованием

мобильного устройства?• Что происходит с его вниманием?• Как меняются его цели и задачи?• Какие взаимодействия поддерживает его телефон?• Что происходит с сигналом в сети передачи данных?

Контекст

Задачи пользователей

Задачи пользователей

• Определяются целями пользователей и ограничениями мобильной среды

• Многие задачи, востребованные на больших экранах, просто не интересуют мобильных пользователей

• Многие задачи трудно выполнимы на мобильных устройствах (например, требующие сложного ввода данных)

• Задачи менее комплексные, чем на больших устройствах

• Задача часто ситуативна и тесно связана с контекстом

Ограничения и особенности мобильной среды

Ограничения и особенности мобильной средыПроблемы: 1. Сложность ввода 2. Размер экрана3. Модальность вывода4. Сигнал сотовой сети и скорость загрузки 5. Многообразие и серьезные различия между

мобильными устройствами

Проектирование для мобильного веба1. Статистика по моделям телефонов для вашей аудитрии2. Особенности мобильных браузеров3. Плотность пикселей (разрешающая способность)

Картинка: MobiForge

Проектирование для мобильного веба4. Размер экрана

Картинка: “dotMobi Mobile Web Developer's Guide”

Проектирование для мобильного веба

Картинка: MobiForge

Проектирование для мобильного веба5. Макетирование сайта• Порядок представления информации• «Выбор» вместо «ввода» • Стандарты верстки

6. Наполнение, копирайтинг7. Ссылки, изображения, аудио и видео

Есть что почитать?

Barbara BallardDesigning the Mobile User Experience

Scott WeissHandheld Usability

Matt Jones, Gary Marsden  Mobile Interaction Design

Спасибо! 

Алексей Иванов, 2009explanent.ruexplanent@gmail.com