Manners and HCI Design

It's fairly frequent to hear discussions about our (humans) manners and dealing with new devices. As we adopt new technologies it takes a while to figure out how to incorporate the changes in lifestyle in a way that promotes civility between one another. But that's not what I'm talking about. I'm talking about the manners that the devices and applications we create have.

In my day job I frequently deal with creating alerts for users. In my users' field of work it is important that they are alerted sometimes--even if we have to be a bit obnoxious about it--lives are at stake. But as I microwave a burrito for breakfast and then go attend to a few things while it cools down, it's not really important that I be alerted every 60 seconds that the burrito is done. In fact I rarely forget that I put food in the microwave but I frequently want to let it sit there for a few minutes to cool down. But the designers of my cool looking microwave didn't realize that. As I try to reverse engineer the personas they were expecting to buy said shiny appliance, I can see two possible audiences my microwave is designed for:

1) A user who is old and senile and typically forgets within 3 minutes that they have put food in the microwave and needs to be reminded.

2) A mega-stoner who has the munchies but forgot that they were already cooking those Hot Pockets.

Unfortunately for GE I am neither one of these people and I now have an active dislike for GE and their no-user-scenario-using, beep-making product designers. It's not like an oven where the house could catch fire if you go on vacation with it on. No, microwaves turn off when the little timer goes off. Worst case scenario is cold soup.

Another example that I see more and more online is the pop-up survey within seconds of a page loading. "Would you like to take this survey?" it asks. No, users are not invested in content at this point nor has the site made a good impression on the user. As a researcher and occasional surveyor I get the usefulness of surveys. They are easy, inexpensive and don't take much time. But we have to look at their other qualities--annoying, interrupting and boring--especially when we are asking people to volunteer to give their time and attention to the site's cause without compensation. It's not that surveys are wrong but we must employ them in a manner that models our polite standards of interactions. When we talk about user centered design vs task centered or goal centered, I think the use of manners is a possible discriminator for user centered design. If we are always designing for a person then we are less likely to neglect those sociological and communicative details that affect the experience for the end user. And this user sure would appreciate that.

This stuff really matters...

http://www.edibleapple.com/apple-gets-creative-with-icloud-error-messages-photos/

....but it only matters insofar as most software is devoid of decent error messaging. It doesn't have to go to quite such a cutre extreme as this example from Apple, but consider that often the most direct communication you make to your users comes in the form of error messages.

At work, people have learned to not glibly state in front of me: "Just post a big red error message when that happens. Maybe throw in an exclamation mark, a big red X, or heck, why not a skull and cross-bones?" But that is the common approach:  use this moment of one-to-one messaging to bolster a class/power division between you and your users:  in effect, slap them down and show them who's boss.

Interactive and Input Devices, The Buxton Collection

Bill Buxton is a researcher for Microsoft. He's written a cool book that we saw early in this summer in this very blog. He's also been collecting interactive and input devices for decades. Although these items might not be showing up at our local museums anytime soon, we can still check them out online at the Buxton Collection. The collection takes us through a visual history of the input devices that have played their own role in creating and shaping our field.

Some highlights:

The General Magic Data Rover 840 with sweet physical metaphor action.





The Versatron Foot Mouse. One might think this is marketed towards someone with a medical condition or extreme environment, but no--it's marketed as an improvement over your everyday hand mouse. I think this bad boy from 1984 is exactly what you need for your ottoman if you're a laptop couch junkie.





Okay, I admit, I picked this delight from Zenith simply because it is called the Space Command SC 600-X. Why didn't that name stick? It's way cooler than "remote control" or heaven forbid "clicker."

Captcha

