Definition:

An error is any action that causes an unwanted result. Errors fall into two types: slips and mistakes. A slip is an action that was not what was intended. An example is immediately clicking the OK button on a popup asking to delete your entire hard drive. You didn't *want* to delete everything but you did unconsciously. Mistakes are errors that occur because a user's intention is not correct but that action for that intention is sound. A common medical mistake is to treat the wrong symtoms with a specific medicine. Administering a prescription for stomach pains is the right way to treat a patient for a food allergy, but not if the patient's appendix is about to burst.

Interaction Design:

The two most common ways to account for slips and mistakes in interaction design is to warn a user if you can tell that something has been done wrong or offer the user a way to undo their last action if it was unintended. Common examples of this are forms that check your credit card information before allowing you to order a product online. This situation also falls under the 80/20 rule because most of your customers are going to use your online checkout process and some of them will encounter an error at least once. If these errors are well designed they process can fall under the aesthetic-usability rule as well.

User Experience Design:

Automobiles have many chances for errors to occur every second that they are in use and the experience of driving is heavily influenced by preventing these errors. Most people take for granted the interlock between your gear shift and the ability to take the key out of your ignition. Imagine you're parking on a hill and commit a slip -- you forget to put the car in park. Instead of your car rolling into the one behind it, the interlock tries to prevent you from doing this by holding your key. This is effective because the feedback is immediate -- you've done something wrong. In combination with lack of consistency -- this doesn't usually happen, what did I do differently -- allows the slip to be caught and corrected quickly.

Permalink | Leave a comment  »

Definition:

A system's usability is improved and the learnability is increased when it functions in a consistent way. Users of your system can focus on completing their task if they can establish how it works by experiencing it before, instead of rethinking their actions at every step.

Interaction Design:

Consistency is one of the main pillars of interaction design. The methods to restart a process, undo or redo an action, navigate between steps or enter information should be consistent. This principle can get tricky very quickly — a form should look like a form, but not all forms should look the same. Forms that are saved automatically vs queued before save should look different. A powerful way to get a user's attention is to break this rule. Modal dialog boxes that are displayed before a form is submitted can protect the user from doing something potentially dangerous.

User Experience Design:

Consistency in experience is important to every successful brand. Southwest Airlines is a company that has recently ramped (get it?) up it's customer experience by having two consistent, unchanging goals — to be the low-cost airline and to not take advantage of passengers with extraneous fees. Southwest has started to run commercials in the US that claim no bag fees. No weight limits. No size limits. No bag fees. Period. They've made the decision to meet their operational budget by streamlining other processes instead of charging the customer.

Permalink | Leave a comment  »

Definition:

Affordance is the influence the physical characteristics of an element or environment have on the user's ability to know how to use it. Buttons look like they can be pressed, objects with round shapes on the bottom look like they can be rolled and drawers with handles on them look like they can be pulled out.

Interaction Design:

Interaction design often involves buttons that the user can click to invoke an action. This digital representation comes directly from it's physical counterpart because the affordance is so high. Shadows and gradients on these butons are very important because they mimic real buttons, and are the only clues that show what's a button and what's just an area on the screen. The design of the new form submission buttons on the Rackspace Cloud Apps Control Panel have been meticulously designed to look clickable when they're allowed to be clicked, and to look clearly disabled when you can't.

User Experience Design:

Affordance rules are often broken in the kitchen. Imagine you are at a friends house and need to find a spoon. From your previous experience with your own kitchen, you know that silverware drawers are commonly very wide. You reach for a drawer near the sink and pull. It seems stuck. You pull again. After a few puzzled seconds, you realize that this drawer doesn't pull out because it's purely decorative — the sink's internals are behind it. In this case the (poor) designer decided (erroneously) that uniformity between cabinet units was greater than the experience of finding an object in a drawer. This may seem like a very insignificant event— and it is — but why place a knob on a drawer that doesn't function. If it looks like a knob, it should function as a knob. Once a few of these hiccups happen to a user while experiencing your product or environment, it starts to add up.

Permalink | Leave a comment  »

Definition:

Accessibility is one of the major tenets of design, and covers almost every design practice. Accessibility is not just whether or not someone with a disability can use a design effectively. It also covers the ability of a design to have mutual benefits for diverse groups of users. Can both a new user and an advanced user both accomplish their own specific goals?

Interaction Design:

In interaction design accessibility focuses on two very different types of design problems — human needs and technical limitations. It is a well known principle of accessibility to account for color-blindness, users with poor eyesight and other physical disabilities. Technical limitations due to aging browsers, lack of Javascript and slow internet connections are starting to become just as important within web application accessibility. Flickr's sign up button has a few issues with color blindness — doesn't the button on the right look disabled?

User Experience Design:

In user experience design, accessibility also contains a human element and a technical element. The Rackspace Cloud's current signup process requires a phone-based fraud check. What if our new user is completely legitimate but can't speak any of the languages that Rackspace representatives do? Can a 6'8" man realistically fit into his new Porche? The accessibility of a Porche's cockpit is a technical limitation that was designed to balance mechanical systems, aerodynamics, and the experience of driving the car. At some point, the there is a limit for each of the variables, and a decision was made to limit the physical size to increase the overall experience.

