vi·to

Hosting a UX design practice workshop will take some practice

Minutes, artifacts, discussion and analysis from the Austin January 4th, 2010 meeting

Minutes

Artifacts and discussion

The exercise was the Winter ’09 Mozilla Labs Design Challenge: reinvent the “Home” page as a native, browser-provided (and thereby having access to both the user’s PC and the browser history) tab. See the exercise analysis for more details on how the process actually went.

Mozilla Design Challenge Winter ’09: The Home Tab banner

The artifacts presented here are from the second round of discussion, using the more detailed sketches and refined concepts.

Vitorio

The first concept was a home tab which showed previews of your most visited sites, similar to Safari 4’s “Top Sites”. A strip of thumbnails is presented on the left, with a large preview of the current state of the page on the right. This preview is non-interactive, and scrolled to a relevant area of change on the page: where you left off, a headline that’s changed since your last visited, etc. The idea is to provide enough information and context to save you from having to open a tab. Clicking on the preview opens it in a tab.

The thumbnail and preview reflect the site as it is now. There was some discussion as to whether it made sense to remove the thumbnail and preview from the home tab once you’ve opened it up in a tab, as well as whether the concept really saved the user anything at all.

The second concept was a horizontal stream alternating between conversations and updates, similar to a lifestream or firehose. In this example, the left side is a conversation I participated in: say, a comment I left on a blog. You see the thumbnail of the page, the title, the headline and then any responses that came after my post to it, plus a response form so I can reply right there. The right side is an update from a site I frequent, akin to an item in an RSS newsreader. The stream flows left-to-right to differentiate it from a traditional page, which scrolls top-to-bottom.

Discussion centered around whether the horizontal scroll was a necessary differentiator, whether followups and updates should be grouped instead of interleaved, and an observation referencing Bill Buxton and the importance of transitions as new items appear in the stream.

Clay and Ame

The concept was to present high-level metadata about your browsing. The left pane is a list of sources (which the user installs like extensions), the right pane is split into (up to) three horizontal rows: update (where you can interact with the source), checks (a dashboard of events) and statistics (your actions and use of the source tracked over time).

In the sketch on the left, the default source is your browsing history. There’s no concept of updating or receiving events from your browsing history (since it’s fed by actual browsing) so you only see the last row: statistics. This is split between thumbnails of the sites you’ve visited over the span in which you’ve visited them (in this case, in the range from 6am to 6pm). Scrolling through the thumbnails or growing and shrinking the timeline changes your view of the data.

The right sketch shows a second source, Twitter, with all three rows. The ability to interact with the service (update Twitter) is the top row. The checks (dashboard) is the second row, showing how many updates there are from people you follow, how many direct messages, how many list updates. The bottom row is statistics, showing when your followers update and when you post.

Questions included potential adoption rates if sources were developed as extensions versus being an automatic data feed made available by sites you frequented; and whether there needed to be actionable results from presenting the data.

David and Andy

David’s concept began with the question of what “home” means in a browsing session, and relating it to the iPhone’s home button as a sort of escape, or a way to manage your current environment.

The left pane is your navigation or dock, providing access to your current tabs, communications (email and social media), your browsing history and the local filesystem. Each “app” can have a badge showing a status or update figure, as with iPhone app icons.

This pair of sketches are the first two tabs. The left sketch, “current tabs,” shows thumbnails of all of your currently open tabs, with the badge showing the total number of open tabs. The right sketch, “communications,” shows you summaries of your email and social media conversations, although this was not explored further.

These are the second two tabs. The left sketch, “web history,” shows indexes of your browsing history by tag, chronological order, or category. The right sketch shows summaries of your local filesystem usage: recently accessed documents and frequently accessed documents.

Discussion about the concept revolved around the interactions between the thumbnails and the tabs (the tabs stay open, the thumbnails are more of a management interface) and whether the local filesystem view is the right sort of thing to have in the browser (you’re in the browser so much, a Finder or Explorer view might genuinely be helpful; or what about uploads and downloads?).

Andy’s concept delved into the most useful ways to visualize your browsing history: either as a tag cloud or a graph, with adjustable time sliders. Both the tag cloud and the graph can be rendered by frequency of occurrence, some sort of PageRank relevancy metric, or some sort of category. The slider at the bottom adjusts the timeframe of the history view, and the cloud or graph change based on the timeframe selected.

Questions included the potential interactivity of the visualizations; the potential for social browsing or games (post your tag cloud and have people try to create a browsing history that generates it, or post a tag cloud and get recommendations for sites based on users with similar clouds); and the potential for automated identification of browsing patterns over time.

Vincent and Julie

Julie’s concept continued the statistics and metadata trend by presenting an overview of your entire day’s application usage. A chart tracks your application use over time, allowing you to see spikes and troughs over the day, as well as a slider to increase or decrease the span of time charted. The pie chart in the lower left provides a different view of the same data. The right hand corner is predictive suggestions about what you might want to execute on right now based on your tracked history.

