Web Information Arquitecture

From nngroup.com and other sources:

Information Arquitecture Read Selections

There are many ways to organize content including, but not limited to:

• Date/time
• Alphabetical
• Geography/location
• Topic
• Target audience
• Task/process
• Attributes/facets
• Combinations

• Contextual navigation. What types of contextual navigation will be on different page templates (category, product, help, service, form, etc.)? Contextual links such as alternatives, upsells, most popular, and other related links are just as critical for findability as a primary taxonomy and associated local links. Is there an effective balance of parent-child links as well as sibling-sibling links?

• Number of links per page. How many links per page is too many for users/searchers? For example, I would expect a category page, (wayfinder) site map, and a site index to contain more links than a product or a help page. On the flip side, how many links are too few? Orphaned–page content appears less important to search engines (because there is only one link to them). And orphaned-page content seems less important to users because that content is difficult to locate and discover.

“You can’t use what you can’t find.”

Duplicate content delivery, for example, can limit direct access to desired content via the commercial Web search engines. And duplicate content delivery typically annoys and frustrates users. I know that user-generated tagging and faceted classification typically lead to duplicate content delivery.

So if I or another qualified information architect determine that a website’s content is best organized using faceted classification or user-generated tagging, I know that I will need to get a technical architect involved early in the development process to minimize the negative SEO impact.

…

Menus:

Our studies repeatedly show that when users come to a home page or landing page, they have words and phrases in their mind that will cause them to click on a link. We call these trigger words. They are essential to good navigation.

When the mega menu is hidden, all of the trigger words on the menu are also hidden. Users can’t predict the future, so they don’t know they need to reveal the menu to get what they need.

When this epic force wins the battle, users go to alternative techniques, like the search engine. That works great if their trigger words match the results, but often they don’t.

Menus: Category Names

Related to the problem of missing trigger words is the issue of the category names. Can users figure out where you’ve put the target content they seek? This is not a new problem — every multi-level navigation scheme has this problem. However, mega menu implementations typically don’t make it easier on their users.

Our user, coming to find the erasable surface he could mount on an easel, had trouble deciding which of the 13 categories he’d find such a thing.

Another issue for most mega menu implementations is that they are big. They eat up a lot of real estate. And what they are eating up often covers something the user wants.

Topic Pages

Sites with a large amount of diverse content can benefit from creating entire pages that aggregate all content related to a tag into one resource.

A topic page can be used to pull in content across content types, reducing the need for your user to know where you keep articles vs. courses vs. news. It’s a one-stop-shop that brings together content from all parts of your site on a topic and lets your user discover other topics that may interest them. This example from the International Journalist’s Network shows a good example of a topic page with clear content type delineations, fresh content and visibility into other topics.

Topic page (http://ijnet.org/topics/community-engagement)

• Don’t confuse automated content aggregating with search. This content should be expressly categorized, not just anything with an appearance of a keyword.
• Don’t skimp on design. Invest appropriate time and resources into deciding what content to display when surfacing related content – do you really need the date for blog posts if you only blog once a month? Instead of the generic list of thumbnails, titles and teasers, play with innovative and engaging alternatives that match your organization or brands approach.
• Incorporate manual content – at the very least the ability to feature highlight the best content – also goes a long way towards creating topic pages that users will find useful and credible. Allow for blocks of manual content whenever possible to avoid creating a ‘content farm’ feel. Even more damaging is automated scraping of external content from Wikipedia, Flickr, or Youtube – a great way to really damage the credibility of the page and even the whole site and brand.
• Avoid generating topic pages for topics at too fine-grain a level. You may not have enough content for a Dog page and Cat page, but a Pets page will work. More granular pages can always be activated if a subtopic becomes more popular. Leverage the taxonomy relationships to broaden the display to similar or higher-level topics when you have insufficient volume.

It’s about organizing the content and flow of a website based on research and planning. The end goal of information architects is to come up with a structure / design that balances the users’ desires with the business’s needs.

Users have four fundamental questions when they arrive at a website: Am I in the right place? Do they have what I am looking for? Do they have anything better (if this isn’t what I want)? What do I do now? One of your key tasks is to make sure you do a good job at answering these questions – on every page of your site.

This means that you have to

• Assure visitor’s they’re in the right place (always make it clear where they are).
• Make it easy for visitors to find what they’re looking for (clear navigation, search etc).
• Make sure visitors know what their options are (links like “See also”, “Related products”).
• Let them take various kinds of action (clear CTAs).

….

Our user testing of product pages shows that people are much more likely to buy when a page answers their questions about its offerings.

Nielsen recommendation:

a)      Popular Topics

b)      See all topics…(after including 5)

c)      See all authors… (after including 3)

d)     Left column, no right

e)      About Us the last one in the menu…

f)       Topics (tags) and Summary at the beginning

g)      Topic Page: example:

Topic: Mobile & Tablet

Most Recent

Most Popular

h)       

Very important: (in each post): SERP (search engine results page) usability increases when each search hit exposes its location within the site structure. External search engines like Google can’t always do this because they don’t know the site’s structure or which navigational dimensions are most relevant to common site tasks. But you do know your site’s structure and should therefore include the info on your own SERPs.

Category Landing Pages

We recommend that sites have a series of categories that each link to their own landing page that gives users a section overview. Sometimes, sites forego the overview page and simply offer links directly to individual pages within a section. This might reduce the number of site pages, but when no page is clearly identified as a sub-topic page, users can misunderstand the site’s scope and miss important details, products, and services.

Category pages also help SEO because they’re the most prominent landing place when people search for a type of product, service, or information. They’re also a way to overcome mistake #2 because they help users bump up a level or two in the site structure if search takes them to an overly detailed leaf node. (Breadcrumbs facilitate users’ ability to easily move up the levels.)

…

With too many classification options and too many structured dimensions, users are forced to think harder to move forward. The profusion of options also makes people question the information scent.

Subsites/Microsites Poorly Integrated with Main Site

