Reveal More

reveal Dynamic, expanding, dropdown… These are all terms that are often associated with interesting and, sometimes, fun interface elements. But, they can also contribute to the obfuscation of the interface and deterioration of the User eXperience.

twhirl, a desktop Twitter client, was recently upgraded. Within twhirl‘s upgrade were some needed, and fully appreciated, improvements to the User eXperience — most notably, along the lines of Usability.

While the interface change was not major, in terms of pixel area within twhirl, many (myself included) have found that this simple change has dramatically enhanced their experience of the product and, in turn, their interactions with Friends and Followers on Twitter. twhirl’s upgrade has also provided us with an opening to the topic of the oft encountered, lesser User eXperiences that hide more and reveal less than most people’s corresponding expectations and desires.

Before talking more about the nice new bits of twhirl, let’s first discuss and understand which information and design decisions can lead to confusion and frustration, and why an interface should be kept simple and reveal more.

Hidden Actions

Hidden actions and hidden information result in hidden choices, slowed decisions, and confusion. The less searching, less thinking, less clicking, the better the user’s product experience will be. There are many commonly found interface elements that work against users’ product experiences, two of which are drop-downs and scrolling lists.

Down and Out

state-drop-down

Drop-downs always require at least 2 clicks to use – one click to open, and another click to make the selection.

The information contained within a drop-down interface element is hidden. Simply to see or reference the available options that the user has, that user first has to open it. The deficiency of this type of interface becomes even more apparent when the drop-down contains actions, as opposed to attributes. Actions typically necessitate greater engagement by the user than attributes – after all, people use an interface to accomplish some task (through action). And each of these actions, via a drop-down, always requires 2 clicks; 2 clicks repeated again and again do not present a simple experience.

The drop-down also suffers from other ailments. In many situations, when a drop-down has been opened, some other part of the interface becomes covered, unnecessarily hiding other choices or even information that may soon, or immediately, be relevant to the current decision process.

Many websites, for example, use drop-downs to allow the user to indicate within which State they reside. The information applied to the drop-down results in a very long list, one that needs to be carefully scanned and scrolled through until the desired answer has been located – a very cumbersome process.

Instead of using the drop-down, the user of the product can be better served with more obvious, more revealing (of information and intention) interface elements. In the previous example of the State selection drop-down, one can provide the user with a basic textfield. Everyone knows how to type the correct State; and for those that make a mistake (e.g. typo), backup the less confusing interface with sound error checking, correction, and prevention.

Needless Scroll

Scrolling lists exhibit many of the same Usability shortcomings familiar to drop-downs. Scrolling lists do not allow for everything to be easily seen at the same time – they require scanning and scrolling.

multi-select

An application of scrolling lists, that I am sure you have used within numerous online products, is multiple item selection. An example of this implementation is one in which the user is prompted to select their favorite five items from the entire list. Not only does this implementation result in shielding all of the available options from view (how do you know what five to pick unless you know everything that is available?), the scrolling list also hides many, or all, of the selected items – concurrently hiding from view possible mistakes made in deselecting earlier selections.

Here too, the User eXperience can be improved through simplification and revealing more. Selecting from a list that reveals all available options simplifies the decision process. Selecting my favorite five items from a list that reveals all available options, not only simplifies the selection process, but also helps prevent me from making mistakes (e.g. accidentally deselecting the wrong item).

Wrong Dynamics

Of course there other dynamic elements, regions of the page that appear and disappear, menus and windows that conceal portions of a product’s interface, et cetera, that also exhibit many of the similar downsides as drop-downs and scrolling lists. The important lesson that can be applied to many forms of interface element is that, through some small changes in a product’s interface, through revealing more, the product experience can easily be improved.

A Brisk twhirl

Among the many pluses that twhirl has always had in its favor is its Usability, within a simple and pleasant User eXperience. twhirl has always done well in capturing the key features, and primary goals and desires, of Twitter and the Twitter user base. Prior to the latest product upgrade (version 0.7) the default interface looked like this…

twhirl-07-petrol

The primary actions of the average Twitterer (Twitter user) are viewing ones timeline and tweeting. Tasks such as filtering, customizing, refreshing, and deleting tweets are given lower priority, but remain a simple button click away. However, in version 0.7 of twhirl, actions of a bit more importance, and more frequently used, are nowhere to be seen – they are hidden in a drop-down.