I have an undying hatred for Captcha, it seems to haunt my self confidence whenever I attempt to submit anything online. All it says to me is that the website has unmanageable amounts of spam and that somehow, it's the users fault. Well, maybe no one is being blamed, but it is the user that gets stuck with the bill. I'm glad our justic system isn't built off the same logic. "Well, to prove your not guilty, we would like you to perform a miracle, someone benevolent and righteous enough to do such a thing could never be guilty." So, anyway, I got to thinking about new ways of Captchaing submissions that lower the amount of cognitive/ sensory resources needed to complete it. Most Captcha designs are based on the computer intelligence tests that somehow go back to the stoneage when all we had were words that were easy to read and words that were hard to read. With all of our intelligence in the fields of computer science, psychology, and AI, is this the best we can do? The first thing I thought was along the same lines as what is currently in market place, a text word written plainly, with a bunch of words and letters scrolling in front of it. The idea is that your brain would focus on the static word, and the fly by decoy words would be ignored. Well, I made an example..







It didn't take me long to realize that I wasn't a fan, and that I wan't figuring anything special out. So I got to thinking again. I remember watching Tron and thinking man it's so easy to tell his face is CGI, I wonder how well a computer can tell a CGI face from a real face, I know I can. What if a 2nd gen captcha had two faces a CGI face and a real one and the question was posed, "which of these is a real person?"

Can you answer? I think I can, can a robot answer? no clue.

UMEX, a shorter alternative for the already short SUS?

As you might have noted from one of my previous blogs (SUS), I am a big fan of usability analyses and statistics. One thing I have found time and time again, is that it can be very difficult to get participants to take surveys seriously. There often seems to be a sweet spot when the user has less than 5 questions, but over 10 questions and, whether you want to admit it or not, the number of bad data participants increases exponentially. That said, I came across a study recently by researchers at Intel that encountered a similar problem when attempting to incorporate a 10-item, five-point Likert scale called the System Usability Scale (SUS). To solve this, they decided to empirically reduce the number of questions by using only the highest correlating questions from a modified version of the SUS. The SUS was chosen because it had been extensively tested, and has proven to be a reliable representation of user satisfaction and system usability. However, by cutting down the number of questions from the SUS, it would also reduce the amount of data points, to help offset this, the Likert scales increased from 5 to 7 points. Increasing to a 7 point Likert was also heavily backed up by previous research (see Diefenbach et al. (1993), Cox (1980)). The results of the research was titled the Usability Metric for User Experience (UMEX).  

It was concluded that the UMEX is a “reliable, valid, and sensitive alternative to the System Usability Scale.” It has a high correlation with SUS at that of above 0.80. Because of this, it is suggested that the UMEX is fully capable as acting as a standalone application for usability testing. More so, because of its compact size and ease of application, the Umex is attributed by a fundamental requirement by the Use Experience community: “in order to measure user experience effectively, its components need to be measured efficiently.”

I have not ever used the UMEX or anything like it. I can not say it should be used, I just think someone doing a quick and dirty study might like using it.

Color contrast Calculator

Ok, so in the last post I wrote about color contrast and provided some links to a few calculators. I found however, that the calculators have all been designed for the designers and not for the usability tester. So the bold, adventurous spirit that I am… not really, just interested enough, decided to prototype one. Ok, so it is very early in the Alpha phase, and yes I designed it in excel… but I think it has a lot of potential. 

Here’s what it does.

• .       Provides the practitioner with an eyedrop color selector. Many times when doing analyses, we do not have access to the original code, and even if we did, going through code to find a hexadecimal color code isn’t exactly the best use of time.   Provides a quick pass fail for both color and brightness, as well as a combined pass fail.
• .       Shows percentages for acceptance

What it should/ will do

•   Accept text size
•  Have a second tester for background contrast. A big problem with contrast is not just the for/background contrast, but it is also the amount of changing contrast found in the background. For example, if the background is a faded brick wall, although any given color provide plenty of contrast for the forground, the internal contrast between the levels of brick make text reading illegible.
•   The program should automatically spit out the text needed to present the data, with descriptive stats included and everything. (i.e., A basic color contrast analyses showed low levels of contrast (CD = 100)…) 
• Provide an example of the colors chosen.
• A bread toaster.

I am attaching my first draft for anyone interested in looking. HERE is the link

Color contrast

