Performance is User Experience

Thinking about a website’s user experience cannot be limited to just the design of the user interface and people’s interactions with it. From the consumer’s point of view, their experience extends to everything that happens from the moment they first visit the site to when the product or information they seek is delivered.

One important aspect of the user experience, perceived site performance, can be particularly vexing to site users and designers alike. That’s because when a site is slow to download or respond to user actions it causes the visitor to focus on something that is getting in the way of what they are trying to do. The guidance around response times Jakob Nielsen provided in his 1994 book Usability Engineering is still true today, perhaps even more so given people’s increased exposure to broadband internet access at home and work.

Fortunately there are many tools out there for measuring how your site is performing in terms of download speed and response time. Here’s a few free ones I use:

Firebug Net Performance
Firebug Net Performance
YSlow from Yahoo!
YSlow from Yahoo!
Tamper Data
Tamper Data
Bandwidth Place
Bandwidth Place

Firebug: The Net tab in the popular Firefox Add-On displays the size and download speed of each of the individual elements that make up a particular web page. It displays the information in a waterfall graph showing when each object’s download begins and ends, allowing you to easily see when a Flash object or other large file may slowing down the site’s perceived performance. This is especially useful if your site has third-party advertising served from a network you don’t control.

YSlow for Firebug: YSlow is an extension to Firebug from the Yahoo! Developer Network. YSlow measures a site’s download performance across 22 categories and provides guidance on how to improve performance. YSlow looks at things like file size, the number of HTTP requests needed to deliver the entire page, and image scaling.

Tamper Data: This Firefox Add-On gives you an extremely granular look at a site’s HTTP and HTTPS requests and responses. You can see file sizes, duration of requests and responses, and HTTP response code your server sends back to browser. This is useful if your site is experiencing slow response times because of requests to third-party content or if there is a problem in your content distribution network.

Bandwidth Place: This website can measure your computer’s upload and download speeds and show if your network connection is creating a bottleneck. If your download speed is comparable to what your site users have, which is often the case for intranet applications, this can help you understand what your audience is experiencing.

For industrial strength monitoring, Keynote Systems and Gomez offer paid services that can monitor download performance and response time from a geographically distributed network of computers that allows you to see how the site is performing from a worldwide perspective.

Keynote and Gomez also offer continuous monitoring services in which intelligent agents repeatedly visit a site from numerous geographically distributed locations and run through a scripted set of actions like performing a search, adding an item to a shopping cart, and checking out. Their services also provide email and SMS text alerting when performance thresholds have been exceeded. Keynote also has a free service, Keynote RedAlert, that can be used for 30 days to test scripted monitoring.

IxDA Launches New Website

The Interaction Design Association updated their website yesterday with a new design and a few great new features.

Members using discussion threads on the previous incarnation of the site will have their profiles connected to all their posts once they create a password, which is new feature and replaces the kludgy authentication-by-email scheme the site had been using.

The site still features the highly popular discussions plus a new Job Board and Resources page. Both are great additions. Another great addition is the Related Threads on the right side of the discussions page that lists related threads based on the thread title.

Local IxDA chapters also have been creating their own websites recently to manage local events and share resources. You’ll have to join your local chapter on the main website even if you are already a local member as the membership rolls of the various sites do not appear to be connected. Not a big deal, and membership in the main organization and the local chapters is free.

Design Pattern Resources

Looking for some new design pattern resources? Here’s a few I’ve been using lately:

Since design patterns first arrived in application development to provide proven and repeatable solutions to common programming tasks they’ve evolved into a great way to standardize design and IA solutions for common interface elements used across a variety of websites. Let me know if there are any helpful new pattern libraries you’re using.

iPad Misses on Several Key Points

The world got its first look at the long awaited iPad from Apple this week. And after digging into it bit I think I can wait a little longer to actually get one, though, as Apple has missed some key functionality.

iPad Home Screen

A few of the key features Apple missed are:

No camera: Video chat is impossible without a built in iSight camera. With the hardware as large as it is there is no reason not to have a camera, and one better than the 2.5 megapixel on the iPhone.

No multitasking: There’s no reason a more powerful processor couldn’t have been included so that Mac OS X could be supported. And that’s another miss in itself.

