По внутренней статистике Почты Mail.Ru, 80% файлов, отправляемых по email — изображения. Мы и сами каждый день шлём десятки макетов, прототипов и скриншотов. Конечно, мы захотели сделать такой распространенный сценарий удобнее, и нам это удалось. В результате отправлять фото и видео из нашего iOS-приложения стало гораздо удобнее и быстрее, чем у конкурентов. Например, чтобы прикрепить к письму три фотографии, в Почте Mail.Ru нужно всего пять нажатий. Это на 10 меньше, чем в Gmail, и на целых 13 — чем в Apple Mail. Под катом рассказ о работе над этой задачей, от возникновения идеи до её воплощения, а также несколько тяжелых гифок.
Выявление пользовательского сценария
Работа над новыми фичами проходит в несколько этапов. Первый — выявление важных пользовательских сценариев. Что пользователи часто делают с помощью нашего приложения? Что можно улучшить? В поисках ответа мы собираем комментарии из обратной связи и App Store, проводим опросы бета-тестеров и анализируем статистику. Именно так выяснилось, что через приложение отправляют больше писем с файлами, чем через веб.
Среднее число файлов, отправляемых через приложение Почты Mail.Ru и через веб-версию Почты: на одного человека, на одно письмо. Внутренняя статистика Mail.Ru, май 2015
И что со смартфонов чаще всего шлют изображения — 80,5% от общего числа файлов.
Типы файлов, прикрепляемых к письмам в приложении Почты Mail.Ru для iOS. Внутренняя статистика Mail.Ru, август 2014
Мы давно и планомерно упрощаем написание письма и прикрепление к нему файлов:
- добавили подсказки при вводе email с транслитерацией;
- сделали список часто используемых контактов, который синхронизирован с вебом;
- поддержали выбор файлов из Облака Mail.Ru, Dropbox и других хранилищ;
- добавили возможность сжимать картинки перед отправкой.
Теперь же мы сосредоточились на прикреплении к письмам изображений.
Исходное состояние
До улучшений прикрепление одного фото требовало 5 нажатий:
- Тапнуть на значок скрепки.
- Выбрать пункт «Фото и видео».
- Выбрать альбом.
- Выделить фотографию.
- Нажать «Готово».
Лучше, чем в Apple Mail, но далеко от идеала.
Первые улучшения
Опросили пользователей, посмотрели статистику по бета-версиям: практически все фотографии отправляются из альбома Camera Roll («Фотопленка»). У многих пользователей других альбомов и вовсе нет. Логичное изменение — избавиться от шага с выбором альбома. Теперь Camera Roll открывается сразу, а чтобы выбрать другой альбом, пользователь нажимает «Альбомы».
Затем мы сделали удобнее выбор нескольких фото, добавив мультиселект по свайпу. Теперь чтобы выбрать много фото или видео сразу, не нужно тапать по каждому из них — достаточно провести пальцем.
Дизайн
Прикрепление фотографии к письму по-прежнему требовало четырех действий. Мы поставили себе задачу сократить эту цифру до трех, не ухудшая при этом юзабилити остальных сценариев, таких как прикрепление файлов из других приложений. Было подготовленно несколько вариантов (здесь и ниже покажем их на примере макетов для приложения myMail, работа над которым ведется параллельно).
От варианта №1 мы сразу отказались: две иконки рядом сбивают с толку и затрудняют выбор. К тому же, количество действий не уменьшается. У остальных макетов были как плюсы, так и минусы. Например, в варианте №2 иногда приходится долго скроллить миниатюры, чтобы найти нужную фотографию. Зато пользователь не путается, потому что остается в том же контексте — на экране написания письма. Чтобы выбрать лучший вариант, мы провели тестирование.
Прототипирование и проверка
Варианты дизайна полезно показывать ребятам из других отделов, чтобы собрать первые отзывы и комментарии. Мы дали коллегам макеты и проанализировали их реакцию. По результатам опроса выбрали вариант номер два — с миниатюрами в диалоге.
Следующий этап работы над фичей — прототипирование. С прототипом можно пробовать фичу в действии, не тратя время на разработку. Мы используем разные инструменты для прототипирования — в данном случае прототип был собран в приложении POP.
Готовый прототип передали в юзабилити-лабораторию. Для тестирования мы пригласили пользователей приложения Почты, которые не связаны в своей профессиональной деятельности ни с дизайном, ни с разработкой. Их просили прикрепить к письму как одну фотографию, так и несколько. Для контроля использовался eye tracker, фиксирующий движение глаз при работе с мобильным устройством. Тестирование показало, что такой вариант прикрепления фотографий прост и удобен. Нашлись и недостатки:
- Люди не всегда замечали, что после выделения фото один из пунктов под файлами превращался в кнопку «прикрепить».
- Пользователи попросили показывать количество выбранных файлов.
Все комментарии и наблюдения мы учли в новом варианте дизайна. Кнопка стала заметней, на ней указывалось количество фотографий.
Этот дизайн мы и передали в разработку.
Бета-тестирование
У каждого из наших приложений есть база бета-пользователей, которые получают обновление раньше официального релиза. Часто они помогают выявить баги и недочеты или наталкивают на мысли о том, как можно улучшить фичу. Так было и на этот раз: замечания бета-тестеров подали нам идею — сделать кнопку прикрепления фото еще более заметной и удобной, за что им большое спасибо.
Вот как менялась кнопка прикрепления в процессе тестирования дизайна.
Итак, в сухом остатке: теперь в Почте Mail.Ru для iOS пользователи смогут прикреплять фото быстрее, чем в других почтовых клиентах. Для сравнения предлагаем посмотреть, сколько нажатий понадобится для прикрепления трех фотографий в популярных почтовых приложениях:
Приложение, версия | Количество нажатий |
---|---|
Почта Mail.Ru, 3.4 | 5 |
Почта Mail.Ru, 3.0 | 6 |
Яндекс.Почта, 2.08 | 7 |
Gmail, 4.0 | 15 |
Apple Mail, iOS 8.4 | 18 |
P.S. Мы сократили количество тапов, научив Почту для iOS угадывать, чего хочет пользователь (в нашем случае — открывать последние фото из Camera Roll). Здорово осознавать, что делаешь приложение, которое читает мысли. Если у вас есть идеи, какие еще «телепатические» фичи пригодились бы Почте Mail.Ru, расскажите о них в комментариях.
Комментарии (22)
Alex013
29.07.2015 13:34Только что сформировал черновик в Gmail под Андроид 4.4, с вложенными тремя фотками. За 7 тапов. Что я делаю не так?
kin9pin
29.07.2015 13:41+7Используешь другую ось
Alex013
29.07.2015 13:43-8Из идеологических соображений никогда не пользовался i-девайсами, но всегда был уверен, что они интуитивнее… Ошибался ;)…
kin9pin
29.07.2015 14:11В статье ни слова про почтовые клиенты под андройды, и соответственно тесты создавались под iOs'ные клиентские приложения. Вы попытались воспроизвести результат теста, не получилось. Я вам всего лишь навсего ответил почему.
Офф: всем пофигу, что вам интуитивнее, а в чем черт ногу сломит. Каждый пользуется тем, что ему привычнее/удобнее. Я не сомневаюсь в том, что ваш андройд крут, но после нескольких лет юзания iOs'а у меня нет желания привыкать к чему-то другому, тем более, если всё итак устраивает. И поверьте, идеология тут не причем: мне пофиг, что iOs-платформа закрытая; мне пофиг, кому Кук подставляет свой пердак… Мне просто хочется, чтобы заявленные функции в смартфоне работали. Удобнее или нет? Человек обладает способностью ко многим вещам привыкать. И без того в жизни хватает других более насущных вопросов, чем решать, какой почтовый клиент круче…
Redgard
29.07.2015 15:35У меня получилось за 6 нажатий, начинаю считать после создания нового письма.
DmitryKoterov
29.07.2015 13:58+5IMHO в большинстве случаев не надо никакие «мысли» читать. Нужно просто запоминать то место, где в прошлый раз был пользователь, и чтобы эта информация сохранялась перманентно между перезапусками приложения и перезагрузками телефона — это общий паттерн, уменьшающий для пользователя время взаимодействия с интерфейсами.
NAS
29.07.2015 14:11А если пойти путем от фоток, то в Mail получается не сильно больше.
slava_yashkov Автор
29.07.2015 15:05Вы имеете ввиду через системный шаринг из галереи? Безусловно, но тут все приложения наравне будут.
Redgard
29.07.2015 15:44Не понимаю как вы насчитали 18 нажатий, у меня — 6.
1. Длинное нажатие для открытия контекстного меню
2. Прокручиваем список вправо для нужной опции
3. Нажимаем «Вставить Фото или Видео»
4. Выбираем «Все Фото» (понятие Camera Roll сейчас уже не используется)
5. Выбираем фото
6. Подтвержаем
Готово!Makc666
29.07.2015 19:04+1сколько нажатий понадобится для прикрепления трех фотографий в популярных почтовых приложениях
Redgard, речь идёт о трёх фотографиях, а не одной.
Поэтому умножаем 6 на 3 = 18.
Более того, вам ещё придётся после каждого 6 шага искать свободное место в теле письма, куда Вы сможете кликнуть, чтобы сделать длинное нажатие.
HeisenbergP
29.07.2015 16:16+1Не хотите ли сделать cocoa pod и выложить кастомный пикер в open source?
Yan169
29.07.2015 22:27+1Процесс поиска занимательный, но по факту вы скопировали решение из iMessage. :) Что в общем-то неплохо, т.к. решение у них удачное.
t80
17.08.2015 06:30Проверять лично лень т.к. придётся заводить аккаунт на мэил.ру, но правильно ли я понял, что если мне надо выбрать фотографию сделанную сто снимков назад, то мне надо потратить около 30-ти свайпов на прокручивание чтобы выбрать нужную?
slava_yashkov Автор
22.08.2015 00:49Нет, не правильно, для вашей ситуации есть кнопка «Все фото и видео».
И наше приложение подходит для любого почтового сервиса, а не только Mail.Ru.t80
22.08.2015 08:18Спасибо, заинтересовали. Скачал, покрутил — функционал неплохой. Однако, вместо 300 фотографий показывает только одну — ту, которую ещё не засосало в айклауд.
Fuco
Отличное решение поставленной задачи.