Permalink | Leave a comment  »

Definition:

The Aesthetic-Usability effect is the perception that more aesthetically pleasing interfaces are easier to use than less aesthetically pleasing ones. "Pretty" or "sexy" interfaces are also more likely to be used regardless of if they actually are easier to use.

Interaction Design:

Contemporary interaction models crafted by companies like Apple, BMW and Bank of America are prime examples of this practice. Studies have shown that users may create more errors on an iPhone than a Blackberry, but users will overwhelmingly agree that the iPhone was much easier to use. Rackspace's new Unbounded List widget is much more aesthetically pleasing than its previous version, two <select> boxes, and hopefully our users will find is more usable because of its improved look and interaction methodology.

User Experience Design:

Bank of America's new envelope-free deposits on their ATM's are actually slower than their previous counterparts because (I'm guessing here) the machine now has to count cash as it is deposited instead of accepting any envelope and having it hand-checked later. This process may be 10 seconds slower, but it seems more usable because you don't have to fight to insert cash inside an envelope and sealing it while it's 20 degrees outside.

Permalink | Leave a comment  »

Definition:

The 80/20 rule states that 80% of the effects generated by a system are centered around 20% of the variables in the system. Design teams can use this rule to their advantage by focusing the bulk of their efforts on the 20%. The rest of the system shouldn't be neglected, but a janitor's closet doesn't need to be as well designed as the stadium seats.

Interaction Design:

In interaction design, this most commonly refers to the two or three most trafficked pages, such as the Facebook news feed or a Google search listing. Within Rackspace's Cloud Apps, the Control Panel mailbox listing is our most commonly accessed page and the design team's focus should reflect that.

User Experience Design:

In user experience design, this rule is represented in common experiences that most customers must do — checking out at the grocery store, syncing an iPhone/iPod or filling up your car at a gas pump. Think about your last experience with a self-checkout kiosk at a grocery store. Did you leave with a smile on your face? Were you delighted? Half-assed efforts are causing severe damage to the UX of buying groceries and shows just how damaging this rule can be.

Permalink | Leave a comment  »

As a design moves between product owners, business analysts, product managers and developers, small design decisions and functional specs get lost for many reasons — requirements change, revisions are made and parties aren't always represented correctly. Sometime's a developer is under time constraints and must improvise. This isn't a bad thing, it happens at Rackspace, Google, Facebook and other large companies all the time.

This phenomenon can't and shouldn't be stopped. Instead, I want to educate developers; to teach what is important and how to improvise by learning basic design principles. To some, insignificant details like error message wording or whether an action is triggered with a link or an HTML button isn't important, but it really is — and I want to teach you why.

Follow along via Twitter or RSS over the next few weeks for a new design principle every day. Here's a preview of the first few topics:

• Lesson 1: The 80/20 Rule
• Lesson 2: Aesthetic-Usability Effect
• Lesson 3: Accessibility
• Lesson 4: Affordance
• Lesson 5: Consistency

Permalink | Leave a comment  »

Skip to The Problem, Interaction Research, UI Research, Usability Testing or the Final Design.

The Problem

Like many of the major web applications and social networks, Rackspace must meet the needs of any customer, from those with only 10 employees to a large enterprise. Enterprises present several interesting design challenges to our Email & Apps Control Panel because they have a large amount of email addresses, aliases, group lists, etc., and are essentially boundless. Loading these large datasets can impact the performance of our services for that specific user, and in come rare cases, the performance of the entire Control Panel. We've started to roll out our solution to the issues, which we call the Unbounded List, and I wanted to provide some insight on how we arrived at our solution. It is also important to note that our background research and user study methodologies also include interviews, survey results, statistical analysis of usage and other quantitative practices which are not covered in this blog post.

Interaction Research

We first looked to existing solutions in the industry, particularly those by Google and Twitter because both companies display extremely large sets of data. The original Twitter interface used a traditional list and provided a button to show more tweets. This is a very simple method but can get cumbersome when you are required to hit the button five times to view 100+ tweets or if you are looking for a tweet in the middle of a long list.

The new Twitter redesign uses a scroll-based loading mechanism that will load new tweets when you start to scroll within a certain percentage of the bottom of the list. This practice works well when you are reading each tweet, but not when you are trying to find a specific item, as in our use-case.

Google Images uses a hybrid of both of these practices by loading several "pages" (basically sections) of images, then loading the content of each "page" as you scroll towards it. As you reach the last "page" you are presented with a button that will load more pages. I suspect that Google designers have found that any images past this point are mostly useless and are trying to guide the user to make a new search instead of looking through useless images.

UI Research

Facebook has made a huge improvement in the format and display of their lists in the past few versions of their application. Our design team especially liked the concept of showing "All" and "Selected" friends when creating an event. Facebook also has a very prominent search box that helps the user to find someone among hundreds of friends. Search is very important to us because enterprise customers frequently need to find a single email address out of 30,000 or more.

The iPhone also does a good job of displaying a list of recipients for sending an email or a text message. However, Apple's interaction practice is different from our control panel because iPhone data is already on the device, but we will need to load ours on the fly from a remote server. The luxury of having the complete list to scroll through is immediately apparent, particularly when combined with Apple's acceleration-based scrolling algorithm. UI-wise, our team liked the section dividers and the alphabetical listing on the right.

Design Iterations

Our first wireframe concept was focused on allowing users to accomplish the two main use-cases: adding someone to the list and confirming their change/viewing who is on the list. Most of what you see in the next two screenshots was eventually discarded, but you can see how we experimented with expanding/collapsing/side-by-side sections, an alphabetical listing on the side, and an inline search field.

After a few interactions and informal testing, we arrived at the design below, which was then used for formal usability testing. The floating "All" and "Selected" links became tabs to solidify their relationship to the list and align with our current UI practices. Custom checkbox icons were chosen to give us maximum flexibility to reflect states other than just on and off in any future designs. Product icons were also included to allow for mental filtering and add a little bit of color. At this point we were heading towards the Google Images interaction model, which prefetches a set of results then loads the rest as the user scrolls up or down.

Usability Testing

Our formal test plan included two groups of users: those already familiar with our Control Panel and who had never seen it before. We found that most users initially understood what the widget was showing them, but had a hard time comprehending the selected and de-selected states. This was caused by our over-stylized check boxes and our choice to select the "All Users" tab by default. Most of our testers wanted to see a list of the current members, not all possible members on the domain. This comes down to which use-case is more important: Which users are on this list? or I need to add Joe to this list.

In light of these results, we clarified the names of the tabs, modified the sprites of the checked/unchecked states, and changed the default tab state. Because the list used custom icons instead of native browser checkboxes, we were able to improve usability by adding a hover state to both the row background and the icon itself, which is impossible with native checkboxes.

The Final Design

You can find this new Unbounded List widget in several places in our Beta Control Panel and will soon be launching into our production Control Panel.

Permalink | Leave a comment  »

The Blurring of Industrial and User Interface Design

In today's world of design, we can no longer ignore the blurring lines of industrial design and user interface design. While the two disciplines have their own methodologies and processes, they now share a responsibility for creating a seamless experience -- between screens and hardware. This panel will discuss the convergence of these two disciplines and share various perspectives on how we can all work together.

View Panel

Why Green Data Center Design Matters

Yahoo! has been a leader in designing and building environmentally sustainable data centers, and has invested millions in creating the most energy efficient data centers possible. Yahoo! Scott Noteboom, head of global data center infrastructure at Yahoo!, will address the evolution of Yahoo! data centers and how the company is getting more for less through facilities with lower costs, higher performance and accelerated construction.

View Panel

Urban Technology on the Dark Side

Urban computing isn't just fun, games and mapping. There's a dark side to urban technology, with surveillance and subversion in operation and in opposition. It shouldn’t be a surprise: most technologies we use were originally developed in the military before making their way to the civilian side. But mostly, when we talk about urban computing, we tend to focus on its optimistic and entertaining uses. This panel confronts the relationship of cities to technology. Some things it will discuss: how soldiers literally cut holes in walls to through houses in urban wars; how the government creates geographically dark spaces on the map and launches secret satellites; and the role of DARPA (Defense Advanced Research Projects Agency) in giving rise to urban technologies we use today – to name a few. In balance, we’ll look at the ways that artists, activists, designers, architects and hackers reveal and challenge these shadowy-seeming technologies in their work.

View Panel

Customer Service for Web Apps: Bringing the Wow

Great design and development is not enough to create a great customer experience. Find out how small support teams can make a huge impact on thousands of customers through simple tools and techniques, learning from people who've done it personally. We'll cover support as a marketing tool, choosing support methods, setting expectations and how to deal with dickheads and many more topics from us and from you. Don't let crappy customer service sink your web app!

View Panel

Remote UX Research

The secret and unpublicized force behind her co-workers' recently completed book, Remote Research, this panel will tell you all the secrets the authors were too scared to put in the book. Then the authors can do their best to defend themselves, since they'll be on the panel, too. As the publishers of http://remoteusability.com, Cyd, Nate, and Brynn can tell you what the latest UX research tools are and how to use them. This can help designers and developers do better research. Remote user experience studies allow you to recruit subjects quickly, cheaply, and immediately, and give you the opportunity to observe users as they behave naturally in their own environment. The panel will cover recent examples from Habbo games, Intuit, and Sony and give people an idea how to design and conduct remote research studies, top to bottom, with little more than a laptop. Actually, nothing more.

View Panel

Conserve Code: Storyboard Experiences with Customers First

Changes to design, direction, UI can be costly if you are already in the development cycle. It is easier, faster, and cheaper to course correct on paper. Storyboarding your ideas allows you to rapidly think through the customer experience, pinpoint what’s really important to the customer, and scrap the ideas that won’t work. At Intuit, we use storyboards to rapidly test our ideas with customers multiple times before spending time developing code. This enables us to define concepts that will delight our customers, so they buy our products and tell their friends. Storyboard development and testing is a method anyone can do—it doesn’t take an artist or researcher to get great feedback from customers. In this hands-on workshop you will learn how to express your ideas in a story that will elicit valuable feedback from your customers. You will be able to iterate on ideas with lightning speed to uncover what works, what doesn’t, and unearth what will truly delight them (which is often not your first idea!). We will use frameworks to help you define what’s most important to your customer so you know you are focusing on the right things by the time you start to develop.

View Panel

Wink & Nudge: Cognitive Insights for Awesome CSS3 Transitions

As CSS3 gains more and more foothold across the Web, it's giving us animation superpowers in the browser. Will you use CSS3 transitions for good or for awesome? At their worst, animations and transitions can be gratuitous, distracting, and downright annoying. But they can also add meaning and delight – a nicely designed and timed movement can catch attention, give a sense of continuity, mimic something familiar from real life, or show users how slippery things in the ether relate to each other. In the real world, events are connected by transitions and animations, and our cognitive system has evolved to pick up meanings from them

View Panel

Lost in Translation: Designing Across Mobi, iOS4, Android

Yeah, there is an app for that…in the past few years we have seen the mobile landscape take shape and increasingly become part of our consumption habits. More clients are recognizing the potential of mobile platforms. Now clients are asking for it, “Give us a mobile web site, iphone app, and a android app.” Now what? Join us for some real-world lessons learned and good overall UX design recommendations.

View Panel

OpenStack – Unlocking the Cloud

The cloud computing market has exploded and reached hyper-fragmentation with dozens of IaaS vendors, yet the majority of offerings are proprietary, closed platforms. As a result, many technology companies and cloud consumers are rallying around an open source alternative, OpenStack, which has the potential to drive open cloud standards. This panel will explore the state of open cloud standards, relevant players, and benefit to end users, including the acceleration of cloud technologies and the ability to freely move workloads from private to public clouds, or among different service providers.

View Panel

3D Interfaces: A Primer on Stereoscopic Interaction Design

As 3D screens and content burgeon, what are the implications for interactive design? This talk will cover the basics of what the interaction designer needs to know about 3D to prepare for designing stereoscopic interfaces, including: controlling parallax; 3D encoding and presentation technologies; the challenges of mixed environments of 3rd-party 3D video and 3D interface; setting up a 3D design workflow; and the new creative opportunities presented by 3D displays.

View Panel

Open Source and Corporations

Not invented here syndrom is rampant in many companies but few consider open sourcing the technology. Be it form a convincing management to releasing the technology to ensuring that community contributions are maintained. The panel will consist of open source contributors from larger companies and discuss the problems they have doing it and the benefits that are received from the open sourcing.

View Panel

Rapid Experimentation In the Wild, On The Cheap

You want to make sure that your customer will think that your idea is awesome, so you need to get their views FAST. You don’t need to pay someone hundreds or thousands of dollars to do research for you. Heck, you don’t have any cash to spare. Besides, customer focus groups and surveys are dead. (And frankly we didn’t think they ever worked). You don’t need to have a fancy lab or even a fancy working prototype to test. All you need is a little bit of time, a place with the kind of people you think will want to use your idea, and a little bit of guts. You’ve gotta be in the customer’s natural habitat with prototypes to get the intel you need to refine that money-making idea. We’ll show you how. Learn how to design and execute rapid experiments with customers.Stuff we’ll cover includes: Figuring out what you need to find out, putting in the minimum effort to get great feedback on your ideas, how to approach a customer, what to ask, what to listen for, and what to do about it.

View Panel

Streamlining the Redesign of Yahoo! Mail and Messenger

Ever wonder what it takes to redesign products that are already being used by millions of people around the globe everyday? This panel will give you a glimpse into product cycle using the latest technologies and the challenges for multiple platforms that a project of this scale encountered.

View Panel

Permalink | Leave a comment  »

Today's internet is full of highly interactive software, and prototyping interfaces has never been more important. Designers can't lay down pixels in Photoshop or Fireworks and expect the intended experience to transfer to their users. For example, an AJAX request can take anywhere from a few milliseconds to several seconds to return to the browser. Animations take time to complete. Hover effects add context that you can't always convey through a static image properly. The easiest way to see how these interactive elements will function is to prototype them.

In this article I'm going to cover how to plan your prototype, setup the HTML file and make a revision to the design after the first round of testing. As a demonstration, I'm going to design a new feature for the article page on Wired.com. Let's assume that the research phase of my project found that readers of Wired were curious to see what the next article was going to be and how long ago it was published before they decided to read it. I'm going to prototype this interaction before I pitch the idea to management.

Step 1: Isolate Static Elements

The first step I take in starting a new prototype is to figure out what elements are going to remain static and save them as an image directly from the design mockup. This allows you to stick the PNG in the page body's background and avoid the time it takes to write and test real HTML/CSS.

body {
        background: url(background.png) top left no-repeat;
}

Step 2: Create HTML for the Interactive Elements

Next, create, style and position any HTML elements you need the user to interact with via jQuery. I tend to use inline CSS to keep the number of files to a minimum. This technique only requires an index.html file and any additional images you've created. For quick prototypes, it is easiest to absolutely position your dynamic elements. For clarity, only the left link and box is shown.

#leftlink {
        position: absolute;
        left: 93px;
        top: 313px;
        color: #007CA5;
        text-decoration: none;
}

