Simplicity in Web Application Design - Laura Chessman, Lisa Battle and Rachel Sengers
•Download as PPTX, PDF•
5 likes•1,133 views
Simplicity is one of the most important principles of design. It has been a pillar of design thinking for a very long time—long before the advent of human factors, usability, and user experience. But, realistically, simplicity isn’t always simple. Commercial software, enterprise applications, software as a service (SaaS), and other highly interactive applications often have no choice but to do a great number of things, because they support a range of real world tasks, some of which are complex. In this presentation, we will discuss what to try when removing functionality or features isn’t an option. We provide practical questions to ask when deciding whether and how to simplify an application. And we summarize proven design techniques to use when simplifying applications, illustrated with examples from real projects.
Recommended
More Related Content
Similar to Simplicity in Web Application Design - Laura Chessman, Lisa Battle and Rachel Sengers
Similar to Simplicity in Web Application Design - Laura Chessman, Lisa Battle and Rachel Sengers (20)
More from UXPA International
More from UXPA International (20)
Recently uploaded
Recently uploaded (20)
Simplicity in Web Application Design - Laura Chessman, Lisa Battle and Rachel Sengers
- 1. Laura Chessman Principal Consultant laura@designforcontext.com Lisa Battle President lisa@designforcontext.com @design4context Simplicity in Web Application Design UXPA 2015 Conference • 23 June 2015
- 2. @design4context Simplicity in Web Application Design UXPA 2015 2 S i m p l i c i t y
- 3. @design4context Simplicity in Web Application Design UXPA 2015 3
- 4. @design4context Simplicity in Web Application Design UXPA 2015 4 Architect Javier Artadi from Lima, Peru
- 5. @design4context Simplicity in Web Application Design UXPA 2015 http://michaelgraves.com/ Industrial designer Michael Graves
- 6. @design4context Simplicity in Web Application Design UXPA 2015 6 “The architect should strive continually to simplify; the ensemble of the rooms should then be carefully considered that comfort and utility may go hand in hand with beauty.” —Frank Lloyd Wright, 1908 Photo by Jason Bechtel, Flickr
- 7. @design4context Simplicity in Web Application Design UXPA 2015 7 “Perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away.” —Antoine de Saint Exupéry, Terre des Hommes (1939) Photo from Wikipedia
- 8. @design4context Simplicity in Web Application Design UXPA 2015
- 9. @design4context Simplicity in Web Application Design UXPA 2015 9
- 10. @design4context Simplicity in Web Application Design UXPA 2015 10 And yet… Simplicity isn’t always simple.
- 11. @design4context Simplicity in Web Application Design UXPA 2015 I’ll know it when I see it…
- 12. @design4context Simplicity in Web Application Design UXPA 2015 12
- 13. @design4context Simplicity in Web Application Design UXPA 2015 13
- 14. @design4context Simplicity in Web Application Design UXPA 2015 14
- 15. @design4context Simplicity in Web Application Design UXPA 2015 15 What about business applications?
- 16. @design4context Simplicity in Web Application Design UXPA 2015 16 16 Real work tasks are often complex.
- 17. @design4context Simplicity in Web Application Design UXPA 2015 17 Many functional requirements must be met to support business processes.
- 18. @design4context Simplicity in Web Application Design UXPA 2015 18 Applications often are configurable to support many different contexts of use.
- 19. @design4context Simplicity in Web Application Design UXPA 2015 19 MORE FEATURES = MORE COMPETITIVE “Make it simple and people won’t buy. Given a choice, they will take the item that does more. Features win over simplicity.” --Donald Norman Photo from http://www.jnd.org/NNg-Photographs/NNg- photographs.html
- 20. @design4context Simplicity in Web Application Design UXPA 2015
- 21. @design4context Simplicity in Web Application Design UXPA 2015 SIMPLE ≠ SIMPLISTIC
- 22. @design4context Simplicity in Web Application Design UXPA 2015 22 Design should be made as simple as possible, but no simpler.
- 23. @design4context Simplicity in Web Application Design UXPA 2015 CONSIDER: 1. Do you know enough about the users, tasks and context of use to make informed design decisions? 2. Which features/information need to be most obvious and which can be minimized or hidden? 3. Can context be used to focus on the most relevant information or features? 4. Can the display be made less dense? 5. Can tasks be done in fewer steps or clicks? 6. Can tasks be streamlined through automation, re-using data, defaults, or preferences?
- 24. @design4context Simplicity in Web Application Design UXPA 2015 24 FIND A NEW WAY Rethink the workflow / task Automate it Consider alternative channels and formats
- 25. @design4context Simplicity in Web Application Design UXPA 2015 Rethink the workflow FIND A NEW WAY
- 26. @design4context Simplicity in Web Application Design UXPA 2015 Rethink the workflow FIND A NEW WAY
- 27. @design4context Simplicity in Web Application Design UXPA 2015 Automate it FIND A NEW WAY 1 2 3 4
- 28. @design4context Simplicity in Web Application Design UXPA 2015 Consider alternative channels and formats FIND A NEW WAY
- 29. @design4context Simplicity in Web Application Design UXPA 2015 FIND A NEW WAY Rethink the workflow / task Automate it Consider alternative channels and formats
- 30. @design4context Simplicity in Web Application Design UXPA 2015 WHAT THEY NEED WHEN THEY NEED IT Push meaningful and relevant information Optimize information density Optimize to support common tasks Layer for progressive disclosure
- 31. @design4context Simplicity in Web Application Design UXPA 2015 Push meaningful and relevant information WHAT YOU NEED WHEN YOU NEED IT To Do’s Productivity Group Activity
- 32. @design4context Simplicity in Web Application Design UXPA 2015 Push meaningful and relevant information WHAT YOU NEED WHEN YOU NEED IT
- 33. @design4context Simplicity in Web Application Design UXPA 2015 c Push meaningful and relevant information WHAT YOU NEED WHEN YOU NEED IT 33 Customer Overview Action Action Action More Actions >
- 34. @design4context Simplicity in Web Application Design UXPA 2015 Optimize information density WHAT YOU NEED WHEN YOU NEED IT
- 35. @design4context Simplicity in Web Application Design UXPA 2015 c Optimize to support common tasks STRUCTURE FOR TASK EFFICIENCY 35 Customer Overview Action Action Action More Actions > Recent Activity Recent Touchpoints Record Details Remarks
- 36. @design4context Simplicity in Web Application Design UXPA 2015 Layer for progressive disclosure WHAT YOU NEED WHEN YOU NEED IT 15 6 11 19LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM
- 37. @design4context Simplicity in Web Application Design UXPA 2015 Layer for progressive disclosure + + - WHAT YOU NEED WHEN YOU NEED IT
- 38. @design4context Simplicity in Web Application Design UXPA 2015 Layer for progressive disclosure WHAT YOU NEED WHEN YOU NEED IT
- 39. @design4context Simplicity in Web Application Design UXPA 2015 WHAT THEY NEED WHEN THEY NEED IT Push meaningful and relevant information Optimize information density Optimize to support common tasks Layer for progressive disclosure
- 40. @design4context Simplicity in Web Application Design UXPA 2015 STRUCTURE FOR TASK EFFICIENCY Reduce the number of clicks Eliminate steps through defaults and re-use Allow bulk actions Recover from interruptions Guide the user step-by-step for infrequent tasks
- 41. @design4context Simplicity in Web Application Design UXPA 2015 Reduce the number of clicks STRUCTURE FOR TASK EFFICIENCY 41 Next course: March 15, 2015(2) (10) (1) Required by: July 30, 2015 (0) (1) American Dental Association
- 42. @design4context Simplicity in Web Application Design UXPA 2015 Reduce the number of clicks STRUCTURE FOR TASK EFFICIENCY 42
- 43. @design4context Simplicity in Web Application Design UXPA 2015 c Eliminate steps through defaults and re-use STRUCTURE FOR TASK EFFICIENCY 43 Event Name Action Action Action Registration Event Details Remarks Action More Actions > Copy event…
- 44. @design4context Simplicity in Web Application Design UXPA 2015 c Allow bulk actions STRUCTURE FOR TASK EFFICIENCY 44 Reassign
- 45. @design4context Simplicity in Web Application Design UXPA 2015 Recover from interruptions STRUCTURE FOR TASK EFFICIENCY Recently Viewed
- 46. @design4context Simplicity in Web Application Design UXPA 2015 Guide the user step-by-step for infrequent tasks STRUCTURE FOR TASK EFFICIENCY 1 2 3✔ >>
- 47. @design4context Simplicity in Web Application Design UXPA 2015 Guide the user step-by-step for infrequent tasks STRUCTURE FOR TASK EFFICIENCY
- 48. @design4context Simplicity in Web Application Design UXPA 2015 STRUCTURE FOR TASK EFFICIENCY Reduce the number of clicks Eliminate steps through defaults and re-use Allow bulk actions Recover from interruptions Guide the user step-by-step for infrequent tasks
- 49. @design4context Simplicity in Web Application Design UXPA 2015 REDUCE TO “JUST ENOUGH” Break up big lists and menus Break up long forms Minimize clutter
- 50. @design4context Simplicity in Web Application Design UXPA 2015 Break up big lists and menus JUST ENOUGH more … more … more … more … Filter
- 51. @design4context Simplicity in Web Application Design UXPA 2015 Break up long forms into manageable pieces JUST ENOUGH
- 52. @design4context Simplicity in Web Application Design UXPA 2015 Break up long forms into manageable pieces JUST ENOUGH Step 1 Continue >Save & Close
- 53. @design4context Simplicity in Web Application Design UXPA 2015 Minimize clutter JUST ENOUGH more … more … more … > Search >>
- 54. @design4context Simplicity in Web Application Design UXPA 2015 REDUCE TO “JUST ENOUGH” Break up big lists and menus Break up long forms Minimize clutter
- 55. @design4context Simplicity in Web Application Design UXPA 2015 CLEAR AND EASY-TO- USE INTERACTIONS Consistent and familiar controls Direct manipulation
- 56. @design4context Simplicity in Web Application Design UXPA 2015 Consistent and familiar controls CLEAR AND EASY-TO-USE INTERACTIONS + + c - < >
- 57. @design4context Simplicity in Web Application Design UXPA 2015 Direct manipulation CLEAR AND EASY-TO-USE INTERACTIONS
- 58. @design4context Simplicity in Web Application Design UXPA 2015 c Direct manipulation 58 Customer Overview Action Action Action More Actions > Recent Activity Recent Touchpoints Record Details Remarks CLEAR AND EASY-TO-USE INTERACTIONS
- 59. @design4context Simplicity in Web Application Design UXPA 2015 Direct manipulation CLEAR AND EASY-TO-USE INTERACTIONS
- 60. @design4context Simplicity in Web Application Design UXPA 2015 CLEAR AND EASY-TO- USE INTERACTIONS Consistent and familiar controls Direct manipulation
- 61. @design4context Simplicity in Web Application Design UXPA 2015 COMMUNICATE VISUALLY AND VERBALLY Minimize visual noise Use conversational language Provide visualizations and visual cues Enhance appearance through visual design
- 62. @design4context Simplicity in Web Application Design UXPA 2015 Minimize visual noise COMMUNICATE VISUALLY AND VERBALLY
- 63. @design4context Simplicity in Web Application Design UXPA 2015 Minimize visual noise COMMUNICATE VISUALLY AND VERBALLY
- 64. @design4context Simplicity in Web Application Design UXPA 2015 c 1 2 3 Use conversational language You’re a Genius! COMMUNICATE VISUALLY AND VERBALLY
- 65. @design4context Simplicity in Web Application Design UXPA 2015 Provide visualizations and visual cues COMMUNICATE VISUALLY AND VERBALLY
- 66. @design4context Simplicity in Web Application Design UXPA 2015 Provide visualizations and visual cues COMMUNICATE VISUALLY AND VERBALLY
- 67. @design4context Simplicity in Web Application Design UXPA 2015 Provide visualizations and visual cues COMMUNICATE VISUALLY AND VERBALLY
- 68. @design4context Simplicity in Web Application Design UXPA 2015 Enhance appearance through visual design COMMUNICATE VISUALLY AND VERBALLY
- 69. @design4context Simplicity in Web Application Design UXPA 2015 COMMUNICATE VISUALLY AND VERBALLY Minimize visual noise Use conversational language Provide visualizations and visual cues Enhance appearance through visual design
- 70. @design4context Simplicity in Web Application Design UXPA 2015 NEW HORIZONS Leverage open, public data Use natural language and speech input Learn from the users’ actions Context-aware applications
- 71. @design4context Simplicity in Web Application Design UXPA 2015 Leverage open, public data NEW HORIZONS
- 72. @design4context Simplicity in Web Application Design UXPA 2015 Use natural language and speech input NEW HORIZONS
- 73. @design4context Simplicity in Web Application Design UXPA 2015 Learn from the users’ actions NEW HORIZONS
- 74. @design4context Simplicity in Web Application Design UXPA 2015 Context-aware applications NEW HORIZONS Full application Context-aware mobile versio uses date, location and task to push most relevant info and functions
- 75. @design4context Simplicity in Web Application Design UXPA 2015 NEW HORIZONS Leverage open, public data Use natural language and speech input Learn from the users’ actions Context-aware applications
- 76. @design4context Simplicity in Web Application Design UXPA 2015 FIND A NEW WAY Rethink the workflow / task Automate it Consider alternative channels and formats WHAT THEY NEED WHEN THEY NEED IT Push meaningful and relevant information Optimize information density Optimize to support common tasks Layer for progressive disclosure STRUCTURE FOR TASK EFFICIENCY Reduce the number of clicks Eliminate steps through defaults and re-use Allow bulk actions Recover from interruptions Guide step-by-step for infrequent tasks REDUCE TO “JUST ENOUGH” Break up big lists and menus Break up long forms Minimize clutter CLEAR AND EASY-TO-USE INTERACTIONS Consistent and familiar controls Direct manipulation COMMUNICATE VISUALLY AND VERBALLY Minimize visual noise Use conversational language Provide visualizations and visual cues Enhance appearance through visual design THE FUTURE IS HERE! Leverage open, public data Use natural language and speech input Learn from the users’ actions Context–aware applications
- 77. Laura Chessman Principal Consultant laura@designforcontext.com Lisa Battle President lisa@designforcontext.com @design4context Simplicity in Web Application Design UXPA 2015 Conference • 23 June 2015 Presentation is on Slideshare – Go to www.designforcontext.com/publications
Editor's Notes
- Welcome to the first day of the UXPA conference! I’m Lisa Battle, president and principal consultant at Design for Context, a UX consultancy based in Washington, DC. My co-author Laura was not able to be here today.
- Simplicity is one of the most important principles of design. It has been a pillar of design thinking for a very long time—long before the advent of human factors, usability, and user experience.
- Simplicity is clean, streamlined, uncluttered, minimalist. Many disciplines—notably interior design, architecture, industrial design, graphic design, literature and even science—have embraced and promoted simplicity.
- Here is an example of simplicity in the design of a living space by Architect Javier Artadi from Lima, Peru. Notice the clean lines, subtle colors, the lack of distracting decorations, focal points that draw the eye.
- And here is an example of simplicity in the design of kitchen implements by industrial designer Michael Graves. Sleek, graceful shapes, ergonomic, attractive.
- The famous Frank Lloyd Wright said that an architect must strive continually to simplify
- The noted author Antoine de Saint Exupery said that “Perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away.”
- In the domain of usability and user experience, simplicity has long been accepted as a goal to strive for and a heuristic for evaluating systems. Jakob Nielsen published Designing Web Usability: The Practice of Simplicity in 1999. More recent books on the topic include Giles Colburne’s Simple and Usable (2010). The fervor for simplicity in consumer user experience has been led by web sites like Google search and products like the Apple iPod and iPhone. The popularity of these devices has raised awareness of the value that consumers place on simple, minimalist design.
- The current trend for “mobile first” design capitalizes on this wave of simplicity, forcing companies and designers to eliminate anything not absolutely critical.
- Especially when it comes to business applications
- For one thing, there’s the user perspective. What seems simple to one user in their context may not seem simple to another. Something is simple when it’s easy to understand, it seems clear, takes minimal effort. Simplicity, like beauty, is in the eye of the beholder. There is no universal understanding of what is simple--people typically "know it when they see it.”
- If you have a product that does one thing—like a paperclip, a knife—it should be straightforward to make everything obvious.
- Our mobile phones these days offer us many one-purpose and absurdly simple apps, which have become quite popular. An app to track how much water I drink (if I bother to tell it!), to tell what time it is, to play relaxing sounds. Those are pretty simple, right?
- A downside is that most mobile phone users have dozens or hundreds of apps, so it is hard to find the one you need. More importantly, each of them is a “silo” and I can’t share information between them, for example to monitor my health or to see all the things I have to do this week. The focus on doing only one thing, although good for that one product, has pushed the burden of complexity out of the product and into the user’s lap, forcing them to glue together multiple apps to do what they need.
- In my work, I am often involved in redesigning business applications. This includes enterprise applications, software used inside large corp to manage operations, such as inventory, accounting, workflow, content mgmt. I also work on SaaS, commercial applications that are sold to businesses, such as learning management, accounts payable, pharmaceutical orders, catalog management. AUDIENCE: Who has worked on enterprise applications? Who has worked on commercial B-to-B applications? (please share stories) Based on many years of experience designing for business applications, here are some facts I know about them.
- Business applications often have no choice but to handle complexity, because they support a range of real world tasks and business processes that are inherently complex. Things like genomic research, engineering, shipping logistics, are a lot more complex than tracking how much water I drink.
- The massive amount of data and functionality required by modern enterprise systems creates serious challenges for designers. Most business applications have a large number of use cases and functional requirements that must be met: such as physician order entry in hospitals with its data entry, decision support, insurance verification, and validation warnings about things like drug allergies, dosage and drug interactions for patient safety.
- SaaS applications are sold to a wide range of customers who have different contexts of use. For example, a scheduling system is used in many different manufacturing environments with different types of machinery. A learning management system is sold to one company that uses it for a few annual required training courses, and to another company that keeps an extensive course catalog and offers job training and certifications in different disciplines. The sw has to be robust and configurable to fit such different situations.
- In order to stay competitive in the marketplace, application providers often scramble to add new features to stay ahead of (or to keep up with) the competition. Donald Norman (leader in HF/usab) says “Make it simple and people won’t buy. Given a choice, they will take the item that does more. Features win over simplicity.” Now, it is true that usability of business software is sometimes valued as a differentiator in the market, but usability by itself doesn’t sell business applications.
- Sales teams meeting with potential customers are often given a checklist of features/functionality that the product has to meet before the customer will consider purchasing it… purchasing decision makers aren’t typically looking for simplicity, or even usability, when evaluating business applications and making buying decisions.
- Removing complexity and features from business applications is not the road to commercial success. Considering what can be removed is an option when redesigning an application, but it’s a hard thing to sell to management. Simple and simplistic are not the same.
- (sometimes attrib to Einstein?) In our day to day work of designing for applications, we need to facilitate the discussion with stakeholders who must make the tough decisions about priorities for their products. As designers, we need to be prepared to propose alternatives for achieving a feeling of simplicity that is user-appropriate, without sacrificing the features and functionality that businesses need.
- Here are some practical questions designers can ask when deciding whether and how to simplify an application. We’ll talk more about these questions as we walk through a series of design strategies that my team uses when simplifying applications. I’ll start with design strategies that are more foundational and structural, and progress towards things that are more surface level. Some of these techniques that are tried and true, while others are emerging or changing as new technologies become available. I will show some examples from real projects, but in the spirit of simplicity I have also pared down many of the illustrations to focus on design patterns without distracting details.
- Early in the design ideation process, we ask questions and challenge assumptions to see if the user goals and biz goals can be met in a different way, leveraging technology. If you don’t raise questions, you may continue paving a cowpath and can end up with unnecessarily cumbersome user interfaces.
- When you do a task analysis, always look for any steps that may be redundant or unnecessary, that could be eliminated or merged. Identify handoffs between people or between systems that could be streamlined. Simplifying the process can make the application feel simpler.
- (In this example, the process evolves from complex, multi-system solution to a more streamlined single system solution.) We once worked on an application where the corporate users complained about poor quality from the field; and the field users complained about the delays in the approval process when they sent things to corporate for approval. We found a way to change the workflow by introducing a set of pre-approved content that increased quality to please the corporate users, and reduce approval time to please the field users.
- See if you can simplify tasks by automating them. For example, many biz applications provide reports. Users go to the reports section, select a report, enter criteria, wait for it to load… instead of requiring users to go get those reports that they need on a regular basis, provide direct access to the most needed information via a dashboard. Or, another example, instead of having users do manual data entry, see if there is a way to bring data in automatically. Automated workflow handoffs / processes Scheduling – staff, machines resourcing
- Sometimes it’s appropriate to move away from user-initiated actions, to a model that engages users when and where they need it. This can simplify things for the user by increasing convenience, timeliness, and efficiency. An example is sending notifications and alerts to the user’s mobile devices so they receive information that is timely and context appropriate while they are away from their desks.
- Find a new way – Raise your hand if you have used the design strategies we just talked about. Would anyone like to share a story of how they were able to find a new way, to increase simplicity?
- When designing and wireframing screen layouts and information displays, think hard about prioritizing what goes on the screen based on what you know about user needs and tasks. You want to show the information and functions most likely to be needed up front.
- You can push meaningful and relevant information based on what the user has been recently doing. A good example is dashboards that present information and status updates dynamically based on the user’s past interactions with the system. If done well—if it really is meaningful and relevant-- these can give an impression of simplicity because it’s easier to have things in one place rather than to go looking for it. In this example: Users can see work items that are assigned to them, as well as what others in their group have been doing recently, and updates on productivity.
- Here is a similar example: an on-the-job training application’s opening screen, on a tablet, the user sees their “To Do” items along with information regarding any activities that are currently in progress. They can navigate directly to in-progress activities to continue working on them, or add more activities of different types.
- Role based views are another way to push meaningful and relevant information. Imagine that in a customer relationship management system or CRM, users pull up a record about a customer, and at least part of the display is tailored to focus on what people in their role most need to know. So for example a sales person looking at this display might see different information emphasized, than what an order management person, a customer service rep, or a person in the accounting department might see about this customer.
- Use layout and placement to emphasize the most important items & shrink others, optimizing for available screen real estate and for user’s comfort level. If the users typically work with two monitors on their desks, that’s a whole different situation than if they typically work on a laptop or on mobile. For a mobile responsive version, carefully prioritize what is most essential to access in the limited screen space, and hide the rest.
- Different user groups have different threshold for information density, based on their tasks or background. Given what you know about their tasks, you can optimize the display in a way that anticipates the common tasks and questions, and reduces the need to hunt for information and functionality. For example, we worked on a call center app where the service reps needed caller’s record to provide the information needed to answer most questions. We did research to understand the common questions and put that information on the screen. Even though it was a fairly dense display, it felt simpler to the call center reps to have the information right there so they didn’t have to navigate to it while talking on the phone.
- Allow users to see a highlight or brief summary of information, and click to see more when it is wanted. In this example there are “tiles” summarizing things that the user wants to monitor, and they can click on one to expand it for the details.
- Other patterns for progressive disclosure include the +/- controls, the “More” link, and arrows for expansion. Sections of the screen that expand and collapse can simplify things by allowing the user to focus on only the part they need. But, make sure the display is still meaningful when they are collapsed.
- This example of prog disclosure, is from a commercial application for real estate developers that we worked on, which was meant to be used primarily on the iPad. The map takes center stage. The real estate developer is looking for properties on which to build new homes. The map shows icons for subdivisions and plots of land. The user can pull up the list of properties in the geographical area shown on the map, then expand out more information about a specific property.
- What they need when they need it – Raise your hand if you have used the design strategies we just talked about. Would anyone like to share a story of how they were able to do this?
- When designing business applications, an important focus is making sure users can get their work done as efficiently as possible. When tasks can be completed quickly, the application feels simpler to use.
- Here is an example where an expand/collapse metaphor was used, but it did not give enough meaningful detail to be useful. It may look simple, but it’s not simple to use if you have to open each section to see if there is anything there. A better approach provides more information so that the user can see if there are available courses, scheduled courses, etc. and pulls up any critical details such as due dates and upcoming milestones so they are obvious without clicking.
- Or, the redesign could go a step further and show a brief summary of the most recent information under each section, exposed and easy to read, with the user’s next steps readily available.
- Allow users to copy things that they did previously. In this example from an event management system, the process of setting up a conference involves a number of steps, but it can be simplified by copying settings from a previous event instead of starting from scratch. Or, provide templates or defaults so the user can select one of the common patterns for creating a document or another item (Letters sent to conference attendees and sponsors; recurring event) Or, if the user is doing a series of things in a row, such as creating a bunch of new invoices or a series of courses, it’s likely that those things have something in common, and some defaults can be carried forward to save time.
- Often there is a need to take the same action on multiple items, and it’s simpler if this can be done all at once rather than one at a time. For example, in a workflow system a manager may need to reassign multiple cases at once when an employee is out for an unexpected illness.
- Interruptions are a fact of life in many jobs. A customer calls on the phone with a question. A supervisor walks in with an urgent matter that requires your attention. You’re pulled into an unexpected meeting and come back later not remembering where you left off. Business applications can improve simplicity by providing easy access to Recently viewed items so that users can recover easily from interruptions. This can be a set of thumbnails, a drop-down list, or some other method. Also helpful: a list of items you have started but not completed, using auto-save, such as a case you started to create but didn’t finish, so you can pick up where you left off.
- Infrequent tasks can be made simpler by guiding users step-by-step through the task. (Of course, you need to be careful not to overdo this or apply it to frequent tasks where it can become an annoyance.)
- This is an example from an on-the-job training tool that uses step by step sections on the same screen to orient users to what they need to do.
- Structure for task efficiency – Raise your hand if you have used the design strategies we just talked about. Would anyone like to share a story of how they were able to improve simplicity by structuring for task efficiency?
- Many of us have facilitated usability tests where the user reacts to information overload. “It’s really busy” they say. Listen to that voice in the back of your head as you work on screen layout and visuals, keep an eye out for things that are just “too much”. This can include lists that are too long, forms that look too daunting, displays that are too crowded. When you find them, scale back to introduce simplicity (but check this with the users to make sure you don’t remove things they need).
- We sometimes see systems with very long menus, which give them a feeling of complexity. One system had a hierarchical menu, 4 layers deep, to get to every possible feature. Another system had each type of incoming and outgoing workflow in a menu, which was just too detailed to be useful. When you have big lists or menus, consider what can be combined, grouped, or hidden. If big lists can’t be broken up, provide filters.
- Consider breaking up big forms, if doing so will make them feel simpler and less daunting. (Can provide distinct sections) Consider the user’s task – is it likely that they will be able to complete it at one time without interruptions? Is there a risk of losing data if they can’t finish it? Are there questions that the user may not be able to answer without going elsewhere to get information? I saw an example like this recently where a patient needed to enter a ton of data all on one screen. For a professional user doing their job this might not be an issue, but for a patient it might not be realistic to do this all at once.
- It may feel simpler for some users to approach it in stages, with the ability to quit and come back later.
- There are a lot of ways to minimize clutter, but one that I find useful in business applications is to allow users to slide menus, toolbars and other utility items out of the way when they are not in use. In this example, there is a left panel that slides out to reveal the menus and search features. Users can slide it back in when it is not in use. The left panel mechanism works well on a touch-screen tablet as well as with the mouse.
- Reduce to “just enough” – Raise your hand if you have used the design strategies we just talked about. Would anyone like to share a story of how they were able to improve simplicity by reducing to just enough?
- When working on the fine interactions---how users will manipulate controls on the screen --- you can increase simplicity by making sure the style feels familiar and direct.
- Things feel familiar when they have been used before, or there is an easy transfer of learning from one situation to another. This example shows the use of familiar controls such as plus/minus for expand/collapse, progress indicators, button placement and selection mechanisms like calendar controls. Of course you can also improve familiarity by using a style guide within your product suite so that interactions are consistent across different parts of the application.
- Direct manipulation means letting users interact with things on the screen in a way that feels similar to interacting with physical objects. Examples of this include drag and drop using a mouse, or pinch and zoom on a touch screen. Sliders can be simpler to interact with than text entry on a mobile or tablet screen (although they’re not as good for precision).
- Another example of direct manipulation is to allow users to easily update data by clicking into fields to edit when appropriate.
- In this application, users can select an area of interest on a map using touch to draw a shape… Selection causes the search results to be refined within the selected area.
- Clear and easy to use interactions – Raise your hand if you have used the design strategies we just talked about. Would anyone like to share a story of how they were able to improve simplicity through clear and easy to use interactions?
- COMMUNICATE SIMPLICITY VISUALLY AND VERBALLY The language and tone of communication, and the visual appearance of the UI, contribute greatly to the perception of simplicity in business applications.
- I often see business applications with unnecessary visual noise such as dark colored, heavy horizontal bars, multiple outlines around things, misaligned fields, icons that appear next to variable length text so that they have a jagged appearance.
- It increases the appearance of simplicity if you can lighten up the UI, leaving distinct contrast and dark colors only where they are really needed to draw user attention to important things. Some lines can be removed and spacing can be adjusted to make the UI “breathe” better.
- Most of us are familiar with the idea of plain language, but some business applications are now going beyond that to introduce a more conversational tone in headings, messages, and other on-screen text. We heard this morning that people treat computers like people! And we know that it’s simpler to communicate with people who talk the way we do. Language becomes another way to convey brand. A light-hearted, more personal tone, or even humor or inspirational messages, can be useful if it is in line with the application’s desired brand image.
- When appropriate, allow users to explore information visually. Give people cues on how to read the data. This example shows the use of heatmaps to convey median price in different zip codes. A legend is provided to help with interpretation.
- Create quick visual references to guide users through information rather than relying solely on text. For example, this illustration shows a screen from an application where the user is told what to expect on upcoming dates, shown in a visual process flow format.
- Convey status, severity, and trends in a visual format for easy visual scanning and so that users can quickly interpret meaning, as in this example from an application for network administrators monitoring potential threats.
- A pleasing visual design increases the perception of simplicity and ease of use. We typically explore alternative visual design approaches through the use of “style tiles”. This shows two alternative treatments for the same application.
- Communicate simplicity visually and verbally – Raise your hand if you have used the design strategies we just talked about. Would anyone like to share a story of how they were able to improve simplicity by communicating visually or verbally?
- Finally, I wanted to briefly mention a few areas that I see as new frontiers for increasing simplicity for end users (although not for development!). These are new opportunities created by technology that is increasingly maturing out of research labs and experimental proof of concepts and becoming available in the mainstream.
- Open data is increasingly available for free from public sources. We can leverage public data to provide more value and reduce the number of places that users may need to go for information. In this example, from the real estate developer application we worked on, the company was able to leverage public data including economic data around income, job growth, economic growth; and government data around property ownership and costs, as well as their proprietary data from extensive surveying. Merging public and proprietary data into a single access point makes it simpler to use and allows for new insights.
- In this example from an insurance application we worked on, the user can choose to answer questions by voice or by typing. Voice input is like direct manipulation taken to another level. It can feel simple and effortless—if the voice recognition is accurate.
- Adaptive user interfaces can learn from the user’s previous actions. For example, in an accounts payable system, users have to select the appropriate codes to indicate the type of expenses on the bill. What if the code that this user normally selects was pushed to the top of the list, because it’s the one that they typically use?
- Another type of adaptive interface leverages context. For example, in the event management system, a user normally accesses it from their desk in Baltimore. However, this week the user is on site in San Diego, the conference location, and on a mobile device. Based on the combination of date and location, the app can know that the user is now at the event, and this causes the UI to adapt. Parts of the UI that are about initial planning are de-prioritized, and functions and information that users need most during the actual event become the focus of the mobile app.
- Future frontiers – Raise your hand if you have used the design strategies we just talked about. Would anyone like to share a story of how they were able to improve simplicity through natural language, personalization or context awareness?