Category Archives: Scenarios

Seven Principles For Designing Website’s Navigation

Author: Changsoo Lee

Seven Principles
For Designing Website’s Navigation

Assume that your website consists of a number of webpages. How can your users locate a certain webpage that they want to read? In order to make all of the webpages on your website available to your users, you should pay attention to the navigation design on your website. This blog posting will introduce seven important principles.

  • Seven Principles
    1. Target your potential users
    2. Set the functionality of your website
    3. Use consistent layouts
    4. Take advantage of colors
    5. Provide structured navigation
    6. Provide search functions
    7. Test your navigation many times

 

1. Target your potential users

When you design the navigation for your website, you should know who your potential users are. By creating personas and use-scenarios, you can imagine the potential users and their activities related to your website. In addition, you can obtain information about your potential users’ characteristics such as average age, gender, education, and purpose. You can reflect on these factors to create your navigation.

Depending on your target users, navigation designs can differ. Below are some examples.

(1) GNU Operating System (http://www.gnu.org) – This website is for software engineers. The navigation is written only in pure text, which does not have any non-essential graphics.

 gnu

(2) PBS Kids (http://pbskids.org) – The target users are children. The navigation consists of cartoon characters. Children who know the cartoon figures are able to locate television programs that they want to see.

pbs

(3) Everything Girl (http://www.everythinggirl.com) – This website is for young women. For the target users, the navigation contains texts and pretty graphics.

everythinggirl

  

2. Set the functionality of your website

The navigation should be in a different form according to the functionality of your website. If your website sells items that are well categorized, you can consider using a hierarchical or multi-stage navigation style. However, if your website provides up-to-date news or information, a flat or single-stage navigation will be better for your users.

(1) Amazon (http://www.amazon.com) – Amazon has a hierarchical navigation design. If your potential user wants to buy a camera, he or she will be likely to click the “Electronics & Computers” category. This hierarchical navigation helps users locate items that they want to find easily.

amazon

(2) The New York Times (http://www.nytimes.com) – News contents changes everyday. Thus, users do not expect news websites to have hierarchical navigations. When your user clicks “U.S.,” he or she probably wants to see the important news about the U.S., not sub-categories relating to specific states.

nytimes

If you need more detailed information about the advantages and pitfalls of the organization style, I recommend you to read this blog posting, “Flat vs. Deep Website Hierarchies (http://www.nngroup.com/articles/flat-vs-deep-hierarchy/).”

3. Use consistent layouts

The navigation should be displayed at the same position throughout the whole website to helps users locate the same navigation at any webpage. In addition, the navigation that is displayed at the same position helps users distinguish the website content apart from the navigation area.

(1) USA Today: Money (http://www.usatoday.com/money/) – The above black bar part is the navigation area. When a user clicks a category, the content below the navigation area changes corresponding to the clicked category, but the navigation area remains same so that users are able to distinguish the content, which they are interested in, from the navigation area.

usatoday1

(2) USA Today: Tech (http://www.usatoday.com/tech/) – Users are able to distinguish the content from the navigation easily because the website maintains the consistent navigation area at any webpage.

usatoday2

4. Take advantage of colors

When you design the navigation of your website, you can put colors on the texts of the navigation, which corresponds to the color of webpages. For example, the navigation of the Guardian website has green-colored “Sport” and blue-colored “Travel” texts. The sport and travel sections have corresponding greenish and bluish webpages, respectively. Please, see the below examples.

(1) The Guardian (http://www.theguardian.com/us) – Take a look at the text colors on the navigation.

guardian1

(2) The Guardian: Sport (http://www.theguardian.com/uk/sport) – The text “Sports” on the navigation is green and the sport section also consists of greenish webpages.

guardian2

(3) The Guardian: Travel (http://www.theguardian.com/travel) – The text “Travel” on the navigation is blue and the travel section also consists of bluish webpages.

guardian3

5. Provide structured navigation

Users do not want to be lost on a website. Therefore, it is important for them to know where they are on the website. I would like to recommend adding a “Breadcrumb” on your website for providing structured navigation experience to your users.

(1) Samsung (http://www.samsung.com/us/mobile/cell-phones/SCH-R970ZWAUSC) – The breadcrumb says “Home > Cell Phones > US Cellular > SCH-R970”, which indicates the user’s current location.

samsung

(2) Office Depot (http://www.officedepot.com/a/products/333465/HP-Office-Paper-8-12-x/) – The breadcrumb says “Home > Paper > Copy & Printer Paper > Copy & Multipurpose Paper > Product Details”, which indicates the user’s current location.

officedepot

6. Provide search functions

If your website contains too many webpages, you should consider adding search function on your website to help with the navigation. Many of the website mentioned above such as GNU Operating System, Amazon, the New York Time, the Guardian, USA Today, Samsung, and Office Depot have search functions. If your website provides a strong search function, your users will not miss any information that they want to find from your website. A search function makes content fast and easy to find with a search function

7. Test your navigation many times

By conducting usability tests on your navigation, you can find what elements make your users uncomfortable. When your users start to feel unintuitive and uncomfortable from your website and navigation, they will click the back button immediately to escape from your website, rather than learning how to use your website and navigation system. Thus, it is the most important to find the elements that cause your users to be uncomfortable and to correct them quickly.

In this posting, I explained seven principles for designing navigation. If you keep these in your mind, you could design a navigation that enable users find information that they want to obtain on your website.

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.

Get to Know Your Audience through Personas and Scenarios

Author: Kevin Moe
Date: November 15, 2013

The number one rule of writing in any context is “consider your audience.” In web writing, you want to make sure you are providing the content that your viewer needs in order to complete some task. One of the best ways to know your audience in these instances is to craft your own. For the most part, you have an idea of the demographic characteristics of your target audience. It is an easy step from this to create a sample user, also known as a persona.

A persona is a biographical sketch of a typical user of your site. It can be as long or as short as you wish, but the more detailed it is, the easier it will be for you to picture this person and understand what his or her drives and motivations are. You will want to add in detail that at first doesn’t seem relevant to your site at all, such as family life, hobbies, and other background information. As you design your site, you can recall these facts to better gauge your person’s time needs, attention to detail, and other characteristics that will help you streamline your site to his or her needs.

Here are some examples of personas:

Mike is a 35-year-old man who lives in an apartment in a major metropolitan area. He prefers city living to the suburbs as he feels he is more cosmopolitan in nature. He is a staunch believer in multiculturalism and contributes to many social causes – some with monetary donations and some with his time. He volunteers at a soup kitchen one weekend a month. He is married and has no children or pets. His wife works as a night nurse at a local hospital. His job is as a marketing manager at an area non-profit that specializes in housing for the homeless. In his spare time, he likes to visit areas bookstores and listen to MPR.

Betty is 25 years old and is newly out of college, where she received a degree in architectural design. She lived at home while going to school as her parents’ house was not too far from the college. She is still living at home at the present, but is anxious to find a full-time job and get her own place. For now, she is taking extra hours at a retail store which she worked at while attending class. She enjoys cooking and going to an area gym. She is not seeing anyone right now, but she has a tight circle of college friends who she hangs out with at least once a week.

Once you have your personas sketched out, you next need to develop scenarios, or the reasons these people are visiting your site. Understanding the tasks these people are seeking to do will help you create and organize your site in a user-centered manner.

Here are some examples of scenarios based on the given personas for reasons why they might check out this blog:

Mike has been charged with updating his non-profit company’s website. Because the company is small, it doesn’t have much of a budget to contract out the design work. Mike is looking to compile information for best practices in information design and he hopes to be able to find them all in one location without having to do a lot of searching all over the internet. He doesn’t have a lot of spare time and needs something easy to grasp as he is not confident in web design.

Betty is looking to create an online portfolio of her architectural design work to attract potential employers. She is looking to find information on how to best portray her work using professional-looking information design standards. She is confident on her computer abilities – much of her classwork took place in the digital realm. Her real need is how to present her work in the most user-friendly was possible.

Using personas and scenarios like these will go a long way in helping you “consider the audience” of your website.

Here are some sites with more information on personas and scenarios:

What are use scenarios and personas?

Introduction to building and using personas and scenarios

Using personas and scenarios in web design

Why personas and scenarios result in great design

How to design a persona-centric website experience