User Interface Design and Programming - CS422. Luc Renambot Yiwen Sun

Transcription

1 User Interface Design and Programming - CS422 Luc Renambot renambot@uic.edu Yiwen Sun ysun25@uic.edu 1

2 Schedule Class Tuesday to 1.45 Thursday to 1.45 Room A6 LC 2

3 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

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 Assignments Homework alone Project 1 team work Project 2 teamwork 12

13 Lab Linux Lab room SEL 2250 Assignment HAVE to work on these machines Windows ACCC SEL 2265, SEL 2058 Own machine (home, laptop) 13

14 Lab Assignments should work on Linux, on CS machines You can still develop on your own plateform (win, mac,...) 14

15 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

16 Books Designing the User Interface 4th ed. Ben Schneiderman, Catherine Plaisant ISBN

17 Books Designing Visual Interfaces Kevin Mullet, Darrell Sano ISBN

18 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 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) Richard Saul Wurman Information Anxiety Richard Saul Wurman Information Architects 18

19 Plan Introduction & Design of Everyday Things Information Exploration & Presentation Styles Principles & Golden Rules Interaction Devices & Direct Manipulation 19

20 Plan (cont.) Project 1 discussions and presentations Elegance & Simplicity / Scale, Contrast & Proportion Organization & Visual Structure Teams presentations (2 classes) Module & Program 20

21 Plan (cont.) Spring Break Image and Representation Evaluation Techniques and In/Reducing Sickness Collaborative Interfaces and More Exotic UIs 21

22 Plan (cont.) Team Presentations (2 classes) Final 22

23 Office Me Office hours: 1:15-3:00 Tuesdays and by appointment 2032 ERF Teaching Assistant Yiwen Sun 23

24 Next Class Thursday Jan. 25 Homework due 24

25 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

26 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