No Mac OS X: Limiting the iPad to the iPhone OS removes a lot of key functionality for mobile users. Unless someone is planning to use Google Docs and other cloud-based apps there is a lot you can’t do with Apple’s “magical” new machine. Business travelers and many other users will find themselves having to carry an iPad and laptop.

Battery not removable: The 10-hour life of the battery is a big improvement over iPhone, but for the cost of the iPad it should come with a removable battery so a heavy user could charge it and swap in a backup.

Lack of clarity on GPS: It’s not clear if the iPad has a dedicated GPS chip or if that will be available on all models. The tech specs indicate Assisted GPS will be used, but not a dedicated GPS chip like one would find on a Garmin. It’s hard to believe Apple wouldn’t match the quality of location-based services available to the 3GS so I suspect this is more of a marketing or semantic problem than a technical limitation of the iPad.

While the iPad is a big advance in multitouch technology and will provide a great mobile web surfing experience, it does not offer enough functionality to replace the laptop, which is what many people were expecting. This is likely a business decision by Apple to not cannibalize the market for their Macbooks. The iPad may have strong appeal to BlackBerry users who want some of the iPhone experience without having to give up their Berry. Only time will tell if Apple made the right calls in limiting what iPad can do.

HCI 450: Foundations of HCI

I just finished my latest course in DePaul University’s HCI program — Foundations of Human Computer Interaction. This type of course is a must for anyone who is serious about designing product user interfaces, whether you want to do visual design, information architecture, or interaction design.

The course focused on studying basic and applied research into cognitive psychology and using those learnings to craft more usable interfaces. The course provided a solid foundation in the human factors considerations that should be a part of any design effort, including study of the structure and mechanics of the human eye and the limitations and capabilities of short term memory.

The class had three main objectives: learning to read and review research articles, creating interface design guidelines based on original peer-reviewed research, and evaluating interfaces against those guidelines. We used previously published research instead of conducting our own studies because of the limited time available to the class.

The organization of the course was such that each assignment provided a foundation for the next, leading up to an interface evaluation and presentation. I choose to evaluate Mint.com, a popular financial management website. My design guidelines mostly focused on the color and screen location of key navigational elements of a website. A sample of my guidelines and how they were used to evaluate Mint.com can be viewed in PDF format.

Completing assignments required use of the EBSCOhost databases, Google Scholar, and other academic research databases. These can be powerful tools when you need to find solid research to back up design decisions.

Knowing how human factors considerations should be treated during a design project and how to find existing research into those areas are invaluable tools for any user experience professional. A course in these topics would be helpful to anyone doing UI design.

Beyond Mice and Keyboards

The ubiquitous keyboard and mouse that have dominated computing for the last 30 years are getting some company and competition as gesture interfaces become a reality outside the test lab.

Microsoft’s Project Natal for Xbox 360 promises an immersive user experience in which the interface becomes more invisible than ever before. With Natal the user is the interface. Looking to take the user experience far beyond Nintendo’s Wii, Natal uses a 3-D depth camera and microphone for motion, gesture, and audio input. Xbox claims Natal will let people steer an on-screen race car by moving their arms in steering motions and use gestures like actual kicks to move a soccer ball on screen. In one demo, Natal recognizes a person’s face and automatically logs them into their Xbox profile. Think Wii without the controller. Wikipedia has a brief article on Natal’s background and technology.

And if you think this is a just going to be a high-tech gamer toy, look at the opportunities for communication and commerce in this post on Engadget. Imagine manipulating your TV’s menu system with the same gestures you’d use on an iPhone. No convoluted controller or touch screen required. It’s like Minority Report in your media room.

Motion-detecting interfaces aren’t limited to efforts as ambitious as Natal. Here’s a look at Pek Pongpaet using the accelerometer in the WiiMote to control an on-screen X-Wing fighter. Many areas of education, from aeronautics to architecture, could be revolutionized with touchable and movable experiences. Pek also did a recent demo at DePaul University in Chicago where he used the Wii Balance Board to connect to a website through WiiFlash Server to steer a car on screen by leaning in the direction he wanted to steer the car.

It’s clear new ways of human-computer interaction are coming thanks to multi-touch UIs and gestural interfaces. Aching gamers’ thumbs everywhere will be rejoicing.

Thought Provoking Look at Multi-touch Interfaces

I recently saw a thought-provoking video from 10/GUI on the potential for multi-touch user interfaces in desktop computing. The video suggests a radical change in desktop UIs that could bring the interactivity of the iPhone, and more, to a desktop O/S.

