What is the term for the onscreen tools used to interact with a computer and its programs?
Learn to design with your user’s needs and expectations in mind by applying Jakob Nielsen and Rolf Molich’s Ten User Interface Guidelines. These heuristics have been reflected in many of the products designed by some of the most successful companies in the world such as Apple, Google, and Adobe. Further evidence of how their design teams incorporate these rules into their design process is reflected in the user interface guidelines published and shared by these companies. This article will teach you how to follow the ten rules of thumb in your design work so you can further improve the usability, utility, and desirability of your designs. Show
Nielsen and Molich's 10 User Interface Design GuidelinesJakob Nielsen, a renowned web usability consultant and partner in the Nielsen Norman Group, and Rolf Molich, another prominent usability expert, established a list of ten user interface design guidelines in the 1990s. Note that there is considerable overlap between Nielsen and Molich's heuristics and Ben Shneiderman’s 'eight golden rules'. These 10 rules of thumb further iterate upon Shneiderman’s eight golden rules 4 years after Shneiderman’s initial publication.
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 once said: “When I think of design and creating great user experiences, I generally think of it 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 likely improve the user experience of your designs by following these guidelines! Learn How Adobe Integrates Nielsen and Molich's Ten User Interface Design GuidelinesAdobe Systems Incorporated, the large North American computer software company, is a great example of how designs reflecting Nielsen and Molich’s ten user interface guidelines can lead to success for a company. One of their most popular products, Adobe Photoshop, which is a raster graphics editor exhibits the characteristics of a well designed user interface that reflects these guidelines. We will take a closer look 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 10 rules of thumb into your own work. 1. Visibility of System StatusPhotoshop does a great job of letting the user know what’s 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 as 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-hand to a gripped hand when the user drags a layer around within the Layers palette. This makes it easier to instantly understand the system status. Additionally, Adobe’s choice of using a ‘hand’ is a great example of the second guideline where the system matches the real world. 2. System Match to the Real WorldAn example of Photoshop mimicking the real world in terms and representations that their target users would understand, is where they design the information structure and terminology to mirror the same wording we would use in the world of photography or print 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’s Dodge Tool and Burn 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 FreedomPhotoshop is very good at providing users with control every step of the way. As the user makes changes to an image or adds various artistic effects, they are able to quickly and easily take a step backwards if they make an error, for instance. Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use The users are in control as they can take a Step Backward or Step Forward under the Edit menu, or alternatively they can use Photoshop’s keyboard shortcuts like Alt+Ctrl+Z, for example. 4. Consistency and StandardsPhotoshop maintains a standard layout and look & feel when it comes to the menu bar. They also utilize commonly known terminology such as “New…”, “Open…”, “Save As…”, etc. Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use The File menu in Photoshop displays a variety of highly familiar options. 5. Error PreventionTo prevent users from making errors, Photoshop provides a brief description or label of the tools when a user hovers over it to help make sure users are using the proper tool for the task at hand. Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use The user hovers over the eraser icon and Photoshop displays the “Eraser Tool” label. 6. Recognition rather than RecallWhether it be making a selection from the artistic filters menu, or opening a new image 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 recall the name or typing it in to search for it. Perhaps you have encountered other photo editing programs which ask you to recall and type the name of the file you want to work on. This can indeed be really difficult to recall as it is often something to the effect of: 29412_09342.JPG. Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use The user is able to visually recognize the sunset image by its thumbnail and select it. 7. Flexibility and Efficiency of UseOne of the many reasons for frequent users to love Photoshop is for its flexibility and efficiency. Users are able to utilize its flexibility by organizing and adding to their Workspace, as well as making things more efficient by saving it for future use. Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use Photoshop gives frequent users the ability to save their preferred workspace-setup. 8. Aesthetic and Minimalist DesignThe toolbar in Photoshop only displays the icons and is neatly tucked to the side to help keep clutter to a minimum, and maintain a minimalist aesthetic. Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use The Photoshop toolbar is minimalist and avoids clutter by representing the tools with icons only. 9. Help Users Recognize, Diagnose and Recover from ErrorsWhenever there is an error, Photoshop provides dialogue that lets the user know what went wrong and how to fix it. Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use In this error message for the user’s misuse of the clone stamp, Photoshop explains what went wrong, the reason why and how the user should proceed from there. 10. Help and documentationHelp and documentation can be accessed easily via the main menu bar. From there, you can find a wide variety of help topics and tutorials on how to make full use of the program. Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair UseThe window displays information on how to create rollovers in the context of web graphics. The user is also able to see a list of topics on the side menu. 10 Steps to Improve Usability, Utility, and Desirability by Implementing Nielsen and Molich’s User Interface Design GuidelinesAs a designer, you should have the ability to critique the designs of your own as well as the work of others with well supported reasoning. Applying Nielsen and Molich’s 10 rules of thumb in evaluating interface design will help you recognize any potential issues as well as guide you and your team in creating better experiences for your users. Here’s a worksheet for you to practice with as you learn the skill of recognizing whether or not these rules have been applied and when these rules have been violated. Finally, it’s time to improve the website or app by further implementing the 10 guidelines. Download PDF
here. The Take AwayWhen you 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, Google, and Adobe, you’ll be able to support your design decisions with well researched heuristics and be confident in creating designs that are both usable and beautiful. To practice recognizing these 10 rules of thumb, go ahead and work through the exercise outlined in the attached file from the above section. References & Where to Learn MoreTo find more information on Jakob Nielsen’s ‘Enhancing the Explanatory Power of Usability Heuristics’ please see Course: UI Design Patterns for Successful Software Hero Image: Author/Copyright holder: Barry Schwartz. Flickr. Copyright terms and license: CC BY-NC 2.0 What is the term for the on screen tools used to interact with a computer and its programs?The user interface (UI) is the point of human-computer interaction and communication in a device. This can include display screens, keyboards, a mouse and the appearance of a desktop. It is also the way through which a user interacts with an application or a website.
What do you called a screen that represents a user Where can interact with?If you're reading this, chances are you're looking at one! GUI stands for graphical user interface. A GUI, which some folks pronounce as 'gooey', is exactly what it sounds like... a graphical way to do stuff.
What is a GUI in computer?A graphics-based operating system interface that uses icons, menus and a mouse (to click on the icon or pull down the menus) to manage interaction with the system. Developed by Xerox, the GUI was popularized by the Apple Macintosh in the 1980s.
What is the name for the system of interactive components for computer software?A GUI (graphical user interface) is a system of interactive visual components for computer software. A GUI displays objects that convey information, and represent actions that can be taken by the user.
|