Although many color design rules originated to support visual impairments, they are beneficial for all users. Reading is not an innate ability; we do not learn to read simply by watching others read. It requires effortful study and attention. Reading can be one of the most cognitive recourse intensive things a user does on a website. For this reason, it is vital that we as UX designers, facilitate easy reading for all users. This will ultimately help users discern text, paragraphs, and text bodies much more efficiently. Background / foreground Color testing is often judged on two primary attributes, the contrast of the colors  and the brightness of the colors. Equations and standards for meeting accessibility requirements have been developed by W3C http://www.w3.org/TR/WCAG10-CSS-TECHS/. These standards provide detailed calculations for determining color contrast effectiveness. These formulas are as follows:

 Brightness Difference:

            The brightness difference is found by subtracting the figure index from the ground. The brightness index is found by multiplying each RGB value by a predefined partition of 1000. The values are then summed together and then the total is devided by 1000. The value for Red is 299, the value for Green is 587, and the value for blue is 114. So the completed equation would be: (299R + 587G + 114B)/1000. Next you subtract the index of the 
figure from the background and you have the difference.

Color Difference

            Color difference is very similar, however, the index is simply a summation of all RGB values and the difference is found by subtracting one from the other.

The range for color brightness difference is 125. The range for color difference is 500.

Many calculators have been created to do this for you.

http://www.hgrebdes.com/colour/spectrum/colourvisibility.html

http://snook.ca/technical/colour_contrast/colour.html

http://www.takeform.net/contrastCalculator.php

http://www.hp.com/hpinfo/abouthp/accessibility/webaccessibility/color_tool.html

Craigslist? Why bother redesigning it?

After all that grueling work, I come across this link for an Adobe Air desktop app of CL.
http://www.cldesktop.com/

