# data[].attributes.headline
Conducting a User Experience (UX) Review

# data[].attributes.subject
Conducting a User Experience (UX) Review

# data[].attributes.attachment_link.readable_text
When conducting a UX review, you need to focus on actionable insights.An audit is not an just a laundry list of usability issues. Triage, prioritize, and deliver clear next steps to our stakeholders and clients.

Beyond fixing glaring issues, you also want to reveal new opportunities for conversion and engagement.

Unless you present a clear plan, your audit will just get left in some developer's to-do list purgatory:

At GobySavvy, we follow a 9-step process for UX reviews. In our experience, the process helps us actually get our recommendations implemented.

I'll explain exactly how this process works, using our project for online retailer SkyMall as an example.

1. Identify business goals and user needs

For revealing business goals and user needs, the process can be light and lean (simple questionnaire and a 1-hour discovery) or in-depth (user interviews, shadowing customer support, and multiple stakeholder interviews).

For SkyMall, we followed the light and lean approach to fit a tighter budget and timeline. They were in the midst of a website revamp, and wanted to make sure they were heading in the right direction.

They approached us to learn about current pitfalls in their website's UX, UI design, and content strategy, and to discover what rebranding options were available. Their bottom line goal was increasing revenue with higher conversions.

Knowing this, we prepared a questionnaire and hopped on a 1-hour call with their project leaders. We made sure to ask about:

Primary and secondary user groups

Specific business metrics for conversions and engagement

Important actions/tasks we want users to accomplish in our flows

Primary sales channels

Brand values

Important web pages

Top competitors, etc

All of this information feeds into our simple personas and user flows to guide the review (more on that later).

2. Diving into analytics

If you can't access analytics directly, ask for reports for specific timeframes and segments.

With SkyMall, we weren't able to access analytics ourselves, so we asked their team to put together reports of popular landing pages with bounce rates and time on page, ecommerce conversions data, mobile and web statistics, and user flows (Behavior Flows in Google Analytics).

Google Analytics showing key pages ordered by popularity. Time, bounce rates, and page value shown.

Google Analytics showing eCommerce Goal completions. Although only one goal is listed here, additional goals might be: newsletter signups, contacts, free content downloads, etc.

Google Analytics showing behavior flows from landing pages through checkout.
By looking at this data for SkyMall, we saw that most people entered through two key paths:

From a variety of referral sources to a specific product page

From google search directly to the home page.

The people landing on a specific product page have a higher rate of eCommerce conversions (sales), lower bounce rates, and a simpler behavior flow.

The biggest problem area was visitors coming in through the home page. A majority of visitors clicked a product on the home page, viewed that product, browsed around to other products, and then bounced.

We now knew the main user flow to optimize: People landing on the home page, clicking around on products without any clear goals on what they want (browsing), and bouncing. Users either could not find their product easily or none of the products caught their attention.

3. Simple personas and user flows

Now that we've seen where to focus, we can build simple personas and user flows to guide the rest of the UX review.

Personas

For SkyMall, we identified four main personas from the initial stakeholder questionnaire session:

A general user who stumbles across SkyMall without a general purpose except for browsing

A middle-upper class homeowner looking for the right decor

A gift giver looking for one-of-a-kind suggestions

A compulsive buyer looking for something fun to impress.

With these personas, we built a total of 20 user flows, but ended up only choosing the top 5 most relevant to SkyMalls business goals. Remember: the key to a useful UX review is focusing and prioritizing.

User Flows

Based on analytics and conversations with the SkyMall project leads, we found two main flows were most useful:

People search for a product on Google, like "unique gifts for mom" then land on a specific product page or category page like "gifts for mom". They browse various products, add one or more to their cart, and check out.

People land on the SkyMall home page, browse hot items, view various product pages, add products to cart, and check out.

Like I mentioned before, we created a total of 5 flows. In addition to the above two, we also created flows for browsing through the main navigation, landing on categories or product pages from email, and cross-sells of other products.

However, we focused first on fleshing out flow #2 since it showed the largest percentage of people bouncing before adding products to cart. For this flow, we designed the full purchase path.

Key page flow (#2) with accompanying user story to guide the UX review.
For the rest of this article, we'll focus on the most important flow seen above.

4. Identify issues

We'll follow user stories step-by-step through each page, specifically looking for problems areas that affect engagement and conversions.

When you move through the user flows, consider the user goals on each page ("When the user lands on this page, they might immediately look for...").

Each expert has their own approach to how they create the report itself. I recommend Google Slides, because it's easy to collaborate with others, can be accessed from anywhere, and can be shared via URL or exported as a PDF.

In Google Slides, I will distinguish sections by page or flow, such as "Home", "Navigation", "Product Page", "Cart", "Checkout", etc. When conducting the review, I've found it most efficient to detail issues, opportunities, and solutions as I go, rather than making organizing a long list later.

You'll find a wide variety of UX checklists, UX principles, and UX research easily accessible around the web that you can use. For each issue you reveal, I follow Jakob Nielsen's four point system of prioritization.

When writing about issues, keep it brief, unless the issue is critical and ranks at least a 3 or 4 on the below scale:

1 = Cosmetic problem only-Need not be fixed unless sufficient time is available on a project.

2 = Minor usability problem-Low-priority issue that is less important to fix.

3 = Major usability problem-High-priority issue that it is important to fix.

4 = Usability catastrophe-It is imperative to fix such an issue before releasing a product.

Slide detailing issues on a product page for user flow #2. We ranked the entire set of issues as 3 "Major usability problem" (top right). The most important issue was the lackluster product reviews functionality.
5. Provide actionable solutions and opportunities

Finding issues is the easy part. Clients and companies pay for solutions.

As we find issues, we describe the best solution, and include a screenshot from another website to support the description. And if we're ever unsure about the best solution, we recommend user testing as a next step after the UX review.

Above all else, we must be as prescriptive as possible. We break everything down at each step of the flow. It's always better to over-communicate than risk your audience making dangerous assumptions.

a. BAD: "Add more vibrant colors to the home page to reflect your brand and engage users."

b. GOOD: "Add variations of your three brand colors to the home page. Main color: purple, to give hints of elegance. White: simplicity and clarity to allow focus on images. Black: Elegance and contrast. Purple can be used for the main banner background and for some icons and headers. White should be used for most backgrounds. Black should be used to contrast purple; can be used for main call-to action buttons."

Slide detailing solutions to the issues in the prior slide.
The most challenging, yet potentially rewarding part, is identifying opportunities for conversion and engagement opportunities. This part is not as straightforward as fixing issues. If you're a UX designer with less than three years of experience, this is a skill that gets stronger and stronger over time.

For example, maybe we see an opportunity for a website to use an exit-intent pop-up offer in a non-intrusive way to recapture some leads or purchases. Or, maybe we notice that the website can make use of persuasive design techniques like exclusivity or time pressure to upsell people to the higher value product. These techniques aren't exactly "issues", but rather opportunities tailored for business impact.

For SkyMall, one of the major opportunities we identified was adapting their massive brand appeal for online consumption. The SkyMall website brand, design, and layout was missing the "unique" feel that SkyMall's products used to create for people browsing their airplane catalogs.

In the modern digital age, we decided to focus on curated content for a specific audience. In our case, this was a unique message, an "experts recommend" feature, a retro collection of age-old popular products, etc.

By increasing the opportunities for Skymall to present products in a fun and consumable manner, we aimed to increase the soft-sell conversions.

Slide providing high level brand opportunities, which we described in detail during a follow-up meeting.
6. Tips on searching for issues and solutions

Every UX designer wonders if they missed any issues or solutions. Let's be honest: we use Google just as much as our own personal repositories of UX principles.

Here's some quick tips to help focus your search endeavors:

Search Google for the underlying principle you think is poorly designed. Ex: "E-Commerce checkout signup UX".

If you aren't sure of the principle, or the proper term (ex. tooltip vs popover vs modal), look for Q&A links on google first, to see the questions others have about the topic. Here are some good general terms to append onto any search: "UX" "Principles" "Best Practices" "Usability" "Patterns" "Optimal".
Don't spend too much time searching. If you can't find a principle or solution, post your question on an online community and resolve the issue later. The following communities usually respond quickly: Quora's User Experience, LinkedIn groups such as User Experience Professionals Network or UX Professionals, Slack's User Experience Design channel (request access), or the Stack Exchange's User Experience community.

Always keep an eye out for great samples. Tag them in Evernote.

Don't be afraid to browse popular apps and sites, and see how they do it. Galleries like UI-Patterns,awwwards, and siteinspire are great shortcuts to effective design patterns.

7. Remember, it's somebody's baby

Usually a UX review is read by someone who is passionate about the digital product under review: a founder, CEO, product manager, designer, or developer.

Make sure to balance out all the bad with some good. Remember the principles of good design feedback.

Include a section about what has been done well. This not only cools down the room, but also ensures that the team earns praise for their current best practices (which incentivizes them to keep doing so).

Power dynamics always plays a role in how well your suggestions are received. Nobody wants to look like they're a fool in front of their boss.

8. Peer and user review

This step is optional, but highly recommended.

After looking at an interface for hours and hours, you start to become biased and overlook obvious issues and opportunities.

Even if it's just 30 minutes, try to budget in an outside UX expert's review, to give you pointers, tie things back to business goals and user needs, catch major issues, catch opportunities from their area of expertise, etc.

Even better, run some guerilla usability tests. If you're designing for mass-market consumer audiences, buy five Amazon gift cards ($10 to 20 a piece is enough) and head to your local Starbucks. Test with five people, then include their feedback in your final report.

Services like UserTesting and 5 Second Tests are also highly affordable for scaling targeted tests in a hurry.

9. Next steps

A UX review is designed for quick wins. It's a cheap simple insurance policy against obvious UX issues choking the bottom line.

Start outlining a plan of action with suggested dates. Of course, you aren't a project manager or product manager. But at least you're closing the conversation in terms they respect and understand.

For SkyMall, we ended our report with a high-level roadmap of activities. We would create a more detailed roadmap for our next conversation.

Explore new branding leveraging existing branding and modern trends: styles, tone, personality, imagery, iconography, colors, etc

Content Strategy: create an overall content strategy revolving around holidays and building buzz for unique products

Usability testing: Start an open discussion with customers. Get to know them, profile them, and build a long lasting relationship so you can adapt to their growing needs.

UX Designs and UX Reviews: Leverage GobySavvy's UX team as an unbiased, outside perspective to support internal efforts. We can guide major efforts, conduct audits of future designs, and ensure all pieces of product strategy align.

Once you're finished, it's time to start implementing the recommendations. Good luck!

This post originally appeared on Studio by UXPin

Read next: Test the iPhone 7 Plus's awesome portrait mode with iOS 10.1

# data[].attributes.attachment_link.title
How to conduct a UX review that won't get thrown out

# data[].attributes.attachment_link.description
When conducting a UX review, you need to focus on actionable insights.An audit is not an just a laundry list of usability issues. Triage, prioritize, and deliver clear next steps to our stakeholders and clients. Beyond fixing glaring issues, you also want to reveal new opportunities for conversion and engagement.

# data[].attributes.headline
How to Create the Best User Experience for Your Application

# data[].attributes.subject
How to Create the Best User Experience for Your Application

# data[].attributes.attachment_link.readable_text
Dax Pandhi
Nukeation Studios

April 2006

Summary: Dax Pandhi discusses how to implement intuitive user interface and user experience design principles into your Windows applications. (23 printed pages)

Contents

Introduction
The Basic Principles of Proper UI
Spacing and Positioning
Size
Grouping
Intuitiveness
20 Tips for a Better, Functional User Experience
1. Stick to Standards
2. Draw Attention to Important Buttons
3. Simplify Recognition with Icons
4. Simplify Recognition with Headers
5. Use Custom Message Boxes
6. Include Alternate Commands
7. How to Handle Critical Actions
8. RadioButtons or ComboBoxes?
9. Never Disrupt the User!
10. Provide Progress Status
11. Simplify Complex Steps with Wizards
12. Get the Tone of Your Text Right
13. Sometimes a ListView is Better
14. Simplify Navigation with Breadcrumb Controls and Sidebars
15. Use Pretty Graphics
16. Provide Resizable Forms When Possible
17. Provide More Functionality with Sidebars/Task Panes
18. Give a Notification Choice
19. Provide Tooltips!
20. Don't Forget the Little Things
Conclusion
References and Resources

Introduction

We developers often see monochromatically. Well, that's a bit harsh. We do have coloring in our code. But that's about it. And sometimes we're so pumped up on technology-especially new technology-and the function of the software (I bet even right now you're saying, "SHOW ME THE CODE, stop talking!") that we forget the end user just might have different priorities. We work hard to make the application work-they just expect it to work, so they have additional wishes, too. This is especially true if you're into retail software, or something that will be used by non-technical people. While the first impulse would be to call them ungrateful, they are our customers, so let's see how we can make the experience better for them.

