Мастер-класс: Особенности создания продукта для...
DESCRIPTION
14.05.14 Мастер-класс: Особенности создания продукта для мобильного веб Спикер: Александр ЛысковTRANSCRIPT
![Page 1: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/1.jpg)
Особенности создания продукта для
мобильного веба
![Page 2: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/2.jpg)
Динамика трафика по проектам
О докладчике
Имя: Александр Лысков
Должность: менеджер продуктов
Специализация:мобильный веб
Опыт в отрасли: с 2005 года
В Mail.ru с 2011 года
![Page 3: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/3.jpg)
Мобильный веб: что,
для чего, для кого?
• Мобильный веб – это привычная нам всем «Глобальная сеть» (World Wide Web), но адаптированная для просмотра на мобильных устройствах.
• Мобильные устройства – это персональные устройства с доступом в интернет, которые «не привязаны к розетке». Такими устройствами являются: мобильные телефоны, смартфоны, планшетные компьютеры, навигаторы, MP3-проигрыватели и пр.
![Page 4: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/4.jpg)
История развития
![Page 5: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/5.jpg)
История развития
![Page 6: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/6.jpg)
Создание продукта.
Основные этапы
1. Постановка требований к продукту («хотелки руководства», исследования)
2. Оценка ресурсов и первоначальное планирование
3. Прототипирование и дизайн
4. Server-side разработка
5. Client-side разработка
6. Тестирование
7. Запуск
8. Статистика и аналитика
9. Развитие
![Page 7: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/7.jpg)
Постановка
требований к продукту
Задача – создание нового интерфейса
Почты для современных смартфонов с
touch-экранами. Интерфейс должен быть
красивым, функциональным,
современным и удобным.
![Page 8: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/8.jpg)
Исходные данные и
ресурсы
• Существующий сервис Почты для «большого» веба
• Разработчики серверной части
• Разработчики клиентской части
• Системные администраторы
• Отдел UI и UX
• Отдел тестирования и поддержки
![Page 9: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/9.jpg)
Конкретизация
требований
• Конкурентный анализ
• Исследование
• Уточнение требований (описание функционала для
альфа-версии, с указанием функционала будущих
версий)
• Совместное обсуждение будущего продукта со
всеми задействованными участниками проекта
• Повторное уточнение требований
• Утверждение итоговых требований у руководства
• И снова уточнение требований.
![Page 10: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/10.jpg)
Оценка ресурсов и
планирование
Умножайте сроки на два!
![Page 11: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/11.jpg)
Особенность №1
Отсутствие специалистов,
понимающих потребности
мобильных пользователей
и специфику мобильного
веба.
![Page 12: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/12.jpg)
Прототипирование
и дизайн
Ключевые особенности:
• Маленький экран
• Управление пальцами
• Ограниченная поддержка современных
веб-технологий мобильными браузерами
• Постоянно обновляющийся и
изменяющиеся платформы, они все
молоды и постоянно вводят новшества
• Эти же критерии подходят и к дизайнерам,
только им ещё надо понимать, что дизайн
должен быть «лёгким»
![Page 13: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/13.jpg)
Прототипирование
и дизайн
При создании дизайна, лучше всего
ориентироваться на разрешение
экрана от 320 пикселей по ширине.
![Page 14: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/14.jpg)
Server-side
разработка
На данном этапе ключевая
особенность – адаптация
имеющихся API для нужд
мобильного веба
![Page 15: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/15.jpg)
Client-side
разработка
Что использовать?
![Page 16: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/16.jpg)
Client-side
разработка
Если у вас не промо-сайт, а
сложный сервис с
функциональным интерфейсом,
то не бойтесь вводить
ограничения для различных
мобильных ОС и браузеров.
![Page 17: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/17.jpg)
Client-side
разработка
DOM (Document Object Model -
объектная модель, используемая
для XML/HTML-документов) на
мобильных устройствах
работает очень медленно.
Поэтому,
ОПИТИМИЗАЦИЯ – НАШЕ ВСЁ!
![Page 18: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/18.jpg)
Экранная клавиатура также
являются особенностью, т.к. её
вызов (например, при нажатии в
текстовое поле) приводит к
нежелательным сдвигам
Client-side
разработка
![Page 19: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/19.jpg)
Client-side
разработка
Touch-event – не вариант.
Используйте событие «tap»!
Подробности тут:
![Page 20: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/20.jpg)
Client-side
разработка
Не все мобильные устройства
могут загружать файлы в web
![Page 21: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/21.jpg)
Тестирование
Мобильных устройств СЛИШКОМ
много. Надо определить тот
«набор», который будет покрывать
основную массу пользователей
![Page 22: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/22.jpg)
Запуск
продукта
• При запуске нового продукта
ВСЕГДА на видном месте
должна быть ссылка на
обратную связь.
• На стадии тестирования «в
бою» у пользователей должна
быть возможность
отказаться от использования
«новой версии»
![Page 23: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/23.jpg)
Запуск
продукта
![Page 24: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/24.jpg)
Статистика и
аналитика
Надо логировать и
обсчитывать каждый клик
и каждый показ!
![Page 25: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/25.jpg)
Мониторинг
продукта
• При запуске нового продукта
ВСЕГДА на видном месте
должна быть ссылка на
обратную связь.
• На стадии тестирования «в
бою» у пользователей должна
быть возможность
отказаться от использования
«новой версии»
![Page 26: Мастер-класс: Особенности создания продукта для мобильного веб](https://reader033.vdocuments.site/reader033/viewer/2022042607/559489af1a28ab0e7d8b4701/html5/thumbnails/26.jpg)
Заключение
Особенности о которых надо помнить:
• «зоопарк» устройств
• сильно отличающиеся мобильные ОС
• различные и «ущербные» браузеры
• пока ещё недостаточное количество специалистов
разной направленности, но с опытом в мобильном
вебе
• для многих это единственная точка выхода в Сеть
• низкая производительность
• маленькие экраны и управление пальцами
• чаще всего низкоскоростной канал доступа и
постоянными обрывами связи