Особенности создания продукта для

мобильного веба

Динамика трафика по проектам

О докладчике

Имя: Александр Лысков

Должность: менеджер продуктов

Специализация:мобильный веб

Опыт в отрасли: с 2005 года

В Mail.ru с 2011 года

Мобильный веб: что,

для чего, для кого?

• Мобильный веб – это привычная нам всем «Глобальная сеть» (World Wide Web), но адаптированная для просмотра на мобильных устройствах.

• Мобильные устройства – это персональные устройства с доступом в интернет, которые «не привязаны к розетке». Такими устройствами являются: мобильные телефоны, смартфоны, планшетные компьютеры, навигаторы, MP3-проигрыватели и пр.

История развития

История развития

Создание продукта.

Основные этапы

1. Постановка требований к продукту («хотелки руководства», исследования)

2. Оценка ресурсов и первоначальное планирование

3. Прототипирование и дизайн

4. Server-side разработка

5. Client-side разработка

6. Тестирование

7. Запуск

8. Статистика и аналитика

9. Развитие

Постановка

требований к продукту

Задача – создание нового интерфейса

Почты для современных смартфонов с

touch-экранами. Интерфейс должен быть

красивым, функциональным,

современным и удобным.

Исходные данные и

ресурсы

• Существующий сервис Почты для «большого» веба

• Разработчики серверной части

• Разработчики клиентской части

• Системные администраторы

• Отдел UI и UX

• Отдел тестирования и поддержки

Конкретизация

требований

• Конкурентный анализ

• Исследование

• Уточнение требований (описание функционала для

альфа-версии, с указанием функционала будущих

версий)

• Совместное обсуждение будущего продукта со

всеми задействованными участниками проекта

• Повторное уточнение требований

• Утверждение итоговых требований у руководства

• И снова уточнение требований.

Оценка ресурсов и

планирование

Умножайте сроки на два!

Особенность №1

Отсутствие специалистов,

понимающих потребности

мобильных пользователей

и специфику мобильного

веба.

Прототипирование

и дизайн

Ключевые особенности:

• Маленький экран

• Управление пальцами

• Ограниченная поддержка современных

веб-технологий мобильными браузерами

• Постоянно обновляющийся и

изменяющиеся платформы, они все

молоды и постоянно вводят новшества

• Эти же критерии подходят и к дизайнерам,

только им ещё надо понимать, что дизайн

должен быть «лёгким»

Прототипирование

и дизайн

При создании дизайна, лучше всего

ориентироваться на разрешение

экрана от 320 пикселей по ширине.

Server-side

разработка

На данном этапе ключевая

особенность – адаптация

имеющихся API для нужд

мобильного веба

Client-side

разработка

Что использовать?

Client-side

разработка

Если у вас не промо-сайт, а

сложный сервис с

функциональным интерфейсом,

то не бойтесь вводить

ограничения для различных

мобильных ОС и браузеров.

Client-side

разработка

DOM (Document Object Model -

объектная модель, используемая

для XML/HTML-документов) на

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

работает очень медленно.

Поэтому,

ОПИТИМИЗАЦИЯ – НАШЕ ВСЁ!

Экранная клавиатура также

являются особенностью, т.к. её

вызов (например, при нажатии в

текстовое поле) приводит к

нежелательным сдвигам

Client-side

разработка

Client-side

разработка

Touch-event – не вариант.

Используйте событие «tap»!

Подробности тут:

Client-side

разработка

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

могут загружать файлы в web

Тестирование

Мобильных устройств СЛИШКОМ

много. Надо определить тот

«набор», который будет покрывать

основную массу пользователей

Запуск

продукта

• При запуске нового продукта

ВСЕГДА на видном месте

должна быть ссылка на

обратную связь.

• На стадии тестирования «в

бою» у пользователей должна

быть возможность

отказаться от использования

«новой версии»

Запуск

продукта

Статистика и

аналитика

Надо логировать и

обсчитывать каждый клик

и каждый показ!

Мониторинг

продукта

• При запуске нового продукта

ВСЕГДА на видном месте

должна быть ссылка на

обратную связь.

• На стадии тестирования «в

бою» у пользователей должна

быть возможность

отказаться от использования

«новой версии»

Заключение

Особенности о которых надо помнить:

• «зоопарк» устройств

• сильно отличающиеся мобильные ОС

• различные и «ущербные» браузеры

• пока ещё недостаточное количество специалистов

разной направленности, но с опытом в мобильном

вебе

• для многих это единственная точка выхода в Сеть

• низкая производительность

• маленькие экраны и управление пальцами

• чаще всего низкоскоростной канал доступа и

постоянными обрывами связи

Александр Лысков

менеджер продуктов, БЮ «Почта & портал»

a.lyskov@corp.mail.ru

www.mail.ru

СПАСИБО!