The question is: if you are going to be spending a few dozen hours (or more) a week staring at a particular software application, you at least want it to be easy on the eyes. You also want, and need, it to be as easy to navigate and use as possible. With the amount of software being churned out, an estimated 4 out of 10 software applications have a really great UI that the end user truly likes and is instantly comfortable using.

A massive amount of internal-use software is created for corporations. Whether it is developed in-house, or under the care of a consultant-often a bare minimum of time, effort, or money is invested into creating a better UI. The 'designer' role is rare in the development cycle-especially in the world of Windows applications. That is not to say your application's UI is ugly, but that there's just a whole lot more you can do. "Good enough" or "Gets the job done" doesn't cut it anymore.

There are some basic rules to follow to have a much nicer looking and better functioning UI for your application. It doesn't require too much investment of time or money on your part, and adds a good return on investment.

Before we go further, let's differentiate between user interface and user experience-at least for the scope of this article. User interface, or UI, refers to the visuals and controls of your application, while user experience, or UX, encompasses both the UI and the behavior of the application related to the UI as well as the "feeling" the user gets from your app. It's not just about designing a great-looking UI, but making sure it works great, too.

Here we will discuss 20 points of UX design that you can integrate into your application design phase easily. The result will be richer applications with better intuitive functionality-a "human UX". As we all know the Windows Vista generation of applications will need to look and behave differently. Hopefully, what we will talk about here will help you prepare for future applications while giving your current users a taste of the future.

But before we delve into that, let's talk a bit about the basics of proper UI design.

The Basic Principles of Proper UI

A friend of mine was showing off an app on which he was the lead architect. The functionality was fantastic. They had spent over 2 years on the core of the software. But the UI of the application (which was going to be sold in 4-digit amounts) was more drab than a typical un-themed Windows application. I asked him why he wouldn't spend some time to make his UI better. He said, "It's Windows! If it was a Web app, sure-but other than skinning the app, how far can you take a UI-even if it is Windows XP?"

While there is truth in that statement-and more so if you take into account what Windows Vista will allow-it's not completely accurate. A window does not need to be custom-skinned to look good. The really professional looking UX depend on these four factors:

With versions of Visual Studio prior to 8.0, spacing and sizing was quite painful. A 4x4 or 8x8 grid doesn't always work. With the inclusion of SnapLines, the process has been greatly simplified. I, for one, am very happy with this feature. Aligning a label with a text box, or even worse, aligning multiple labels with their corresponding text boxes was something that often made me want to pursue an easier career such as deep ore mining. But those days are gone. I highly recommend paying attention to these SnapLines.

Now, let's explore these four aspects for a moment.

Spacing and Positioning

Spacing between two controls is important. In Figure 1, you can see a simple User Information entry form-the top two text boxes are too close, the list under them is too far away, and there is a lot of unused room on the Form.
Figure 1. Poorly designed form Figure 2. Properly designed form
In Figure 2, you can see a more professional-looking dialog with proper spacing. This is the same form as in Figure 1, but it was modified to use the spacing recommended by the SnapLines. It is always recommended to align a label with the text baseline of the textbox or other control next to it, rather than the actual bottom border of the control. The SnapLines turn a different color when that alignment is reached, usually just a few pixels above the bottom border.

While there are no exact rules for spacing, the best thing to do is follow the SnapLines. Other good tools to help you keep proper spacing are the Layout controls under the Containers toolbox group. The TableLayoutPanel is very helpful for creating entry form style dialogs.

Size

The same can be said for size. When you drag a Button from the toolbox on to your form-it has the perfect height and width. The maximum width recommended (barring any seriously important reasons) is to double the original width. Otherwise, it just sticks out-this can be as eye-catching as a pop-up ad-which it shouldn't be!

If you take a look at the Run window on the Start menu, or the PROPERTIES dialog of any Windows Explorer object, the button sizes are 'just right'. If you have a very important function that you need your end user to notice without fail, there are other methods than using a large button or garish non-standard colors (more on that later).
Figure 3. Button size comparison
In Figure 3, you can see three buttons. The first button is the most recommended size and is the size created by default when dragged (or double-clicked) from the toolbox. Sometimes extra text requires you to make the button larger. The second button shows a large yet acceptable size. It would not create a mess for laying out other controls. The third button, however, is a completely unacceptable size. You can see that it even slightly distorts the theme bitmaps Windows uses to draw themed controls. It will also make it hard to align other controls intuitively around it.

In Figure 1 above, you can see that the two text boxes are small considering the size of the dialog and the emptiness on the right side. In Figure 2, you can see a more appropriate size. SnapLines can help you to size as well. It is good to obey the SnapLines, as they will always give you a very specific size or position solution for that particular situation.

Grouping

Almost every application holds many, many, many controls. Only by proper, intuitive grouping can you make all these controls easier to use. Function-based or categorized grouping is done best by Tab controls. For example, 'Accounts,' 'Reports,' 'Employees,' and 'Projects' would be perfect candidates for Tabs in a typical business application. Sibling grouping-controls that contribute to the same end result-are best done by Group controls. I don't recommend using Panels with borders for such grouping. Group controls save you the extra weight of a label control-especially if your sub-controls are self-explanatory.

Group controls inside Group controls are not recommended unless there are no more than 2 or 3 of them inside one large Group control. A Group control inside a Group control inside a Group controls is strongly recommended against-it's weird to even write about!

Intuitiveness

This is the real important aspect of a great user experience. Intuitive UX lessens the need for explanations. The user just knows what the controls do.

An important topic in intuitive design is color-coding. A really good example is presented in the Windows XP Design Guidelines that Microsoft released prior to the release of Windows XP. Windows XP presented new soft-square buttons for functions such as navigation in themed applications, the Log Off and Turn Off Computer dialogs, and others.

The coloring of these controls was decided upon the severity of the result of that button being pushed. Navigation is green, much like a 'Go' traffic light. Shut Down, which would result in a potential loss of work, is colored red like a warning sign. Semi-critical buttons such as Log Off or Hibernate are yellow. Neutral buttons that do not have any critical effects on the work processes of the user, such as Help, are a soft blue. When creating a skinned UI, these color aspects should be kept in mind.

A very good example of recognition of content by colors is Microsoft Office OneNote. The application's tabs can be set to different colors while still looking essentially like a proper part of the overall Windows XP style design.

Another important aspect is the text in your applications. Recently, we have seen the simplification of language in the written instructions in software. We'll talk later about the text inside software, but I would like to draw your attention to one small but important detail. Let's see an example.

MSN Messenger had a check box in its Options dialog marked "Share webcam capabilities." Sure, developers and tech-friendly people know what that means. But a novice user could possibly think that you could let your friend on the other end of your chat use your Web cam, too. It's confusing. In a recent version, they changed it to "My Webcam: Allow others to see that I have a webcam". This is perfect for the target audience that may not have technical knowledge and are used to simple language.

While simpler language makes it easy to understand, as we will see later, there's also an added advantage. Scientific studies show that our mind works easier with simpler language when trying to understand something new. Often, our brain processes words like 'it,' 'for,' 'that,' and other common words so speedily and effortlessly that more 'bandwidth' is allocated to understanding the words that stand out, like 'Webcam' or 'Others,' in the above example.

Message Box titles, GroupBox captions, and other such text blocks make it easy for you to convey the function of a bunch of controls to the end user with just a few words.

Intuitiveness is also born from familiarity. For example, the placement of the OK/ Cancel buttons is so uniform and well placed in our minds that if a dialog holds these buttons in a reverse sequence ( Cancel, then OK; instead of OK, then Cancel)-you just might hit Cancel instead. After using a particular standard for doing things-Windows-based applications for example-for more than a year, habits develop. Following industry standards (however unstated they may be) makes your software easier to use.

Let me give you another example. In one of the early Windows Vista preview builds, the Minimize, Maximize, and Close buttons of any Window became different. In previous versions of Windows (especially if you use a single monitor), you develop a habit of "slamming" the cursor in the top-right corner of the screen and clicking blindly. This always resulted in the Window closing. Now in this particular build of Windows Vista, there were approximately 8 pixels worth of space between the Close button and the right-most border of the Window. The good ol' "slam-click" did not work. The extra space did make it look cool (and was probably necessary for the cool glow animation the button sported), but was irritating. Reconditioning your mind can be tough. Thankfully, in the following build, this issue was addressed (I'm guessing many people who slam-clicked like me sent feedback to Microsoft). Now, there still is space between the border of the window and the close button, but clicking that space also causes the Window to be closed. Problem solved.

A very important factor of intuitive design is the amount of 'mental bandwidth'-the amount of time it might take our mind to comprehend something-it uses. The lower the 'bandwidth' usage, the better your UX.

These are small things that contribute to the "experience" of using a software application. But enough with theories! Even I want something "real-world" now. So, let's get down and dirty with how to improve your applications with some real-world tips and tricks.

