From Home Page. Account Setup? Mail Setup

Transcription

1 Application Entry Points Entering mail application from Home Page application start From Home Page Account Setup? Mail Folder View No Mail Setup

2 Application Entry Points Entering mail application from another application This flow illustrates when you click on an link from within another application. start Some examples would include: Application - From web browser mailto: links - From contacts application - From calendar application - From messaging application mailto: address Send / Cancel back to Application with Status No, Back to Application Account Setup? Yes Compose Message No Setup Now? Yes Mail Setup Setup Complete

3 Application Entry Points New s notifications. Clicking new mail notification will bring the user to the latest message received. start From notifications Read Message

4 Mail Not Setup Modal If user is not configured for mail and clicks on a link, they will be prompted if they want to setup mail. 1. Returns user to application 2. User enters New Account Setup screen Your are not setup to send or receive . Would you like to do that now? No Yes 1 2

5 New Account Setup Mail 1. Webmail services Clicking brings user to New Account Setup Information screen. 2. IMAP account setup New Account Setup Information (IMAP) To send and receive , you will need to setup an account. Gmail 1 Hotmail Yahoo Mail Other 2

6 New Account Setup Details 1 New Gmail Account Setup 1. Returns to New Account Setup screen 2. User account information (depends on service) 3. Proceed with New Account Setup Your Gmail login information 2 password Next 3

7 New Account Setup Details New Gmail Account Setup Your Gmail login information 1. Passwords should be hidden (?) 2. Current selected form field highlighted. Appropriate keyboard is displayed for input type. *****_ 1 Next q w e Ar t y u Ai o p a s d Af g h j Ak l ' 2 shift z x Ac v b n Am bs 123?, space. return

8 New Account Setup Progress 1 New Gmail Account Setup 1. Cancels account setup. Returns user to New Account Setup Details screen 2. Successful setup brings user to New Account Setup Complete screen Please wait while i setup your account 2

9 New Account Setup Complete Gmail account setup 1. New Account Setup screen 2. Mail Folder Loading screen All Done! Add another account Continue to Mail 1 2

10 Mail Folder Loading 2 Inbox 1 1. Current folder name (Combined Inbox should be default) 2. Folder Select screen 3. Mail load status will display if there are no locally cached messages for the selected folder. start Open Mail App Loading Mail 3 Mail in Folder? No Mail Folder Loading 1 / 250 Yes Done Mail Folder View Yes > 1 mail No Mail Folder View No

11 No Mail Folder Inbox New 1 When there is no mail in current folder 1. Compose Message start Open Mail App No Mail in this Folder Mail in Folder? No Mail Folder Loading Yes Done Mail Folder View Yes > 1 mail No Mail Folder View No

12 Mail Folder 1 8 Inbox (1 new) Casey Yee RE: BBQ this weekend New 2:00p 2 1. Unread Message Flag 2. Received Message time should be relative to current day/time. 3. Flagged mail shows as Star. Attachments Turkey beef ribs pork belly short loin Graceful truncating of subject and body text. Jane Doe yesterday 5. Search mail Frankfurter pork chop tail, pork... Josh Carpenter 2 days ago Pork loin flank chicken, strip steak short... 4 Patryk Adamczyk 1 week ago 6. Edit Multiple select 7. Check for new mail 8. Folder name should update number of unread messages in folder. Interaction Notes: messages within folder pane are touch-scroll Search Edit Refresh 5 6 7

13 Mail Folder Inbox (1 new) New 1. When user reaches bottom of message pane, A option to load more messages from server. 2:00p Jane Doe yesterday Message loading status: Loading 50 / 100 Messages Once messages are loaded, they should fill inline with existing messages. 2 days ago Load more messages from server 1 Search Edit Refresh

14 Mail Folder Edit Single Inbox (1 new) New 1. Swipe message to reveal/hide edit actions on Mail. Only a single Edit can happen at any given time. 2:00p 2. Flag Message 3. Mark Unread / Read, As Spam Mark Jane Doe yesterday Mark as Read Flag Mark Move Del 1 Mark as Unread Mark as Spam 4. Move - Shows Folder Select view. Once a target folder is selected, Message will be moved. Status displays on commit 1 week ago Move process flow: Select Folder Move message Mail Folder view + Status 4. Delete - Message will be deleted, Status displays on commit Search Edit Refresh Interaction Notes: Swipe message to reveal is subject to change based on System UI patterns

15 Mail Folder Edit Multiple 2 4 Inbox (2 selected) 2:00p 1. Swipe messages edge reveals/hides multi edit select checkboxes. This allows the user to select multiple messages for batch edit operation. 2. Cancels multi-edit. returns to Mail Folder view 3. Edits applied to selected messages. Committing edits show in Status Jane Doe yesterday 4. Folder name shows number of selected messages. 1 2 days ago 1 week ago Flag Mark Move Del 3

