grid layout for items of equal importance, or an irregular layout to emphasize some items more than others irregular layout to emphasize some items more than others • Consider personalization and customization options
from the others • Use easy to recognize icons icons icons icons or icons with labels • Use easy to recognize icons icons icons icons or icons with labels
of pages • Visual indicator Visual indicator Visual indicator Visual indicator to reflect the number of screens, and current screen current screen • Flick Flick Flick Flick to navigate the carousel
fresh visual content fresh visual content fresh visual content, like articles, products, and photos • Provide visual affordance Provide visual affordance Provide visual affordance Provide visual affordance, either with arrows, partial • Provide visual affordance Provide visual affordance Provide visual affordance Provide visual affordance, either with arrows, partial images, or page indicators that more content can be accessed
progressively disclosing more details progressively disclosing more details progressively disclosing more details or options for an object options for an object
innovate on the sign in screen • Provide a way to retrieve a forgotten password retrieve a forgotten password retrieve a forgotten password retrieve a forgotten password • Provide a way to login via social login via social login via social login via social networks networks networks networks • Provide a way to login via social login via social login via social login via social networks networks networks networks
screen one screen one screen one screen • Register button well visible Register button well visible Register button well visible Register button well visible
-short short short short • Design for speed speed speed speed, and efficiency efficiency efficiency efficiency • Design for speed speed speed speed, and efficiency efficiency efficiency efficiency • Eliminate Eliminate Eliminate Eliminate unnecessary unnecessary unnecessary unnecessary fields fields fields fields • Don’t show the Don’t show the Don’t show the Don’t show the map map map map! ! ! !
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
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 feedback feedback feedback feedback to show the search is being performed
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
filters a given list of items • Works well for constrained data sets constrained data sets constrained data sets constrained data sets, like an address book • Works well for constrained data sets constrained data sets constrained data sets constrained data sets, like an address book or personal media library
the number of input fields Minimize the number of input fields Minimize 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
live scroll instead of paging • Apply a reasonable default sort order default sort order default sort order default sort order • Call Call Call Call for for for for action action action action • Call Call Call Call for for for for action action action action this is also an Anti-pattern (see Oceans of Buttons)
show which option is selected Clearly show which option is selected Clearly 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 bar toggle button bar toggle button bar toggle button bar
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 applied Clearly show which sort option is applied Clearly show which sort option is applied Clearly show which sort option is applied • Clearly show which sort option is applied Clearly show which sort option is applied Clearly show which sort option is applied Clearly show which sort option is applied
level actions screen level actions, they are generally displayed at the bottom of the screen and the bottom of the screen and • Choose icons that are easy to recognize easy to recognize easy to recognize easy to recognize, or use labels plus icons
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)
displayed in displayed in displayed in displayed in proximity to the actionable object proximity to the actionable object proximity to the actionable object proximity 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
actionable object proximity to the actionable object proximity to the actionable object proximity 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 object Max 1 to 2 Inline Actions per object Max 1 to 2 Inline Actions per object Max 1 to 2 Inline Actions per object
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 label clear label clear label clear label
of tightly a series of tightly a series of tightly a series of tightly correlated actions correlated actions correlated actions correlated actions that will to be performed in succession correlated actions correlated actions correlated actions correlated actions that will to be performed in succession
best handled in an in an in an in an edit mode edit mode edit mode edit mode • Provide an obvious option for exiting the mode obvious option for exiting the mode obvious option for exiting the mode obvious option for exiting the mode • Provide an obvious option for exiting the mode obvious option for exiting the mode obvious option for exiting the mode obvious option for exiting the mode
markers (avoiding “terrain-mode”) • Use Use Use Use as as as as much much much much screen screen screen screen as as as as possible possible possible possible • Use Use Use Use as as as as much much much much screen screen screen screen as as as as possible possible possible possible • Can Can Can Can be be be be small small small small if the location is not the main item
content 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
refer to Place tips in proximity to the feature they refer to Place tips in proximity to the feature they refer to Place tips in proximity to the feature they refer to • keep the content short content short content short content short • keep the content short content short content short content short • remove the tip remove the tip remove the tip remove the tip once interaction begins
features highlight key features highlight key features of the application, preferably from a (user) goal perspective • Keep it short short short short and visually engaging visually engaging visually engaging visually engaging
showcase key features showcase key features or show how to use the application application • Common video features (stop, pause, volume controls stop, pause, volume controls stop, pause, volume controls stop, pause, volume controls, etc,...) should be provided
not meant to compensate for poor not meant to compensate for poor not meant to compensate for poor screen designs screen designs screen designs screen designs! • Remove the Transparency once interaction begins Remove the Transparency once interaction begins Remove the Transparency once interaction begins Remove the Transparency once interaction begins • Remove the Transparency once interaction begins Remove the Transparency once interaction begins Remove the Transparency once interaction begins Remove the Transparency once interaction begins My favourite invitation!
the invitation Clearly differentiate the invitation Clearly differentiate the invitation from other content with images or other visual cues with images or other visual cues
short Keep 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 cues with images or other visual cues
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 refresh data refresh data refresh data refresh
offers a solution offers a solution offers a solution for resolving the issue • make the error visible visible visible visible • make the error visible visible visible visible • use in-screen messaging instead of modal dialogs
when an action is taken when an action is taken when an action is taken • don’t break the user’s flow don’t break the user’s flow don’t break the user’s flow don’t break the user’s flow • don’t break the user’s flow don’t break the user’s flow don’t break the user’s flow don’t break the user’s flow
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
visual design techniques Use common visual design techniques Use common visual design techniques to indicate tappable controls controls • Apply 3D effects judiciously
indicator page indicator • show the edge of the next item edge of the next item edge of the next item edge of the next item • show the edge of the next item edge of the next item edge of the next item edge of the next item • Avoid heavy weight scroll bars Avoid heavy weight scroll bars Avoid heavy weight scroll bars Avoid heavy weight scroll bars
icon recognizable icon for the handle • Consider using an invitation invitation invitation invitation to let users know this feature is • Consider using an invitation invitation invitation invitation to let users know this feature is available
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 offerings offerings offerings offerings, 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 design interface design interface design interface 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 usable and refine it to make sure it is usable
workflow Avoid disrupting the workflow Avoid 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)
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 button repeating 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 elements elements elements elements
iivanoo
chanyou0311
riita10069
kakehashi
vanchan2625
sakaitakeshi
tkikuc
sadynitro
imai448
toshi0607
narirou
takeyukitamura
ebiken
jlugia
bkeepers
orderedlist
chriscoyier
shlominoach
jonrohan
holman
tanoku
jnunemaker
marcduiker
speakerdeck
trishagee