20 Tips for a Better, Functional User Experience

The goal of a better UX is to have a simpler, easier, functional UI that also looks good. Now, let's take on the perspective of your everyday, non-technical user, who has limited experience with software applications-this is perhaps the largest 'type' of consumer for software applications. These tips will help you shape your UI to be more effective.

1. Stick to Standards

The established standards of any software environment-whether on the operating system level, brand level, or application level-are very important. Besides the branding, the standards act as a proverbial schema in the user's mind. When the user spends long periods of time working with a software application, he or she will automatically increase productivity because of the growing familiarity. It's as if you are driving down your neighborhood street-you could practically do it with your eyes closed (not recommended).

Before we talk more of standards, let's first understand what exactly these standards are. The standards include everything from the layout of controls in a particular manner on the dialogs-like the OK/Cancel buttons we talked of, the user interface's shape-rounded-corners of the top of the window as in Windows XP dialogs, styles of icons, styles of any other graphics, interactive behavior of your application, and the like.

Selecting the right set of standards requires just a simple inspection of your application. The best standards for a new application are the current Windows design guidelines. For example, right now the current standard is the Windows XP Design Guidelines. If the next version of the OS is nearing its release when you are designing your application, then it wouldn't hurt to use the design guidelines for the upcoming release, as long as you keep it backwards-compatible. It gives your application a more "cutting edge" feel-at least to end users.

If your application falls into a specific niche, then it may fare better to follow a different set of standards. For example, if your application supports, application or an add-on for, Microsoft Office OneNote 2003, it is wise to follow the styles of UI and interactivity standards of Microsoft Office-and OneNote itself, in particular. This includes using the Office-style command bars instead of the standard toolbars, and other such things- both visual and behavioral. If your application is to be part of the Microsoft Visual Studio .NET category, then you have a separate set of standards. In fact, for such add-on or support applications, companies such as Microsoft do release written guidelines. Also note that sometimes graphics and design concepts are protected intellectual properties. Always check the proper documentation to make sure you have the license to create such designs.

A third example of standards would be the Tablet PC environment. These standards cross the boundaries between OS guidelines and application guidelines. The Tablet PC SDK documentation contains some very helpful information in the "Planning Your Application" topic. In contrast to the Office 2003 or Visual Studio guidelines, these design recommendations directly affect how the user will interact with your application and how it should behave in turn. For instance, if you have docking windows in your application, the documentation recommends that you make sure it can detect when the screen orientation is changed, and that the Docking windows properly reorganize themselves in a portrait or landscape orientation as needed. Even if you are not designing your application to be Tablet-specific, I can't recommend it enough that you go over these guidelines-you (and your application) just might benefit from this.

With the rise of Smart Clients, applications are now crossing the boundaries between different hardware-normal PCs, Tablet PCs, Mobile or Ultra Mobile Devices, Media Center PCs, etc. Each situation calls for a different (or additional) set of standards to be followed.

When applications share the OS-level or application-level standards, the users feel more at home with the software that makes it easier to learn and use. This results is a direct boost to productivity. Besides, they want to just be able use your program, not to first learn how to use it.

2. Draw Attention to Important Buttons

Sometimes you really need to get your user's attention to the most important buttons even when you have four or five other buttons lying around it. If you mess with the size, color, or font, you would break standards-which of course is not recommended. Instead, you can use a couple of simple tricks to accomplish this.
Figure 4. When paired with LinkLabels, buttons draw more attention.
Trick #1 would be to convert the other non-critical buttons into LinkLabels. This way, the user knows that these links will perform a task, but their attention will go first to the button that stands out-without breaking standard design guidelines.
Figure 5. Left-to-right reading cultures would recognize the left-most button first.
Trick #2 would be to put it first in line-either on the left for horizontal layouts, or on top for vertical layouts. Do note that this may change depending on the target user's culture-you may fare better if you place the button in question on the far right if your application is any language that is written from right-to-left.

It should also be noted that the most obvious or recommended option should be set to receive focus by default. For example, on a delete confirmation dialog, the No option should be highlighted, as this prevents the user from accidentally deleting something.

3. Simplify Recognition with Icons

It is rightly said, "Pictures speak a thousand words." Icons-especially the Windows XP and Office 2003 icons and toolbar bitmaps-help speed up cognition of the UI and the task the user has to perform.

For example, when you see the exclamation icon most often seen on the Message Box, you instantly become aware of the level of risk associated with the controls next to that icon. Similarly, when your application puts up a lot of controls-no matter how properly arranged-it can be daunting to find the set of controls you are looking for.

In Windows XP Service Pack 2, an updated tab is added to the System Properties control panel applet called "Automatic Updates". There are four options present-automatically download updates, download updates but let the user decide when to install them, notify the user if updates are available but don't start download, and disabling automatic updates completely.

A new PC user may not be aware of what these updates are and might not know which option would be best to choose. So, Microsoft has put a green shield icon with a big check mark on it next to the most recommended that signifies a "safe" option, and a red shield icon with a big "x" on it next to the one that would be potentially harmful to the user. This is very helpful in critical situations-especially when the user doesn't have time to read too much text.

In the same System Properties applet, each tab has multiple GroupBoxes with different controls for different tasks. A relative graphic is placed next to each group that would easily signify the task of the control group. This type of graphical code is similar to color-coding in physical files or parking lots. This also works on the same principle of having at least some visuals in a magazine article-it keeps the reader's interest.

Choosing the right icon is also important. Microsoft provides many standard graphics as part of Visual Studio 2005. These would be the best choice. If you create your own icons, it is highly recommended that you follow the OS-level or application-level standards for these graphics as mentioned in the Stick to Standards section above.

There is a very helpful guide for creating Windows XP style 32-bit icons in the Windows XP Design Guidelines. New guidelines for Windows Vista style icons are soon to be released, as well. See the link at the end of this article for more information.

4. Simplify Recognition with Headers

Headers are the perfect way to explain the entire dialog in a single sentence (and optionally a graphic). Sometimes, headers can even help you accommodate navigation and commands within them as well. Headers work more effectively than normal description labels because they're the first thing we see when the dialog pops up.

The Windows Installer wizards are perhaps the most popular headers: a simple icon in the far right; a title label describing the dialog (example: Select Installation Folder); and a sub-heading that describes the purpose of the dialog (example: Select the folder where the software files will be installed). But this philosophy works outside wizards, too.

Let's say we have a typical business application with an accounts section. Following the design paradigm championed by Windows Vista (see Figure 6), we can supply mission-critical information and related commands in the header (or footer, if the scenario calls for it) itself. Our user has opened the account file for "Big Company," and the header would look something like that shown in Figure 7.
Figure 6. Windows Vista Explorer with sophisticated footer Figure 7. Comprehensive header in a Windows Forms application
Similarly, you can avoid having to add Windows XP-style task panes-especially when you have just a few commands, which would waste a lot of vertical space-and save yourself a lot of hassle by moving these commands to the header.

There a few things you should keep in mind when designing headers:

Make sure the background color is different from the dialog background color. More often than not, a white header over a standard Windows intrinsic control face color will do. But if you really want to make sure no special theme or custom colors mess up your header, draw a LinearGradient using the Color.FromKnownColor with the colors ControlLight and ControlDark.

If possible, keep your header's height under 150 pixels. Usually a height of 100 or 120 will do. As a general rule, make sure it is less than 1/4 of the entire form's height.

If you want to add in-place editing for information shown in the header like the Customer Name in Figure 7 above, dynamically replace the LinkLabel with a Textbox and swap them again once the editing is done.

If you have a title label with a font over 10pt in size, use Arial, or Franklin Gothic Medium. MS Sans Serif will look too jagged and unprofessional. Franklin Gothic Medium is the recommendation in the Windows XP Design Guidelines documentation. For applications targeting Windows Vista, use the Segoe UI font that is the system default font.

5. Use Custom Message Boxes

The options available in the standard Windows message box are very limited. When you have to ask your user a question that can't be answered with a simple Yes/No or OK/Cancel, it becomes complicated. You end up saying "Click Yes to blah-blah, or click No to blah-blah."

Windows applications are now becoming simpler to use because of the high volume of non-technical users. Sometimes, it can be much simpler to provide buttons with friendlier texts and even some additional controls-LinkLabels, for instance-to make it easier to accomplish the task at hand.

The .NET Framework makes it easy to implement custom dialogs. By just assigning a couple of properties on your custom dialog form, or with a single line of code, your form can work just like a standard message box. In a button-click event, set the dialog's DialogResult property to DialogResult.Ok or DialogResult.Cancel. Use the ShowDialog([OwnerForm]) method from the parent form. The ShowDialog method returns the DialogResult value.

You can use all DialogResult members. These same options are used by the standard MessageBox.Show method.

Alternatively, you can just set the dialog's AcceptButton property to btnOK, and the CancelButton property to btnCancel. This will automatically map the Enter and Esc keys to the btnOK and btnCancel buttons' respective Click events.

Here are some tips to spice up your custom dialogs:

For complicated topics, provide links to local or online Help with a LinkLabel stating "Find out more" under the appropriate text label.

Instead of Yes/No/Cancel buttons, use texts that clearly state the result of clicking the button, such as "Save File and Exit," "Exit without saving," and "Don't exit." However, stick to the standard Yes/No, OK/Cancel, and such standard buttons whenever possible. Familiarity makes for great productivity.

Keep 50 pixels worth of margin space on the left side (or right side depending on the target culture settings) and add an icon representing the scenario for the dialog. If it's an information dialog, you can use the "i" icon used by standard message boxes; if it's a security dialog, you can use a lock icon or a key icon. Visual Studio 2005 ships with some great high-quality graphics.

Always make sure you provide proper keyboard navigation for these buttons-users use the keyboard shortcuts for message boxes (for example, O for Ok, Y for Yes, C for Cancel, and so on) heavily. They would surely find it annoying if your custom dialog did not use them.

6. Include Alternate Commands

Two important factors dictate the need for alternate input methods-frustration and laziness. Frustration is a too often occurring thing for computer users. When you are frustrated you want your task to be done quickly. An extra click or an extra wait of a few seconds really infuriates a person under stress-you know how it is, we've all been there. Laziness often urges you to either finish the task with just the keyboard or mouse-whichever you are using at the moment. But other than these two factors, having alternate input methods makes it easy for the user to get tasks done.

For example, if you have a list box with two buttons-"Add" and "Remove"-on either side, you should add a context menu for that list box with menu commands analogous to those buttons. This gives the user an opportunity to choose the method he or she finds the most suitable. Novice users, as the Windows Vista User Experience Guidelines state, use context menus a lot and expect them to be anywhere they right-click.