.box {
        background: #fff;
        border: 1px solid #ccc;
        padding: 20px;
        z-index: 5;
        -moz-box-shadow: #888 2px 2px 8px;
        -webkit-box-shadow: #888 2px 2px 8px;
        box-shadow: #888 2px 2px 8px;
        display: none;
}

< a href="javascript:void(0)" id="leftlink">PREVIOUS POST</a>

Step 3: Add in jQuery

Once you've got all of your elements in the HTML file, it's time to add some interaction. I'm a huge fan of the jQuery library, but you can use any other library or just vanilla Javascript if you want. As an aside, I'm intentionally being a bad person by including Google's copy of jQuery directly, but this allows me to keep a text snippet of my "base" prototype that doesn't require any extraneous files to start from.

In this example I'm going to have a summary box appear when the user hovers over the previous or next article links. Most of this effect will be done by toggling the HTML element to be visible and changing some CSS when the link is hovered over.

$(document).ready(function() {
                        
        $("#rightlink").hover(function(){
                $("#rightmore").show();
                $(this).html("NEXT POST ››");
        }, function(){
                $("#rightmore").hide();
                $(this).text("NEXT POST");
        });

});

Step 4: Iterate the Design

Now that you've got a working prototype, you can test this out with real users very effectively. You don't have to explain your thought process, just as "Show me how you would travel to the next post". Suppose that after this testing you realize that your users still aren't sure where that link is going to take them. Perhaps adding an animation that reveals the preview box from the direction of the next article. We are implicitly using the convention that the left side is older content and the right side is new content, just as pages are laid out in a book