Clicking on a tracked result (here, email) drills down into the data to show additional detail. A partial sketch is shown here, comparing reading versus composing. The discussion included the comparison to Mint and the privacy concerns involved with something like this on a public computer (suggested solution: display aggregate social stats).

Vincent’s concept was based on the idea that you spend so much of your day in the browser, your home page should reflect your to-do list. Vincent was unable to refine the idea much, but considered motivational options, such as occasionally suggesting something recreational instead of the actual to-do item.

Discussion included the idea of pulling in other “fun” data, such as horoscopes and biorhythms, as well as using your browsing history to infer to-do items, such as Amazon purchases prompting “did you read your book” questions and “write a review” action items.

Shari and Paul

Shari expanded on the idea of the ever-open browser window presenting a to-do list by using it for personal fulfillment, a persistent tracker for a handful of items over time.

Discussion centered around tools people were using for similar things, particularly when those trackers were already set as their home page.

Paul’s concept took data mining the user’s browsing history and PC to the extreme by providing a revenue stream for Mozilla through product recommendations. Links mirror Amazon’s recommendations management system, explaining how the recommendations are made, how to change them and how to turn it off. The right sketch shows a detail view of the individual thumbnail, with a purchase link, rating and social network sharing features.

Analysis of the first meeting

Facilities

Finding an inexpensive, private meeting place in Austin was difficult. The University of Texas requires you be sponsored by university staff or faculty (who must always be present), actual conference centers range in cost from $400 to $900, and a coworking space was so busy I never heard back them. The local web meetup, Refresh Austin, meets at a downtown bar’s semi-private room, but it can get a little noisy and parking downtown can be rough. A similar venue further north was $1500 for the evening. The Austin community LiveJournal had some suggestions, as did Yelp, and I ultimately reserved a small (10 person), semi-private meeting space at a coffee shop a week before the planned meeting.

I didn’t follow up with Genuine Joe before the meeting, however, and they lost our reservation. Instead of giving myself setup time, I only booked the room from 7 to 9 and had to wait for another group to leave. There were enough electrical outlets and a tall table near the front of the room, but I wasn’t prepared for the possibility that there wouldn’t be.

Presenting

Presenting drawn sketches to a group typically means one of two solutions: an overhead projector (meaning your sketches must be drawn on transparencies) or a document camera (which itself requires a large television, monitor or projector). Meeting in a coffee shop rather than in a professional meeting space meant I would have to provide all the equipment myself.

Drawing on transparencies is an interesting idea (especially if you use dry-erase markers), but overhead projectors are large, have loud fans and long throws. Document cameras are large and expensive (even to rent) and digital projectors can be just as loud as overhead projectors. (I also do not own any of these.)

Instead, I decided to improvise with my iPhone, taking photos of sketches and displaying them on a monitor using the iPhone’s video output. The fixed-focus camera on my first-generation (2G) iPhone meant I’d have to take pictures of documents from no closer than about a foot, but they would be high enough resolution at 1600x1200. All iPhones support composite (a single yellow RCA jack) and component (three cables providing HD at 480i or 576i) video output. Taking a photo of a sketch and plugging the iPhone into my television revealed entirely adequate resolution for presentation and discussion, even on composite video. I recovered an old Dell 2005FPW LCD monitor from a friend: it supported composite video input and I hoped its 20.1 (widescreen) inches would be a large enough display for the meeting.

A sketch displayed on a televisionThe television is displaying the sketch from the iPhoneThe setup in action at the UX workshop

Actually presenting photographs of the sketches was trickier than expected. The Photos app video output only works in slideshow mode, which starts from the first photo in your camera roll, a problem when your phone has a few hundred photos on it. If you accidentally touch out of slideshow mode, you have to start the slideshow over again from the beginning. I hadn’t practiced taking photos extensively, and the iPhone’s orientation detection doesn’t work reliably when it’s held horizontally. This meant photos that were supposed to be landscape were being displayed in portrait or vice versa. Lighting and the steadiness of my hand was also an issue.

To display photos without having to use slideshow mode, I used iPhone TVOut2 Mirror TVOut, a jailbreak application that mirrors the iPhone display on the video output. To deal with improperly photographed pages, the Dell LCD rotates, as shown in the far-right photo above. These solutions are still sub-optimal, however: the video output mirroring doesn’t allow you to take photos, so I have to turn it on and off; and the LCD doesn’t rotate 360 degrees, so there’s still a chance I might take a photo very wrong. This is really crying out for a tailored iPhone application.

The Call to Action

Are you a UX, IA, UI, IxD, usability, visual or other sort of designer in Austin, TX? Come out for a design practice workshop on January 4th, from 7–9pm, at Genuine Joe Coffeehouse (it’s on Anderson Lane near the Alamo Drafthouse Village). We’ll be doing the brainstorming practice exercise. Come a little early to get settled and get some coffee or a snack so we can start on time. I’ll be there at 6:30pm to set up if you’d like to introduce yourself or discuss the meeting itself. Paper, markers and other materials will be provided.

