I came across an interesting article on hand-drawn interfaces here. Sometimes a Sharpie and good, strong paper tell the story better — and faster — than a fully fleshed out wireframe. (I must confess that ballpoint sketches on notebook paper don’t pack nearly the same punch.) So hang on to your paper napkin drawings, at least for posterity’s sake.
If you’ve ever tried to communicate a site design via paper, you know the value of also presenting an interactive version with live hyperlinks. Visio users know that it’s pretty easy to create an interactive HTML prototype from a set of wireframes (File>Save as Web Page), but for me, the major drawback to this approach is that the prototype isn’t portable. I need a way to communicate designs via email, and there’s no way I’m emailing a bunch of HTML and GIF files to people (or even a web link, since not everyone has network access).
PDF is ideal for emailing, but it takes a little work to create a clickable PDF prototype in Visio. Here’s what I discovered.
1. Create hyperlinks on the foreground, not background — and use the document stencil to manage revisions
It’s pretty standard practice when wireframing in Visio to put the standard page elements — header, footer, navigation — on a background page so that these elements automatically repeat on every page. However, when you publish a PDF, Visio doesn’t create hyperlinks from the background layer. For an interactive PDF prototype, the hyperlinks have to live on the foreground pages. This means that for a standard page layout, all the navigational elements have to reside on each page in the wireframe.
You could copy and paste the navigational elements onto every page, but that’s a beast to maintain. Instead, use the document stencil (credit to this explanation at User Experience & Design blog).
Here’s how it works:
2. Use PDF menu in Visio, not print to Adobe PDF in printer menu
For the hyperlinks in the PDF to work correctly, use the PDF menu in Visio (Adobe PDF>Convert to Adobe PDF). For some reason, if you use File>Print and choose Adobe PDF as the printer, the hyperlinks in the PDF don’t work.
(Don’t ask me why, I’m just happy to have found a workaround.)
The final result will have live links on every page. To change the over states of buttons or create additional interactive elements, you’ll need to edit the file in Acrobat (avoid this step until you are certain the file is finished, otherwise if you regenerate the PDF from Visio, the Acrobat changes are lost).
3. Take it to the next level
This article on Boxes & Arrows provides a fantastic review of how to create clickable PDF prototypes with layers, multimedia and more. It focuses on using Acrobat’s advanced editing tools.
The November/December 2007 of Ragged Left, the newsletter of the STC Berkeley Chapter, is now online.
The issue includes my summary of a talk given by Adaptive Path’s Sarah Nelson and David Verba, entitled “Lessons Learned from Web Applications and User Centered Design“.
In their talk, they defined Ajax and Web 2.0 and then offered insights into how these developments in web application design offer both opportunities and challenges in designing effective user experiences.
Sliders in web design are becoming as ubiquitous as the fading yellow highlight. They certainly offer a more interesting and sophisticated way of interacting with a lengthy data set (remember the old days: choose from a drop-down, click Submit, wait, look at new page, click Back button, get lost …).
Some sliders allow changes to the top and bottom of a range of values:
Other sliders are designed to help the user choose a value (especially useful when it’s a hard value to remember):
Yahoo! UI Library - RBG Slider Control
Some sliders even include sparklines (small data displays), a very data-rich approach:
Prisjakt.nu (via IXDA-Discuss):
Other than the obvious cool factor, there are definite advantages to using sliders:
There’s always a downside:
Nonetheless, sliders are a very useful design element, so get going and use one! Better yet, use one on every page!
I’m intrigued by the complexity of presenting statistics on a map, and in my research I’ve come across two compelling but different approaches to mapping crime data: Oakland Crimespotting and the LA Times Homicide Map.
Created by Stamen Design, Oakland Crimespotting uses data from CrimeWatch, Oakland’s community mapping website. Crime reports are grouped by violent crimes, property crime, and “quality of life” crimes. Data on the map can be adjusted with a slider that is also a bar graph of recent crime reports.
A detail view (”Crime Reports”) offers more information about the nature of a crime and a close-up view of the location. You can also subscribe to an RSS feed for a specific geographic area.
The site puts crime information into the hands of the community, allowing residents to research and investigate patterns of activity, and to ask questions. As the site’s creators write, “As citizens we have a right to public information. A clear understanding of our environment is essential to an informed citizenry.”
Los Angeles Times Homicide Map
The LA Times Homicide Project by Jill Leovy combines homicide data from the LA County Coroner’s Office with original reporting. The filtering and user interface are stunning, and I can’t think of a better example of an information-rich data display.
Names and photos of the homicide victims are included next to the map. This humanizes the data in a powerful way, making it impossible to look at the map as just a warning about “dangerous” neighborhoods. There may be patterns to discover in the demographic and geographic information presented, but the tragic human side of the story makes it much more than just statistics. Sadly, new data (i.e. people) are added weekly.
Twitter is a strange entrant onto the social networking stage … I must admit I don’t really see the point. People share little 120-character bits of information about themselves (”just had a great burrito for lunch”, “waiting for my dad to pick me up”, etc.), and their friends — or complete strangers — can subscribe to and read them. I’m just not that interested in what kind of coffee someone in Michigan just ordered, or why a guy in Spain is waiting for a phone call.
However, I must admit to a surprising fascination with TwitterVision:
This mashup of twitter nonsense with Google Maps is actually sort of … well, reassuring. Somehow, plotting all these bits of trivia on a world map makes the continents seem like cozy neighbors, and the differences between us not so great. The more banal experiences of daily life are really rather similar (especially among the web-savvy set).
So, enjoy your latte, Michigan, and Spain-guy, I hope you get your phone call!
