A Design Manifesto for Human Centered Design (HCI)
Introduction
Throughout the semester in HCI with Professor Peck, we have been exposed to various design principles and applied those principles to design projects. Though each project has its own design goal and was based on slightly different sets of criteria, the overarching principle in all of the design is to always design for human, hence the idea “Human-Centered Design”. What defines a good design is not how pretty it is, or how complex it is, but how well it serves its users. By applying the design processes in development in the course, we gained a significant amount of knowledge that guided us towards making our best product that benefited our users and served its purposes.
1. It all starts with sketches of Ideation
The first stage of design always involve making sketches of ideas. As Bill Buxton points out in his article “The anatomy of sketching,”
“sketching is an aid to thought,” and “a means of working through a design”.
At first I thought sketches served the same purpose as bullet points: as long as the communication is clear, it doesn’t matter how we display it. However, I realize that I was wrong and the importance of sketching at the beginning of the semester as we were doing our first Design for Others project. Our team was assigned to redesign the Mobile Web page of Weis Center for accommodations.
We came up with all kinds of different ideas to serve people who needed accommodations. There were so many great ideas that sparked out from the brainstorming part, and we made a long list of bullet points of the things we are trying to incorporate in our design, as shown below:
With the scattered bullet points of things we are making, our team had no idea how our pages were going to look like and what needed to be improved. Once we put our ideas on sketches, I was surprised to see that the functionalities tied together.
From that on, it made our lives easier to see what needed to be added and improved since we could visually feel about how the pages ties together. The are more references when we were thinking about possible changes during the design process.
In terms of the future, I could use sketches not just when designing for other people; I believe that imagery would be extremely helpful for the flow of thoughts. For example, it could be helpful when I am organizing my thoughts in a presentation or a paper.
2. A good designer understands their users more than users themselves
As described by Foster Research, Inc in the article “Best Practices in User Experience Design,”
“the first step in designing a great user experience is to deeply understand your users — their needs, wants, hopes, dreams, aspirations, attitudes, and goals relative to the project at hand.”
To truly understand the real people who uses the product, a designer cannot just make assumptions about their users, rather, the designer has to ask them. However, sometimes the answers we get from the users is not truely what they want. As Harvard Business School marketing professor Theodore Levitt pointed out,
“People don’t want to buy a quarter-inch drill. They want a quarter-inch hole!”
Due to the time limit, the only project we had a second chance to make modifications after the demo day was Design for Understanding. I was very impressed to see how the user feedback helped us when we were making improvements the next week after the Demo Day.
In the project Design for Understanding, our team chose to visualize the change in hate crime rates in the U.S over the course of ten years (2008–2017). To showcase the change in each states for clear communication, we decided to use a colored Map of U.S., of which the intensity showing the severity of hate crimes.
One of the main change we decided to make from the first iteration to the second iteration was through the observation of our classmates as they were viewing our graphs on a computer. Since the laptop display didn’t fit the whole page, we realized that when people were scrolling down, the last map didn't always stay in its place because scrolling zoomed in the map. Even though nobody explicitly pointed out, we still noticed the problem and decided to either put the map at the top or disable scrolling. (And actually, we did both.)
Again, the technique of observing our users and figure out the latent demand could be applied to more than just making products to other people. Listening and understanding what others’ demand and be sympathetic about them was the key idea in interacting with people. Understanding this would not only help us with our designs, but also our daily lives when we interact with other human beings.
3. …After we smuggle out user needs, making iterations of prototyping and testing is always a good idea
A good design does not remain in the same form as it came out to be. Rather, the design must go through cycles of prototyping and iterations before approaching perfection. The double diamond model described by Don Norman in his article “The Design of Everyday Things”, which was very useful in practice.
It involves Almost all of the projects we did utilized this model of design. For example, in our first project (as mentioned above), we make iterations of redesigning the pages through collaborating at inVision freehand. We make comments on each iterations that helped us perfect our APP pages.
In our design for VR project, we made meditation scenes that help people with stress relief.
We went through 3 iterations in Glitch to improve the user experience in scene transitions.
In the first iteration, we used different URL to bring users to different meditation scenes, so there was a significant lag between redirections.
At iteration 3, we uses a single webpage, and make the transitions through hiding and displaying the elements. We also preload the sounds and videos. Because of that, we were able to achieve a smooth transition that improved our user experiences.
We could clearly see improvements along the iterations. Actually, making iterations is helpful in all kinds of tasks not only for designing. Since nobody could be perfect at the first time, we should always be open minded for advices and willing to make changes.
4. …During the iterations, always try hard to convey a clearer message no matter how we change
It is super important to always listen to what our users need before ideation, and it is also important to translate design ideas to the real product. The hardest part was to put ourselves in other people’s shoes and make sure what we deliver is intuitive for our users. Sometimes since we are so into the subject matter we are doing, we might take some layers of user interaction or granted, and assume “the users would know what we mean.”
Actually, they don’t.
With that being said, it is our job to make sure the information is clear on the user’s side when we are making the Design for Understanding Project. As Kieran Healy points out in Chapter 1 of Data Visualization: A Practical Introduction,
“one thing [designers] can do is provide not just tools for making graphs, but also a framework or set of concepts that helps you think more clearly about the good work you want to produce.”
In our Hate Crime Visualization project, we first thought about putting trend lines of each states on a single graph. Since Tableau allows us to click legends to track the states, we felt that viewers could make their way through. It shows all the numbers clearly, so why not have that?
(Alert!)
However, we quickly passed that idea since too much information could be an obstacle for people trying to comprehend. Even though it might go very far in the accuracy axis, the bushes could score zero on the clearity axis. We decided to use a hex map to represent the information. Colors might not be the most accurate representation, but they make the comparison sharper.
When we were bouncing ideas in the Design for Understanding project, we realized that an outlier in our data set would skew the color scheme of our hot map, and therefore shows no contrast within states.
Therefore, it is our job to make sure the information we are trying to convey is clear and comprehensible. We consulted Ken Flerlage from L&IT and added an option to hide the outlier. As we could see, the contrast became clearer with the minimum loss of information.
As I progress through my college life, I feel that clear communication is always a barrier for me. Sometimes I was too into a subject matter that failed to recognize how others feel about understanding it. The process of trying to communicate clearly in this project inspired me to think more about other people and use languages that could be more comprehensible for others. Knowing others and being sympathetic is always a rule of thumb.
5. Last step, the Documentation — We don’t know when we want to refer back.
Finally, as good designers, we need to not only follow the design process itself, but also need to pay attention to documenting design evidences along the way. For example, the 5 design sheets provide a systematic guidance of how to use documents to get through each design stage. The design doc assignment pushed us to record every stages of design. It seemed tedious to me at the beginning, but when we get to the end, the documentations really helped us to revisit and redesign as we progressed.
For example, we consulted the Mood Board of our first project when we were picking the best color for the blue states of the second project:
In the Design for Expression project, we videotaped the user testing process.
When we were making changes on implementations, we looked back into the videos and analyzed their tendencies. For example, when we were deciding on the gestures of firing in the Doodle Jump, we first thought about making a gun shaped gesture.
Then, through our testing video, we realized that people make fist easier when they were titling their hands instead of making a gun. It was not an inconvenience that our user pointed out since we were all too engaged in the testing the games. Thank to the video evidence, we were able to come up with a better way for user interaction.
In general, getting work done is not enough for us to learn. Having a documented evidences and being able to tell the story and make reflections afterwards is more important than just delivering a product. Through the documentations and stories, we allow ourselves to go back and rethink about the process. From recognizing mistakes, we learn and grow.
Conclusion
Over the course of the semester, various design principles helped us and guided us towards our better products as well as design habits. For example, in our last project Design for the Future, I was super clear how we went from the goal of “aspirational,” making people be a better self before and after using our product, to the brainstorming of ideas to solve the problem (first diamond). Once we have a product, I was happy to see how the second diamond, or the design iterations, shaped and changed our deliverables. I am grateful that we could have an opportunity to practice the design processes and see how our projects were getting more and more mature during the semester. In fact, those principles hold true for more than making Human Centered Designs. Understanding other people, making iterations and keeping a well-documented coherent story benefited our design process and will continue to benefit our personal lives as long as we stick with what we learned in this class.
