Case Study: Reaching Wider Audience with Enhanced Visibility

Background

Founded in 2005 with 3 partners, Vector Consulting Group is now the leading player in the area of Theory of Constraints consulting in India and South East Asia. Vector employs TOC philosophy to bring about quantum jump in performance of organizations in its target industry clusters. They partner with clients till they realize the targeted benefits.

Web marketing being inexpensive, yet sophisticated and effective if done right – made Vector hunt for a suitable vendor in IDYeah Creations to relook at their corporate branding and communications through public domain: web site.

Challenge

Vector’s main objective behind its recent site revamp was to position the company as the leader in the space of “Theory of Constraints” based management consulting. Vector’s key differentiator from competitors is their array of “guiding principles” on which they base their business operations:  Benefits Sharing; Ownership of Results; Trust; and Respect for the Individual.

In order to successfully convey the Vector way of messaging, it was essential that the new site design maintain a steady balance between both the “serious” consulting and the “innovative” engagement aspects of Vector’s services and products.

IDYeah worked with Vector Consulting Group’s founder members to keep the overall tone and structure of site content in line with the corporate brand and offerings strategy. From a design perspective, IDYeah established a consistently innovative visual tone for the site that could be complemented with various graphic elements to infuse a much-needed dynamism without losing the overall intent – of connecting better with the visitors and inspiring trust and confidence as a brand.

Launched in June 2009, the new web site clearly establishes Vector as the leader in its category and provides web site visitors with company, solutions, and industry information that is structured for easy access to the content that they seek.

User & Task Analysis

IDYeah’s User Profiling and Task Analysis served as the foundation for the establishment of the global site architecture and use case workflows. The range of user needs for access to information (i.e. CIO seeking consulting case studies vs. CTO seeking product features) required a detailed “user to task” analysis exercise to determine what online functionality was most valuable to each identified user type. By focusing on functionality and key features for particular user groups, IDYeah was able to identify and quantify at a granular level the key tasks and valued content areas across a wide range of Vector’s site visitors.

Expert Evaluation

 

• Top Navigation not prominent


• Industry clusters/focus not visible


• Logo and symbol eating up precious real estate on screen


• Not scalable to accommodate increasing number of case studies


• Not scalable to highlight the authored media materials on the competence and success stories


• Overall tone and structure either leaving the visitor without much information or taking repeated and prolonged efforts


• Visual appeal of a leader in its space missing


• Corporate logo and product logos not consistent and progressive


• Over-design and excessive use of Flash – hampering the effectiveness of SEO

Information Architecture

Vector’s priority requirement in establishing the information architecture for site content areas was to establish clear, visitor-specific paths to site information. To achieve the balance between product/service promotion and communication of expertise, IDYeah created a meaningful taxonomy for the site that divided the information into 3 Industry Clusters to help direct the users to relevant content. In tandem with developing the site architecture, IDYeah also developed a crisp information workflow on the Home page providing information seekers with an “at-a-glance” reference to core space and expertise of Vector. Per Industry cluster, following workflow was suggested, designed, and implemented:



 

IDYeah Creations employed DesignWave Consultancy as the Design Partner and Inkey Solutions as the Technology Partner to arrive at the desired outcome.

User Interface Design

 


 
After generating wireframes on the initial concept, and having them in place, IDYeah began applying visual design treatments to the UI foundation to create a look and feel that would support Vector’s repositioning goals. An initial set of digital mockup directions that spanned a range of tone and attitude. From this set, a single direction was chosen and refined to become the new outline face of Vector.

Benefits

• Strong re-branding and re-positioning


• Increased site traffic and qualified set of business inquiries


• Platform for sharing expertise through expert literature


• Improved in-bound marketing and sales

Simplicity Principle

SIMPLICITY.

We saw few examples and points on one of the principles of user interfaces - structure. This features focuses on Simplicity.

Why do you need your site to be simple?

Site visitors will rarely visit your site to "enjoy" the design. The design should be very transparent and complementary to the content. From the visitor's point of view, the best design is pure text that echoes the content they're looking for. Nobody really has the time and patience to interpret your design. Remember, the complexity and abstractness that some design concept introduces does not command any appreciation for the hard work that's perhaps gone into creating the design. Strive for simplicity - easy to comprehend layout and text.