$("#rightlink").hover(function(){
        $("#rightmore").show().animate({
                left: '460px',
                opacity: 1
        }, 100);
        $(this).html("NEXT POST ››");
}, function(){
        $("#rightmore").animate({
                left: '770px',
                opacity: 0
        }, 100);
        $(this).text("NEXT POST");
});

Conclusions

It turns out that the second iteration of the effect is way too intense for my taste, but that shows you the value of prototyping. As a designer, it is difficult to predict how that interaction might feel to the user while remaining within Photoshop or Fireworks. Once you've made a few simple prototypes you can graduate to simulating or making real AJAX requests, you can enhance them by simulating loading indicators, ajax requests, or other elements to make the page pretend to be alive.

If you found this tutorial helpful, please leave a comment. If you run into any problems or would like specific advice on how to set up your prototype, please feel free to contact me.

Permalink | Leave a comment  »

I built this plugin to easily find out how buttons, error messages and instructional text will display in different languages without leaving Fireworks. This is important for any application that is supported in many languages, such as the Rackspace Web Apps platform. For example, a "Submit" button that is hard-coded at 80px wide will break when translated into Spanish because the word itself will be over 80px wide.

This plugin will automatically translate the current selection (or selections) via the Google Translate API. It is important to note that these results are not "translation" but "transliteration", which won't represent the original word exactly. I believe that the results, while far from perfect, are close enough to give a good approximation of the localized design.

