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

Slides based on Jeff Avery’s

Hanae Rateau Spring2020

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

• r 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 (input) and the

system responding with feedback (output)

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

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

• All material and information can be found on the website :

https://www.student.cs.uwaterloo.ca/~cs349/s20/index.html

• All lectures are on video. For some lectures, code demo and video

tutorial will be available on the website.

• If you have any questions regarding the lectures, I will host short Q&A

sessions once a week. You will be able to ask lecture related questions.

34

Evaluation

20% Final Quizz 70% Assignments

• A1 (15%)
• A2 (25%)
• A3 (30%)
• A4 (30%)

10% Quizzes We will introduce Java and Android programming in-class, but you’re expected to learn on your own. Online quizzes will be available on the website. 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

• This is optional but recommended as it has benefits:
• Improves learning
• Important skill even as a professional developer
• 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

• No Office hours but the TAs and I will have Piazza slots to answer

questions there. 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

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.