[HCDE210 — Sprint 1] Interaction Design

My prototype sketches.


In order to facilitate citizen science research of beneficial insects in Washington state, I designed a mobile app prototype that allow users to collect data by their own. My user group is nonprofessional students who are major in Biology or Environmental Science. Students will spend their time after classes to help their professors and scientists to collect data for scientific research. After brainstorming, I locked on a potential scenario: environmental scientist need to study more details about how insects benefit our environment and human beings. The flow chart drawn by my TA like shown in the picture below helps me to quickly narrow down the design ideas and organize interaction logic of my design.

TA showing us how to narrow down design considerations by drawing flow chart.

Interaction flow chart effectively helps me connect different functions in my app and clarifies the overall layout. I’m required to create a low-fidelity prototype in a time-economical way by sketching out all screens of my app, each representing a function in my app, and combining them using a prototype app called Marvel. You can find a narration video demonstrating my final design of the app using my prototype below.

Video demo of how to use my app.


At first, I didn’t found much interest in doing the low-fidelity prototype because I couldn’t draw well. After I first put my screens together on Marvel, I started enjoy this process very much. The Marvel app provides a quick and easy way for me to test my ideas and get feedback. Most importantly, low-fidelity prototype allows me to test my idea and collect feedback by showing my prototype to potential users. I showed my beta 1.0.0 to U1 and asked him to give me feedback for potential improvements that I can later integrate them in the design.

Testing beta 1.0.1 after integrating U1's feedbacks in my design.

U1 first pointed out that instead of just show nothing to the user when some clicking certain function, the app can jump to another screen indicating that this function is under construction by showing a “Coming soon” message. Then, U1 pointed out that it would make the UX better by including different kinds of transition. These feedback are particularly useful because the UX is a crucial component to motivate users continuing using an app. If they can’t get feedback after their actions, they would consider that my app crush. I personally will lose patience if there is no feedback when I click on a button. And as a user, I would like to see the screen sliding right when I press the button on the upper-left corner. I won’t be able to realize those problems by myself as a designer and receive such feedback if I can’t quickly produce a demo with Marvel’s low-fidelity prototype tool. Therefore, I truly appreciate the opportunity to learn how to use an app like Marvel to demonstrate my interaction design. In the future, I will use this tool to help my design. I believe that low-fidelity prototype will benefit my design a lot.

Future Application

The methodology behind interaction design can be applied in every domain, other than mobile application or website, involving the interaction between human and devices. The door is a great place where interaction design can shine or fail. As mentioned in the first chapter from Donald Norman’s book The Design of Everyday Things, “ A door would seem to be about as simple a device as possible. There is not much you can do to a door: you can either open it or shut it.” But image when users come to a door, they need to know whether they should push it or pull it, on it’s left or it’s right. If the door slides, users need to know in which direction they should slide it, for example, to the left, to the right, or up to the ceiling. The “Norman door” is a perfect example of interaction design. “Norman door” is defined as a poorly designed door that confuses or fails to give you an idea whether to push or pull. I found some “Norman door” at HUB in UW-Seattle campus. Below is a picture of a “Norman door” that I found online.

Why there is a handle on the door when you actually need to push it? (Source: http://regbaker.typepad.com/regs_blog/2012/10/norman-doors-and-online-questionnaire-design.html )

Though the basic desired affordance , door opening or closing, is realized, the interaction process can be described as “poor”. On the contrary, a flat plate mounted on a door fits much better into the intuitive interaction behavior of the users — they know they need to push the door. Just by pushing the plate on the door, the users will be able to realize their actions. This process simplifies the unnecessary interaction process of opening a door. By including the interaction methodology in the design process, we can easily created a better user experience.

How to simplify the interaction process has always been a problem that designers want to solve better when they are designing a new product that involves interaction activity with human.

source: https://faculty.washington.edu/dlsinfo/info200/readings/design-of-everyday-ch1.pdf

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.