posted by Shawn Elson on Thursday, June 12, 2008
 Google's Android UI
 Wired Magazine had a great article a few months back about Usability Testing during the development of Halo 3 for the Xbox . I kept it around and have thought about it many times because it discusses the use of usability methodologies in the most immersive of all user experiences, video games. For the most part, when we provide usability services, our goal is to make an interface more efficient or easier to use. For example, we focus on making it easier to buy an item on a shopping site or quicker to send an email from an email application. During the development of Halo 3, Microsoft and Bungie employed standard usability techniques to make their game more fun. Some of the usability heuristics, or rules of thumb, they focussed on were: - Discoverability - Can the player find the weapons and ammunition required to progress in the game?
- Feedback - Were the players able to determine when an enemy was too far away to shoot at?
- Interactivity - Was there a good balance of action and time in between action to keep the interaction with the game flowing and the player immersed in the activity of the game?
- System Guidance - One of the levelswas so big and sprawling, players were getting off task and becoming lost. How could the designers strike a balance between leading the player forward without overly diminishing the challenge of the game.
I particularly liked this quote: "Gamemakers have to devise a system of rules and equipment that gives players a few basic goals and then allows them to find their own ways of achieving those goals. The flow comes from constantly discovering innovative ways to solve these open-ended problems." As opposed to traditional interfaces where the goal is to offer the user one or a few simple ways to complete a task, the game designers intend for the players to solve the game problems in unique ways. Labels: games, quotes, ue design, ue research
posted by Shawn Elson on Monday, April 14, 2008
Halo 3 and Usability
I recently used a Wells Fargo ATM and I have to say it was the best ATM user experience I have ever encountered. As with most people in the user experience business, I tend to be irritated by poor interfaces more than the average person. My observation of ATM's goes back a long time because they are some of the worst high usage consumer applications out there. Features that top the list of ATM design annoyances include: - Using hardware based buttons for input on the side of the screen. Often the hard buttons do not align well with the screen option they represent. The user ends up bending over or stepping back because they are having difficulty targeting their chosen option.
- Displaying static and active advertisements while the user is attempting to perform a task such as withdrawing money. This is a situation where marketing activity disrupts a user's primary task, withdrawing money, and interferes with a key benefit of using an ATM which is that it should be faster than going into the bank and using a teller.
- Poor feedback that does not clearly indicate when a banking session is complete. This leads to people waiting in front of the ATM until they are positive their account cannot be accessed by the next customer.
The Wells Fargo ATM I used recently did a nice job in avoiding these problems and provided a clean and quick user experience.  The welcome screen provided clear feedback about the system state and instructed me on how to initiate a session.  After inserting your card, the task of entering your PIN was made very simple. The "OK" and "Clear" buttons were large, easily targeted by the user's finger, and color coded for emphasis. I also appreciated the "Change Language" option being available but not intrusive.The color palette for this page was attractive and professional. The Wells Fargo stage coach branding across the bottom was clear and did not interfere with the user's task.  On this screen, the user selects an account to access. The targets were large and clear.  This page provided a simple, clean display of the account balance. The path forward was labeled "Continue," and was positioned in the middle of the screen and highlighted in green.  The primary tasks were displayed in the middle of the screen with shortcuts on the left.  Selecting a withdrawal amount. I liked that the amounts were displayed in the upper left corner of their respective buttons. As a result, the numbers were not obscured by the customer's finger. I also received feedback about my selected account and transaction on the left.  On this sceen the user chooses whether to receive a receipt.  The system does a good job providing the user with feedback about the system state.  The system instructed the user to remove their card to receive their cash and the interaction ends. The whole experience was expedient and error free. Kudos Wells Fargo Design Team. On a related note, I happened to chat with a senior UE designer from Bank of America last nite. I suggested that there was little financial incentive for a bank to improve their ATM user experience. I do not think people are choosing a bank based on the user experience of the bank's ATM's. He pointed out that banks actually were incented to improve their ATM UE because a good ATM experience could reduce the number of customers that go inside the bank and require a teller's assistance. Labels: ue design, user experience
posted by Shawn Elson on Thursday, March 20, 2008
Best ATM Interface Yet
 I try to save quotes related to design that I find intriguing, controversial, or just plain good advice. Here are a few that I keep coming back to. I'm sure everyone can associate the frustration that occurs when trying to implement new and revolutionary designs inside of large organizations. Shigeru Miyamoto is the Nintendo designer of Donkey Kong, Mario, Legend of Zelda, the Nintendo 64, and now the Nintendo Wii. Even a visionary and revered game designer encounters resistance. Here he discusses the struggles he faced when he decided to throw out 25 years of game controller evolution: "We had to overcome the hurdle of how to convince users and game designers who had grown accustomed to traditional interfaces. This was an incredibly difficult hurdle. So, to put it in a rather extreme way, I teamed up with ID people to fight against the people creating the current market, or to challenge them - it was kind of like a battle, in a sense. It's not as though we were trying to pick a fight, but whenever you attempt something new, conservatism will always rear its head amongst those who have grown accustomed to the way things are now." [ Taking Control Back to the Drawing Board] Brian Eno is a highly respected record producer and is considered the father of ambient music. He was asked by Microsoft to create the startup sound for Windows 95. Here he speaks about how an outlandish constraint allowed him to break out of a personal design rut: "The idea came up at the time when I was completely bereft of ideas. I'd been working on my own music for a while and was quite lost, actually. And I really appreciated someone coming along and saying, 'Here's a specific problem -- solve it.' The thing from the agency said, 'We want a piece of music that is inspiring, universal, blah-blah, da-da-da, optimistic, futuristic, sentimental, emotional,' this whole list of adjectives, and then at the bottom it said 'and it must be 3 and 1/4 seconds long.' I thought this was so funny and an amazing thought to actually try to make a little piece of music. It's like making a tiny little jewel. In fact, I made 84 pieces. I got completely into this world of tiny, tiny little pieces of music. I was so sensitive to microseconds at the end of this that it really broke a logjam in my own work. Then when I'd finished that and I went back to working with pieces that were like three minutes long, it seemed like oceans of time." [ Music Thing] Lastly, this is a paraphrased quote from the English historian, Sir Michael Howard. I believe he was speaking about managing the aftermath of World War II when he noted that nobody ever gets things right the first time. The question is how you can make sure you are not so wrong that you cannot make up for your mistakes. This quote goes a long way towards understanding the true pressures when creating new and revolutionary designs. Labels: quotes, ue design