How can you achieve simplicity in your web site?

The idea is to achieve a perfect blend of details and their presentation on screen.

• Use graphics sparingly and meaningfully; also make sure it's light on size.


• If short text is sufficient, avoid having complex wordings. For ex: Use "Search" instead of "Quick Keyword Search" for your search functionality.


• Use suggestive and direct icons that are consistent with web terminology and use less space on screen.


• Use colors and fonts sparingly.


• Do not use jarring animations and advertisements.


• White/Blank Space is underrated; use it effectively.


• Use elements that work consistently across all browsers (HTML + CSS); avoid elements that cause issues across different environments (JavaScript, Flash).

Few examples of Simple web sites:

• blejskam


• enso


• artypapers


• distinct


• symphony cms


• opened hand


• jgm


• open communications

KISS philosophy has been around since the dawn of web site design. KISS does not mean boring and dull sites. It is possible to create great looking sites and still keep it simple using simple techniques, as exemplified in the above list of sites. Concept of simplicity is more complex than it may seem; but achievable.

Stay on for more discussions and examples on principles of user interfaces.

Structure Principle

STRUCTURE.

In my blog post, Principles of User Interface Design, we touched on various aspects of user interfaces. This feature will discuss few specific points of one of the aspects - Structure - followed by few examples.

Why do you need your site to be structured?

Well, you need your customers/prospects to understand quickly what need of theirs will your product/service fulfill. It is important for the visitors to find relevant information quickly, and get easy access to additional information if necessary. Your public domain, which is the place for introducing all that you do, can and will change in the future. Having a good and expandable structure would make this job easy and seamless. Having a good structure (which also means not random, but structured set of keywords) will also make the site findable on search engines. The customer also needs to have alternate paths to key areas and information on the site for better decision-making.

How can you achieve structure in your web site?

Main idea is to establish the information architecture for site content areas in providing clear, visitor-specific paths to useful and relevant information.

• Internal site linking structure - have logical grouping/linking between main navigational elements (either left or top) and secondary/direct navigation (right, center, or bottom).


• Linking between sections - have good cross-linkages and quick jumps to important sections of your site (for example: customer stories, case studies, thought-leadership blogs).


• Page-specific navigation - it is not a bad idea to design page-specific navigation and access to information. In fact, each page has to serve a specific purpose and it's a mistake to have all pages behave the same in a large site. For example, "About us" section needs to be very different than a section about "Products/Services" not just in presentation and writing style, but also in flow.


• Keywords as sections - site visitors will feel at home with the structure of the site, if we make user keywords as section names.


• Site Exits - design specific click-to-action elements for a logical exit from your site. For example: Inquiry Forms, Downloads, Feedback, Sign-ups, Share/Like.

Few examples of sites with good structure:

• mozilla


• vector consulting


• protolize


• sumagency


• greenpepper


• bearskinrug


• bbc


• usa gov


• abebooks


• rotten tomatoes

Structure it now; structure it well.

Stay with us for more features on other principles with more examples.

Reasons for Branding Usability Revamp

Branding and Usability

The visual identity created for a brand translates the brand strategy into clear, distinctive messages. Strategic identity stems from the core values of the company, expressing a consistent and unique vision. This ensures strong associations in the mind of the customer, inspiring trust and respect in the long term; beyond the life of any single product or service.

Rationale and Advantage

• Bring out Conceptual Message and USP


• Fulfill business inquiries with ease


• Reduce maintenance costs


• Increase customer satisfaction


• Grow competitive advantage


• Eliminate over design


• Increase accessibility to relevant information


• Increase sales and revenue


• Share right content in the right form


• Showcase Products, Solutions, Services, and Customers

It is far too important for your brand identity and brand strategy to be consistent and complementary. Make sure you use your public domain (logo, web site, social media, blogs, etc.) in high synchronization with your brand. Knowing your current and future audience (customers, employees, partners, investors) is very important while achieving consistency in branding revamp.

Good luck!

Techniques/Guidelines for User Interface Creation

