From Embracing the Chaos to Picturing them Satisfied

Every week I read thousands of blog posts. For your weekend enjoyment, here are some of those highlights. What are you reading this weekend?

checkbox

On Product Management…

http://limi.net/checkboxes-that-kill
Welcome more and avoid the killer checkbox.

joinarms

On Starting Up…

http://tech.co/ways-to-cross-promote-your-startup-2013-02
Join arms with your best complement.

chaos-device

On Modular Innovation…

http://alistapart.com/article/environmental-design-with-the-device-api
Embrace the chaos and plug those gaps with environmental Modular Innovation.

photos

On Design & Product Experience…

http://uxmag.com/articles/evaluating-the-usability-of-web-photos
Picture them all satisfied with the incredibly effective.

Have a great weekend!

Jeremy Horn
The Product Guy

From Seeking Balance to Knowing your Cohorts

Every week I read thousands of blog posts. For your weekend enjoyment, here are some of those highlights. What are you reading this weekend?

analytics

On Product Management…

http://mindtheproduct.com/2013/02/everything-a-product-manager-needs-to-know-about-analytics/
Product Managers, get to know your cohorts!

oscar

On Modular Innovation…

http://www.web-strategist.com/blog/2013/02/25/oscar-tv-ads-failed-to-integrate-social/
Learn from the MI misteps of the Oscars.

balance

On Design & Product Experience…

http://uxmag.com/articles/visual-balance-and-weight-allocation-for-usability
Balance all that you have to see.

Have a great weekend!

Jeremy Horn
The Product Guy

57 Varieties: Relishing Accessibility

clip_image001In creating this series on Quick-UX and Accessibility, I studied over 50 products before carefully selecting the ones that made the articles’ final cut. While the products I chose were semi-random, at best, their resultant distribution…

clip_image003

…was most informative and encouraging regarding the strength of my rapid Accessibility assessment tool of choice, FAE:

clip_image005

Of the products discussed within the articles, I decided to plot some radar charts to see if there was any additional insight that could be gleaned via visual inspection. I hope you too find the patterns, visualized below, useful too.

Comprehensive Accessibility

clip_image007

FAE QUA value = 0.976

RoundHouse QUA value = 0.904

Nearly Comprehensive Accessibility

UseIt.com QUA value = 0.636

Eboy QUA value = 0.668

clip_image009

Moderate Accessibility

clip_image011

Borders QUA value = 0.428

Bloomberg QUA value = 0.596

NY1 QUA value = 0.580

Fair Accessibility

CNet QUA value = 0.376

Drudge Report QUA value = 0.240

NBC NY QUA value = 0.380

clip_image013

Poor Accessibility

clip_image015

GoodReads QUA value = 0.176

Barnes and Noble QUA value = 0.072

Furthermore, I am providing the access to the worksheet where I collected, collated, and crunched the raw numbers for all 57 products.

SPREADSHEET (Google Docs Version) (Excel Version with charts & highlights)

Quick-UX Accessibility is the measure of how many differently skilled/abled types of people (including individuals with disabilities) in varying locations (e.g. mobile web) can make use of a given product. With decreased Accessibility comes limited market opportunities, decreased Usability, and hindered inter-product Interoperability. As a result of the availability of a variety of very usable tools and due to the current state of web technology, addressing and improving Accessibility should no longer be an afterthought. And, through Quick-UX, addressing Accessibility, as well as the larger categories of Usability, Usefulness, and Desirability, can be done quite easily and quickly, providing…

  • a summarized view of a product’s overall User eXperience,
  • directional guidance for a product’s future development, and/or
  • metrics for comparison with other products.

Check out the Quick-UX Worksheet for the broader set of User Experience variables and heuristics.

QUICK-UX WORKSHEET

And until next week, when the exploration and discussion of products, user experience, modular innovation, startups, or perhaps something quite new, enjoy reviewing the products and ensuing discussions of this series, and see you then.

Comprehensive Accessibility

