1. Welcome to CS 422: UI Design and Programming!
HCI is the study of how people uses computer technologies and in turn how we can design user-friendly computer technologies. HCI drives innovation at the intersection of people and computers
Welcome to CS 422: UI Design and Programming!

2. CS 422: UI Design and Programming
Credit Hours
3 or 4
Class Time
Tuesday & Thursday, 2:00pm — 3:15pm
Class Location
Lecture Center Building C, C006

3. Who am I?
I am Prof. Debaleena Chattopadhyay. I will be your instructor for CS 422.

4. BS in Computer Science and Engineering
Ph.D. in Human-Computer Interaction
MS in Computer Science

5. hci.cs.uic.edu
I direct the UIC Human-Computer Interaction Lab. We are at SEL-W 1032.
I have been teaching at UIC since Spring 2017.

7. So what are we going to learn this semester?
User interface design, implementation, and evaluation: user-centered design methodologies, windowing systems, I/O devices and techniques, event-loop programming, user studies. Programming projects.

8. If it needs a sign, it’s probably bad design.

9. If the user can’t easily understand what they can do next, it’s probably bad design.

10. If the user is confused, it’s probably bad design.

11. Feedback in UI design is NOT overrated.

12. When designing for wearables, make it glanceable.

13. In sum…
We are going to learn the difference between good and bad designs.
What makes a design good and another bad?
How to systematically design good user interfaces?
Slide credit – Dr. Davide Bolchini

14. Why UI Design is hard? You are not the user.
Most software engineering is about communicating with other programmers—who are a lot like you.
UI is about communicating with users—who are NOT like you.
The user is ALWAYS right—usability problems are the design’s fault.
Users aren’t designers, either, and shouldn’t be forced to fill that role.

15. What is usability?
Usability is how well users can use the system’s functionality. Usability is often as important as utility of an interactive system.
Dimensions of usability:
Learnability: is it easy to learn?
Efficiency: once learned, is it fast to use?
Safety: are errors few and recoverable?
Usability dimensions vary in importance
Notice that we can quantify all these measures of usability. Just as we can say algorithm X is faster than algorithm Y on some workload, we can say that interface X is more learnable, or more efficient, or more safe than interface Y for some set of tasks and some class of users, by designing an experiment that measures the two interfaces.

16. https://www. fastcompany

17. A few minutes after announcing Miss Colombia as the winner of the pageant, the show's host, Steve Harvey, walked back on stage. He interrupted Miss Colombia, who waving to the crowd in her new crown and sash with flowers in hand.
"OK folks, uh ..." Harvey began. "I have to apologize. The first runner-up is Colombia. Miss Universe 2015 is Philippines!"

18. Usability Is Only One Attribute of a System
Others, for example, are:
Functionality
Performance
Cost
Security
Maintainability
Usability
Size
Reliability
Standards
Marketability
In this class, we’ll take an extreme position: usability will be our primary goal.

19. 5 modules on UI design and UX basics
Usability basics module
UI prototyping module
Visual design basics module
User testing module
Advanced usability module
Slide credit – Dr. Davide Bolchini

20. What is User Experience?
“Ultimately, we are deluding ourselves if we think that the products that we design are the "things" that we sell, rather than the individual, social and cultural experience that they engender, and the value and impact that they have. Design that ignores this is not worthy of the name”.
— Bill Buxton
Slide credit – Dr. Davide Bolchini

21. UI programming
Basic front-end web development (opportunities for further exploration)
Semester-long projects to design and develop a UI, could be web, IoT, voice, wearable, etc.
Software engineering experience is a pre-requisite in this course. We will provide materials to help you learn web dev basics, but software engineering will NOT be the focus of this course.

22. Syllabus Walkthrough

23. Student Introductions
Your name, enrolled program, year of study
What brings you to this class? What do you expect to learn from this class?

24. Inspiration Trails Vannevar Bush (1890 –1974)
MIT
“Memex”, trails, differential analyzer;
NSF founding father.
“Science – the endless frontier”.
“As We May Think”
SIRI Voice-based Intelligent personal assistant
Developed at Stanford Research Institute ( )
as part of the Defense Advanced Research Projects
Agency research project called CALO (Cognitive Agent that
Learns and Organizes)
Siri acquired by Apple in 2010.
Claude Shannon (1916–2001)
MIT, Bush’s phd student
“Information Theory”
“bit” as digital unit of information
Wayne Westerman
(2003) First advanced multi-touch technology
With zero-force feedback, In PhD diss. Univ. Delaware
FingerWorks Spin-off, multi-touch tablet produced
Acquired by Apple in 2004.
Westerman now chief UX architect at Apple
Ivan Sutherland (1938 –)
MIT Lincoln Labs, Shannon’s phd student
SKETCHPAD, GRAIL 1962
First man-computer graphical
communication system
Doug Engelbart (1925 – 2013)
Stanford Research Institute
The mouse, linking, “ONLINE” system;
video-teleconference, 1968.
Apple iPhone 4S with SIRI (October 2011)
Alan Kay (1940 –)
Sutherland’s student
Xerox PARC (many developments) Small Talk Graphical User Interface, (windows, pop us, menus, navigation)
Ted Nelson (1937 –)
Coined “hypertext”, and “hypermedia” (1992)
Slide credit – Dr. Davide Bolchini
Tim Berners Lee (1955 –)
CERN
World Wide Web,
http
Apple
Lisa, mac2,
post-pc
computing
Microsoft
Windows GUI

25. Great ideas are not “taught”, but inspired.
The fundamental role of academic, government-funded research in fostering innovation
Key innovations in our field were first introduced by graduate students.
Complementary role and dialogue between industry and research labs
Great ideas are not “taught”, but inspired.
They are mined by reflecting on a rich amalgamation of ingredients and constant exposure to a dynamic culture of innovation (peer-to-peer, “lab” culture).
Educating research ideas by osmosis, propagation, not deterministically programmed.
Creating and nurturing these environments is the fundamental role of design educators
“Memex”, trails, differential analyzer;
MIT
Vannevar Bush (1890 –1974)
NSF founding father
Claude Shannon (1916–2001)
“Information Theory”
MIT, Bush’s phd student
“bit” as digital unit of information
Ivan Sutherland (1938 –)
First man-computer graphical
SKETCHPAD, GRAIL 1962
MIT Lincoln Labs, Shannon’s phd student
communication system
Xerox PARC (many developments) Small Talk Graphical User Interface, (windows, pop us, menus, navigation)
Sutherland’s student
Alan Kay (1940 –)
Doug Engelbart (1925 –)
The mouse, linking, “ONLINE” system;
Stanford Research Institute
video-teleconference, 1968.
Coined “hypertext”, and “hypermedia” (1992)
Ted Nelson (1937 –)
World Wide Web,
CERN
Tim Berners Lee (1955 –)
http
Apple
post-pc
Lisa, mac2,
computing
Windows GUI
Microsoft
Slide credit – Dr. Davide Bolchini (modified)

26. “The best way to predict the future is to invent it.” –Alan Kay
So what are you going to invent? …..