It’s typically best to forego independent microsites and place new information on subsites within the main site. But you still need to integrate these subsites within the overall site structure.

For example, on both microsites and subsites, we often see product-specific pages that fail to link to information about the company or organization behind the offering. Further, many sites poorly represent their subsites in the main site search — which often ignores microsites altogether.

Navigation

Navigation exists to help users, not to be a puzzle in its own right. Users should be able to understand it immediately, and apply that understanding throughout the site. Sadly, lots of sites change their navigation features as users move around. Options come and go, making users feel a loss of control. How do I get that menu choice back? I saw it just a few pages ago.

Although global navigation is not a site’s most popular element, its persistence serves a key purpose: it’s a beacon that helps users understand both where they are and how they can easily maneuver back to the top of the site if they lose their way.

Too Many Navigation Techniques is bad

Author Photo is needed

Links should say Where They Go

Many weblog authors seem to think it’s cool to write link anchors like: ” some people think” or “there’s more here and here .” Remember one of the basics of the Web: Life is too short to click on an unknown. Tell people where they’re going and what they’ll find at the other end of the link.

Generally, you should provide predictive information in either the anchor text itself or the immediately surrounding words. You can also use link titles for supplementary information that doesn’t fit with your content. (To see a link title in action, mouse over the “link titles” link.)

…

What matters is that the user experience is that of immersion in comprehensive treatment of a topic, as opposed to a blog-style linear sequence of short, frequent postings commenting on the hot topic of the day. It doesn’t matter what software is used to host the content, the distinctions are:

• in-depth vs. superficial
• original/primary vs. derivative/secondary
• driven by the author’s expertise vs. being reflectively driven by other sites or outside events

Sometimes a writer happens to know a lot about the topic at hand, possibly because they’ve just spent several months working on that exact problem. Other times people know nothing — which doesn’t keep them from voicing their opinions 🙂

Even if you’re the world’s top expert, your worst posting will be below average, which will negatively impact on your brand equity. If you do start a blog despite my advice, at least screen your postings: wait an hour or two, then reread your comments and avoid uploading any that are average or poor. (Even average content undermines your brand. Don’t contribute to information pollution by posting material that isn’t above the average of other people’s writings. Plus, of course, follow guidelines for blog usability.)

The 24 postings that are better than our expert’s very best attempt will gain higher prominence, even though they’re written by people with lower overall expertise.

Prospective new customers don’t even have time to read 24 postings, so they’ll never make it down the list of rank-ordered blog postings to reach our expert’s best.

In-Depth Content Is Value-Add Content

It might take you only an hour to write a blog posting on some current controversy, but a thousand other people can do that as well (in fact, they’ll sometimes do it better, as shown above). And customers don’t want to pay for such a tiny increment of knowledge. Sure, sometimes a single paragraph holds the idea that can increase a site’s conversion rate so much that a reader should have paid a million dollars to read it. But they don’t know that in advance, so they won’t pay.

In contrast, in-depth content that takes much longer to create is beyond the abilities of the lesser experts. A thousand monkeys writing for 1,000 hours doesn’t add up to Shakespeare. They’ll actually create a thousand low-to-medium-quality postings that aren’t integrated and that don’t give readers a comprehensive understanding of the topic — even if those readers suffer through all 1,000 blogs.

Thorough content’s added value can rise above the threshold where customers become willing to be separated from their money. This is the true measure of a sustainable business.

You have to identify opportunities with a non-linear utility function: where paying customers assign more than 10 times higher value to something that costs 10 times as much to produce. The old open-source manifesto ” The Cathedral & the Bazaar” holds much truth: when you’re the duke, you can’t trade in coffee beans, because the bazaar dealers will always undercut your price. You should build a cathedral, because a thousand tents can’t compete with the Notre Dame.

the fatter the report became, the more it has sold.

Why are paying customers (the people who matter) attracted by detailed information? Because systematic and comprehensive coverage is more actionable. It also protects them against the risk of losses caused when something important is overlooked.

In-depth content provides more value in less time than numerous superficial postings. That’s why business customers have empirically been willing to pay, and that’s why you should emphasize fewer, better pieces as your content strategy.

Still, even if you run an expertise-driven site, you should comply with the bulk of content usability guidelines: be as brief as you can; use bulleted lists and highlighted keywords; chunk the material; and use descriptive headings, subheads, and hyperlinks. The small percentage of users who are qualified prospects still read in an F-pattern, so a headline’s first words are more important than its last words, just as they are for normal sites.

Liberating Websites From Search Engines

Despite search engines, websites can make money. The key is to recognize that, while search engines might take all the value from an initial user visit, you get to keep the value from any non-search business. Thus, you must foster customer loyalty so that users go straight to your site instead of clicking through from search ads.

I predict that liberation from search engines will be one of the biggest strategic issues for websites in the coming years. The question is: How can websites devote more of their budgets to keeping customers, rather than simply advertising for new visitors? Here are some ideas, ranging from the proven (newsletters) to the speculative (mobile services):

• Email newsletters. Getting people to sign up for regular newsletters remains the ultimate way to maintain a relationship. As usability studies show, a newsletter has much more of an emotional impact on people than a brief visit to a website.
• Request marketing. Have users tell you what they want, and then alert them when you have it.
• Discussion groups and other community features. Find ways to recognize particularly active members and thus further connect them to your site. Such recognition might be as simple as placing gold stars on their profiles or might include more substantial loyal-user benefits.

 

Local search. Having a single search function for everything can sometimes return search results that are not helpful. An alternative is to offer a scoped search, in which users search within a particular intranet area. This UI can be very confusing if not designed well.

………

Megamenus, present but shrinking. To avoid overwhelming employees with choices, several of our winning sites use megamenus to present menu links. Unlike with some sites, these teams employed usability testing and practiced constraint, which kept these megamenus from getting overly large and unwieldy. Instead, the menus effectively expose interior categories and key content areas.

