Grids & building blocks
What we see when we look at a website.
Guest Speaker: Matthew Diaz, User Experience Analyst, The New York Times
- Guest lecture on user experience. Slides
- Class discussion on group projects.
- CSS Layout: margins, padding, borders, floats
- Lab session: Recipe layout
Layout example: http://tysone.github.io/2014-columbia-projects/Josh_Keller/week3/layout.html
Individually (Due Tuesday, Feb. 11)
- Exercise: Layout the cookie recipe and a second recipe of your choosing using the layout properties we talked about in class. Add a second recipe and display the two recipes side by side. Make sure to use the following CSS properties: margin, padding, border, and float.
With Group: (Due Tuesday, Feb. 11)
- Evaluate the mobile, phone-optimized site of your assigned site. You can choose either the mobile site (i.e. HuffPo Mobile Web) or native app (HuffPo for iPhone). Diagram screenshots in a Google Doc, similar to the desktop Web site. List the major differences in functionality, content and presentation in a separate Google Doc.
- Start a list of hypothesis of potentially problematic or effective design decisions or behaviors, based on your diagramming and behavioral analysis. What assumptions is the site making that might be justified or found questionable when you interview users? What are the speed bumps, dead-ends, “invisible” or incomprehensible aspects of the page? These could be issues of prominence, language/labeling, navigation, interaction, advertising integration, etc.
- Begin a draft of your user research script. What 3-5 activities should your participants attempt? What should be tested on the desktop vs. mobile? Write a step-by-step outline of the URLs, prompts and directed questions you might use.
- Start a draft of your interview script. What questions about your users, their expectations and goals might you ask them?
- Brainstorm where, how when and with whom you’ll conduct research interviews. Check out the Silverback app or think about what recording devices (iPhones, Macs with cameras) and setups you might use.
- Create a single Google Doc with your hypotheses, research script and possible interview questions.