Comms app (basic comms)

Transcription

1 HTML 5 concepts V4.0 Authors: Date: Ayman Maat

2 Purpose of document Table of Contents Document detailing UI specifications for the basic Comms App for the HTML5 project All contacts 4 Version control communications timeline communications timeline : filters communications timeline: searching communications timeline: search results communications timeline : edit mode communications timeline : reply contact list Individual contact 1 profile : contact detail profile : contact detail edit mode profile : contact detail edit phone number profile : contact detail edit profile : timeline profile : timeline edit mode profile : timeline delete individual communication confirmation profile : timeline delete all communications confirmation profile : timeline no communications recorded Composers and dialers blank message composer dialer 3 4 Flows 5 Flows : Search 6 Name Version Date Notes Ayman Maat / Dani Oliver initial document produced Ayman Maat alignment with mozilla Ayman Maat see release note Ayman Maat Search concept expanded HTML5 UX Concepts Comms app HTML 5_Comms app_v4.0.pdf May 16,

3 Release note Wireframe pack lives in: Dropbox Jira : OWD_UX_Working/THE NEW WORLD/_Sprints/3_Contacts_Messages/1_Interaction/wireframes : Open Web Device/OWD-1084 Contacts/OWD-1085 New wireframes - communications timeline: search results updated wireframes communications timeline: searching - wireframe altered to make the concept more robust - annotation added and updated deleted wireframes none New flows - Flows : Search HTML5 UX Concepts Comms app HTML 5_Comms app_v4.0.pdf May 16,

4 All contacts

5 communications timeline 05 Communications general note - communications contained in the list are grouped by Day then Contact. Edit - where a contact has had two different modes of communication (e.g. phone and SMS) with the user in the same day these are separated into separate modules within the day. All - where the contact has used two different communication channels within a single mode of communication in the same day these channels are separated into separate modules within the day. Today - modules within the same day are ordered in chronological order with the module with the newest timestamp at the top of the list. annotation 5:54 PM 5:43 PM 1 vodafone 06 3:4 PM angel.s.a :1 PM Mark Calbeol 3 1: PM Yesterday Luis Arnal 07 Filters list is filtered to the history of comms for the selected mode of communication. All the Marmalade 04 Wireframe illustrating content that is contained under the timeline tab. The timeline tab delivers: - History of different incoming and outgoing modes of communications (phone, SMS, voic s). - Entry points to initiate communication via the primary communication channel for the listed modes of communication. - Entry points to view an individual contacts communication history. - Filters to view modes of communication separately. - Entry point to edit the content of the timeline. 1:0 PM edit button changes list area to editable mode. refer to wireframe xxx Timestamp / Image of Contact where a contact has had more than one communication with the user using the same channel of communication (e.g. multiple calls from the same phone number) these communications are grouped and the timestamp displayed is that of the last communication made within that grouping. allows the user to respond directly to the contact using the same mode of communication as indicated by the mode of communication icon contained in the selected module: - if mode of communication icon = phone THEN on tap call the contact using the primary phone number (refer to wireframe profile: contact detail ) listed in the contacts detail view. refer to wireframe xxx - if mode of communication icon = SMS THEN on tap take the user to the SMS thread. refer to wireframe - if mode of communication icon = Voic THEN on tap listen to voice mail Tap and hold Opens primary reply options. refer to wireframe communications timeline: reply 04 Mode of communication icon, Contact Name and Carrier user is taken to the communication timeline of the contact. refer to wireframe: profile : timeline - if the selected module contains only one communication the timeline list opens with focus on that communication - if the selected module contains more than one communication the timeline list opens with focus on the newest communication in the selected module 05 Settings Opens settings tray 06 indication of carrier In order to differentiate between different groupings of channels of communication within the same mode of communication include an indication of carrier that the contact has used to communicate with the user. 07 HTML5 UX Concepts Comms app indication of number of items in a group of communications HTML 5_Comms app_v4.0.pdf May 16, 05

