Good User Interface (UI) design incorporates a number of timeless principles for human-computer interaction. While preparing my presentation for next week’s SAPinsider HR Conference, I thought it would be important to share what I think are critical principles to the design of elegant, efficient, intuitive, and “usable” user interfaces. In fact, they drive my day-to-day work with our clients while discussing best practices on web page design, web forms, and mobile apps design.
My very personal approach of UI design is by imagining my mother using it. My mom is 59 years old and has her challenges catching up with the modern world. Of course she has a smart phone and uses her computer to go “on the line” (as she calls it) every day. My motivator is always: How can I design the UI in a way that my mom is able to figure it out for herself and can use it without calling me at 5:30 AM in the morning?
Here's an excerpt of some fundamental principles (originated by Apple Inc.) that I like and think should be applied:
The user already has a mental model that describes the task your solution is enabling. This model arises from a combination of real-world experience, experience with other software, and with computers in general. For example, users have real-world experience writing and mailing letters and most users have used email apps to write and send email. Based on this, a user has a conceptual model of this task that includes certain expectations, such as the ability to create a new letter, select a recipient, and send the letter. An email app that ignores the user’s mental model and does not meet at least some of the user’s expectations would be difficult and even unpleasant to use because it imposes an unfamiliar conceptual model instead of building on the knowledge and experiences those users already have.
Before you design your user interface, try to discover your users’ mental model of the task your process helps them perform. My key check-points are Familiarity, Simplicity, Availability, Discoverability, and Forgiveness.
For example, with our Sitrion Open Enrollment scenario, what does the employee really expect from it? A very interesting aspect in any Open Enrollment scenario is that about 70% of employees choose their last year’s election. Surprised? Why not build the interface with this in mind – a one click button solution to keep last year’s benefit election would be a big crowd pleaser.
Direct manipulation is an example of an implied action that allows users to feel that they are controlling the objects represented by the computer, e.g. the data. According to this principle, an onscreen object should remain visible while a user performs an action on it, and the impact of the action should be immediately visible. For example, while an employee changes benefit elections, the calculated values of this change in election should be made visible as a result of this action.
Support direct manipulation when users are likely to expect it. Avoid forcing users to use controls to manipulate data (too many steps).
Our Sitrion Smart Routines are built like any other web form in a page-by-page guided procedure.
Allow the user, not the computer, to initiate and control actions. Some interfaces and apps attempt to assist the user by offering only those alternatives deemed good for the user or by protecting the user from having to make detailed decisions. Because this approach puts the computer, not the user, in control, it is best confined to parts of the user interface aimed at novice users. Provide the level of user control that is appropriate for your audience and the scenario.
The key is to provide users with the capabilities they need while helping them avoid dangerous, irreversible actions. For example, in situations where the user might overwrite data accidentally, you
should always provide a warning, but allow the user to proceed if they choose.
At the end of each scenario, you may suggest additional options that might be relevant to the user depending on the scenario itself.
For example, all Sitrion solutions are designed using a responsive design interface for multiple platforms and are touch enabled. It should not matter what browser, smartphone, or tablet the user is using – it just has to work.
Feedback and Communication
Feedback and communication encompass far more than merely displaying alerts when something goes wrong. Instead, it involves keeping users informed about what’s happening by providing appropriate feedback and enabling communication with your interface.
When a user initiates an action, always provide an indication that your app has received the user’s input and is operating on it. Users want to know that a command is being carried out. If a command can’t be carried out, they want to know why and what can be done instead. When used sparingly, animation is one of the best ways to show a user that a requested action is being carried out. All Sitrion scenarios make good use of this.
For potentially lengthy operations, we use a progress indicator to provide useful information about how long the operation will take. Users don’t need to know precisely how many seconds an operation will take, but an estimate is helpful.
Consistency in the interface allows users to transfer their knowledge and skills from one webpage to another. Use the standard elements of your corporate web design to ensure consistency within your presentation and to benefit from consistency across all platforms.
Meeting everyone’s expectations is the most difficult kind of consistency to achieve, especially if your solution is likely to be used by an audience with a wide range of expertise. You can address this problem by carefully weighing the consistency issues in the context of your target audience and their needs. The solution and scenarios you choose need to be adaptable to your corporate web design.
Encourage people to explore your solution by building in forgiveness—that is, making most actions easily reversible. People need to feel that they can try things without damaging the system or jeopardizing their data. Create safety nets, such as the Undo and Back commands, so that people will feel comfortable learning and using your product.
Warn users when they initiate a task that will cause irreversible loss of data. If alerts appear frequently, however, it may mean that the product has some design flaws. When options are presented clearly and feedback is timely, using a web site should be relatively error-free.
Anticipate common problems and alert users to potential side effects. Provide extensive feedback and communication at every stage so users feel that they have enough information to make the right choices. With Sitrion Smart Routines, errors can be “translated” into meaningful information for the user. Instead of providing error codes and text snippets, meaningful information can be displayed with alternative steps or information where and how to get help.
Aesthetic integrity means that information is well organized and consistent with principles of good visual design. Your product should look pleasant on the screen, on any device, even when viewed for a long time.
Keep graphics simple, and use them only when they truly enhance usability. Don’t overload windows and dialogs with dozens of icons or buttons. Don’t use arbitrary symbols to represent concepts; they may confuse or distract users. The overall layout of your windows and design of user interface elements should reflect the user’s mental model of the task your system performs.
Like I mentioned above, I will be presenting a customer case study and the Sitrion Smart Routines product next week at the SAPinsider HR Conference in Orlando. If you are planning to attend, stop by our booth (#130) or my case study session on March 11th and let’s discuss this topic further – and how it applies to your company. Self-services is all about user-friendly, effective UI – and Sitrion is an expert.