Yearly Archives: 2013

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
Advertisements

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

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.

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