Feeds:
Posts
Comments

Archive for the ‘Usability’ Category

W3C Validation’ Category

The following CSS selectors are considered workarounds and hacks for specific web browsers.
IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}
How to Apply Hacks
If you want to add 10px; padding to a div element called #rightpanel specifically for IE 7, then you can use the following hack:
*:first-child+html #rightpanel {
padding: 10px;
}

want to apply the padding just for IE 6, then its as following way:
* html #rightpanel {
padding: 10px;
}

Read Full Post »

1. Avoid CSS Expressions

2. Avoid Filters

3. Specify units for non-zero values, but not for zero values.

4. Don’t use quotation marks around paths/URLs when setting a background image or loading in an imported file

5. Try to avoid applying padding/borders and a fixed width to an element. Rather, apply padding to the parent element.

6. Minimize number of ID’s used

7. Minimize number of classes used

8. Don’t use anchors, instead use ID’s.

9. Combine selectors.

10. Use good naming conventions

11. Never use layout descriptives in class names.

12. Use functional names for your classes.

13. Always use intention revealing classnames

14. Avoid using the same classname for different purposes.

15. Always use the same classname for similar purposes.

16. Put your classname on the outer-most element. The child elements can be targeted with the parent elements classname or ID.

17. Declare relative font sizes instead of absolute.

18. Avoid !important.

19. Code link pseudo-classes in this order: Link, Visited, Hover, Active.

20. Minify CSS

21. Optimize CSS Sprites

Read Full Post »

Best Practices of HTML

1. Doctypes
By using a certain DOCTYPE (strict or transitional) you claim to have correctly implemented a certain (X)HTML flavor:
2.XHTML
Make all your tags lower case (<p> instead of <P>);
Close all your tags, even empty ones (<br /> and <hr /> instead of<BR> and <HR>);
Make all attribute names lower case and quote all attribute values; and onmouseover instead of onMouseOver;
Give empty attributes a value—such as <input type=”checkbox” checked=”checked” /> instead of <INPUT TYPE=checkbox CHECKED>;
3. Black List
Some HTML tags have been deprecated. There are excellent CSS equivalents
4. Put Stylesheets at the Top
5. Put Scripts at the Bottom
6. Make JavaScript and CSS External
7. Avoid Redirects
8. Minimize the Number of iframes
9. No 404s
10. Choose <link> over @import
11. Optimize Images
13. Don’t Scale Images in HTML
14. Make favicon.ico Small and Cacheable
15. Keep Components under 25K
16. Never Use Inline Style
17. Never Use Inline Javascript.
18. Tag Names Lowercase19. Use H1 – H6 Tags
20. Wrap Navigation with an Unordered List
21. All Images Require “Alt” Attributes
22. Validate Continuously

Read Full Post »

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.

Read Full Post »

What is Usability

1 Usability definition:
As defined in ISO 9241-11 1 The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use

2 Parameters of usability
1. Effectiveness : Task Completion
2. Efficiency : Lesser time / clicks
3. Satisfaction : Pleasurable activity

3 Benefits of Usability
Benefits to Users User satisfaction à User Delight More ease of use Efficiency increases Shorter learning cycle User perceived quality improved Benefits to Developers User oriented thinking = Reduction in rework Designing for the users and not (only) Clients Benefits to business Product quality improvement More value delivered à Priced higher Increased Profitability 4 Why Usability is important Other sources report : “There are about 43 million Web sites, and no one knows which ones are usable. The best sites we’ve found are usable only 42 percent of the time, and none that we have studied are usable a majority of the time ….” Forrester Research : Losing approximately 50% of the potential sales from a site as people can’t find what they need Losing repeat visits from 40% of the users who do not return to a site when their first visit resulted in a negative experience Jacob Nielsen : “Studies of user behavior on the Web find a low tolerance for difficult designs or slow sites. People don’t want to wait. And they don’t want to learn how to use a home page. There’s no such thing as a training class or a manual for a Web site. People have to be able to grasp the functioning of the site immediately after scanning the home page — for a few seconds at most.”

