Mail.ru Group corporate blog
Interfaces
Usability
29 July 2015

Идем на рекорд: как мы оптимизировали прикрепление изображений в Почте Mail.Ru для iOS



По внутренней статистике Почты 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 нажатий:
  1. Тапнуть на значок скрепки.
  2. Выбрать пункт «Фото и видео».
  3. Выбрать альбом.
  4. Выделить фотографию.
  5. Нажать «Готово».

Лучше, чем в Apple Mail, но далеко от идеала.

Первые улучшения


Опросили пользователей, посмотрели статистику по бета-версиям: практически все фотографии отправляются из альбома Camera Roll («Фотопленка»). У многих пользователей других альбомов и вовсе нет. Логичное изменение — избавиться от шага с выбором альбома. Теперь Camera Roll открывается сразу, а чтобы выбрать другой альбом, пользователь нажимает «Альбомы».



Затем мы сделали удобнее выбор нескольких фото, добавив мультиселект по свайпу. Теперь чтобы выбрать много фото или видео сразу, не нужно тапать по каждому из них — достаточно провести пальцем.



Дизайн


Прикрепление фотографии к письму по-прежнему требовало четырех действий. Мы поставили себе задачу сократить эту цифру до трех, не ухудшая при этом юзабилити остальных сценариев, таких как прикрепление файлов из других приложений. Было подготовленно несколько вариантов (здесь и ниже покажем их на примере макетов для приложения myMail, работа над которым ведется параллельно).
  






От варианта №1 мы сразу отказались: две иконки рядом сбивают с толку и затрудняют выбор. К тому же, количество действий не уменьшается. У остальных макетов были как плюсы, так и минусы. Например, в варианте №2 иногда приходится долго скроллить миниатюры, чтобы найти нужную фотографию. Зато пользователь не путается, потому что остается в том же контексте — на экране написания письма. Чтобы выбрать лучший вариант, мы провели тестирование.

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


Варианты дизайна полезно показывать ребятам из других отделов, чтобы собрать первые отзывы и комментарии. Мы дали коллегам макеты и проанализировали их реакцию. По результатам опроса выбрали вариант номер два — с миниатюрами в диалоге.

Следующий этап работы над фичей — прототипирование. С прототипом можно пробовать фичу в действии, не тратя время на разработку. Мы используем разные инструменты для прототипирования — в данном случае прототип был собран в приложении POP.

Готовый прототип передали в юзабилити-лабораторию. Для тестирования мы пригласили пользователей приложения Почты, которые не связаны в своей профессиональной деятельности ни с дизайном, ни с разработкой. Их просили прикрепить к письму как одну фотографию, так и несколько. Для контроля использовался eye tracker, фиксирующий движение глаз при работе с мобильным устройством. Тестирование показало, что такой вариант прикрепления фотографий прост и удобен. Нашлись и недостатки:
  1. Люди не всегда замечали, что после выделения фото один из пунктов под файлами превращался в кнопку «прикрепить».
  2. Пользователи попросили показывать количество выбранных файлов.

Все комментарии и наблюдения мы учли в новом варианте дизайна. Кнопка стала заметней, на ней указывалось количество фотографий.



Этот дизайн мы и передали в разработку.

Бета-тестирование


У каждого из наших приложений есть база бета-пользователей, которые получают обновление раньше официального релиза. Часто они помогают выявить баги и недочеты или наталкивают на мысли о том, как можно улучшить фичу. Так было и на этот раз: замечания бета-тестеров подали нам идею — сделать кнопку прикрепления фото еще более заметной и удобной, за что им большое спасибо.



Вот как менялась кнопка прикрепления в процессе тестирования дизайна.



Итак, в сухом остатке: теперь в Почте 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, расскажите о них в комментариях.

+25
11.9k 38
Comments 23