Similarly, we use visual controls for text or numeric input. For example, sliders are used to specify integers, and Calendar controls are used for date input. Sometimes it can be more comfortable to just input by typing. It can often make a difference for the user if you add a Numeric Up-Down control linked to a Slider, or use a DateTimePicker instead of the Calendar control.

7. How to Handle Critical Actions

Users mess up. Always. That's the reason the tech support people earn their living! Not to hurt these nice people's income, but there are a few ways we-the developers-can help the user to not mess up, or at least recover when they make a critical error.

When performing a critical, unrecoverable function, it is generally a good practice to make a message box pop-up to confirm the action. Let's take that up a notch. In Figure 8 you can see a similar custom message box, but with an added advantage-a timer shown visually with the help of a progress bar.
Figure 8. Critical action dialog with most harmless option selected by default
There are a few scenario-specific variations you can use. If the action to be taken is very critical (ranging from overloading a nuclear power plant to deleting files permanently), then the default action after the timer runs out should be Cancel. The dialog should not go away, but rather the text label changes to show that the action has been cancelled. The user can choose to confirm the command or cancellation.

Always make sure buttons that perform critical operations are clearly marked-always use clear text that accurately describes the action. If the action is the deletion of files, don't write "Remove Files from Repository"; write "Delete Files from Repository." When working with file lists, if a Delete menu command deletes the selected files from the hard disk itself (as opposed to removal from just the file list), you should properly stress the critical nature of this and explicitly stress that the action will permanently delete the files.

Someone once said, "You are as good as your worst work." The same thing applies to software applications. A single bad experience with your app can make a big negative impression on the user. To make sure this doesn't happen, one thing you can do is to make sure that if your application crashes, it goes down gracefully. If you can add data recovery, or allow the user to try to save a copy of that data, it can be a big plus. The user should be properly notified if the application crashes. A JIT-Debugger or a critical error dialog is not a good thing. While talking about how to handle crashes goes beyond the scope of this article, I will recommend that a simple dialog that apologizes to the user and informs him or her of the situation (and possibly with a link to more information on how to recover from this crash) would be very helpful to the user.

If you want to take it one step further, you can do what one of my favorite graphic design applications does. If it crashes, it will show a recovery dialog which would allow you to save a separate copy of the file being worked on, and then would give you a feedback dialog where you can enter information about the crash (personal information optional, of course) and send it to the creators.

8. RadioButtons or ComboBoxes?

At first glance, the method for making a one-of-many selection doesn't seem so difficult or important. Sometimes it can be-especially if the scenario is an application used for time-sensitive work.

Let's take a look at a real life example. Microsoft recently released a preview version of a graphics application, Expression Graphics Designer (formerly codenamed "Acrylic"). I had about 20 graphics objects to which I had to assign a certain property separately in this application. It was a dreary process. To do this, I had to select the object, click the button for bringing up the settings window, and set the options. In one such option two choices had to be picked from a ComboBox, as you can see in Figure 9.
Figure 9. Microsoft Expression Graphics Designer, Edge Glow Window
When you have to drop down the ComboBox list and select the second item (out of only 2 items) it can be really irritating. What we don't generally realize is the time it takes for the drop down list to appear. It can waste a lot of your time and can be frustrating. This could be solved easily by putting in a GroupBox with two RadioButtons-especially when there is so much space available. I've encountered similar problems in applications such as CorelDRAW, Microsoft Access, and others.

Besides wasting time because of the drop-down animation, it also wastes our "mental bandwidth." With two "always visible" RadioButtons, our mind would subliminally know the position for the cursor to click on. With the ComboBox it will be processed only after the list has been drawn. While it may seem too unimportant, it actually is very important.

Sometimes it is better to use RadioButtons, especially if you have 4 choices or less.

9. Never Disrupt the User!

Short of putting a gun to their heads, this is the most destructive thing a developer can do to users. When your application, unnecessarily or otherwise, interrupts the user while he or she is working on another application with a message box or a taskbar flash, you earn negative points from the user.

