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.

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.

Bing – Inconsistently Anticipating User Needs

I noticed an interesting thing while playing with Microsoft’s Bing web search — certain terms return a results page with only one result. Well, that’s different.

A Bing search for Google returned a results page with one result (Google.com) labeled “Best match”. Beneath that was link to “Search for other results containing google”. While this is inconsistent with the other search engines people are familiar with, I think it’s a good example of anticipating users’ needs. Most people searching for something other than Google’s homepage would likely use more than just one term, for example “google jobs” or “google stock price”.

What I don’t like is how Bing inconsistently applies this rule.

Searches for several major global brands were handled differently than Google. Searches for Apple, Nike, Motorola, Sony, Coca Cola, Budweiser, Playboy, and Paris Hilton all returned standard search results pages, with either a “Best match” followed the full list of results or a set of image search results (Motorola and Paris Hilton) followed by standard search results. Perhaps the standard results page is used when the search algorithm doesn’t rank the top result high enough on some other internal relevancy scale. But that wasn’t clear to me and made the interaction with Bing a bit confusing.

Switching from consumer brands to baseball I searched for New York Yankees. The search returned the current box score of the Yankees-Devil Rays game followed by a standard results page. Sports team searches do deserve a different treatment since fans are often looking for the latest scores. When I searched for Chicago White Sox, I got the box score for the Sox-Twins game followed by a standard results page. The same was true when I searched for their crosstown rivals the Cubs.

When I searched for the Arizona Diamondbacks, whose game that night had not yet started, I got a page with no box scores and standard search results. What was odd was that in all three baseball searches the official team site was the top result, but it was not labeled “Best match”. I again wonder if some internal relevancy threshold that was not met by the highest ranked result.

Moving to newspapers a search for New York Times returns the single link results page with a twist — a link to news stories labeled “Top headlines” and a search within the Times text box. I got the same results page design I searched for Chicago Tribune. This would be helpful for someone searching for a particular online media site.

Moving to media and content portals outside of newspapers, I tried MSN, Yahoo, AOL, and CNN. MSN, Yahoo, and AOL got the special one link plus search box page. CNN, however, only returned the Best match and top headlines with no search within box.

Looking at social media sites, Facebook and MySpace got the special one link treatment, but only MySpace got a search within box. Twitter got a standard results page plus search within text box. Meebo got a standard results page.

Technology brands Dell, HP, Compaq, Sun, Oracle, Linux, Firefox, and Microsoft, all returned one of the previously seen variations of a standard results page (with or without search within or Best match). Ironically the Microsoft search did not have the top result (Microsoft’s homepage) labeled as a Best match or a search within box.

Searches for online retailers yielded more consistent results. Sears, Crate and Barrel, Gap, and Amazon all returned a standard results page, as did Staples, CDW, Barnes and Noble, and Walmart (most with search within boxes). One difference was most the searches for the bricks and mortar retailers all had a map of the stores nearest my location with addresses and phone numbers.

There were many other cases where Bing offered content of value to the searcher beyond the standard results page we are familiar with. It makes sense that searches for sports teams in active play return results with boxed scores, that newspaper searches include a search box and links to top headlines, and searches for retailers include a map to store locations, especially if the behavioral data shows that’s the content most people are looking for when doing those searches. This kind of content is nothing new as Google has long handled its searches this way.

Providing valuable content and removing clutter is useful, but the on-again off-again Best match label and the inconsistent use of the one-link results page may leave some users wondering what they are doing wrong. Bing needs to improve on that.

Take a look at an interesting site that shows side-by-side comparisons of Google and Bing. It’s a nice way to compare how the two sites handle the same search.

Bing also has a page that explains a little of what’s behind Best match.

WordPress for iPhone

I’m testing the WordPress iPhone app and am finding it pretty darn intuitive. There is definitely a well-defined UI convention in apps that makes them far superior to web-based iPhone sites. Once again Apple has scored big with their app model. I’m curious to see if more website operators move to creating apps instead of iPhone versions of their sites. Of course Apple could help speed that up by streamlining the process for getting them in the App Store.

Welcome

Welcome to UXploration.

This is where I write about things that interest me in my professional life as a user experience architect and as a graduate HCI student.

I’m currently enrolled in the graduate HCI program at DePaul University in Chicago and will try to post details of school projects and research as well.

Having to produce something fresh on a regular basis forces me to look at my work and studies more critically and to find things that may be of interest to others. I’m looking forward to learning a lot as I go. I hope others do too.