5 Usability Engineering Goals
1. Compatibility (with the user) – Computer speaking my language
2. Learn ability – I can do that.
3. User friendliness – Easily
4. Effectiveness A – Accomplish user goals.
5. Effectiveness B – Business goals fulfilled.
6. Efficiency – faster.
7. User Satisfaction – Alright ! it was smooth !
8. User Delight – Wow I did not expect this.
9. Flexibility – good ! You could do it this way also, (Ctrl C Ctrl V)
10. Excellent User Experience.

6 Usability Engineering Definition An Evidence based methodology that involves end users throughout the development process to product information systems that are measurably easier to use, learn and remember. — By Jean Fox, Janice R. Nall.

7 Understand the users
1. Who are the users of this specific product?
2. What are their User specific & Use specific needs?
3. What are the users goals for using this product?
4. Which areas are critical for meeting the user goals efficiently?
5. What other products they have used?
6. What is the terminology they use?

8 Model of stages of use Model for Stages of Use (for a particular application)
1. Novice
2. Advanced Beginner
3. Competent Performer
4. Expert “User and Task Analysis for Interface Design” by Joann T. Hackos, Janice C. Redish

9 GUI Design Process
1. Understand the Users
2. User goals, Business goals
3. User specific and use specific tasks
4. Define features
5. Design the work flow
6. Design the information structure
7. Design the front end

10 Usability Methods
1. Card Sorting Technique that allows users to group the information on your Web site and helps to ensure that the site structure matches the way users think.
2. Contextual Interviews Method that enables you to observe users in their natural environment to better understand the way users work.
3. Focus Groups Moderated discussion with a group of users that allows you to learn about users’ attitudes, ideas, and desires.
4. Heuristic Evaluation Usability inspection method where a group of usability experts evaluate the Web site against a list of established heuristics (or guidelines).
5. Individual Interviews One-on-one discussions with users that allow you to learn how a particular user works and enables you to probe on a user’s attitudes, desires and experiences.
6. Parallel Design Technique where multiple designers create mock-ups of the user interface and the best aspects of each design are used in the final design.
7. Personas A fictional person that represents one of the major user groups for the site. The design team considers the needs of this fictional person when developing the site.
8. Prototyping Draft model (or mock-up) of the Web site that allows the design team to explore ideas before fully implementing them. A prototype can range from a paper mock-up to interactive html pages.
9. Surveys (Online) Series of questions asked to multiple users of the Web site that helps you learn about the people who visit your site.
10. Task Analysis Method that involves learning about users’ goals – what they want to do on your Web site – and understanding the tasks that users will perform on your site.
11. Usability Testing One-on-one sessions where a “real-life” user performs tasks on the Web site in order to identify user frustrations and problems with the site.
12 Use Cases Description of how users will use a particular feature of the Web site. Use cases provide a very detailed look at how users interact with the site including the steps a user will take to accomplish each task. 13 Writing for the Web Guidelines for optimizing content on the Web based on the way users read online. Involves chunking content, using bulleted lists, and putting the most important information at the top of the page.