posted by Shawn Elson on Sunday, July 29, 2007
Quotes, quotes, quotes...
 TiVo has released a nice search feature called " Swivel Search." This style of search allows the user to look at a TV show and directly search for other programs based on attributes of that show. For example, if I am looking at the page for the TV show "Heroes," I could see that Malcolm McDowell is one of the actors. From there, I could search for other programs in which McDowell stars. This type of interaction is different and interesting because typical search interfaces allow the user to search for an object, in TiVo's case the object is a show, without consideration for how objects in the system share attributes. With the previous TiVo UI, the user could search for "Heroes" and see that McDowell acted in it, but could not directly search on the actor. A separate search was required to see the programs containing McDowell. In a way, the swivel search allows the user to search based on the interrelatedness of objects. The swivel search style interaction would be very useful for the iPod. Songs, like TV shows, have a strong degree of interrelatedness, however the iPod interface does little to expose these relationships. For example, I have many songs and I like to play them randomly. Random play helps me rediscover songs I have not heard in a long time. Unfortunately, when I hear an old song and think of other songs from the same artist, I have to navigate out of the song list and into the artist list. This interaction is so clunky, I rarely do it. If there was a swivel search on the iPod, it would be easy to switch from a randomly played song to all of the songs by the same artist or all of the songs from the same album. [ via Gizmodo] Labels: search, ue design
posted by Shawn Elson on Tuesday, May 15, 2007
TiVo Swivel Search
  Map This is a FireFox add-on that allows the user to quickly send an address from a Web page to Google Maps. After being installed, Map This adds a menu item to the FireFox context menu. When the user selects an address then right clicks and selects "Map This," the feature passes the address to Google Maps and opens a new window. This is a pretty simple little feature, but because of it's narrow focus it is able to do something quite powerful. It is acknowledges a specific type of data on a Web page, an address, and allows the user to perform an action on that data in a way that intelligently matches matches the data type. Actually, I give the widget too much credit. It cannot tell the difference between an address and any other selected string of text. However, the concept of the widget is moving in the right direction. I wrote about a similar convenience widget, the Skype Toolbar, that detects phone numbers on a Web page and allows the user to initiate Skype calls from the context menu. Again, the feature understands the context of the text string and provides actions that suit the data type. From a conceptual view, very compelling interactions could be created if the browser understood different types of data and was able to provide actions to match the context. For example the browser might recognize a string of selected text as an address, a person's name, or a song title and allow the user to act on that data in context. If the user highlighted a classified ad, the browser could understand that the user might want to save the ad, respond to it, print it, compare it to similar ads, etc. There are many identifiers used by the browser to create awareness of data type, but none, to the best of my knowledge, are used to identify how textual data could be employed in a useful way. Web 2.0 style tags offer a classification system which is useful for searching and grouping similar types of data. However, tags do not have an awareness of the user's context. The HTML OBJECT tag allows the browser to acknowledge data types like movie or audio files but not the semantics of a string of text. To get at the user's context and offer functionality to match, the meaning of text strings will have to be understood on a programmatic level by the browser, an add-on, or the Web site which contains the text. Labels: convenience widget, ue design
