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

Комментарии (22)


  1. Fuco
    29.07.2015 13:23

    Отличное решение поставленной задачи.


  1. Alex013
    29.07.2015 13:34

    Только что сформировал черновик в Gmail под Андроид 4.4, с вложенными тремя фотками. За 7 тапов. Что я делаю не так?


    1. kin9pin
      29.07.2015 13:41
      +7

      Используешь другую ось


      1. Alex013
        29.07.2015 13:43
        -8

        Из идеологических соображений никогда не пользовался i-девайсами, но всегда был уверен, что они интуитивнее… Ошибался ;)…


        1. kin9pin
          29.07.2015 14:11

          В статье ни слова про почтовые клиенты под андройды, и соответственно тесты создавались под iOs'ные клиентские приложения. Вы попытались воспроизвести результат теста, не получилось. Я вам всего лишь навсего ответил почему.

          Офф: всем пофигу, что вам интуитивнее, а в чем черт ногу сломит. Каждый пользуется тем, что ему привычнее/удобнее. Я не сомневаюсь в том, что ваш андройд крут, но после нескольких лет юзания iOs'а у меня нет желания привыкать к чему-то другому, тем более, если всё итак устраивает. И поверьте, идеология тут не причем: мне пофиг, что iOs-платформа закрытая; мне пофиг, кому Кук подставляет свой пердак… Мне просто хочется, чтобы заявленные функции в смартфоне работали. Удобнее или нет? Человек обладает способностью ко многим вещам привыкать. И без того в жизни хватает других более насущных вопросов, чем решать, какой почтовый клиент круче…


    1. Redgard
      29.07.2015 15:35

      У меня получилось за 6 нажатий, начинаю считать после создания нового письма.


  1. DmitryKoterov
    29.07.2015 13:58
    +5

    IMHO в большинстве случаев не надо никакие «мысли» читать. Нужно просто запоминать то место, где в прошлый раз был пользователь, и чтобы эта информация сохранялась перманентно между перезапусками приложения и перезагрузками телефона — это общий паттерн, уменьшающий для пользователя время взаимодействия с интерфейсами.


    1. m08pvv
      29.07.2015 14:27

      И через пару итераций получить Фантом ОС?


  1. NAS
    29.07.2015 14:11

    А если пойти путем от фоток, то в Mail получается не сильно больше.


    1. slava_yashkov Автор
      29.07.2015 15:05

      Вы имеете ввиду через системный шаринг из галереи? Безусловно, но тут все приложения наравне будут.


  1. Redgard
    29.07.2015 15:29
    +1

    Я заметил что вы забыли очистить статус бар на скриншотах, я написал для этого приложение. Пожалуйста, пользуйтесь http://borisy.net/altershot


    1. Mofas
      29.07.2015 19:23
      +3

      Зачем убирать статусбар со скриншотов?


      1. Redgard
        30.07.2015 10:46

        Убирать не нужно, но можно сделать его более аккуратным — полный сигнал сотовый сети без оператора, стандартное время, полная батарея. Больше ничего.


        1. damat
          30.07.2015 11:31

          звучит примерно как «Круглые иконки современнее квадратных»


  1. Redgard
    29.07.2015 15:44

    Не понимаю как вы насчитали 18 нажатий, у меня — 6.

    1. Длинное нажатие для открытия контекстного меню
    2. Прокручиваем список вправо для нужной опции
    3. Нажимаем «Вставить Фото или Видео»
    4. Выбираем «Все Фото» (понятие Camera Roll сейчас уже не используется)
    5. Выбираем фото
    6. Подтвержаем

    Готово!


    1. Makc666
      29.07.2015 19:04
      +1

      сколько нажатий понадобится для прикрепления трех фотографий в популярных почтовых приложениях

      Redgard, речь идёт о трёх фотографиях, а не одной.
      Поэтому умножаем 6 на 3 = 18.

      Более того, вам ещё придётся после каждого 6 шага искать свободное место в теле письма, куда Вы сможете кликнуть, чтобы сделать длинное нажатие.


  1. HeisenbergP
    29.07.2015 16:16
    +1

    Не хотите ли сделать cocoa pod и выложить кастомный пикер в open source?


    1. Mofas
      29.07.2015 19:24
      +1

      Возьмите у Telegram'а, у них похожая реализация.


  1. Yan169
    29.07.2015 22:27
    +1

    Процесс поиска занимательный, но по факту вы скопировали решение из iMessage. :) Что в общем-то неплохо, т.к. решение у них удачное.


  1. t80
    17.08.2015 06:30

    Проверять лично лень т.к. придётся заводить аккаунт на мэил.ру, но правильно ли я понял, что если мне надо выбрать фотографию сделанную сто снимков назад, то мне надо потратить около 30-ти свайпов на прокручивание чтобы выбрать нужную?


    1. slava_yashkov Автор
      22.08.2015 00:49

      Нет, не правильно, для вашей ситуации есть кнопка «Все фото и видео».
      И наше приложение подходит для любого почтового сервиса, а не только Mail.Ru.


      1. t80
        22.08.2015 08:18

        Спасибо, заинтересовали. Скачал, покрутил — функционал неплохой. Однако, вместо 300 фотографий показывает только одну — ту, которую ещё не засосало в айклауд.