twhirl-0.1.008-panechange

The hidden actions allow the user to check for replies or direct messages (and more). These are very common actions performed by the average Twitterer – on Twitter it is difficult to be certain that you did not miss a tweet, therefore checking replies and direct messages become a fairly common occurrence. twhirl 0.7, presents a drop-down, containing actions – actions that can be useful to the product’s users.

With just a tiny change, in twhirl 0.8, by revealing more and elevating valued actions, users received a simpler, more enjoyable, easier to understand and act upon interface, that encourages greater interaction with the product and, in turn, greater engagement with fellow Twitterers.

08twhirl

 

Balance is Key

The key to improving a product’s User eXperience is not always obvious and is most often done iteratively through ongoing tweaking and upgrading.

With revealing more and improving the overall User eXperience come challenges to find …

  • balance between decision overload and finding what you want to be able to do,
  • balance between presenting relevant information and hiding important information,
  • balance between temporal elements and information overload, and
  • balance between the abstract and the obvious.

The goals of any User eXperience shift over time. The primary activities and information may change, but the path to many improvements in User eXperience remains constant – to reveal more. The ‘more’ may change, and pose new and exciting challenges to the overall product experience, but there will always be room for improvement, even in an excellent product, as twhirl has further demonstrated.

For more reading…

 

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Del.ico.us Furl Reddit Magnolia Google Add to Mixx!
About these ads

The Product Guy’s Weekend Reading (April 25, 2008)

Blog Every week I read tens of thousands of blog posts. Here, for your weekend enjoyment, are some highlights, from my recent reading, for you.

On starting up…
http://foundread.com/2008/01/17/9-things-stanford-b-school-wont-teach-you/
Some good things you are well advised to think through when starting your own biz.

On Design & Product Experience…
http://www.smashingmagazine.com/2008/04/24/5-more-principles-of-effective-web-design/
Simple and very well laid out discussion addressing Usable and Desirable web design.

On Modular Innovation…
http://www.techcrunch.com/2008/04/22/microsofts-mesh-revealed%e2%80%94sync-all-apps-and-all-files-to-all-devices-as-long-as-theyre-windows/
More information about Live Mesh – enabling broad unification and synchronization of all data.

Have a  great weekend!

Jeremy Horn
The Product Guy

Notches’ Niche – the Whole Universe

notches-logo-114 Corey Henderson, co-founder of Notches, identifies the long term goal of Notches as being “to give users the confidence that the reviews they find on a site powered by Notches present the whole universe of opinions on anything.” Recently, I met up with Corey Henderson and Tim Marman, co-founders of Notches, to learn more about their ideas and to discuss the company’s unique vision, as well as where they see themselves within the growing universe of next generation, Internet products.

More about Notches

notches-founders Notches is a platform for reviews — with the grand goal of being to eventually encompass all reviews of everything.  Notches is striving to aggregate all the reviews of everything out there, to make it easy for users to obtain and compare reviews for an item, as well as to be secure that they are looking at the entire, relevant, normalized universe of opinions for that particular product.

Unlike PowerReviews and BazaarVoice, Notches

  1. Brings all of the reviews for a given product together, into a centralized platform, to be analyzed, normalized, and summarized,
  2. Further prunes the cross-site review set to prevent gaming of the results,
  3. Eliminates (or de-emphasizes) reviews that have become old,

… while providing an API that allows any person, or company, to obtain and/or contribute to an open and accessible review platform.

Corey further explains,

“Ultimately this is about making sure online users get quality reviews on anything they are researching, from products, services, restaurants, movies, music, anything. By providing a single system for everyone to use, we can be confident that you’ll be getting as close to a complete picture of what thing is best…”

Challenging Notches

There are many challenges Notches is and will be facing as their platform evolves and matures, such as…

  • Assessing and maintaining reviewer reputation,
  • Eliminating “nonsense” reviews,
  • Squashing spammers,
  • And constantly evolving and improving the various platform algorithms (e.g. normalization).