6 communications timeline : filters Communications Communications Edit Communications Edit All All All Today Today Today 5:54 PM All the Marmalade 1 vodafone 3:4 PM :1 PM 1: PM 3 3:4 PM :1 PM 1: PM 3 1:0 PM vodafone 3:4 PM angel.s.a :1 PM Mark Calbeol 1: PM Yesterday Luis Arnal 5:43 PM 1 Yesterday Luis Arnal 5:43 PM Mark Calbeol Yesterday vodafone 5:54 PM All the Marmalade angel.s.a Mark Calbeol 3 5:54 PM 1 angel.s.a All the Marmalade 5:43 PM Luis Arnal 1:0 PM 1:0 PM Call filter voice mail filter SMS filter List behaviour List behaviour List behaviour Individual call items (no aggregation at all) Individual voice mail items (no aggregation at all) Aggregation by day and by conversation threads HTML5 UX Concepts Comms app Edit HTML 5_Comms app_v4.0.pdf May 16, 06 88

7 communications timeline: searching Mar x Cancel Wireframe illustrating search functionality in the communications timeline - All text based content is searched except for the carrier - Search acts as a filter refining the communications timeline listing into a result set after each character typed by the user. Today annotation 5:54 PM - content of text field is cleared - displayed results are reset All the Marmalade 04 5:43 PM vodafone 3:4 PM 05 :1 PM 04 1: Q W E3 R T Y U 1:I PM OPM P - Keyboard closes. User is presented with wireframe communications timeline : search results 3 Yesterday Yesterday 05 SMS messages in the results set - As all text based content is searched except for the carrier, it is necessary to display results from text within SMS messages. - after the first three characters have been typed text messages that have relevant text but are part if a group of communications separate from the group into independant modules. The information hierarcy of these modules alters to display truncated text from the message containing the first item of text from within the message that is relevant to the search criteria visible. - highlight the peice of text that matches the search criteria. F G H J K L LuisDArnal A S 1:0 PM 1:0 PM 1: PM ZSteve X Arnold C V B N M.?13 HTML5 UX Concepts Comms app space search List of search results - group results by day and display in modules within the same day in chronological order, with the newest timestamp at the top of the list Mark MarkCalbeol Calbeol Search button on keyboard - Keyboard closes. User is presented with wireframe communications timeline : search results there s a margin of... angel.sa cancel button - search function is exited and user is returned to wireframe communications timeline 1 call to action to delete content of textfield HTML 5_Comms app_v4.0.pdf May 16, 07

8 communications timeline: search results Mark x Cancel Today 5:54 PM All the Marmalade 05 5:43 PM 1 vodafone - filter the results - drill into the profiles and communications behind the displayed results annotation Wireframe illustrating search results in the communications timeline. The user can 3:4 PM - keyboard is displayed again - search criteria is maintained in textfield angel.sa :1 PM 3 1: PM search filters list is filtered to the history of comms for the selected mode of communication. 05 Yesterday cancel button - search function is exited and user is returned to wireframe communications timeline 04 Mark Calbeol call to action to delete content of textfield - keyboard is displayed again - content of textfield is cleared there s a margin of... search criteria in textfield List of search results - same behaviour as annotation and 40 in wirefrane: communications timeline 04 1:0 PM All HTML5 UX Concepts Comms app HTML 5_Comms app_v4.0.pdf May 16, 08

9 communications timeline : edit mode Communications Wireframe illustrating the communications timeline in edit mode. The timeline in edit mode allows the user to: - remove selected messages - clear all messages from all contacts Done Today 5:54 PM All the Marmalade vodafone 5:43 PM 3:4 PM :1 PM dialogue to confirm deletion of message is opened. refer to wireframe profile : timeline delete individual communication confirmation angel.s.a Mark Calbeol 3 done button - any edits to the timeline are committed - editable mode is exited and the user is returned to the timeline view - label of button changes to edit refer to wireframe profile: timeline 1 annotation call to action to delete a message delete all messages button dialogue to confirm deletion of all messages from selected contact is opened. refer to wireframe profile : timeline delete all communications confirmation 1: PM Yesterday Luis Arnal 1:0 PM Delete all communications HTML5 UX Concepts Comms app HTML 5_Comms app_v4.0.pdf May 16, 09

10 communications timeline : reply Communications Wireframe illustrating reply options to a communications cluster in the communications timeline Edit All annotation call to action to phone the contact using the primary phone number dials associated phone number Today All the Marmalade David Alonso 1 angel.s.a mobile Telefonica Mark Calbeol 3 alonso@gmail.com 5:54 PM 5:43 PM 3:4 PM :1 PM call to action to send an SMS to the primary number SMS composer is launched with contacts phone number prepopulated in the To field. call to action to send an to the primary address composer is launched with contacts address prepopulated in the To field. general interaction note ping anywhere outside of the reply options call out callout closes and user is returned to the view before the reply options call out was opened. 1: PM Yesterday Luis Arnal Steve Arnold HTML5 UX Concepts Comms app 1:0 PM 1: PM HTML 5_Comms app_v4.0.pdf May 16, 10

