programming4us
programming4us
WEBSITE

Smashing Html5 : Web Navigation Concepts (part 1) - Designer navigation and user navigation, Global navigation

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

When thinking about navigation, Web designers consider

Information design: In a far broader topic, information design, Edward Tufte has shown how different kinds of information can be presented so that it’s best understood. Of special interest to Web navigation design is the notion that information is the interface. In other words, navigation is information arranged so that users can find what they want.

Neither Tidwell’s nor Tufte’s concepts can be summarized in a tidy definition. The idea of interaction is one of responding to another action, such as two people having a discussion. That’s social interaction and it’s something we do all the time — including interaction mediated by the computer, such as text chats. The same concept applies to treating a Web page as a stand-in for another person. The user does something, and the Web page responds from a finite set of choices created by the designer. The better the job that the designer does, the more natural it feels to the user. Trying to create an environment of comfortable interaction is the goal of good interaction design.

Designer navigation and user navigation

Navigation design contains an almost limitless number of possibilities, and you want to set up your navigation so that users easily can get around. The first thing to ask yourself is, “Who is the typical user?” Then, say to yourself, “It ain’t me, babe.” If you remember the title to that old Bob Dylan song, you’ll be on the right track. Jennifer Tidwell points out that a maxim in interface design is, “Know thy users, for they are not you!” Two corollaries can be added to that maxim:

• The better the designer, the more likely the interface will be bad.

• Excellent developers almost always make bad interfaces.

So, if you aspire to be either a great designer or a developer, you’re likely to make a bad interface unless you pay attention. Here’s why: Great designers focus on how the page looks, not on the users’ ability to navigate a site. Designers want to display their creativity, and that’s a good thing. However, when that creativity is such that users can’t navigate from one page to another, there’s a problem.

One of the worst user interfaces ever devised was on New York’s Museum of Modern Art (MoMA) site. The navigation was based around a stack of cubes with no labels. Users were supposed to place their mouse over each cube and a label would appear with the name of the linked item. In order for the MoMA site to work, some fancy coding was required under the hood. The code would warm the cockles of any developer’s heart, but it led to a disaster because, like the designer, the developer was thinking about what a talented coder he was and not about the user experience. Getting the link name to pop up when the mouse moves over it takes some coding talent that the designer did not posses. So, if you want to make a really terrible navigation system combine the best designer and the best developer!

Can you be a good designer and/or developer and still create good interfaces? Sure, but you have to think about it. You must take the view of your typical user into consideration. Who are your users? Are they children or adults? Is your audience men, women, or both? What age group? What is the user’s style? Are they businesspeople? If so, what kind of business and where are they in the organization? Are they managers or are they the people who do the actual work? Find out who your users are. (You already know who you are.)

If you’re a designer and you’re making a Web site for other Web designers, do you want to show them what a good designer you are or how they can become better designers? Likewise, if you’re a developer and you’re making a site for other developers, you definitely want to show them code that will allow them to do some seriously sick programming. Developers want to see some code. However, designers do not want to see code — they’re more interested in design tools and techniques, not code. (Of course designers, love CSS3 code!) Work what your user base wants into your navigation plan.

The very best way to find out if your interface is good is to test it with typical users. If you’re making an educational site for third-graders, you want third-graders to test it. Likewise, if you’re selling haute couture to wealthy women, you don’t want teenage girls to test your navigation. It may take a little extra time, but you’ll have a far better site if you test your site with the type of audience who will use it.

Knowing your users does not mean that you have to have dowdy design or use low-end technology in your site. What it means is that you need to get to know your users and find out what they think your site will do for them. You’re not going to change your users. Make your site for them, not for you. If the site is not for your users, they won’t return.

Global navigation

Global navigation in Web pages refers to broad navigation categories that can be placed on every page in a Web site. Global navigation helps users keep track of where they are in a site, so no matter where they go, they’ll see a familiar road map.

In mapping out a trip from Santa Barbara, California, to Ocean City, New Jersey, you’ll find major interstate highways. The links go from I-210 > I-15 > I-40 > I-44 > I-70 and finally to I-76. These might be considered the global elements in the 3,000-mile trip from coast to coast. However, between the major interstate highways, you’ll find smaller connector roads such as CA-134E that connects US-101 with I-210.

Similarly in global navigation, you must consider navigation between the major links. For example, suppose you have a big site with the global navigation broken down into three categories:

• Animal

• Vegetable

• Mineral

That’s certainly global and links would fit nicely on every page like the following:

Animal | Vegetable | Mineral

However, within each of those general categories, you’re going to need something more specific. For example, suppose a user wants to find a breed of dog — a Greater Swiss Mountain Dog. The following path would be a possible one depending on the designer:

Animal

Mammal

Dog

Breeds

Greater Swiss Mountain Dog

Each submenu will have lots of choices, so let’s consider what elements are available in HTML5 to handle these navigation paths from global navigation.


Other  
  •  Sharepoint 2013 : The Managed Metadata Service (part 4) - Term Sets
  •  Sharepoint 2013 : The Managed Metadata Service (part 3) - Term Store, Groups
  •  Sharepoint 2013 : The Managed Metadata Service (part 2) - Associating with a Web Application
  •  Sharepoint 2013 : The Managed Metadata Service (part 1) - Taxonomy and Folksonomy, Initial Setup
  •  Sharepoint 2013 : Publishing and Web Content Management - Content Deployment - Configuring the Destination Farm, Configuring the Source Farm
  •  Smashing Html5 : Organizing a Page - Organizing Files - Relative reference
  •  Smashing Html5 : Organizing a Page - Getting Your Stuff Organized (part 2) - Grouping without fracturing, Figures and captions
  •  Smashing Html5 : Organizing a Page - Getting Your Stuff Organized (part 1) - Paragraphs, divisions, and lists
  •  Smashing Html5 : Organizing a Page - A Design in Sections
  •  Smashing Html5 : The Top of the HTML5 Document
  •  
    Top 10
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
    - Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
    - Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
    REVIEW
    - First look: Apple Watch

    - 3 Tips for Maintaining Your Cell Phone Battery (part 1)

    - 3 Tips for Maintaining Your Cell Phone Battery (part 2)
    programming4us programming4us
    Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
    programming4us
     
     
    programming4us