Megamenus are large drop-down menus usually divided into groups of navigation options. They frequently present both secondary and tertiary pages, thereby making lower-level content more visible to users. This can drastically improve discoverability of previously difficult-to-find information or applications (though it’s not a solution for users on mobile devices).

The order should be vertical, because people tend to scan vertically .

What was presented in the megamenus varied by organization. Although most chose to list all links, some only highlighted the most important pages to avoid overwhelming users.

Some didn’t just list links, but also included a featured area (with an image) to promote specific content from that site area. The featured area is in the right side of the megamenu and lists the most popular pages in that site area. This allows people to jump into that section without overwhelming them with all the possible pages.

For the most part, well-organized megamenus with clear section headings are quite helpful for both users and designers: users can quickly browse a large number of links, and designers can more easily accommodate content changes. (Since drop-down menus can be resized without affecting the underlying page design, organizations have much more flexibility to rearrange their classifications without overhauling the entire website.).

Muy bueno: http://www.foodnetwork.com/

Mega drop-downs offer yet another benefit over regular drop-downs: they let you display tooltips when the user hovers over choices. For simple navigation menus, you’d typically use link titles instead of true tooltips.

Mega-Menu Drop-Downs Beat Regular Drop-Downs

We know from user testing that mega menus work. Here are some arguments to support this empirical fact:

• For bigger sites with many features, regular drop-down menus typically hide most of the user’s options. Yes, you can scroll, but (a) it’s a pain and (b) scrolling down hides the initial options. As a result, you can’t visually compare all your choices; you have to rely on short-term memory. People have enough on their minds, and messing with short-term memory reduces their ability to accomplish their tasks on your site. Mega drop-downs show everything at a glance, so users can see rather than try to remember.
• Regular drop-downs don’t support grouping unless you use kludges, such as prefixing secondary choices with a “-” to indent them. Mega-drop-downs let you visually emphasize relationships among items. This again helps users understand their choices.
• While plain text can be wonderful, illustrations can indeed be worth a mouthful of words. Mega drop-downs make it easy to use pictures when appropriate. And, even if you stick to text alone, you have richer typography at your disposal (letting you differentiate link sizes according to their importance, for example).

Speed

Speed is essential to making any user interface feel responsive. Interface elements must render within 0.1 seconds to suggest physicality and make users feel like a display’s changes are a direct result of their actions. Slow-rendering GUI elements seem sluggish and make users feel like the computer is making things happen, not them.

You should test your mega drop-down implementation’s response time on a variety of computers and browsers. Include the best-selling platform from 5 years ago, because a good number of your customers will still be using it.

Don’t make response time too fast, though: the mouse should remain stationary for 0.5 seconds before you display anything that’s hover-dependent, such as a mega drop-down or a tooltip. Violating this guideline will make the screen flicker insufferably when users move the mouse. Only after 0.5 seconds of resting the pointer on a navbar item can you assume that a user actually wants to see its associated drop-down.

Thus, the timing should be:

1. Wait 0.5 seconds.
2. If the pointer is still hovering over a navbar item, display its mega drop-down within 0.1 seconds.
3. Keep showing it until the pointer has been outside both the navbar item and the drop-down for 0.5 seconds. Then, remove it in less than 0.1 seconds.

One exception to item 3: The very best implementations can sense when a user is moving the pointer from the navbar item to a destination within the drop-down. When the pointer is on such a path, the drop-down should remain visible. This supplementary guideline addresses the diagonal problem, which happens when the path temporarily takes the pointer outside the active area. The drop-down shouldn’t disappear when the user is on the way to point to something within it.

Grouping the Options within a Mega Menu

The main grouping guidelines are:

• Chunk options into related sets, such as those you discover after doing a card sorting studyof users’ mental model of the features.
• Keep a medium level of granularity. Don’t offer huge groups with numerous options that require extensive time to scan. Conversely, don’t make the individual groups so small that the drop-down has an overabundance of groups that users have to spend time understanding.
• Use concise, yet descriptive labels for each group. Remember the standard rules for writing for the Web: enhance scannability by starting with the most information-carrying word and avoid made-up terms.
  • To keep words short and direct, the base form of verbs (“shop”) is usually better than gerunds (“shopping”).
  • Differentiate labels. Action Envelope’s “Ways to Shop” and “Shops,” for example, don’t work well together.
• Order the groups. You can do this using an inherent order among the features (as for a workflow) or according to importance, putting the most important and/or frequently used group on top (in a vertical design) or to the left (in a horizontal layout, assuming a left-to-right language like English).
• Show each choice only once. Duplicating options makes users wonder whether the two occurrences are the same or different. Also, redundancy makes the entire interface bigger and more cumbersome.

just because mega menus are big and have room for many options doesn’t mean you should overload them. Simplicity applies to interaction semantics at least as much as it applies to the presentation layer. Fewer options mean less to scan, less to understand, and less to get wrong.

But: Mobile displays introduce major design constraints, because it’s often simply impossible to display all the top-level categories in a horizontal bar; also, large megamenus are very frustrating for users on small touch screens.

…..

The search box should be continuously visible on the page rather than displayed only when users activate the drop-down menu.

Approaches to improving the accessibility of mega drop-down menus: Don’t bother making the drop-down itself accessible. Instead, make each top-level menu choice clickable, leading to a regular Web page where you present all drop-down options in plain, fully accessible HTML.

. Lists this long can be made easier to scan by providing some grouping—not pushing some items down into sub-categories of the hierarchy, but simply visually organizing related items together.

for deeper hierarchies it’s critical to provide alternative navigation options: shortcuts that lead directly to lower levels. UF Health does this in the drop-down menu from the global navigation, where users can browse alphabetically for information about a specific disease, or choose one of the Most Viewed conditions. Ver UFHealth website.

For sites that are more than a few levels deep, breadcrumbs (which show a link for each level of the site from the homepage to the current page) can help users orient themselves and understand the site structure. Sitemaps are another useful way of helping users see the structure of a website.

The most common reasons for confusion are:

