Archive

Author Archives: Prof. Ames

Week 8

By
March 5, 2014
Class notes

This week’s inspiration

Wrap up observation presentations.

In class wrap up interviewing your peers and begin to create user profiles for each. These user profiles should highlight what you’ve learned about your peers’ use of technology, what they feel they need to have regular access to, and how connected they are to social media. These should also describe their style, products they can’t live without and any activities they regularly participate.

Week 7

By
February 26, 2014
Class notes

In class:

  • Finish watching Objectified
  • Present Observations – 5 minutes each
  • Discuss Chapters 3, 4 and 5
  • Begin interviews for Project 2

Homework

Continue interviews and begin sketching and brainstorming watch design ideas.

Cool things in the news to inspire ideas for Project 2

Week 6

By
February 19, 2014
Class notes

In class:

  • Discuss chapters 1 & 2
  • Watch Objectified
  • Attend: Networking Tips Workshop

Read: Thoughts on Interaction Design: Chapters 3, 4 & 5

  • What information can ethnographic tools give you to improve the interactivity of an online banking website? (pp. 48-54)
  • At what point is a design finished? What makes a successful design? What is the purpose of design? (pp. 54-62)
  • Identify a product family you use regularly (can be anything from technology to consumables except for coffee). How has its branding effected your use, relationship and experience with the product? (pp. 78-84)

Homework: Continue work on collecting observations and have them ready to present next week. Presentations should be formatted as either a website, poster, book, or video.

Week 5 – Critique

By
February 12, 2014
Class notes

This weeks cool thing

http://mashable.com/2014/02/12/nightbus-interactive-music-video-interlude/

 In class:

Critique final comps, and fill out assessments.

Homework:

Read: Thoughts on Interaction Design: Chapters 1 & 2
From the reading you should be able to discus:

  • What makes up interaction design and what are some of the industry’s challenges?
  • What is interaction design, how its evolving. What fields does it draw knowledge from?

Post your thoughts to the blog.

Observation Project. For two weeks simply observe how people interact with their environment and everyday object. Take between 35 and 75 photos noting what you see and identify the type of interaction: reaction, co-opting, exploiting, adapting, conforming or signalling. From your collection of notes and photos produce a simple website to share your observations.

Week 4 – User Testing

By
February 5, 2014
Class notes

In-class

Test your paper prototype for functionality and useability. Refine wireframes based on test results.

A few resources from Paper Prototyping by Carolyn Snyder

Homework

Individually, shift your focus to the Surface stage of the design process by creating final design comps that highlight three to four important pages of your site (home, product, about, etc.). These comps should be based on your groups refined wireframes using any or all of the following: photoshop, illustrator and fireworks. Include sketches of your product and any content developed in your groups. The visual design should be yours, however it must be based on the group’s architecture and wireframes.

Lastly, bring the individual parts of your process back together. Mount photocopies of your brainstorming notes, proposal (your strategy & scope), architecture, wireframes (make photo copies so everyone has the same set), and comps onto three to four pieces of black matte board. Treat this as a portfolio ready piece that will showcase the forethought and planning behind your final visual solution.

Due and ready for critique next week.

Resources for final comps

Week 3: Wireframes and prototypes

By
January 29, 2014
Class notes

In class:

  • Watch Chapter 7 of Designing Interactions
  • Short lecture on Wireframing & Prototyping
  • Individual meetings to critique proposal narratives.
  • In groups work on wireframes, then determine who will prototype what, and who will further develop content for your site. Before the end of class photocopy your wireframes so everyone in the group has the same set.

Wireframes

Moving from the strategy, scope and structure we shift onto benchmark 2, designing the skeleton for Project 1. At this stage we begin to decide where content (i.e. various levels of navigation, copy, pictures, video, forms, etc.) live on screen. This is done using wirefames. These are simple drawings that indicate what goes where. The gallery shows a few examples.

Later stage wireframes are cleaned up using photoshop or illustrator.

Paper Prototypes

Prototyping can bring a site to life without a line of code or pixel pushed across a screen. This phase of the process allow designers to test elements of their site, discover how a user might interact with it and quickly make changes. Further this can lead iterations to evolve more quickly, and help designers spot design flaws before they become bugs.

IDEO on Prototyping

The videos show two websites being tested through paper prototyping.


Project 1: Benchmark 2

Using your Structure and the wireframes created in class as a guide build a paper prototype of your entire site. A robust prototype ready for next week for user testing is due next week.

Articles and Resources:

Week 2

By
January 22, 2014
Class notes

This weeks cool thing: interactive video

http://www.instantusa.com/Devo_WWD_Full_Energy_Dome.html

Discuss Elements of User Experience

The 5 elements of user experience design:

Strategy: First we begin by defining the object/site/app/product’s purpose. What are the goals it will be trying to achieve and who those goals are for, the client or the user.

Scope: defines the features and functions that will create a complete experience, and how those features and functions will help to achieve the goals defined by the strategy.

Structure: this sets the information architecture and applies organizing principles, defines possible user behavior through use-case scenarios.

Skeleton: This element determines the form of functional elements, the navigation, and placement and layout of content.

Surface: This element gives life to any experience. Its the look, the shape, the color, the graphic design. Its the identity, the branding. Its the final polish given once all of the other elements have been accounted for.

Architecture Examples and Explanation

  • Hierarchical: RMU.edu – most informational sites use this structure to allow users to explore information based on level of importance and to dig deeper with each click.
  • Matrix: Zappos.com – most shopping sites use this, as it lets users browse based on categories, for example users may choose to look for information based on color, size, speed, age, etc. Apple.com mixes both Hierarchical and Matrix.
  • Organic: Superbad.com – sites that use Organic tend to be experimental, artistic or looking to create unexpected user experiences. Youtube.com is a mix of matrix and organic
  • Sequence: Penny-arcade.com/comic – these tend to be sites with low exploration and linear narratives as they drive the user in one direction. Often sequences may shoot out from Hierarchical or Organic architectures.

Begin Project 1.

Project 1: Benchmark 1

Using the product idea you came up with last week, define a Strategy for a web site that will sell your idea (200-300 words). What do you as the creator of your product hope to achieve through the web site, and what will your site’s users hope to get from visiting. Second, define the Scope of the site by choosing the features and functions it will have (200-300 words). Lastly, Outline a structure, aka an information architecture so that you can show how users will navigate through your site (this should be done in illustrator, photoshop or omnigraphle).

These three elements are due next week and must be ready before we move onto benchmark 2.

Useful Articles and Resources