Natural User Interface Design for Engaging Art and Performance

Learn to design with your user's needs and expectations in listen by applying Jakob Nielsen and Rolf Molich's 10 User Interface Guidelines. These heuristics have been reflected in many of the products designed by some of the almost successful companies in the earth such equally Apple tree, Google, and Adobe. Further evidence of how their blueprint teams contain these rules into their pattern process is reflected in the user interface guidelines published and shared by these companies. This article will teach y'all how to follow the ten rules of pollex in your blueprint work so you lot can further ameliorate the usability, utility, and desirability of your designs.

Nielsen and Molich'southward 10 User Interface Design Guidelines

Jakob Nielsen, a renowned web usability consultant and partner in the Nielsen Norman Group, and Rolf Molich, some other prominent usability skilful, established a list of ten user interface design guidelines in the 1990s. Note that there is considerable overlap between Nielsen and Molich'southward heuristics and Ben Shneiderman'southward '8 golden rules'. These 10 rules of thumb further iterate upon Shneiderman's eight aureate rules four years later on Shneiderman'southward initial publication.

• Visibility of system status. Users should always exist informed of arrangement operations with easy to understand and highly visible status displayed on the screen within a reasonable corporeality of fourth dimension.
• Match between system and the real world. Designers should attempt to mirror the language and concepts users would find in the existent world based on who their target users are. Presenting data in logical order and piggybacking on user'south expectations derived from their real-world experiences will reduce cerebral strain and make systems easier to use.
• User control and freedom. Offer users a digital infinite where backward steps are possible, including undoing and redoing previous actions.
• Consistency and standards. Interface designers should ensure that both the graphic elements and terminology are maintained across similar platforms. For example, an icon that represents one category or concept should not represent a different concept when used on a different screen.
• Mistake prevention. Whenever possible, design systems so that potential errors are kept to a minimum. Users do not like being chosen upon to detect and remedy problems, which may on occasion exist beyond their level of expertise. Eliminating or flagging actions that may result in errors are 2 possible means of achieving fault prevention.
• Recognition rather than call up. Minimize cognitive load by maintaining job-relevant information within the brandish while users explore the interface. Homo attention is limited and we are only capable of maintaining around v items in our brusk-term memory at i time. Due to the limitations of brusk-term memory, designers should ensure users tin can simply employ recognition instead of recalling data beyond parts of the dialogue. Recognizing something is always easier than recall considering recognition involves perceiving cues that help us reach into our vast retention and allowing relevant information to surface. For case, we often discover the format of multiple pick questions easier than short answer questions on a test considering it just requires us to recognize the answer rather than call up information technology from our memory.
• Flexibility and efficiency of employ. With increased use comes the demand for less interactions that allow faster navigation. This tin can exist achieved past using abbreviations, office keys, subconscious commands and macro facilities. Users should be able to customize or tailor the interface to suit their needs and so that frequent deportment can be accomplished through more user-friendly means.
• Aesthetic and minimalist pattern. Proceed clutter to a minimum. All unnecessary information competes for the user'due south limited attentional resource, which could inhibit user's memory retrieval of relevant information. Therefore, the display must be reduced to only the necessary components for the electric current tasks, whilst providing clearly visible and unambiguous means of navigating to other content.
• Help users recognize, diagnose and recover from errors. Designers should presume users are unable to understand technical terminology, therefore, error messages should almost always be expressed in apparently language to ensure nada gets lost in translation.
• Help and documentation. Ideally, nosotros want users to navigate the system without having to resort to documentation. All the same, depending on the type of solution, documentation may be necessary. When users crave help, ensure information technology is easily located, specific to the task at hand and worded in a way that will guide them through the necessary steps towards a solution to the effect they are facing.

Google Inc., the multibillion-dollar technology company, certainly produces designs that reflect the above heuristics. Jon Wiley, the head designer of Google Search in 2012 in one case said:

"When I call back of pattern and creating cracking user experiences, I more often than not think of information technology in terms of three things: usability, utility and desirability."

Nielsen and Molich's 10 user interface guidelines cover these three key components of user experience quite nicely, which means you can probable improve the user feel of your designs past post-obit these guidelines!

Learn How Adobe Integrates Nielsen and Molich's Ten User Interface Design Guidelines

Adobe Systems Incorporated, the large North American computer software company, is a bang-up example of how designs reflecting Nielsen and Molich's ten user interface guidelines tin can lead to success for a company. One of their virtually pop products, Adobe Photoshop, which is a raster graphics editor exhibits the characteristics of a well designed user interface that reflects these guidelines.

We will have a closer expect at how Adobe Photoshop reflects each of these guidelines in order to inspire you to improve the usability, utility, and desirability of your own designs by incorporating the ten rules of thumb into your ain work.

one. Visibility of System Status

Photoshop does a groovy task of letting the user know what'southward happening with the program by visually showing the user what their actions have led to whenever possible. For example, when users move layers around in the Layers palette, they can visually see the layer being represented equally physically dragged within the space.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