One critical challenge that should not go unmentioned, central to all successful businesses, is the revenue model. Currently, Notches plans to drive revenue through “affiliate programs where companies like Expedia or Amazon pay (Notches) for referrals” along with “advertising, that will be included on some of (Notches’) mini-sites.”

More Notches

To help demonstrate many of the capabilities of the Notches platform, Corey and Tim have released two, fun mini-apps. Both of these demo products are built with the same Notches API that is available to today’s developers. So, if you are a developer, dive in, and please share what you create with Notches.

On Facebook, you will find Notches’ product that allows users to read and write reviews, as well as request reviews from other Facebook friends.

notches-facebook

For Twitter, Notches has created another product that enables the obtaining and posting of reviews — especially handy when you are on the road and want some quick feedback for a particular restaurant.

notches-twitter

The Twitter app, while not currently the best for consumer reviews via Twitter, again provides a simple introduction to both the Notches consumer features and developer API capabilities.

Expanding Universe

Notches is moving quickly in their “primary mission to work with a wide variety of partners, building tools, apps and communities around reviews” to further “showcase different aspects of (their) platform.”

Soon, from Notches, you can expect to see…

  • a widget to connect Notches to reviews on blogs,
  • new showcase applications within the vacation and travel market spaces,
  • various collaborations with microrevie.ws, hobby sites, and college portals,

… and much more.

Continuing Modular Innovation

The Modular Innovation trend seen within many of the cutting edge, next generation products, services, and platforms is often described via the instructive categories of…

  • Sharable,
  • Flexible,
  • Interoperable,
  • Portable, and
  • Utilizable (or Convenient).

As a matter of fact, in talking more about the origins of Notches, Corey is eager to point out…

“The original thinking, that has since become Notches, came way back when web services were first introduced as a concept. We saw that best of breed services, loosely coupled, would become the model of development in the future.”

… and “Notches is simply aspiring to be the best of breed review service” in the realm of Modular Innovation and the next major evolution of the Internet.

So, where in the spectrum of Modular Innovation does Notches currently reside?

Central to Notches is Interoperability, both with other technologies as well as empowering other individuals to connect to Notches via their API. Notches leverages best of breed services and standards, from the hReview microformat to Rapleaf‘s API.

Implicit to the Notches platform are the broader characteristics of Sharability and Portability. Due to the centralizing nature of the aggregation qualities of Notches, everyone has access to all of the normalized versions of the submitted reviews, from every Internet-capable device, courtesy of the Notches API.

The Flexibility of Notches is primarily at the Interoperability level of the product, accessible via the API. However, more Flexibility in terms of “making sure that users can control the reviews they write” (Portability and Sharability) are still being worked on and understood to be “fundamental” components.

For the reasons already outlined above, the showcase products and collaborations that Notches is producing, each in their own right, are a Modular Innovation simultaneously making Notches’ platform more Utilizable as well as Convenient to experience from various alternate services and products (including mobile devices).

Notches makes a very good showing within all of the core categories that make up Modular Innovation, especially Interoperability; which bodes well as Notches strives to build a successful, self-sustaining product with the supporting “community delivering incredible user-centered tools and reviews.”

Watching Notches

The origin of the company’s name comes from the basic premise that one item is always a notch above or below another — there is no tieing when it comes to Notches.

It is in this competitive spirit that Notches is attacking its market, its niche, potentially even paving the way for more business entrants within the microformat space, and creating a world within which “users should not have to look at multiple review sites anymore.”

Just as exciting as it is to observe a new company entering the growing wave of Modular Innovation, it will also be interesting to watch Notches as they grow and advance.

Go and try out Notches today (here and here) & enjoy!

Jeremy Horn
The Product Guy

The Product Guy’s Weekend Reading (April 18, 2008)

reading Every week I read tens of thousands of blog posts. Here, for your weekend enjoyment, are some highlights from my recent reading, for you.

On starting up…
http://news.ycombinator.com/item?id=166905
Discussion for staying efficient as a solo-founder.

On Design & Product Experience…
http://blogoscoped.com/archive/2008-04-18-n60.html
Detailed walkthrough of the evolution of Google Video design.

On Modular Innovation…
http://www.techcrunch.com/2008/04/17/web-30-will-be-about-reducing-the-noise%E2%80%94and-twhirl-isnt-helping/
A discussion of a lot of the types of issues that newer start-ups are beginning to address.