This plugin is built off of the wonderful FWXHR library by John Dunning, which allows Fireworks Javascript commands to make XMLHttpRequest calls. This ingenious library uses a Flash movie to funnel requests to the internet at large, functionality that is blocked in the native JavaScript (presumably for security reasons). The request hits a PHP file located on my (or your) server that connects to the Google Translate API through Jose da Silva's PHP library.

Error handling is done minimally by myself and pretty extensively by John's XHR library. The current version won't handle selections of non-text objects. This is mosly do to the lack of API documentation on Adobe's part.

Pleaes let me know how you are using this plugin and any comments or feature requests you may have. Since it's Javascript you should be able to modify it at will. If you come up with anything cool, please share!

Permalink | Leave a comment  »

Background

To test my Industrial Design thesis on Campus Emergency Notification Devices, I wanted to put a prototype in front of some real users. After running a few walk-through tests, I realized that I needed a way to record and analyze these tests. I contacted the Center for Human Computer Interaction at Virginia Tech to inquire about their eye tracking equipment. I was given access to an ASL Mobile Eye tracking device. The Mobile Eye allows the user to wear a recording device that allows them full range of movement instead of being tied down to a computer. This was perfect for my use since I needed users to be able to walk around a room and evaluate my prototype.

Software

See the full gallery on Posterous