I love the sporadic migration of web apps to the desktop (actually I helped design one: Yousendit's "Express"). Somehow it feels like the barbarians storming the walls.

-Rob

Existing Product Redesign vs. New Products

There is a very big difference between doing Interaction and Experience design for new products vs doing these tasks for the redesign or upgrade of existing products. My last two jobs were with companies that had established software products and product managers with loads of client and product knowledge. In this scenario, there is much less up-front user research to be done since the feedback is typically steady and a product manager knows the shortcomings and the opportunities for enhancements. Consequently, it is easy to look at the job of Interaction Design more in the middle of the process. From assignments over the course of my classes, it is typically the early research that is lacking in my projects and I've come to realize that only certain, lucky individuals get to do true product research. The discovery of a need may still come from another role such as a product manager or the business portion of a company. But if the product is new, it is the designer and researcher that must use proper methods to discover the use cases. One of the things I look forward to as I move forward in this career is doing proper research on users with interviews, case studies, focus groups and ethnography, to name the main methods.

New Login Designs - New Problems

I posted something a few weeks about about bad design and noted the issues with single sign-on or the lack thereof.

Recently I came across this post which looks at an emerging issue with a user's ability to login using authentication via an entirely different service, such as Facebook.

This is a login option I don't tend to use - I prefer to keep everything separate - but I thought these stats were interesting, noting how often folks end up with multiple accounts and still can't remember their login:

"User Interface Engineering's analysis of a major online retailer found that 45% of all customers had multiple registrations in the system, 160,000 people requested passwords per day, and 75% of these people never completed the purchase they started once they requested their password. Ouch."

The folks at bagcheck illustrate an approach they're trying in order to help make this type of login easier for the end-user. I like that they show they're process and how it evolves.

What does strike me as odd is that you can see all these other user names when you search for your own... that seems worrisome.

Article: http://bagcheck.com/blog/02-design-solutions-for-new-log-in-problems

Javascript UI Libraries - Bridging the Gap Between UX Designers and Web Developers

I decided to finish my blog posts with the same topic that I started with - the gaps between the developers and designers. Responses to my first post were interesting and insightful.

Again, I remember people talking about developers shooting down their UX ideas because they simply don't think it is possible given the time-constraints. Javascript UI libraries are rapidly evolving into the role of saviors for both UX designers and developers. There are several javascript libraries out there that makes the job of manipulating a web-page's objects within it's Document Object Model very easy. In addition many common widgets that are used most frequently while designing websites are now emulated by simple to use Javascript libraries. Examples of these commonly used widgets are - Accordions, Drop Down Menus, Dialog Boxes, Minimizable boxes etc,.

Following are a few of the many Javascript UI libraries that make the use of these widgets as easy as a couple of lines of code.

YUI

JQuery UI

MochaUI

Scriptaculous

Livepipe

AlloyUI

XUI

Knowledge of the features of these libraries would strengthen your case when a software developer shoots down your proposal stating 'lack of time' as a reason. Software developers in turn can turn themselves into amazing UX developers without much effort if they are familiar with these wonderful tools. Adding new UX features to their repertoire everyday, these libraries are bridging the gap between designers and developers.

Geri Interaction Design: Importance of Logo in Branding

Geri Interaction Design: Importance of Logo in Branding: "New Logo Sketches This is a redesign sketch of a new logo for the HCI site. I attempted to keep some of the same language of the existing l..."

Geri Interaction Design: Card Sort Exercise

Geri Interaction Design: Card Sort Exercise: "Lecture number six had a section about a method of research from the information technology discipline called card sorting. This is a method..."

Geri Interaction Design: Creation of App For HCI site.

Geri Interaction Design: Creation of App For HCI site.: "Wireframe for HCI site This is the wireframe for the proposed redesign of the Iowa State University Human Computer Interaction site. The ho..."

Opportunities for UX Improvement in Retail Websites

My curiosity to know if there are any websites or UX firms that examines different websites for usability metrics led to a few fairly interesting companies, individual blogs and websites. One of my favorite studies conducted by Usography is this UX audit.

Usography reviewed 100 top retail web sites and presented their findings in "Retailer UX Audit". The sites were rated according to a list of 30 user experience feature criteria (listed in the article). The founder of Usography, Paul Bryan, summarized their findings in this article on UXbooth.com. It is interesting to note that on a scale of 30 two companies were were tied for first position. What is more interesting is the fact that these two companies implemented 16 out of the 30 features. I'm sure the article would be even more fascinating to people who worked on the 'Individual Class Project 3' (Socialite) or participated in an in-class activity where we discussed about ideas for a shopping application with social features. Aren't you thrilled to see that some of the best features that were found to be missing from many sites were actually discussed during the in-class activity? For example we discussed about features related to price comparison and visual try-ons. Though companies like Buy.com and Amazon.com which are online-only retailers take the top spots, they only implement half of the features used as the evaluation criteria. This tells us that even in case of mature companies there is a significant potential for UX improvement. I do not believe that implementing all 30 features would increase the sites overall usability. Also a thorough cost-benefit analysis should precede the decision to support implementation of any of the listed features. However this audit provides tremendous value to the companies by pointing-out areas of improvement, without the companies having to invest in a UX evaluation.

Note: Do check-out Usography's website and services. They have an interesting business model and offer several design services with a lot of focus on evaluation.

A Picture Is Worth a Thousand Words...er...Page Hits

The saying is true and Stew Langille, former VP of marketing at Mint, is out to prove it with his new startup visual.ly. Visual.ly will attempt to build a community, market and tools for infographics. Later this year, visual.ly plans to release Web-based “prosumer” tools for editorial, marketing, student and other users to create their own shiny infographics.

According to Langille, some of the most successful posts on Mint.com's site, that garnered the site its user base, were the posts including infographics. These posts would receive 30 to 40 times the page views of non-infographic posts.

Visual.ly hopes to make creating attractive infographics from user data easy--particularly easier than creating them with non-data driven programs like Adobe Photoshop. These designs can then be tweeked and shared as desired.

It is an interesting idea and I'm looking forward to trying it out. Making attractively designed infographics in Illustrator or Photoshop is not always ideal. I'm curious to see how they'll create different themes or styles so all the infographics do not begin to seem the same. A few of my favorites shown so far are True Colors: Color Preferences By Gender, Mars Missions and The Evolution of the Geek.