Introductions

The plan was to have no introductions. We’re just feeling things out, no need to have senior people with big egos mark their territory this early. Nametags with your first name only, and then everyone text messages me your full name, employer and job title for sorting later. These instructions were written on the Notes app on my iPhone, which was not in large enough print for everyone to read.

I was using my personal iPhone for presenting and I could not it into airplane mode while text messages were coming in. During this time, my mother happened to call and this was also displayed on the monitor. Hi, Mom.

The text message trick was awesome. I first saw this at a show in Nashville: the very progressive Amanda Palmer had the entire audience text her their email address instead of signing a clipboard at the back of the room or some such. (She continues to engage her audience in fascinating and modern ways and is worth following for that reason, even if you’re not a fan of her style of music.) Not everyone texted me, but this is okay. Not everyone would have signed my clipboard, either. I forgot, however, to ask for email addresses.

Then, I had everyone introduce themselves. I’m not sure why. Someone arrived rather late and it seemed like a way to include them. It was completely unnecessary, as the group is self-selecting and mostly professional anyway.

The Exercise

The plan for the brainstorming exercise was simple:

The RFP was the Winter ’09 Mozilla Labs Design Challenge, challenging us to reinvent the “Home” page as a native, browser-provided (and thereby having access to both the user’s PC and the browser history) tab. I printed out just “The Brief” section and passed it out. Sketches were to be done on paper with marker, using the landscape pair of browser window outlines (PDF) I had created from the Balsamiq Mockups object library (with permission; thanks, Peldi!).

With such a broad concept, each participant seemed comfortable coming up with only one or two ideas in the time allotted. This worked out for the best in the end due to time constraints, but I was originally expecting closer to half a dozen each.

The group was small enough that each person could hold up their initial sketch and talk about it, but some people used pencil or pen and these were harder to see than those drawn with markers. With a larger group, that would be a bigger issue, or time would need to be taken to capture and display each sketch.

During refinement, a couple of people froze up. I realized that two of my ideas were basically the same and threw one out, despite saying I would refine it. Another member had designer’s block and didn’t say anything until it was their turn to present their final (blank) sketch. I wasn’t sure how to handle either situation. Should I have pressed ahead with a refinement I didn’t feel compelled by? Could I have caught the member “freezing up” and facilitated a solution?

The group was asked to consider five areas for criticism: user experience, adherence to the RFP, innovation, practicality and other implications. These may have been too general, and the discussion during the presentation of the final sketches ended up being more of a question-and-answer session rather than a more thorough critique of each design.

The group was coached to sandwich criticism between positive comments (in the Toastmasters fashion), and this itself seemed to also require practice. UX criticism seemed limited to broad strokes: the usefulness of particular features, the general information architecture and layout of the components, rather than drilling into specific object types and placements. Adherence, innovation and practicality were not explicitly discussed, and these may be too subjective without more specific questions asked around them. Other implications did bring up interesting questions, generally around privacy and the difference use cases between public and private computers.

The discussion was positive enough that we ended up running over our 9pm end time, continuing through to 9:30pm.

Expenditures

I’m trying to run the meetings as inexpensively as possible, to make sure cost isn’t a barrier to others wanting to hold similar meetings.

Apple Composite AV Cable
$49.00
220 copies (two hundred of the blank browser template, twenty of the exercise brief)
$17.60
Sticky notes, 3x3 cube
$1.99
Name badges, 100ct
$4.49
24 blue Sharpies (two 12ct boxes, fine point)
$15.98
24 black Sharpies (two 12ct boxes, fine point)
$15.98
MiniDV tapes (for a borrowed camcorder I recorded the meeting with)
$12.99
Meeting room
$30.00

Total: $148.03 to host the first meeting, not including taxes, my own coffee, gas, etc. (I didn’t personally pay $30 for the meeting room: everyone’s coffee went towards this minimum tab, and there was enough to cover it.)

Follow-up and follow-through

The original plan was to write up the artifacts, transcribe the conversations, scan all of the original artifacts and make it all available online within a few days, along with my thoughts on how the workshop process went. It is now a month later and I am only just finishing up.

Scanning took over two hours, much longer than expected. I must have spent a couple of days on this HTML and ongoing refinement of my own baseline technique, and the entire document is formatted by hand. Transcribing an hour of audio took hours upon hours, but the actual dialogue was fairly dull to read, and I rewrote it into the summaries you now have.

The dialogue may be useful, but as it was more of a question-and-answer session, I’m not sure it would be helpful to rate responses for evaluation of each person’s criticism, in the Toastmasters fashion. There are also many more artifact sketches, including intermediate forms and unsigned artifacts from people who did not present or who left early, which I am not sure what to do with.