Taskbar flashes can be useful, of course, but should be called upon only when your application's process requires input from the user to continue, or if you have something critical to convey to the user. If the user has kept the taskbar on Auto-Hide, a flashing taskbar button can obstruct the user from accessing the status bar or other low-anchored controls as the taskbar would be on top of it and will not hide again until the user has clicked the flashing button.
Figure 10. Custom toast window with graphics and multiple controls
"Toast" windows (see Figure 10), made famous by instant messaging clients like MSN Messenger, are a great solution for informing the user of something without annoying or disrupting his or her work flow. There is a great article!href(http://msdn.microsoft.com/msdnmag/issues/05/09/WindowsForms/default.aspx) by Bill Wagner on creating Toast windows. It is good policy (and manners) to not disturb any other application's toasts. Obstruction of such windows can be annoying and unproductive. One solution is to use the ToastSemaphore Mutex!href(/library/en-us/WinMessenger/winmessenger/overview/toast.asp) provided by the OS to avoid toast collision.

Sometimes you may need to show multiple items by the toast. Popping up 3 or more toasts would not really be advisable. Instead, cycling through each by popping/fading one toast after the other would be better. Microsoft Outlook implements a similar solution when notifying the user of incoming e-mails.

10. Provide Progress Status

Often there are tasks that require the user to wait. Of course, this is one of the things that the user simply hates to do. But worse is when they are waiting without knowing what is happening. Sometimes your application may need to connect to a Web service or a remote computer, or maybe it is processing large chunks of data-whatever the reason, the user should be made aware of, or at least vaguely aware of, what is happening under the hood. There are different methods of doing this, based on the situation.

If you are connecting to some far off object like a Web service or something placed on a network or Internet server, it would be advisable to show a simple progress dialog (see Figure 11), or a progress bar hosted in the status bar. An accompanying label should describe the current status of the process. For example, if you are connecting to a Web service to process some data, just say "Connecting to Web service... " or "Please wait, processing... " If this process is synchronous, it is advisable to disable all controls the user can access until the process has been completed, or just show the progress as a modal dialog box.
Figure 11. Simple progress dialog showing status of Web service connection
It is highly recommended that you set the progress bar Style to Marquee mode if you are using a progress bar and the processing time is unknown, or if you don't have a maximum value.

Another method that is becoming popular is a fixed 'toast' window that displays progress. Microsoft AntiSpyware downloader/updater or the Norton AntiVirus e-mail scanning toasts are good examples of this. Of course, this should be used only for asynchronous processes only. Otherwise the user may feel disconcerted. Such windows are best used for background processing such as downloading an update, performing a scheduled task, etc., and should never be set to "Always on top."

11. Simplify Complex Steps with Wizards

It is safe to assume that if faced with a plethora of controls on a single form, a typical user will be confused to no end. Sometimes, no amount of grouping, sizing, or spacing can help you when you have many important controls.

A Wizard is the best thing for such scenarios. You can divide controls by task or categories as applicable, and place them in separate steps. This can help the user stay focused and not be daunted by the task. You can provide step- or task-specific help with a Help button. You can find Wizard creation guidelines in the MSDN Library.

Wizards are also a good way to help set up the initial configuration of your application. Many applications use such a wizard to set up personalized configuration just after setup is completed, or on first use. Such an initial wizard should also be made optional, if possible-if the user cancels at any point, the unspecified settings go to default values. If you can make the wizard a bit graphical (see the Use Pretty Graphics section), it makes the configuration task that much easier.

12. Get the Tone of Your Text Right

In the recently released Microsoft Windows Vista User Experience Guidelines, a very important point has been made about "Text Tone". This is the impression and feeling given by the text in your application. This can be anything from a simple tooltip, to an instruction label control.

Earlier we discussed the change of text in the Webcam option in MSN Messenger. That is called proper text tone. When dealing with non-technical or novice users, getting the message across takes on a different aspect.

If you write "Destination Path" above a text box in a self-extracting application, a technical user can easily know that you enter something like "C:\Temp\MyPath." A novice user (think "Mom") can just as easily be baffled and would need to refer to the manual, call tech support, or worse-give up. A good alternative is to specify what you want the user to do: "Select the folder where you would like to place these files." You can even rename the "Browse... " button residing next to that text box to "Select Folder... "

Providing a clear description of what you want the user to do also lessens the need for Help files, or at least lessens the details you need to include in Help files.

A very good suggestion from the Windows Vista User Experience Guidelines applies to any software. It states that the writer should keep the text conversational. The Guidelines defines this as, "Avoid words you wouldn't say to someone else in person."

A few tips for writing text:

Avoid talking about the user in the third person. Say "You" instead of "The user."

Whenever possible, judiciously use "My name:" or "My E-Mail address:" instead of "Name:" or "E-Mail:"

When giving multiple options, write the text from the user's perspective. For example, if you have two RadioButtons under a label such as "Select permission for [Username] on this network" above two RadioButtons, such as "Allow" and "Deny", replace the RadioButton text with "I want to allow [Username]" and "I want to disallow [Username]."

Underline text only if it is used for links. It confuses the user if the underlined text is not a link.

Draw attention to important information with a bold label, but use it carefully. Too much bold text is confusing and reduces the overall impact of the form.

When writing the text for a check box, make sure it is easy to know what will happen when it is selected and when it is unselected, or cleared. The recommended option is to write the text directly as the result of the check box being selected. For example, write "Send me helpful information from your partners" instead of "Don't send me helpful information from your partners." While I can imagine many marketing people arguing about this particular example, I'm sure you know what I mean.

If you have a button-like control (usually a RadioButton with a Command Button appearance) that controls Enabled/Disabled, make sure you label it properly. If the process is enabled, write "Enabled" instead of "Enable", or "Disable". If you write Enabled it shows the current status. If the button is clicked (enabled) and the button says "Enable", it can be confusing and problematic. "Enable" might prompt the user to click it thinking the process is not active.

13. Sometimes a ListView is Better

We often stick to DataGrid or ListBox or even ComboBox for selection tasks, but with Windows XP and later versions of Windows, using a ListView can give you larger options.

The fine points of the ListView control:

Speeds up recognition of items with icons and bitmaps.

Displays additional information with Details or Tile views.

With Visual Studio 2005, you can even have Groups for additional categorization. Groups span across all views and are flexible. Groups can also be used to flatten a hierarchy view (like a TreeView) where there are more Child nodes than Parent nodes. A good example of this is the Network Connections dialog in Windows XP, when viewed with "Show in Groups" and the view set to Details.

To customize a ListView control, manually paint it by setting the OwnerDraw property and using the DrawItem and DrawSubItem events.

Supports quick in-place editing of ListView items.

Easily supports manual reordering.

Lets users select the view (Large Icons, small icons, list, etc.) they are most comfortable with.

14. Simplify Navigation with Breadcrumb Controls and Sidebars

"Sub-navigation" is the key to complex UI. Sometimes you can't escape having a complicated UI. The best thing to do in such a situation is to make the experience as easy as possible for the user. A sidebar consisting of link labels, or a TreeView for hierarchy-based navigation, suggests a sibling level navigation for the current dialog's task. It makes it very easy for the user to jump between steps of the process while knowing where he or she is.

If you go for a hierarchy-based navigation with TreeViews or other similarly complex navigation, a good utility for the user would be a breadcrumb control. While Visual Studio does not ship with a built-in control for this yet, there is a great article by Duncan MacKenzie on MSDN for creating one yourself. A breadcrumb control makes it easy to find the current location in relation to the hierarchy.

Breadcrumb navigation can be easily merged into the header if the form has one. See the previous section on headers. Figure 7 shows a breadcrumb navigation bar in the header.

15. Use Pretty Graphics

Everyone loves applications with cool graphics-the majority does, at least. While a UI with pretty graphics isn't a logical choice for all applications, it does help to make a nice impression and can be a pleasure to work in. Of course, the graphics should not impede productivity, but if used correctly, they can increase it!

There doesn't have to be many graphics, nor do they necessarily require a lot of work. A professionally designed splash screen or a header (like the one we talked about earlier) does the trick. If your budget allows, you can use nicely designed graphics for toolbars, wizards, and more. They make your app look pretty, and more professional, too. It is a subtle effect, but a professional look conveys confidence and stability. If you are a relatively small company creating retail applications, this is a key aspect to consider.

Always make a point to use professionally designed graphics. Royalty-free graphics are easily available and affordable. You can hire a designer as well. But if graphics aren't your forte, don't try it yourself. If you can't acquire or use professionally designed graphics, then it is better to not use them at all.

For small graphics, you can always go for the icons and bitmaps that ship with Visual Studio 2005. (The graphics that shipped with previous versions are not recommended!)

16. Provide Resizable Forms When Possible

Resizable windows are somewhat like to resolution-independent windows. Resolution-independent windows look the same whether you use 96DPI or 300DPI screens. Whether or not your application's UI is resolution-independent, it will fare better if it is resizable. Of course, this would not apply to many scenarios, but is a good general-purpose rule.

If your window deals with lists of any sort-especially ListViews-this becomes even more important. Resizing allows the user to look at more data at the same time.

For example, we have an application where the user has to select an image from a large collection. The open dialog allows you to select a Thumbnail view, but the dialog is fixed size, and the thumbnail list shows only 4 thumbnails at a time. If the collection has a hundred images, scrolling and looking-a repetitive task-can be quite tiresome and a decrease in efficiency. If the dialog is resizable, the user can make it as large as is comfortable or at least as large as the screen would allow, and be able to finish the task quickly. If your list has horizontal scrolling-like a detailed ListView or DataGrid-it is even more tiresome! Resizable windows are very helpful in such a situation.

17. Provide More Functionality with Sidebars/Task Panes

Like the headers we talked of previously, sidebars and task panes are a wonderful way to provide extra functionality and utility commands. For example, the task panes in Microsoft Office Word 2003 are very convenient, accessible, and non-intrusive. They also function asynchronously when connecting to online resources, providing the user with the option to multi-task.

Creating a task pane or sidebar is as easy as creating a docking panel, with the option of putting a slick graphic on the top to act as a titlebar. You can even use a colored Label control for that. The opportunities for task panes are many!

If you have additional functionality and want to non-intrusively supply it to your user, there's no place like the task pane. You can also make task panes "Auto Hide" or collapse like the Visual Studio tool windows. A very simple yet comprehensive example of a task pane is the TASKS sidebar in Microsoft Windows Movie Maker that ships with Windows XP.

18. Give a Notification Choice

Previously we saw how to make a custom message box. If a message box in your application is going to be shown often to the user, then it can be prudent to add a check box that the user can select to disable that dialog from being shown in the future. Such an option is especially good for more obvious messages.

A familiar example of this is the Visual Studio Find dialog. When you search or replace text, Visual Studio shows a message box stating the results. But you are also given the option of disabling that message box. It can be really annoying if you have to hit Enter or click OK every time you search.

Another cool thing that Visual Studio does is that even if the dialog is disabled, it still displays the results of that operation in the status bar.

19. Provide Tooltips!

Sometimes tooltips can save you a lot of time. Buttons, check boxes, and other controls can be ambiguous and the user may not be sure what to do. Tooltips provide the best form of context-sensitive Help in just a single line. The user can quickly decide what to do without searching for anything in the Help file or opening another window.

People often skip this in their applications. Make a point to add tooltips to all ambiguous controls-or to ALL controls if possible. Don't repeat the text of an accompanying label or that control's own text, but provide additional information about that control. The text should explain the function of the control in just a few words.

20. Don't Forget the Little Things

The little things can annoy you, but ignoring them can impact the impression you make. I once used an application made by an important person in the software industry that had its form's BorderStyle set to Sizeable, but the controls on the right side of the form were not anchored. Because of this, the application created by an industry heavyweight had a non-professional feel.

These kinds of "little things" are the core of the overall impression. Your application's UI and UX are what users will judge your application on-at least at first. If they see obvious bugs in your UI, they may perceive your application to be less powerful and effective. The old adage, "Don't judge a book by its cover," does not apply to software applications (or books either, for that matter!).

Conclusion

We've just touched the tip of the human user experience. As the user experience becomes simpler, effective, fun, and more user friendly, the task of creating that user experience becomes that much more complex. But with some foresight and good planning, you can create a great user experience.

The best way to create the perfect user experience is to do usability testing targeted especially at the UI-whether with a special test group or by yourself. The more time you spend testing the user experience before releasing your application, the better. It will save you a lot of trouble later on.

References and Resources

I highly recommend going through these resources to learn about many other aspects of designing a good user experience.

The Human Factor. Albeit a bit old, this series of columns by Scott Berkun on MSDN provide really insightful approaches to software and web design.

Windows Vista User Experience Guidelines. Even at a preliminary stage at the moment, these guidelines can help you design great applications-for Windows Vista and in general.

Windows XP Design Guidelines. Until Windows Vista's release, these guidelines are still the most appropriate to follow in general.

Tablet PC Documentation. This set of documents contains all you need to plan a great Tablet PC compatible document.

And, of course, keep checking the MSDN Library for articles and information about user interface design and user experience design.

Dax Pandhi is the Principal and Creative Director of Nukeation Studios, an award-winning technology studio that specializes in software and technical graphics. He focuses on creating visually rich Windows and Web applications, as well as applications based on the Windows Presentation Foundation. You can contact him through his blog.

# data[].attributes.attachment_link.title
How to Create the Best User Experience for Your Application

# data[].attributes.attachment_link.description
Dax Pandhi Nukeation Studios April 2006 Summary: Dax Pandhi discusses how to implement intuitive user interface and user experience design principles into your Windows applications. (23 printed pages) Contents Introduction The Basic Principles of Proper UI Spacing and Positioning Size Grouping Intuitiveness 20 Tips for a Better, Functional User Experience 1.

# data[].attributes.headline
User Interface Design Tips, Techniques, and Principles

# data[].attributes.subject
User Interface Design Tips, Techniques, and Principles

# data[].attributes.attachment_link.title
User Interface Design Tips, Techniques, and Principles

# data[].attributes.attachment_link.description
User interface design important for several reasons. First of all the more intuitive the user interface the easier it is to use, and the easier it is to use and the less expensive to use it. The better the user interface the easier it is to train people to use it, reducing your training costs.

# data[].attributes.headline
GUIDELINES FOR DESIGNING USER INTERFACE SOFTWARE

# data[].attributes.subject
GUIDELINES FOR DESIGNING USER INTERFACE SOFTWARE

# data[].attributes.attachment_link.keywords[]
user interface design; usability; standards; guidelines; mitre; human factors; human-computer interaction; man-machine interface; data entry; form design; data display; screen design; dialog design; sequence control; user guidance; help; documentation; data transmission; e-mail; email; data protection

# data[].attributes.attachment_link.title
GUIDELINES FOR DESIGNING USER INTERFACE SOFTWARE : 1. Data Entry

# data[].attributes.attachment_link.description
guidelines for design of user interface software in six functional areas: data entry, data display, sequence control, user guidance, data transmission, and data protection

# data[].attributes.attachment_link.readable_text
One of the top 10 usability heuristics advises to promote recognition over recall in user-interface design. What are recognition and recall and why is recognition better than recall?

Psychologists like to make the distinction between two types of memory retrieval: recognition versus recall. Think of meeting a person on the street. You can often tell quite easily if you have seen her before, but coming up with her name (if the person is familiar) is a lot harder. The first process is recognition (you recognize the person as familiar); the second involves recall. Recognition refers to our ability to "recognize" an event or piece of information as being familiar, while recall designates the retrieval of related details from memory.

To better understand the differences between recognition and recall and why recognition is preferable in user interfaces, we need to take a small excursion into how the human memory works.

Activation of Content in Memory

Often psychologists think of memory as organized in chunks: basic interconnected units. Each chunk can be described by its activation: a measure of how easily that chunk can be retrieved from memory. For example, your name is a chunk in memory; it has very high activation - if someone woke you up in the middle of the night and asked you what your name was, you'd be able to produce it fairly quickly. On the other hand, if you had to remember the name of your first-grade teacher, that answer would likely be harder to come up with: its activation is lower.

The activation of a chunk is influenced by three different factors:

Practice: how many times a chunk has been used in the past

Recency: how recently a chunk has been used

Context: what is present in the person's focus of attention

We'll briefly review each of these individually.

Common lore says that practice makes perfect. Indeed, the more you practice a piece of information, the more likely you are to remember it: a chunk's activation depends on the amount of practice that it has received. That's part of the reason why your name is so much more familiar than that of your first-grade teacher: it has received a lot more practice.

But practice is not the only thing that influences activation: recency, or how far away in the past you've used a chunk, also dictates how well you remember information. In other words, something that you've used very recently has a higher activation than a piece of information that has not been used for a while (like the name of your first-grade teacher).

Besides practice and recency, the third factor that affects activation is context. To understand what that means, we need to take a step back and talk about associations.

In the beginning of this section, we said that chunks are interconnected memory units. The connection between two chunks is called association. If I say the word Paris and ask you to tell me what words come to mind when you hear it, you may come up with France, food, Eiffel Tower, or Napoleon. All these words are strongly associated with Paris, and when Paris gets in the focus of attention (that is, you've just heard it or read it), it spreads activation to other chunks associated to it. The most active chunk in your memory is the one selected as your first response; the next most active chunk will be your second response, and so on. (Note that the associations between concepts are highly personal and depend on previous experience: a French person may have totally different associations to the word Paris than an American.)

The concept of association is tremendously important in psychology: it forms the basis of learning and problem solving. It allows us to have a relevant conversation and it helps us discover new things. It is the link between the present (the current context in which we are) and our previous experience and history.

But how does context affect the retrieval of information from memory? It's like Proust's madeleine: when something in our current environment (the smell and taste of a cookie) is strongly associated with a chunk in our memory, it spreads activation to that chunk and it makes it become more active. The madeleine episode from Proust's childhood (although buried in the depths of memory and having very low activation in the beginning) suddenly became stronger because of the cue in the current context that spread activation to it.

(Our seminar The Human Mind and Usability discusses the concepts of memory and activation in more detail.)

Recognition vs. Recall

The big difference between recognition and recall is the amount of cues that can help the memory retrieval; recall involves fewer cues than recognition.

Answering a question such as Did Herman Melville write Moby Dick? involves recognition: you simply have to recognize whether the information provided is correct. If instead I asked you Who wrote Moby Dick? you would use a process of recall to retrieve the right answer from your memory.

Recognition is easier than recall because it involves more cues: all those cues spread activation to related information in memory, raise the answer's activation, and make you more likely to pick it. It's the reason for which multiple-choice questions are easier than open questions, where the respondent has to come up with an answer.

In our everyday life, we often use a combination of recognition and recall to help us retrieve information from memory. Often we start with a piece of information that is easier to recall to narrow down our choices, then we go through the resulting choices one by one and recognize the relevant one. An example is going to a website by remembering its name and typing it into the browser's address bar. Say you want to go to our site: if you've been here a lot, you might recall that it's called nngroup.com and get here quickly and easily. But many people would only be able to recall some terms they associate with the site, such as maybe "usability," "user experience," or "Jakob Nielsen." Luckily, for most such terms, entering them into a major search engine will bring up this website as one of the entries on the first page. This transforms your task into one of scanning the SERP (search engine results page) and relying on recognition to pick out the desired website from among the other options listed. (In fact, a paper by Eytan Adar, Jaime Teevan, and Susan Dumais showed that this method of retracing the path to a previous page is the preferred method for revisiting content on the web.)

Search does require users to generate query terms from scratch - which most people are bad at - but from then on users are able to rely on recognition while using the search results. This is one of the reasons search engines have become such an essential tool for using the web. Search suggestions are a major advance in search usability because they partly transform the query generation task from one of recall to one of recognition.

Recall in User Interfaces

The classic example of recall in an interface is login. When you log in to a site, you have to remember both a username (or email) and a password. You receive very few cues to help you with that memory retrieval: usually, just the site itself. Some people make it easier for themselves by using the same credentials everywhere on the web. Others create a password that is related to the site (e.g., "amazonpassword" for Amazon.com or "buyshoes" on zappos.com) so that they can increase the ability of recall by making the site a stronger cue. And many others just keep their passwords somewhere on their computer or on a piece of paper.

Recognition in Interfaces

A menu system is the most classic example of a recognition-based user interface: the computer shows you the available commands, and you recognize the one you want. Say, for example, that you're working with a word processor and want to draw a line through a sentence to indicate that it's no longer valid. Before the advent of graphical user interfaces you would have had to recall the name of this rarely used formatting feature. A difficult and error-prone task. Now, however, you look at the menu of formatting options and easily recognize the term strikethrough as being the one you want.

Promote Recognition in User Interfaces

How do you promote recognition? By making information and interface functions visible and easily accessible.

An application or a website usually has two components:

The chrome or the interface: namely all the buttons, navigation, and other elements that are there to help the user reach his goal

The content: the information that the user needs to achieve his goal

You can make both the content and the interface easy to remember; both can benefit from designing for recognition rather than recall. We'll look at a few successful and less successful examples of supporting retrieval of information through recognition.

History and Previously Visited Content

Providing access to the pages recently visited and searches performed in the near past can help users resume tasks that they left incomplete and that may have a hard time recalling. Search engines such as Google and Bing often help users retrace their searches by providing past histories.

Amazon (and many other ecommerce websites) shows users lists of items that they visited recently. These lists help users remember to finish a purchase that they may have started a few days ago. They promote recognition, because users don't need to remember interesting information that they may have seen in the past or recall what that product might have been called.

Other tools that let users save information in an app or on a website (favorites, wish lists, shopping lists, etc.) all help with making content easily accessible via recognition.

Visible, Intuitive Chrome

Command-line interfaces are an example of interfaces that are based on recall. If you want to rename a file called myfile in a UNIX system, you would have to type the command mv myfile yourfile. You would have to recall not only that mv is the command for move, but also the correct order of the arguments.

When direct manipulation and WYSIWYG came around, the idea was to replace some of these commands with actions that would be intuitive, so people would not need to recall anything from memory. The other alternative to command language was based on buttons and menus: the available commands would be visible in the interface and users will be able to select them. Gestural interfaces move us back to the era of recall, because they require users to remember the gestures that they can make in a given context. Tips, progressive disclosure, and good gestural affordances are all cues that are meant to help users with this extra memory burden by providing extra cues to make the recall of the gesture easier. (You can learn more about interaction styles, including direct manipulation, in our class on User Interface Principles that Every Designer Must Know.)

Many mobile apps start with tutorials that explain to users how they are supposed to use the apps. People are supposed to memorize that information and remember it when they need it. That's not going to happen: tutorials have a lot of information, but they are not rehearsed much and users have little time to establish associations between the information in the tutorial and the actual interface. Instead of showing general tutorials, use tips that are tailored to the page that the user is visiting. Those will allow the user to recognize which actions they may want to do and how.

Conclusion

How easily information can be retrieved from memory depends on how often we've encountered that information, how recently we've used, and how much it is related to the current context. Richer contexts (like those present when we use recognition rather than recall) make memory retrieval easier. Interfaces that promote recognition give users extra help in remembering information, be it about tasks and items that they had seen before or about interface functionality.

Reference

Adar, E., Teevan, J., Dumais, S. T. Large scale analysis of web revisitation patterns. CHI '08.

# data[].attributes.attachment_link.title
Memory Recognition and Recall in User Interfaces

# data[].attributes.attachment_link.description
One of the top 10 usability heuristics advises to promote recognition over recall in user-interface design. What are recognition and recall and why is recognition better than recall? Psychologists like to make the distinction between two types of memory retrieval: recognition versus recall. Think of meeting a person on the street.

# data[].attributes.attachment_link.description
information from the world than it is to recall it from the memory. Therefor, the interface development in the last decade has shifted towards designing interfaces. The amount of information the users are required to recall has been reduced in favour for requiring them to recognise the information that is needed to perform the task.

# data[].attributes.attachment_link.readable_text
Behaviour Models are there to help the creator test how the GUI in functioning (How efficiently it is running and how easily it will be able to perform tasks).

Behaviour Models can be divided into two categories which are:

Predictive Models - Keystroke Level Model and Fitts' Law

Keystroke Level Model - Keystroke Level Model is used to determine the amount of time it takes the user to interact with the Graphical User interface. For example it will determine how long it takes the user to complete tasks within the interface such as how much time it will take to interact with a button on the keyboard or how long it will take the user to point at a specific part of the interface with the mouse icon.

Fitts' Law - Fitts' law is a model used to determine what size the creator should make certain parts of the interface such as desktop icons and menu's within the interface. It basically states that the bigger the area that the user wants to interact with the less time it will take to interact with this given area. For example the creator should make the start menu button on the desktop quite large in size compared to the other icons surrounding it therefore making it stand out and will make reduce the time it will take for the user to interact with it by using the mouse pointer.

# data[].attributes.attachment_link.description
Behaviour Models are there to help the creator test how the GUI in functioning (How efficiently it is running and how easily it will be able to perform tasks).

# data[].attributes.attachment_link.readable_text
Fundamental principles of HCI design

Behaviour models: These are used to determine how a specific interface will do things or how a user will feel when they are using specific interfaces.

Predictive models: Used to incorporate ways to help incorporate improved means of having good interaction with HCI's for example Keystroke Level Model (KLM), Fitts' Law and Throughput (TP). The predictive model compares and evaluates these things in HCI and allows for a designer to help improve their pieces of HCI because of this.

Keystroke Level Model: This is used to predict how long it takes to execute a specific task and this is broken down into three areas

Going into more detail this is exactly what a keystroke model is used to check for and to measure:

Throughput (TP): This is used to show the overall productivity of the computer/how well a computer performs.

It's use it to show how quick a computer responds to a command, therefore showing you the computers processing speed and allowing you to yourself determine if it needs to be upgraded or not. This is therefore known as the response time, and as a computer gets older its response time will gradually get higher, for example when you add more things onto your hard drive and install more things than if you are trying to search for specific documents then it could take a bit longer to carry out the action. This is the same as when you are trying to start your computer up, over time it will take longer to actually turn on and therefore it will decrease your personal productivity.

Fitt's Law: This is used to predict how quick a user will be able to move to a specific area based on how far away it is and how large the object you are trying to reach is.

This creates a direct correlation between time and size as well as time and distance as the further away you get from an object, the longer it will take to get to the object and the smaller an object it is, the longer that will also take a user to reach the object.

This can be shown in a few different ways; you can do this by pressing a screen using a touch screen option or by using a pointing device such as a mouse.

By sticking to Fitt's Law I will need to choose my buttons carefully as they will need to be sized properly and likewise positioned properly as well.

Descriptive models: These are used to help understand how a user will interact with the HCI and from this will also help improve upon the designs of the actual HCI themselves. This could be done by Guiard's model, Buxton's three state model or by the Key-Action Model (KAM).

Key-Action model: This allows you to look at how users will interact with keyboards and therefore what kind of shortcuts they will use to carry out tasks.

This will show how what the user is expecting the computer to do when you try to use certain shortcuts and what the computer will actually do when you press the shortcut.

An example of this I can think of is when gaming you can used the arrows keys to move around as well as using (W,A,S,D) and if both options were not available then most gamers wouldn't like how the controls were laid out and therefore it could decrease the enjoyability of the game.

Keys on a keyboard are described as either 1 of 3 different things. They are either a:

Symbol- These tend to be letters, numbers or punctuation symbols.

Executive key-These tend to carry out specific actions for example the ENTER key or F1.

Modifier key- these don't actually type anything but they allow you to change what the next keypress will actually type for example the SHIFT key, if you press the shift key and then the number 5 for example it will put this %.

Buxton's three state model: this is used to determine how easy it is to use a mouse or the wheel and will measure how much pressure a user puts on it and how much dexterity and speed is used during this action. There are three states which are used to check this:

Guiard's model:This focuses on how a user will prefer using specific hand during interactions for example when typing a keyboard layout is most suitable for left handed people as the more important keys are on the left side of the keyboard. Guiard's model looks at the actual position of the keys on the keyboard.

The above diagram shows that the preferred hand is the right one but this is not always the case, it will be the left hand in the case of some people or in my case my preferred hands change depending on which task I am doing (ambidextrous) such as I prefer to play darts and write with my left hand and I prefer to play golf with my right hand.

Things which need to be considered if the fact that the actual human could be considered as part of the HCI and the overview of human information processing (HIP) and the overview of goals, operators, methods and selection (GOMS)

Human information processing (HIP): This is the concept that the human is part of the HCI and therefore HCI has been made specifically for the human in mind to help increase productivity. As humans will be in fact using just about all HCI created you need to think about how you will make it easy to use and who is going to actually use it (Advanced computer users may use shortcuts and other may not for example). This goes off the theory that the senses are the inputs and the actions that you carry out are the outputs and the brain will be the processor.

Goms: Goals, Operators, methods and selections rules- This is used to predict how long it will take something to be carried out or how long it will take something to be followed.

Visual Impairment: There are a large range of equipment made for the visually impaired including Braille computers and keyboards. Because of this problem you are able to use on screen narrators as well as allowing you to change the size of text on websites.

Speech problems/Orally challenged: Although I can't see this affecting the use of computers massively anything which requires voice recognition could cause the problem in this area. For this data will be entered using a keyboard and mouse preferably.

Aurally challenged:Hearing issues could be a problem if you are trying to listen to audio instructions or you need to phone someone up for help. Most interfaces are designed to be highly visual and therefore eliminate this problem altogether.

Physically Challenged: Some people may not be able to use a keyboard or mouse properly and therefore may rely on other devices to allow them to work such as a specialised monitor to type at what you look at in the case of ALS sufferers or allow speech input on your device to type exactly what you are saying.

Perception in HCI design:

Perception is very essential when you are designing HCI, I will be talking about how colour can be important in HCI as users will react to different colours in different ways for example a combination of colours which you find easy to read may not be the same for other people for example medical conditions such as dyslexia and colour blindness change the way things are seen dramatically.

The way we see colours can be affected in two ways, it can be affected by other colours around it so it could stand out in comparison or it could just be how the mind perceives the colour in front of it. The way the mind shows colours can be seen in the following optical image; although this is an actual image it gives off the feeling that the colours are moving/vibrating.

The way colour is chosen on certain backgrounds also has an effect on it. For example colours on a black background look brighter and larger than when what they would if they were on a white background because on a white one the colour would look smaller and darker.

Luminance: The colour system uses three main colours, Red, Green and blue (RGB). These colours are detected by the receptor cells in the retina of the eye and are displayed to you accordingly. To make colours stand out you need to use contrasting colours when designing and this will create a very nice appeal to the human eye.

The contrasting colours are shown on this colour wheel to find the contrasting colour simply pick a colour on the wheel and choose the one directly diagonally to it.

Pop-out effect: This is the use of a combination of colours to make a symbol stand out but there is a thing as too much colour. If you use far too much colour when designing HCI it runs the risk of looking unprofessional and therefore will not be appealing to anybody wishing to use it. Any colours you use must be used specifically to create professional and useable pieces of HCI.

Designing screens with text: You can use colour coding to help a user navigate through things more easily. When text is set to a certain colour it can mean certain things for example warning colours are always very bright and stand out vividly. A common way to colour text would be:

But even saying that, there is no colour scheme which is used all around the world and therefore the above might be completely different in certain countries. For example the colour black in the west is usually used for mourning whilst in China the colour for mourning is white and therefore literally the complete opposite.

When designing text for HCI you need to make sure you think about a few different things:

Patterns: Patterns are used to keep layouts symmetrical and consistent throughout as you can place thing in specific areas. They are basically used as templates to allow the user to stick to specific areas and therefore make it look rather neat. If things are neat and organised then it allows the user to feel comfortable with the HCI and they will use it much more efficiently. These templates will contain everything from colours to layout to menus.

Gestalt's Law: This literally means the law of shape or form and we follow some of these laws automatically such as we naturally group together different objects according to size, colour, shape or even style. If things are linked in any way then we naturally want to group them.

This can be used to group elements together even if they are apart by quite a lot.

Proximity-This includes anything which is in proximity to another object as we naturally would assume it was in a group.

Continuity- Smooth lines are much easier to interpret than jagged unorganised lines and therefore if everything is aligned properly then it will be easier to look at.

Symmetry- Like I mentioned a little further up, if things are symmetrical then they are much more pleasing the human eye. A regular square is much nicer than an irregular one to actually look at for example.

Similarity- Similar objects tend to be seen as a group even if they are not intended to be a group in the first place.

Grouped objects could be also seen if they are moving in the same direction for example or objects which are closed off inside of a box will be seen as a group also. The same can be said about objects which are connected together using a line, if we see that something is connected to another object then we will see them as almost one object and not two objects connected together.

How I have applied the principles: I have achieved the fundamental principles of HCI by creating my designs with them specifically in mind. My navigation bar is the best example because it is very simple and the text is designed to stand out instead of looking diminished in comparison to how it could look otherwise. The colours for my text are made relevant because the background for the website I am using is based off of a piggybank website and therefore piggy banks are tended to be associated with the colour pink, and pink and red colours go together quite well. Although the background is white, the text fills up enough space not to look too small on it and stands out enough to counteract that and being a bright colour I think the red is emphasised quite well. Like I mentioned earlier though, red is usually a colour associated with danger but when it is put into the environment I have put it in, then it looks almost soothing and therefore appealing. All the links will be created using exactly the same colour scheme and the rollover links will look exactly the same as well.

For my game navigation, this follows the fundamental principles of HCI because the pattern on it is made to be symmetrical and therefore looks good. The colours on it are meant to be darker so I have tried not to emphasise it at all by making it slightly opaque so the background shows through. With the buttons going onto a red background designed for hell I have tried to make the buttons look dark and seem like they belong in the image whilst still standing out themselves. With the images being rather close together and looking roughly the same they will be associated as being a group of images and they will look good on the background. Like I mentioned with the colours, with the background being dark, as well as the text coloured a dark red then the text blends in quite well.

# data[].attributes.attachment_link.description
Fundamental principles of HCI design Behaviour models: These are used to determine how a specific interface will do things or how a user will feel when they are using specific interfaces. Predictive models: Used to incorporate ways to help incorporate improved means of having good interaction with HCI's for example Keystroke Level Model (KLM), Fitts' Law and Throughput (TP).

# data[].attributes.headline
Using Shneiderman's Eight Golden Rules to Design Better Interfaces

# data[].attributes.subject
Using Shneiderman's Eight Golden Rules to Design Better Interfaces

# data[].attributes.attachment_link.readable_text
Follow Ben Shneiderman's 'Eight Golden Rules of Interface Design' if you want to design great, productive and frustration-free user interfaces. Apple, Google and Microsoft are among some of the highly successful companies whose well-designed products reflect Shneiderman's rules. The characteristics derived from Shneiderman's golden rules can be recognized in various user interface guidelines produced by corporate giants like the companies mentioned above. The visual embodiment of these rules is even more evident in the resulting popular interfaces they produce. This article will teach you to improve your work by integrating the 8 golden rules.
8 Golden Rules of Interface Design

Ben Shneiderman (born August 21, 1947) is an American computer scientist and professor at the University of Maryland Human-Computer Interaction Lab. His work is comparable to other contemporary design thinkers like Don Norman and Jakob Nielsen. In his popular book "Designing the User Interface: Strategies for Effective Human-Computer Interaction", Shneiderman reveals his eight golden rules of interface design:

Strive for consistency by utilizing familiar icons, colors, menu hierarchy, call-to-actions, and user flows when designing similar situations and sequence of actions. Standardizing the way information is conveyed ensures users are able to apply knowledge from one click to another; without the need to learn new representations for the same actions. Consistency plays an important role by helping users become familiar with the digital landscape of your product so they can achieve their goals more easily.

Enable frequent users to use shortcuts. With increased use comes the demand for quicker methods of completing tasks. For example, both Windows and Mac provide users with keyboard shortcuts for copying and pasting, so as the user becomes more experienced, they can navigate and operate the user interface more quickly and effortlessly.

Offer informative feedback. The user should know where they are at and what is going on at all times. For every action there should be appropriate, human-readable feedback within a reasonable amount of time. A good example of applying this would be to indicate to the user where they are at in the process when working through a multi-page questionnaire. A bad example we often see is when an error message shows an error-code instead of a human-readable and meaningful message.

Author/Copyright holder: Google, Inc. Copyright terms and licence: Fair Use

The Windows Media Player designers should have remembered Ben Shneiderman's 3rd golden rule: Offer informative feedback. Poorly designed error messages often show an error-code that does not mean anything to the user. As a good designer you should always seek to give human-readable and meaningful feedback.

Design dialogue to yield closure. Don't keep your users guessing. Tell them what their action has led them to. For example, users would appreciate a "Thank You" message and a proof of purchase receipt when they've completed an online purchase.

Offer simple error handling. No one likes to be told they're wrong, especially your users. Systems should be designed to be as fool-proof as possible, but when unavoidable errors occur, ensure users are provided with simple, intuitive step-by-step instructions to solve the problem as quickly and painlessly as possible. For example, flag the text fields where the users forgot to provide input in an online form.

Permit easy reversal of actions. Designers should aim to offer users obvious ways to reverse their actions. These reversals should be permitted at various points whether it occurs after a single action, a data entry or a whole sequence of actions. As Shneiderman states in his book:

This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options.

Support internal locus of control. Allow your users to be the initiators of actions. Give users the sense that they are in full control of events occurring in the digital space. Earn their trust as you design the system to behave as they expect.

Reduce short-term memory load. Human attention is limited and we are only capable of maintaining around five items in our short-term memory at one time. Therefore, interfaces should be as simple as possible with proper information hierarchy, and choosing recognition over recall. Recognizing something is always easier than recall because recognition involves perceiving cues that help us reach into our vast memory and allowing relevant information to surface. For example, we often find the format of multiple choice questions easier than short answer questions on a test because it only requires us to recognize the answer rather than recall it from our memory. Jakob Nielsen, a user advocate who's been called one of the "world's most influential designers" by Bloomberg Businessweek has invented several usability methods including heuristic evaluation. Recognition over recall is one of Nielsen's ten usability heuristics for interface design.

Learn How Apple Integrates Shneiderman's 8 Golden Rules

Apple Inc., a large North American technology company is a great example of how designs reflecting Shneiderman's eight golden rules can lead to successful products. The company has achieved great success in everything from their Macintosh to their mobile devices. They pride themselves in their consistent, intuitive and beautiful designs. Apple's iOS Human Interface Guidelines, shared publicly in mid-2014, offers a glimpse into how their design team has been applying design principles like Shneiderman's.

1. Consistency

"Consistency" and "Perceived Stability" are woven into the design of Apple's Mac OS. The Mac OS Menu Bar is designed to contain consistent graphic elements regardless of whether it's a version from the 1980's or the 2010's.

Author/Copyright holder: StockSnap.io Copyright terms and licence: CC0 Author/Copyright holder: StockSnap.io. Copyright terms and licence: CC0
2. Shortcuts
The look ofMac OS over time. Mac OS Menu Bar stays consistent.

As mentioned previously, Mac allows users to use a variety of keyboard shortcuts, commonly used examples include copy and paste (Command-C and Command-V), and taking screenshots (Command-Shift-3).

3. Informative Feedback
Author/Copyright holder: StockSnap.io. Copyright terms and licence: CC0
A great example of visual feedback can be seen when a file becomes "highlighted" as the user clicks on a file on a Mac desktop. Another example is when the user drags a folder across the desktop, they can see the folder represented as physically being moved as they hold down their mouse.
Mac allow users to forgo mouse-clicks by providing them with keyboard shortcuts.
Author/Copyright holder: Euphemia Wong. Copyright terms and licence: Fair Use The 'Learning' folder becomes highlighted as the user clicks on a folder on a Mac desktop.
4. Dialogue

As the user installs software to the Mac OS, an informative screen shows what step the user is currently at in their installation.
Author/Copyright holder: Euphemia Wong. Copyright terms and licence: Fair Use The folder is represented as physically being moved as the user holds down the mouse and drags a folder across the desktop.
5. Error handling

During software installation, users are gently alerted with an informative message if an error was made. It is important to recognize when to use smaller, less intrusive alerts and when to use greater alerts to warn a user depending on the severity of the error at hand. However, it is almost never acceptable to punish the user when errors are made, so be cautious and select the right tone and the right language when drafting an error message that will ultimately be read by your human-users. So don't simply leave an error-code to "handle" it!
Author/Copyright holder: Google, Inc. Copyright terms and licence: Fair Use As the user installs the program "Parallels Desktop 9", it shows that it is currently "copying files".
6. Permit reversal of actions

When users make an error in providing information during the installation process, they are allowed to go back to the previous step instead of being "punished" by having to start over.
Author/Copyright holder: Google, Inc. Copyright terms and licence: Fair Use A gentle error message is shown explaining to the user what was happening and why it was happening. It even goes further to reassure the user, telling them that they are in control (see 'Support Internal Locus of Control' below) by explaining that this is due to their own security preference choices.
7. Support internal locus of control
Author/Copyright holder: Manutencaonet Blogspot. Copyright terms and licence: CC BY 3.0
Give users the power to choose whether to continue running the program or exit from it. Mac's Activity Monitor allows the user to 'Force Quit' when a program has unexpectedly crashed.
A bad example by Windows displays an error message that uses the words "fatal" and "terminated". Such negative, unfriendly words are sure to scare away most users!
8. Reduce short-term memory load

As humans are only capable of retaining 5 items in our short term memory at one time, the Apple iPhone has stuck with allowing only 4 app icons to sit in the main menu area at the bottom of the screen. This decision does not only involve consideration of memory load but also considers consistency as well.

Author/Copyright holder: Euphemia Wong. Copyright terms and licence: Fair Use The user can undo a previous action quickly and easily.
Worksheet: How You Can Apply Shneiderman's 8 Golden Rules to Your Interface Designs
Author/Copyright holder: Euphemia Wong. Copyright terms and licence: Fair Use
Your job as a designer is to make your user's lives easier by creating intuitive, well-designed and frustration-free user interfaces. Applying Shneiderman's eight golden rules of interface design will help you do just that. Here's a worksheet for you to work through as you learn to apply these rules to your designs.
The user is able to Quit or Force Quit a program if it crashes.
The Take Away

When you follow Ben Shneiderman's 'Eight Golden Rules of Interface Design' you will design great, productive and frustration-free user interfaces just like Apple, Google, and Microsoft. From Macs and PCs to mobile devices or virtual reality and any other interactive technologies to be invented in the future, as long as your designs involve interaction between humans and an interface, these eight golden rules are paramount in the design process and not to be missed. To get started, go ahead and use the attached worksheet to learn to apply these rules to your work.

Where To Learn More:

Discover more information about Ben Shneiderman's 8 Golden Rules.
Author/Copyright holder: Brian Voo. Copyright terms and licence: Fair Use
Read more about Jakob Nielsen's 10 Usability Heuristics.

Check out some information on iOS Human Interface Guidelines from Apple.

References
Author/Copyright holder: Pixabay. Copyright terms and licence: CC0 Great examples of how Apple implements the rules of consistency (1st rule) by displaying the same bottom menu across different versions of the iOS. This is also a great example of how Apple reduces short-term memory load (8th rule). As humans are only capable of retaining 5 items in our short term memory at one time, the Apple iPhone has stuck with allowing only 4 app icons to sit in the main menu area at the bottom of the screen, regardless of whether it's the iOS 4 or the iOS 7. Author/Copyright holder: Marc Smith. Copyright terms and license: CC BY 2.0

# data[].attributes.attachment_link.title
Shneiderman's Eight Golden Rules Will Help You Design Better Interfaces

# data[].attributes.attachment_link.description
Follow Ben Shneiderman's 'Eight Golden Rules of Interface Design' if you want to design great, productive and frustration-free user interfaces.

# data[].attributes.headline
Gesalt's Laws of Perception & Use in HCI

# data[].attributes.subject
Gesalt's Laws of Perception & Use in HCI

# data[].attributes.attachment_link.readable_text
Gestalt psychology attempts to understand psychological phenomena by viewing them as organised and structured wholes rather than the sum of their constituent parts. Thus, Gestalt psychology dissociates itself from the more 'elementistic'/reductionistic/decompositional approaches to psychology like structuralism (with its tendency to analyse mental processes into elementary sensations) and it accentuates concepts like emergent properties, holism, and context.

In the 30s and 40s Gestalt psychology was applied to visual perception, most notably by Max Wertheimer, Wolfgang Köhler, and Kurt Koffka who founded the so-called gestalt approaches to form perception. Their aim was to investigate the global and holistic processes involved in perceiving structure in the environment (e.g. Sternberg 1996). More specifically, they tried to explain human perception of groups of objects and how we perceive parts of objects and form whole objects on the basis of these. The investigations in this subject crystallised into "the gestalt laws of perceptual organization." Some of these laws, which are often cited in the HCI or interaction design community, are as follows.

Law of proximity

The law of proximity posits that when we perceive a collection of objects, we will see objects close to each other as forming a group. In figure 1.A., we perceive the MTV logo and the logo for the Europe Music Awards as forming a group in the top left corner and the logos of the sponsors as forming a group in the bottom right corner. The white space separating the two groups of logos is used to indicate 'grouping', and the proximity of the logos of each groups is thus used to this end. Thus, a semantic separation of 'organisers' from 'sponsors' is achieved via structuring the graphical layout in accordance with this simple principle of perceptual organisation.

Figure 1.B is taken from Kazaa Media Desktop, where the law of proximity is used in designing the user interface of the popular peer-to-peer (P2P) software. As shown by the screen dump, the user can choose between P2P and web search. The group of radio buttons underneath are only associated with the P2P search and not the web search. To signal this association to the user, the vertical row of radio buttons are placed comparatively closer to the P2P-search radio button.

Figure 1.C is a typical textbook example, exemplifying how the law of proximity groups the items into 3 groups as opposed to 8 individual items.

Law of similarity

The law of similarity captures the idea that elements will be grouped perceptually if they are similar to each other. In the "preferences window" of the Opera browser (figure 2.A), colour is used to make the user group the menu items on the basis of their background colour. The grey background of the first four menu items thus "tie them together". Figure 2.B. is a typical textbook example of the principle of similarity, whereby we see the circles and triangles as forming four horizontal rows (or at least some configuration where triangles and circles are grouped depending on their shape). Objects similar to each other thus tend to be seen as a unit.

Law of Prägnanz (figure-ground)

Edgar Rubin, a Danish psychologist, was the first to systematically investigate the figure-ground phenomenon. The phenomenon captures the idea that in perceiving a visual field, some objects take a prominent role (the figures) while others recede into the background (the ground). The visual field is thus divided into these two basic parts. This effect is often used by smart logo makers, as figure 3.A, B, and C suggest: The logo of visitnorway.com can be viewed as both three separate elements of blue, green and navy colour. It may, however, also be viewed as a person stretching his/her arms into the air. Similarly, the logo of the Gnome Desktop Environment (figure 3.B.) can be viewed as both a "G" and a footprint. Lastly, the Macintosh logo can be viewed as a regular happy face and a happy face in profile (looking at a computer screen).

Common to these logos is that you can focus on only one "interpretation" at a time; you cannot observe both the figure and ground at the same time, as ground will become figure when shifting the focus.

It should be noted that the figure-ground is most often exemplified using the Rubin Face/Vase Illusion, named after Edgar Rubin.

Law of symmetry

The law of symmetry captures the idea that when we perceive objects we tend to perceive them as symmetrical shapes that form around their centre. Most objects can be divided in two more or less symmetrical halves and when for example we see two unconnected elements that are symmetrical, we unconsciously integrate them into one coherent object (or percept). The more alike objects are, they more they tend to be grouped.

In the above (figure 4.A), CSC Finland's logo is perceived as an integral whole although the two constituent geometrical shapes seem to be pointing in different directions and have differing colours.

A typical textbook example of the law of symmetry (figure 4.B.), consists of a configuration of a number of brackets. When perceiving the configuration, we see three pairs of symmetrical brackets as opposed to 6 individual brackets, or two pairs and two singles. This happens despite what is suggested by some of the brackets immediate proximity to each other.

Law of closure

The law of closure posits that we perceptually close up, or complete, objects that are not, in fact, complete. In the above, we perceive the letters 'I', 'B', and 'M' although the shapes we see, in fact, are only lines of white space of differing length hovering above each other. Similarly, we see the figure on Paul Thagard's book (figure 5.B.) as forming a three-dimensional box although all we see, in fact, is 24 dissimilar red shapes (count for yourself!) on a dark red background. Figure 5.C. is the typical textbook example of the law of closure; we perceive a circle and not 8 individual circles.

The Gestalt approach can be said to be a "bottom-up" theory as it starts from the bottom (the aspects of the stimuli that influence perception) and work its way up to higher-order cognitive processes. An example of another bottom-up theory (of perception) that is well-known in the HCI community is James Gibson's theory of "direct perception" (see affordances and perception).

# data[].attributes.attachment_link.description
Gestalt psychology attempts to understand psychological phenomena by viewing them as organised and structured wholes rather than the sum of their constituent parts. Thus, Gestalt psychology dissociates itself from the more 'elementistic'/reductionistic/decompositional approaches to psychology like structuralism (with its tendency to analyse mental processes into elementary sensations) and it accentuates concepts like emergent properties, holism, and context.

# data[].attributes.attachment_link.title
Human Computer Interaction - Past, Present, Future

# data[].attributes.attachment_link.description
These underlying principles must be interpreted, refined, and extended for each environment. They have their limitations, but they provide a good starting point for mobile, desktop, and web designers. The principles presented in the ensuing sections focus on increasing users' productivity by providing simplified data-entry procedures, comprehensible displays, and rapid informative feedback to increase feelings of competence, mastery, and control over the system.