11 Heuristic guidelines for usability testing
1) System Status shown (Keep the user informed about what the computer is doing) Providing feedback to the users Appropriate method of feedback to be used
2) Match with the real World Use simple and natural dialog. Tell only what is necessary, and tell it in a natural and logical order. Ask only what the user can answer. Speak Users language Use metaphors familiar to users Use words and concepts familiar in their work. No computer jargon.
3) User has to feel he is in command Provide clearly marked exits so users can escape from unintended situations User should be able to leave an unwanted state Users should not get locked in the system
4) Consistency in terminology and required actions. Consistency in communication Names, Images Use sequence, Use of Controls Behavior of controls
5) Error prevention Prevent errors from occurring by keeping choices and actions simple UI should prevent an error from occurring Minimize error situations
6) Error Recovery Give good, clear, specific and constructive error messages in plain text, no beeps and codes Error messages should Clearly indicate the problem Constructively help users solve the problem Be polite and express in plain simple language
7) Recognition not recall Minimize the user’s memory load Objects and screens should be Easily visible Easy to interpret User should not be forced to remember any information
8) Flexibility Provide shortcuts for frequent actions and advanced users Provide multiple ways to accomplish the same task If possible provide freedom to customize the system
9) Minimalist Design “Less is More” Offer only relevant information and functions Make invisible all the irrelevant information & functions Seek minimum inputs from the users
10) Help and Documentation (Provide clear and concise, online help, instructions and documentation. Orient them to the users task) Anticipate where users will require help Provide appropriate help

Read Full Post »

Breadcrumbs In Web Design

What is a breadcrumb?

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

We can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner. We also see them in Web applications that have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.

In this article, we’ll explore the use of breadcrumbs on websites and discuss some best practices for applying breadcrumb trails in 123Greeting website.

Breadcrumbs?

Use breadcrumb navigation for large websites and websites that have hierarchically arranged pages. An excellent scenario is e-commerce websites, in which a large variety of products is grouped into logical categories.

We shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine if a website would benefit from breadcrumb navigation is to construct a site map or a diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories.

Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; a secondary navigation scheme that allows users to establish where they are; and an alternative way to navigate around your website.

Types of Breadcrumbs

There are three main types of breadcrumbs.

Location-based (2) Attribute-based (3) Path-based

123Greetings used Location-based breadcrumbs. Location-based breadcrumbs show the user where they are in the website’s hierarchy. They are typically used for navigation schemes that have multiple levels (usually more than two levels). Each text link is for a page that is one level higher than the one on its right.

Benefits of Using Breadcrumbs

Here are just some of the benefits of using a breadcrumb trail.

Convenient for users

Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.

Reduces clicks or actions to return to higher-level pages

Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page, users can now use the breadcrumbs with a fewer number of clicks.

Doesn’t usually hog screen space

Because they’re typically horizontally oriented and plainly styled, breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.

Reduces bounce rates

Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail may tempt that user to click to higher-level pages to view related topics of interests. This, in turn, reduces the overall website bounce rate.

 

 

 

 

 

 

 

 

Original article: http://www.smashingmagazine.com

Read Full Post »

What is Usability

1
The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use
Benefits to business
  • Product quality improvement
  • More value delivered à Priced higher
  • Increased Profitability
Other sources report :
“There are about 43 million Web sites, and no one knows which ones are usable. The best sites we’ve found are usable only 42 percent of the time, and none that we have studied are usable a majority of the time ….”
Forrester Research :
  • Losing approximately 50% of the potential sales from a site as people can’t find what they need
  • Losing repeat visits from 40% of the users who do not return to a site when their first visit resulted in a negative experience
Jacob Nielsen :
“Studies of user behavior on the Web find a low tolerance for difficult designs or slow sites. People don’t want to wait. And they don’t want to learn how to use a home page. There’s no such thing as a training class or a manual for a Web site. People have to be able to grasp the functioning of the site immediately after scanning the home page — for a few seconds at most.”
1. Compatibility (with the user) – Computer speaking my language
2. Learn ability – I can do that.
3. User friendliness – Easily
4. Effectiveness A – Accomplish user goals.
5. Effectiveness B – Business goals fulfilled.
6. Efficiency – faster.
7. User Satisfaction – Alright ! it was smooth !
8. User Delight – Wow I did not expect this.
9. Flexibility – good ! You could do it this way also, (Ctrl C Ctrl V)
10. Excellent User Experience.

An Evidence based methodology that involves end users throughout the development process to product information systems that are measurably easier to use, learn and remember.

— By Jean Fox, Janice R. Nall.

