Topic : Usability

28
Apr 12

Jeff Gothelf on Lean UX

This week I attended the UX Immersion 2012 conference. Jeff Gothelf’s featured talk looked at Lean UX and how he used it at The Ladders. Here are my notes:

On Lean UX

  • When converting from Waterfall Development to Lean UX, a great place to start is to look for stories of failure. You learn what didn’t work.
  • Lean UX doesn’t seek to answer the question “can we build this?”, but instead asks “should we build this?”.
  • Usability testing with three users helps you find the boulders, not every little flaw. Subsequent iterations can find problems in the smaller details.
  • Style guides and pattern libraries let you work faster. You have all the tools you need to solve problems. If it has pixels, it goes in the library.
  • Live style guides is a concept in which the HTML markup and CSS is attached to the product in a way that a change to the style guide changes the product.

Learnings From the Agile Transformation at The Ladders

  • UX as a shared services didn’t work because it divided people’s focus.
  • You have to put UX designers on a dedicated team to build camaraderie, focus, and trust.
  • If a UX designer must be split across two teams, make sure they have a primary team so they can prioritize work appropriately.
  • Putting a UX designer on more than two teams is a recipe for failure.
  • Solve the problem together, not in silos. Co-creation builds understanding.
  • Sketch together as a team, then everyone “owns” the solution.
  • The Ladders had many iterations on what was the right way to manage the task wall. We learned that if you cram your entire functional spec onto a board, it’s not agile.

What Lean UX Means for Designers

  • No one gets into user experience to create documents. They want to make things.
  • In fast-paced agile environments the traditional UX approach becomes a bottle neck. We need to use new tools to achieve our goals.
  • Create the lowest fidelity document possible to explain and validate whether the concept in your head is the right thing to do.
  • Don’t be afraid to sketch. All you need is a circle, a rectangle, and a triangle. This covers every interface out there.
  • Get the experience out there, not the design document. Get it in the wild to validate the concept.
  • You’ll never solve a problem with a design document, you solve them with software.
  • Unless you are building the product for yourself, your design is just a hypothesis.
  • Work in a tight integration with the rest of your product team. Designers can’t hide behind their monitors any more.
  • Pair up — Put designers together with developers when problem solving and brainstorming.
  • Pairing up also helps you build an understanding of each other’s work and limitations.

Jeff Gothelf is the author of a forthcoming book on Lean UX. You can follow him on Twitter at @jboogie

Published in: Conferences / Interaction Design / Lean UX / Sketching / Usability / User Experience
11
Mar 12

Great New Features in Axure 6.5 Beta

The beta version of Axure 6.5 was released recently and includes some great new features for mobile prototyping, especially simulating iOS apps.

Axure 6.5 Beta Demo

Axure 6.5 Beta Demo

Some features I’ve already explored:

  • A home screen icon for iOS can be imported into a project as a PNG
  • A splash screen that displays when your “app” first loads also can be imported
  • Full-screen display mode for prototypes launched from the home screen icon
  • Dynamic panels can now be “pinned” to the browser to allow simulation of a fixed tab bar with content that scrolls from underneath it
  • Black or translucent status bar
  • An iOS-style arrow button shape
  • Support for drag and drop
  • Left and right swipe events

Your prototype is still created as HTML and displayed in Mobile Safari but the full-screen mode allows you to simulate a native app’s appearance. To test your design on anyone’s iPhone or iPad just place the files on a publicly available web server or Dropbox and access them with the browser. You have to add the app to the home screen to get the icon on the device and launch in full-screen mode.

The biggest problem I’ve had with the beta is that scrolling actions can pull the simulation away the browser’s edges. This is not a real problem for a prototype being used for usability testing or requirements demonstration, but fixing it would make your simulations seem even more native (it also may be possible already and I just haven’t got it yet).

All in all the new version of Axure is pretty exciting. It’s fast become the best tool short of HTML coding for mobile prototypes.

