Embed Size (px)
DESCRIPTION
Presentation at the User Experience Professionals Association conference in June 2012. In complex applications, such as claims processing, learning management, scheduling systems, engineering software, and other such tools, it is common to provide flexibility to modify the user interface (and the underlying processing) to meet widely varying needs, rather than assuming that one size fits all. When working on the user experience design for such products, we need to ensure that it is easy for clients or users to configure the product as they wish, and we need to be mindful of the impact that client-specific configuration, customization, or individual personalization will have on the overall user experience. This presentation describes design patterns for configurable and customizable user interfaces, discusses how to decide which features should be configurable, and shares lessons learned.
Citation preview
www.designforcontext.com Lisa Ba4le Laura Chessman
Designing Configurable and Customizable Applica7ons
UPA CONFERENCE | JUNE 2012
UPA Conference | June 6, 2012 2
Background
Lisa Ba4le Laura Chessman
UPA Conference | June 6, 2012 3
CONFIGURATION
CUSTOMIZATION
PERSONALIZATION
UPA Conference | June 6, 2012 4
Who is configuring the applicaRon?
End User OrganizaRon/Client
UPA Conference | June 6, 2012 5
Appearance
Layouts
Info displays
NavigaRon
InteracRons
Permissions
End User OrganizaRon / Client
UPA Conference | June 6, 2012 6
What other categories are there?
UPA Conference | June 6, 2012 7
Layouts
Info displays
NavigaRon
InteracRons
Permissions
End User
Appearance Color themes Fonts/sizes
OrganizaRon / Client
UPA Conference | June 6, 2012 8
Appearance
n User preferences for colors and fonts are common
n Makes a product “feel” more usable
n Accessibility requirement for font size, high contrast
End User
Color theme Color theme
UPA Conference | June 6, 2012 9
COLOR THEME
UPA Conference | June 6, 2012 10
COLOR THEME
UPA Conference | June 6, 2012 11
COLOR THEME
UPA Conference | June 6, 2012 12
Design ConsideraRons
n When users can choose whether to use a product, color themes are a good way to make it personal. If it is super easy to do.
n Allow users to control the font size of text content. Important for readability and accessibility.
n Decide which UI elements should be changeable. Some (e.g. icons, color symbols, controls) usually should not.
n Prevent disastrous combinaRons. Ensure changes don’t interfere with icons or color symbols.
n Provide a “Reset” opRon.
End User
APPEARANCE
UPA Conference | June 6, 2012 13
Layouts
Info displays
NavigaRon
InteracRons
Permissions
OrganizaRon / Client
Appearance CondiRonal branding White labeling
End User
UPA Conference | June 6, 2012 14
Appearance
CondiRonal branding
n CondiRonal branding (changes based on data, user a4ributes, domain, etc.)
n So`ware as a service is o`en re-‐branded with the client’s brand
White labeling
OrganizaRon / Client
UPA Conference | June 6, 2012 15
CONDITIONAL BRANDING
UPA Conference | June 6, 2012 16
CONDITIONAL BRANDING
UPA Conference | June 6, 2012 17
This is animated. WHITE LABELING
UPA Conference | June 6, 2012 18
Design ConsideraRons
n Provide a (limited) range of standard skins that accommodate most needs. Customiza@on beyond that is charged to the client.
n For standard skins, make them all equally good, and test with all of them.
n Layout changes can lead to unpredictable results!
OrganizaRon / Client
APPEARANCE
UPA Conference | June 6, 2012 19
Info displays
NavigaRon
InteracRons
Permissions
End User
Appearance
Layouts Screens, portlets, resizing, defaults
OrganizaRon / Client
UPA Conference | June 6, 2012 20
Layouts
n Make changes to accommodate different work styles
n One Rme setup
n On the fly changes
n SupporRng different devices and work setups
End User
One Rme setup
MulRple monitors
Flexible changes
MulRple monitors
UPA Conference | June 6, 2012 21
Lisa, this may be a be4er example under layout… even though this is toolbars, this and the next slide are really demonstraRng a layout configuraRon.
LAYOUT SETUP
UPA Conference | June 6, 2012 22
LAYOUT SETUP
UPA Conference | June 6, 2012 23
UPA Conference | June 6, 2012 24
LAYOUT SETUP
UPA Conference | June 6, 2012 25
LAYOUT ON-‐THE-‐FLY CHANGES
UPA Conference | June 6, 2012 26
LAYOUT ON-‐THE-‐FLY CHANGES
UPA Conference | June 6, 2012 27
LAYOUT ON-‐THE-‐FLY CHANGES
UPA Conference | June 6, 2012 28
LAYOUT ON-‐THE-‐FLY CHANGES
UPA Conference | June 6, 2012 29
Monitor 1 Monitor 2
AnonymizaRon: make url’s unreadable
MULTIPLE MONITORS
UPA Conference | June 6, 2012 30
MULTIPLE MONITORS
UPA Conference | June 6, 2012 31
Design ConsideraRons
n Infrequent users won’t bother. Best used for: • Frequent users • Dense informaRon displays • Different tasks/quesRons requiring different informaRon • Highly individual differences in work pracRce
n Remember the way the user le` it (within session).
n Design alternaRve views for different display sizes.
n Graceful degradaRon when things don’t fit.
n Easy to revert to their saved or standard layout.
n Make it difficult for users to “lose” informaRon, gadgets, or funcRonality
End User
LAYOUTS
UPA Conference | June 6, 2012 32
Info displays
NavigaRon
InteracRons
Permissions
OrganizaRon / Client
Appearance
Layouts Device-‐based and role-‐based variaRons
End User
UPA Conference | June 6, 2012 33
Layouts
Context-‐driven
Block management
n Device appropriate
n OpRmizing to meet performance goals for a specific task Flexible layouts
OrganizaRon / Client
UPA Conference | June 6, 2012 34
Web-‐based app includes reporRng features
Desktop widget for quick Rme entry
Widgets embedded inside 3rd party web apps Mobile app for Rme tracking on the go
DEVICE-‐APPROPRIATE LAYOUT
UPA Conference | June 6, 2012 35
LAYOUT OPTIONS
UPA Conference | June 6, 2012 36
UPA Conference | June 6, 2012 37
LAYOUT OPTIONS
UPA Conference | June 6, 2012 38
LAYOUT OPTIONS
UPA Conference | June 6, 2012 39
LAYOUT OPTIONS
UPA Conference | June 6, 2012 40
Design ConsideraRons
n Giving structured opRons will encourage selecRon of user friendly layouts This requires more knowledge of users and their tasks
n Giving more flexible opRons provides organizaRons with greater freedom but bigger risks
OrganizaRon / Client
LAYOUT
UPA Conference | June 6, 2012 41
Layouts
NavigaRon
InteracRons
Permissions
End User
Appearance
Info displays Tables, filters, user-‐defined fields
OrganizaRon / Client
UPA Conference | June 6, 2012 42
InformaRon Displays
n Add/remove columns from tables
n Filter or sort to focus on a subset of data
n Change display formats
n Add fields
End User
Tables
Advanced sorRng
Filters
UPA Conference | June 6, 2012 43
INFORMATION DISPLAYS -‐ TABLES
UPA Conference | June 6, 2012 44
INFORMATION DISPLAYS -‐ TABLES
UPA Conference | June 6, 2012 45
Find and select types of data to display in the interface and to receive as reports via email.
INFORMATION DISPLAYS -‐ FILTERS
UPA Conference | June 6, 2012 46
Supervisor can choose which machines(s) to focus on. Data and alerts related to other machines are hidden from view. Supports scenarios where supervisors frequently need to shi` their responsibiliRes to different machines.
INFORMATION DISPLAYS -‐ FILTERS
UPA Conference | June 6, 2012 47
Users can save filter sets that can be used in a variety of reports
When user has relevant filter sets that can be applied to a parRcular report view, the sets are available for selecRon
INFORMATION DISPLAYS -‐ FILTERS
UPA Conference | June 6, 2012 48
Within a user’s session, filters and sorRng is remembered for lists.
INFORMATION DISPLAYS -‐ FILTERS
UPA Conference | June 6, 2012 49
INFORMATION DISPLAYS – ADVANCED SORTING
UPA Conference | June 6, 2012 50
Design ConsideraRons
n Provide sensible defaults to address majority needs.
n Allow users to add/remove/filter/change when: • There are large volumes of informaRon but some users only need a subset.
• Individuals have strongly held conflicRng preferences (e.g. date/Rme formats wanRng to see informaRon in a glass as “half full” and some as “half empty.”).
n Prevent removal of criRcal informaRon.
n Unlimited flexibility leads to unreadable displays.
n Too many opRons can be overwhelming.
End User
INFO DISPLAYS
UPA Conference | June 6, 2012 51
Layouts
NavigaRon
InteracRons
Permissions
OrganizaRon / Client
Appearance
Info displays Client-‐defined fields, data-‐and context-‐driven displays
End User
UPA Conference | June 6, 2012 52
InformaRon Displays
Client-‐defined fields
Client-‐defined labels
n Data opRons that are appropriate for that organizaRon
n Reduce and simplify by showing context appropriate opRons
n Put most frequent opRons for specific user tasks up front
Client-‐defined fields
Role-‐based displays
OrganizaRon / Client
UPA Conference | June 6, 2012 53
Screen with generic, out-‐of-‐the-‐box fields
A`er organizaRon adds custom fields to the display
CLIENT-‐DEFINED FIELDS
UPA Conference | June 6, 2012 54
CLIENT-‐DEFINED FIELDS
UPA Conference | June 6, 2012 55
CLIENT-‐DEFINED LABELS
UPA Conference | June 6, 2012 56
CLIENT-‐DEFINED LABELS
UPA Conference | June 6, 2012 57
Administrator’s view of the same content item End user’s view of a content item
ROLE-‐BASED DISPLAYS
UPA Conference | June 6, 2012 58
ROLE-‐BASED DISPLAYS
UPA Conference | June 6, 2012 59
SEARCH
UPA Conference | June 6, 2012 60
SEARCH
UPA Conference | June 6, 2012 61
SEARCH
UPA Conference | June 6, 2012 62
Design ConsideraRons
n Provide templates (e.g. industry-‐specific defaults) to reduce the amount of rework for each client.
n Support the person doing the configuraRon. • Provide training, instrucRons, wizards…
• ValidaRon
• Enforce minimum/max sizes
• Enforce spacing and alignment between items
n Beware of logical dependencies on data that might not be available.
OrganizaRon / Client
INFO DISPLAYS
UPA Conference | June 6, 2012 63
Design ConsideraRons
n Client-‐defined fields: • Consider what opRons to provide for placement, groupings,
• For each field, collect tab order, required/opRonal, validaRon rules
• Allow clients to define new data/field types?
n Role-‐based views: • Do really thorough analysis. Avoid removing access to info that people might need for their jobs.
• Ensure that users with mulRple roles within the system have appropriate access
OrganizaRon / Client
INFO DISPLAYS
UPA Conference | June 6, 2012 64
Info displays
Layouts
InteracRons
Permissions
End User
Appearance
NavigaRon Recent, frequent, user-‐defined categories
OrganizaRon / Client
UPA Conference | June 6, 2012 65
NavigaRon
n Personalized lists of recently used items
n Users choosing to configure their own menus
n Saving users search criteria
n User defined categories
End User
Recently used Frequently used
Saved searches User categories
UPA Conference | June 6, 2012 66
NAVIGATION -‐ RECENTLY USED
UPA Conference | June 6, 2012 67
NAVIGATION -‐ FREQUENTLY USED
UPA Conference | June 6, 2012 68
NAVIGATION -‐ SAVED SEARCHES
UPA Conference | June 6, 2012 69
NAVIGATION – USER CREATED CONTENT
UPA Conference | June 6, 2012 70
NAVIGATION – USER CREATED CONTENT
UPA Conference | June 6, 2012 71
Design ConsideraRons
n CauRon: User-‐configured navigaRon is someRmes a band-‐aid for bad design.
n AdapRve menus get mixed reviews.
n Users don’t want to save a search unRl they know it gets the results they need.
n Users expect to define categories for their own content.
End User
NAVIGATION
UPA Conference | June 6, 2012 72
Info displays
Layouts
InteracRons
Permissions
OrganizaRon / Client
Appearance
NavigaRon Modular, context-‐driven & role-‐based navigaRon
End User
UPA Conference | June 6, 2012 73
NavigaRon
Modular
n An organizaRon or client o`en needs its own terminology and business rules reflected in the navigaRon
n OrganizaRons, clients or roles may be given access to some modules but not all
Role-‐based
OrganizaRon / Client
UPA Conference | June 6, 2012 74
MODULAR NAVIGATION
Links vary depending on the modules the organizaRon is using, and the user’s permissions
UPA Conference | June 6, 2012 75
End user’s navigaRon menus
If the user also has site administraRon responsibiliRes
NavigaRon inside the administrator’s “responsibiliRes” area Links vary depending on the user’s permissions
ROLE-‐BASED NAVIGATION
Site administrators get access to a “responsibiliRes” area
UPA Conference | June 6, 2012 76
Design ConsideraRons
n Role-‐based nav can greatly simplify the UI for some roles.
n Role-‐based nav is challenging when a user can have mulRple roles.
n Validate for dependencies between modules/ products/features when turning nav items on-‐off.
n When renaming navigaRon/menus, keep help text and manuals in synch with the UI. CauRon: This also creates headaches for help desk.
n LocalizaRon of menus is common.
OrganizaRon / Client
NAVIGATION
UPA Conference | June 6, 2012 77
NavigaRon
Info displays
Layouts
Permissions
End User
Appearance
InteracRons Custom keystrokes, autocorrect, prefs
OrganizaRon / Client
UPA Conference | June 6, 2012 78
InteracRons
n Defining quick access to common acRons
n Personalized dicRonaries and type ahead suggesRons
n Seqng preferences for how users work with their own systems
n NoRficaRon and alerts opRons
End User
Custom keystrokes
Preferences
Auto-‐correct
NoRficaRons
UPA Conference | June 6, 2012 79
INTERACTIONS – CUSTOM KEYSTROKES
UPA Conference | June 6, 2012 80
INTERACTIONS – NOTIFICATIONS
UPA Conference | June 6, 2012 81
INTERACTIONS – NOTIFICATIONS
UPA Conference | June 6, 2012 82
INTERACTIONS – PREFERENCES
UPA Conference | June 6, 2012 83
INTERACTIONS – AUTOCORRECT
UPA Conference | June 6, 2012 84
Design ConsideraRons
n Generally these are complex opRons for power users. Make sure the out of the box solu@on works for the majority of users.
n PersonalizaRon allows for a custom feel without user effort, but ensures that people aren’t stuck with what the system remembers about them
n Email noRficaRon and system alerts can be distracRng and irritaRng. Let user iden@fy when, if and how these occur
End User
INTERACTIONS
UPA Conference | June 6, 2012 85
NavigaRon
Info displays
Layouts
Permissions
OrganizaRon / Client
Appearance
InteracRons NoRficaRons, rouRng, client-‐defined biz rules
End User
UPA Conference | June 6, 2012 86
InteracRons
Workflow
Client-‐defined rules
n Workflow and rouRng can be essenRal for enforcing business processes
n Business rule definiRon
n NoRficaRon and alerts provide a tool for the organizaRon to get their message out
RouRng
OrganizaRon / Client
UPA Conference | June 6, 2012 87
My to dos and suggested next acRon are based on workflow rules
INTERACTIONS – WORKFLOW
UPA Conference | June 6, 2012 88
INTERACTIONS – ROUTING
UPA Conference | June 6, 2012 89
INTERACTIONS – RULES
UPA Conference | June 6, 2012 90
Design ConsideraRons
n Use noRficaRons and alerts sparingly for the biggest impact Don’t inunda@ng people with messaging if you want them to pay aIen@on to the big stuff
n You can eliminate unnecessary decisions and steps (and reduce errors) by introducing workflow, rouRng, and business rules.
n Map out the different workflow and rouRng possibiliRes that could be encountered. Ensure there are ways to get out of the defined path for excep@ons scenarios (when appropriate)
OrganizaRon / Client
INTERACTIONS
UPA Conference | June 6, 2012 91
InteracRons
NavigaRon
Info displays
Layouts
Appearance
Permissions
OrganizaRon / Client End User
N/A
UPA Conference | June 6, 2012 92
InteracRons
NavigaRon
Info displays
Layouts
OrganizaRon / Client
Appearance
Permissions Seqng user permissions
and roles
End User
UPA Conference | June 6, 2012 93
What other examples of configuraRon and customizaRon?
UPA Conference | June 6, 2012 94
Is configuraRon right for your product?
n What value would configuraRon opRons bring to the product?
n What value to your users?
n How broad is the need across your user base?
n Would this help in sales and markeRng?
n How much would it cost to implement?
n What is the cost of not implemenRng it? Would not implemenRng result in significant customizaRon costs?
UPA Conference | June 6, 2012 95
When designing for configuraRon, consider:
n Can users configure themselves into a corner? • Make important or necessary informaRon not available
• Create a clu4ered informaRon environment so that relevant cues are unseen
n Should you be offering a limited set of structured opRons or significant flexibility?
n How will users understand and preview the effect of configuraRon opRons?
UPA Conference | June 6, 2012 96
How would you decide which features to make configurable or customizable?
www.designforcontext.com Lisa Ba4le Laura Chessman
Thank you!
LISA BATTLE [email protected]
LAURA CHESSMAN [email protected]
![MPC8548E Configurable Development System … Configurable Development System Reference Manual, ... [4:0] ... MPC8548E Configurable Development System Reference Manual,](https://img.dokumen.tips/doc/110x75/5af028337f8b9ac62b8e4c0e/mpc8548e-configurable-development-system-configurable-development-system-reference.jpg)
