CS 349: User Interfaces https://www.student.cs.uwaterloo.ca/~cs349 - PowerPoint PPT Presentation

CS 349: User Interfaces https://www.student.cs.uwaterloo.ca/~cs349 Gustavo Fortes Tondello Spring 2017

Another Way to Think About This ▪ This is what a user-interface looked like before the early 1980s: 3 CS 349 - Introduction

4

5

Computing in the 1980s 6 CS 349 - Introduction

Computing Today 7 CS 349 - Introduction

2015 The introduction of s 2010 iPad graphical user e c a f r interfaces e t 2005 n I r fundamentally e s U iPhone l changed our a 2000 c i h p interaction with iPod a r G 1995 technology WWW 1990 s e c a f r e 1985 t n I l a n o Macintosh i 1980 t a s r e IBM PC v n 1975 o C Apple II 1970 Intel 4004 Microprocessor ARPANET Batch Interfaces 1965 1960 1955 1950 1945 ENIAC 8 CS 349 - Introduction

How Has Computing Changed? 40 years ago Today Who used a computer Specialist Everyone What they knew about the computer Lots Little How they learned to use a computer Reading operators Tinkering manuals Where they found the applications Built them App store, web that ran on the computer How many different computers they Maybe one Many! would have interacted with during the course of their day Primary mode of interaction Punch-cards, Graphical, command-line, touch, speech menus 9 CS 349 - Introduction

What is a User Interface? ▪ Maybe, “the human’s view of the computer” ▪ Maybe, “the place where humans and computers meet” 10 CS 349 - Introduction

Definition: User Interface ▪ A user interface is the place where a person expresses intention to an artifact, and the artifact presents feedback to the person. ▪ Essentially, it’s the way that people and technology interact. express intention presents feedback artifact person 11 CS 349 - Introduction

User Interfaces A user interface is the ▪ Does a microwave have an interface? place where a person ▪ A refrigerator? expresses intention to an artifact, and the ▪ A door bell? artifact presents feedback to the person. ▪ A hammer? ▪ A jet? 12 CS 349 - Introduction

Interactive System Architecture 14 CS 349 - Introduction

Interactive System Architecture User Interactive System mental system model model present feedback express intention 15 CS 349 - Introduction

Interactive System Architecture User Interactive System mental system model model perceive present express translate 16 CS 349 - Introduction

Model-View-Controller (MVC) present View notify perceive mental system Model model model express change Controller translate 17 CS 349 - Introduction

Graphical Temperature Control 30 20 draw widget 10 present View value changed notify perceive temperature max = 30 ° is colder temp = 18 ° Model than usual min = 10 ° express change mouse Controller change temp to translate movement 20 ° Event: "An observable occurrence, mouse Event: "A message to notify events phenomenon, or an extraordinary an application that something occurrence" happened" 18 CS 349 - Introduction

Speech Temperature Control text to speech “Temperature present View is 18 degrees.” notify perceive value changed max = 30 ° temp temp = 20 ° Model is 18 ° min = 10 ° express change “Set temperature Controller change temp to 20 ° to 20 ° degrees.” translate speech recognition 19 CS 349 - Introduction

Interface vs. Interaction ▪ What is the difference between an interface and interaction ? ▪ Interface refers to the external presentation to the user - Controls (what you can manipulate to communicate intent) - Visual, physical, auditory presentation (what the program uses to communicate its response) ▪ Interaction is used to connote behavior: The actions the user must invoke to perform a task and the corresponding responses - Interaction is action and dialog - Unfolds over time 20 CS 349 - Introduction

Interface and Interaction Design ▪ What is the interface? ▪ What is the interaction? ▪ Why is interaction design so hard? 21 CS 349 - Introduction

Interaction Design ▪ Challenging because of variability in users and tasks - Varying levels of expertise among users - Often a range of tasks will performed with the same tool (i.e. tools can be generic) – can you anticipate all uses and scenarios? ▪ No one “right way” to design an interface; interfaces can always be improved. ▪ Pushing technology “forward” requires us to rethink interaction. - Emergence of UX as a discipline 22 CS 349 - Introduction