To learn more about the new 6.5 beta consider attending the Chicago IxDA monthly chapter meeting on Wednesday at Critical Mass. I’ll be giving a short talk on Axure for mobile prototyping.

To view my demo, a screenshot of which is included with this post, point your iOS browser over here.

You can also download my RP file, which was craeted in the 6.5.0.2981 build.

Happy prototyping!

Published in: Prototyping / Usability
12
Feb 12

Respect Users’ Data

One of the immutable tenets of designing mobile user experiences is to respect (and protect) your users’ data. This means, among other things, saving form data as users move from screen to screen and eliminating the need for them to type the same information more than once.

Time Magazine iPhone App

Time Magazine iPhone App

Time Magazine either didn’t know or didn’t follow this tenet in the latest update to its iPhone app. When I launched the app for the first time after updating to version 2.2 I was shown an alert telling me that my customized settings had been reset and that I needed to redo them. To be honest, I don’t even recall what settings I may have customized (I download and explore a lot of apps and many, like this one, almost never get used after the first week). But I certainly wasn’t going to customize anything again if my settings could just be wiped out without a warning.

There are several reasons my settings may have been reset: a change to the underlying data structure that rendered them unusable, settings that I had customized had been removed, careless or rushed programming, or a simple bug that slipped through testing. If there was a legitimate reason, the app could have done a better job of letting me know why. While this may be a trivial matter for infrequent users, it could be a big deal to someone who uses the app regularly.

Sometimes apps have to change their business rules and functionality as they evolve. This is unavoidable. But app creators can manage these changes better if they start with a healthy respect for their users.

Published in: Interaction Design / Mobile / Usability / User Experience
8
Feb 12

Mind Mapping for Note Taking

I’m always looking for a way to work smarter so I recently started using mind mapping as a note taking technique during user testing. I’ve found it superior to taking notes in a linear, chronological fashion because it allows use to organize your notes both topically and visually on the fly.

Mind mapping is a visual way of taking notes, capturing ideas, or arranging thoughts around a central idea. It has been around for several decades since it was popularized by Tony Buzan in his 1993 book The Mind Map Book, and has many uses beyond note taking.

Below is an example I created of a mind map for taking notes of observations from a user testing session. It was created with FreeMind 0.9.0, a free mind mapping tool for Mac and Windows. In addition to allowing you to visually organize notes, you can flag notes with icons with one click to mark task failures, successes, user comments, and other observations you want to quickly find later. This is a big time saver when you have notes from many sessions to digest.

Since trying this technique I have not gone back to note taking in a Word document or text file. Give it a try, you’ll be glad you did.

Mind Mapping for Notes

Mind Mapping for Notes

Published in: Research / Usability
17
Oct 11

Safari Reader Improves Mobile Browsing

One of the little-mentioned features in Apple’s new iOS 5 is the addition of Reader in Mobile Safari. Reader, which was introduced in desktop Safari last year, allows a user to click a button in the browser address bar to render a webpage in a user-friendly, text-only format.

Reader instantly turns mobile webpages that may be poorly designed or have small fonts into elegant and highly readable pages. All ads, photos, and graphics are stripped from the page. Reader also merges articles that may be spread across several pages on a mobile website into a single scrollable page. And as with all things Mac, the handling of typography is excellent.

Reader is based on technology licensed from Readability, which also created a bookmarklet version for desktop web browsers and is embedded in the Amazon Kindle and popular iPad applications like Flipboard and Reeder.

Below is an article from the Chicago Tribune using the normal Mobile Safari display and Reader. I know which one I’d rather read.

Mobile Safari Reader

Mobile Safari Reader

Published in: Interaction Design / Mobile / Usability / User Experience
28
Mar 11

Tobii and Lenovo Experiment With Eye-Controlled Laptop

Eye tracking equipment maker Tobii recently demonstrated an experimental laptop designed in collaboration with Lenovo that uses a person’s eye movements to interact with the computer’s user interface.