GRAPHICAL USER INTERFACE - visualizes complexity to make confusing and business technology issues clear, concise and concrete; helping people to make better, faster decisions, leading to action and results.

We've discussed examples of many principles and concepts of usability and user interface design in the previous blog posts. This feature lists down several concrete techniques and steps to be followed while creating a user interface. Future posts will cover most of these guidelines in depth with live examples.

• Consistency
  
  
  
  • Buttons/Menus in consistent places on all screens
  
  
  • Same wording in labels/titles and messages
  
  
  • Consistent color scheme
  
  
  
  


• Standardization
  
  
  
  • Setting standards and sticking to those; for example: Agile Modeling Standards
  
  
  
  


• Holding the line
  
  
  
  • Control over “unusual ideas” on how the screen should look like, by re-iteration of corporate goals, application needs and standards
  
  
  
  


• Explanation of rules
  
  
  
  • Application to “explain” rules to end-users to perform their tasks
  
  
  
  


• Navigation (external)
  
  
  
  • Easy access to relevant functional screens, from all screens
  
  
  
  


• Navigation (internal)
  
  
  
  • Co-relation of logical eye movement of user and the functional flow within a screen
  
  
  
  


• Terminology
  
  
  
  • Text (primary source of information for users) – proper choice of words
  
  
  • Less abbreviations; more complete words/sentences
  
  
  • Informative error messages
  
  
  
  


• Understanding UI widgets
  
  
  
  • Right widget for the right task
  
  
  
  


• Drawing parallel
  
  
  
  • Looking at other similar applications for standards/guidelines of usability
  
  
  • Avoiding imitation of user interface
  
  
  
  


• Color
  
  
  
  • Sparing use
  
  
  • Secondary indicator
  
  
  
  


• Contrast Rule
  
  
  
  • Dark text on Light background
  
  
  • Light text on Dark background
  
  
  
  


• Alignment
  
  
  
  • Organization of UI elements (left justified, right justified, etc.)
  
  
  
  


• Expecting mistakes
  
  
  
  • Designing for users to recover from their mistakes
  
  
  
  


• Intuitive design
  
  
  
  • Empowering users to make educative guesses for using the application
  
  
  
  


• Evolutionary approach
  
  
  
  • Mock-up, prototype leading to final output
  
  
  
  


• Grouping
  
  
  
  • Grouping logically connected items
  
  
  • Separating disconnected items
  
  
  
  

Remember, in order to reduce operating and opportunity costs, it's better to build it right the first time. More to follow on this subject...

Usability Characteristic: "Easy To Learn"

The last feature in Usability Characteristics. An easy to learn site/product is one that supports both the initial orientation and continued learning throughout the complete lifetime of use.

Most usability exercises applied to sites and products achieve an end result that assures low entry barrier, i.e., initially easy to learn. However, very few result in having the same ease of learning in a sustained usage. In other words, we need to exercise usability in anticipation of future directions of the product to see that it's not just easy to learn, but easy to master as well.

Few examples of products that are easy-to-learn:

• google sketchup


• solidworks


• yahoo! messenger


• adept tracker


• microsoft sql server 2005 express


• neopaint


• alice


• real software

Generally, easy to learn interfaces allow users to build on their prior knowledge. Also, it allows them to build on any interaction patterns they have learned through use in a predictable way. Consistency in user interfaces drives predictability. Software products that achieve and maintain consistency even across years of upgrade are the easiest to learn and master. For instance, keeping terminology unchanged, having design elements and controls in familiar location, maintaining similar behavior for similar functions, and so on. Users see what they expect to see. This philosophy lays the foundation for the process of user observation and task analysis, leading to superior usability and user experience from a learning angle.

Watch this space for more discussions and guidelines around usability.

Usability Characteristic: "Error Tolerant"

Error Tolerant User Interface.

Your site/application ideally needs to prevent user errors and provide easy means to recover from them if they occur. This characteristic is also far too critical to be ignored or taken lightly. For achieving this, your current site or application may need a strong revamp, focusing on all critical tasks and paths of the user; the steps involved; the language used; alternate and recovery paths available; error message structuring; guiding tips and instructions; memory features; and so on. Basically, everything that makes the intended audience to explore and make optimum use, without fear - about loss of time and effort.