The Mobile Eye hardware comes with proprietary software that allows for calibration and video capture. I found this software to be capable, but pretty outdated. As an interaction designer, I found a lot of flaws but was still able to get everything setup. The first step for calibration is to align the user's eye in the center of the eye camera. This is relatively simple to do but is very important in maintaining accuracy later during capture. The second step is to adjust the sensitivity settings in the software to get a good reading of the three infrared beams that reflect off the surface of the eye. These beams are used to located the user's pupil (yellow circle). The last step is to instruct the users to look at several different points in front of them and indicate to the software where they are looking. This gaze calibration is done with 6-9 points in order to get a good, accurate reading.

Once all of this calibration is complete, the software will show a real-time view of what the user is looking at. This can be recorded straight from the computer or used to playback footage that was captured walking around.

Example

I'm keeping my thesis confidential to pursue potential patent applications but I wanted to show some actual footage shot by myself when I was getting familiar with the equipment. I decided to record myself and a few friends playing Xbox because gaming offers a lot of constant eye movement and scanning. Xbox also offers a relatively narrow "cone of focus" that will stay within the bounds of the eye tracking glasses and keep the capture highly accurate.

After capturing about 10 minutes of gameplay, I started to see results that backed up a lot of assumptions I had about different styles of gameplay. In each of the videos, you can see that the player will do a modest amount of scanning, but mostly keeps their gun pointed in the direction they are looking. This is to minimize the reaction time of having to swing the gun over to a target that is identified. By moving the gun with the eye, this reaction time is greatly increased. In the second video, you can also see how much the mini-map is utilized when it's available.

Limitations

Throughout my testing I found a lot of limitations that I'd like to share with anyone that is considering using this model eye tracker. During the testing of my prototype, I had a lot of issues with calibration once the subject was untethered from the computer. I think that in the process of walking around the subject's eye shifted and the alignment in the eye camera suffered. This caused issues with accuracy where ever the subject looked.

The cone of focus I talked about earlier also caused problems that were specific to the way I setup my tests. The Mobile Eye is accurate when the subject is looking forward and doing light scanning. It can't track the pupil when the subject looks out of the corner of their eye. This happened frequently during my tests because the normal location for network clocks and other notification devices is located near the ceiling at the top of the wall. My subjects ended up scanning for my prototype out of the top of their eye which was either on the fringe of where the Mobile Eye could track or completely outside of its range.

These two issues made me rethink how my tests were setup and how to brief the user before each test. More re-iteration on just how sensitive the eye tracking equipment was needed to make sure the subject didn't scratch their eye or adjust the glasses. I also instructed the subjects to try to keep their gaze inside of the range of what the hardware could capture. I was hesitant to instruct users to do this for fear that it would influence the results, but I had to be able to capture the data.

Permalink | Leave a comment  »

This is a short list of some of the more interesting books I've been reading in the past few weeks.

Permalink | Leave a comment  »

Project Brief:

This is the second iteration of my entry for the Mozilla Winter Design Challenge. My concept revolves around the idea that a user's daily browsing represents only a few key tasks or objectives. Shouldn't the browser provide you with a way to easily group all of the tabs and windows related to your objective so you can stop a web search and continue it later? My concept automatically groups these tabs together and offers several options to restore all or parts of your session.

Improvement over Version 1:

Based on some of the other ideas floating around on the forums, I have designed the ability to sync your sessions between devices. You can now start a session on your phone and continue it on your desktop, or vice versa. I think that this concept accurately reflects the usage pattern of consumers and will fit directly in line with the Weave project.

To support my "mobile home tab" idea, I created another version of the concept tailored to work within Fennec. You can view a web mockup, open the page within one of the desktop betas of Fennec, or directly on a supported device.

Screenshots

Links:

View the concept prototype
View the mobile concept prototype mockup
View the mobile concept in Fennec

Permalink | Leave a comment  »

My entry for Mozilla's Winter Design Challenge revolves around the idea that a user's daily browsing represents only a few key tasks or objectives.  Even for these few tasks, you might open hundreds of webpages in your browsing session. For example, if you are looking to purchase an iPhone, you may start with Apple.com to check out the marketing material they have prepared. To get a more balanced view, you look to CNET or Engadget  to find a third party product review. Perhaps Engadget tips you off to some of the network issues that AT&T has in the US, and you do a quick Google search to confirm it.  Note that even in this quick session you've already spawned at least 4 tabs or windows.

Now imagine that you are interruped during your search before you've made your decision about the iPhone. Shouldn't the browser provide you with a way to easily group all of the tabs and windows related to your search so you can continue it later? My concept automatically groups these tabs together and offers several options to restore all or parts of your session.

You can view the interactive demo (draft 1) (use Firefox for best results) or a screenshot. I welcome any feedback here or at the challenge discussion forums.

Design Goals:

1. Recognize sites in your session by title, url, or screenshot

2. Identify which sites you spent the most time on

3. Restore an individual tab or all of the opened tabs

View other browser information such as SSL certs and the identity you logged in with