• (Menu) Terms are too broad and end up acting as catch-all (e.g., For Employees).
• Sections such as How do I… or Tools grow too big.

A good site keeps the same look and feel across all pages, unifying the organization and making it easier for users to know where they are and see where they can go.

he best Quick Links lists have descriptive names, such as Most Popular Pages or Frequently Used Tools, are placed prominently on the homepage, and are based on site analytics.

One way of engaging users is by showing what others are doing. Social filters are popular on websites; this design trend has now caught on to intranets.

Intranets in this report used the following social filters:

• Most Viewed
• Trending #tags
• Most popular docs
• Top stories
• Latest comments
• Hot resources
• Top FAQs
• Commonly Used Forms

Some social filters encourage exploration, while others provide a shortcut to important information (like a Quick Links list like “Top Tools”, etc).

Related Links lists were immensely helpful, particularly when they were designed consistently so users always knew where to find them and what to expect.

Some present the Top Tools on the homepage.

Global Navigation

Traditionally, global navigation appears on every page of a website, and serves 2 functions:

1. Allows users to switch between top-level categories easily, no matter their current location
2. Ensures that even users who don’t enter through the homepage can quickly get a sense of what is available on the website

If the user is in subdomain, then the navigation bar shows various subcategories of computer product.

For most sites, explaining the brand offerings is simply too important to be relegated to a secondary menu; even if visitors have a general idea that this company sells books, many could be unaware of the fact that they also sell electronics and toys.

….

IMPORTANT:::Integration with its international sites. It’s good that Amazon offers fully localized sites in six countries outside the United States, but there is no integration across the sites. If you’re a French user looking at a book on the American site, for example, there’s no indication that you can order the same book from Amazon.fr or that a French translation is available. Also, third-party sites that recommend books are relegated to extremely awkward linking strategies when they want to support international users (for example, “Get this book from Amazon in the U.S., in the U.K., or in Japan“).

About us: Comprehensive product selection. Amazon lays claim to “earth’s biggest selection” and for once, a company actually lives up to its slogan. We’ve known since 1997 that users want comprehensive services on the Web, and Amazon fulfills that need,

Login screen. Amazon’s sign-in screen remains a model to be emulated, minimizing the common problem of new customers who try to log in without having registered. Amazon presents two questions in linear order: (1) “What is your email address?” and (2) “Do you have an Amazon.com password?” For the second question, users can select one of two radio buttons: “No, I am a new customer,” or “Yes, I have a password.” Many other sites present the new- and established-user sections side-by-side, and thereby divert new users to the established-user section through the magnetic attraction of type-in fields.

The distinction between “sign up” and “sign in” is clearly marked! Sure, if you read the blah-blah. But users don’t. Their eyes and mouse go straight to the field where they can type. That’s what people want to do: they want to get things done . They don’t want to read.

In this case, the user didn’t notice the difference between signing “up” vs. “in.” The most prominent input fields were those for registering, so she typed in those fields, then clicked the “Sign In” button. This went on for 20 minutes as she got more and more frustrated.

Sitemaps

main usability guidelines for site maps are:

• Call it “Site Map” and use this label to consistently link to the site map throughout the site.
• Use a static design . Don’t offer users interactive site map widgets. The site map should give users a quick visualization without requiring further interaction (except scrolling, if necessary).

·         The one small complexity we recommend is to use a multi-column layout . In Study 2, users easily succeeded with 61% of tasks involving multi-column site maps compared to 47% of tasks with single-column site maps.

·         Multi-column site maps worked better because users needed less scrolling to get an overview of the site’s structure. People were more likely to become lost within long, scrolling site maps. They typically scrolled up and down the map multiple times, often accidentally or purposefully skipping content.

 

 

Mobile Content

Users just wanted to know the main points, no secondary content or comments.

If mobile users arrive at your full site, automatically show them the mobile version.

·  Offer a clear link from your full site to your mobile site for users who end up at the full site despite the redirect.

·  Offer a clear link from your mobile site to your full site for those (few) users who need special features that are found only on the full site.

The basic ideas are to:

• cut features, to eliminate things that are not core to the mobile use case;
• cut content, to reduce word count and defer secondary information to secondary pages; and
• enlarge interface elements, to accommodate the “fat finger” problem.

The challenge is to eliminate features and word count without limiting the selection of products. A mobile site should have less information about each product and fewer things users can do with the products, but the range of items should remain the same as on the full site. If users can’t find a product on a mobile site, they assume the company doesn’t sell it and go elsewhere.

So, for example, a mobile real estate site should show all the homes for sale in a neighborhood, not just the ones most people are interested in buying. (Though it could offer a shortlist of popular houses as a shortcut so users could view them with a single touch.) But the mobile site could eliminate esoteric features — such as a property’s past sales history — and offer users who need these features a link to the info on the full desktop site.

1. Plan for offline viewing during connectivity outages. Even in major metropolitan areas, cellular connectivity is sometimes tenuous; multinational corporations and NGOs with staff in developing countries can also face poor service quality. To address this, it’s important to design sites and apps that store data, save state, and remember what users are doing when signals drop. Examples from our study here include Suma, which designed its app to accommodate users who might lose signals between the library stacks, and Show Me, which assumes emergency workers might lose signals during natural or other disasters.

2. Optimize load times. On mobile, pages must be both great and lightweight. Minimizing server calls is critical for users who face decreasing bandwidth and increasing mobile charges.

3. Recognize that, even for the most proficient practitioners, typing on glass is no picnic. Create task flows that minimize data input whenever possible. Letting users select from a list, search a set list of options, or receive auto-suggestions can help them enter information more easily. ZON designed its mTec search with type-ahead functionality rather than offering users a long list of options. This reduces the burden for mobile users, leaving data-entry intensive work for when they’re in the office.