Have a great weekend!

Jeremy Horn
The Product Guy

Do I want to use it? Evaluating Desirability through Quick-UX.

desirability Desirability is a very real component of a product’s User eXperience. The feelings that a product invokes in an individual are often difficult for that individual to elaborate upon, beyond such feelings like those of a sense of pleasantness, happiness, awkwardness, or one of frustration.

While quantifying Desirability can, in many cases, prove to be quite challenging, those emotions that relate to the Desirability of a product can be quantified via Quick-UX as one of its three core categories (the other two core categories being Usability and Usefulness).

The minimal representative subset of variables for Desirability that adhere to the primary goals of Quick-UX (quick assessment for summary, direction guidance, and quantitative comparison) are…

  • Aesthetics (and minimal design),
  • Layout (including the visual hierarchy, flow and grouping of elements of the product)
  • Color Scheme (and Contrast), and
  • Typography.

Aesthetics

Information overload negatively impacts, hence the word ‘overload,’ the actual Desirability of a product. Any more, or supplemental, information and functionality than is needed contributes to the erosion of a pleasing and enjoyable experience.

Content, mouse-interactions, and transitional animations should be kept short and to the point. Do not explain a feature with a paragraph of information where a brief 3 word phrase would do, nor use a 3 word phrase when a clearly identifiable button can, itself, clearly convey the underlying message or functionality.

I have found that the product’s Aesthetics contribute most significantly to its overall Desirability. For this reason, unlike the other variables that make up Quick-UX, the Aesthetics variable can be assigned a value from 0 through 2 (as opposed to the typical maximum value of 1).

The value assigned to the Aesthetics variable in determining Desirability within Quick-UX is…

  • 2 if the product presents a clean, sharp, pleasing and enjoyable product environment where interaction is a pleasure. In addition, the product consistently makes good use of mouse-overs and animated transitions.
  • 1 if the product presents generally “OK” Aesthetics. The product may have some mouse-over states and other beneficial transitions, but these states and transitions are found to be incomplete and would benefit from a more comprehensive and consistent implementation.
  • 0 if the product suffers from information and graphical (transitions, interactions, etc.) overload. In this case, the content and graphical aspects of the site continually get in the way of getting the desired task completed quickly, efficiently, and enjoyably.

Layout

The Layout of a page is about more than just Usability. The Layout of a page, the visual hierarchy, its flow, as well as grouping and alignment of its elements, is the environment within which the user works and interacts with the product — it sets the tone and, in turn, shapes the product’s Desirability.

The value of the Layout variable is the sum of the decisions…

…regarding the product’s visual hierarchy…

If the most important content of the page

  • Stands out clearly (the user’s eyes are instantly drawn to these elements), add 0.4, or
  • Takes at least a few seconds to become apparent, add 0.2, or
  • Takes more than a few seconds to become apparent, don’t add anything.

…regarding the interface’s visual flow…

The visual flow can be described as the interface/page forces that guide the users’ eyes about the page. If a page has a negative visual flow, then it contributes to guiding the eyes away from the critical sections that need to be looked at and used to take primary actions and make decisions.

If the overall visual flow provides a non-negative impact on the page hierarchy,

then add 0.3,
otherwise do not add anything.

Furthermore, if the interfaces of the product require / recommend a specific sequence of steps be taken to accomplish a task, and the visual flow has a negative impact, guiding the user in the non-desired order, then subtract 0.15 from the Layout variable.

…regarding the grouping and alignment of the page / product elements…

A good product has clearly defined ‘regions’ within its interface. For example, a search engine may have one region for entering the search parameters, and another region for viewing the search results.

If the interfaces of the product present UI elements that appear to be scattered, placed without association or relevance to neighboring or distant elements that possess similar or different functionality, then no additional value is added to the Layout variable.

Otherwise, if most page elements appear to form logical, related groups or clusters, where perhaps not all of the clusters are neighboring or some of the clusters have redundant logic and functionality, then add 0.15 to the Layout variable.

However, if the relationships between like and dissimilar elements and groups are clearly presented, with no apparent inconsistencies, then the Layout variable is, instead, incremented by 0.3.

Color Scheme / Contrast