This is exciting stuff. While I see plenty of issues with the concept as presented by 10/GUI, there is no doubt multi-touch technology gain an increasingly important presence in desktop computing. It will be up to UX professionals to make sure it isn’t just a technology in search of a problem to solve. In fact, the new challenges that will need to be addressed in the realm of human-computer interaction promise a very interesting future.

For example, in the 10/GUI video the multi-touch pad is placed in front of the keyboard. This could potentially force the keyboard to be farther away from the user than they like. I also see problems with unintended signals getting sent to the touch surface by accident when the user is actually typing on the keyboard (this happens all the time now with laptop touch pads set in front of the keyboard). Sure, the touch surface could be smart enough to know when someone is typing and not be engaged, much like how the iPhone dims as you bring it to your ear to conserve the battery when you are using it as a phone, but what would this do for applications in which the user has to move quickly between the two input modes.

On the other hand, the 10/GUI concept solves the problem with systems like HP TouchSmart that force the user to place their hand in front of the screen and obscure their view (not to mention the smudge marks on the screen).

Maybe it will be better to place the touch surface to the left or right of the keyboard in a user-selected location, much like Wacom tablets are used today. Wacom’s Bamboo is in fact moving us a step closer to the future imagined by 10/GUI. Beyond the ergonomic challenges, there is the learning curve for people who are not computer power users and the challenge of getting people to think about information spaces as linear, as 10/GUI’s con10uum proposes.

Yet another question is what applications exist that could really benefit from this kind of desktop input. The slider example offered by 10/GUI is not an accurate reflection of how soundboards are used. Usually a sound engineer will be manipulating just one or two inputs at the same time. Of course the iPhone has shown that once you build a technology infrastructure to support new means of interaction, the creative power of the development community will find new and exciting ways to use it. Virtual piano anyone? Exciting stuff indeed.

Ever since Microsoft Surface gave us a glimpse of multi-touch interfaces beyond the smartphone, we’ve wondered what future interactive experiences might be like. While far from perfect, the 10/GUI con10uum concept is another opportunity to get us all thinking about how we might design a very different future.

Convert: Great Mobile App Using Iterative Design

If you ever needed an example of the power of iterative design you need look no further than what the designers of the Convert app for iPhone did with their amazing mobile app.

The tap tap tap team posted a video a while back that plays like a time lapse video of all the iterations the design team went through. It’s amazing to see all the choices they team went through, discarding many and making others integral to the app (see the video below from YouTube).