11 contact list Contacts Wireframe illustrating content that is contained under the contact list tab: Add - Entry points to view a contact communication history. All - Filters to view favourite contacts - Entry point to add new contacts. A annotation Vivo All the Marmalade user gets the reduced list of favourite contacts or the full list. Vivo Tim angel.s.a 04 Albert Heinz Vivo Vivo Add contact Contact row including operator information. Takes user to contact detail information Oi Luis Arnal Filters Takes user to the new contact screen David Alonso - All contacts sorted alphabetically. Pendent activity indicator Indicator is active If the user has some unread message/call/voice mail from this message. 04 B Mark Brufau Vivo HTML5 UX Concepts Comms app HTML 5_Comms app_v4.0.pdf May 16, 11

12 Individual contact

13 profile : contact detail Wireframe illustrating content that is contained under the Contact Detail tab within a contacts profile. The Contact Detail tab delivers: - Current channels available to the end user for communicating with an individual who is listed in the end users contact list. Back - Entry points to initiate communication via the listed channels. - An entry point to editing the communication channels. Edit annotation Mark Alfenito phone mobile Telefonica back button user is returned to the view that they accessed the contacts profile from edit button - changes the contact detail area to editable mode. - label of button changes to done refer to wireframe profile: contact detail edit mode timeline tab take the user to the history of communications in timeline view with the individual whose profile is being viewed. refer to wireframe profile: timeline home alonso@gmail.com 04 dials associated phone number social network call to action to phone the contact using the associated phone number call to action to send an SMS to the associated number SMS composer is launched with contacts phone number prepopulated in the To field. 06 call to action to send an to the associated address composer is launched with contacts address prepopulated in the To field. Facebook 07 call to action to send a facebook message to the contact Facebook message composer is launched instance of communication channel - the communication channel at the top of the list represents the users primary mode of communication with the contact for the given genre of communication - star feeds back to the user that the top communications channel is the primary communications channel for the given communications method. 09 Star indicates that this contact is a member of the end users favourites list 10 conversation tab take the user to the history of communications in conversation view with the individual whose profile is being viewed. HTML5 UX Concepts Comms app HTML 5_Comms app_v4.0.pdf May 16, 13

14 profile : contact detail edit mode Cancel Wireframe illustrating the Contact Detail tab in edit mode. The Contact Detail in edit mode allows the user to: - add a new phone number or address Done - mute incoming communications via Facebook from the contact annotation Mark 08 Edit 07 Alfenito add phone 04 - any edits to the contacts profile are discarded - editable mode is exited and the user is returned to the contact detail view - label of button changes to edit refer to wireframe profile: contact detail done button - any edits to the contacts profile are committed - editable mode is exited and the user is returned to the contact detail view - label of button changes to edit refer to wireframe profile: contact detail mobile Telefonica home add phone button user is taken to interface where a new phone number can be added to the phone number list. refer to wireframe profile : contact detail edit phone number add social network Facebook call to action to delete phone number dialogue to confirm deletion of phone number is opened. refer to wireframe xxxx alonso@gmail.com 06 back button switch to mute incoming communications via Facebook from the contact label of switch changes to off. 06 delete contact button dialogue to confirm deletion of contact from contact list along with and all communications the user has received from the contact is opened. refer to wireframe xxxx Delete contact 07 instance of communication channel upon press and hold selected communication channel detaches from interface. when there is more than one communication channel within a given genre of communication the user can then reorder the list by dragging and dropping the module to another position within the list. the communication channel at the top of the list represents the users primary mode of communication with the contact for the given genre of communication user is taken to interface where the existing content of the communication channel can be edited. refer to wireframe profile : contact detail edit phone number 08 Firstname and Second name fields user is taken to interface where the contacts firstname and second name can be edited. refer to wireframe profile : contact detail edit name HTML5 UX Concepts Comms app HTML 5_Comms app_v4.0.pdf May 16, 14

