User Interface Design and Programming - CS422 Luc Renambot - - PowerPoint PPT Presentation

User Interface Design and Programming - CS422

Luc Renambot renambot@uic.edu Yiwen 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.

• How does the machine present its capabilities to the user?
• What can the user do?
• What affordances does the machine present?
• How does the user know what to do first?
• 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