Designing Human Centered Software

Year

Company

Carnegie Mellon

2019

About the Projects

Designing Human Centered Software is the class that gave me a broad intro to the field of Human-Computer Interaction (HCI). It taught me anywhere from HCI's history, laws, and theories, to basic human cognition and perception, and even dived into some basic interaction technique. This class also contained multi-week projects called bakeoffs (sadly no baking was involved), that gave me a semi-structured, design challenge where I worked in a multi-disciplinary team of 3 though all steps of a prototyping process. A bakeoff ends with an an in-class "competition", where we spend one class running a big user study. In this webpage, you will find the video deliverables for each of the four bakeoffs, which describe the design process by covering the initial ideas, three prototypes, and the testing and refinement that led to each prototype. 

I found these projects to be incredibly valuable because it gave me lots of iterative design practice. Every bakeoff started with a wide ideation session, followed by prototyping and testing the designs containing our initial ideas. My team then iterated on our initial while ideating some more, doing this in a continuous cycle while there was still time before the deadline. Thus, the design process in this class closely mirror the Pugh design funnel.

 

 

 

These projects also it taught me a lot about user testing. For instance, I learned that user testing is essential to figuring out what ideas worked or didn't work, which usually didn't always match what our team though was going to work or not work. As hard as it can be at times, this class really made me understand that I am NOT the user. 

Besides learning the importance of user testing, this class also taught me a lot of testing methods. My favorite method to use was the think aloud method - where the user would tell the experimenter his/her thoughts as they used a prototype - because it was very informative in figuring out what the user really thinks about the design. Through think alouds, our team was able to gather specific areas of improvement because our team was able to find where our users misunderstood our design, and why other designs are easy for them to use. 

Fail early, no ideas are too far out there

Bakeoff 1: Pointing Challenge

The first bakeoff was simple application that displays a 4x4 grid of square buttons. The starter design was that the square buttons would light up one at a time, and users must click the lit buttons as accurately and quickly as they can. Our goal was to devise modifications that facilitate clicking these buttons faster, but we had to be fair to each button by not making a specific button more clickable when compared to all the others. 

For this bakeoff, our team actually took home first place as our design allowed users to click the lit buttons the fastest without sacrificing accuracy. My main takeaway was that there is no such thing as a bad idea, and any idea (no matter how wacky) should be tested. For instance, our team started with curved lines to limit overlapping lines, but didn't really entertain the idea of using one curved line. However, when our team hit a plateau, we decided to test our design with a singular curved line instead of a straight one and we were surprised at how much of a difference it made. Thus, after this bakeoff, I knew not to judge ideas on how dumb or useless I thought they were as the only way to validate how good an idea really is is to test it. 

Bakeoff 2: 4DOF Manipulation 

This bakeoff mimics the real world scenario of putting a logo or an image in a specific page in mind, and consisted of a simple application that displays a destination square in red and a logo square in grey. Destination squares have a random X/Y position, as well as a random rotation and scale. Our task, which we chose to accept, was to to create a multi-dimensional input method for rotating, scaling and translating the logo square onto the destinations as quickly and accurately as possible. The starter design consisted of buttons on the side of the screen, and the major rules were that it must remain a single touch application, and there must be equal treatment of all possible X/Y/Z/R.

This bakeoff really confirmed the simple idea that less is more. One of my favorite quotes I've read in an HCI class is, “A wealth of information creates a poverty of attention" by Herbert A. Simon. I really take this quote to mean that human attention is limited by nature, so it’s the job of the designer to limit the amount of attention that the user needs to devote. Thus, as you can see from the video, each new prototype was a simpler version of the previous one, and actually resulted in a faster time because the user had to devote less of their attention. Rather than scanning the screen to find the proper buttons to press, all the user had to do for the final prototype was find the dot in the target square and place the cursor over that dot. We then extended the design language by placing dots on the corner of the target square so the user then had to place the cursor over each dot. Thus, the user effectively just has to pay attention to placing the cursor over dots, instead of thinking too much about what button to press or how the square should be transformed. To further decrease how much the user has to pay attention to our design, we made the square turn green when the user was in the right place (this really emphasizes how important feedback is to design). Finally, one way to improve upon our design is to simple place dots on opposite ends of a square. This then takes away the user from having to focus on placing the square in the middle of the target square, which would then allow for a faster test time. 

Bakeoff 3: Tiny Typing

Instead of a simple application, the third bakeoff consisted of creating a text entry method for a smartwatch. The character set only includes ‘a’ through ‘z’ and space. No caps, numbers or punctuation, and text entry must be 95% or greater in order to be feasible. However, instead of deploying the application on a watch, this bakeoff was tested on an android smartphone, with all of the touches and graphics should be inside the 1” area. This bakeoff really differed from the previous two bakeoffs in the sense that it felt as if the leash was taken off us, and we were really allowed to be creative in what we decide to do. The only major rule was that our design was not allowed to bias the target phrase in any way.  

This bakeoff was not designed well at all, which was validated to our team since we did not make the finals. Design can be frustrating in the sense that effort is not always correlated to quality, but it's okay that we failed because I know that I was able to become a better designer because of my failures in this bakeoff. In this specific example, I wish I had read Steve Krug's Don't Make Me Think because he stresses the power of conventions in that book and this bakeoff gave me first hand experience on how important conventions really are. My team spent numerous long nights coming up and testing different keyboard layouts but never bothered to test the familiar QWERTY layout because we thought that it wasn't well designed. To our surprised, all the finalists for this bakeoff featured designs with the QWERTY layout. Thus, from this day forward, I will always keep Krug in the back of my mind knowing the power of conventions and how conventions are in place for a reason, and that it usually takes a lot to reinvent the wheel. 

Bakeoff 4: Sensor Madness

For the final bakeoff, my team and I were tasked to create a smartphone app that allows users to select one of four options, and then within that option, select of two possible actions. Think of it like an Apple TV, where the first four options are the apps you can choose, and the final two actions are choices to be made within the app. One unique aspect of this bakeoff was that users aren't allowed to use the touchscreen or buttons on the phone as we were only allowed to use the phone's sensors. 

© 2019 by Nathan Jen