16 Mail Folder Status Inbox (1 new) New 6 messages moved Undo 2:00p Sending Message Send Message Failed Try Again Jane Doe yesterday 2 days ago 1 week ago 6 messages moved Undo Search Edit Refresh

17 Mail Search Inbox (1 new) 1. Mail search UI can be pulled down at top of messages folder pane. Search Mail 2 2. As soon as Search Mail field is focused, Mail Search Controls view is initiated. 1 2:00p 3. Mail Search Controls can be initiated with the Search button Jane Doe yesterday 2 days ago 1 week ago Search 3 Edit Refresh

18 Mail Search Controls 2 1 Search Mail 2 Search 1. Search text field. Interaction notes: - Search field auto-completes as you type. - Pressing 'X" at the end of the field, clears the search field. 4 From To subject All 2:00p yesterday q w e Ar t y u Ai o p 2 days ago This a s is the d subject Af of g the h message j Ak l ' shift z x Ac v b n Am bs 3 2. Exits mail search and returns user back to Mail Folder view 3. Search filters All - searches Subject, From and To mail fields 4. Substring highlights in results Possible User configurable search Options: Search Settings Search in Sub-folders Search in Sent 123?, space. return Search in Deleted

19 Mail Search Controls Search Mail 1. Moving focus away from search text field hides keyboard 2. Click option to load search results from Server 1 2 Search Search server status: From To subject All Searching on server 2:00p Once messages are loaded, they will fill in-line with existing search results. yesterday 2 days ago Search on server 2 Edit Refresh

20 Mail Folder Navigation Selecting a Messages Folder

21 Mail Folder Navigation Click Folders icon Inbox (1 new) New Casey Yee 2:00p RE: BBQ this weekend Turkey beef ribs pork belly short loin... Jane Doe yesterday Frankfurter pork chop tail, pork... Josh Carpenter 2 days ago Pork loin flank chicken, strip steak short... Patryk Adamczyk 1 week ago Search Edit Refresh

22 Mail Folder Navigation Accounts Unified Inbox (9 New) > Inbox (1 new) New Inbox 9 Casey Yee 2:00p RE: BBQ this weekend Flagged mail Turkey beef ribs pork belly short loin... Drafts Jane Doe yesterday Frankfurter pork chop tail, pork... Messages panel slides out Folders panel slides in Sent Trash Josh Carpenter 2 days ago Pork loin flank chicken, strip steak short... Patryk Adamczyk 1 week ago Search Edit Refresh

23 Mail Folder Navigation Accounts Unified Inbox (9 New) > Inbox 9 Flagged mail Drafts Select mail folder Sent Trash

24 Mail Folder Navigation Accounts Unified Inbox (9 New) > Sent New Inbox 9 Casey Yee 2:00p RE: BBQ this weekend Flagged mail Turkey beef ribs pork belly short loin... Drafts Jane Doe yesterday Frankfurter pork chop tail, pork... Sent Trash Josh Carpenter Pork loin flank chicken, strip steak short... 2 days ago Folders panel slides out Messages panel slides in Patryk Adamczyk 1 week ago Search Edit Refresh

25 Mail Folder Navigation Sent Messages New Casey Yee 2:00p RE: BBQ this weekend Turkey beef ribs pork belly short loin... Jane Doe yesterday Frankfurter pork chop tail, pork... Josh Carpenter Pork loin flank chicken, strip steak short... 2 days ago Messages for new folder selection Patryk Adamczyk 1 week ago Search Edit Refresh

26 Mail Folder Navigation Selecting another Account

27 Accounts Navigation Click Folders icon Sent Messages New Casey Yee 2:00p RE: BBQ this weekend Turkey beef ribs pork belly short loin... Jane Doe yesterday Frankfurter pork chop tail, pork... Josh Carpenter 2 days ago Pork loin flank chicken, strip steak short... Patryk Adamczyk 1 week ago Search Edit Refresh

28 Mail Folder Navigation Accounts Unified Inbox (9 New) > Inbox (1 new) New Inbox 9 Casey Yee 2:00p RE: BBQ this weekend Flagged mail Turkey beef ribs pork belly short loin... Drafts Jane Doe yesterday Frankfurter pork chop tail, pork... Messages panel slides out Folders panel slides in Sent Trash Josh Carpenter 2 days ago Pork loin flank chicken, strip steak short... Patryk Adamczyk 1 week ago Search Edit Refresh

29 Mail Folder Navigation Click to Accounts button Accounts Unified Inbox (9 New) > Inbox 9 Flagged mail Drafts Sent Trash

30 Mail Folder Navigation Accounts > Accounts Unified Inbox (9 New) > Unified Account Inbox 9 john.doe@gmail.com Flagged mail jdoe@hotmail.com Drafts Folders panel slides out Account Panel slides in Sent Trash Settings New Account

31 Mail Folder Navigation Accounts > Unified Account Click account name Settings New Account