An error-free system, while being the ultimate desire, is far from being a reality. It may be far more usable, if the system considers comprehensible error-messages as part of its user interface, and with possible inclusion of a clear description and direct links to correct the problems. Some guidelines based on Whitney Quesenbery's theory and research, to make your interface error-tolerant are:

• Make it difficult to take incorrect actions; Design links and buttons to be distinctive, use clear language, avoid technical jargon, and make dependent and relevant fields appear together


• Make it difficult to take invalid actions; Limit user choices, provide clear examples for data entry, present appropriate navigation options


• Make it difficult to take irreversible actions; Provide back-tracking capability, provide undo/redo, avoid dead screens, don't indiscriminately use confirmations


• Plan for the unexpected; Allow user to add new entries, take exceptional routes through the interface, make choices you did not predict

It is important for the interface to be polite about correcting mistakes that typical arise from lack of foresight - that of the designer/developer.

I'm hunting for some good examples to add to this post, as done in my previous features. Feel free to contribute if you have any thoughts and suggestions. I'll update this feature with examples, very soon.

Next Characteristic: Easy To Learn.

Usability Characteristic: "Engaging"

The previous two posts saw examples of effective and efficient sites. This feature focuses on the "engaging" characteristic of a user interface.

An interface that's confusing or difficult to read; that fails to draw users into their tasks - generally fail in the "engaging" department from a functional aspect. Apart from this, an interface should be pleasant and satisfying to use, to qualify as engaging. Clearly, visual design and communication is the key here. The style, presentation, colors, fonts, graphic images, illustrations, etc. invoke immediate user reaction. Readability of content and clarity in interaction styles also matter a lot in an engaging relationship between the user and the site/application. Also, certain deterrent elements like an abstract image or an audio/video clip or a peel-away banner can add up to the engagement quotient.

At the risk of sounding repetitive about something painfully obvious - just like other usability characteristics, this aspect also demands that the design meet the expectations and needs of the people who must use the interface. In some ways, this post echoes some principles of the desirable philosophical dimension discussed in an earlier post.

Few examples:

• thomson reuters


• sap


• adidas


• sony style


• harley davidson


• accenture


• dell


• facebook


• google

Apparently, most well-known brands as above pay sincere attention to this aspect of usability - as an integral contributor towards brand loyalty and retention. A scientific approach towards achieving and measuring the engagement quotient is to conduct user satisfaction surveys and psychological interviews - aiming to gauge the patterns of user acceptance and user attitude. More detailed view of achieving this and other characteristics of usability will be discussed in a separate series of blog articles soon.

Please share your opinions.

Next topic: Error Tolerant User Interfaces.

Usability Characteristic: "Efficient"

Of the usability characteristics, effectiveness is often confused with efficiency; but they are not the same. Efficiency is concerned primarily with how quickly a task can be completed. Whereas effectiveness, as we saw in the last feature, concerns itself with completeness and accuracy of a task.

ISO 9241 defines efficiency as:

The total resources expended in a task.

Measurable parameters of efficiency are the number of mouse-clicks and keystrokes required or the total time on task. Layouts with visual elements that are designed with visible contrast, with proper text, and good logical placement - define clear user actions and choices, resulting in an efficient user interface. Also keyboard shortcuts, alternate menu navigational paths, and buttons all contribute towards efficiency.

The most common example of efficiency is the design and use of CTRL+C, CTRL+X, and CTRL+V in case of Windows - respectively the shortcut keys assigned to Copy, Cut, and Paste data. Though it may seem like portions of seconds or a few seconds saved while doing this operation, imagine the repeatability of these functions, which add up to a huge time-saving. Having FAQ sections on complex sites also lead to efficiency of use, where the recipe is to provide some quick answers/guidelines to common queries and doubts, rather than only keeping them embedded inside an ocean of content.

Few examples of efficiency:

• google


• godaddy


• northern light


• dropbox


• sofa


• gettyimages


• moneycontrol


• justdial

