Roadmap

• Navigation• Navigation

• Forms

• Search, sort & filter

• Tools

• Invitations• Invitations

• Feedback & Affordance

• Anti-Patterns

Tools

• Buttons & Controls– Toolbar– Toolbar

– Option Menu

– Contextual Tools

– Inline Actions

– Call to Action Buttons– Call to Action Buttons

– Multi-state Button

– Bulk Actions

– Maps

Toolbar

• Contain screen level actionsscreen level actionsscreen level actionsscreen level actions, they are generally displayed at the bottom of the screen andthe bottom of the screen and

• Choose icons that are easy to recognizeeasy to recognizeeasy to recognizeeasy to recognize, or use labels plus icons

Option Menu

• Choose direct interactions direct interactions direct interactions direct interactions when possible

• Possibly don’t hide navigation don’t hide navigation don’t hide navigation don’t hide navigation in the Option Menu (like • Possibly don’t hide navigation don’t hide navigation don’t hide navigation don’t hide navigation in the Option Menu (like Facebook)

Contextual Tools

• If buttons are necessary, they should be displayed in displayed in displayed in displayed in proximity to the actionable objectproximity to the actionable objectproximity to the actionable objectproximity to the actionable object

• Choose a familiar icon familiar icon familiar icon familiar icon or use a text label• Choose a familiar icon familiar icon familiar icon familiar icon or use a text label

Inline Actions

• They should be in proximity to the actionable objectproximity to the actionable objectproximity to the actionable objectproximity to the actionable object

• Choose a familiar icon familiar icon familiar icon familiar icon or use a text label• Choose a familiar icon familiar icon familiar icon familiar icon or use a text label

• Max 1 to 2 Inline Actions per objectMax 1 to 2 Inline Actions per objectMax 1 to 2 Inline Actions per objectMax 1 to 2 Inline Actions per object

Call to Action Buttons

• Don’t hide the main call to action Don’t hide the main call to action Don’t hide the main call to action Don’t hide the main call to action in a menu or disguise it as an unrecognizable icon in a toolbar

• Good contrast Good contrast Good contrast Good contrast and clear labelclear labelclear labelclear label

Multi-state Button

• Multi-State Buttons work well for a series of tightly a series of tightly a series of tightly a series of tightly correlated actionscorrelated actionscorrelated actionscorrelated actions that will to be performed in successioncorrelated actionscorrelated actionscorrelated actionscorrelated actions that will to be performed in succession

Bulk Actions

• Bulk actions like delete and reorder are best handled in an in an in an in an edit modeedit modeedit modeedit mode

• Provide an obvious option for exiting the modeobvious option for exiting the modeobvious option for exiting the modeobvious option for exiting the mode• Provide an obvious option for exiting the modeobvious option for exiting the modeobvious option for exiting the modeobvious option for exiting the mode

Maps

• Provide visiblevisiblevisiblevisible markersmarkersmarkersmarkers (avoiding “terrain-mode”)

• UseUseUseUse asasasas muchmuchmuchmuch screenscreenscreenscreen asasasas possiblepossiblepossiblepossible• UseUseUseUse asasasas muchmuchmuchmuch screenscreenscreenscreen asasasas possiblepossiblepossiblepossible

• Can Can Can Can bebebebe smallsmallsmallsmall if the location is not the main item

Roadmap

• Navigation• Navigation

• Forms

• Search, sort & filter

• Tools

• Invitations• Invitations

• Feedback & Affordance

• Anti-Patterns

Invitations

• Helpful tips displayed the first time a userlaunches an applaunches an app– Dialog– Tip– Tour– Video– Transparency– Transparency– 1st Time Through– Persistent– Discoverable

Dialog

• Keep dialog content shortcontent shortcontent shortcontent short

• make sure there is an alternate way make sure there is an alternate way make sure there is an alternate way make sure there is an alternate way to access instructions • make sure there is an alternate way make sure there is an alternate way make sure there is an alternate way make sure there is an alternate way to access instructions from within the application

Tip

• Place tips in proximity to the feature they refer toPlace tips in proximity to the feature they refer toPlace tips in proximity to the feature they refer toPlace tips in proximity to the feature they refer to

• keep the content shortcontent shortcontent shortcontent short• keep the content shortcontent shortcontent shortcontent short

• remove the tip remove the tip remove the tip remove the tip once interaction begins

Tour

• A tour should highlight key features highlight key features highlight key features highlight key features of the application, preferably from a (user) goal perspective

• Keep it shortshortshortshort and visually engagingvisually engagingvisually engagingvisually engaging

Video

• Demos should showcase key features showcase key features showcase key features showcase key features or show how to use the applicationapplication

• Common video features (stop, pause, volume controlsstop, pause, volume controlsstop, pause, volume controlsstop, pause, volume controls, etc,...) should be provided

Transparency

• Transparencies are not meant to compensate for poor not meant to compensate for poor not meant to compensate for poor not meant to compensate for poor screen designsscreen designsscreen designsscreen designs!

• Remove the Transparency once interaction beginsRemove the Transparency once interaction beginsRemove the Transparency once interaction beginsRemove the Transparency once interaction begins• Remove the Transparency once interaction beginsRemove the Transparency once interaction beginsRemove the Transparency once interaction beginsRemove the Transparency once interaction begins

Myfavouriteinvitation!

1st time through

• Clearly differentiate the invitation Clearly differentiate the invitation Clearly differentiate the invitation Clearly differentiate the invitation from other content with images or other visual cueswith images or other visual cues

Persistent

• Keep it shortKeep it shortKeep it shortKeep it short

• Clearly differentiate the invitation Clearly differentiate the invitation Clearly differentiate the invitation Clearly differentiate the invitation from other content with images or other visual cueswith images or other visual cues

Discoverable

• Use Discoverable invitations sparinglysparinglysparinglysparingly

• The most common instance of this pattern is for prompting a for prompting a for prompting a for prompting a • The most common instance of this pattern is for prompting a for prompting a for prompting a for prompting a data refreshdata refreshdata refreshdata refresh

Roadmap

• Navigation• Navigation

• Forms

• Search, sort & filter

• Tools

• Invitations• Invitations

• Feedback & Affordance

• Anti-Patterns

Feedback & Affordance

• Feedback– Errors– Errors– Confirmation– System Status

• Affordance– Tap– Flick– Drag

Feedback: Errors

• Use plain language that offers a solution offers a solution offers a solution offers a solution for resolving the issue

• make the error visiblevisiblevisiblevisible• make the error visiblevisiblevisiblevisible

• use in-screen messaging instead of modal dialogs

Feedback: Confirmation

• Provide confirmation when an action is takenwhen an action is takenwhen an action is takenwhen an action is taken

• don’t break the user’s flowdon’t break the user’s flowdon’t break the user’s flowdon’t break the user’s flow• don’t break the user’s flowdon’t break the user’s flowdon’t break the user’s flowdon’t break the user’s flow

Feedback: System Status

• Provide feedback Provide feedback Provide feedback Provide feedback about the system’s status

• Offer a cancel option Offer a cancel option Offer a cancel option Offer a cancel option for potentially lengthy operations• Offer a cancel option Offer a cancel option Offer a cancel option Offer a cancel option for potentially lengthy operations

Affordance: Tap

• Use common visual design techniques Use common visual design techniques Use common visual design techniques Use common visual design techniques to indicate tappablecontrolscontrols

• Apply 3D effects judiciously

Affordance: Flick

• Use a page indicatorpage indicatorpage indicatorpage indicator

• show the edge of the next itemedge of the next itemedge of the next itemedge of the next item• show the edge of the next itemedge of the next itemedge of the next itemedge of the next item

• Avoid heavy weight scroll barsAvoid heavy weight scroll barsAvoid heavy weight scroll barsAvoid heavy weight scroll bars

Affordance: Drag

• Use a recognizable icon recognizable icon recognizable icon recognizable icon for the handle

• Consider using an invitationinvitationinvitationinvitation to let users know this feature is • Consider using an invitationinvitationinvitationinvitation to let users know this feature is available

Roadmap

• Navigation• Navigation

• Forms

• Search, sort & filter

• Tools

• Invitations• Invitations

• Feedback & Affordance

• Anti-Patterns

Anti-Patterns

• Common pitfalls to avoid– Novel Notions– Novel Notions

– Metaphor Mismatch

– Idiot Boxes

– Chart Junk

– Oceans of Buttons– Oceans of Buttons

Novel Notions

• If you are looking for a way to innovate with your application, focus on your core features and focus on your core features and focus on your core features and focus on your core features and application, focus on your core features and focus on your core features and focus on your core features and focus on your core features and offeringsofferingsofferingsofferings, but rely on best practices for the rely on best practices for the rely on best practices for the rely on best practices for the interface designinterface designinterface designinterface design

• If you design a custom control, rigorously test it If you design a custom control, rigorously test it If you design a custom control, rigorously test it If you design a custom control, rigorously test it and refine it to make sure it is usableand refine it to make sure it is usable

Novel Notions Examples

Metaphor Mismatch

• Consists in picking the wrong metaphor for the interface:interface:

– Control mismatch

– Icon mismatch

– Mental model mismatch

Metaphor Mismatch Examples

Idiot Boxes

• Avoid disrupting the workflowAvoid disrupting the workflowAvoid disrupting the workflowAvoid disrupting the workflow, only show a confirmation dialog when an irreparable action is confirmation dialog when an irreparable action is being taken (like a permanent delete)

Chart Junk

• Only use visual elements in charts and graphs that are necessary to communicate the information represented on the graphrepresented on the graph

Oceans of Buttons

• Use standard patterns Use standard patterns Use standard patterns Use standard patterns for displaying page level actions

• Provide contextual tools contextual tools contextual tools contextual tools for item level actions instead of repeating the same buttonrepeating the same button

• Keep page level actions visually separate from navigational Keep page level actions visually separate from navigational Keep page level actions visually separate from navigational Keep page level actions visually separate from navigational elementselementselementselements

References

• Screenshots from:– www.mobiledesignpatterngallery.com

– pttrns.com– pttrns.com

– inspired-ui.com

– mobile-patterns.com