Skip to content

Show and Tell in UX

What Show and Tell Taught Me About Being an Experience Designer

Kindergarten

In kindergarten, in the US at least, we had show and tell, at least my school did. Well, maybe it was first or second grade, I can’t remember. Each day we would have a student bring in something. This artifact was usually from around the house, and parents usually helped out, again from what I remember. Students would bring this artifact to the front of the class and “show” it. They would tell the class what the artifact was, it’s purpose, perhaps it’s personal history, etc. From there, other students might ask questions about the artifact, or discuss what the artifact means to them. At times the teacher would interject with learning opportunities. Wikipedia refers to this activity as a chance for students to learn public speaking. However, I think it’s also about being aware of the world around you and connectin to that world. Further, it provides opportunity for other children to see new artifacts, and (just as important) to discuss those artifacts and their relationship to them.

Show and Tell in Interviews

As I’ve been interviewing this past week for a full time job, I’ve been reflecting quite a lot. One thing that has hit me is how much, despite all that I know, I keep trying to tell when I really need to show. Instead of showing some images of my process and walking through a project, I tended to ‘tell’ about my process and just show the final outcome. While the final outcome is important, it’s more important to show how you got there. What methods were used, what assumptions made, what research was conducted, what processes were in place, and where did things fail and succeed. Show, show, show, and then tell as you show.

Show and Tell in Documentation

Wireframe Walkthrough As practioners of user experience, I think we also fall into the ‘tell’ instead of ‘show’ trap. One of the top artifacts we seem to produce (going on some assumptions here) is documentation. We produce design specs that are 60 or more pages in length. They likely have some pretty pretty pictures in them, but are very wordy and lenghty. And this makes sense, considering our higher education system. Wireframes and mockups fail at showing an experience. User flows and diagrams might start to get at this, but still fall short. These artifacts still ‘tell’ the experience, as they are accompanied by explanatory text, instead of ‘showing’ the experience.

As a field, I think we need to take lessons from our kindergarten classes. We need to show more and tell less. One way in which we can start showing more and telling less is through prototypes. Prototypes allow us to show an experience to clients and users rather than telling and explaining. Our world is complex, and our designs are often complex as well, by showing instead of telling perhaps we can push our field further and focus more on human beings.

Image: Kindergarten class by chesirekat
Image: Wireframe Walkthrough by carriejeberhardt

Design with Bravery

At Interaction 11, Bruce Sterling gave an amazing closing keynote. Out of the hundreds of nugests of wisdom, one thing in particular stuck out to me. Bravery. I’m not sure entirely how Bruce spoke of it, but he reminded us to be more brave when we design. Something about this phrasing stuck with me as very inspirational. In fact, this phrasing helped change and re-shape my capstone project for the better. So, thanks Bruce!

However, the inspiration did not stop there. A couple of days after the conference, a new re-phrasing came to mind, “Design with Bravery”. To me, this spoke to the heart of Bruce’s phrasing while reminding me to continue to push myself and my designs into new directions. With this in mind, I created a poster to hang on my wall, where it now sits reminding me to be design with bravery.

Design with Bravery

The above image links to a full size screen quality graphic. Contact me for a print quality version.Creative Commons License

Design with Bravery by John Wayne Hill is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License. Based on a work at www.vectorportal.com.

‘Brave’ Sketches

After Bruce Sterling‘s ending keynote for Interaction 11, I knew my capstone could not continue has it had before. Tonight I decided to go back and sketch more designs, while trying to be ‘braver’. I also attempted to take to heart two other Interaction 11 speaker notes by looking at how I handled complexity within the interface, and how I might use the information itself as the interface.

My desk as I was sketching
JW desk while sketching

Overall, I’m very happy with these new sketches and I’ll continue to explore new designs for critique.

Have thoughts, comments, or feedback? I would love to hear it.

Give a Crit Iteration 5

In this iteration, I’ve added some toggle buttons that allow for viewing the title, description, category, and exif information for a given photograph. This information appears as an overlay on the image directly, and is always ‘at-hand’ during a critique.

5th Design Iteration

Explanations

I’m looking for feedback from photographers and designers. For background information on this design, please see http://www.johnwaynehill.com/blog/category/capstone/, the first post has some good information.

Video Prototyping

What is Video Prototyping?

Video Prototyping is a tool Interaction Designers can use to tell a story about a design. It allows for the showing of an entire experience through a narrative. Video prototypes can be used to help better show a design in use in a way that many people connect with emotionally and aesthetically.

My Goals

Video Prototyping can be a very powerful tool to communicate a design. However, it can also be expensive and time consuming in order to produce. While some industry players are starting to use video prototyping more, many do not because of the costs involved. With this in mind, I decided to create a video prototype with very little cost in as little time as possible while still providing quality when narrating the experience of my design.

My Process

My overall process for creating a video prototype was to choose/create a design, ideate on how to tell the story of that design, create a storyboard, shoot the video, and then edit and upload that video.

I decided to use a design that I had worked on in the previous (spring 2010) semester entitled GroupView (research overview, design document). This design allowed multiple photographs to come together and learn from and teach each other. It connects their various cameras to an iPad application and allows for on-the-fly editing. As this design never previously made it to a full prototyping stage before, I had to iterate briefly on the design itself before bringing it into a video prototype.

Storyboard

After iterating on the design, I came up with some basic ideas on how to tell a story about the design. I quickly sketched out a basic narrative using 6 post-it notes and asked my colleagues for feedback. With this feedback I created a storyboard of my video prototype, using post-it notes on a sheet of foamcore so that I could rearrange and iterate quickly as needed.

IMG_0305.jpg

Shooting and Editing

With the storyboard in tow, I gathered a couple of students and starting shooting the video. I had quickly scouted out a place to shoot and informed my ‘actors’ of their roles as we walked to the location. From there I directed my actors and shoot several takes of most of the scenes. I quickly learned here that having my shoot broken up into scenes greatly speed up the process of shooting. I was able to shoot the entire video in about 25 minutes.

In keeping with my goals I decided that the quickest way to edit this video was to use iMovie. iMovie provides a good quick interface for putting together a decently polished video. Spending just 4 hours total, including make a couple of graphics in Photoshop, I was able to create my video prototype from raw video footage.

Reflection

I’ve found through this project that video prototyping can be a very compelling way in which to show a design. It allows stakeholders, users, developers and others to quickly understand the experience of a design. Some major drawbacks are that it costs (time and resources) a bit more than other forms of prototyping. However, by being mindful of these costs I think a video prototype can be created fairly easily. In the future I would be more mindful of my lighting sources, as there are several annoying reflections within my video. Scouting multiple locations could also help to provide backup plans for when a primary location doesn’t work out (as in it’s too sunny outside to see a screen, etc). Furthermore, storyboarding should absolutely be done prior to shooting as it cuts down video production (shooting and editing) time by a large factor. Without having properly storyboarded my design I would have spent much more time shoot and editing the video. Overall, I am happy with my process and have proved to myself that compelling video prototypes can be made with little resources and time.

Final Video

Below is the video prototype for GroupView. I would love any comments and critique on the video itself, as well as my process.