For sites and products to be more efficient, the focus in the iterative design process should be on the time taken for achieving the goal by the intended audience. It can be clicks, keystrokes, page views, search results...anything that has a quantifiable co-relation with time.

Thoughts?

Next 'E' to follow after this feature - Engaging.

Usability Characteristic: "Effective"

The first of the five usability characteristics - EFFECTIVE.

Effectiveness is measured by the completeness and the accuracy with which the intended users achieve their specific goals. The typical characteristics of an effective user interface are:

• clear terminology - in the user's language and appropriate to the task


• good, comprehensible choices on screen


• easy navigation; alternate means of navigating to an outcome, in complex situations (unfamiliar domain)


• quality user assistance/instructions

ATM machine and Calculator are perhaps two greatest examples of an "effective" system user interface.

Few web examples of effective design:

• eleven2


• enso


• finch


• amazon


• arstechnica


• mashable


• 37signals


• traffik


• wordpress


• readwriteweb


• crunchbase

The examples can continue to flow; but basically we need to appreciate the overlaps between various philosophical and practical dimensions of usability that are apparent in the examples. These are a blend of focusing on being effective, and striking some balance amongst other characteristics like useful, usable, findable, and so on.

Generally, usability and user-centered design is an iterative process and finding a balance between different characteristics for the specific design context is an important part of the user and task analysis. For sites and products that need to have greater emphasis on being effective, the iterative process should evaluate tasks for how accurately they are completed, and how often they produce errors.

More to continue as we move on to the second characteristic of usability in the next feature - Efficient.

The Five Es of Usability

PREAMBLE.

We saw the philosophical angle to various dimensions of usability in previous blog posts, with several examples. This series will focus on the practical dimensions - another, deeper view of the characteristics of usability: Whitney Quesenbery's Five Es of Usability. With examples, of course.

ISO 9241 defines usability as:

The effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.

effectiveness: the accuracy and completeness with which specified users can achieve specified goals in particular environments; efficiency: the resources expended in relation to the accuracy and completeness of goals achieved; satisfaction: the comfort and acceptability of the work system to its users and other people affected by its use.



Extending the concept, and narrowing it down to fundamental elements, experts suggest the following five characteristics that are necessary to be met for the users of a product or a web site:

• Effective


• Efficient


• Engaging


• Error Tolerant


• Easy to Learn

Watch this space as we dig into each individual 'E' with some relevant examples.

Usability Dimension: "Valuable"

VALUABLE.

The 7th and last feature in the series of Usability Dimensions. For earlier features, kindly follow the following links: useful, usable, desirable, findable, accessible, and credible.

Depending on the specific case, all previously discussed dimensions need to be balanced in varying degrees, and not treated as mutually exclusive. However, the aspect of "valuable" is commonsensical and must. On one hand, it should relate to and contribute towards the company's ROI. On the other hand, it should also equate itself to ROE (User's Return on Experience). The user-interface design of your site or product should in effect result into one or more of measurable and sustainable benefits like:

• increase in sales


• increase in operational efficiency


• increase in productivity


• decrease in operational/maintenance costs


• re-use of existing components and infrastructure


• increase in brand awareness/networking outreach

This makes your site/product valuable. Only "shared" value (between Business community and User community) is the key to long term sustainability. I'm struggling to list down the examples of "valuable" websites, primarily because the "value" can be really diverse based on specific businesses, specific user community etc. For example, Technical Developers may find technology forum sites really valuable, much different than a teenager finding value in gaming or music sites, and so on. I'll attempt to list down few generic valuable sites that most end-consumers today from any category, qualification, or industry would not live without. Yes, it's easy to guess a few at least...as they would definitely echo your own choice too.

Here goes:

• google (Need I give a link for you to navigate?)


• youtube


• wikipedia


• facebook