Production Details

This prototype was designed in Adobe Fireworks and reproduced pixel for pixel in HTML and CSS3. CSS Spriting has been used in the format switching buttons, but could be applied more aggressively in a second version of the concept. Most of the interaction is achieved by adding and removing classes to elements in the DOM with a few jQuery fade effects thrown in. It is designed for Firefox only and no cross-browser testing was completed.

Permalink | Leave a comment  »

This past weekend I've been playing with an interesting live test on Google.com. My account has been activated for what I'm calling "Minimal Google." When the page is loaded, all you see is the search field, and the text "©2009 - Privacy" until you move the mouse. Mouse movement triggers the rest of the interface to fade in via Javascript.

See the full gallery on Posterous

This interaction is striking because I never end up moving the mouse for 80% of the queries I do. All I do is hit Apple + T to open a new tab, and start typing since I'll be focused on the search field when Google loads. After I'm done typing, I hit enter to execute the search without ever touching the mouse. I'm assuming they are willing to try this test out because power users won't move the mouse and if you do need to click a link, the first step is move the mouse, which will trigger the fade-in.

Obviously this is not fool proof because many older internet users will hunt around the screen to find their target link with their eyes before even moving the mouse. In the age that Google is diversifying into other product areas, this test clearly proves that they are still willing to push the boundaries to let you know that Google, at its core, still does search.

Permalink | Leave a comment  »

Why I think Fluid/SSBs are cool:

I've been experimenting with the Fluid site specific browser tools for a few months on and off, but haven't really documented any of my work because it hasn't amounted to much. Fluid and its similar offering, Prism from Mozilla Labs, are in their infancy and have stagnated there for years. I think this is a shame because the ability for web pages and web applications to support badge icons, Growl notifications, drag and drop functionality and much more could truly revolutionize web browsing.

The Future:

I'm interested to see what direction Google's Chrome OS will take in the battle to blur the line between the web and the desktop. I think that the web is in need of an open source, widely adopted way to interact with the desktop via Javascript, and I can't think of any other company that is going to be able to pull this off better than Google. I think Mozilla has an opportunity to do this with Firefox, but that won't guarantee that it will be integrated into WebKit or Internet Explorer. Google is the media's darling child and has huge market clout, which I believe could force the other major players to play along or be passed.

