Responsive Web Design

Posted in: Techniques- Mar 26, 2012 No Comments

Built my first responsive website.

View Website

Responsive Web Design Techniques, Tools and Design Strategies

Responsive design continues to get a lot of attention, but considering how different it is from the “traditional” way of designing websites, it can be a bit overwhelming for those designers who have yet to try it.

To that end, we’ve compiled this round-up of resources for creating responsive website designs. Included are tutorials, techniques, articles, tools and more, all geared toward giving you the specific knowledge you need to create your own responsive designs.

[Note: Have you already pre-ordered your copy of our Printed Smashing Book #3? The book is a professional guide on how to redesign websites and it also introduces a whole new mindset for progressive Web design, written by experts for you.]

Read More

Contextual Inquiry

Posted in: Usability Methods- Mar 30, 2011 No Comments

Contextual inquiry is basically a structured field interviewing method, based on a few core principles that differentiate this method from plain, journalistic interviewing. Contextual inquiry is more a discovery process than an evaluative process; more like learning than testing.

When should I use this technique?

Contextual inquiry is one of the best methods to use when you really need to understand the users’ work context. Many times, the environment in which people work really influences how people use a product.

This technique is best used in the early stages of development, since a lot of the information you’ll get is subjective–how people feel about their jobs, how work or information flows through the organization, etc.

Heuristic Evaluation

Posted in: Usability Methods- Mar 30, 2011 No Comments

Heuristic – A general formula that serves to guide investigation.

What is a usability expert review?

With a usability expert review, an evaluator uses a product or web site and assesses its usability against a set of principles or best practice guidelines. Expert reviews are popular because they are much quicker and cheaper to carry out than a usability test.

Jakob Nielsen’s ten usability heuristics. Molich and Nielsen’s ten guidelines are as follows.

1) Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

2) Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

3) User control and freedom

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

This heuristic states that you protect users from mistakes and give them the freedom and power to undo a mistake when they make one.

For example:

  • Don’t make important irreversible actions easy to perform;
  • Offer undo and redo options;
  • Provide clearly marked “emergency exit” signs; and
  • Ask for ‘confirmation’ whenever you can, without being annoying or overprotective.

4) Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

5) Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place.

6) Recognition rather than recall

Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

7) Flexibility and efficiency of use

Accelerators – unseen by the novice user – may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

This heuristic states that your Web site’s interface should be flexible and efficient to use.
Flexibility
You should offer your users a number of options when it comes to finding content on your site.
These include:
  • Hyperlinks;
  • Basic search form;
  • Advanced search form;
  • Site map; and
  • Alphabetical index.
Efficiency
Your users should be able to achieve their goals in an efficient manner.
To maximize efficiency, you should:
  • word hyperlinks properly; preferably with the title of the page the link leads to;
  • make sure search results should include a description of the link, in addition to the title of the page;
  • design your site map in a logical manner; and
  • provide an alphabetical index which includes as many categories, content areas, departments and keywords as possible.

8) Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

9) Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

10) Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

Usability Guidelines for Adult Group (40+)

Posted in: Usability- Feb 19, 2011 No Comments

I am working on a project where targeted user are 40+  I have made a guidline before starting designing.

Introduction

People are living longer in the western world. At least 70% will live past age 65, and about 40% past age 80. Unfortunately, there are definite, predictable degenerative effects of aging on a person’s ability to effectively and efficiency interacts with Web-based systems.

One effect of aging is diminished vision – loss in near vision, reduced field of view and contrast sensitivity, and reduced color sensitivity in the blue-green range. Psychomotor impairments include increased response time, and poorer tracking with a mouse. Also, older users experience reduced attention, and reduced memory capability, including working memory, episodic memory and procedural memory. Studies show that many Web sites clearly are not designed with the aged in mind.

Some of their most important guidelines for seniors included:

  • Avoid use of effective materials that will have a simple design with sharp contrast between text and background
  • The organization of the web site should be simple and straightforward. Use explicit step-by-step navigation procedures whenever possible to ensure that people understand what follows next. Carefully label links.
  • Use a standard page design and the same symbols and icons throughout. Use the same set of navigation buttons in the same place on each page to move from one web page or section of the web site to another. Label each page in the same location with the name of the web site.
  • Use dark type or graphics against a light background, or white lettering on a black or dark-colored background. Avoid patterned backgrounds.
  • Provide large targets, e.g., larger clickable graphics, for the mouse pointer.
  • To reduce the number of clicks, do not require double clicking, use pull-down menus, nor have a deep hierarchy.
  • Concentrate important information in the top central location of a home page or other Web page.
  • Avoid the need to scroll down for information.
  • Present body text in upper and lowercase letters. Use all capital letters and italics in headlines only.
  • Put most links in a bulleted list (not tightly clustered), and differentiate between visited and unvisited links.
  • Present information in a clear and familiar way to reduce the number of inferences that must be made. Use positive statements.
  • Phrasing Use the active voice. Write the text in simple language. Provide an online glossary of technical terms.
  • Use few colors, and avoid using blue and green tones in close proximity. These colors and juxtapositions are difficult for some older adults to discriminate.
  • When text must be read or scanned, use 12-14 point sans serif (Arial, Verdana) black text on a white background.
  • The text should be left justified, and have increased spacing (leading) between lines.
  • The main body of the text should be in sentence case, rather than all capital letters.
  • The text should have appropriate, large headings in 14-16 sans serif font.
  • Use short segments to reduce download time on older computers.
  • Provide text alternatives such as open-captioning or access to a static version of the text for all animation, video, and audio.

Certified Usability Analyst (CUA) Jatin Parmar

Posted in: Usability- Feb 19, 2011 No Comments

I cleared CUA™ (Certified Usability Analyst) Exam of HFI on 13 December 2008.

I am very happy & excited now, but I know this is only the first step towards Usability Exprience, still a very big mountain to climb.