4. Design workflows for common tasks. Doing this forces the design team to fully analyze the steps and task order required to complete the work. Creating logical flows that lead users down a path reduces the burden on them. In our survey, several teams ran into problems when the process they were trying to recreate in a mobile site or app was broken to begin with. If an offline or desktop-based workflow isn’t streamlined or logical, a mobile design based on it won’t be either. In these cases, it’s best to redesign the process first, and then take it mobile.

5. Do the work for the users by making smart assumptions where possible. This is often easier in the constrained enterprise environment than on the open web, where people can do anything. For example, the Show Me app is targeted at first responders who are working within a specific emergency situation and is designed to drive users through one emergency situation at a time. The app also remembers the selected scenario for 24 hours so users don’t have to log in each time.

6. Ensure that the design team focuses on specific decisions, such as font size and how much text to display on every screen. Several teams realized during testing that bigger was better for type size. This forced them to make detailed design decisions — such as whether to show a full headline or product name or show a truncated label; when to use an ellipsis; and how many icons or news stories can fit in a row.

Some companies use icons and color-coding as shortcuts for text. For example, ZON’s 4Sales mobile design uses colors to indicate “on time” vs. “late.” 12View is an inspection-support application for the Netherlands’ largest sewer cleaning organization. In this environment, people don’t want to read too much, so the app uses icons in the mobile interface to represent codes that are spelled out in the desktop view. (In contrast to this enterprise scenario, using unlabeled, nonstandard icons often causes usability problems when designing for the general public, where you have to assume zero training time.)

7. Writing for mobile poses a related challenge: we know that mobile content must be short, and mobile intranets have a huge advantage compared with public sites or apps in the ability to teach conciseness to on-staff writers. Splash, for example, encourages employees to create “bit-sized” content and has revised its company style guide to reflect best practices in mobile communications.

Hiding content behind an extra tap can also help; such progressive disclosure means that only users who want more details will get them. For example, to minimize download time, 12View shows only 10 nearby locations by default, focusing on revealing information as needed (digging deeper). mTec relies heavily on progressive disclosure as well, and Show Me gives users each scenario’s most useful icons by default and also offers a quick list of the 10 most recently used icons. However it is implemented, the key to progressive disclosure is to ensure that you don’t hide information that all users need behind an extra step.

 

Mini Information Arquitecture

Mini-IA lets you split the info into appropriate chunks. This allows direct access to subtopics of interest and can give users a better understanding of the concept space than they’d get while putting their nose to the grindstone to endlessly scroll.

a mini-IA makes sense only if you can structure this localized information space according to a principle that supports the users’ tasks and mental models.

Since the Web’s beginning, internally focused structuring has been one of the most user-repellent design mistakes. Our research into intranet IA, for example, has repeatedly found that both usage and employee productivity skyrocket when a department-based IA is replaced by a task-based IA.

A-Z Listings

Lists of countries and other known-item problems are also often fine to alphabetize. However, you do need to ensure that users will know unambiguously the name of their selection. If people have to look at several places in the list, you’ve defeated the purpose of the A–Z order.

People Rarely Think A–Z

For most questions, either

• users don’t know the name of the thing they want, making A–Z listings useless; or
• the items have an inherent logic that dictates a different sort order, which makes A–Z listings directly harmful because they hide that logic.

Time lines and geographical location are other groupings that are often useful. Finally, you can let the importance or frequency of use guide how you prioritize long listings rather than default to less-useful alphabetical sorting.

·         Depending on the nature of your information, usability might be better served by yet other types of structures. And yes, in a few cases, this might even be the alphabet.

Prioritize

If everything is equally prominent, then nothing is prominent. It is the job of the designer to advise the user and guide them to the most important or most promising choices (while ensuring their freedom to go anywhere they please).

 

Tools:

You can use a click-tracking tool (e.g., CrazyEgg, Clicktale or even In-page Analytics via Google Analytics) to measure how many clicks occur on the global navigation from key points in your site such as the homepage, landing pages, destination pages.

Using a survey feedback tool (e.g., Usabilla Live,  Qualaroo) placed on destination pages.

Tools such as PhoneGap and Sencha Touch allow people to design and code across platforms, using the power of HTML.

Walgreens provides two very similar hybrid apps– one for Android and the other for iPhone. Both apps have multiple sections and many native features such as access to notifications and a Refill by scan feature that uses the phone camera to refill prescriptions.

Tools to use

• Balsamiq Mockups. A great, fast wireframing tool. There’s almost 0 learning to get going, and I love the fact that it focuses on the big picture, and not the little design elements.
• Omnigraffle. The tool of choice for a lot of UX professionals. Diagrams, process charts, quick page-layouts, website mockups, and more. Mac-only.
• Microsoft Visio. Many people prefer it for diagramming and website planning.
• MindJet MindManager. Mindmapping tool that’s also great for diagramming and sitemaps.
• LovelyCharts. Diagramming application that allows you to create diagrams of all kinds, such as flowcharts, sitemaps, wireframes and more.

 

 

Nielsen: Browse other courses by category and Browse by topic (25)

 

Prospective students look for majors and programs: not schools or colleges. In our research, a staggering 48% of users didn’t realize that the university offered the program that they were looking for even when it did. A reason was that people don’t know which degrees belong to which school — when they didn’t find a program where they expected it to be.

6. Provide information about job placement after graduation, and link to it from the alumni section of the website

When evaluating schools, another top concern for both prospective students and parents is whether the investment in education will pay off after they graduate. In our research, the first place where users went to find this information was the Alumni page, which they associate with all things after college. Universities should provide data about what graduates are doing after college, with numbers and sources to support those claims. At the very least, have job placement data available from the university’s About Us, Admissions, and/or Career Center pages, with a link from the Alumni section.

Kenyon College: This university effectively surfaces data about job placement by linking to an After Kenyon page directly from the global navigation. The content itself is useful, too: statistics that are easy to scan, information about notable alumni, and examples of graduates’ first jobs out of college.

Clearly show the application deadlines, and offer a step-by-step description of the application process