15 profile : contact detail edit phone number Back Done Wireframe illustrating the interface through which the user can either add or edit an exiting phone number annotation Phone - any edits to the phone number are discarded - user is returned to contact detail interface in edit mode. - refer to wireframe profile : contact detail edit mode mobile 06 Telefonica back button done button - any edits to the phone number are committed - user is returned to contact detail interface in edit mode. - refer to wireframe profile : contact detail edit mode textfield feeding back current phone number string to end user 04 call to action to delete content of textfield content of text field is cleared : / #+=. ABC HTML5 UX Concepts Comms app ;, ( 05 dropdown list from which the user picks the type of phone the number is associated with 06 dropdown list from which the user picks the carrier that the number is associated with ) space! send HTML 5_Comms app_v4.0.pdf May 16, 15

16 profile : contact detail edit Back Done Wireframe illustrating the interface through which the user can either add a new address or edit an exiting address. annotation - any edits to the address are discarded - user is returned to contact detail interface in edit mode. - refer to wireframe profile : contact detail edit mode 04 alonso@gmail.com back button done button - any edits to the address are committed - user is returned to contact detail interface in edit mode. - refer to wireframe profile : contact detail edit mode Q W E R T Y U I O P textfield feeding back current address string to end user 04 call to action to delete content of textfield content of text field is cleared A S D F G H J K L Z X C V B N M.?13 HTML5 UX Concepts Comms app space send HTML 5_Comms app_v4.0.pdf May 16, 16

17 profile : timeline Back Edit Wireframe illustrating content that is contained under the Timeline tab within a contacts profile. The Timeline tab delivers: - A timeline based history of communications through all channels between the contact and the end user. - Entry points to initiate communication with the contact. - An entry point to editing the communication history. Mark Alfenito annotation user is returned to the view that they accessed the contacts profile from Today Missed call 04 5:54 PM Missed call 5:49 PM 5:1 PM back button changes the contact detail area to editable mode. - label of button changes to done refer to wireframe profile: timeline edit mode Telefonica Telefonica Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel elit leo, sit amet semper enim Orange Yesterday 11:10 PM HTML5 UX Concepts Comms app contact detail tab take the user to a listing of current channels available to the end user for communicating with an individual who s profile is being viewed. refer to wireframe profile: contact detail 04 instance of communication in timeline 05 conversation tab take the user to the history of communications in conversation view with the individual whose profile is being viewed. general interaction note 4 min 15 sec call edit button upon drag down when the latest communication is visible at the top of the timeline toggle switch to switch view of communications between either timeline or conversations view becomes visible 05 HTML 5_Comms app_v4.0.pdf May 16, 17

18 profile : timeline edit mode Done Today Missed call 5:54 PM Missed call 5:49 PM 5:1 PM Wireframe illustrating the timeline tab in edit mode. The timeline in edit mode allows the user to: - remove selected messages - clear all messages annotation Telefonica Telefonica Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel elit leo, sit amet semper enim Orange Yesterday done button - any edits to the timeline are committed - editable mode is exited and the user is returned to the timeline view - label of button changes to edit refer to wireframe profile: timeline call to action to delete a message dialogue to confirm deletion of message is opened. refer to wireframe profile : timeline delete individual communication confirmation delete all messages button dialogue to confirm deletion of all messages from selected contact is opened. refer to wireframe profile : timeline delete all communications confirmation 4 min 15 sec call 11:10 PM 4 min 15 sec call HTML5 UX Concepts Comms app Clear all messages HTML 5_Comms app_v4.0.pdf May 16, 18

19 profile : timeline delete individual communication confirmation Back Edit Wireframe illustrating the delete individual communication confirmation dialogue. annotation representation of message to be deleted To reduce error and lower the end users cognitive loading represent the message that the end user has selected to be deleted in the confirmation of deletion Today Missed call Lorem ipsum dolor sit amet, Telefonica consectetur adipiscing elit. Mauris vel 5:54 PM 5:1 PM elit leo, sit amet semper enim Missed Orange call Telefonica 5:49 PM Are you sure you want to delete this communication? Lorem ipsum dolor sit amet, consecthis cannot be undone tetur adipiscing elit. Mauris vel elit 5:1 PM leo, sit amet semper enim... Cancel Confirm Orange Yesterday cancel button - closes delete communication dialogue - selected communication is not deleted - user is returned to the view delete communication dialogue was launched from confirm button - closes delete communication dialogue - selected communication is deleted - user is returned to the view delete communication dialogue was launched from minus the deleted communication 4 min 15 sec call 11:10 PM 4 min 15 sec call Clear all messages HTML5 UX Concepts Comms app HTML 5_Comms app_v4.0.pdf May 16, 19