Why Study Interaction? Empowering People ▪ Well designed interfaces empower people to do things they couldn’t otherwise do - Desktop publishing, grassroots journalism (blogs), movie production, music production, image editing, assistive technologies… ▪ Interaction is the key to enabling new technologies - Multi-touch and gestures on smartphones - Voice interfaces for cars, watches - Touch screens on tablets, notebooks ▪ A well designed tool can change the world - The web browser, Linux, original Napster, the spreadsheet, email, instant messaging… 23 CS 349 - Introduction

UI development jobs ▪ ‘UI designer/developer’ or ‘Front - end developer’ - Focused specifically on UI – usually on a web applications context ▪ ‘Application developer’ or ‘Software developer’ or ‘Full -stack developer’ - Works on all aspects of software development, including UI ▪ ‘Mobile developer’ - Focused specifically on mobile apps, including UI ▪ ‘UX (user experience) designer’ (CS 449) - Focused on understanding the user needs and designing the experience (usually focusing on the interaction, not on the visuals) 24 CS 349 - Introduction

UI development jobs Source: https://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/ 25 CS 349 - Introduction

UI development jobs Source: http://www.uxbeginner.com/how-to-navigate-the-ocean-of-ux-job-titles/ 26 CS 349 - Introduction

Syllabus What to expect How to be successful in this course! Next steps

CS 349 Objectives The goal of CS 349 is to teach you: 1) how to design, implement, and evaluate user interfaces - provide the foundational knowledge for building highly interactive, usable desktop, web and mobile applications - illustrate the underlying architecture of modern GUI toolkits - teach strategies applicable across a range of interface problems - teach essential design tools, techniques, and processes 2) ways to understand users - physical and cognitive abilities of users - visual design principles User-centered design is covered more extensively in CS 449 . 28 CS 349 - Introduction

29

List of Topics ▪ Undo/Redo; Cut/Paste; Drag/Drop Syllabus and Basic Concepts ▪ ▪ Mobile UI implementation History ▪ (Android) ▪ Design principles ▪ Web UI implementation (HTML + Visual design ▪ CSS + JavaScript) ▪ Design process ▪ Responsiveness Windowing Systems ▪ ▪ Touch interfaces Implementation of GUIs in Java ▪ ▪ Touchless interfaces ▪ Events (dispatch and handling) ▪ Wearables ▪ Gamification UI Widgets ▪ ▪ Visual perception and cognition ▪ Model-View-Controller ▪ Accessibility framework (MVC) ▪ UI evaluation 2D graphics ▪ ▪ UI Layouts Input and Input performance ▪ ▪ Direct manipulation 30 CS 349 - Introduction

CS349 People ▪ Instructor: - Gustavo Fortes Tondello (gfortestondello@uwaterloo.ca) ▪ Instructional Support Coordinator (ISC): - Caroline Kierstead (ctkierst@uwaterloo.ca) ▪ Instructional Assistants (IAs): - Jingjie Zheng - Terence Dickson ▪ Teaching Assistants (TAs): - Dallas Fraser - Jeremy Hartmann - Qi Feng (Edmund) Liu - Shaishav Siddhpuria - Will Callaghan 31 CS 349 - Introduction

Website, Schedule, Textbook ▪ Web Site: www.student.cs.uwaterloo.ca/~cs349/ ▪ Schedule on website - lecture topics, slides, sample code - assignment & midterm dates ▪ Slides posted before class - Lectures may include more than what is covered in the slides ▪ Textbooks - useful but not required! - Building Interactive Systems , Dan R. Olsen Jr. - The Design of Everyday Things , Donald A. Norman - Designing with the Mind in Mind , Jeff Johnson 32 CS 349 - Introduction

Lectures Days Time Room ▪ Mon, Wed, Fri 8:30-9:20 MC 2034 Gustavo ▪ Mon, Wed, Fri 11:30-12:20 MC 2038 Gustavo We’ll attempt to keep both sections in -sync; if you miss your scheduled lecture, you have other chance to catch it! During lectures: ▪ Participate by asking and answering questions ▪ Try and limit computer use for anything other than taking notes and trying the code examples yourself. 33 CS 349 - Introduction