Category Archives: Usability

Distilling Technical Communication For CEOs

Author: J.M.

What it is: Imagine receiving well over 500 emails everyday. Even if you have a personal assistant who helps you to prioritize them, there is no escaping the task of figuring out which emails need your immediate attention, and how to rank the priority of information within the email. Many CEOs and Federal leaders are faced with this daily challenge, and the more technical the content of your email is, the less likely they are to properly digest it and quickly act on it. Information design techniques can be used to format your technical communication in a way that increases the chances of it being understood and acted on.

Why you make like it: It is very disappointing when your hard work and important message are ignored; the good news is, you can decrease the occurrence of that by simply formatting your communication in an information design-inspired layout.

How you can benefit from it: This email layout is easy to use and will increase the likelihood that the recipient will grasp your main message, regardless of how technical the topic may be.

Why I like it: After trying a wide variety of traditional paragraph formats, I developed this format based on lessons from my information design class. I used it when communicating with hundreds of leaders, and saw significant increases in audience response.

Recommended resource:  This is the basic format:

CRITICAL INFORMATION

  • Point 1
  • Point 2

IMPORTANT INFORMATION

  • Point 1
  • Point 2
  • Point 3

ADDITIONAL INFORMATION

  • Point 1
  • Point 2
  • Point 3
  • Point 4
  • Point 5
  • Point 6

Site Redesign – Let Information Design Hold Your Hand

Author: J.M.

What it is: In the likely event you encounter a poorly designed website, and have the opportunity to improve it, the field of information design has some established guidelines that you may find helpful for approaching the challenge systematically.

Why you may like it: You probably don’t need help making the assessment that a website is poorly designed. But the next questions are challenging: why is the site poorly designed? What constitutes a good design? And, how can you improve the poorly designed site? Information design lends some order to the seemingly unstandardized world of website design, and this order will give you a starting point to assess, critique, and improve homepages and subpages of websites.

How you can benefit from it: As opposed to using a trial-and-error approach, the information design tenants of website redesign will give you a clear vision of your goal and how to achieve it. Your efforts will benefit from a clear focus on the users, layout conventions, usability testing, and not making your audience think!  

Why I like it: I often conduct technical research on websites that are painfully confusing to navigate. As someone with no background in website design, I am glad to have gained a simple and effective approach to redesign that I can use for the websites I am responsible for.

Recommended resource: Steve Krug’s book Don’t Make Me Think is an invaluable resource on the information design approach to web usability:

http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758

How to Apply Nielsen’s 10 Usability Heuristics

Author: Changsoo Lee

Usability Evaluation of UMN Moodle website
Based on Nielsen’s 10 Usability Heuristics

