Assignment:100 Things Every Designer…

By now you have read the first 5 sections of your book “100 Things Every Designer Needs To Know About People”. I hope it was an interesting and illuminating read.

Your assignment is to choose three of these “things” and tell me how you are using that knowledge in designing your app. Write a paragraph or two mentioning which “thing” you are using, what it means and how it applies to your project. Add a screenshot of your design to demonstrate your point. Save the file as a pdf and turn it in into the public folder when you turn in Milestone 5. This is part of your personal grade.

Example (assuming I am designing for Surveymonkey.com):
#4 There is a Special Part of The Brain Just for recognizing Faces
People respond to faces faster than anything else and people have the tendency of following the gaze of any face on the screen. For our app, surveymonkey.com, I chose to use a woman’s face as the main focus; she is looking at the description of how the app works, to attract attention and ultimately persuade visitors to sign up.

surveymonkeysmall

Example (assuming I am designing for change.org):
#33 People Process Information best in Story Form
People respond to stories in a strong way, because it is how we all process information. Stories are powerful, especially if associated to pictures. Stories are persuasive, memorable and a helpful tool in understanding difficult information. For our app, change.org, we used success stories to create a personal connection and to demonstrate the power of our app.

change_story

Midterm – Staples Form Redesign

The objective of your midterm is to make this checkout process as usable and pleasant as possible (assume the user arrived here by clicking “check out”) , using the techniques and user test data we talked about in class. Build your design in Photoshop. Get inspired by looking at great forms.

You may add, remove, change, style, and reword anything on the pages. However, do not arbitrarily remove info because it would ruin your design, and pay attention to legally required text.

Make sure to include all necessary information to successfully complete the transaction. You can condense the form in one page or expand it to multiple pages. You are responsible for all parts of the page(s) below the top level navigation. You may want to include the branding on top. Feel free to include any tips or in-line validation as you see fit. Finally, add the final page (confirmation) users would see after they click the Submit Order button. Account for any errors that may occur as they click the Submit button.

Include:
1) all the steps from when the user clicks Check Out to the end
2) confirmation page
3) error page

Turn in your design by turning in a pdf. Write a paragraph or two explaining what was wrong with the original design, and what you did to improve it. You will present your solution to the class, explaining how you have improved the check-out experience.

  Staples Check out Page 2

 

Day 11- Wireframes

Reading Assignment:
• How people Focus their Attention from 100 Things Every Designer needs to Know about people (section #4)

Day 7 – Psychology and Interaction Design

Reading Assignment:
• Section 2-3 of Seductive Interaction Design (pg.55-143)
• How people Remember, How People Think from 100 Things Every Designer needs to Know about people (sections #3-4)

12+2 patterns of HCB Assignment

We learned in class about twelve patterns of HCB. To illustrate your understanding of the topic, I want you to find a site/example that show each of the patterns. Below you will find a recap of the main 12 patterns. Make sure to include also the two new patterns (personal recommendation and microbreaks).

Specs

  • For each of the 14 patterns, find one web app that supports the behavior well.
  • Do not use the examples we talked about in class – you will have to do some critical thinking and hunt around.
  • Take a screenshot illustrating the good design, save as a jpg or png, and place a full sized version in a document, preferably a pdf. Google Doc is OK, as long as it looks professional and it is shared with me.
  • Write a few sentences about how the interface supports the pattern.
  • Remember some sites may cater to more than one pattern

When you are finished, share the doc with tiziana@platt.edu (with permission to view, do not send as email attachment!) or place a pdf in the class shared folder. This is part of your individual grade.

You can see an excellent example from a previous student, Alex Blundell, here. While I may not agree completely with each of his choices, it is a great example of how you should complete this assignment.

Paper Prototyping Videos

We have talked about paper prototypes and testings. Below I am attaching the examples of usability tests done with paper prototypes. I also added an example of testing from a previous student group. Thank you to Kong and Juanita for sharing this.


short example of a web interface usability test


example of a children site usability test


example of a mobile app usability test


example of cultura, a mobile app usability test


example of a kiosk usability test


Kong and Juanita’s paper prototype testing