What I hope (but don't expect) Google doesn't do is push for this functionality only through their Gears plugin. Javascript and AJAX have modernized the web in a non-proprietary way, and I would like to see that continue. Imagine a "Web 3.0" with more third-party lock-in than our current Adobe Flash-based hell hole. I'm not looking forward to it.

My work with Fluid:

I've added two very simple features to my Rackspace Email site specific browser. The first is the obvious support for badge icons, just like the traditional OS X Mail application. The second is popup notification support for incoming messages. These are two features that are supported on both Windows and Mac desktop applications and are, in my opinion, essential to the user's experience of using a web application in a site specific browser. Below is a screenshot of both of these features. Please note that this is a personal project and is no way endorsed or supported by Rackspace Hosting, Inc.

Permalink | Leave a comment  »

Like every other college student, I'm a huge college football fan (especially the Hokies) and I downloaded the ESPN ScoreCenter to keep up with stats and rankings. While using the application for just a few days, I found many design practices that were so interesting I'm going to devote a blog post to them.

First up: iPhone-ness

ESPN did a great job of following the iPhone 'card-swipe' paradigm. By nature, sports data is already grouped into logical sets like sport, conference, rank, and week. This data flows into the card system very well and really shows how easy it can be to view a huge swath of data in such a small device.

Hidden Scrolling Sections

Since you obviously need to be able to show more than five games on the screen, somehow this app needed to scroll its content. I'm on the fence regarding ESPN's implementation. The designers have made the inner content section containing the game data to scroll vertically, but there is no visual indication that this is possible. This implementation effectively creates two frames around the content, one for the black void that the 'card' sits in and the other is frame of the card (red area) that holds the scrolling section. Based on my calculations, this causes the area for viewing data to be only 51% of the total application real estate.

Modal Popups

When you navigate to a particular game, a modal box pops up with the game's score, stats and other information. What use is a modal box that takes up almost all of the screen? This modal box also contains the hidden scrolling section. I don't know of any other application that has implemented a modal box on the iPhone in this way.

Settings Screen

Two years ago I would have never believed that I'd be blogging about the settings screen in an application. ESPN's designers did a great job making this a beautiful, minimalist screen that easily allows you to pick your teams and get back to using the app. For some reason the thick handles for changing the order of the sections irks me, but I'm willing to put up with it. Overall, I'm extremely impressed with ESPN ScoreCenter and look forward to using this app during the rest of the football season.

Permalink | Leave a comment  »

At Rackspace Email & Apps, the usability of our website, Control Panel, and internal tools is paramount. We can’t create a fanatical experience for our product if they are hard or confusing to use. In our existing usability testing (card sorting, paper prototyping and HTML prototypes), I saw a gap in our ability analyze subtle patterns that occur during these tests. It’s hard to notice everything when you are taking notes furiously, so I set out to create a tool to record mouse movements during our usability tests.

The canvas feature of HTML 5 was chosen over Flash or a desktop app for this task because of its open-source status and its ability to run on any modern browser without a plugin.

Step 1: Add Canvas to Page

$('body').prepend('<div id='showpath' style='cursor: pointer; position: absolute; top: 0px; right: 0px;'&rt;Show Tracking</div>'); $('body').prepend('<canvas style='position: absolute; top: 0px; left: 00px; z-index: -1;' id='canvas' height='2775px' width='1110px'></canvas>');

This jQuery code adds the canvas tag right after the body of the page along with an element that will show us the path when the test is done. It’s height and width are hard coded. The z-index of -1 is a crucial step — this keeps our page elements interactive since they will be above the canvas element.

Step 2: Setup Canvas Settings

var ctx = document.getElementById('canvas').getContext('2d');    ctx.lineWidth = 2;    ctx.strokeStyle = '#f00';

This snippet of code stores the canvas element in a variable for speed and sets color/weight of the line that is going to represent the mouse movement.

Step 3: Capturing Mouse Movement

$("html").mousemove(function(e){    ctx.lineTo(e.pageX, e.pageY); });

These three lines of jQuery add a mousemove event to the HTML tag of the page. This will allow us to capture any movement on the entire page. Note that the path is not stroked yet, so none of this drawing will be visible to the user.

Step 4: Capturing Mouse Clicks

$("html").click(function(e){    ctx.lineWidth = 2;    ctx.arc(e.clientX,e.clientY,4,0,(Math.PI*360)/2, false);    ctx.lineWidth = 1; });

This code is very similar to the last step. Instead of just drawing a line, a circle (ctx.arc) is drawn at the exact position the click was made. Capturing mouse clicks during usability testing is very helpful for figuring out if a test subject is trying to click on elements that you don’t have as links.

Step 5: Show the Recorded Mouse Movement

$("#showpath").click(function(){    ctx.stroke();    $('#canvas').replaceWith('< img id="mouseimage" style="position: absolute; top: 0px; left: 0px;" src="'+ document.getElementById('canvas').toDataURL() + '" />');    $('#mouseimage').css('z-index','99' ); });

The final step is to show the movement that was recorded during the test. This entire action is attached as a click event on the div added at the very beginning. First, the path we’ve generated is stroked. The next line is a complicated looking piece of code that just exports our canvas drawing as a PNG so that it can be saved when the test is over. If you didn’t do this, you would be forced to screenshot the page to save the path. The last step is to increase the z-index of the canvas element so that you can see it overlaid over the entire page.

Step 6: Create A Bookmarklet to Add Tracking

A browser bookmarklet provides and easy way for you to add tracking to any page, no matter where it is hosted. To add the bookmarklet, first download the mouseTracking.js file and stick it on a publically accessible server:

Download mouseTracking.js

Now all you need to do is stick the following javascript in the location field of a bookmark:

javascript:(function(){ _my_script=document.createElement('SCRIPT'); _my_script.type='text/javascript'; _my_script.src='http://www.yourdomain.com/mouseTracking.js'; document.getElementsByTagName('head')[0].appendChild(_my_script); })();

How Do I Use This Data?

At Rackspace Email & Apps, we’ve found that the best way to view this information is though a heatmap. Our heatmaps are generated by opening up the PNG in Photoshop and adding a gradient glow. Below is an example of some of our heatmaps and how they supplement our written notes during a usability test.

Background: We were testing this pricing calculator to see if it effectively communicated the savings that our customers could gain by using our Hybrid Exchange and Rackspace Email product.

Benefit of Mouse Tracking: The second bar was the element that controlled the amount of savings, and these heatmaps provide a quick visual to the design team that customers are interacting with the calculator in the correct way.

Permalink | Leave a comment  »

After experimenting with the HTML 5 cache manifest attribute for caching resources on the iPhone for offline access, I found a few issues with the Apple documentation that I wanted to let the public know about. These small discrepancies caused none of my offline resources to load in the web app. Complete all of the steps Apple describes in its support documents. First, make sure you are setting the Mime Type for ".manifest" to "text/cache-manifest". Secondly, make sure you have a valid manifest file. All you need is the words "CACHE MANIFEST" at the top followed by a list of URLs to the resources you want to be cached. This is where the differences occur: 1. Instead of declaring the manifest file as:

<html manifest="myassets.manifest">

Declare it as:

<html manifest="/myassets">

I'm not sure if it was just my server setup, but this allowed the iPhone to see the manifest and start caching the resources. 2. Declare the Mime Type "text/cache-manifest" for both ".manifest" and "manifest":

AddType text/cache-manifest .manifest manifest

Once, again, I'm not sure if this was a specific server issue for me, but I don't think it can hurt. If this helps you, let me know on Twitter or send me an email and I'll think about expanding this article.

Permalink | Leave a comment  »