According to internal Mail.Ru Mail statistics, 80% of files sent via email are images. Every day we send dozens of layouts, prototypes and screenshots. Of course, we wanted to make such a common scenario more convenient, and we succeeded. As a result, sending photos and videos from our iOS application has become much easier and faster than the competition. For example, to attach three photos to a letter, Mail.Ru needs only five taps in Mail. This is 10 less than in Gmail, and by as much as 13 - than in Apple Mail. Under the cut a story about working on this task, from the emergence of the idea to its implementation, as well as several heavy gifs.

Identify custom script

Work on new features takes place in several stages. The first is to identify important user scripts. What do users often do with our application? What can be improved? In search of an answer, we collect comments from the feedback and the App Store, conduct beta tester surveys and analyze statistics. That is how it turned out that through the application they send more emails with files than through the web.


^{The average number of files sent via the Mail.Ru Mail application and via the Web version of the Mail: per person, per letter. Internal statistics Mail.Ru, May 2015}
')
And that from smartphones most often send images - 80.5% of the total number of files.


^{Types of files attached to letters in Mail.Ru Mail application for iOS. Internal statistics Mail.Ru, August 2014}

We have long and systematically simplified writing a letter and attaching files to it:

• added hints when entering email with transliteration;
• made a list of frequently used contacts, which is synchronized with the web;
• supported the choice of files from Mail.Ru Cloud, Dropbox and other storages;
• added the ability to compress images before sending.

Now we focused on attaching images to letters.

The initial state

Before the improvements, attaching one photo required 5 clicks:

1. Tap on the clip icon.
2. Select "Photo and video."
3. Select an album.
4. Select a photo.
5. Click "Finish".

Better than Apple Mail, but far from ideal.

First improvements

They polled users, looked at the statistics on beta versions: almost all photos are sent from the Camera Roll album (“Camera Roll”). Many users have no other albums at all. The logical change is to get rid of the step with the choice of the album. Now the Camera Roll opens immediately, and to select another album, the user clicks Albums.



Then we made it more convenient to select several photos by adding a multi-select on svaypu. Now, to select a lot of photos or videos at once, you do not need to tap on each of them - just hold your finger.

Design

Attaching a photo to the letter still required four actions. We set ourselves the task of reducing this figure to three, without compromising the usability of other scenarios, such as attaching files from other applications. Several options have been prepared (here and below we will show them on the example of layouts for the myMail application, which is being worked on in parallel).







We immediately refused option No. 1: two icons nearby are confusing and difficult to choose. In addition, the number of actions is not reduced. The rest of the layouts had both pluses and minuses. For example, in option # 2, sometimes you have to scroll thumbnails for a long time to find the desired photo. But the user is not confused, because it remains in the same context - on the screen of writing the letter. To select the best option, we conducted testing.

Prototyping and validation

Design options useful to show the guys from other departments to collect the first reviews and comments. We gave our colleagues mockups and analyzed their reactions. According to the survey, chose option number two - with thumbnails in the dialogue.

The next stage of working on features is prototyping. With the prototype, you can try the feature in action without wasting time on development. We use different tools for prototyping - in this case, the prototype was assembled in the POP application.

The finished prototype was transferred to a usability laboratory . For testing, we invited the users of the Mail application, who are not connected in their professional activities with either design or development. They were asked to attach one or several photos to the letter. An eye tracker was used to control the movement of the eyes when working with a mobile device. Testing has shown that this option of attaching photos is simple and convenient. There were also disadvantages:

1. People did not always notice that after selecting a photo, one of the items under the files turned into a “attach” button.
2. Users asked to show the number of selected files.

All comments and observations we have taken into account in the new version of the design. The button became more noticeable, it indicated the number of photos.



This design we passed to the development.

Beta testing

Each of our applications has a base of beta users who receive the update before the official release. Often they help to identify bugs and shortcomings or suggest how to improve the feature. So it was this time: the comments from beta testers gave us the idea to make the photo attach button even more noticeable and convenient, for which I thank them very much.



This is how the attach button changed during the design testing process.



So, in the bottom line: now in Mail.Ru Mail for iOS, users will be able to attach photos faster than other email clients. For comparison, we offer to see how many clicks you need to attach three photos in popular email applications:

Application, version	Number of clicks
Mail Mail.Ru, 3.4	five
Mail Mail.Ru, 3.0	6
Yandex.Mail, 2.08	7
Gmail 4.0	15
Apple Mail, iOS 8.4	18

PS We reduced the number of tapes, having taught Mail for iOS to guess what the user wants (in our case, open the latest photos from the Camera Roll). It's great to know that you are making an application that reads thoughts. If you have any idea what other “telepathic” features would be useful for Mail.Ru Mail, tell us about them in the comments.