Have you ever read Nielsen’s blog posting, “10 Usability Heuristics for User Interface Design?” (http://www.nngroup.com/articles/ten-usability-heuristics/). This blog posting summarizes the 10 most general principles for interaction design. I found that these 10 general heuristics are very useful for those who are planning to design or redesign their websites. I will apply Nielsen’s 10 usability heuristics to the UMN Moodle website to evaluate its usability. This will help readers who are already familiar with the Moodle website to understand Nielsen’s 10 usability heuristics and to comprehend how we can evaluate a website in terms of Nielsen’s heuristics.

In each section, Nielsen’s usability heuristic is introduced in italics, followed by my evaluation with visual examples associated with the heuristic of the Moodle website.

1. Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

The Moodle website shows a spinning animation while it is loading a part/function of a website, as shown in Figure 1. This helps users understand the system status, in this case the system is not ready because it is loading. You can see spinning animations at many places on the Moodle website. For example, when you try to upload attachments, you will see Figure 2 and 3, which reveals the system status.

spinning1
Figure 1. Spinning animation indicates, “I’m not ready. I’m in process”

.

spinning2
Figure 2. Users are able to recognize the attachment function is not ready and
they should wait.

.

spinning3
Figure 3. The attachment function is now ready.


2. Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

The Moodle website has a calendar on the left of the front page. As shown in Figure 4, the calendar is in the same form of the real world calendar.  Certain days are enclosed by rectangular boxes, which indicate due dates or events related to courses that students are attending. In real world, many people mark important days by circling days on their calendar. Thus, we can conclude that the uses of calendar on the Moodle website are very similar with the uses of the real world calendar. Users are able to know how to use the Moodle calendar intuitively.

calendar2 calendar1
Figure 4. Some days in the calendar are enclosed by rectangular boxes. If you move your cursor over a certain day, you will see the detailed information about the selected day.


3. User control and freedom

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

One of the most important functions of the Moodle website is the forum. Students are encouraged to write their opinions on the forums. However, many students sometimes delete by mistake what they wrote. To prevent from deleting words by mistake, many word processors provide “undo” and “redo” functions.  The forum of the Moodle website also provides these functions as shown in Figure 5.

undoredo
Figure 5. The forum on the UMN Moodle website provides “undo” and “redo” functions, so users are not afraid of deleting words by mistake


4. Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

The Moodle website provides a consistent layout at any location. In particular, the maroon- and gold- colored bar always appears on the top of the screen. The identity of the Moodle website – University of Minnesota, Driven to Discover – is displayed on the left top, under which the name of the course is shown. Right below the bar, “Breadcrumb” indicates where the user currently is. In Figure 6, the location of the user is “My Home > WRIT 5112 – 001F13 > November 12 – 18 > Discussion.” These are the conventions that are consistently provided to users in most websites.

breadcrumb
Figure 6. The top of the website always shows the identity of the website, the name of the course, and the breadcrumb.


5. Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error prone conditions or check for them and present users with a confirmation option before they commit to the action.

If you click the back button on your browser while writing a post, you will see a pop-up message that says “Are you sure you want to leave this page?” as shown in Figure 7. It asks you to select either “Stay on Page” or “Leave Page.” This pop-up message prevents you from leaving a webpage that you are working on by a click mistake.

 stayonpag
Figure 7. This useful pop-up message prevents you
from leaving the current page unintentionally.


6. Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

The Moodle website shows the number of unread posts next to a forum as shown in Figure 8, so that users can recognize how many posts are left to read. Users do not need to memorize what postings they read before.

 unreadpost
Figure 8 “Discussion” has 4 unread posts. You have 4 unread posts!


7. Flexibility and efficiency of use

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

The Moodle website does not provide shortcuts for expert users. If the website provides shortcuts like other websites, expert users will be able to navigate the Moodle quickly. Figure 9 shows the shortcuts that are given by G-Mail. Many people use shortcuts in frequently used programs or Internet services.

shortcuts
Figure 9. Shortcut list in G-Mail


8. Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

The Moodle website tends to show everything that it has. However, the users might not want to see every piece of information whenever they access the Moodle website. For example, Figure 10 shows the course webpage on the Moodle. The content of Sept. 3 – 9 is not current, but it still appears first. Also, it has lots of text. In order to access the recent content, the users should scroll the webpage all the way down. However, removing the old content is also not a good approach because there would be students who want to see the content of Sept. 3 – 9. Therefore, the Moodle website should provide a function that hides older information selectively. It will help the website maintain aesthetic and minimalist design.

 aesthetic
Figure 10. The content of Sept. 3 – 9 is not as useful as the content of Nov. 12 – 18, because today is Nov. 14. In order to read the recent information, you have to scroll the webpage all the way down.


9. Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

In case of errors, the Moodle website shows Figure 11, in which the error message is “Can not find data record in database table forum discussions.” Can you understand this? I think that many students do not understand what they did wrong when they get this error message. You can click the yellow text “More information about this error” in Figure 11 to see more information about the error. However, you will stay uninformed after clicking because the additional displayed information is still full of technical jargon as shown in Figure 12.

errormessage1
Figure 11. The error message says something. I am not sure what though.

errormessage2
Figure 12. The explanation is full of technical jargon.
The users may not be able to resolve their issues with this message.


10. Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

The Moodle website provides an excellent help function to users. This is always on the left of the website and the content of the help function is detailed, well organized and abundant. In addition, there is an email address dedicated for help as shown in Figure 13. When users are in trouble, they will be able to find ways to resolve their issues easily with the Moodle help functions.

help2 help1 
Figure 13. Helps on the Moodle website
 


Conclusion

In this blog posting, I applied Jakob Nielson’s 10 heuristics to the UMN Moodle website to evaluate its usability. The UMN Moodle website complies with most usability heuristics; however, some usability issues are identified in “Flexibility and efficiency of use”, “Aesthetic and minimalist design” and “Help users recognize, diagnose, and recover from errors” heuristic sections and they could impede the usability of the Moodle website. Therefore, it is necessary to review and revise the identified issues to improve the usability of the Moodle website.

Nielson’s 10 heuristics are one of the most widely used usability heuristics for web user interface design. (http://en.wikipedia.org/wiki/Heuristic_evaluation) I hope the explanations above help you to understand how to apply heuristics to evaluate usability of websites, and they enable you to find the strengths and the areas for improvement of your websites.

Consider Responsive Design

Author: Kevin Moe
Date: November 15, 2013

More and more people are viewing websites in other ways than on a traditional computer screen. Some are using their smart phones; others on a tablet. Some use all three at different times and in different locations.

What does this mean for you? It means that a great looking screen on a PC will not be so great as seen on a phone. Text will be illegible, causing viewers to zoom in to read it and miss other important areas of your site. For the most part, viewers will consider your site not up to today’s technology and will likely move on to one more user-friendly.

It is becoming more and more imperative that you embed responsive design into the creation of your website. Responsive design means that your website automatically adjusts itself to the type of screen it is being viewed upon. This gives the best experience for those viewing your site with a phone, tablet, or a PC.

responsive screen

ON LEFT IS ORIGINAL SITE AND ON RIGHT IS RESPONSIVE DESIGN FOR PHONE
The down side is you are basically creating three sites. And as each site becomes smaller, you have to reexamine the hierarchy of your site to determine what is safe to lose and what is necessary to keep. You also need to make concessions in your navigation; a left side navigation bar may have to be turned into a pull down menu to better fit the space.

One positive aspect is that creating a responsive design is getting easier to do. With new online tools being developed all the time, the hours of working on coding are being reduced to a few keystrokes and some cutting and pasting of developed code.

With responsive design, you won’t be losing viewers before they even look at your site. A full tutorial on how to make a responsive site is beyond the scope of this column, but there are several sites offering help:

Responsive website tutorial

Getting started with responsive web design

Making a website responsive to mobile devices

Responsive grid system

Things Not to Do with Your Text

Author: Kevin Moe
Date: November 15

As you begin to add text to your website, there are several guidelines of things you should try to avoid:

  • Avoid very long lines of text. The eye has trouble scanning when a line of text stretches all the way across the page. A good rule of thumb to remember is that lines should be two alphabets (52 characters), give or take.
  • Watch out for very short lines as well. The eye will get tired out faster if it has to continually break its stride to move to the next line.
  • Don’t change font colors to highlight a word. Viewers will expect a differently colored word to be a link to something. They may try clicking on it, breaking their concentration. Subsequently, they will become frustrated when they find the word doesn’t link to anything.
  • For the same reason, avoid underlining words to place emphasis on something in the text. Again, readers will think this is a link.
  • Use italics if you want to place special stress on a portion of your text.
  • Don’t place a lot of text at strange angles, especially sideways. A vertical line of text can engage the eye, as long as it’s a short phrase or statement used primarily for visual appeal. If it is a longer passage that is integral to site comprehension, readers will be put off as they can’t turn their screens easily.

Here are some sites with more guides on how to handle your text:

Optimal line lengths

Legibility and readability in design

Things not to do with a website

Don’t Be So Wordy – Using Brief Text to Best Effect

Author: Kevin Moe
Date: November 15, 2013

A web use study done by the Nielsen Norman Group showed that users, on average, read about 20 percent of the words on any given web page. Digging deeper, the study found that for each additional 100 words added to a web page, visitors spend only 4.4 seconds more at the site.

The Nielsen study was done in 2008. It is safe to assume that in the past five years, viewers have even less time to devote to a web page as the choices of viewing material has skyrocketed. The challenge facing information designers for the web is how to say more with less. Here are some ideas.

  • Use shorter sentence and paragraph structure. In general, visitors to your site are not on a casual stroll, nor are they looking for dense, fluffy prose. They are looking to complete a task, whether it’s finding information or learning how to do something. They don’t have time to wade through long sentences and even longer paragraphs. Break up your sentences so they only contain a single thought and keep your paragraphs to a maximum of about three or four sentences each.
  • Better yet, use bullet points to break up your text into even finer chunks of information. Readers have an easier time scanning and digesting information when it appears in a list form.
  • Use a numbered list if your information has a specific hierarchy, such as steps in a process. The numbers give an immediate cue to readers as to what they much do to complete a specific task. The numbers also serve to make sure they don’t lose their place while completing the process.
  • Begin each of your bullet points or numbered instructions with a verb. This brings parallelism into your structure (a grammatical concern) and also engages the reader in taking action.
  • Avoid using long words when shorter ones can do as you write your sentences. Why say “transcribe” when you can say “write?” Or “use” instead of “utilize?” An online thesaurus can help you find easier words to use in place of your longer ones.
  • Define hard words immediately. If you have to use jargon on your site, make sure to immediately define what these words and phrases mean so visitors don’t become momentarily confused. This confusion can cause their thoughts to stray from the points you are trying to make and ultimately cause them to leave the site.
  • Break up your text with white space or some graphics. A gray page, even if it is in bullet point form, will look daunting to most visitors.
  • Make sure your text is actually leading the reader to a goal. If your text is not directly involved in helping your viewers complete their tasks, it should be eliminated. Examples of this are unnecessary asides, too much redundancy, and what Steve Krug calls “happy talk,” which mostly consists of welcoming introductory text.
  • Visit a comparable site and see what you actually read on its pages. Chances are the stuff you ignore will be the same kinds of things that your visitors will ignore on your site.

Here are some sites with more information on how to use your web words effectively.

Writing compelling website copy

10 principles of web writing

How to write for a website

8 ways to get people to read your content

Fonts Make the Site

Author: Kevin Moe
Date: November 15, 2013

When choosing fonts for your website, you want to make sure you are using the most legible and reader-friendly font possible. There are literally thousands of fonts to choose from, and the task can seem daunting. Here are some tips for choosing the right font for you.

  • Consider sans serif. A serif font is denoted as having small lines extend from the ends of individual letters. It is considered more legible in print than sans serif, or those without lines. However, for digital media, sans serifs are preferred, as serifs can tend to look muddy on a screen, hampering their legibility.
  • Let the personality of your site dictate the font you choose. If you are aiming for a professional look, you will want to stay away from “fun” fonts like Comic Sans. Helvetica is a safe choice. It is legible and most computer users are familiar with it.
  • Study up on fonts that you are thinking of using. Comic Sans is almost universally reviled. If you had been considering it for a “fun” site, you might not be aware of the backlash it could cause from your visitors.
  • Be aware that some browsers are not compatible with certain fonts. If you have an obscure font you are longing to use, it is best to check out how it looks on several different browsers. If it works fine in Chrome but doesn’t show up in Firefox, you will have a problem.
  • Be mindful of your background. Dark type on a light background provides the best legibility for viewers. If you are thinking of reversing type to have a light font on a dark background, remember that spindly fonts will be hard to read. Consider fonts with thicker strokes in these instances.
  • Don’t overuse too many fonts on one page. Having more than three different fonts on a page looks confusing and is not aesthetically pleasing to viewers. Stick to two fonts at the most.

There are many others tips available for selecting appropriate fonts. Here are some sites you can check out:

How to select the right font for your website

5 principles for choosing and using typefaces

Choosing fonts for your responsive website

Which font should I use for my web page?