• gmail (Isn't this a new term for email?)


• ebay


• linkedin

I encourage you to share your views and few more additions to the list, as comments to this post.

In conclusion, our sites and products must deliver value to the customers and sponsors. For non-profits, the user experience must advance the mission; for profits, it must contribute to the bottom line and provide customer delight.

Watch this space for more example-oriented features (please expect some overlaps in discussion points) through another series of the Five-Es of Usability - another view of usability dimensions: Effective, Efficient, Engaging, Error Tolerant, Easy to Learn.

Usability Dimension: "Credible"

CREDIBLE.

Sixth feature in the series of dimensions of usability.

Stanford's Persuasive Technology Lab investigates topics such as:

• what causes people to believe (or not believe) what they find on the web


• what strategies do users employ in evaluating the credibility of online resources


• what contextual and design factors influence these assessments and strategies


• how and why are credibility evaluation processes on the web different from those made in face-to-face human interaction, or in offline contexts

What makes your web site, your product more credible than others? We should focus on and understand the design and visualization elements that influence whether users trust and believe what we tell them.

I personally trust online presence that are sincere and honest representation of products, services, whatever is out there. A polished content/representation that's simply too perfect, coming from the desk of a copywriter or a marketer - is a complete turn-off and introduces a bias. I tend to stay away from companies, whose sites claim to do it all, have the most flattering testimonials from "unnamed" sources, and have impeccable language splashed - all of which usually is in complete contrast to the imperfect human owner. We should avoid pretense in all context. Credibility cannot be faked, cannot be purchased. A sincere, honest approach that's consistent, even if with flaws, would inspire much more trust and a following that lasts long, if not forever.

Lately, blogs as a platform are being used more for promotion of products or services of a company. Hence, the level of trust is taking a dive, since lesser and lesser blogs are in a non-commercial and honest writing form. A company, whose blog is more about thought-leadership, building awareness, or sharing knowledge, is bound to come across as credible. I'll in near future dedicate a specific feature on "usability of a blog" - where the attempt will be to extrapolate this example and cover more aspects with examples.

Few credibility guidelines:

• proof of a company: about us/contact details page


• explanation of how sensitive data will be used (credit card, phone numbers, email, etc.)


• proof of third-party evidence of your product/service quality (testimonials)


• professional design


• regular site updates, keeping it fresh and alive


• avoidance of errors and coming soon...

The above guidelines - are they enough to establish credibility in today's time of gazillion channels flooded with untrustworthy content mostly? We should do more. We should create valuable, useful and honest content, whether it be in form of articles, reviews, guides, white papers, blog entries or forum posts. We should keep marketing messages out of our content; add them separately, and keep them separate. Ditto with advertisements and videos. We should link out to other credible web sites from our site - probably the best way to establish the existence of your own company - by linking to other sites that reference you. Like press articles, affiliation listings, professional membership details, directory listings, etc. Here's a link to a slightly old presentation from Stanford about Web Credibility.

Few Non-Credible examples:

• shards of glass


• flik fx


• ucsofa


• guinea worm


• clones-r-us


• driver's license


• vampires & zombies

Likewise, there are tons of examples of credible sites; large corporations like: Google, SAP, IBM, Microsoft, Sony, ICICI Bank, and many many more. We should however be cautious of site-clones of these big brands; there's usually some obvious give-away in recognizing the fake from genuine. Web 2.0 trend has added discredit to noble initiatives such as Wikipedia and Ask.com - since any user can submit/edit any information on these platforms, regardless of the quality and authenticity of their sources. In that respect, both "Wikipedia" and "Ask" fall under the category of Non-credible sites.

In conclusion, what you do categorically does not matter. It's all about being there, being honest, being accountable, personally. Putting yourself upfront, writing the site in your own words, making your own promises, one-on-one. This way, you separate yourself from all competitors.

Watch this space for a feature on the last dimension: Valuable.

Usability Dimension: "Accessible"

ACCESSIBLE.

We discussed findable a couple of days back in our series of features on various dimensions of usability. We arrive at a lesser adopted yet very important aspect of "accessibility."

Wikipedia defines Web accessibility as the inclusive practice of making websites usable by people of all abilities and disabilities. All users should have access to information and functionality. For example, a good site/app with textual equivalents for images and with meaningful links would help blind users using text-to-speech software. Sufficiently large text/images or enlargeable makes it easier for users with poor sight to comprehend. Making hyperlinks prominent with underline and not just by a color change, would help color-blind users. Similarly, making clickable areas large enough would help users who cannot control mouse with precision. Users with dyslexia and learning difficulties would appreciate when content is presented in plain language and illustrated with instructional diagrams and animations.



If some practices are followed, all users in fact can be accommodated while not sacrificing the overall usability of the web site. The needs that accessibility aims to address include:

• Visual: Visual impairments - blindness, low vision, color blindness;


• Motor/Mobility: Difficulty/inability to use hands, muscle slowness, lack of muscle control;


• Auditory: Deafness, hard of hearing;


• Seizures: Caused by visual strobe or flashing effects;


• Cognitive/Intellectual: Developmental disabilities, learning disabilities, poor memory, lack of problem-solving and logic skills.

Few examples of almost accessible sites:

• texas a&m


• state of california


• enabled online


• one day films


• genasys


• einfach-fuer-alle


• open web


• keep austin beautiful


• hoehner music

This site exemplifies how web elements can be designed to be accessible. It puts forth the most common items together on one site that can make a site accessible. Things like: choosing a proper color contrast, alternative text for images, separating the structure (navigation, heading, subheading) and presentation (words, fonts, images), allowing users control over re-sizing of content, etc. For overall guidelines, please refer to: WCAG 2.0.

Just as our buildings have elevators and ramps, our web sites and products should be accessible to people with disabilities (10% of the population). Today's it's good business and ethical thing to do. Eventually, it will become the law.

Next dimension in line: Credible.

Usability Dimension: "Findable"

FINDABLE.

Fourth feature in our series: Dimensions of Usability. First three posts discussed the dimensions - useful, usable, and desirable.

Peter Morville says: "Findability precedes usability, in the alphabet and on the Web. You can't use what you can't find."

For your web site, there are two aspects of findability: how well your site can be found on the Internet, and how well information can be found on your site. While the former aspect is very important and concerns itself with concepts like search engine optimization and marketing techniques, we're going to restrict this feature to the latter aspect of findability. The issues that affect findability are: organization of the web site, representation of the user interface, web standards, user interaction, navigation, and content. Achieving a good design and score in these parameters would actually directly contribute to having a higher SEO too.

A standard way of measuring this dimension: "findable" for your web site is usability testing methodologies such as: Tree Testing or Reverse Card Sorting. It's all about focusing on the user's ability to identify and navigate  through your site/application to find and retrieve information and sources relevant to his needs. Things like: navigation, sub-navigation, placement of content, choice of words and phrases, information-flow, search functionality...contribute towards making your web site findable or not.

Few examples of highly findable sites:

• opera


• hbo


• chandra harvard


• fwa


• questacon


• ted


• brainpop


• penguin classics


• stimulus

Simply put, we must strive to design navigable web sites, products, and locatable objects, icons, user interface elements, so users can find what they need. Few things to keep in mind:

• avoid having no way of going back to home


• don't have illogically named links


• have consistent navigation across different pages


• don't have too many sub-navigation levels/hierarchy


• use breadcrumbs and sitemaps


• make states of hyperlinks different and noticeable

Next usability dimension topic: Accessible.

Usability Dimension: "Desirable"

DESIRABLE.

We saw few examples of useful and usable sites and applications. This feature is on "desirable".

"Form follows function" is an age old principle. Everyone is up for beauty. Good looks (form) works like a charm, in any industry, at times even at the expense of function. You may be witness to a great looking movie star, less on acting skills gather more fan following than an average looking, but great actor. Likewise, you would find a person going for a used car, more interested in examining the exterior/body of the car than the functional parts like engine. What about an architect paying more attention to colors and symmetrical dimensions in space, rather than focusing on the lifelines of the household system - electrical and plumbing lines?

Same applies to software and internet world. Not many achieve the balance of their site/app being desirable, at the same time high on usability: useful, usable, etc.

Few examples of beauty that doesn't work:

• verbatim


• creative with a k


• real casual


• jones...


• got milk?


• record tripping


• lego


• echo genesis


• incredibox


• there studio


• coca cola light


• google gravity


• on toyota's mind

If the primary function/industry of your web site is to convey beauty, one should design for beauty. Else, beauty should be a by-product, still essential, but not at the expense of functionality and ease of use. A desirable site may attract more visitors in the short-term, but the visitors are unlikely to revisit as they would find it difficult to achieve their desired goals; in which case, a more functional site will score in the long-term.

Typical user echoes the following while using any of the above sites:

"where do i look?" "where do i click?" "what do i do?" "how long does this take to load?" "where's the navigation?" "how do i scroll?"

The sad part about these sites is that there's undoubted creativity and plenty of ideas that's gone into the concept and production. But, like most real things, a tool is no good unless you can figure out how to use it. There are multiple ways the sites fail to function. It can be visual clutter, slow loading time, navigation issues, archiving issues, visibility/scrolling issues, etc. Instead, direct the users to certain sections/pages of the site; make your navigation clear; make menus and icons self-explanatory; use proper contrast ratio for higher visibility; and have a clear "call-to-action". More...

Few brands like: Sony, Apple, Microsoft - achieve form without sacrificing function.

Watch this space for the next usability dimension: Findable.

Usability Dimension: "Usable"

USABLE.

Last feature discussed few examples and theories about a useful interface. This feature will focus on "usable" aspect of user interfaces. Often, we focus too much on our sites and applications being functionally useful and perfect; also making it very desirable and attractive, but losing focus on the vital concept: ease of use. One reason maybe because the interface-centered methods and perspectives of human-computer interaction do not address all dimensions of website/product design.

Of all dimensions of usability, usable is perhaps one of the closest attributes that is a direct contribution towards user productivity gains. Ease of use minimizes:

• erroneous actions


• need of training


• time spent on tasks

A useful and simple website is going to yield more repeat traffic in long term, even if it's not good to look at.

Few examples of a good balance between "useful" and "usable" and not categorically "desirable":

• gmail


• ebay


• youtube


• wikipedia


• amazon


• imdb


• myspace

The above list, you shall agree consists of few of the most used internet sites and these belong to this category of being usable and useful, but not visually appealing or desirable.  A couple more examples of relatively unknown sites that are "ugly" and still work like a charm because of being usable:

• Plenty of Fish - a very plain looking website that offers a free online dating service much like Match.com (but without the subscription fee). There is nothing specifically impressive about the website that stands out, in fact the site is actually rather ugly. A second look at the website on its reported earnings revealed that it brings in over $10,000 from Adsense – in one day. For those of you counting, that is $300,000 per month and nearly one million dollars in just three months.
  (borrowed from this site)


• Ryanair - audible gasps are possible when you see this site, for its ugly nature. However, Ryanair experiences online bookings to the tune of several millions a year.

Not making your interfaces usable is not a mistake, but outright blunder. Remember, if one of your users gets lost trying to navigate your website, check out of your web store, or finding simple contact information, then you unnecessarily are increasing the chances that this user will simply leave. This particular aspect of usability is best not kept optional. It is a must.

Watch this space as we discuss the next usability dimension: Desirable.

Usability Dimension: "Useful"

USEFUL.

It may be observed that when a website or product is usable, but not useful, it's unlikely to get off the ground. Useful is what generates the interest, serves a need, scratches an itch. Often useful can do without being usable. If your website page has large content that is "useful" for the user making an informed decision/action, you may have to sacrifice on the usability by allowing horizontal/vertical scroll and pop-up/navigation elements. Another standard usability principle suggests alphabetical order of drop-down menus, which is usable in nature, as the users can do without additional cognitive load in narrowing down their choice of action. However, if an unsorted but prioritized menu items are presented to the users based on the most useful options presented first; the system might prove to be more useful after all.

Few Examples of Useful but Low on Overall Usability:

• ecademy


• Most Torrent / Freeware Download sites


• craigslist


• experts-exchange


• only batteries


• flickr


• salesforce (App not Website)


• exactitudes


• igluski

As usability and UI practitioners, we cannot be content to paint within the lines drawn by customers and the known patterns of usability. We must courageously and creatively question the usefulness of the system and functionalities and the user interface elements. Thus, we seek to apply our deep knowledge of craft and medium to define innovative solutions that are more useful.

Watch this space for examples of next usability dimension: Usable.

Free Website Contest on World Usability Day.

Design Responsibility (Dilbert)