User Interface Design and Programming - CS422

Luc Renambot renambot@uic.eduYiwen Sun ysun25@uic.edu

1

Schedule

• Class

• Tuesday 12.30 to 1.45

• Thursday 12.30 to 1.45

• Room ‘A6 LC’

2

Syllabus

• CS 422: User Interface Design and Programming - Spring 2007

• User interface design, implementation and evaluation: user-centered design methodologies, windowing systems, I/O devices and techniques, event-loop programming, user studies and programming projects

• Programming

3

Other Classes

• CS 422 User Interface Design

• CS 426 Video Game Design and Programming

• CS 488 Computer Graphics I

• CS 526 Computer Graphics II

• Scientific Visualization

• CS 527 Computer Animation

• CS 528 Virtual Reality

• CS 594 GPU Programming

• CS 522 Human Computer Interaction

4

Prerequisites

• CS 340 Software Design

• If you do not have the prerequisites for this course make sure that you drop this course right away. The CS department will verify the prerequisites for all students registered in this course during the first few weeks of the term and if you do not have the prerequisites, you will be notified and dropped from the course after the normal drop/add period. By that time, you may not be able to enroll in any new course.

5

Overview

• User interface design, implementation and evaluation

• user-centered design methodologies,

• windowing systems,

• I/O devices and techniques,

• event-loop programming,

• user studies and programming projects.

6

Course

• Making a program work for you is pretty easy.

• Making it work for another user is much harder

• You need to think about the actual users of your software early in the design stage, and keep their needs in mind all the time.

7

Course

• Engineers are not trained in design and psychology and these are increasingly important in writing good software.

• People in general have a hard time sitting quietly while people criticize your hard work, but this is very important to creating a useful product

8

Course

• While this course involves using widgets to create Windows/Icon based interfaces, it is primarily about the procedures to go through to create good designs and evaluate them.

• This course is not about teaching you how to write a bunch of programs with a specific widget library; widget libraries come and go. This course is going to focus on higher level concepts of how to create useful user interfaces. As such you will be able to pick which widget library you wish to use (more or less) and will be expected to learn it on your own.

9

Course

• First we will look at good and bad design in general, independent of computer programs.

• We will look at how to effectively present information spending most of the course looking at how to effectively design interfaces.

• We will finally look at how to perform evaluation of these traditional interfaces and look at specific case studies.

10

Course

• Throughout the course there will be many opportunities for the students to present their work to others in small groups, and to the class as a whole. If you are terrified of public speaking or working in groups then this may not be the class for you.

• Similarly, if you are the kind of person that wants specific quantifiable metrics for a given grade on a programming project, then this may not be the class for you. There are many rules for creating good user interfaces and many are in direct conflict with each other, so finding the balance is as much an art as a science - that's why its hard to do

11

Assignments

• Homework

• alone

• Project 1

• team work

• Project 2

• teamwork

12

Lab

• Linux

• Lab room SEL 2250

• Assignment HAVE to work on these machines

• Windows

• ACCC SEL 2265, SEL 2058

• Own machine (home, laptop)

13

Lab

• Assignments should work on Linux, on CS machines

• You can still develop on your own plateform (win, mac, ...)

14

Programming

• For the assignments in this class you have a choice of user interface toolkit that you wish to use

• Good options are Swing for Java, fltk for C or C++, or wxWidgets for a c++ or Python.

• The limitation is that we need to be able to check your program on the CS department linux machines on the second floor of SEL.

15

Books

• Designing the User Interface 4th ed.

• Ben Schneiderman, Catherine Plaisant

• ISBN 0321197860

16

Books

• Designing Visual Interfaces

• Kevin Mullet, Darrell Sano

• ISBN 0-13-303389-9

17

Books• Don Norman The Design of Everyday Things

• Don Norman Things that Make Us Smart

• Mullet, Sano Designing Visual Interfaces

• Ben Schneiderman Designing the User Interface 3rd ed.

• Card, Moran, Newell The Psychology of Human-Computer Interaction

• Dix, Finlay, et al Human Computer Interaction 2nd ed.

• Laurel The art of human computer interface design

• Richard Saul Wurman Information Anxiety

• Richard Saul Wurman Information Architects

• Edward R. Tufte The Visual Display of Quantitative Information

• Edward R. Tufte Visual Explanations

• Edward R. Tufte Envisioning Information

• Will Eisner Comics and Sequential Art

• Andre Balland Catalue D'Objets Introuvables (currently out of print)

18

Plan

• Introduction & Design of Everyday Things

• Information Exploration & Presentation Styles

• Principles & Golden Rules

• Interaction Devices & Direct Manipulation

19

Plan (cont.)

• Project 1 discussions and presentations

• Elegance & Simplicity / Scale, Contrast & Proportion

• Organization & Visual Structure

• Teams presentations (2 classes)

• Module & Program

20

Plan (cont.)

• - - - Spring Break - - -

• Image and Representation

• Evaluation Techniques and In/Reducing Sickness

• Collaborative Interfaces and More Exotic UIs

21

Plan (cont.)

• Team Presentations (2 classes)

• Final

22

Office

• Me

• Office hours: 1:15 - 3:00 Tuesdays and by appointment

• 2032 ERF

• Teaching Assistant

• Yiwen Sun ysun25@uic.edu

23

Next Class

• Thursday Jan. 25

• Homework due

24

Homework

The purpose of this assignment is to give you a bit of practice with the material presented in the first week of the class - the design of everyday things.

* find a vending machine on campus or surrounding

* note down where it is located and what kind of machine it is (pop, coffee, snack, postage stamps, DVD, CTA, etc)

* think about how the user interacts with the vending machine.

o How does the machine present its capabilities to the user?

o What can the user do?

o What affordances does the machine present?

o How does the user know what to do first?

o What kind of feedback does the vending machine give to tell the user about its state?

25

Homework

* draw a 1 page sketch (by hand, no photography allowed) of the vending machine, stressing the user interface details (what does the user see, what can the user press, what is the mapping, etc)

* redraw the sketch using a computer and make a printout of it (no scanning allowed)

* type a 1 page (8.5 x 11", 10 point font, single spaced) discussion of what is good and what is bad about the interface. Be sure to include your name at the top, and the information on the vending machine itself.

Turn in your sketch, the redrawn version, and the 1 page discussion, stapled together.

26