HCI Course Part 3 - Wireframing

This is part three in my series about the Human-Computer Interaction course I took through CourseraRead all my posts for the full story.

Assignment 3 Wireframing

After choosing a concrete direction (Mary Jo's Storyboard in my case) we jumped into the process of prototyping by creating two rapid interactive wireframes that varied in interface, but offered the same basic functionality.

You can read more about the differences between wireframes (low fidelity, think big-picture layout), prototypes (middle to high fidelity, for interaction testing), and mock-ups (middle to high fidelity, focusing more on the visuals) in this article from designmodo: Wireframing, Prototyping, Mockuping – What’s the Difference?

The process of rapid prototyping involves producing your ideas quickly and testing them. Confirm if your designs work as planned. Based on what you learn from those tests make more designs and refine previous ones. Test more. Refine and adjust. Test. Repeat again. Iteration upon iteration to improve and refine the design.

The quicker you can make the design the quicker you can test your idea and the quicker you can throw out the paths that don't work. To that end designers use various prototyping methods. In this course I used a program called Balsamiq. It lets you sketch your design ideas quickly using pre-made buttons, menus, and other elements commonly needed on websites and on phone apps.

The cool thing about Balsamiq is that you can link a picture of a button (or any other visual feature) to another of your designs. So if someone is viewing your design and clicks on the "home" button it will zoom to the design you made for the home page. In this way it feels just like clicking on links on a webpage would take you to a different page.

To really get a feel for wireframes built with Balsamiq, click on one of my interactive PDFs below. The wireframe will open up in a new window for you to play with. FYI, an interactive pdf just means if you click on one of the buttons in the pdf it will zoom you to a different page of the pdf. I choose to have the click-able buttons be highlighted in pink to make it easy to find them. If you haven't played with an interactive pdf before you should now!

Car Buddy prototype 1
Car Buddy prototype 1
Car Buddy prototype 2
Car Buddy prototype 2

Also during this process, because I like to picture things visually, I made a quick user flow to outline this specific little section of the app before developing the wireframes.

Next Up... Peer Reviews and Heuristic Evaluations!