The Color Scheme of a product sets the mood and appeal. Color schemes can be simple, with only one or two colors, to very complex, with many complementary and varying levels of contrasting colors.

For example, red’s, yellow’s and orange’s are warm colors and, as a Color Scheme, could, very appropriately, be paired with products that wish to intuitively convey concepts or themes of warming or heating, like FeedBurner (as a theme derived from the name) or portable space heaters (products that keep you warm in the cold of winter).

The Color Scheme variable is assigned the value of…

  • 1 if approximately one to three primary hues are present within the product and those selected hues accurately reflect the message and theme of the product (some examples: warm colors = energy, cool colors = respectable, etc.).
  • 0.5 if the color palette is cluttered, there are some extraneous color selections or a mismatch of color temperature, Contrast, or saturation with respect to the messaging and tone. For example, an air conditioning website would probably want to stay away from the warm colors (red, yellow, orange), even if aesthetically pleasing.
  • 0 if the Contrast and color selections that comprise the product’s Color Scheme make some or all of the product’s information and/or functionality difficult or impossible to read or understand.

Typography

Some people do not fully appreciate the degree of impact that Typography can have on a product’s overall User eXperience, and especially its Desirability. Different fonts, different font sizes, and how they are arranged and laid out to interact with one another and other product elements, do more than present readable, or unreadable, content, but frame many of the emotional aspects of the product.

Typography decisions control the ranges of voice from loud and shouting to gentle and whispering, from serious to comical. When products are presented with too many fonts, they increase the likelihood of conveying the information with too many, and inconsistent, voices; as opposed to a pleasing, guiding conversation about the product.

  • If the Typography from page to page, interface to interface, functionality type to functionality type, is clean, readable, and consistent in usage then the Typography variable is assigned a value of 1.
  • Otherwise, if minor to major inconsistencies are apparent, or an overloading of Typography ‘voices’ are present, but all remain readable, the Typography variable becomes 0.5.
  • However, if the inconsistencies are tremendous, and make understanding the content difficult or bewildering, or even if only some of the content is unreadable, the Typography variable equals 0.

So… Do I want to use it?

While this question within the Quick-UX framework provides for the rapid assessment of Desirability, it represents only one of the three ‘questions’ that, when combined with…

Can I use it? (Usability)

Should I use it? (Usefulness)

…provide for an easy, consistent, and expeditious means by which to determine a product’s overall User eXperience.

Enjoy!

Jeremy Horn
The Product Guy

Should I use it? Evaluating Usefulness through Quick-UX.

useful Usability and Usefulness are also two of the three (the third being Desirability) primary categories involved in Quick-UX and the rapid evaluation of User eXperience.

It takes more than good Usability to have a good product. Another of the key factors in evaluating the overall User eXperience, and, in this case, the Quick-UX rating of a product is Usefulness. The question that naturally follows the Usability question of “Can I use it?” is…

Should I use it?

Again, as in the quick assessment of the Usability variables, and still adhering to the goals of Quick-UX (quick assessment for summary, directional guidance, and quantitative comparison), the variables that constitute the minimal representative subset for Usefulness are…

  • Functional Expectations,
  • Error Management (how they are handled and prevented),
  • Product Differentiation (including the question, “is it Memorable?”),
  • Findability (aka search engine and bookmark “friendliness”), and
  • Credibility.

Functional Expectations

A product’s marketing, website content, branding, language and layout combine to set the consumer’s expectations of the what they should anticipate to ‘get out of’ the product. As in many broader areas of life, expectation is critical. For example, if the user is lead to believe that they will be receiving factual numbers with interactive analysis tools about a topic, but instead receive highly subjective opinions, then expectations are sorely mismatched.

To assess the value for Functional Expectations ask the question, “Is this what the target user for this site is going to expect?” The value assigned to the Functional Expectations variable is…

  • 1 if all, major and minor, Functional Expectations are met.
  • 0.5 if some of the core expectations are met. The core expectations consist of the primary implied or promised functionality of the product.
  • 0 if the overall Functional Expectations are missed. The average user will find that the behavior and content of the product is 100% not aligned with any level of expectation set by the product.

Error Management

