CS 256

Designing the User Experience

Designing effective computing experience for people requires the ability to:
  1. Create solutions for real problems that people encounter,
  2. design a computing experience that is visually and interactively pleasing,
  3. iteratively refine design prototypes.
The course is taught in a design studio format. Most of the concepts are taught via readings or videos rather than lecture. Students will work both individually and in teams to solve design problems. Most of class time will be devoted to critique and discussion of student work.
text materials
There is no specific text required. There are a number of readings and video lectures. These are listed on the calendar on the day they are due.

You are required to have:

  • a laptop for use in class
  • a copy of Microsoft Office on your laptop
  • a good quality sketch book (about 8" x 10")
  • some 2H and 4B drawing pencils, erasure and pencil sharpener

The above items should be brought to every class.

There are a variety of videos and mini-lectures for learning the skills involved. These will replace traditional class lecture. You will find them here.

For those of you who are interested in additional reading in this area, here is my list of favorites.

Useful tools

Here are a set of tools that are free and can be of use to you in the class. A lot of free stuff can be downloaded from sites that add a lot of adware to your computer. I have tried to locate original sources that do not have the adware.

Firebug This is a debugging tool that will let you look at your JavaScript and HTML while your code is running. It also provides a JavaScript debugger that lets you set breakpoints and single step through your JavaScript.

NotePad++ This is a free editor that will edit HTML and JavaScript and provide you with a lot of help in both of those languages.

GIMP This is a free image editor. It is not as nice as PhotoShop, but it has a lot of features and all of the ones you will need for class.

LearnSpace We will use this extensively to share student work on the screens at the front of the class.

VLC This is a free video player. Its value for this course is to view the assigned videos at a higher speed than normal. Many students like to listen faster and then rewind to catch anything they miss at the higher speed.

CamStudio This software will record videos from your screen. It is one way to make a variety of videos and demos to show to users.

Topic for the day Study assignments (complete before day listed) Projects due
1/5 Class introduction - User Experience Design HTML Assignments --
1/7 Teamwork, LearnSpace, Critique process Teams, LearnSpace (6:20), Critiques, PowerPoint Intro (9:40) --
1/12 Inquiry, observation, interview Contextual Enquiry Guidelines, Contextual Inquiry Intro (30:30), Effective Slide Design (8:10) Basic HTML
1/14 Critique of Observation User Problem Selection
1/19 Holiday
1/21 Group inquiry planning Contextual Inquiry (Slides 28-42), Culture and Flow Models (13:00), Affinity Grouping (5:30) Basic CSS
1/26 Critique of observations and synthesis -- User Observations
1/28 Diverge, evaluate, converge process Diamond Innovation Process, Idea Generation, Generating Innovative Solutions Idea Generation
2/2 Critique of design process Storytelling and UX Design (13:10), Pencil and Paper Sketching (13:15) Basic JavaScript, Team Design Ideas
2/4 Sketch and storyboard the experience Screens and Devices (9:40), People (13:00), Hands (15:40) Sketching
2/9 Critique of design results Video from PowerPoint, Casts and Props in PowerPoint (15:05) JavaScript(2), First Solution Design Critique
2/11 No Class Using Casts and Props in UX Stories (15:10) Individual Storyboards
2/16 Holiday
2/17 Human Perception Human Input/Output (9:20), Human Vision (14:00), Vision and the UI (14:00)
2/18 Spatial design Spatial Design (38:50) JSON, Complete Solution Design report due
2/23 Critique of team problem choice -- Problem Select and Feature Generation
2/25 Interaction design Wireframe Designs in PowerPoint (21:50) Layout in HTML
3/2 First critique of proposed UI designs Simple Widget Design (7:40), Fancy Widget Design (22:50) Wireframe Design
3/4 Color and Mood Color and Mood (17:00), Color Models (14:20), Color Scheme Design (18:30), Texture and Gradients (7:30) Peripheral Vision Analysis
3/9 Second critique of proposed UI designs and evaluation -- Wireframe in HTML, Design Mockups
3/11 User Evaluations -- Color Scheme Designs
3/16 Third critique of proposed UI designs and evaluation results -- Design Evaluations
3/18 Visual Refinement (emotionally reach the user) -- Drag and Drop in HTML
3/23 Model, View, Controller Architecture --
3/25 Data Persistence --
3/30 Final critique of prototypes -- Present your prototype on the screen using laptop
4/1 Team work on design/prototypes --
4/6 User testing -- Other teams test your prototype in class
4/8 Selection Theory --
4/13 Final Demo --
(Sec 1 - 18 April,2:30-5:30PM), (Sec 2 - April 22, 11-2) Final Exam -- Final Report
Quizes on Reading/Videos - 15%

You are expected to be in attendance at class every day and to be prepared. Most of the basic skills and normal lecture content you will need to acquire outside of class. Classroom time is reserved for discussion of ideas and a critique of your work. If you are not prepared with the basic skills and concepts, this time will be wasted. There are a variety of videos, web pages and other materials that will be provided to help you prepare for class.

Short quizzes will be given at the beginning of many class periods. They will cover the study materials assigned for that period. The grade in this area will be designed to ignore the lowest two scores (life happens). However, plan to be present in class and prepared. You can have one page of notes (one side) while taking the quiz.

Individual Skill Assignments - 25%

There are a variety of skills that you will need to know such as how to create a design in PowerPoint, how to develop an interactive prototype using JavaScript and HTML5, how to capture a video of a user and edit that video for presentation, how to build a color scheme, a mood board, a balanced visual design, how to critique the color and grayscale of a design, etc. These are basic skills that each student must have. There will be a number of individual projects to assess these skills. All of these will be submitted through Learning Suite. Do not email them to the TA or the instructor.

These projects are late as of 30 minutes before class time on the day they are due. You will lose 10% for each week they are late for a maximum loss of 40%.

All written reports are submitted in Word and should be single-spaced 12 point.

Team Projects - 45%

There will be a several team projects. Everyone in the team receives the same grade. The expectations for each project are given on that project's assignment page.

All written reports are submitted in Word and should be single-spaced 12 point

Team Evaluations - 15%

Multiple times through your team experiences, you will be asked to evaluate the contributions of your team members. These evaluations will be on

  • Overall value and contribution to the team
  • Hard work and timely contributions
  • Willingness to cooperate and work with others.

After the first evaluation there will be personal interviews between the instructor and each class member to go over your performance on these evaluations.