123Greeting.com Tab Menu

When we start revamp 123Greeting.com our plan is to set well and easy navigation systems. Where we can load all of our category and followed by the sub category as a 2nd level navigation. We start finding which type of navigation will fit for our site. Even one things we have to keep in mind that we have to keep balance with the exiting site. With the new navigation systems the user doesn’t needs to learn more. What we like to mean that user should complete their task is less time.

How I start
(1) Plan for accessibility at each stage of development.
(2) Start with designing with markup ‘semantically’.
(3) All functionality must be keyboard accessible.
(4) Use of <ul>, <ol>, <li> for list of items.
(5) Place important content first (Source order independent).
(6) Microformats .

Why <div> not <table>

Div is used to describe content that cannot be properly described by other more semantic tags. Adding semantic meaning to content probably makes websites rank higher. div element marks up only one block at a time, the code base is much smaller than that of a table-based structure. Less code is code that is more readable, easier to maintain, faster to develop, less buggy, smaller in size.

1 Level top navigation (tabs)
User navigation is the “main thoroughfare” that takes the user from the opening of an application to the content area where the user works. Where I found the tabs is the best navigational systems which can fit for our systems. Why I choose tab navigation for our first level navigation.

Horizontal navigation bars are very neat. Because top-down flow is slightly superior to left-right flow, it’s natural for high-level navigation to sit above content.
The obvious problem is when a top bar gets wider than the page. It’s normal for web pages to extend vertically, and users are used to scrolling vertically. Horizontal scrolling is to be avoided at all costs! If viewer use text-based navigation, and it’s re sizable, viewer navigation could get bigger or smaller depending on the user’s browser settings.
Horizontal bars are therefore appropriate where the number of items is known in advance, there are not going to be any more items added, and there is enough width to accommodate all items safely in the target screen resolution.

HTML elements