Ask a prospective student to find the application deadline and you’re likely to hear them groan with dread. In our research, students frequently complained about how hard it is to find the deadline to apply. Depending on the structure of your site, place the dates in the body of the Admissions or Apply (or equivalent) page. If there are multiple or complicated deadlines, consider a dedicated Deadlines page in that section. Either way, make sure it’s clearly labeled and easy to spot.

……..

You want to run multiple tests because the real goal of usability engineering is to improve the design and not just to document its weaknesses. After the first study with 5 users has found 85% of the usability problems, you will want to fix these problems in a redesign.

After creating the new design, you need to test again. Even though I said that the redesign should “fix” the problems found in the first study, the truth is that you think that the new design overcomes the problems. But since nobody can design the perfect user interface, there is no guarantee that the new design does in fact fix the problems. A second test will discover whether the fixes worked or whether they didn’t. Also, in introducing a new design, there is always the risk of introducing a new usability problem, even if the old one did get fixed.

Also, the second test with 5 users will discover most of the remaining 15% of the original usability problems that were not found in the first test. (There will still be 2% of the original problems left — they will have to wait until the third test to be identified.)

Finally, the second test will be able to probe deeper into the usability of the fundamental structure of the site, assessing issues like information architecture, task flow, and match with user needs. These important issues are often obscured in initial studies where the users are stumped by stupid surface-level usability problems that prevent them from really digging into the site.

So the second test will both serve as quality assurance of the outcome of the first study and help provide deeper insights as well. The second test will always lead to a new (but smaller) list of usability problems to fix in a redesign. And the same insight applies to this redesign: not all the fixes will work; some deeper issues will be uncovered after cleaning up the interface. Thus, a third test is needed as well.

The ultimate user experience is improved much more by three tests with 5 users than by a single test with 15 users.

…..

About Us Pages

The link doesn’t have to be the first or most prominent. Indeed, if you’re using a standard left-hand navigation column, you can place the About Us link at the very bottom of the list. Just don’t hide it.

We recommend providing About Us information at 4 levels of detail:

1. Tagline on the homepage: A few words or a brief sentence summarizing what the organization does. At the top of your content pyramid, a good tagline helps users understand the rest of the site by providing context for the detailed content. For example, “Global excellence in aluminum.”
2. Summary: 1-2 paragraphs at the top of the main About Us page that offer a bit more detail about the organization’s goal and main accomplishments.
3. Fact sheet: A section following the summary that elaborates on its key points and other essential facts about the organization.
4. Detailed information: Subsidiary pages with more depth for people who want to learn more about the organization.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

…

Information Arquitecture 2

About Us:

