2. Applying User Centered Design Principles to Library Websites
This section is where we will discuss applying design principles to the various parts of a library website: home pages, subject guides, search, navigation, etc. This is where we will make most direct recommendations related to how library websites should work.
Budiu, Raluca. (2014). Maximize the Content-to-Chrome Ratio, Not the Amount of Content on Screen. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/content-chrome-ratio/.
Clark, Katie and Smith, Jane McCleneghan. (2007). Dream Catcher: Capturing Student-Inspired Ideas for the Libraries' Web site. in Studying students: The undergraduate research project at the University of Rochester. Assoc of Cllge & Rsrch Libr. http://www.ala.org/acrl/sites/ala.org.acrl/files/content/publications/booksanddigitalresources/digital/Foster-Gibbons_cmpd.pdf
Galitz, Wilbert O. (2007). The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques. Indianapolis, IN: Wiley.
Balance... is stabilization or equilibrium, a midway center of suspension. The design elements have an equal weight, left to right, top to bottom. The opposite of balance is instability: the design elements seemingly ready to topple over.
p142
Regularity... is a uniformity of elements based on some principle or plan. Regularity in screen design is archived by establishing standard and consistently spaced column and row starting points for screen elements. It is also achieved by using elements similar in size, shape, color, and spacing.
p144
"Line borders, or rules, can greatly enhance a screen. Research has found that information displayed with a border around it is easier to read, better in appearance, and preferable...
Use lines and borders sparingly. Too many lines and borders on a screen also create clutter and can be distracting..."
In Web page design, be cautious in using horizontal lines as separators between page sections. Users may assume they have reached the bottom of the page, missing what follows. Separator lines may also make the screen look more cluttered.
p158-159
Generally, use shorter pages for
- Homepages.
- Navigation pages.
- Pages needing to be quickly browsed or read online and content quickly found.
- Situations where a page will be loading over slow modems and all pages are not needed.
Generally, use longer pages for
- Content pages where uninterrupted reading is desirable.
- Content pages in which an entire concept must be understood without interruption.
- To match the structure of a paper counterpart.
- To make pages more convenient to download.
- To make pages more convenient to print.
- To simplify page maintenance.
p240-241
Krug, Steve. (2014). Don't Make Me Think, Revisited: a Common Sense Approach to Web Usability. Berkeley, CA: New Riders.
One of the most valuable bits of real estate is the space right next to the Site ID. When we see a phrase that's visually connected to the ID, we know it's meant to be a tagline, and so we read it as a description of the whole site.
p93
On a Web site, the tagline appears right below, above, or next to the Site ID. Taglines are a very efficient way to get your message across, because they're the one place on the page where users most expect to find a concise statement of the site's purpose.
p95
Loranger, Hoa. (2013). Fight Against “Right-Rail Blindness”. In Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/fight-right-rail-blindness/.
Nielsen, Jakob. (2012). Computer Screens Getting Bigger. In Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/computer-screens-getting-bigger/.
Nielsen, Jakob. (2013). User Expertise Stagnates at Lower Levels. In Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/stagnating-expertise/.
Nielsen, Jakob and Loranger, Hoa. (2006). Prioritizing Web Usability. Berkeley, CA: New Riders.
In general, it’s safe to design for limited scrolling as long as you show the most important information first. But some Web sites have taken cautionary advice about scrolling to the opposite extreme and made their pages non-scrollable. This can be damaging, leading to pages with only navigation and no content. Better to provide the right visual cues and context to make users see the value of scrolling. The placement of critical elements on the page can dictate whether people scroll or not.
Section "Should You Design For Scrolling?"
There are situations when longer pages are better than short, fragmented ones; it’s advantageous then to have highly related information together. Having a continuous article appear on one page makes the information feel more cohesive and mitigates unnecessary work. Scrolling requires less effort than clicking Next, Next, Next. Of course, you want to layer extremely long detailed content to utilize hyperlinks. This is what the Web is good for.
Section "Should You Design For Scrolling?"
- If people expect something to be in a particular place, they will not look for that item elsewhere or scroll to find it.
- If there’s white space at the bottom of the viewable area of the screen, people usually assume that’s the end of the page and don’t scroll any farther, even when their browser scroll bar indicates otherwise
- People interpret ad-like elements that appear immediately above the fold as the end of a page because ads are commonly placed in peripheral areas of the page
- Placing indicators such as headers or content that can be seen just above the bottom of the screen strongly suggests that there’s more content below
Section "Should You Design For Scrolling?"
- Trying to making an object larger, bolder, and brighter so that it will be noticed can backfire because these characteristics are often associated with advertisements—and we know people want to divert their attention away from anything that looks like an ad.
Section "Satisfy Your Users' Expectations"
Nielsen, Jakob and Pernice, Kara. (2010). Eyetracking Web Usability. Berkeley, CA: New Riders.
There is no universal way that people look at Web pages. We cannot say, for example, that they look first in the upper-left corner or finish in the middle of the page... People are more likely to have similar look patterns if they are attempting to do the same task on the same Web site... But even in these similar situations, the way people look at the features such as global navigation still varies.
p50
Generally users look for high-priority information in the upper left of the content area.
p97
Schade, Amy. (2015). The Fold Manifesto: Why the Page Fold Still Matters. In Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/page-fold-manifesto/.
Schlatter, Tania & Levinson, Deborah. (2013). Visual Usability. Waltham, MA: Elsevier.
The paradox of white space is that blank areas emphasize busy areas. White space between elements provides a place for the eye to rest, and draws the eye to elements isolated by the most white space. The more white space, the more attention is drawn.
...
The fewer elements on a screen, the more expressive white space can be, but the more elements you add, the more “work” white space has to help people know what they can do and how to do it. The trick to creating dense but appealing screens is to use white space to create clear groups and establish hierarchy so that screens look approachable.
Ch4, section "The language of layout"
The maturity of the Internet, as well as the trend toward “mobile-first” design, has chipped away at older conventions about never making users scroll. After more than 20 years of web use, people are accustomed to scrolling,2 and mobile users expect to do it, if only because their smaller screen size relative to desktop and laptop monitors means scrolling is practically inevitable.
With scrolling now considered routine, the old, newspaper-based concept of “the fold”—the point at which the viewport ends, and the user must begin to scroll to see more—becomes less important. Although Jakob Nielsen’s eye-tracking research shows most people spend more time looking at items above the fold on a 1024 × 768 screen, people still viewed content below the fold, skipping around to find other items that attracted them. This indicates that while it’s still necessary to put the most important information at the top of a screen—as one would expect in a solid hierarchy—users will scroll to find out more. Incorporating design elements to suggest there’s more to view lower down (or horizontally), such as images designed to cut off midway at likely screen breakpoints, helps encourage exploration.
...
Even after you’ve determined how many screens you need, you may still find you have to fit a lot of information on a single screen, not all of which may be immediately relevant to your users. This is where the user interface principle of progressive disclosure comes into play—displaying information on demand, as people need or want to view it, as opposed to simply displaying it all the time... Tabs, accordions, panels, and other user interface widgets that allow content to be shown as necessary support information hierarchy; hidden content is automatically a lower priority than content shown by default.
Ch4, section "One big bite, or a few little ones?"
Budiu, Raluca. (2014). Search Is Not Enough: Synergy Between Navigation and Search. In Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/search-not-enough/.
Cardello, Jennifer. (2014). The Difference Between Information Architecture (IA) and Navigation. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/ia-vs-navigation/.
Cardello, Jennifer and Whitenton, Kathryn. (2014). Killing Off the Global Navigation: One Trend to Avoid. In Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/killing-global-navigation-one-trend-avoid/.
Galitz, Wilbert O. (2007). The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques. Indianapolis, IN: Wiley.
Global or site-wide navigation elements provide access to the site's total scope or categories of available information. An evolving standard in design is to locate the global navigation elements horizontally at a page's top...
Local, specific, and contextual navigation elements within the category or topical area being presented are typically displayed in a column array down the left page side.
p757
Hulseberg, A., & Monson, S. (2011). Investigating a Student-Driven Taxonomy for Library Website Design. Journal Of Electronic Resources Librarianship, 23(4), 361-378.
Krug, Steve. (2014). Don't Make Me Think, Revisited: a Common Sense Approach to Web Usability. Berkeley, CA: New Riders.
Two of the purposes of navigation are fairly obvious: to help us find whatever it is we're looking for and to tell us where we are. But navigation has some other equally important--and easily overlooked--functions. It tells us what's here... It tells us how to use the site... It gives us confidence in the people who built it.
p63
Done right, Breadcrumbs are self-explanatory, they don't take up much room, and they provide a convenient, consistent way to do two of the things you need to do most often: back up a level or go Home... Put them at the top... Use '>' between levels... Boldface the last item.
p80
Tabs are one of the very few cases where using a physical metaphor in a user interface actually works... They're self-evident... They're hard to miss... They're slick... If you're going to use tabs, though, you have to do them right. For tabs to work to full effect, the graphics have to create the visual illusion that the active tab is in front of the other tabs... To create this illusion, the active tab needs to be a different color or contrasting shade, and it has to physically connect with the space below it.
p81
Imagine that you've been blindfolded and locked in the trunk of a car, then driven around for a while and dumped on a page somewhere deep in the bowels of a Web site. If the page is well designed, when your vision clears you should be able to answer these questions without hesitation: What site is this? (Site ID) What page am I on? (Page name) What are the major sections of this site? (Sections) What are my options at this level? (Local navigation) Where am I in the scheme of things? ('You are here' indicators) How can I search?
p82
Morville, Peter and Rosenfeld, Louis. (2006). Navigation Systems. In Information Architecture for the World Wide Web. Cambridge: O'Reilly.
Nielsen, Jakob. (2009). Mega Menus Work Well for Site Navigation. In Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/mega-menus-work-well/.
Nielsen, Jakob. (2013). User Expertise Stagnates at Lower Levels. In Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/stagnating-expertise/.
Nielsen, Jakob and Loranger, Hoa. (2006). Prioritizing Web Usability. Berkeley, CA: New Riders.
When navigation changes drastically from one page to the next, people must shift their attention from using the site to figuring out how to use it. Web sites with unreliable navigation make users uncertain and hesitant.
Large Web sites comprised of subsites or affiliated sites are notorious for committing this crime. Each subsite is usually created by a different group and has its own organization and look-and-feel. When the subsites are linked together haphazardly, user experience is atrocious.
Section "Navigation: Be Consistent"
Nielsen, Jakob and Pernice, Kara. (2010). Eyetracking Web Usability. Berkeley, CA: New Riders.
It is usually not a good idea to make the main menu change when people select a submenu. Users almost always miss these discreet changes because they are no longer focused on the main navigation.
p115
Pernice, Kara. (2014). A Link is a Promise. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/link-promise/.
Pernice, Kara. (2014). Quicklinks: Bad Label or Indicative of Usability Issues. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/quicklinks-label-intranet/.
Tidwell, Jenifer. (2010). Designing Interfaces. Sebastapol, CA: O'Reilly.
If you’re already using menus in your global navigation, you might consider expanding them to Fat Menus if surfacing more links makes the content more attractive to casual browsers. People won’t have to drill down into categories and subcategories of your site hierarchy in order to discover interesting pages—they’ll see them there, right up front.
ch3 section "The Patterns"
If there are too many tabs to fit in a narrow space, you could do one of several things: shorten the labels with an ellipsis (and thus make each tab narrower), or use Carousel-like arrow buttons to scroll the tabs. You could also put the tab labels in a lefthand column, instead of putting them on top. Never double-row the tabs.
ch4 section "The Patterns"
Whitenton, Katherine. (2013). Flat vs. Deep Website Hierarchies. In Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/flat-vs-deep-hierarchy/.
Whitenton, Katherine. (2015). Top 3 IA Questions about Navigation Menus. In Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/ia-questions-navigation-menus/.
Galitz, Wilbert O. (2007). The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques. Indianapolis, IN: Wiley.
Limit the homepage to one screen whenever possible. All important elements should be viewable without scrolling so they will not be missed. Scrolling is time-consuming, people may not be aware that scrolling is required, or people may simply conclude that what they can see is not important so what is hidden must not be important, too. Elements of less importance and those not vital to site use may be included below the visible area, however.
p244
Krug, Steve. (2014). Don't Make Me Think, Revisited: a Common Sense Approach to Web Usability. Berkeley, CA: New Riders.
Given everything the Home page has to accomplish, if a site is at all complex even the best Home page design can't do it all... The one thing you can't afford to lose in the shuffle--and the thing that most often gets lost--is conveying the big picture.
p88
As quickly and clearly as possible, the Home page needs to answer the four questions I have in my head when I enter a new site for the first time: What is this? What do they have here? What can I do here? Why should I be here--and not somewhere else?
p89
When I sit in on meetings about Home page design, I often find the phrase 'killing the golden goose' running through my head. The worst of these behaviors, of course, is the tendency to try to promote everything... It's a perfect example of the tragedy of the commons... Preserving the Home page from promotional overload requires constant bigilance, since it usually happens gradually, with the slow, inexorable addition of just...one...more...thing.
p99-100
Nielsen, Jakob. (2001). 113 Design Guidelines for Homepage Usability. In Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/.
Nielsen, Jakob. (2002). Top 10 Guidelines for Homepage Usability. In Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability/.
Farrell, Susan. (2014). FAQs Still Deliver Great Value. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/faqs-deliver-value/.
Farrell, Susan. (2015). An FAQ’s User Experience Deconstructed. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/faq-ux-deconstructed/
Krug, Steve. (2014). Don't Make Me Think, Revisited: a Common Sense Approach to Web Usability. Berkeley, CA: New Riders.
One of the great enemies of easy-to-grasp pages is visual noise... There are really three different kinds of noise. Shouting. When everything on the page is clamoring for your attention, the effect can be overwhelming... Disorganization. Some pages look like a room that's been ransacked, with things strewn everywhere... Clutter. We've all seen pages--especially Home pages--that just have too much stuff... You end up with what engineers call a low signal-to-noise ratio: Lots of noise, not much information, and the noise obscures the useful stuff.
p38-39
Use plenty of headings. Well-written, thoughtful headings interspersed in the text act as an informal outline or table of contents for a page.. They help you decide which parts to read, scan, or skip. In general, you'll want to use more headings than you'd think and put more time into writing them.
p39
Keep paragraphs short. Long paragraphs confront the reader with what Caroline Jarrett and Ginny Redish call a 'wall of words.' They're daunting, they make it harder for readers to keep their place, and they're harder to scan than a series of shorter paragraphs... Even single-sentence paragraphs are fine.
p40
Use bulleted lists. Think of it this way: Almost anything that can be a bulleted list probably should be.
p40
Another major source of needless words is instructions. The main thing you need to know about instructions is that no one is going to read them--at least not until after repeated attempts at 'muddling through' have failed... Your objective should always be to eliminate instructions entirely by making everything self-explanatory, or as close to it as possible.
p51
Nielson, Jakob. (2011). Mini-IA: Structuring the Information About a Concept. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/mini-ia-structuring-information/
Nielsen, Jakob and Loranger, Hoa. (2006). Prioritizing Web Usability. Berkeley, CA: New Riders.
In general, it’s safe to design for limited scrolling as long as you show the most important information first. But some Web sites have taken cautionary advice about scrolling to the opposite extreme and made their pages non-scrollable. This can be damaging, leading to pages with only navigation and no content. Better to provide the right visual cues and context to make users see the value of scrolling. The placement of critical elements on the page can dictate whether people scroll or not.
Section "Should You Design For Scrolling?"
There are situations when longer pages are better than short, fragmented ones; it’s advantageous then to have highly related information together. Having a continuous article appear on one page makes the information feel more cohesive and mitigates unnecessary work. Scrolling requires less effort than clicking Next, Next, Next. Of course, you want to layer extremely long detailed content to utilize hyperlinks. This is what the Web is good for.
Section "Should You Design For Scrolling?"
Nielsen, Jakob and Loranger, Hoa. (2006). Prioritizing Web Usability. Berkeley, CA: New Riders.
If people are able to quickly recognize cues that point them to the targeted information, they’ll happily follow the trail. However, if they don’t immediately see anything of significance or feel overwhelmed, they’ll abandon that path (or page) and try something else.
Section "Understanding How Web Users Read"
- Main headings should appear larger and bolder than the body text.
- Subheadings should be smaller than main headings but still stand out from body text.
- Left-justify headings and set in sentence case or title case; they are easier to read than centered headings set in all capital letters.
Section "Formatting Text for Readability"
Vertical lists are more effective than run-in lists at conveying a sequence of events or ideas. Studies comparing the two show that they can improve usability by 47 percent.
Section "Formatting Text for Readability"
Short paragraphs surrounded by white space appear more approachable than a solid wall of text. Information shortened into digestible pieces facilitates scanning by allowing people to see natural breaks and absorb the information in manageable pieces.
There are no hard-and-fast rules about how long or short paragraphs should be, although it’s helpful to keep them under five sentences.
Section "Formatting Text for Readability"
Galitz, Wilbert O. (2007). The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques. Indianapolis, IN: Wiley.
Never rely on color as the only way of identifying a screen element or process... When developing a color strategy, always consider how spatial formatting, highlighting, and messages may also be useful and employ these structural and coding methods as well.
p703
Design for monochrome first, or in shades of black, white, and gray. A screen should be as capable of being effectively used as if it were located in a monochrome environment.
p704
Use color sparingly because it has such a high attention-getting quality. Only enough colors to achieve the design objective should be used. More colors increase response times, increase the chance of errors due to color confusion, and increase the chance of the Christmas tree effect. If two colors serve the need, use two colors. If three colors are needed, by all means use three. A way to minimize the need for too many colors is not to use color in situations where other identification methods are available. A menu bar, for example, will always be located at the top of the screen. Its position and structure will identify it as a menu bar. To color-code it would be redundant.
p704
The most recommended text color is black presented on a light-colored background of low-intensity, either off-white or light fray. Bright white backgrounds should be avoided because of the harsh contrast between the dark text and the background.
p708
Hoekman, Robert. (2011). Designing the Obvious: A Common Sense Approach to Web and Mobile Application Design. Berkeley, CA: New Riders.
First, never use different fonts from screen to screen. Make a decision and stick with it. This is the simplest way to ensure consistency from page to page within an application.
Second, choose one typeface for the big, pop-off-the-page elements like headings, and choose a second typeface for the rest of the content. These two typefaces should differ enough from each other that the difference appears intentional. If the typefaces are too similar, headings and such can blend too easily into the rest of the page, and the meaning otherwise implied by clearly distinct typefaces can be lost.
Third, never use more than two or three different fonts. In fact, three is often too many. Multiple typefaces on a single screen can be disorienting, making it harder for the user to easily find what she is looking for.
Finally, limit the sizes and colors used for fonts. Of course, headings should be larger than body text, and body text should be larger than footer content, but avoid using different font sizes within body text. Also, use as few colors as possible. Choose colors for headings, body text, footers, links, visited links, active links, and so on, and use those choices for every page.
ch9, section Design for Uniformity
Loranger, Hoa. (2015). Beyond Blue Links: Making Clickable Elements Recognizable. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/clickable-elements/.
Nielsen, Jakob. (2004). Guidelines for Visualizing Links. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/guidelines-for-visualizing-links/.
Nielsen, Jakob. (2007). Fancy Formatting, Fancy Words = Looks Like a Promotion = Ignored. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/fancy-formatting-looks-like-an-ad/.
Nielsen, Jakob. (2012). Serif vs. Sans-Serif Fonts for HD Screens. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/serif-vs-sans-serif-fonts-hd-screens/.
Nielsen, Jakob and Loranger, Hoa. (2006). Prioritizing Web Usability. Berkeley, CA: New Riders.
We recommend setting text size using a relative size scheme (such as percentages or em values) instead of fixed type sizes. For example, don’t specify that a headline should appear in 14-point type. Say that it should be 140 percent of the size of the body text. Then if users enlarge the text, the headline will still look bigger than the rest of the text. A liquid design allows text to be scaled relative to the viewer’s browser settings and screen resolution while still letting designers dictate the structure of the page.
Ch7, section "Relative Specifications"
Comic Sans MS: ... Not appropriate for more serious or professional Web sites.
Ch7, section "Choosing Fonts"
People are annoyed by blinking or moving text. They want to control their own reading pace, and dynamic text takes that control away.
Ch7, Section "Moving Text"
Nielsen, Jakob and Pernice, Kara. (2010). Eyetracking Web Usability. Berkeley, CA: New Riders.
When users don't see an important feature on a site, a desperate designer's knee-jerk reaction is often to change the color to something shocking--usually red--or make it flash... The real solution is a well-defined and prioritized layout.
p93
Schlatter, Tania & Levinson, Deborah. (2013). Visual Usability. Waltham, MA: Elsevier.
Designers and typographers have argued for years about whether serif or sans serif typefaces are more legible in print or onscreen, but research is so inconclusive that we recommend simply using whichever typeface feels most appropriate for the application you’re designing... Assuming you’ve typeset your text at a readable size, in readable colors, and so on, it won’t matter whether it has serifs or not.
Ch5, section "The language of type"
Body typefaces are specifically designed for typesetting body content, whether in a book, on a web page, or in content displayed in a mobile application. These typefaces promote readability—literally, ease of reading—at a wide range of sizes, and while each typeface has its own personality, they don’t generally “shout” at you the way a display typeface’s personality will.
Most standard web and mobile font families, such as Arial, Verdana, and Georgia, are body text typefaces. Your body text typeface is part of your application’s personality, and the typeface you choose reinforces that personality. Keep in mind that body text should never be bold unless you’re emphasizing a few words.
Display typefaces, also known as decorative typefaces, are designed to call attention through unique design... They’re expressive, meaning they have stronger visual personalities than body typefaces. Used judiciously as an accent to contrast the body font, they’re great for limited, strong statements about an application’s personality.6 The more unique and expressive the display font, the less of it should be used...
Display typefaces are for headers and headlines, not for body text. They may be designed to only show off certain details at minimum sizes, and when used below that size, can look cramped and muddy. Not every application needs a display typeface
Ch5, section "The language of type"
Book and roman weights of body text typefaces are most appropriate for reading long blocks of content, while bolder weights should be reserved for headers and other text that requires special emphasis, such as a selected link. Limit use of boldface to only where absolutely necessary: it can "shout at readers, putting them on edge and driving them away."
Ch5, section "Typesetting considerations"
At a standard body text size of 12 points or pixels, the ideal column width might range between roughly 40–90 characters per line.
Ch5, section "Typesetting considerations"
When setting body text, we recommend aligning it ragged left by default—that is, with varied line ending points within a given column width. Typically, this is a browser’s default view anyway, the reason being that it allows consistent space between words, which makes text easier to read. Justified text, which spaces out text to force straight column margins at right and left, creates neater margins (and thus is popular on layouts with highly visible grids, such as newspapers), but the varied amount of word spacing resulting from forcing text into these margins can make it harder to read. Ragged-right text, or text with varied line beginnings instead of endings, is rarely used for body text in functional applications, although its consistent right margin makes it a good choice for typesetting form field labels.
Ch5, section "Typesetting considerations"
Your application’s color palette should include at least one type color, usually black, dark gray, or dark blue. Legibility and contrast with the background are paramount in selecting a type color. You may also need to account for how type looks when it’s reversed—displayed in white on a tinted background—or when colored type appears on a different color background.
Ch5, section "Typesetting considerations"
U.S. Dept. of Health and Human Services. The Research-Based Web Design & Usability Guidelines, Enlarged/Expanded edition. Washington: U.S. Government Printing Office, 2006. Retrieved from http://guidelines.usability.gov/.
Research has shown that fonts smaller than 12 points elicit slower reading performance from users. For users over age 65, it may be better to use at least fourteen-point fonts. Never use less than nine-point font on a Web site.
http://guidelines.usability.gov/guidelines/113
Bedford, Aurora. (2014). Icon Usability. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/icon-usability/.
Loranger, Hoa. (2015). Beyond Blue Links: Making Clickable Elements Recognizable. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/clickable-elements/.
Schlatter, Tania & Levinson, Deborah. (2013). Visual Usability. Waltham, MA: Elsevier.
Studies suggest that photography isn’t useful unless it’s specific in its subject matter and directly related to text content.
Ch7, section "Types of imagery and uses"
Budiu, Raluca. (2015). Accordions on Mobile. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/mobile-accordions/
Krug, Steve. (2014). Don't Make Me Think, Revisited: a Common Sense Approach to Web Usability. Berkeley, CA: New Riders.
When you can't avoid giving me a difficult choice, you need to go out of your way to give me as much guidance as I need--but no more. This guidance works best when it's: Brief: The smallest amount of information that will help me. Timely: Placed so I encounter it exactly when I need it. Unavoidable: Formatted in a way that ensures that I'll notice it. Examples are tips adjacent to form fields.
p47
Since a large part of what people are doing on the Web is looking for the next thing to click, it's important to make it easy to tell what's clickable.
p37
Nielsen, Jakob. (2013). Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/auto-forwarding/.
Nielsen, Jakob. (2013). Explicitly State the Difference Between Options. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/explicit-differences/.
Nielsen, Jakob and Pernice, Kara. (2010). Eyetracking Web Usability. Berkeley, CA: New Riders.
Images people look at have the following characteristics:
- Are high contrast and high quality (crisp and colorful)
- Are cropped, rather than overly reduced, when necessary to fit a small space
- Are not excessively detailed: easy to interpret, almost iconic
- Are highly related to the content of the page
- Possess magnetic features
Features that make images magnetic include the following:
- Smiling and approachable faces
- People looking at (or at least facing) the camera
- Sexual anatomy (and sexy bodies)
- Appetizing food
- Clear instructions or information
People ignore images that have the following characteristics:
- Are low contrast and low quality
- Are too busy for the space
- Look like advertisements
- Are not related to content on the page or only slightly related to it
- Are boring
- Include people or objects that are generic or obvious stock art
- Are cold, fake, or too polished
p197
Designers should beware of using images that accompany text but don't do anything to enhance it. We believe that these images should not be on a page...
A designer might ask, 'Well then, what would we put in that empty space?'
Our recommendation: nothing. Use white space. Alternatively, decrease page length or increase the default size of the text on the rest of the page."
p203-204
Nielsen Norman Group. (2013). Form Design Quick Fix: Group Form Elements Effectively Using White Space. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/form-design-white-space/.
Schlatter, Tania & Levinson, Deborah. (2013). Visual Usability. Waltham, MA: Elsevier.
An affordance is an implication: an interface control implies behaviors based on a person’s impressions of it. The control’s shape, symbols (e.g., a down arrow or plus sign), color, shading, position, motion, and other visual cues, along with context, affect how people interpret what they see and what they think the control will do.
Ch8, section "Controls and Affordances"
- As people type in active fields, highlight the fields with a border, tint, or combination of both.
- Use the same graphic style for all buttons, icons, and other points of interaction in your application so that people learn that part of your visual language.
- Don’t treat read-only elements the same way as interactive ones. People will assume they can manipulate controls unless they receive clear signals that something is different. Simply hiding a form field’s border is usually enough to provide cues that a read-only field cannot be manipulated.
Ch8, section "Avoid common mistakes"
Put feedback where the user is looking, ideally near the control itself. If multiple controls must be manipulated to perform a task, make the feedback part of the results display.
Ch8, section "Avoid common mistakes"
For the next step in design treatments, look into JavaScript frameworks, such as jQuery or extJS, that allow customization of checkboxes, radio buttons, dropdowns, and other elements difficult to style consistently with CSS alone. On mobile devices, create custom styles for your controls.
Ch8, section "Avoid common mistakes"
Sherwin, Katie. (2014). Placeholders in Form Fields Are Harmful. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/form-design-placeholders/.
Budiu, Raluca. (2014). Search Is Not Enough: Synergy Between Navigation and Search. In Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/search-not-enough/.
Krug, Steve. (2014). Don't Make Me Think, Revisited: a Common Sense Approach to Web Usability. Berkeley, CA: New Riders.
It's a simple formula: a box, a button, and either the word 'Search' or the universally recognized magnifying glass icon... In particular, avoid Fancy Wording. They'll be looking for the word 'Search,' so use the word Search, not Find, Quick Find, Quick Search, or Keyword Search.
p71
If there is any possibility of confusion about the scope of the search... by all means spell it out. But think carefully before giving me options to limit the scope (to search just the current section of the site, for instance). And also be wary of providing options for how I specify what I'm searching for (search by title or by author, for instance, or search by part number or by product name). I seldom see a case where the potential payoff for adding options to the persistent search box is worth the cost of making me figure out what the options are and whether I need to use them...
If you want to give me the option to scope the search, give it to me when it's useful--when I get to the search results page and discover that searching everything turned up far too many hits, so I need to limit the scope.
p71-72
Nielsen, Jakob. (2001). Search: Visible and Simple. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/search-visible-and-simple/.
Sherwin, Katie. (2014). The Magnifying-Glass Icon in Search Design: Pros and Cons. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/magnifying-glass-icon/.
Sherwin, Katie. (2015). Scoped Search: Dangerous, but Sometimes Useful. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/scoped-search/.
Corbin, Jenny, and Sharon Karasmanis. (2009). Health Sciences Information Literacy Modules Usability Testing Report. La Trobe University Libraries. Retrieved from http://arrow.latrobe.edu.au:8080/vital/access/manager/Repository/latrobe:20690.
Gonzalez, A. C., & Westbrock, T. (2010). Reaching Out with LibGuides: Establishing a Working Set of Best Practices. Journal Of Library Administration, 50(5/6), 638-656.
Krug, Steve. (2014). Don't Make Me Think, Revisited: a Common Sense Approach to Web Usability. Berkeley, CA: New Riders.
Links that clearly and unambiguously identify their target give off a strong scent that assures users that clicking them will bring them nearer to their 'prey.' Ambiguous or poorly worded links do not.
p43
Tabs are one of the very few cases where using a physical metaphor in a user interface actually works... They're self-evident... They're hard to miss... They're slick... If you're going to use tabs, though, you have to do them right. For tabs to work to full effect, the graphics have to create the visual illusion that the active tab is in front of the other tabs... To create this illusion, the active tab needs to be a different color or contrasting shade, and it has to physically connect with the space below it.
p81
Lemieux, M., & Powelson, S. (2014). Results of a Usability Study to Test the Redesign of the Health Sciences Library Web Page. Journal Of The Canadian Health Libraries Association (JCHLA), 32(2), 49-54.
Ouellelte, D. (2011). Subject Guides in Academic Libraries: A User-Centred Study of Uses and Perceptions. Canadian Journal Of Information & Library Sciences, 35(4), 436-451.
Schofield, Michael. (2015). LibGuides - How Useable is the Three Column Layout? In LibUX: Design and User Experience for Libraries. Retrieved from http://libux.co/usability-of-multiple-column-layouts/.
Sinkinson, C., Alexander, S., Hicks, A., & Kahn, M. (2012). Guiding design: Exposing librarian and student mental models of research guides. Portal : Libraries and the Academy, 12(1), 63-84.
Sonsteby, A., & Dejonghe, J. (2013). Usability Testing, User-Centered Design, and LibGuides Subject Guides: A Case Study. Journal Of Web Librarianship, 7(1), 83-94.
Krug, Steve. (2014). Don't Make Me Think, Revisited: a Common Sense Approach to Web Usability. Berkeley, CA: New Riders.
- Help should be given at the immediate point of need. (p47) If users have to choose between many databases and are not sure which one they want, good descriptions should be available right next to the database links.
Kim, Bohyun. "Responsive Web Design, Discoverability, and Mobile Challenge." Library Technology Reports 49.6 (2013): 29,39,2.
Nielsen, Jakob. (2013). Mobile Content: If in Doubt, Leave It Out. In Nielson Norman Group: Evidence-Based User Experience Research, Training, and Consulting. Retrieved from http://www.nngroup.com/articles/condense-mobile-content/.
Pendell, Kimberly D., and Michael S. Bowman. "Usability Study of a Library's Mobile Website: An Example from Portland State University." Information Technology and Libraries (Online) 31.2 (2012): 45-62.
Schennink, Rik. (2015). Design Last. In Smashing Magazine. Retrieved from http://www.smashingmagazine.com/2015/02/20/design-last/.
Comeaux, Dave, and Axel Schmetzke. "Accessibility of Academic Library Web Sites in North America." Library Hi Tech 31.1 (2013): 8-33.
WebAIM. Designing for Screen Readers. In WebAIM: Web Accessibility In Mind. Retrieved from http://webaim.org/techniques/screenreader/.
United States Department of Justice. Website Accessibility Under Title II of the ADA. In ADA Best Practices Tool Kit for State and Local Governments. Retrieved from http://www.ada.gov/pcatoolkit/chap5toolkit.htm.
W3C. How to Meet WCAG 2.0. Retrieved from http://www.w3.org/WAI/WCAG20/quickref/.