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!

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

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

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

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.

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.

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

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

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

Feedback in UI design is NOT overrated.

When designing for wearables, make it glanceable.

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

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.

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.

https://www. fastcompany https://www.fastcompany.com/90157153/don-norman-what-went-wrong-in-hawaii-human-error-nope-bad-design

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!" https://medium.com/way-to-go-champ/it-s-not-steve-s-fault-miss-universe-card-redesign-c5175c0ea4a1

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.

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

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

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.

Syllabus Walkthrough

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

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 (2006-2010) 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, 1973-1980 (windows, pop us, menus, navigation) Ted Nelson (1937 –) Coined “hypertext”, and “hypermedia” (1992) Slide credit – Dr. Davide Bolchini https://home.cern/topics/birth-web Tim Berners Lee (1955 –) CERN World Wide Web, 1993-4 http Apple Lisa, mac2, post-pc computing Microsoft Windows GUI

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, 1973-1980 (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, 1993-4 CERN Tim Berners Lee (1955 –) http Apple post-pc Lisa, mac2, computing Windows GUI Microsoft Slide credit – Dr. Davide Bolchini (modified)

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