Ideally, the user can be provided with sufficient guidance to be prevented from making Errors or choosing mistaken, time consuming, paths. Error prevention can be, for example, helpful mouse-overs with timely assistance or real-time checking of the user’s inputs (an email address for example) and making sure it is correctly entered before allowing the user to submit and proceed with their information. However, in places where Error prevention does not suffice, a product should provide clear and simple messaging that allows the user to get back on the correct path, quickly and easily.

A product that does little to mitigate errors or one that frequently churns out thorny error messages, weakens its potential Usefulness.

In evaluating, the Error Management variable is assigned the value of…

  • 1 if the chance of making a mistake is rare, resulting from broadly implemented Error prevention measures. And, should an error occur, the messaging is always easily understood, clear about how to avoid in the future, and will rapidly allow the average user to get back to their desired actions.
  • 0.5 if a few to many Errors are encountered, but can be recovered from in a straightforward manner whereby the same user will also be able to learn to avoid the same Errors in the future.
  • 0 if the same Errors are made frequently and the average user will most likely find them to be difficult to avoid.

Product Differentiation

Assessment of the Product Differentiation variable benefits from at least a minimal level of experience and knowledge of other products similar to the one being assessed. If the product undergoing Quick-UX has a unique solution it is important to understand the scope of this memorable distinction.

I recommend that when determining the value for Product Differentiation to clearly identify and state the universe of products within which this current product is being evaluated. This will allow for more consistent and repeatable results.

Computed a little bit differently than many of the other Quick-UX variables, Product Differentiation’s final value is represented by the sum of the identified differentiating elements. If there are found to be no memorable aspects to the product, the variable is assigned the value of 0, otherwise…

  • 0.2 is added if one of the points of Product Differentiation can be found to be its user interface
  • 0.2 is added if the product distinguishes itself through its product-user interactions
  • 0.6 is added if the product provides a unique and innovative functionality / solution to the problem at hand.

Findability

Findability, within the scope of Quick-UX, values the extent to which a product can be indexed by search engines, as well as bookmarked by its users. Somewhat common with many “ajax-y” websites, the user can interact with the product, the content changes, details are loaded, but the URL stays the same as it was when the user first arrived at the site, or right after logging in. The content presented to the user, in this described scenario, is not only impossible to bookmark, but search engines are not going to be able to uncover the data if they cannot easily associate the found content with its own unique URL.

  • If a website provides an experience that simply cannot be bookmarked, where the URL stays constant throughout the experience, its Findability value is 0.
  • The Findability variable is assigned the value of 0.5 if at least part of the primary functionality of the product allows for bookmarking and search engine indexing.
  • The product achieves a value of 1 for the Findability variable if the ability to bookmark, and distinct URLs, are found to be pervasive.

Credibility

Credibility is critical within an online product. If there is no trust between the user and the product, then the Usefulness of that information becomes questionable. For example, if I am using a product that helps me choose the best bank for my money — the product must clearly communicate its veracity in the matter. In choosing the bank, I not only want to know the facts being provided to me are coming from a reputable source; I want to have confidence, through verification, that the advice is not coming from the very bank that is being recommended.

There are some very basic measures of Credibility that can be easily and quickly determined for Quick-UX, as well as in the broader and ever changing world of online products. The Credibility variable is assigned its value much like the Product Differentiation variable – via summation. The minimum value of Credibility is 0, or none. The Credibility variable adds…

  • 0.15 if no obvious typos are found throughout the product,
  • 0.175 if email contact information is provided,
  • 0.175 if telephone contact information is provided,
  • 0.25 if a physical address for the location of the business is provided,
  • 0.125 if there is an “About Us” page that contains bios about the members of the team behind the product, and
  • 0.125 if, on the “About Us” page, alongside the Bios, direct contact information to each of the individuals listed can be found.

Quick & Useful

Taken all together, these variables (Functional Expectations, Error Management, Product Differentiation, Findability, and Credibility) represent the Usefulness category of Quick-UX for the evaluated product. When looking at an entire product, the question “Should I use it?” represents only 1 of the 3 core components (Usability, Usefulness, Desirability) of a Quick-UX evaluation – a sure-fire, rapid way to obtain concrete and comparable means by which to assess a single product or compare its strengths and weaknesses to other products.

Enjoy!

Jeremy Horn
The Product Guy