RoundHouse & FAE

Nearly Comprehensive Accessibility

UseIt & Eboy

Moderate Accessibility

Borders, Bloomberg & NY1

Fair Accessibility

CNET & Drudge Report & NBC NY

Poor Accessibility

GoodReads & Barnes and Noble

Enjoy & Subscribe now (click here) to make sure you don’t miss out on future series, interviews, events and product insights from The Product Guy!

Jeremy Horn
The Product Guy

Less than Grand GoodReads

clip_image001Accessibility is the measure of how many differently skilled/abled types of people (including individuals with disabilities) in varying locations (e.g. mobile web) can make use of a given product. There exist many, very thorough, guidelines for determining the degree to which a product adheres to accepted accessibility standards. However, many can be very complex and time-consuming, also requiring the study of a good deal of the underlying code — much of which goes against the goals of the ‘quick’ part of Quick-UX.

Quick-UX

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Usability, "Should I use it?" the sub-category of Accessibility represents one of the more complex components.

Today, we will look at 2 examples of products with Poor Accessibility, with a Quick-UX Accessibility value below 0.2.

Poor Accessibility

Accessibility standards exist to provide people with disabilities a means of using products, from reading and interacting with those on the web, as well as many very positive benefits beyond this group of individuals. For these reasons, for this article, I made the ironic selection of the following 2 products, whose missions are to get and keep people reading and interacting online.

Example: GoodReads

GoodReads is a very cool product that brings all types of book fans together, sharing recommendations, tracking read and wanted books, and doing other fun book club-y things.

00_goodreads_homepage

GoodReads received the following results from FAE…

01_goodreads_results

…resulting in an Accessibility variable value of 0.176 and Poor Accessibility.

Should Do

Beyond making sure that all images have ALT text specified, this product would do well to address its use and identification of “decorative images.”

Text Equivalents

  • Images with empty ALT text are assumed to either be informational, whereby the ALT attribute should have been populated with contextually relevant information, or was left empty – a decorative image. Such decorative images should typically be removed and implemented via CSS.
  • In this product, the NULL specification for the ALT text is generally accepted – informing assistive tools to skip the images with alt=””.

02_goodreads_null

However, the implementation of tracking pixels throughout the product is inconsistent. Another example of a tracking pixel within this product provides attention getting ALT text on an image 1×1 pixel, that is also not intended for consumer consumption.

03_goodreads_quantcast

Example: Barnes and Noble

Barnes and Noble, famous brick-and-mortar bookstore chain, provides a web product that goes beyond just selling of books.

00_bn_homepage

The tattered results delivered by FAE for this product were…

01_bn_results

…resulting in an Accessibility variable value of 0.072 and Poor Accessibility.

Should Do

Throughout this series many examples of areas for improvement have been stated and explored for other products. And, for this product, these ‘should do’ items, for the most part, apply here, too. Most significant amongst these areas for improvement for Barnes and Noble are…

Text Equivalents

  • Always provide Alternate text for images.
  • Remove images with no Alternate text specified.
  • Make sure Area elements also have Alternate text specified.

HTML Standards

  • Include a valid DOCTYPE declaration at the top of each page to facilitate rendering and validation.
  • Make the pages’ character encoding clear. For example, by including…

02_bn_encoding

Quick & Usable

Over the next few weeks I will be exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility

Comprehensive Accessibility [RoundHouse & FAE]
Nearly Comprehensive Accessibility [UseIt & Eboy]
Moderate Accessibility [Borders, Bloomberg & NY1]
Fair Accessibility [CNET & Drudge Report & NBC NY]
Poor Accessibility [GoodReads & Barnes and Noble]

Quick-UX Accessibility Summary, Charts & Data

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Usefulness and Credibility components of Quick-UX, the quick and easy method of generating quantifiable and comparable metrics representing the understanding of the overall User Experience of a product, as well as other insightful posts from The Product Guy.

Enjoy!