[youtube=http://www.youtube.com/watch?v=oDSrZ5Nv1dI]

The recognition by the design team that iteration is a key part of the design process is a testament to the value of the UCD process. This app, which is well worth the 99 cents just for the exposure to the interface, is useful, elegant, and, perhaps most importantly, fun to use. But it should be, it’s the product of continual refinement of a great idea.

Cultural Context in Design

Would you buy a toilet with a sink on top of the tank? One that lets you wash your hands with the same water that would then be used to flush the bowl? Probably not if you’re like many Americans, who most likely would be grossed out by the idea, but in another part of the world that might be a normal thing to do.

That was just one of the product design examples offered at a recent discussion on considering cultural context in design projects led by Steve Portigal of Portigal Consulting for IxDA Chicago.

Steve’s talk included many examples of industrial design choices that would surprise many Americans but were quite acceptable in other cultures, such as the sink-toilet and an AIDS clinic in India that looked like a body shop on the south side of Chicago but in fact was a welcomed resource when viewed in its cultural context. The sink-toilet apparently is common in Japan, but also is gaining popularity among environmentally concerned consumers in the United States. But if you were an industrial designer creating this seemingly sensible and environmentally friendly product for an American mass market audience you’d have a real market flop because you failed to consider American cultural attitudes. You can see one here at the Pure Energy Systems Wiki.

When designing for diverse audiences, which includes the increasingly diverse American audience, you need to consider the cultural meaning of things beyond language, including colors, shapes, symbols, and tone, that can influence the adoption of new software products. Patrick Hofmann, a designer with Google Australia, provided a great example in a follow-up to one of Jared Spool’s seminars last year:

There’s this common misconception that localization is only about words, and it’s about translating something into another language… But for visuals, it’s actually fundamentally the same. The same image or the same visual doesn’t mean the same thing across the entire planet. One perfect example is the entire use of red and green to denote in your stock listings or market results in your local business paper. If the market goes up, it’s a big green arrow in North America. In actual fact, in Far East Asia, it’s the exact opposite. It’s an arrow going upwards, but it’s a red arrow. Red denotes success and positivity, whereas green generally means, particularly in the Far East, it means the market is down, there’s something negative happening.

Is your product in tune with the different cultures of people who may be using it? You may think so, because you “know” it’s a great product, but the best approach is to start with a design team that is informed about the cultures that may be part of your target market. And, of course, you’ll need to follow up the initial designs with rounds of iterative testing that include people from the various cultures you will be targeting. You’ll also want to consider topics like the working hours of the target audience so you can plan site or application maintenance outages at appropriate times, because not everyone leaves the office at 6 PM.

Nielsen Norman has a set of recommendations for ecommerce design for international users available for $45. This is a small sum well spent if your product has to succeed outside the U.S.

Molly Holzschlag wrote a short but excellent article on internationalization for A List Apart a few years back that is worth a read as well.

And Jared has another SpoolCast with Patrick Hofmann that is worth a listen.

If you have access to the EBSCOhost databases, those are another great source for research into internationalization and cultural considerations for design projects.

There are a lot of resources to help you in these efforts. The key is to recognize the designing for a multi-cultured audience is about more than translating written content and making superficial customizations.

Chicago Metra Redesign Could Better Support Mobile Use and Accessibility

Chicago’s suburban mass transit agency recently launched a new website design that could better support a few important audiences among its riders — people using mobile devices and users of adaptive technologies.

The new Metra website offers some long-needed enhancements, such as online ticket sales, finally accepting credit cards for ticket purchases, and email alerts for service delays and disruptions. But a feature that every transportation agency should offer, a smartphone friendly website, was not part of the relaunch.

By comparison the San Francisco Bay area public transit system (BART) offers riders numerous mobile options including support for the iPhone, Blackberry, Android, SMS, and even open access to BART schedule data for third-party app developers.

BART Homepage
BART Homepage
BART Search Screen
BART Search Screen
BART System Map
BART System Map
Metra Search Screen
Metra Search Screen

On the BART site, a visitor using an iPhone sees the normal homepage in Safari with an additional link in red text prompting the user to visit the BART mobile site. The link is hidden for people using regular web browsers. This leads users to a simple screen of seven text links from which the person can get to the BART search screen. While it’s better than what Metra does (or doesn’t do), it should just take you to the mobile site since that is what most mobile users likely want and then provide a link back to the regular site for people who end up there by mistake.

BART also provides a fairly easy to read system map for iPhone users. The Metra map for just one route is useless on the iPhone since it was designed for regular browsers and includes shading for municipal areas, lakes, and forest preserves. All important things to know when your train is unexpectedly stopped on the way home from work and you have to make a change to your travel arrangements. You’ll have to view the site in a regular browser to see the map in detail.

Even if you enlarged the portion of the screen with the start and destination station select menus, the results page is impossible to work with on a two-inch screen.

In yet another omission for users of alternative means of browsing, the accessibility features of the new Metra site leave a lot to be desired. The only skip navigation takes a user from the top of the page to the center content column. On the homepage this skips all the repetitive main header and utility header links but also takes you past the site search, search by route, and search by address or zip code utilities. The skip navigation on the BART site takes you to the Quick Planner, which resides in the left most column like on the Metra site.

Metra also dropped the footer link to web accessibility information that the previous site had and makes no mention of web accessibility on its system accessibility page. BART in contrast provides information on web accessibility as well as contact information for its website manager.

To be fair, both sites do make use of HTML label tags and standards compliant coding, which should improve the experience for users of adaptive technologies. Yet both sites also lack support for accesskeys.

The BART site is not perfect, as no site is. The homepage link for the system map takes you a page with one link that reads “View System Map” and includes a disclaimer saying some mobile browsers won’t be able to display the map. So an iPhone, BlackBerry, or Android user has to go through two pages to get to the map.

Metra’s new site is definitely a step in the right direction after years of a lackluster presence, but ignoring mobile users and the limited accessibility features are a huge disservice to the people who pay its bills everyday. More time spent walking through real use scenarios with a diverse set of users could have prevented much of this.