32 Mail Folder Navigation Accounts > Accounts Unified Inbox (9 New) > Unified Account Inbox 9 john.doe@gmail.com Flagged mail jdoe@hotmail.com Drafts Sent Trash Accounts panel slides out Folder Panel slides in Settings New Account

33 Mail Folder Navigation Accounts Inbox > Inbox 9 Flagged mail Drafts Select folder to view messages Sent Trash

34 Folder Select Entry Points: - Mail Folder View - Message Move (single or multi edit) Unified Inbox (9 New) Accounts 1. Returns to Last View 4 Inbox 9 Flagged mail Drafts Sent Trash 2. Unified Account OR Account name with Number of Unread messages (total from all folders) Choosing a folder returns to Mail Folder view for selected Folder 3. Brings user to Accounts Select screen 4. Displays all Folders on current selected Account OR All Unified Account folders start Mail Folder VIew Message Edit Move Folder Select Account Select Account Settings UI Notes: - There are several ways we can choose to approach the UI application of this view. 1. Modal window 2. Slide in off-screen from left. The UI application will effect top bar navigation.

35 Account Select Unified Account john.doe@gmail.com Accounts 1. Returns to Mail Folder Select view 2. Unified Account is aggregate of Mail Folders from all Accounts added. Standard Mail Folders that should be unified: Inbox, Drafts, Sent, Trash jdoe@hotmail.com 3. Selecting account returns to Mail Folder Select for Account selected. 4. Account Settings view 5. New Account Setup view start Mail Folder VIew Message Edit Move Folder Select Account Select Account Settings Settings New Account 4 5

36 Compose Message 1 Compose Message Send 2 To 3 Entry Points: - From External application (mailto: address) - External application with attachment. See Compose Message Attachment - From Mail app Subject q w e Ar t y u Ai o p a s d Af g h j Ak l shift Lots to talk about. 6 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. z x Ac v b n Am bs ' Back to Last View 2. Send Message, returns user back to Folder view with Status 3. Recipients Remove: Delete 4. Subject 5. Message body - Plain text only 6. Tapping head toggles Compose Details view 123?, space. return

37 Compose Message 1. Inline auto-complete contact with substring highlight. Compose Message Send 2. Add recipient by Contacts browser, or substring search. Add Recipient To Subject Jan_ Lot's to talk Jane thumb about. Doe 1 2 Lorem Ipsum is simply dummy Janet Lin text of the printing and typesetting thumb industry. Lorem Ipsum has been janet@yahoo.com the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. q w e Ar t y u Ai o p Search A thumb B thumb thumb Adam Shelly adam.s@gmail.com Blake Martin bmartin@martin.com Ben Franklin ben.f@us.gov A B C D E F G H I J K L M a s d Af g h j Ak l ' Add Recipient shift z x Ac v b n Am bs Jane Doe 123?, space. return thumb Jane Doe jane@gmail.com thumb Janet Lin janet@yahoo.com

38 Compose Message Details Compose Message Send 1. Additional Mail fields are revealed when mail header sections are tapped. To cc cc Subject Lots to talk about 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. q w e Ar t y u Ai o p a s d Af g h j Ak l ' shift z x Ac v b n Am bs 123?, space. return

39 Compose Message Attachment To Compose Message Send Entry Points: - External application with attachment: Gallery, Contacts (vcf), Notes - Forwarding s with attachment Subject Lot's to talk about s with attachments are initiated from other applications. thumb Photo (35kb) 1 1. attachments can be any kind of media. size of attachment and thumbnail where possible. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. q w e Ar t y u Ai o p Tapping on attachment to delete from message. thumb Photo (35kb) Delete a s d Af g h j Ak l ' shift z x Ac v b n Am bs 123?, space. return

40 Read Message 1 Read Reply 2 Entry Points: - Mail Folders - Notifications From Jane Doe 4 2:00p Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book Back to last view 2. Reply to message 3. Clicking on Contact Jane Doe View Contact document.pdf (pdf) 4. Tapping head shows Read Message Details screen 5. text should be actionable on Click. - Links should open to Browser - addresses should open Compose Message - Phone numbers should open in Dialer 6. Message Edit Options Del Flag Mark Move Forward Reply 6

41 Read Message Details Read Reply 1. Additional message details cc, bcc From Jane Doe 2:00p 2. Attachments should download and launch appropriate message. To document.pdf (pdf) cc Benjamin Franklin 1 Download and Open bcc George Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. document.pdf (pdf) 2 Mark Del Flag Move Forward Reply Unread

42 Read HTML Message From Jane Doe Read Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Reply 2:00p Image Image Image 1. Messages containing HTML and Images should prompt user to Load Images. Load Image status: Loading 1 / 5 Images Pressing and holding images to Save downloaded images: Image Save Image document.pdf (pdf) 1 This contains 5 images. Click to load Mark Del Flag Move Forward Reply Unread

43 Mail Settings Mail Settings WIP Check mail every 5 min Store Messages 50 Show Images Signature Sig 1 Mail Search Search in Sub-folders Search in Sent Search in Deleted