Jeremy Horn
The Product Guy

NBC NY Bringing Fair Accessibility

clip_image001Accessibility is the measure of how many differently skilled/abled types of people (including individuals with disabilities) in varying locations (e.g. mobile web) can make use of a given product. There exist many, very thorough, guidelines for determining the degree to which a product adheres to accepted accessibility standards. However, many can be very complex and time-consuming, also requiring the study of a good deal of the underlying code — much of which goes against the goals of the ‘quick’ part of Quick-UX.

Quick-UX

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Usability, "Should I use it?" the sub-category of Accessibility represents one of the more complex components.

Today, we will look at the last of 3 examples of products with Fair Accessibility, with a Quick-UX Accessibility value between 0.2 (inclusive) and 0.4.

Fair Accessibility

Example: NBC New York

NBC New York’s online news product presents a visually pleasing and minimalistic user experience.

00_nbcny_homepage

FAE’s evaluation of this product resulted in …

01_nbcny_results

…with an Accessibility variable value of 0.38 and Fair Accessibility.

Should Do

While demonstrating strength in HTML Standards and Styling that went beyond the basic visual, there still remains room for improvement in the areas of …

Navigation & Orientation

  • Beyond the importance of always specifying at least one <H1> element, it is equally important that every one of these elements contains text (as well as the subsequent <H#> elements).
  • Button, Submit, and Reset form elements must have either a value or a title attribute set.

Text Equivalents

  • While a common problem in many products with a heavy dose of images, especially news content with a constant stream of news and images, it remains no less important that every image should always be associated with a descriptive ALT text attribute.
  • “Decorative Images” used to such effects as positioning, typically images with either a height or width less than 8 pixels, should either be rethought and redesigned or resolved using CSS techniques.

Quick & Usable

Over the next few weeks I will be exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility

Comprehensive Accessibility [RoundHouse & FAE]
Nearly Comprehensive Accessibility [UseIt & Eboy]
Moderate Accessibility [Borders, Bloomberg & NY1]
Fair Accessibility [CNET & Drudge Report & NBC NY]
Poor Accessibility [GoodReads & Barnes and Noble]

Quick-UX Accessibility Summary, Charts & Data

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Usefulness and Credibility components of Quick-UX, the quick and easy method of generating quantifiable and comparable metrics representing the understanding of the overall User Experience of a product, as well as other insightful posts from The Product Guy.

Enjoy!

Jeremy Horn
The Product Guy

CNET & Drudge: On the Cutting Edge of Fair

clip_image001Accessibility is the measure of how many differently skilled/abled types of people (including individuals with disabilities) in varying locations (e.g. mobile web) can make use of a given product. There exist many, very thorough, guidelines for determining the degree to which a product adheres to accepted accessibility standards. However, many can be very complex and time-consuming, also requiring the study of a good deal of the underlying code — much of which goes against the goals of the ‘quick’ part of Quick-UX.

Quick-UX

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Usability, "Should I use it?" the sub-category of Accessibility represents one of the more complex components.

Today, we will look at the first 2 of 3 examples of products with Fair Accessibility, with a Quick-UX Accessibility value between 0.2 (inclusive) and 0.4.

Fair Accessibility

Example: CNET

CNET is a news technology product. In CNET’s own words…

“CNET shows you the exciting possibilities of how technology can enhance and enrich your life.”

00_cnet_homepage

FAE evaluated CNET, returning the following results…

01_cnet_results

…resulting in an Accessibility variable value of 0.376 and Fair Accessibility.

Should Do

It is good news that it is much less a technology problem than it is an education and implementation problem to achieve Comprehensive Accessibility. However, there is still a good deal of room for improvement for the product that “shows you the exciting possibilities of how technology can enhance and enrich your life.” Some of the problems not yet explored within other products of this series are…

Navigation & Orientation

  • Regardless of the page content, each page should have at least one <H1> element; and it should contain text.

Styling

  • Very common to products at all levels of Accessibility is the misuse of font styles. Separating the presentation from the functional layers is also important, not just to the development process, but also to Accessibility. The use of <font>, <center>, and other inline styling should be moved to the product’s CSS.

Example: Drudge Report

The Drudge Report is another news product. In this case, this product’s focus is in the aggregation of conservative news.

00_drudge_homepage

Drudge Report achieved the FAE results displayed below…

01_drudge_results

Should Do

To conform to the more traditional standards of Accessibility, this product should start by focusing on HTML Standards.

HTML Standards

  • DOCTYPE should be specified at the top of every page to facilitate validation and rendering of the content within.

02_drudge_html_standards

  • The default language for the content of the webpage should be specified. In this example, English…

<HTML lang=”en-us” …. >

Quick & Usable

Over the next few weeks I will be exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility

Comprehensive Accessibility [RoundHouse & FAE]
Nearly Comprehensive Accessibility [UseIt & Eboy]
Moderate Accessibility [Borders, Bloomberg & NY1]
Fair Accessibility [CNET & Drudge Report & NBC NY]
Poor Accessibility [GoodReads & Barnes and Noble]

Quick-UX Accessibility Summary, Charts & Data

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Usefulness and Credibility components of Quick-UX, the quick and easy method of generating quantifiable and comparable metrics representing the understanding of the overall User Experience of a product, as well as other insightful posts from The Product Guy.

Enjoy!

Jeremy Horn
The Product Guy

Most Moderate of News: Bloomberg & NY1

clip_image001Accessibility is the measure of how many differently skilled/abled types of people (including individuals with disabilities) in varying locations (e.g. mobile web) can make use of a given product. There exist many, very thorough, guidelines for determining the degree to which a product adheres to accepted accessibility standards. However, many can be very complex and time-consuming, also requiring the study of a good deal of the underlying code — much of which goes against the goals of the ‘quick’ part of Quick-UX.

Quick-UX

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Usability, "Should I use it?" the sub-category of Accessibility represents one of the more complex components.

Today, we will look at the remaining 2 of the 3 examples of products with Moderate Accessibility: a Quick-UX Accessibility value between 0.4 (inclusive) and 0.6.

Moderate Accessibility

For this set of products, I chose ones that either encouraged or required reading as the primary function of the product. A category that begs for a clear attention to the Accessibility needs of their varied user bases.

Example: Bloomberg

Bloomberg’s web product is geared towards the presenting of top headlines and news within a variety of categories.

00_bloomberg_homepage

The Bloomberg product is the highest scoring product within the set of products of Moderate Accessibility…

01_bloomberg_results

… receiving an Accessibility variable value of 0.596.

Should Do

Text Equivalents

  • As is common to many products, here too, it is equally important to provide ALT text in association with the image it is describing.
  • Replace all “Decorative Images” containing empty ALT attributes (e.g. ALT=””) with CSS-based solutions. Images that exist to contribute content to the page should contain a descriptive, non-empty, ALT attribute.

Example: NY1

Like Bloomberg, the NY1 product exists to present and make news convenient for its visitors.

00_ny1_homepage

NY1 revealed the following results from FAE…

01_ny1_results

And, with Accessibility variable value of 0.58, also earned its place within the level of Moderate Accessibility.

Should Do

Styling

  • As is common to many products, here too, it is equally important to provide ALT text in association with the image it is describing.
  • NY1 would be well served to use neither the <b> nor <i> elements. They are an indication of font-type and provide no contextual meaning. In these cases, the use of stylized header tags (<H#>) or <strong> or <em> would be better suited.
  • Separating the presentation from the functional layers is also important, not just to the development process, but also to Accessibility. The use of <font>, <center>, and other inline styling, like…

02_ny1_inline_style

… should be moved to the product’s CSS.

Quick & Usable

Over the next few weeks I will continue exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility

Comprehensive Accessibility [RoundHouse & FAE]
Nearly Comprehensive Accessibility [UseIt & Eboy]
Moderate Accessibility [Borders, Bloomberg & NY1]
Fair Accessibility [CNET & Drudge Report & NBC NY]
Poor Accessibility [GoodReads & Barnes and Noble]

Quick-UX Accessibility Summary, Charts & Data

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Usefulness and Credibility components of Quick-UX, the quick and easy method of generating quantifiable and comparable metrics representing the understanding of the overall User Experience of a product, as well as other insightful posts from The Product Guy.

Enjoy!

Jeremy Horn
The Product Guy

Bordering on Mediocrity

clip_image001Accessibility is the measure of how many differently skilled/abled types of people (including individuals with disabilities) in varying locations (e.g. mobile web) can make use of a given product. There exist many, very thorough, guidelines for determining the degree to which a product adheres to accepted accessibility standards. However, many can be very complex and time-consuming, also requiring the study of a good deal of the underlying code — much of which goes against the goals of the ‘quick’ part of Quick-UX.

Quick-UX

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Usability, "Should I use it?" the sub-category of Accessibility represents one of the more complex components.

Today, we will look at the first of 3 examples of products with Moderate Accessibility a Quick-UX Accessibility value between 0.4 (inclusive) and 0.6.

Moderate Accessibility

For this set of products, I chose ones that either encouraged or required reading as the primary function of the product. This is a category that begs for a clear attention to the Accessibility needs of their varied user bases.

Example: Borders

Here we look at Borders’ online product, a marketplace for the selling of books, music, movies, etc.

00_borders_homepage

Borders’ received the following results from FAE…

01_borders_results

…resulting in an Accessibility variable value of 0.428, Moderate Accessibility.

Should Do

Navigation & Orientation

  • Web pages should have only 1 title element, unlike that found, for example on some of the Borders’ pages.

02_borders_title

  • Make sure that when using <H#> tags on a page, there is always at least one <H1>. Since the <H1> tag is generally the page title, it is strongly discouraged to exceed the use of more than two (and penalized by FAE).
  • Insert text content, not merely an image with an ALT attribute, into the page headings like this one…

<h2><img src="/wcsstore/ConsumerDirectStorefrontAssetStore/images/content/logo_print.gif" alt="Borders logo" border="0" /></h2>

  • List elements should be clearly incorporated into that of the overall page hierarchy for clarity and navigation. Each list element that is part of the navigation region of the page should be preceded with an <H#> element.

03_borders_list

  • Each area element should have a redundant text link with matching href.
  • When it comes to images, it is always important to provide the image ALT or TITLE text – especially for those who cannot see it/them.

Quick & Usable

Over the next few weeks I will continue exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility

Comprehensive Accessibility [RoundHouse & FAE]
Nearly Comprehensive Accessibility [UseIt & Eboy]
Moderate Accessibility [Borders, Bloomberg & NY1]
Fair Accessibility [CNET & Drudge Report & NBC NY]
Poor Accessibility [GoodReads & Barnes and Noble]

Quick-UX Accessibility Summary, Charts & Data

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Usefulness and Credibility components of Quick-UX, the quick and easy method of generating quantifiable and comparable metrics representing the understanding of the overall User Experience of a product, as well as other insightful posts from The Product Guy.

Enjoy!

Jeremy Horn
The Product Guy

Nearly, Like an Eboy

clip_image001Accessibility is the measure of how many differently skilled/abled types of people (including individuals with disabilities) in varying locations (e.g. mobile web) can make use of a given product. There exist many, very thorough, guidelines for determining the degree to which a product adheres to accepted accessibility standards. However, many can be very complex and time-consuming, also requiring the study of a good deal of the underlying code — much of which goes against the goals of the ‘quick’ part of Quick-UX.

Quick-UX

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Usability, "Should I use it?" the sub-category of Accessibility represents one of the more complex components.

Today, we will look at the second of 2 examples of products with Nearly Comprehensive Accessibility, with a Quick-UX Accessibility value between 0.6 (inclusive) and 0.8.

Nearly Comprehensive Accessibility

Example: Eboy

The Eboy product is a presentation of design firm, Eboy Arts. Often, when it comes to web design, everything beyond the visual and interact is, well, beyond.

00_eboy_homepage

Here Eboy bucks the trend and provides impressive results, with an Accessibility variable value of 0.668, Nearly Comprehensive Accessibility.

01_eboy_results

Should Do

While the UseIt product’s areas of improvement lay in the realms of Navigation & Orientation and HTML Standards, Eboy’s efforts are best spent in their implementation of Scripting…

  • 02_eboy_mouseoverThe onfocus event should be used in conjunction with the onmouseover event.
  • When using the onmouseout event, the onblur event should also be defined.
  • The product’s user is best served by using CSS on elements that can be interacted with via keyboard, instead of attaching onmouseover and onmouseout events.

Quick & Usable

Over the next few weeks I will continue exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility

Comprehensive Accessibility [RoundHouse & FAE]
Nearly Comprehensive Accessibility [UseIt & Eboy]
Moderate Accessibility [Borders, Bloomberg & NY1]
Fair Accessibility [CNET & Drudge Report & NBC NY]
Poor Accessibility [GoodReads & Barnes and Noble]

Quick-UX Accessibility Summary, Charts & Data

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Usefulness and Credibility components of Quick-UX, the quick and easy method of generating quantifiable and comparable metrics representing the understanding of the overall User Experience of a product, as well as other insightful posts from The Product Guy.

Enjoy!

Jeremy Horn
The Product Guy

Accessibly UseIt

uclip_image001Accessibility is the measure of how many differently skilled/abled types of people (including individuals with disabilities) in varying locations (e.g. mobile web) can make use of a given product. There exist many, very thorough, guidelines for determining the degree to which a product adheres to accepted accessibility standards. However, many can be very complex and time-consuming, also requiring the study of a good deal of the underlying code — much of which goes against the goals of the ‘quick’ part of Quick-UX.

Quick-UX

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Usability, "Should I use it?" the sub-category of Accessibility represents one of the more complex components.

Today, we will look at the first of 2 examples of products with Nearly Comprehensive Accessibility, with a Quick-UX Accessibility value between 0.6 (inclusive) and 0.8.

Nearly Comprehensive Accessibility

Example: UseIt.com

Another product I could not resist evaluating is that of the Usability guru himself, Jakob Nielsen. UseIt is a comprehensive source for all aspects of Usability, across all media. Let’s see just how comprehensively it is applied.

00_useit_homepage

UseIt received the following results from FAE…

01_useit_results

…producing an Accessibility variable value of 0.636, Nearly Comprehensive Accessibility.

Should Do

Navigation & Orientation

  • When using input elements…

type=text, password, checkbox, radio, file, select, textarea

… it is important to also use the label element with either (1) the for attribute to indicate which form element a label is bound to, or (2) a descriptive title attribute. For example, as demonstrated on w3schools…

02_useit_form_for_attr

HTML Standards

  • The doctype declaration should be the very first thing in an HTML document. And when it is used, it is important to remember that DOCTYPE is case-sensitive…

03_useit_doctype

Quick & Usable

Over the next few weeks I will continue exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility

Comprehensive Accessibility [RoundHouse & FAE]
Nearly Comprehensive Accessibility [UseIt & Eboy]
Moderate Accessibility [Borders, Bloomberg & NY1]
Fair Accessibility [CNET & Drudge Report & NBC NY]
Poor Accessibility [GoodReads & Barnes and Noble]

Quick-UX Accessibility Summary, Charts & Data

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Usefulness and Credibility components of Quick-UX, the quick and easy method of generating quantifiable and comparable metrics representing the understanding of the overall User Experience of a product, as well as other insightful posts from The Product Guy.

Enjoy!

Jeremy Horn
The Product Guy