because navigation is crucial on homepages. Users rarely go to a homepage to admire it. They go there because they want to find their way to a destination elsewhere on the site. (In contrast, on article pages and product pages, navigation should indeed be smaller than the content.)
Another positive development is the slightly larger area spent on content of interest to users (as opposed to self-promos and advertising).
Design the homepage to be clearly different from all the other pages on the site. Either use a slightly different visual design (that still fits with the look and feel of the site) or have a prominent location designator in the navigational apparatus. This visual distinction and navigational signposting ensures that users can recognize their starting point when they return from exploring a new part of the site.
• Group corporate information, such as About Us, Investor Relations, Press Room, Employment and other information about the company, in one distinct area. This grouping gives people who want the information a clear and memorable place to go. It also helps users who don’t care about this information by separating it from the rest of the homepage content.
• Include a homepage link to an “About Us” section that gives users an overview about the company and links to any relevant details about your products, services, company values, business proposition, management team, and so forth. The recommended name for this link is “About .”
If you want to get press coverage for your company, include a “Press Room” or “News Room” link on your homepage. Journalists appreciate and rely on sections like these when trying to cover a particular company.
• Include a “Contact Us” link on the homepage that goes to a page with all contact information for your company. If you want to encourage site visitors to contact your company directly, instead of seeking information on the website first, include contact information such as the primary address, phone number, and email directly on the homepage.
• If you provide a “feedback” mechanism, specify the purpose of the link and whether it will be read by customer service or the webmaster, and so forth.
Avoid redundant content. Repeating identical items, such as categories or links, on the homepage in order to emphasize their importance actually reduces their impact. Redundant items also clutter the page; all items lose impact because they are competing with so many elements. In order to feature something prominently, feature it clearly in one place. On the other hand, redundant content can help people if you repeat items that belong in multiple categories or you include links to the same page but offer synonyms that represent words your users use to describe the content.
Use consistent capitalization and other style standards. Although these small mistakes might seem nitpicky, they can cause users to feel that the site is unprofessional or untrustworthy.
Avoid single-item categories and single-item bulleted lists.
Spell out abbreviations, initialisms, and acronyms, and immediately follow them by the abbreviation, in the first instance. This is helpful for all users, especially for anyone using a screen reader. For example, the Federal Highway Administration’s homepage refers several times to the “MUTCD” but fails to explain on the homepage that this is short for “Manual on Uniform Traffic Control Devices.” Abbreviations that have become widely used words, such as DVD, are exceptions to this guideline. Especially avoid using unexplained abbreviations as navigation links.
• Use examples to reveal the site’s content, rather than just describing it. Well-chosen examples of content can convey much more than words alone. For instance, a category called “Breaking News” with a description that says “Get All of Today’s Top Stories Here” is not nearly as interesting or informative as showing the top five news headlines, followed by a link to all breaking news. Or, on an e-commerce site, a simple category called “Sale Items” is not as compelling as seeing a few actual products that are on sale, complete with their prices. Often it takes more words and space to describe a category than it does to show some of that category’s contents and link to more information. In brick-and-mortar stores, customers rely on examples to orient themselves and find the items they need. Similarly, homepages should show small pictures of the products or other content in each department, so users can do a quick visual sweep to see if they are in the right place. Examples also help users who don’t read your site’s language very well.
• For each example, have a link that goes directly to the detailed page for that example, rather than to a general category page of which that item is a part. Don’t put the burden on the user to find the item they’re interested in once again on the second page. For instance, if your homepage features news coverage of a film festival, and you show a photo and caption for a specific film, those items should link directly to information about that particular film, not a general page for the festival. The exception is examples that are so short and self-contained that there is no more information about them deeper within the site.
• Provide a link to the broader category next to the specific example. If you prominently feature a single product, service, or article on the homepage, make sure that the rest of the page clearly communicates the full breadth of products, services, or content supported by the site (unless you are a one-product company), because people sometimes believe that the main feature is all there is. For example, if a job-listing site prominently features three listings in the medical industry with no adjacent link to “Listings in Other Industries,” users might easily think that the site lists jobs only for medical personnel.
Differentiate links and make them scannable. Begin links with the information-carrying word, because users often scan through the first word or two of links to compare them. Keep links as specific and brief as possible.
Don’t use generic links, such as “More…” at the end of a list of items. Instead, tell users specifically what they will get more of, such as “More New Fiction” or “Archived Book Reviews.” Generic “More…” links are especially problematic when the page has several of them, since users can’t easily differentiate between them when scanning the page.
• Don’t use the word “Links” to indicate links on the page. Show that things are links by underlining them and coloring them blue. Never name a category “Links” by itself — this is akin to labeling a category of information “Words” in a print medium. Name the category after what the links are pointing to.
• If a link does anything other than go to another web page, such as linking to a PDF file or launching an audio or video player, email message, or another application, make sure the link explicitly indicates what will happen. For example, CNNfn uses icons quite effectively to indicate audio and video files as such. Being thrust into a new medium without warning is startling for any user, but is especially agonizing for users with slow connections, who often have to wait for the new application to load just so they can exit out of it.
Navigation
Because the primary purpose of a homepage is to facilitate navigation elsewhere on the site, it’s critical that users be able to find the appropriate navigation area effortlessly, differentiate between the choices, and have a good sense of what lies beneath the links. Users should not have to click on things just to find out what they are. The navigation area should also reveal the most important content of the site so that users have a good sense of what’s there by looking at the top-level categories.
40. Locate the primary navigation area in a highly noticeable place, preferably directly adjacent to the main body of the page. Avoid putting any top horizontal navigation (primary or otherwise) above graphical treatments such as horizontal rules or banner areas — users often ignore anything within or above a rectangular shape at the top of the screen. We call this behavior “banner blindness,” and we have seen it in numerous tests. See Microsoft’s top navigation area, which begins with “All Products” for an example of navigation that many users will likely miss.
41. Group items in the navigation area so that similar items are next to each other. Grouping helps users differentiate among similar or related categories and see the breadth of products or content you offer. For example, group product categories for prescription medications and over-the-counter medications. Similarly, on an e-commerce site, all items related to shopping, such as the shopping cart, account information, and customer service should be in the same area.
42. Don’t provide multiple navigation areas for the same type of links. Groups that are too similar can fragment and complicate the interface, making the user work too hard to create order and meaning.
43. Don’t include an active link to the homepage on the homepage. For example, if you include a “Home” link as part of your regular navigation bar, it shouldn’t be clickable on the homepage. If you use components, create a special component that is used only on the homepage with an inactive Home link. If it’s clickable, some users will inevitably click it and wonder if the page has indeed changed. Similarly, if you link your logo to the homepage from other pages on the site, the logo shouldn’t be clickable from the homepage. All other pages on the site do need a link to the homepage.
44. Don’t use made-up words for category navigation choices. Categories need to be immediately differentiable from each other — if users don’t understand your made-up terminology, it will be impossible for them to differentiate categories. For example, although Accenture uses the made-up word “uCommerce” for its flavor of e-commerce, they appropriately use the more familiar term “eCommerce” in the navigation bar
Use icons in navigation only if they help users to recognize a class of items immediately , such as new items, sale items, or video content. Don’t use icons when simple text links are clearly differentiable from each other, such as in category names. If you find that you need to ponder to come up with an icon for navigation, chances are it’s not going to be easily recognizable or intuitive for users. For example, the icons for “Links” and “Forum” on Asia Cuisine don’t help to further explain these categories or make them more immediately recognizable; they just clutter the page.
• Give users an input box on the homepage to enter search queries, instead of just giving them a link to a search page. Users now expect and look for an input box with a button next to it — if they don’t see it, they often assume the site doesn’t have a search feature. Try to find search on Boeing’s, Coles’, or Southwest’s homepages, for examples of how difficult it is without input boxes as the visual cue to search.
• Input boxes should be wide enough for users to see and edit standard queries on the site. Allow enough space for at least 30 characters in the font size used by most of the users.
• Don’t label the search area with a heading; instead use a “Search” button to the right of the box. This design is preferred because it is the simplest. “Go” is also acceptable as the action button for search, but requires that you label the area “Search.” Place search at the top of the main body of the page, but below any banner area. This gives people the greatest chance of finding search when they need it. Even if you follow the other guidelines for search, it doesn’t help if you place it in a low-priority position on the page. See ExxonMobil for an example of a poorly placed search input box.
• Unless advanced searches are the norm on your site, provide simple search on the homepage, with a link to advanced search or search tips if you have them. If you have advanced search, but it is used infrequently, don’t include a link to it on the homepage. Instead, offer users the option to do an advanced search when you present the search results.
• Don’t include tools unrelated to tasks users come to your site to do. Some sites seem compelled to include tools simply because they are available, not because they are appropriate. For example, you don’t need to offer users a tool to get their weather forecast if you have a non-news or non-weather site, such as James Devaney Fuel Company. Tools are one of the first things users look at on homepages because they often contain input boxes and dropdown menus, which users recognize and are attracted to, so don’t show them unless they are truly essential and facilitate top-priority tasks.
• Don’t provide tools that reproduce browser functionality , such as setting a page as the browser’s default starting pag • Use graphics to show real content, not just to decorate your homepage. For example, use photos of identifiable people who have a connection to the content as opposed to models or generic stock photos. People are naturally drawn to pictures, so gratuitous graphics can distract users from critical content.
• Label graphics and photos if their meaning is not clear from the context of the story they accompany. If the level of specificity between the picture and the story differ, it’s a good idea to label the picture. For example, if you have a story about a film festival and show a still photo from one of the films, label it to clarify both what it is and how it relates to the more general category. On the other hand, if you’re using a picture in an iconic way to help users quickly identify what a story is about when scanning the page, you probably don’t need to label it. For example, if you use a close-up of a medicine bottle with pills in it next to an article on a new drug approved by the FDA, you don’t need to label it. It’s usually a good idea to label any photos of people — it doesn’t hurt people who recognize the person and can help people who can’t match the face with the name or bookmarking the site.
• Avoid using multiple text entry boxes on the homepage, especially in the upper part of the page where people tend to look for the search feature. Users sometimes confuse text entry boxes with search boxes, and often type search queries in the wrong place. This is especially problematic if you don’t offer an input box for search but do have input boxes for other features. See Victoria’s Secret and PBS for examples.
• Use dropdown menus sparingly, especially if the items in them are not self-explanatory. Users are attracted to them, and they’re often the least effective navigation devices. If you have very few items in a dropdown list, it’s often better to list them directly on the homepage. Similarly, avoid long dropdowns — they are difficult for users to operate effectively, and users often struggle to differentiate between the items in the list. It’s often better to take users to a separate page for the selection, where you can explain the different items or at least organize them into more meaningful categories than a single list.
• Begin the window title with the information-carrying word — usually the company name. Users scan, rather than read, text on screens, so if you don’t catch them with the first word, you risk losing their attention. If you start the window title with anything but the most important word, the company name gets lost in bookmark lists and search results. For example, many window titles begin with “Welcome” or “Homepage,” which might look okay in isolation, but convey no differentiating site information in the first word. Similarly, if your company name begins with an article, such as “the” or “a,” don’t include the article in the window title. For example, the window title for “The New York Times” should be “New York Times.”
• Don’t include the top-level domain name, such as “.com” in the window title unless it is actually part of the company name, such as “Amazon.com.” Suffixes such as “.com” add an unnecessary word to the window title and create an artificial distinction between a company’s presence on and off the Web.
Limit window titles to no more than seven or eight words and fewer than 64 total characters. Longer titles are less scannable, especially in bookmark lists, and will not display correctly in many applications.
….
users pay attention to information-carrying images that show content that’s relevant to the task at hand. And users ignore purely decorative images that don’t add real content to the page. So much fluff — of which there’s too much already on the Web.
Invest in good photo shoots: a great photographer can add a fortune to your website’s business value.
….
Today, users will scroll. However, you shouldn’t ignore the fold and create endless pages for two reasons:
• Long pages continue to be problematic because of users’ limited attention span. People prefer sites that get to the point and let them get things done quickly. Besides the basic reluctance to read more words, scrolling is extra work.
• The real estate above the fold is more valuable than stuff below the fold for attracting and keeping users’ attention.
So, yes, you can put information below the fold rather than limit yourself to bite-sized pages.
In fact, if you have a long article, it’s better to present it as one scrolling canvas than to split it across multiple pageviews. Scrolling beats paging because it’s easier for users to simply keep going down the page than it is to decide whether or not to click through for the next page of a fragmented article. (Saying that scrolling is easier obviously assumes a design that follows the guidelines for scrollbars and such.)
But no, the fact that users scroll doesn’t free you from prioritizing and making sure that anything truly important remains above the fold.
Users will scroll below the fold only if the information above it makes them believe the rest of the page will be valuable.
The best FAQs present the most frequently asked questions at the top (so that many users won’t need much scrolling).
The last element in a list often attracts additional attention. The first few items are definitely the most important, but the final item gets more views than the one before it. The end of a list’s importance is further enhanced by the recency effect, which says that the last thing a person sees remains particularly salient in the mind.
he implications are clear: the material that’s the most important for the users’ goals or your business goals should be above the fold. Users do look below the fold, but not nearly as much as they look above the fold.
People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll.
It’s better to use “23” than “twenty-three” to catch users’ eyes when they scan Web pages for facts, according to eyetracking data.
• Structure articles with two or even three levels of headlines (a general page heading plus subheads – and sub-sub-heads when appropriate). Nested headings also facilitate access for blind users with screenreaders
• Use meaningful rather than “cute” headings (i.e., reading a heading should tell the user what the page or section is about)
Hypertext should not be used to segment a long linear story into multiple pages: having to download several segments slows down reading and makes printing more difficult. Proper hypertext structure is not a single flow “continued on page 2” ; instead split the information into coherent chunks that each focus on a certain topic . The guiding principle should be to allow readers to select those topics they care about and only download those pages.
Introductory text on Web pages is usually too long, so users skip it. But short intros can increase usability by explaining the remaining content’s purpose.
Participation:
Netflix lets users rate movies by clicking a star rating, which is much easier than writing a natural-language review.
• Edit, don’t create. Let users build their contributions by modifying existing templates rather than creating complete entities from scratch. Editing a template is more enticing and has a gentler learning curve than facing the horror of a blank page. In avatar-based systems like Second Life, for example, most users modify standard-issue avatars rather than create their own.
• Reward — but don’t over-reward — participants. Rewarding people for contributing will help motivate users who have lives outside the Internet, and thus will broaden your participant base. Although money is always good, you can also give contributors preferential treatment (such as discounts or advance notice of new stuff), or even just put gold stars on their profiles. But don’t give too much to the most active participants, or you’ll simply encourage them to dominate the system even more.
• Promote quality contributors. If you display all contributions equally, then people who post only when they have something important to say will be drowned out by the torrent of material from the hyperactive 1%. Instead, give extra prominence to good contributions and to contributions from people who’ve proven their value, as indicated by their reputation ranking.
Your website’s design undoubtedly influences participation inequality for better or worse

…
Top Blogs:
They do one of two things 1) Be interesting 2) Add Value.