20 profile : timeline delete all communications confirmation Back Edit Wireframe illustrating the delete all communications confirmation dialogue. annotation Name of contact from which all communications will be deleted To reduce error and lower the end users cognitive loading present the name of contact which the end user has selected to delete all communications from Today Missed call :54 PM Are you sure you want to delete all communications with Missed call +49Mark Alfenito? 5:49 PM 5:1 PM Telefonica This cannot be undone Lorem ipsum dolor sit amet, consectetur adipiscingconfirm elit. Mauris vel elit Cancel leo, sit amet semper enim Orange Yesterday - closes delete all communication dialogue - no communications are deleted - user is returned to the view delete communication dialogue was launched from Telefonica cancel button confirm button - closes delete all communication dialogue - all communications with the selected contact are deleted - user is returned to the Timeline tab within a contacts profile with no communications present. refer to wireframe profile : timeline no communications 4 min 15 sec call 11:10 PM 4 min 15 sec call Clear all messages HTML5 UX Concepts Comms app HTML 5_Comms app_v4.0.pdf May 16, 0

21 profile : timeline no communications recorded Back Edit Wireframe illustrating the content that is contained under the Timeline tab within a contacts profile when no communications are recorded. Mark Alfenito You have no communications with Mark HTML5 UX Concepts Comms app HTML 5_Comms app_v4.0.pdf May 16, 1

22 Composers and dialers

23 blank message composer To: Wireframe illustrating content that is contained under the SMS composer tab: - Blank SMS thread. - Recipient area - Keypad annotation Add recipient takes user to the contact list to select a recipient. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... Type number Keypad is displayed in order to type a phone number. Message bubble Message composer in edit mode (still not send) Q W E R T Y U I O P 04 Send button Message bubble changes state and becomes part of the thread. A S D F G H J K L Notes Z X C V B N M.?13 HTML5 UX Concepts Comms app space Send Navigation tabs are always visible at this label. HTML 5_Comms app_v4.0.pdf May 16, 3

24 dialer Wireframe illustrating content that is contained under the dialer tab Dial Pad - Entry point to place a call - Entry point to create a new contact annotation 1. ABC 3 DEF Phone number display Dial pad place the number selected on the phone number display 4 5 GHI JKL 6 MNO Save the current number on display as a new contact PQRS TUV +*# 0 + HTML5 UX Concepts Comms app Call button Place a call. Takes user to the in call screen. 9 WXYZ CALL Add contact button 04 HTML 5_Comms app_v4.0.pdf May 16, 4

25 Flows

26 Flows : Search communications timeline Communications All Edit communications timeline: searching upon tap x Mar vodafone 1 :1 PM Yesterday 1:0 PM 1 :1 PM space vodafone Today upon tap Missed call 5:54 PM 3:4 PM search angel.sa :1 PM 5:49 PM 1: PM 5:1 PM Telefonica Telefonica Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel elit leo, sit amet semper enim Orange Yesterday Missed call Yesterday 1: PM ZSteve X Arnold C V B N M.?13 5:43 PM Mark Calbeol 3 1:0 PM Edit Mark Alfenito there s a margin of... F G H J K L LuisDArnal A S 1:0 PM Back 5:54 PM 3:4 PM Yesterday Yesterday Cancel All the Marmalade upon tap MarkCalbeol Calbeol 1: Q W Mark E3 R T Y U 1:I PM OPM P Luis Arnal 3 1: PM upon tap there s a margin of... angel.sa Mark Calbeol 3 vodafone 3:4 PM angel.s.a 5:43 PM 5:43 PM profile : timeline Today 5:54 PM All the Marmalade 5:54 PM All the Marmalade 1 upon tap x Mark Cancel Today Today upon tap communications timeline: search results 1:0 PM 4 min 15 sec call 11:10 PM upon tap All (filter view) Back upon tap Edit Mark Alfenito phone mobile Telefonica home alonso@gmail.com social network Facebook profile : contact detail HTML5 UX Concepts Comms app HTML 5_Comms app_v4.0.pdf May 16, 6

27 Thank you Ayman Maat

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44