Archive for March, 2008

"Just in time" information by reducing room-switching

Clock One of the usability rules that you might have heard is “provide the user information where and when they need it.” Sounds like a no-brainer, right?

It sounds so simple … but it’s harder than you might think.

It goes hand in hand with another usability principle that goes something like this–“don’t take a user to another room unless it’s really necessary and justified“. What does that mean? Well, every time you move to another page or bring up a dialog box, think of that as having taken the user into another room. Let’s say you’re on a USGS web site that has information about each of the U.S. states. Think of the page you start on as the living room–do you really need to take the user into the kitchen to ask him which state he wants to look at or give him the information he requested? There are times when it’s good to switch rooms, such as when you’re switching topics, but I would caution you to consider that decision carefully.

Hyperlinks on the web enable a lot of room-switching and it’s very easy to fall into the trap of hyperlinking to new pages, when you could provide the information right there and then–when and where the user needs it, without the hassle of moving to another room.

I am going to pick on the USGS earthquake center for an example. They have a lot of fantastic information on their site and I love that they are using many of the new technologies available. Some simple modifications that reduce room-switching would really improve the usability of the site.

  1. Let’s start at the worldwide earthquake page on their web site.
    • Click on one of the more isolated earthquakes. You are taken to another page (a new room) listing the details of the earthquake. Now the user has lost the visual of where the earthquake they clicked on was located. There is a “Maps” tab that even includes a Google Earth KML file and a Google map, along with lots of other useful-looking maps, but still the user can’t see the earthquake details and the map at the same time.
    • It would be very simple to replace the original world map with an interactive map with placemarkers for each earthquake. (Google Maps does this very well–and it’s free and easy to implement. Tim Mentele has done a lot of work with them already.) When you click on an earthquake placemark, the placemarker balloon could give you all the detailed information right there within the balloon. Voila! Information right where and when the user needs it–without leaving the room!
  2. Similarly, open their KML file in Google Earth.
    • Click on any of the dots. An information balloon comes up with a link to their web site for the earthquake details.
    • Now imagine that information from the web site right inside the KML info balloon. It would provide the information in the geographic context the user requested it in and eliminate the uncomfortable and unnecessary room-shifting.
    • You do have to moderate the use of this because you don’t want to overwhelm the user with too much information, but there are ways of segmenting information to control that. (Tabs work well … like the USGS Earthquake Center has employed on their web site.)

There are many other examples where this simple usability principle could be employed. Where could you use it?

Wireframing/prototyping in Axure: Pluses and Minuses

So a little while ago I posted a few entries on prototyping tools for software or web applications. Axure RPI decided to try Axure (vs. iRise) for one simple reason: I wanted to be able to draw a box on the screen. It’s really important to be able to group things on a screen.  iRise, the enterprise wireframe and collaboration tool (that goes for $6000 for a 5-user license) couldn’t do that one simple thing, so I decided to try out the $599 Axure instead.  I really love the iRise blog and the way their people think, but that one little feature was the deciding factor for me. I can find other ways to collaborate (there are all kinds of collaboration tools out there–we simply hosted the pages and walked through them one by one on a conference call), but I can’t do without the ability to group things on the screen. I’m down to 9 days on my trial of Axure and it’s become such a part of my daily work routine I can’t imagine life without it anymore. Before we buy, though, I wanted to see if there’s anything else out there. Anybody know of anything that compares with Axure? (besides iRise?) 

So here’s what I think of Axure.

What I like about Axure

Overall, it’s a fantastic tool for quickly mocking up screens and working out the basic layout and functionality of a web site or application. It’s a simple drag-and-drop interface that allows you to drag widgets onto the screen and define some simple interactions–and it even gives you some simple tools for mocking up web 2.0 interactive functionality. The great thing about it is it’s quick. You can show your customer (and the software engineers) an interface they can relate to, get feedback from your customer, make changes, and turn it all around in a matter of minutes or hours (instead of days or weeks). What a fantastic way to communicate and work! The time saved in getting that done is way worth the price tag. You have to think about it in terms of labor hours instead of the cost of the tool–is it worth it to be able to turn around changes in a few minutes or hours vs. days? How much is your time worth? It doesn’t take long to add up to $600 of labor time.

My boss also looks at it this way: he can hire a designer who understands how to design layouts and interactions, but is not necessarily an XHTML/CSS guru. They don’t have to know diddly squat about the technical side of this to make a usable(and even beautiful) design. Then once we have the design figured out, we can pass the design off to someone who does know how to code. This type of tool gives us flexibility in hiring as well as design.

 Other things I love about Axure:

  • It allows for dynamic interaction in an AJAX world. You’re no longer stuck with static screenshots for wireframes. You can actually interact with a page, have panels show and hide based on some actual conditions (like “if this box is checked, show this panel”)
  • You can make notes about how a page should work as you design it. Sometimes you don’t have time to sit down and put in all the interactions. Axure handles that situation beautifully: with page notes. When you generate the prototype, Axure shows a list of all the pages in a frame on the left, the page notes in a small frame on the bottom, and the main page. You can close those extra frames if you want to, but I found them to be a lifesaver.
  • You can generate interaction flows that show the logic as well as specifications from your designs. The specs show all your page notes along with the screens.

The best part is just being able to mock up a screen quickly and beautifully and really illustrate how the web site or application will work. Most users don’t know what they want–they need to see it in action first to really understand.

What I don’t like about Axure

  1. It makes really messy, heavy HTML code. Every graphic on the page, even if re-used, is saved as a different graphic. Every page in the mockup comes with a folder full of “stuff”. They take forever to load on a real web server. You really have to throw away the code and create your own HTML (assuming you don’t want heavy, grossly awful HTML behind your site).
  2. It has styles, but doesn’t make use of CSS. You can define styles in Axure and apply them to text, but those styles then get hard-coded in the HTML separately. Every line of text has it’s own style.
  3. You can only put text in a table. On “real” web pages, you can put ANYTHING in a table cell, a graphic, a form element, anything. Axure lets you do that only by putting a div placed in a certain place on the page. The form element or image is not actually “in” the table cell, so if the table cell gets resized, you have to move all your images or form elements back into the right places.
  4. When I draw a box, it always wants to snap to the grid instead of the right edge of the header graphic. To get them to line up, I have to set the zoom level to 200%, line them up, then zoom out again. I haven’t found a way to turn off the snap to grid “feature”

 Other reviews of Axure: