Common Design Patterns for Mobile (part 1)
-
Upload
ivano-malavolta -
Category
Education
-
view
1.691 -
download
1
description
Transcript of Common Design Patterns for Mobile (part 1)
Common Design PatternsCommon Design Patternsfor Mobile
Ivano MalavoltaIvano Malavolta
http://www.di.univaq.it/malavolta
Roadmap
• Navigation• Navigation
• Forms
• Search, sort & filter
• Tools
• Invitations• Invitations
• Feedback & Affordance
• Anti-Patterns
Navigation
• How users move through the views– Springboard– Springboard– Lists (Vertical, Infinite)– Tabs– Gallery (Grid)– Dashboard– Metaphor– Page Carousel– Page Carousel– Image Carousel– Expanding Lists– Infinite Area
Springboard
• Use a grid layout grid layout grid layout grid layout for items of equal importance, or an irregular layout to emphasize some items more than othersirregular layout to emphasize some items more than others
• Consider personalization and customization options
Lists
• Work well for long with subtext
• All internal screens should have a way for returning back
• It can be “infinite”, it can have thumbnails
Tabs
• Clearly differentiatedifferentiatedifferentiatedifferentiate the selected tab from the others
• Use easy to recognize iconsiconsiconsicons or icons with labels• Use easy to recognize iconsiconsiconsicons or icons with labels
Gallery (Grid)
• Works best for frequently updated content frequently updated content frequently updated content frequently updated content that people want to browsebrowsebrowsebrowsewant to browsebrowsebrowsebrowse
Dashboard
• Dashboards provide a roll-up of key performance indicatorskey performance indicatorskey performance indicatorskey performance indicators• Don’t overload Don’t overload Don’t overload Don’t overload the dashboard• Don’t overload Don’t overload Don’t overload Don’t overload the dashboard
• Usually Springboards are also called Dashboards
Metaphor
• Pages are modeled to reflect the application’s metaphormetaphormetaphormetaphor
• Use the Metaphor pattern judiciously
Page carousel
• Works best for navigating a small number of pages
• Visual indicator Visual indicator Visual indicator Visual indicator to reflect the number of screens, and current screen current screen
• FlickFlickFlickFlick to navigate the carousel
Image Carousel
• Works best for displaying fresh visual contentfresh visual contentfresh visual contentfresh visual content, like articles, products, and photos
• Provide visual affordanceProvide visual affordanceProvide visual affordanceProvide visual affordance, either with arrows, partial • Provide visual affordanceProvide visual affordanceProvide visual affordanceProvide visual affordance, either with arrows, partial images, or page indicators that more content can be accessed
Expanding Lists
• Works best for progressively disclosing more details progressively disclosing more details progressively disclosing more details progressively disclosing more details or options for an objectoptions for an object
Infinite Area
• The entire data set can be considered to be a largelargelargelarge, two-dimensional graphicdimensional graphic
• The viewport shows only a small
subset of the whole data set
Roadmap
• Navigation• Navigation
• Forms
• Search, sort & filter
• Tools
• Invitations• Invitations
• Feedback & Affordance
• Anti-Patterns
Forms
• They are for data entry and configuration– Sign In– Sign In– Registration– Check-in– Comments– Users Profile– Share– Share– Empty Datasets– Multi-step– Settings
Sign In
• Don’t innovate Don’t innovate Don’t innovate Don’t innovate on the sign in screen
• Provide a way to retrieve a forgotten passwordretrieve a forgotten passwordretrieve a forgotten passwordretrieve a forgotten password
• Provide a way to login via social login via social login via social login via social networksnetworksnetworksnetworks• Provide a way to login via social login via social login via social login via social networksnetworksnetworksnetworks
Registration
• Keep it shortshortshortshort, preferably one screenone screenone screenone screen
• Register button well visibleRegister button well visibleRegister button well visibleRegister button well visible
Check-in
• Keep it ultraultraultraultra----shortshortshortshort
• Design for speedspeedspeedspeed, and efficiencyefficiencyefficiencyefficiency• Design for speedspeedspeedspeed, and efficiencyefficiencyefficiencyefficiency
• Eliminate Eliminate Eliminate Eliminate unnecessaryunnecessaryunnecessaryunnecessary fieldsfieldsfieldsfields
• Don’t show the Don’t show the Don’t show the Don’t show the mapmapmapmap!!!!
Comments
• Invite user to leave comment
• Always clarify what is being commented
• Show other people’s comments over time• Show other people’s comments over time
Time line
• Within the current hour, show as minutes ago
• Within the current day, show the time as number of • Within the current day, show the time as number of
hours ago
• Within the last two days, shown the day of the week,
and the time range, morning, afternoon, evening, night
• Within the past week, show the day of the week
• Within 12 months, show as Mmm/DD
• Older than 12 months, show only the year
Users Profile
• Put the badges in evidence
• Show their contribution to the social network• Show their contribution to the social network
• Provide action controls
Share
• Always keep track of past logins
• Always provide an “off social” way to share (e.g., by email)• Always provide an “off social” way to share (e.g., by email)
• Remark what is being shared
Empty datasets
• Avoid white-screens, explain why the dataset is empty
• call for action, only one!
• Avoid error messages• Avoid error messages
Multi Step
• Show the user where they are and where they can go
• Eliminate unnecessary fields
• minimize the number of pages and steps
Settings
• Put them inside the app
• Clear and grouped
• Easy to be understood
Roadmap
• Navigation• Navigation
• Forms
• Search, sort & filter
• Tools
• Invitations• Invitations
• Feedback & Affordance
• Anti-Patterns
Search, Sort & Filter
• Search– Explicit Search– Explicit Search
– Auto-complete
– Dynamic Search
– Scoped Search
– Saved & Recent– Saved & Recent
– Search form
– Search Results
Explicit Search
• Offer a clear button clear button clear button clear button in the field
• Provide an option to cancel option to cancel option to cancel option to cancel the search• Provide an option to cancel option to cancel option to cancel option to cancel the search
• Use feedbackfeedbackfeedbackfeedback to show the search is being performed
Search Auto-complete
• Show feedback Show feedback Show feedback Show feedback if there could be a delay in displaying the results
• Consider emphasizing the matching search text emphasizing the matching search text emphasizing the matching search text emphasizing the matching search text in the search • Consider emphasizing the matching search text emphasizing the matching search text emphasizing the matching search text emphasizing the matching search text in the search results
Dynamic Search
• AutomaticallyAutomaticallyAutomaticallyAutomatically filtersfiltersfiltersfilters a given list of items
• Works well for constrained data setsconstrained data setsconstrained data setsconstrained data sets, like an address book • Works well for constrained data setsconstrained data setsconstrained data setsconstrained data sets, like an address book or personal media library
Scoped Search
• Offer reasonable scoping options scoping options scoping options scoping options based on the data set
• 3 to 6 3 to 6 3 to 6 3 to 6 scoping options are plenty
Search form
• Minimize the number of input fieldsMinimize the number of input fieldsMinimize the number of input fieldsMinimize the number of input fields
• Follow form design best practices form design best practices form design best practices form design best practices (alignment, labels, size)
• Use only when strictly
needed
Search Results
• Use live scroll live scroll live scroll live scroll instead of paging
• Apply a reasonable default sort orderdefault sort orderdefault sort orderdefault sort order
• CallCallCallCall forforforfor actionactionactionaction• CallCallCallCall forforforfor actionactionactionaction
this is also an Anti-pattern(see Oceans of Buttons)
Search, Sort & Filter
• Sort– Onscreen Sort– Onscreen Sort
– Sort Order Selector
Onscreen Sort
• Clearly show which option is selectedClearly show which option is selectedClearly show which option is selectedClearly show which option is selected
• Do not use it if labels option labels don’t fit nicely in a fit nicely in a fit nicely in a fit nicely in a • Do not use it if labels option labels don’t fit nicely in a fit nicely in a fit nicely in a fit nicely in a toggle button bartoggle button bartoggle button bartoggle button bar
Sort Order Selector
• Follow OS design conventions Follow OS design conventions Follow OS design conventions Follow OS design conventions for choosing the selector control, or choose an OS neutral interface control
• Clearly show which sort option is appliedClearly show which sort option is appliedClearly show which sort option is appliedClearly show which sort option is applied• Clearly show which sort option is appliedClearly show which sort option is appliedClearly show which sort option is appliedClearly show which sort option is applied
Filter Forms
• Don’t over-design the filter, a simple onscreen filter or drawer will usually sufficedrawer will usually suffice
References
• Screenshots from:– www.mobiledesignpatterngallery.com
– pttrns.com– pttrns.com
– inspired-ui.com
– mobile-patterns.com