1. Who are the users of this specific product?

2. What are their User specific & Use specific needs?

3. What are the users goals for using this product?

4. Which areas are critical for meeting the user goals efficiently?

5. What other products they have used?

6. What is the terminology they use?

Model for Stages of Use (for a particular application)

1. Novice
2. Advanced Beginner
3. Competent Performer
4. Expert

“User and Task Analysis for Interface Design” by Joann T.
Hackos, Janice C. Redish

1. Understand the Users
2. User goals, Business goals
3. User specific and use specific tasks
4. Define features
5. Design the work flow
6. Design the information structure
7. Design the front end
1. Card Sorting
Technique that allows users to group the information on your Web site and helps to ensure that the site structure matches the way users think.
2. Contextual Interviews
Method that enables you to observe users in their natural environment to better understand the way users work.
3. Focus Groups
Moderated discussion with a group of users that allows you to learn about users’ attitudes, ideas, and desires.
4. Heuristic Evaluation
Usability inspection method where a group of usability experts evaluate the Web site against a list of established heuristics (or guidelines).
5. Individual Interviews
One-on-one discussions with users that allow you to learn how a particular user works and enables you to probe on a user’s attitudes, desires and experiences.
6. Parallel Design
Technique where multiple designers create mock-ups of the user interface and the best aspects of each design are used in the final design.
7. Personas
A fictional person that represents one of the major user groups for the site. The design team considers the needs of this fictional person when developing the site.
8. Prototyping
Draft model (or mock-up) of the Web site that allows the design team to explore ideas before fully implementing them. A prototype can range from a paper mock-up to interactive html pages.
9. Surveys (Online)
Series of questions asked to multiple users of the Web site that helps you learn about the people who visit your site.
10. Task Analysis
Method that involves learning about users’ goals – what they want to do on your Web site – and understanding the tasks that users will perform on your site.
11. Usability Testing
One-on-one sessions where a “real-life” user performs tasks on the Web site in order to identify user frustrations and problems with the site.
12 Use Cases
Description of how users will use a particular feature of the Web site. Use cases provide a very detailed look at how users interact with the site including the steps a user will take to accomplish each task.
13 Writing for the Web
Guidelines for optimizing content on the Web based on the way users read online. Involves chunking content, using bulleted lists, and putting the most important information at the top of the page.
1) System Status shown
(Keep the user informed about what the computer is doing)
Providing feedback to the users
Appropriate method of feedback to be used
2) Match with the real World
Use simple and natural dialog. Tell only what is necessary, and tell it in a natural and logical order. Ask only what the user can answer.
Speak Users language
Use metaphors familiar to users
Use words and concepts familiar in their work.
No computer jargon.
3) User has to feel he is in command
Provide clearly marked exits so users can escape from unintended situations
User should be able to leave an unwanted state
Users should not get locked in the system
4) Consistency in terminology and required actions.
Consistency in communication
Names, Images
Use sequence, Use of Controls
Behavior of controls
5) Error prevention
Prevent errors from occurring by keeping choices and actions simple
UI should prevent an error from occurring
Minimize error situations
6) Error Recovery
Give good, clear, specific and constructive error messages in plain text, no beeps and codes
Error messages should
Clearly indicate the problem
Constructively help users solve the problem
Be polite and express in plain simple language
7) Recognition not recall
Minimize the user’s memory load
Objects and screens should be
Easily visible
Easy to interpret
User should not be forced to remember any information
8) Flexibility
Provide shortcuts for frequent actions and advanced users
Provide multiple ways to accomplish the same task
If possible provide freedom to customize the system
9) Minimalist Design
“Less is More”
Offer only relevant information and functions
Make invisible all the irrelevant information & functions
Seek minimum inputs from the users
10) Help and Documentation
(Provide clear and concise, online help, instructions and documentation. Orient them to the users task)
Anticipate where users will require help
Provide appropriate help

Read Full Post »

Older Posts »