B2G Mail Application Wireframes & Flows V3 DRAFT

Transcription

1 BG Mail Application Wireframes & Flows V3 DRAFT 05-0-

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

3 Mail Application Entry Points 3 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 attachments Send / Cancel back to Application with Status No, Back to Application with Status Account Setup? No Yes Compose Message Setup Now? Yes Mail Setup Setup Complete

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

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

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

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

8 New Account Setup Details 8 New Gmail Account Setup Your Gmail login information. Passwords field. Prev step @ .com *****_ Next 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 3?, space. return

9 New Account Setup 9 New Gmail Account Setup. Cancels setup. Back one step. Successful setup brings user to New Account Setup Complete screen Please wait while i setup your account

10 New Account Setup Complete 0 Gmail account setup. New Account Setup screen. Mail Messages Loading screen All Done! Add another account Continue to Mail

11 Mail Messages Loading Inbox. Current account: folder name. Folder Select pane 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 / 50 Yes Done Mail Messages View Yes > mail No Mail Messages View No

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

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

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

15 Mail Messages Edit 5 Inbox () New :00p Jane Doe yesterday.press and Hold to reveal edit actions on Mail. - Flag Message - Mark toggles Unread/read message status - Move message to another Folder - Delete message. Move Message - Shows Folder Select pane. Once a target folder is selected, Message will be moved. Status displays in current messages view. 3. Delete - Message will be deleted, Status displays on commit Josh Carpenter days ago Pork loin flank chicken, strip steak short... Flag Patryk Adamczyk Mark as Unread week ago This is the subject Move of the message Delete 3 Search Edit Refresh

16 Mail Messages Edit Multiple 6 3 Inbox () :00p Jane Doe yesterday days ago. Cancels multi-edit.. Edits applied to selected messages. Committing edits show in Status 3. Folder name shows number of selected messages. 4. Mark selected messages as read, unread, spam Read Unread Spam Mark week ago Flag Mark Move Del 4

17 Mail Messages Status 7 Inbox () New 6 messages moved Undo :00p Sending Message Send Message Failed Try Again Jane Doe yesterday days ago week ago 6 messages moved Undo Search Edit Refresh

18 Mail Search 8 Inbox (). Mail search UI can be pulled down at top of messages folder pane. Search Mail. On focus, mail Search Controls is shown. 3. Mail Search Controls is shown :00p Jane Doe yesterday days ago week ago Search 3 Edit Refresh

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

20 Mail Search Controls 0 Cancel. Search field blur, keyboard slides away. Extends search onto server From To subject All Status: :00p yesterday Searching on server Once messages are loaded, they will fill in-line with existing search results. 3. Press and hold entry to edit or edit multi-select mode days ago Search on server 3 Edit

21 Folder Select 3 Unified Inbox 9 John.doe@gmail.com jdoe@hotmail.com Folders Flagged mail Drafts Sent Entry Points: - Inbox Mail Folder () View New - Message Move (single or multi edit) Casey Yee :00p RE: BBQ this weekend. When Folder Select is clicked, the Mail Folder view slides Turkey beef ribs pork right belly revealing short the loin... Folder Select pane.. Accounts selection or Unified Inbox Jane Doe yesterday 3. Folders for currently selected Account. Mail Frankfurter pork chop tail, pork... Lorem Ipsum is simply 4. Mail dummy settings text of the... Josh Carpenter Pork loin flank chicken, strip steak short... days ago Trash Patryk Adamczyk week ago 4 Search Edit Refresh

22 Compose Message Compose Message Send To 3 cc/bcc 4 Entry Points: - From External application (mailto: address) - External application with attachment. See Compose Message Attachment - From Mail app. Back to Last View Subject Lots to talk about.. Send Message, returns user back to Folder view with Status 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 500s, 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 5 3. Recipients Remove: Delete a s d Af g h j Ak l ' 4. cc/bcc field will expand into two separate fields when selected shift z x Ac v b n Am bs 5. Message body - Plain text entry (v) 3?, space. return

23 Compose Message. Inline auto-complete contact with substring highlight. 3 Compose Message Send. Add recipient by Contacts browser, or substring search. Add Recipient To Jan_ cc/bcc Jane Doe thumb jane@gmail.com Subject Lots to talk about. Janet Lin thumb Lorem Ipsum is simply dummy janet@yahoo.com text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 500s, 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 3?, space. return thumb Jane Doe jane@gmail.com thumb Janet Lin janet@yahoo.com

24 Compose Message Attachment 4 To Compose Message Send Entry Points: - External application with attachment: Gallery, Contacts (vcf), Notes - Forwarding s with attachment cc/bcc s with attachments are initiated from other applications. Subject Photo of the BBQ. attachments can be any kind of media. size of attachment and thumbnail where possible. thumb Photo (35kb) Tapping on attachment to delete from message. 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 500s, when an unknown printer took a galley of type q and w scrambled e Ar it to t make y a type u specimen Ai o p book. thumb Delete Photo (35kb) a s d Af g h j Ak l ' shift z x Ac v b n Am bs 3?, space. return

25 Read Message 5 Read Reply Entry Points: - Mail Folders - Notifications From Jane Doe 4 :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 500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book Back to last view. Reply to message 3. Clicking on Contact Jane Doe View Contact document.pdf (pdf) 4. Tapping heade 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

26 Read Message Details 6 Read Reply. Additional message details cc, bcc From Jane Doe :00p. Attachments should download and launch appropriate message. To document.pdf (pdf) cc Benjamin Franklin 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 500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. document.pdf (pdf) Mark Del Flag Move Forward Reply Unread

27 Read HTML Message 7 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 500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Reply :00p Image Image Image. Messages containing HTML and Images should prompt user to Load Images. Load Image status: Loading / 5 Images Pressing and holding images to Save downloaded images: Image Save Image document.pdf (pdf) This contains 5 images. Click to load Mark Del Flag Move Forward Reply Unread

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