For page navigation, <a> is the element I use because of its attribute href to link to other page. Besides this, there are other 2 CSS syntax for <a> which are very useful. a:hover {background:#fff} changes background color to white on hover, which in fact removes the use of javascript onmouseover. Another useful css syntax is {display:block}. It could expand hover area to the whole area of parentNode with proper {padding:xx}.
we use <span> as the parentNode of <a> , we use <li> instead because it’s simple for naming in CSS. <li> is a block element. So we can foresee there are 2 techniques to generate tabs.

inline <li> + <a>
<li> + block <a>

inline <li> + <a>

CSS li {display:inline} changes the elements of <li> to inline ones. And they will display horizontally as inline elements. >ul> serves as a natual container for all <li> elements. You could select to add a content box or not.
One point that may be aware is you may not use CSS li {margin:0px} to set the gaps between the tabs to 0. There are always 5px of gap between the tabs. The reason for that is when a block elements are changed to inline. If there’s whitespace between the elements, the browser will display 5px space for the whitespace between the inline elements.

<li> + block <a>

CSS {display:block} changes the element <a> to block ones so we get better hover effect. CSS li {float:left} makes <li> elements float horizontally. This is another way of making tabs, which you don’t need to consider the effect of white space between the <li> elements. But the tabs can be designed under the content box by changing the position of the <ul> and content box <div> upside down. A javascript script has been developed to make it possible for the tabs located in the top, bottom, left and right side of the content box for the content navigation.

original posted on http://www.strangesystems.net

Wireframes serve a central function in the development of a web site. It is a key tool in communicating the content and layout of each web page for internal and client reviews as well serving as a blueprint for graphic designers to produce designs and for programmers develop functionality.

What are wireframes?

A wireframe is a stripped-down visual representation of a single web page, devoid of any graphic treatment. As the name suggests, it is a framework made with wires, which define basic layout and placement of content and page elements such as navigation; header & footer; branding etc.

They are sometimes referred to as “page schematics”, “page architecture” or even “blueprints” (though the term “blueprint” sometimes refers to a more overall site design).

It is sometime helpful to use the architectural blueprint metaphor in understanding wireframes. Architectural blueprints show you the form of the building, define the functionality of the spaces and paths for circulation, while provide the contractor and interior designer specifications from which to build from. Likewise wireframes define areas of content and functionality, navigation strategy while providing a framework from which the programmer and graphic designer can build from.

A full wireframe needs to deliver the following information:

• Layout: General placement of page elements such as headers, footers, navigation, content area, and often branding; It communicates decisions that as been made as to the navigation strategy of the site; it also shows the prioritization of the content on the page.

• Content inventory: What content needs to be present on the page

• Web elements: Headers, links, forms, lists, images etc.

• Behavior: Notes/annotations may be added as to how elements should be displayed (such as number of elements, default display etc.), or what functional behavior occur when an element is activated (popups, page refresh, link to another page, or external site etc.)

When are wireframes created?

Wireframes as deliverables are developed as a part of Information Architecture phase. It usually follows the “Business Requirements” phase of the project and precedes any graphic design and technical development.

Usually this is the role of the information architect. On smaller projects, this often become the role of the project manager.

Who is it for?

The following table shows the consumers of wireframes and how they are used.

A blueprint with which they can review whether the design meets their needs; a preview to the actual site design; Key deliverable, the signoff of which kicks of design and development phases of the project

Types of wireframes

• Content-only wireframes (aka Powerpoint wireframes): Powerpoint is used to define the key pages of the site. Name of the page, and a list of content items are captured on each page without information about layout or placement. This technique can be used to quickly capture client requirements and sketch out a site without having to go through the labor intensive work or creating detailed wireframes. Tools: Powerpoint

• Block diagram wireframes: This type of wirefames is one step higher than the Content-only wireframes in that it offers basic layout information through blocks of functionality, and content grouping. These wireframes can be used in conjunction with detailed wireframes to provide a high level strategic overview to the wireframes before diving into the details. Tools: Powerpoint, Visio

• Detailed wireframes: Fully-loaded wireframes with layout, content, web elements information along with notes and annotations on page behavior. Tools: Visio, OmniGraffle

Developing wireframes

Here are some basic steps an information architect would take when developing wireframes.

Gathering information

• Business requirements: Ideally you would already have documentation from the the Business Requirements phase. This document will spell out major site functionality, key site pages and what content/functionality would need to be presented on them.

• Content requirements: If there is no documentation from a previous phase it is important to meet with client and sketch out what needs to be presented on key pages of the site. A content-only wireframe is a good tool to do this.

• Existing design requirements: Additional information such as need to integrate with existing site guidelines or need for consistency with previous site design, etc. should also be noted.

• Bandwidth requirements Some clients may have to serve a low-bandwidth user base in which case, the design will have to be more text-reliant and less image heavy.

• Software requirements Some sites are CMS-driven or software driven (such as blogs). Many software packages have layout and navigation rules the design will have to conform to.

Prioritizing/grouping information

• Once the information has been gathered, it is important to first group and then prioritize how they need to be displayed on the page.

Navigation strategy

• Clients may have strong preferences as to how navigation should work and be placed on the page. If there is no strong preference, software requirements and usability should dictate how navigation should be configured.

Drawing wireframes

Wireframes should include:

• Key page elements & location: header, footer, navigation, content objects, branding elements

• Grouping: side bar, navigation bar, content area, etc.

• Labeling: page title, navigation links, headings to content objects

• Place holders: dummy text (lorem ipsum dolor…), and image place holders

The question often arises: how many wireframes should I create? The answer is how ever many you need to get the job done. (or in our case how ever many we said we will create). Having said this the follow should be included in any good set of wireframes:

Required:

• Homepage

• Major sub-pages and “portal” pages

• Key template pages

• Pages with forms

Optional:

• Search results page

• 404 Error pages

• Any other pages that provide clarification to the overall development process

A User Interface Management System (UIMS) is a mechanism for cleanly separating process or business logic from Graphical user interface (GUI) code in a computer program. UIMS are designed to support N-tier architectures by strictly defining and enforcing the boundary between the business logic and the GUI. A fairly rigid Software architecture is nearly always implied by the UIMS, and most often only one paradigm of separation is supported in a single UIMS. A UIMS may also have libraries and systems such as graphical tools for the creation of user interface resources or data stores.

Generally, you cannot easily use multiple UIMS systems at the same time, so choosing the correct model for your UIMS is a critical design decision in any project. The choice of system is dependent upon the system(s) you wish to create user interfaces for, and the general style of your application. For example, if you want to create a web based front end, or just a standalone application or both that would be an important factor in choosing. If you want to deploy to the Macintosh, Windows and Linux, that would further influence your choice of a UIMS system.

Summary:

Application usability is enhanced when users know how to operate the UI
and it guides them through the workflow. Violating common guidelines
prevents both.

It’s hard to write a general article about application design mistakes because the very worst mistakes are domain-specific and idiosyncratic. Usually, applications fail because they (a) solve the wrong problem, (b) have the wrong features for the right problem, or (c) make the right features too complicated for users to understand.

Any of these three mistakes will doom your app, and yet I still can’t
tell you what to do. What’s the right problem? What are the right
features? What complicating curlicues can safely be cut from those
features? For each domain and user category, these questions have
specific and very different answers.

The only generalizable advice is this: rather than rely on your own best guesses, base your decisions on user research:

• Conduct field studies and task analysis before deciding what your app should do.
• Paper prototype
  your initial ideas before doing any detailed design — and definitely
  before wasting resources implementing something you’d have to change as
  soon as you get user feedback.
• Design iteratively, conducting many rounds of quick user testing as you refine your features.

Of course, people don’t want to hear me say that they need to test
their UI. And they definitely don’t want to hear that they have to
actually move their precious butts to a customer location to watch real
people do the work the application is supposed to support.

The general idea seems to be that real programmers can’t be let out
of their cages. My view is just the opposite: no one should be allowed
to work on an application unless they’ve spent a day observing a few
end users.

(Whatever you do, at least promise me this: Don’t just
implement feature requests from “user representatives” or “business
analysts.” The most common way to get usability wrong is to listen to what users say rather than actually watching what they do. Requirement specifications are always wrong. You must prototype the requirements quickly and show users something concrete to find out what they really need.)

All that said, there are still plenty of general guidelines for
application UIs — so many, in fact, that we have a hard time cramming
the most important into our two-day course.
Here’s my list of 10 usability violations that are both particularly
egregious and often seen in a wide variety of applications.

1. Non-Standard GUI Controls

Basic GUI widgets — command links and buttons, radio buttons and checkboxes, scrollbars, close boxes, and so on — are the lexical units that form dialog design’s vocabulary.
If you change the appearance or behavior of these units, it’s like
suddenly injecting foreign words into a natural-language communication.
Det vil gøre læserne forvirrede (or, to revert to English: Doing so will confuse readers).

For some reason, homemade design’s most common victims are scrollbars. For years, we’ve encountered non-standard scrollbars in our studies, and they almost always cause users to overlook some of their options. We’re seeing this again this year, in the studies we’re conducting to update our course on Fundamental Guidelines for Web Usability. (The linked article includes screenshots of offending scroll controls.)

Some of the world’s best interaction designers have refined the
standard look-and-feel of GUI controls over 30 years, supported by
thousands of user-testing hours. It’s unlikely that you’ll invent a
better button over the weekend.

But even if your homemade design, seen in isolation, were hypothetically better than the standard, it’s never seen in isolation in the real world. Your dialog controls will be used by people with years of experience operating standard GUIs.

If Jakob’s Law is “users spend most of their time on other websites,” then Jakob’s Second Law
is even more critical: “Users have several thousand times more
experience with standard GUI controls than with any individual new
design.”

Users will most likely fail if you deviate from expectations on
something as basic as the controls to operate a UI. And, even if they
don’t fail, they’ll expend substantial brainpower trying to operate
something that shouldn’t require a second thought. Users’ cognitive
resources are better spent understanding how your application’s
features can help them achieve their goals.

1.a. Looking Like a GUI Control Without Being One

The
opposite problem — having something that looks like a GUI control when
it isn’t one — can reduce usability even more. We often see text and
headlines that look like links (by being colored or underlined,
for example) but aren’t clickable. When users click these look-alikes
and nothing happens, they think the site is broken. (So please comply
with guidelines for visualizing links.)

A similar problem occurs when something looks like a button but doesn’t initiate an action, or looks like a radio button but isn’t a choice. We found an example of this in our current round of studies.

To design a custom-tailored shirt on Liste Rouge Paris, you must
provide your measurements. As the following screenshot shows, there are
two different paths through the application here, depending on whether
your measurements are already on file with the tailor.

Our test user clicked incessantly on the New Customer
button to indicate that he was indeed a new customer. Unfortunately,
this screen element was not a button at all, but rather a non-clickable
heading.

He was the only user to test this site because he encountered
it during a task in which users could choose a site to visit (usually
from a search listing). In this case, the user eventually overcame the
confusion and proceeded to enter his measurements. If we had tested
more users, a small percentage would have likely failed at this point.
Each small error in dialog design reduces usage only by a small amount,
but most UIs contain bundles of errors, and the number of lost customers adds up.

As an aside, this screen also uses radio buttons incorrectly. In
theory, all five choices are mutually exclusive, which does call for
radio buttons. But in the user’s mental model of the workflow, there
are actually two issues
here: (a) new vs. old customers, and (b) how to provide the
measurements for your situation. You should use a single set of radio
buttons only when users will choose between options for a single issue.

So, in the case above, a better design would first ask users to
decide the new/existing customer question, and then reveal the relevant
radio buttons for the option they choose.

2. Inconsistency

Non-standard GUI controls are a special case of the general problem of inconsistent design.

Confusion results when applications use different words or commands
for the same thing, or when they use the same word for multiple
concepts in different parts of the application. Similarly, users are
confused when things move around, violating display inertia.

Using the same name for the same thing in the same place makes things easy.

Remember the double-D rule: differences are difficult.

Another example from our current study: Expedia pops up a two-month
calendar view when users specify the departure or return date for a
trip. The composite screenshot below was taken in February and shows
what happens when you want to book a trip that starts on March 10 and
ends on March 15.

In the second pop-up, the month of March has moved to the left,
leaving room for April to appear on the right. This may seem like a
convenient shortcut, since there’s no way the user would want a
February return date when traveling out in March.

In reality, however, the user is looking for March 15 in the
same spot where it appeared in the first pop-up calendar: in the
right-most column.

In our testing, the inconsistent placement of the months in the
second pop-up caused confusion and delays, but users ultimately figured
it out. We tested only a few users with this site, but if you observe
this kind of almost-miss error in user testing, it’s usually a sign that a few users will make the mistake for real during actual use.

Booking the wrong return date can have disastrous consequences —
customers could arrive at the airport without a ticket for their
expected flight. If a site has good confirmation emails,
users might discover the problem before departure, but even that will
cause aggravation and expensive customer support calls to resolve the
situation.

Even if people eventually use the calendar correctly, it takes more time to ponder the inconsistent design than the time users save by not having to click the next-month button for April departures.

The shortcut that moves the months around saves time only for
very frequent users who learn how to efficiently operate this part of
the UI. So, an application for professional travel agents should
probably use Expedia’s calendar design. A site targeting average
consumers should not.

3. No Perceived Affordance

“Affordance” means what you can do to an object. For example, a
checkbox affords turning on and off, and a slider affords moving up or
down. “Perceived affordances” are actions you understand just by looking
at the object, before you start using it (or feeling it, if it’s a
physical device rather than an on-screen UI element). All of this is
discussed in Don Norman’s book The Design of Everyday Things

.

Perceived affordances are especially important in UI design,
because all screen pixels afford clicking — even though nothing usually
happens if you click. There are so many visible things on a computer
screen that users don’t have time for a mine sweeping game, clicking around hoping to find something actionable. (Exception: small children sometimes like to explore screens by clicking around.)

Drag-and-drop designs are often the worst offenders
when it’s not apparent that something can be dragged or where something
can be dropped. (Or what will happen if you do drag or drop.) In
contrast, simple checkboxes and command buttons usually make it
painfully obvious what you can click.

Common symptoms of the lack of perceived affordances are:

• Users say, “What do I do here?”
• Users don’t go near a feature that would help them.
• A profusion of screen text tries to overcome these two
  problems. (Even worse are verbose, multi-stage instructions that
  disappear after you perform the first of several actions.)

When I tested some of the first Macintosh applications in
the mid-1980s, users were often stumped by the empty screen that
appeared when they launched, say, MacWrite. What do I do here,
indeed. The first step was supposed to be to create a new document, but
that command was not shown anywhere in the otherwise highly visible
Macintosh UI unless you happened to pull down the File menu.
Later application releases opened up with a blank document on the
screen, complete with an inviting, blinking insertion point that
provided the perceived affordance for “start typing.”

3.a. Tiny Click Targets

An associated problem here is click
targets that are so small that users miss and click outside the active
area. Even if they originally perceived the associated affordance
correctly, users often change their mind and start believing that
something isn’t actionable because they think they clicked it and
nothing happened.

(Small click zones are a particular problem for old users and users with motor skill disabilities.)

4. No Feedback

One of the most basic guidelines for improving a dialog’s usability is to provide feedback:

• Show users the system’s current state.
• Tell users how their commands have been interpreted.
• Tell users what’s happening.

Sites that keep quiet leave users guessing. Often, they guess wrong.

(For an example of the problems with poor feedback, see the screenshot of VW’s car configurator toward the bottom of my recent article reporting on our current round of testing: Because users couldn’t tell which tire was selected, they had trouble designing their preferred car.)

4.a. Out to Lunch Without a Progress Indicator

A variant on
lack of feedback is when a system fails to notify users that it’s
taking a long time to complete an action. Users often think that the
application is broken, or they start clicking on new actions.

If you can’t meet the recommended response time limits, say so, and keep users informed about what’s going on:

• If a command takes more than 1 second, show the “busy” cursor. This tells users to hold their horses and not click on anything else until the normal cursor returns.
• If a command takes more than 10 seconds, put up an explicit progress bar, preferably as a percent-done indicator (unless you truly can’t predict how much work is left until the operation is done).

5. Bad Error Messages

Error messages are a special form of feedback: they tell users that something has gone wrong. We’ve known the guidelines for error messages for almost 30 years, and yet many applications still violate them.

The most common guideline violation is when an error message simply says something is wrong, without explaining why and how the user can fix the problem. Such messages leave users stranded.

Informative error messages not only help users fix their current problems, they can also serve as a teachable moment.
Typically, users won’t invest time in reading and learning about
features, but they will spend the time to understand an error situation
if you explain it clearly, because they want to overcome the error.

On the Web, there’s a second common problem with error
messages: people overlook them on most Web pages because they’re buried
in masses of junk. Obviously, having simpler pages is one way to
alleviate this problem, but it’s also necessary to make error messages more prominent in Web-based UIs.

6. Asking for the Same Info Twice

Users shouldn’t have to enter the same information more than once.
After all, computers are pretty good at remembering data. The only
reason users have to repeat themselves is because programmers get lazy
and don’t transfer the answers from one part of the app to another.

7. No Default Values

Defaults help users in many ways. Most importantly, defaults can:

• speed up the interaction by freeing users from having to specify a value if the default is acceptable;
• teach, by example, the type of answer that is appropriate for the question; and
• direct novice users toward a safe or common outcome, by letting them accept the default if they don’t know what else to do.

Because I used Liste Rouge Paris as a bad example under
Mistake #1a, I thought I’d play nice and use them as a good example
here. The tailor offers 15 different collar styles (among many other
options) for people ordering custom-designed shirts. Luckily, they also
provide good defaults for each of the many choices. In testing, this
proved helpful to our first-time user, because the defaults steered him
toward the most common or appropriate options when he didn’t have a
particular preference.

Dialog to specify your shirt’s collar on www.listerouge-paris.com (3 of 15 styles shown).

8. Dumping Users into the App

Most Web-based applications are ephemeral applications
that users encounter as a by-product of their surfing. Even if users
deliberately seek out a new app, they often approach it without a conceptual model
of how it works. People don’t know the workflow or the steps, they
don’t know the expected outcome, and they don’t know the basic concepts
that they’ll be manipulating.

For traditional applications, this is less of a problem. Even if
someone has never used PowerPoint, they’ve probably seen a slide
presentation. Thus, a new PowerPoint user will typically have at least
a bare-bones understanding of the application before double-clicking
the icon for the first time.

For mission-critical applications, you can often assume that
most users have tried the app many times before. You can also often
assume that new users will get some training before seeing the UI on
their own. At the minimum, they’ll usually have nearby colleagues who
can give them a few pointers on the basics. And a good boss will give
new hires some background info as to why they’re being asked to use the application and what they’re supposed to accomplish with it.

Sadly, none of these aides to understanding apply for most Web-based applications. They don’t even apply for many ephemeral intranet applications.

Usability suffers when users are dumped directly into an application’s
guts without any set-up to give them an idea of what’s going to happen.
Unfortunately, most users won’t read
a lot of upfront instructions, so you might have to offer them in a
short bulleted list or through a single image that lets them grok the
application’s main point in one view.

As an example, our test user who was trying to order a
custom-tailored shirt was highly confused when the first screen in
Hamilton Shirts’ “Create Your Shirt” process displayed a fully designed
shirt with an “Add to Bag” button. This screen mixed two metaphors: a
configurator and an e-commerce product screen.

This is a case where a default value isn’t helpful: people who want
to design their own shirt are unlikely to want to buy a pre-designed
shirt on the first screen.

(This screen also suffers from Mistake #1: non-standard GUI
controls. In addition to its non-standard drop-down selection menus in
a tabbed dialog that doesn’t look enough like tabs,
the screen has a non-standard way of paging through additional fabric
swatches. Users are less likely to understand how to select fabrics
when the controls are presented in this manner.)

Our test user never understood the process of designing his own shirt on this site and ultimately took his business elsewhere.

9. Not Indicating How Info Will Be Used

The worst instance
of forcing users through a workflow without making the outcome clear is
worth singling out as a separate mistake: Asking users to enter
information without telling them what you’ll use it for.

A classic example is the “nickname” field in the registration
process for a bulletin board application. Many users don’t realize the
nickname will be used to identify them in their postings for the rest
of eternity — so they often enter something inappropriate.

As another example, we once tested an e-commerce site that
smacked users with a demand for their ZIP code before they could view
product pages. This was a big turn-off and many users left the site due
to privacy concerns. People hate snoopy sites. An alternative design
worked much better: It explained that the site needed to know the
user’s location so it could state shipping charges for the very heavy
products in question.

10. System-Centric Features

Too many applications expose
their dirty laundry, offering features that reflect the system’s
internal view of the data rather than users’ understanding of the
problem space.

In our current study, one user wanted to reallocate her retirement
savings among various investments offered by her company’s plan (for
example, to invest more in bonds and less in stocks). She thought she
did this correctly, but in fact she had changed only the allocation of future additions to her retirement account. Her existing investments remained unchanged.

As far as the mutual funds company is concerned, new investments and
current investments are treated differently. Reallocating future
additions means changing the funds they’ll buy when the employer
transfers money into the account. Reallocating current investments
means selling some of the holdings in existing mutual funds and using
the proceeds to buy into other funds.

The key insights here?

• Our test user didn’t have this distinction between new and old
  money; she simply wanted her retirement savings allocated according to
  her revised investment strategy.
• Even users who understand the distinction between new and old
  money might prefer to treat their retirement savings as a single unit
  rather than make separate decisions (and issue separate commands) for
  the new and old money.

It would probably be better to offer a prominent feature for changing the entire account’s allocation, and use progressive disclosure to reveal expert settings for users who want to make the more detailed distinction between the two classes of money.

Bonus Mistake: Reset Button on Web Forms

This mistake relates to Web forms, but because so many applications are rich in forms, I’ll mention it here: It’s almost always wrong to have a Reset button on a Web form

.

The reset button clears the user’s entire input and returns the form
to its pristine state. Users would want that only if they’re repeatedly
completing the same form with completely different data, which almost
never happens on websites. (Call center operators are a different
matter.)

Making it easy for users to destroy their work in a single click
violates one of the most basic usability principles, which is to
respect and protect the user’s work at almost any cost. (That’s why you
need confirmation dialogs for the most destructive actions.)

Eight Golden Rules of Interface Design
As a result of Interface Design Studies, Ben Shneiderman proposed a collection of principles that are derived heuristically from experience and applicable in most interactive systems. These principles are common for user interface design, and as such also for web design.

1. Strive for consistency.
2. Enable frequent users to use shortcuts.
3. Offer informative feedback.
4. Design dialog to yield closure.
5. Offer simple error handling.
6. Permit easy reversal of actions.
7. Provide the sense of control. Support internal locus of control.
8. Reduce short-term memory load.