The interactions involve combining mouse clicks or keystrokes with eye movements to provide an enhanced user experience. The eye tracking dimension of the demonstration shows that eye movement would be used to complement, not replace, keyboard and track pad input from the user’s hands. Anders Olsson of Tobii demonstrates in the video below the modified Windows 7 user experience.

See Tobii’s press release for more details.

Published in: Interaction Design / Usability / User Experience
17
Mar 11

Features Meant to Assist Should Support Efficient Use

Tools meant to make things easier for people shouldn’t slow them down. I ran into this situation when I was signing up for a webinar through GoToMeeting this week and tried their Show in my Time Zone features since the meeting was scheduled using Pacific Time.

Clicking a link exposed a layer with a select menu of different time zones, but they all led with the offset from GMT, such as (GMT-06:00) Central Time (US and Canada). So the user has to shift their focus to the middle of the options to scan the list for the first characters of meaningful information. Why not format the list as: Central Time – US and Canada (GMT-06:00)? It’s admittedly a small detail, but as Charles Eames said, “The details are not the details. They make the design.”

GoToMeeting Time Zone Selector

GoToMeeting Time Zone Selector

Published in: Interaction Design / Usability
17
Oct 10

SUS Calculator

I recently used the System Usability Scale on a graduate school project and wanted an easy tool for calculating scores. Since I hate doing manually anything that will be done repeatedly, I took the time to create a simple SUS calculator in Excel.

The spreadsheet is available for download from Google Docs.

For more on the SUS itself and how it is calculated, take a look at this article on Wikipedia.

Published in: Graduate School / Usability
13
Jul 10

App Store Flow on iPhone Could Be Streamlined

Normally I love the iTunes App Store, but not so much today. I was trying to add Kayak’s travel app to my new iPhone and found the experience to be full of unnecessary and redundant tapping.

This was my screen flow:

  1. Launched the App Store
  2. Clicked Search
  3. Typed “kayak” and clicked the Search button
  4. Tapped Kayak’s app on the list screen
  5. Clicked the Free button
  6. Clicked the Install button
  7. Received a prompt for my password
  8. Entered my password and click the OK button
  9. Received a message asking me to confirm I wanted to download the app since Apple had detected this was a new device
  10. Clicked the Continue button
  11. Received a prompt for my password
  12. Entered my password and click the OK button
  13. Got directed to billing page with a request to confirm all information (since this was the first time using this device)
  14. Entered credit card security code without making any other changes and clicked the Done button
  15. Returned to the Kayak screen
  16. Clicked the Free button
  17. Clicked the Install button
  18. Done

Did I really need to enter my password twice? The App Store should be smart enough to know I just entered a password when sending me to the billing information page. Normally I don’t mind having to authenticate when accessing billing information, but not when I just did it a moment ago and am finger tapping an iPhone.

Another redundant step was requiring me to tap the Free and Install buttons a second time after going through the setup screens. At that point I had gone through 36 taps, so I think I clearly expressed my desire to download the app (“Really, I do want it!”, I thought). The App Store should have just started the download.

A last unneeded step was asking me to update my payment information to download a free app. My guess is that was done to get my iPhone ready for seamless purchasing in the future, but that’s a business goal of Apple’s, not a user goal of mine. I just wanted to download a free app. Ask me to confirm my billing information when it’s really needed.

My entire Kayak download took 38 taps. Eliminating the second password prompt and the last two buttons would have cut it to 26, a 31% reduction in taps. That’s a lot in a mobile experience. Dropping the credit card setup for a free app would have removed four more taps. Luke Wroblewski stated it best in Web Form Design, don’t ask for data you don’t need to complete the user’s task at hand.

As I said before, I love the App Store. But its download flow needs some streamlining, especially in the mobile context. I’m surprised Apple missed this aspect of the store’s design given its usual laser-focus on all the small details. As Charles Eames said: “The details are not the details. They make the design.”

Published in: Interaction Design / Mobile / Usability / User Experience
27
Dec 09

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.

Published in: Graduate School / Usability
← Older Entries