The cursor graphic goes from representing an open up-manus to a gripped hand when the user drags a layer around within the Layers palette. This makes information technology easier to instantly sympathize the system status. Additionally, Adobe's choice of using a 'paw' is a great example of the 2d guideline where the arrangement matches the real globe.

2. Organization Match to the Real Globe

An example of Photoshop mimicking the existent earth in terms and representations that their target users would understand, is where they design the information structure and terminology to mirror the aforementioned wording we would use in the globe of photography or impress media. Familiar concepts and terms like RGB, Hue/Saturation/Brightness and CMYK are used to represent color, while various tools like the dodge tool and the burn tool mimics a traditional darkroom technique for photographs.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Photoshop'due south Contrivance Tool and Fire Tool mimics a traditional darkroom technique for photographs

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Photoshop utilizes the term, "Exposure", as commonly used in the world of photography.

3. User Control and Liberty

Photoshop is very good at providing users with control every step of the manner. As the user makes changes to an image or adds diverse artistic furnishings, they are able to quickly and easily take a stride backwards if they brand an error, for instance.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Employ

The users are in command equally they can accept a Step Backward or Step Forward under the Edit bill of fare, or alternatively they tin can use Photoshop's keyboard shortcuts like Alt+Ctrl+Z, for example.

four. Consistency and Standards

Photoshop maintains a standard layout and look & feel when it comes to the menu bar. They also utilize commonly known terminology such as "New…", "Open up…", "Save Equally…", etc.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Utilize

The File menu in Photoshop displays a diverseness of highly familiar options.

5. Error Prevention

To preclude users from making errors, Photoshop provides a brief description or label of the tools when a user hovers over it to help make certain users are using the proper tool for the task at paw.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Utilise

The user hovers over the eraser icon and Photoshop displays the "Eraser Tool" label.

6. Recognition rather than Call back

Whether it be making a selection from the artistic filters carte, or opening a new prototype file, Photoshop provides a sample view for users to make the right choice. This allows for the user to visually recognize what they're looking for instead of having to call up the name or typing information technology in to search for it. Maybe y'all accept encountered other photo editing programs which inquire you to recall and type the name of the file you want to work on. This can indeed be really difficult to recall equally information technology is often something to the outcome of: 29412_09342.JPG.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Utilize

The user is able to visually recognize the sunset epitome by its thumbnail and select information technology.

seven. Flexibility and Efficiency of Apply

One of the many reasons for frequent users to beloved Photoshop is for its flexibility and efficiency. Users are able to utilize its flexibility by organizing and adding to their Workspace, also as making things more than efficient past saving it for future use.

Writer/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Photoshop gives frequent users the ability to relieve their preferred workspace-setup.

8. Artful and Minimalist Design

The toolbar in Photoshop only displays the icons and is neatly tucked to the side to help continue clutter to a minimum, and maintain a minimalist aesthetic.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Off-white Apply

The Photoshop toolbar is minimalist and avoids clutter by representing the tools with icons only.

9. Help Users Recognize, Diagnose and Recover from Errors

Whenever in that location is an error, Photoshop provides dialogue that lets the user know what went incorrect and how to fix it.

Writer/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

In this mistake message for the user's misuse of the clone stamp, Photoshop explains what went wrong, the reason why and how the user should keep from there.

10. Help and documentation

Help and documentation can exist accessed easily via the main menu bar. From there, you tin can find a broad variety of help topics and tutorials on how to make full apply of the program.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Off-white Utilise

The window displays information on how to create rollovers in the context of web graphics. The user is too able to encounter a list of topics on the side menu.

10 Steps to Better Usability, Utility, and Desirability past Implementing Nielsen and Molich's User Interface Design Guidelines

As a designer, you lot should take the power to critique the designs of your own equally well as the work of others with well supported reasoning. Applying Nielsen and Molich's 10 rules of thumb in evaluating interface design volition aid yous recognize any potential issues as well equally guide yous and your team in creating better experiences for your users. Here's a worksheet for you to practise with equally you learn the skill of recognizing whether or not these rules have been practical and when these rules accept been violated. Finally, it'due south fourth dimension to improve the website or app past further implementing the 10 guidelines.

Download PDF hither.

The Take Away

When yous follow Nielsen and Molich's 10 user interface guidelines you will design with usability, utility and desirability in mind. Just as the designers of successful companies like Apple tree, Google, and Adobe, yous'll be able to back up your blueprint decisions with well researched heuristics and exist confident in creating designs that are both usable and beautiful. To practice recognizing these 10 rules of thumb, become ahead and work through the practise outlined in the fastened file from the in a higher place section.

Where To Learn More than

To find more data on Jakob Nielsen's 'Enhancing the Explanatory Power of Usability Heuristics' please run across:

https://static.aminer.org/pdf/PDF/000/089/679/enha...

References & Where to Acquire More than

Hero Epitome: Author/Copyright holder: Barry Schwartz. Flickr. Copyright terms and license: CC BY-NC 2.0

Course: UI Pattern Patterns for Successful Software:
https://www.interaction-blueprint.org/courses/ui-design-patterns-for-successful-software

winnerforme1940.blogspot.com

Source: https://www.interaction-design.org/literature/topics/ui-design