CS 349: User Interfaces This course focusses on creating user - - PowerPoint PPT Presentation

CS 349: User Interfaces

This course focusses on creating user interfaces (UIs), including underlying UI architecture and algorithms, practice implementing UIs using frameworks, and theories and methods relevant to interface design. https://www.student.cs.uwaterloo.ca/~cs349 Jeff Avery Gustavo Tondello Winter 2020

We’re experts with technology. This might be how we see a “computer”. What about the rest of the world?

2

For many users, this is a computer – it’s something they use to solve a problem or perform a task.

3

This is a course about “User Interaction”

§ Interaction is the process where a person expresses some intention to an

application, and the application presents feedback to the person.

4

User Interface

How does this relate to user interfaces?

§ Interaction refers to actions by user and system over time

• Interaction is a dialog between the user and system
• Alternates between the user manipulating controls and the system

responding with feedback

§ A User Interface refers to the external presentation to the user that

supports this

• Controls (what you can manipulate to communicate intent)
• Feedback (what the program uses to communicate its response)

In this course, we’re concerned with building efficient graphical interfaces to support interaction.

5

17 Introduction

Apple Macintosh (1984)

Apple’s Macintosh (Jan 1984), brings the GUI to the masses

18

Apple Macintosh: 1984 Windows 1.0: 1985 Commodore Amiga (1985) Windows 95: 1995

19

Computing Today

22

Modern GUI

Interfaces remain graphical and based on the original GUI paradigms. A GUI does not have to look like Windows or macOS, or rely on mouse/KB

• WIMP (Windows, Icons, Menus, Pointers) is a familiar paradigm

23

Touch interfaces

Haptic interface Apple iPhone Multitouch wall Smartwatch

24

Gestural interface

“MYO armband” (2013) “Kinect” (2010) “Leap Motion” (2012)

25

Voice interface

Apple HomePod Google Home Amazon Echo

26

Why Study HCI?

§ Well designed interfaces empower people to do

things they couldn’t otherwise do

• Movie production, music production, image editing,

assistive technologies, …

§ A well-designed tool can change the world

• The web browser, Linux, iPhone, spreadsheet,

email, instant messaging, git, live streaming, …

• Smartphones, tablets (multi-touch)
• Voice agents (voice)

§ For many people, the UI is the computer.

• Building effective UIs makes computers compelling

and useful for many, many people

28

UI development jobs

§ ‘UI designer/developer’ or ‘Front-end developer’ (CS 349)

• 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’ (CS 349)

• 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)

CS 349 - Introduction 29

UI development jobs

CS 349 - Introduction 30

Source: https://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/

(CS 349) (CS 449)

UI development jobs

CS 349 - Introduction 31

Source: http://www.uxbeginner.com/how-to-navigate-the-ocean-of-ux-job-titles/

(CS 349) (CS 449)

Syllabus

What to expect How to be successful Next steps

Goal

§ The focus of this course is on building user-interfaces. § Our overall objective is to teach you to build compelling and useful user-

interfaces, across a variety of platforms and devices.

Learning Objectives

§ Understand the architecture, algorithms and design principles underlying

common user-interfaces (and UI frameworks)

§ Demonstrate the ability to implement a compelling and useful UI on both

desktop and mobile platforms.

§ Articulate and use basic theories and methods for UI design. § Leverage Human-Computer Interaction research directly related to building

user-interfaces.

33

Lectures

§ No textbooks! § Lectures include slides, videos, code demos.

• Slides and demo code will be posted before lectures.
• Not all course content will be on the slides. I will explain things in greater

detail than is presented on the slides.

• Anything discussed in class is testable (unless stated otherwise)

§ Laptops and tablets should be used to:

• View lecture slides and take your own notes
• Look up content related to lecture
• Try sample code

§ During lecture, please do not:

• Watch movies with the volume turned up
• Work on assignments for other classes

34

Evaluation

30% Final Exam 70% Assignments

• A1 (10%)
• A2 (15%)
• A3 (15%)
• A4 (15%)
• A5 (15%)

We will introduce Java and Android programming in-class, but you’re expected to learn on your own. Assignments are your own individual work

• No group assignments!
• We use MOSS automated plagiarism detection. If you copy or share

code, we will catch you.

35

Assignment Self-evaluation / Instructor Evaluation

Introduction 36

Self-evaluation

§ Totally optional, but recommended for the following benefits:

• Improves learning
• Is an important skill for effective learning and professional development
• Will tell you what you need to improve in your implementation
• Will tell you in advance what your assignment grade will likely be
• Can help the TA mark your assignment faster and avoid the need for

remark requests

§ However:

• The TA will take your self-evaluation in consideration, but their

assessment may be different

• The instructor (TA) evaluation will be the one used for your course grade

calculation

Getting Help

Web Site: www.student.cs.uwaterloo.ca/~cs349/

§ Schedule with topics, lecture notes, sample code, recommended reading § Office hours for lecture and assignment help

Office Hours

§ 1-2 hours of office hours every day (details TBD) § Help with assignments, clarification on course material

Piazza: https://piazza.com/uwaterloo.ca/winter2020/cs349

§ Announcements, Q&A about course material and assignments § Sign up and use your real name (it helps us to help you) § Answer questions, but don’t be too explicit - do not post assignment code! § Staff will monitor - best-effort response, but no time-guarantees

37

What Next?

Introduction 38

• 1. Check out the website: student.cs.uwaterloo.ca/~cs349
• 2. Register on Piazza: piazza.com/uwaterloo.ca/winter2020/cs349
• 3. Check out the sample code and slides.

§ `git pull’ the starter code and slides. § Details on the website

• 4. Try A0

§ Install of Java 11, Git 2.x and IntelliJ 2019.3. § Run samples to make sure everything is configured properly.