comms app (basic comms) - mozilla · comms app (basic comms) communications timeline: search...

of 44 /44
Comms app (basic comms) HTML 5 concepts V4.0 Authors: Ayman Maat Date: 16.05.2012

Author: others

Post on 30-May-2020

1 views

Category:

Documents


0 download

Embed Size (px)

TRANSCRIPT

  • Comms app (basic comms)HTML 5 concepts

    V4.0

    Authors: Ayman MaatDate: 16.05.2012

  • Name Version Date Notes

    Version control

    Ayman Maat / Dani Oliver 1.0 04.05.12 initial document produced

    Ayman Maat 2.0 09.05.12 alignment with mozilla

    Ayman Maat 3.0 15.05.12 see release note

    Ayman Maat 4.0 16.05.12 Search concept expanded

    Purpose of documentDocument detailing UI specifications for the basic Comms App for the HTML5 project

    Table of Contents

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app

    All contacts

    communications timelinecommunications timeline : filterscommunications timeline: searchingcommunications timeline: search resultscommunications timeline : edit modecommunications timeline : replycontact list

    Individual contact

    profile : contact detailprofile : contact detail edit modeprofile : contact detail edit phone numberprofile : contact detail edit emailprofile : timelineprofile : timeline edit modeprofile : timeline delete individual communication confirmationprofile : timeline delete all communications confirmationprofile : timeline no communications recorded

    Composers and dialers

    blank message composerdialer

    Flows

    Flows : Search

    4

    567891011

    12

    131415161718192021

    22

    2324

    25

    26

  • HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app

    Release noteWireframe pack lives in:Dropbox : OWD_UX_Working/THE NEW WORLD/02_Sprints/3_Contacts_Messages/1_Interaction/wireframesJira : 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 wireframesnone

    New flows- Flows : Search

  • All contacts

  • EditCommunications

    All

    Luis Arnal Movistar

    angel.s.aMovistar

    Mark Alfenitovodafone

    Mark AlfenitoMovistar

    All the MarmaladeMovistar

    5:54 PM

    5:43 PM

    3:24 PM

    2:12 PM

    1:22 PM

    1:20 PM

    Mark CalbeolMovistar

    Today

    Yesterday

    12

    2

    3

    2

    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, voicemails).- 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.

    general note

    - communications contained in the list are grouped by Day then Contact.

    - 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.

    - 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.

    - modules within the same day are ordered in chronological order with the module with the newest timestamp at the top of the list.

    annotation

    01 Filters

    upon tap list is filtered to the history of comms for the selected mode of communication.

    02 edit buttonupon tapchanges list area to editable mode. refer to wireframe ‘xxx’

    03 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.

    upon tapallows 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 = Voicemail THEN on tap listen to voice mail

    Tap and holdOpens primary reply options. refer to wireframe ‘communications timeline: reply’

    04 Mode of communication icon, Contact Name and Carrierupon tapuser 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 Settingsupon tapOpens settings tray

    06 indication of carrierIn 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 indication of number of items in a group of communications

    Comms app (basic comms)communications timeline

    05 02

    01

    030604

    07

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app 05

  • Luis Arnal Movistar

    angel.s.aMovistar

    Mark Alfenitovodafone

    Mark AlfenitoMovistar

    All the MarmaladeMovistar

    5:54 PM

    5:43 PM

    3:24 PM

    2:12 PM

    1:22 PM

    1:20 PM

    Mark CalbeolMovistar

    Today

    Yesterday

    EditCommunications

    All

    12

    2

    3

    2Luis Arnal Movistar

    angel.s.aMovistar

    Mark Alfenitovodafone

    Mark AlfenitoMovistar

    All the MarmaladeMovistar

    5:54 PM

    5:43 PM

    3:24 PM

    2:12 PM

    1:22 PM

    1:20 PM

    Mark CalbeolMovistar

    Today

    Yesterday

    EditCommunications

    All

    12

    2

    3

    2Luis Arnal Movistar

    angel.s.aMovistar

    Mark Alfenitovodafone

    Mark AlfenitoMovistar

    All the MarmaladeMovistar

    5:54 PM

    5:43 PM

    3:24 PM

    2:12 PM

    1:22 PM

    1:20 PM

    Mark CalbeolMovistar

    Today

    Yesterday

    EditCommunications

    All

    12

    2

    3

    2

    Comms app (basic comms)communications timeline : filters

    Call filter

    List behaviour

    Individual call items (no aggregation at all)

    voice mail filter

    List behaviour

    Individual voice mail items (no aggregation at all)

    SMS filter

    List behaviour

    Aggregation by day and by conversation threads

    88HTML 5_Comms app_V4.0.pdfMay 16, 2012HTML5 UX Concepts Comms app 06

  • Luis Arnal

    Steve Arnold

    1:22 PM

    1:20 PM

    1:01 PM

    2

    3Mark Calbeol

    Yesterday

    xMar Cancel

    Mark AlfenitoMovistar

    Mark Alfenitovodafone

    Mark AlfenitoMovistar

    All the MarmaladeMovistar

    5:54 PM

    5:43 PM

    3:24 PM

    2:12 PM

    1:22 PM

    1:20 PM

    Mark CalbeolMovistar

    Today

    Yesterday

    12

    3

    2

    there’s a margin of...

    angel.sa

    Q W E R T Y U I O P

    A S D F G H J K L

    Z X C V B N M

    space.?123 search

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app

    Comms app (basic comms)communications timeline: searching

    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.

    annotation

    01 call to action to delete content of textfieldupon tap- content of text field is cleared- displayed results are reset

    02 cancel button upon tap- search function is exited and user is returned to wireframe ‘communications timeline’

    03 Search button on keyboardupon tap- Keyboard closes. User is presented with wireframe ‘communications timeline : search results’

    04 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

    upon tap- Keyboard closes. User is presented with wireframe ‘communications timeline : search results’

    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.

    04

    01

    05

    02

    03

    07

  • xMark Cancel

    All

    Mark AlfenitoMovistar

    Mark Alfenitovodafone

    Mark AlfenitoMovistar

    All the MarmaladeMovistar

    5:54 PM

    5:43 PM

    3:24 PM

    2:12 PM

    1:22 PM

    1:20 PM

    Mark CalbeolMovistar

    Today

    Yesterday

    12

    2

    3

    2

    there’s a margin of...

    angel.sa

    Comms app (basic comms)communications timeline: search results

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app

    Wireframe illustrating search results in the communications timeline. The user can

    - filter the results - drill into the profiles and communications behind the displayed results

    annotation

    01 search criteria in textfieldupon tap- keyboard is displayed again - search criteria is maintained in textfield

    02 call to action to delete content of textfieldupon tap- keyboard is displayed again - content of textfield is cleared

    03 cancel button upon tap- search function is exited and user is returned to wireframe ‘communications timeline’

    04 search filters

    upon tap list is filtered to the history of comms for the selected mode of communication.

    05 List of search results

    - same behaviour as annotation 03 and 40 in wirefrane: ‘communications timeline’

    01 02 03

    04

    05

    08

  • Luis Arnal Movistar

    angel.s.aMovistar

    Mark Alfenitovodafone

    Mark AlfenitoMovistar

    All the MarmaladeMovistar

    5:54 PM

    5:43 PM

    3:24 PM

    2:12 PM

    1:22 PM

    1:20 PM

    Mark CalbeolMovistar

    Today

    Yesterday

    DoneCommunications

    12

    2

    3

    2

    Delete all communications

    Comms app (basic comms)communications timeline : edit mode

    03

    02

    01Wireframe 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

    annotation

    01 done button

    upon tap - 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’

    02 call to action to delete a message

    upon tap dialogue to confirm deletion of message is opened. refer to wireframe ‘profile : timeline delete individual communication confirmation’

    03 delete all messages buttonupon tap dialogue to confirm deletion of all messages from selected contact is opened. refer to wireframe ‘profile : timeline delete all communications confirmation’

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app 09

  • Luis Arnal

    angel.s.a

    Mark Alfenito

    All the Marmalade

    Steve Arnold

    5:54 PM

    5:43 PM

    2:12 PM

    1:22 PM

    1:20 PM

    1:01 PM

    2

    2

    Mark Calbeol

    Today

    EditCommunications

    All

    David Alonso 3:24 PM12

    2

    3

    [email protected]

    mobile +49 1234567Telefonica

    Comms app (basic comms)communications timeline : reply

    Wireframe illustrating reply options to a communications cluster in the communications timeline

    annotation

    01 call to action to phone the contact using the primary phone numberupon tap dials associated phone number

    02 call to action to send an SMS to the primary number

    upon tap SMS composer is launched with contacts phone number prepopulated in the ‘To’ field.

    03 call to action to send an email to the primary email addressupon tap Email composer is launched with contacts email address prepopulated in the ‘To’ field.

    general interaction note

    upon tapping anywhere outside of the reply options call outcallout closes and user is returned to the view before the reply options call out was opened.

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app 10

  • Luis Arnal

    angel.s.a

    David Alonso

    Mark Alfenito

    All the Marmalade

    A

    BMark Brufau

    Albert Heinz

    Vivo

    Vivo

    Tim

    Oi

    Vivo

    Vivo

    Vivo

    AddContacts

    All

    Comms app (basic comms)contact list

    Wireframe illustrating content that is contained under the contact list tab:

    - All contacts sorted alphabetically.

    - Entry points to view a contact communication history.

    - Filters to view favourite contacts

    - Entry point to add new contacts.

    annotation

    01 Filtersupon tap user gets the reduced list of favourite contacts or the full list.

    02 Add contactupon tapTakes user to the new contact screen

    03 Contact row including operator information.upon tapTakes user to contact detail information

    04 Pendent activity indicator

    Indicator is active If the user has some unread message/call/voice mail from this message.

    01

    02

    03

    04

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app 11

  • Individual contact

  • Mark Alfenito EditBack

    [email protected]

    email

    social network

    phone

    home +49 7654321

    mobile +49 1234567Telefonica

    Facebook

    Mark Alfenito

    Comms app (basic comms)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.

    - Entry points to initiate communication via the listed channels.

    - An entry point to editing the communication channels.

    annotation

    01 back button

    upon tap user is returned to the view that they accessed the contacts profile from

    02 edit buttonupon tap- changes the contact detail area to editable mode. - label of button changes to ‘done’refer to wireframe ‘profile: contact detail edit mode’

    03 timeline tabupon taptake the user to the history of communications in timeline view with the individual whose profile is being viewed. refer to wireframe ‘profile: timeline’

    04 call to action to phone the contact using the associated phone numberupon tap dials associated phone number

    05 call to action to send an SMS to the associated number

    upon tap SMS composer is launched with contacts phone number prepopulated in the ‘To’ field.

    06 call to action to send an email to the associated email addressupon tap Email composer is launched with contacts email address prepopulated in the ‘To’ field.

    07 call to action to send a facebook message to the contactupon tap Facebook message composer is launched.

    08 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 tabupon taptake the user to the history of communications in conversation view with the individual whose profile is being viewed.

    03 10

    0201

    04 05

    06

    07

    08

    09

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app 13

  • Mark Alfenito Done

    [email protected]

    social network

    home +49 7654321

    mobile +49 1234567Telefonica

    Facebook

    Mark

    AlfenitoEdit

    add email

    add phone

    Cancel

    Comms app (basic comms)profile : contact detail edit mode

    05

    03

    0201

    Delete contact06

    07

    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 email address

    - mute incoming communications via Facebook from the contact

    annotation01 back button

    upon tap - 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’

    02 done button

    upon tap - 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’

    03 add phone button

    upon tapuser 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’

    04 call to action to delete phone number

    upon tap dialogue to confirm deletion of phone number is opened. refer to wireframe ‘xxxx’

    05 switch to mute incoming communications via Facebook from the contact

    upon tap label of switch changes to ‘off’.

    06 delete contact button

    upon tap 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’

    07 instance of communication channel

    upon press and holdselected 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

    upon tapuser 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

    upon tap user is taken to interface where the contacts firstname and second name can be edited. refer to wireframe ‘profile : contact detail edit name’

    04

    08

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app 14

  • space send

    +49 1234567

    Phone

    mobile

    Telefonica

    1 2 3 4 5 6 7 8 9 0

    ABC

    - / : ; ( ) € & @ “

    #+= . , ? ! ‘

    Mark Alfenito DoneBack

    Comms app (basic comms)profile : contact detail edit phone number

    Wireframe illustrating the interface through which the user can either add or edit an exiting phone number

    annotation

    01 back button

    upon tap - 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’

    02 done button upon tap - 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’

    03 textfield feeding back current phone number string to end user

    04 call to action to delete content of textfield upon tap content of text field is cleared

    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

    04

    0201

    03

    05

    06

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app 15

  • Q W E R T Y U I O P

    A S D F G H J K L

    Z X C V B N M

    space.?123

    [email protected]

    email

    send

    Mark Alfenito DoneBack

    Comms app (basic comms)profile : contact detail edit email

    Wireframe illustrating the interface through which the user can either add a new email address or edit an exiting email address.

    annotation

    01 back button upon tap - any edits to the email address are discarded - user is returned to contact detail interface in edit mode. - refer to wireframe ‘profile : contact detail edit mode’

    02 done button upon tap - any edits to the email address are committed - user is returned to contact detail interface in edit mode. - refer to wireframe ‘profile : contact detail edit mode’

    03 textfield feeding back current email address string to end user

    04 call to action to delete content of textfield upon tap content of text field is cleared

    02

    04

    01

    03

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app 16

  • Mark Alfenito EditBack

    5:54 PM

    5:12 PM

    5:49 PM

    Today

    Missed call +49 1234567 Telefonica

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel elit leo, sit amet semper enim...+49 7654321 Orange

    Yesterday

    4 min 15 sec call

    11:10 PM

    Missed call +49 1234567 Telefonica

    Mark Alfenito

    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.

    annotation

    01 back button upon tap user is returned to the view that they accessed the contacts profile from

    02 edit button upon tap - changes the contact detail area to editable mode. - label of button changes to ‘done’ refer to wireframe ‘profile: timeline edit mode’

    03 contact detail tab upon tap 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 tabupon taptake the user to the history of communications in conversation view with the individual whose profile is being viewed.

    general interaction note

    upon drag down when the latest communication is visible at the top of the timelinetoggle switch to switch view of communications between either timeline or conversations view becomes visible

    Comms app (basic comms)profile : timeline

    04

    01 02

    03 05

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app 17

  • Comms app (basic comms)profile : timeline edit mode

    5:54 PM

    5:12 PM

    5:49 PM

    Today

    Missed call +49 1234567 Telefonica

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel elit leo, sit amet semper enim...+49 7654321 Orange

    Yesterday

    4 min 15 sec call

    11:10 PM

    4 min 15 sec call

    Missed call +49 1234567 Telefonica

    Mark Alfenito Done

    Clear all messages

    Wireframe illustrating the timeline tab in edit mode. The timeline in edit mode allows the user to:

    - remove selected messages

    - clear all messages

    annotation

    01 done button

    upon tap - 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’

    02 call to action to delete a message

    upon tap dialogue to confirm deletion of message is opened. refer to wireframe ‘profile : timeline delete individual communication confirmation’

    03 delete all messages buttonupon tap dialogue to confirm deletion of all messages from selected contact is opened. refer to wireframe ‘profile : timeline delete all communications confirmation’

    01

    03

    02

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app 18

  • 5:54 PM

    5:12 PM

    5:49 PM

    Today

    Missed call +49 1234567 Telefonica

    Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Mauris vel elit leo, sit amet semper enim...+49 7654321 Orange

    Yesterday

    4 min 15 sec call

    11:10 PM

    4 min 15 sec call

    Missed call +49 1234567 Telefonica

    Mark Alfenito EditBack

    Clear all messages

    Cancel Confirm

    Are you sure you want to delete this communication?

    This cannot be undone

    5:12 PM

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel elit leo, sit amet semper enim...+49 7654321 Orange

    Comms app (basic comms)profile : timeline delete individual communication confirmation

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app

    Wireframe illustrating the delete individual communication confirmation dialogue.

    annotation

    01 representation of message to be deletedTo 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

    02 cancel button

    upon tap - closes delete communication dialogue- selected communication is not deleted- user is returned to the view delete communication dialogue was launched from

    03 confirm button

    upon tap - closes delete communication dialogue- selected communication is deleted- user is returned to the view delete communication dialogue was launched from minus the deleted communication

    0302

    01

    19

  • 5:54 PM

    5:12 PM

    5:49 PM

    Today

    Missed call +49 1234567 Telefonica

    Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Mauris vel elit leo, sit amet semper enim...+49 7654321 Orange

    Yesterday

    4 min 15 sec call

    11:10 PM

    4 min 15 sec call

    Missed call +49 1234567 Telefonica

    Mark Alfenito EditBack

    Clear all messages

    Cancel Confirm

    Are you sure you want to delete all communications with

    Mark Alfenito?This cannot be undone

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app

    Comms app (basic comms)profile : timeline delete all communications confirmation

    Wireframe illustrating the delete all communications confirmation dialogue.

    annotation

    01 Name of contact from which all communications will be deletedTo 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

    02 cancel button

    upon tap - closes delete all communication dialogue- no communications are deleted- user is returned to the view delete communication dialogue was launched from

    03 confirm button

    upon tap - 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’

    0302

    01

    20

  • You have no communications with Mark

    Mark Alfenito EditBack

    Mark Alfenito

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app

    Comms app (basic comms)profile : timeline no communications recorded

    Wireframe illustrating the content that is contained under the Timeline tab within a contacts profile when no communications are recorded.

    21

  • Composers and dialers

  • To:

    Q W E R T Y U I O P

    A S D F G H J K L

    Z X C V B N M

    space.?123 Send

    Neque porro quisquam est qui dolo-rem ipsum quia dolor sit amet, con-sectetur, adipisci velit...

    Comms app (basic comms)blank message composer

    Wireframe illustrating content that is contained under the SMS composer tab:

    - Blank SMS thread.

    - Recipient area

    - Keypad

    annotation

    01 Add recipientupon tap takes user to the contact list to select a recipient.

    02 Type numberupon tapKeypad is displayed in order to type a phone number.

    03 Message bubbleMessage composer in edit mode (still not send)

    04 Send buttonupon tapMessage bubble changes state and becomes part of the thread.

    NotesNavigation tabs are always visible at this label.

    03

    03

    0102

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app 23

  • +*# 0

    8TUV

    9WXYZ

    7PQRS

    5JKL

    6MNO

    4GHI

    2ABC

    3DEF

    1.

    CALL+

    +44 668 442

    Comms app (basic comms)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

    01 Phone number display

    02 Dial padupon tapplace the number selected on the phone number display

    03 Add contact buttonupon tapSave the current number on display as a new contact.

    04 Call buttonupon tapPlace a call. Takes user to the in call screen.

    0403

    01

    02

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app 24

  • Flows

  • EditCommunications

    All

    Luis Arnal Movistar

    angel.s.aMovistar

    Mark Alfenitovodafone

    Mark AlfenitoMovistar

    All the MarmaladeMovistar

    5:54 PM

    5:43 PM

    3:24 PM

    2:12 PM

    1:22 PM

    1:20 PM

    Mark CalbeolMovistar

    Today

    Yesterday

    12

    2

    3

    2

    Luis Arnal

    Steve Arnold

    1:22 PM

    1:20 PM

    1:01 PM

    2

    3Mark Calbeol

    Yesterday

    xMar Cancel

    Mark AlfenitoMovistar

    Mark Alfenitovodafone

    Mark AlfenitoMovistar

    All the MarmaladeMovistar

    5:54 PM

    5:43 PM

    3:24 PM

    2:12 PM

    1:22 PM

    1:20 PM

    Mark CalbeolMovistar

    Today

    Yesterday

    12

    3

    2

    there’s a margin of...

    angel.sa

    Q W E R T Y U I O P

    A S D F G H J K L

    Z X C V B N M

    space.?123 search

    xMark Cancel

    All

    Mark AlfenitoMovistar

    Mark Alfenitovodafone

    Mark AlfenitoMovistar

    All the MarmaladeMovistar

    5:54 PM

    5:43 PM

    3:24 PM

    2:12 PM

    1:22 PM

    1:20 PM

    Mark CalbeolMovistar

    Today

    Yesterday

    12

    2

    3

    2

    there’s a margin of...

    angel.sa

    Mark Alfenito EditBack

    5:54 PM

    5:12 PM

    5:49 PM

    Today

    Missed call +49 1234567 Telefonica

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel elit leo, sit amet semper enim...+49 7654321 Orange

    Yesterday

    4 min 15 sec call

    11:10 PM

    Missed call +49 1234567 Telefonica

    Mark Alfenito

    Mark Alfenito EditBack

    [email protected]

    email

    social network

    phone

    home +49 7654321

    mobile +49 1234567Telefonica

    Facebook

    Mark Alfenito

    Flows : Search

    HTML 5_Comms app_V4.0.pdfMay 16, 2012

    HTML5 UX Concepts Comms app

    Comms app (basic comms)communications timeline: searching

    Comms app (basic comms)communications timeline

    Comms app (basic comms)communications timeline: search results

    upon tap

    upon tap

    upon tap

    upon tap

    upon tap

    upon tap

    upon tap(filter view)

    upon tap

    upon tap

    Comms app (basic comms)profile : timeline

    Comms app (basic comms)profile : contact detail

    26

  • Thank you

    Ayman [email protected]