CS349 User Interfaces

vermontdroningMobile - Wireless

Dec 10, 2013 (3 years and 4 months ago)

192 views

CS349 User Interfaces
Introduction
2
3
Welcome to CS 349 User Interfaces
!

Instructor: Daniel Vogel
!

Lectures:
-

9:30 - 10:20 MWF MC 2017
-

2:30 - 3:20 MWF MC 2035
!

Midterm Exam:
-

Friday, June 21, 4:30 PM - 6:20 PM in M3 1006

CS 349 - Introduction
4
Course Goals
1) how to
implement
user interfaces
-

Provide foundation for you to be able to build highly interactive,
usable applications
-

Expose you to underlying architecture of modern GUI toolkits
-

Teach a set of strategies applicable across a range of interface
problem types
2) Understanding
users
and
design
-

physical and cognitive abilities of users
-

visual design principles
-

essential design tools and techniques
NOTE: How to design novel interactive systems using a user-
centred
approach is covered in CS 449.
CS 349 - Introduction
5
6
Website, Schedule, Textbook
!

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

redirects to
http://cs.uwaterloo.ca/~dvogel/teaching/cs349s13/


!

Schedule on website
-

topics, lecture notes, assignment dates, midterm dates, tutorials
!

Recommended Textbook
-

Building Interactive Systems, Dan R. Olsen Jr.
-

On reserve in DC library
CS 349 - Introduction
7
Assignments
Assignments meant to provide meaningful, engaging
experiences in constructing interfaces…
…while giving you the opportunity to create applications you
will want to share with others.
!

Lots of room for creativity in assignments
-

Will have a component for going above and beyond the spec
-

Marking is inherently subjective
!

Assignments require signi

cant time coding
-

Do not underestimate the time it takes to code interactive
applications that are intuitive and easy-to-use
CS 349 - Introduction
8
Assignments
!

A01: Event Loop and Drawing (X Windows)
!

A02: Direct Manipulation (Java)
!

A03: Model-View-Controller (Java)
!

A04: Mobile Development (Android)
CS 349 - Introduction
9
Assignment Policies
!

Assignments must compile/execute in virtual machine (VM)
-

A1 is C/C++ X Windows
"
Linux VM
-

A2, A3 are Java
"
Linux VM

-

A4 is Android
"

Android VM
(possible to code outside of VM, but you
must
test in VM)
!

Due dates: Friday @ midnight, dates in schedule
-

Will accept until 11:59pm Sunday
!

Submission is via Subversion (SVN) source code repository
-

Enrolled students will receive an email with username/password
-

SVN workshop scheduled next week
CS 349 - Introduction
10
Assignment Policies
!

Assignments are your individual work
!

Feel free to use:
-

Examples provided in class and on the course website
-

Examples/tutorials linked from Resources Page
!

You should NOT be doing general Internet searches for
more speci

c solutions
-

BUT I will try to make assignments su

ciently challenging that
you will need to do signi

cant UI development
CS 349 - Introduction
11
Grading
!

Assignments: 40% (10% each)
!

Midterm: 20%
!

Final: 40%
!

Must pass weighted exam average to pass the course
!

Must pass weighted assignment average to pass the course
CS 349 - Introduction
12
Tutorials


!

SVN (week of May 13)
!

Java (week of June 3)
!

Android (week of July 15)
CS 349 - Introduction
13
Online Questions and Answers
!

Use Piazza for questions and answers
!

Enrolled students will receive an email invitation soon
!

Please enroll with a meaningful name
!

Guidelines...
-

Search before you post
-

Use a meaningful title
-

Answer questions, but don’t be too explicit
-

Build one collaborative answer rather than many follow-ups
!

I try to log in once per teaching day (may be evening)
-

TAs will be on-line more often
CS 349 - Introduction
14
Responsibilities
!

Mine...
!

Yours...
CS 349 - Introduction
15
Next Steps
!

Explore the web site
!

Get signed up for Piazza
!

Set up for A01
-

Install
VirtualBox

-

Download CS349 VM on website
-

Install the appliance; test it


Your machine should have at least 1G RAM
-

Your machine:
Need X windows/libraries,
gcc
compiler,
svn
client
You must test on the VM
CS 349 - Introduction
16
A Note On VirtualBox
!

How many of you have used
VirtualBox
?
!

Occasionally (but rarely)
VirtualBox
crashes and you lose
your entire home directory
!

Two Suggestions
-

Use SVN frequently to back up your work
Other bene

ts …
-

Map a directory on your computer to a subdirectory in your
home directory on
VirtualBox
, then use that as your working
directory.
CS 349 - Introduction
17
Questions?
CS 349 - Introduction
18
computer
19
20
Buxton (2001)








User Interface
!

The place where humans and computers meet
!

The human's view of the computer
What is a user interface?
What isn’t a user interface?
CS 349 - Introduction
21
De

nition: User Interface
!

A user interface is the communication methods by which a
person
expresses intention
to an artifact, and the artifact
presents feedback
to the person.
person
artifact
express intention
presents feedback
CS 349 - Introduction
22
User Interfaces
!

Does a microwave have an interface?
!

A refrigerator?
!

A door bell?
!

A hammer?
CS 349 - Introduction
23
User Interface Code
!

How much of an interactive application’s source code is
dedicated to user interface concerns?
-

In 1992, 50% of application code was estimated to be UI code
-

In 2006, 88% of GIMP’s 2,000

les had dependencies on the UI
toolkit
-

33% of Java 1.5’s “.java” source is in a UI package.
!

More generally, a time issue
-

Backend can be specced; frontend = tweaking
!

Conclusion: UIs account for a lot of the code in a modern
application. Important to know how to implement it using
good software engineering criteria.
CS 349 - Introduction
24
!

Vision for the Internet (~1960s)
!

http://youtu.be/Y0pPfyYtiBc

25
Interactive System Architecture
CS 349 - Introduction
26
Interactive System Architecture
User%
Interac+ve%System%
mental
model
system
model
express
present
perceive
translate
CS 349 - Introduction
27
Model-View-Controller (MVC)
Model
View
Controller
notify
change
mental
model
translate
present
perceive
express

system
model
CS 349 - Introduction
28
Model
Graphical Temperature Control
View
Controller
value changed
change temp
to 20°
temp is
halfway
mouse
events
draw
widget
mouse
movement
max = 30°
temp = 20°
min = 10°
CS 349 - Introduction
29
Model
Speech Temperature Control
View
Controller
value changed
change temp
to 20°
temp
is 18°
speech
recognition
text to
speech
“Temperature
is 18 degrees.”
“Set
temperature to
20° degrees.”
max = 30°
temp = 20°
min = 10°
CS 349 - Introduction
30
Tangible Temperature Control
!

what is the “translate-change-notify-present (wait for
express)” cycle?
CS 349 - Introduction
31
Interface vs. Interaction
!

What is the di

erence 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
CS 349 - Introduction
32
Interface and Interaction Design
!

What makes a good interface?
!

What is the best interface you have ever used?
-

What makes it so good?
-

Why is interaction design so hard?
CS 349 - Introduction
33
Interaction Design
!

Challenging because of variability in users and tasks
-

Varying levels of expertise
-

Range of tasks performed with the same tool
!

Not one “right way” to design an interface, interfaces can
always be improved
CS 349 - Introduction
34
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…
!

A well designed tool can literally
change the world
-

The web browser, Linux, original
Napster, the spreadsheet, email,
instant messaging…
CS 349 - Introduction
35