posted by Shawn Elson on Saturday, April 21, 2007
Convenience Widget: Map This
 Several designers I respect have convinced me to switch to OmniGraffle for wireframing. I do my day to day work on a Win XP machine, but OmniGraffle is Mac only, so I will use it on my laptop. It looks like a very promising tool and it seems much faster to use than Visio. Like Visio, OmniGraffle supports user made stencils and there are some fantastic ones out there for IA/UE designers. Web FlowchartThis attractive stencil is great for Web site flow diagrams. All the boxes a designer needs... just add the arrows yourself. Web FormsNice selection of Web form elements. They are in the Mac style.
Windows GUISeveral standard Windows UI elements. They do not precisely match the real Windows look, but they are close enough. Mobile WireframesSlick stencil that includes the 5 way and soft key buttons. Web WireframeA good assortment of Web UI elements. I love the use of yellow for notes and to call out design elements. The best resource for stencils is Graffletopia.com. You will see most of the stencils I mention here. OmniGroup also links to a broad range of stencils. If you would like to recommend other stencils or wireframing applications, please leave a comment. Labels: ue design
posted by Shawn Elson on Friday, March 30, 2007
5 Great OminGraffle Stencils For Wireframing
With the recent spread of AJAX (Asynchronous JavaScript) on the Web, designers are exploring different ways to use this technology. At the most basic level, AJAX allows the browser to have quick and small interactions with the server without reloading an entire page. Sometimes AJAX comes in the form of caching, or preloading information. This is seen in Google Maps when the user clicks and holds on the map. By mousing down and then moving the mouse, the user is able to drag different portions of the map into view. Rather than having to reload the entire page each time a new piece of map is shown, or precache the entire map of the world, AJAX allows the browser to download small squares of map as they are needed. The result is a seamless, flowing experience for the user. Very efficient. One of the best uses of AJAX so far is the type ahead feature. Type ahead occurs when the user enters text into a field and the system displays fully formed guesses based on the letters the user has already entered. A classic example of this is in Microsoft Outlook when the user types in the "To" field as they compose a message. Outlook suggests email addresses based on the letters the user has already entered. This interaction places very little demand on the system because the list of email addresses Outlook has observed being used is relatively small. What happens when the list becomes enormous?  Lala, a terrific CD trading service, has an excellent example of type ahead in their search field. The user can enter any CD artist, album, or song name. The list of all possible artists, albums, or songs is far too long to precache for every browser hitting the homepage. Besides, fully caching the list would be an inefficient design that could lead to bogging down Lala's servers. Instead, Lala uses AJAX to quickly query the server and provide type ahead suggestions. There are no page reloads and very little lag time. It works beautifully. Labels: AJAX, ue design
posted by Shawn Elson on Sunday, March 11, 2007
Good Use of AJAX: Type Ahead
Ning, the Web 2.0 social networking community site, has a terrific lightweight registration interaction. When the "Signup" link is clicked on most sites, a registration page is loaded. It can be a dramatic mode change for users. The user's primary tasks rarely include registering for a site... the registration process is simply an extra step they are forced to perform on the way to the content they want.  When "Signup" is clicked on the Ning toolbar, instead of having a registration page load, Ning has a DHTML layer appear on top of the currently loaded page. The layer allows the user to fill out the registration form without leaving the primary context of the page they were previously viewing. I think this is a great, low intrusive method for site registration. I recently performed a usability study on a Web shop design prototype for a major apparel brand. One of the clear takeaways was that customers do not like being taken out of their task of browsing products. The study participants were using a hub and spoke model of browsing for products. When the customers clicked on a product link, a full product detail page was not loaded. Instead, a product detail layer appeared on top of the list of products being browsed. This made seeing product details less intrusive and allowed customers to quickly browse deeply into products and broadly across products. The response to this interaction from the participants was very positive. I will be working with a startup next week to hone and polish the interactions of their yet to be launched site. I will definitely be recommending lightweight layered interactions.. Labels: lightweight, ue design, ue research
posted by Shawn Elson on Friday, March 02, 2007
Lightweight Site Registration
There are several small browser widgets I have been using recently that have made my life seem so much easier. I call them "convenience widgets" because they are small, lightweight, and make very specific cumbersome tasks much simpler. I have started using Skype Out quite a bit this last year. This is a service from Skype that allows the customer to call any landline or cellphone from a computer. I paid $15 for a year of unlimited calls (seems like a great deal to me). When making calls to businesses using Skype Out, my typical task flow is this: 1. search for a company's Web site on Google 2. open the site 3. click their "Contact" link 4. highlight the phone number 5. right click to copy the phone number 6. open Skype 7. paste in the phone number 8. initiate the call It's a lot of steps for a pretty simple task. In particular, switching from the browser to Skype is a mode shift I do not like because it takes me away from the browser.  Last week I installed the Skype Web Toolbar. This toolbar highlights every phone number on a Web page. In addition, it adds a context menu to each phone number from which the user can quickly initiate a Skype Out call. This tool reduces the task flow to: 1. search for a company's Web site on Google 2. open the site 3. click their "Contact" link 4. initiate a call from the context menu This is a big time saver and also it keeps the user from having to interact directly with the Skype application. One problem with this design is that by highlighting phone numbers, the Skype toolbar alters the visual look of Web pages. An alternative would be to not highlight the phone numbers but add the Skype commands to the browser's context menu when a phone number is right clicked. The benefit would be that the page's visual design would not be interfered with. The tradeoff would be that this interaction would be less discoverable for users. Taking the concept further, wireless companies could offer the same kind of interaction. When a phone number is seen on a Web page on the computer, the computer could initiate a call on the cellphone via Bluetooth. Any form of information could be added to the cellphone from the Web browser with a simple contextual menu: maps, calendar items, pictures, etc. This type of data sharing functionality would make for a pretty useful application. Labels: convenience widget, ue design
posted by Shawn Elson on Wednesday, February 07, 2007
Convenience Widget: Skype Toolbar
I drove a Toyota Prius today for the first time. I had read a lot about the innovation and design that went into the Prius, so I was excited to check out the car's usability. I was surprised at how new the user experience felt. Instead of turning a key to start the car, I inserted a plastic device into a slot and pressed a large "Start" button while my foot was on the brake. This process was not obvious to me at first, but it was learnable after a few times. I felt like Toyota was trying to make an experience statement that I was not in a car, but a new type of transportation. Unfortunately, the experience was tainted by the fact that I still had to do old fashioned things like disengaging the clunky parking brake with my foot and putting the car into drive. From a usability perspective, I am concerned with the dashboard control system. It operates everything from the climate controls to the trip computer and stereo. Below is a picture where the radio interface is active.  Note the hard keys lining the screen. These are used for high level navigation of the features. They work well enough, however they are coupled with a touch screen which has multiple levels of navigation and various widgets for controls. On the screen above, I count 10 buttons and a couple more things that look like controls. I would be irritated if this jumble was thrown at me on a Web site, much less in a car traveling 70 mph that requires my attention. This user interface is far too demanding for someone whose primary task must be to operate a car. The touch screen is also a poor choice by Toyota. How many times have you kept your eyes on the road while you reached for the temperature controls? You can do this because of the tactile feedback you receive from touching the buttons. Eyes are not required. However, with the Prius touch screen, both fingers and eyes are required to operate the radio. A decidedly poor safety choice by the designers. The Prius was an interesting experience. I am excited about eco-friendly hybrid cars, but Toyota needs to spend some time rethinking the control system and ways to optimize the experience for ease of use and driver safety. Labels: cars, safety, ue design
posted by Shawn Elson on Wednesday, January 10, 2007
Toyota Prius Dashboard
For a long time now, Elson User Experience has been researching and designing interactions with software, Web sites, devices and just about anything else with which a person can have an interaction. This blog will be a place to share the insights collected during our projects and personal observations about user experiences with things we have encountered. As I have always said, ue design is not rocket science. At its most basic level, design is about using common sense and always considering the user. It's my hope that the thoughts I share in this blog will provide a useful perspective for people as I write about both good and bad designs. I will also be writing about interesting challenges we have faced in our recent projects. Last, I look forward to your comments and I encourage you to turn these posts into discussions. Thanks for reading, -Shawn Elson Labels: ue design, ue research
posted by Shawn Elson on Wednesday, January 10, 2007
Welcome to Elson UE Blog
|
|
