37
CS 349: User Interfaces https://www.student.cs.uwaterloo.ca/~cs349 Jeff Avery & Alex Williams Winter 2017
CS349:UserInterfaceshttps://www.student.cs.uwaterloo.ca/~cs349
JeffAvery&AlexWilliams
Winter2017
PopQuiz
§ WhyisWaterloosowell-knowninCanadaforComputerScience?
§ Answer:Because40yearsago,thisiswhatacomputerlookedlike…
2
RedRoom,October1974
AnotherWaytoThinkAboutThis
§ Thisiswhatauser-interfacelookedlikebeforetheearly1980s:
CS 349 - Syllabus3
4
5
CS 349 - Syllabus6
Computinginthe1980s
CS 349 - Syllabus7
ComputingToday
CS 349 - Syllabus81945
1965
1975
1995
2005
1955
1985
20152010
2000
1990
1980
1970
1960
1950
iPhone
iPad
iPod
MacintoshIBM PC
Apple II
ENIAC
Intel 4004 MicroprocessorARPANET
WWW
Batch Interfaces
Conversational In
terfaces
Graphical User In
terfacesThe introduction of
graphical user interfaces
fundamentally changed our interaction with
technology
HowHasComputingChanged?
9
40yearsago Today
Whousedacomputer Specialist Everyone
Whattheyknewaboutthecomputer Lots Little
Howtheylearnedtouseacomputer Readingoperatorsmanuals
Tinkering
Wheretheyfoundtheapplicationsthatranonthecomputer
Built them Appstore,web
Howmanydifferentcomputerstheywouldhaveinteractedwithduringthecourseoftheirday
Maybe one Many!
Primarymodeofinteraction Punch-cards,command-line,menus
Graphical,touch,speech
WhatisaUserInterface?
§ Maybe,“thehuman’sviewofthecomputer”
§ Maybe,“theplacewherehumansandcomputersmeet”
CS 349 - Syllabus10
Definition:UserInterface
§ Auserinterfaceistheplacewhereapersonexpressesintention toanartifact,andtheartifactpresentsfeedbacktotheperson.
§ Essentially,it’sthewaythatpeople andtechnology interact.
person artifact
express intention
presents feedback
CS 349 - Basic Concepts11
UserInterfaces
§ Doesamicrowavehaveaninterface?
§ Arefrigerator?
§ Adoorbell?
§ Ahammer?
§ Ajet?
CS 349 - Basic Concepts12
Auserinterfaceistheplacewhereapersonexpressesintention toanartifact,andtheartifactpresentsfeedbacktotheperson.
CS 349 - Syllabus13
InteractiveSystemArchitecture
CS 349 - Basic Concepts14
InteractiveSystemArchitecture
User InteractiveSystem
mentalmodel system
model
express intention
present feedback
CS 349 - Basic Concepts15
InteractiveSystemArchitecture
User InteractiveSystem
mentalmodel system
model
express
presentperceive
translate
CS 349 - Basic Concepts16
Model-View-Controller(MVC)
Model
View
Controller
notify
change
mentalmodel
translate
present
perceive
express
system model
CS 349 - Basic Concepts17
Model
GraphicalTemperatureControl
View
Controller
value changed
change temp to 20°
temperatureis colder than usual
mouse events
draw widget
mouse movement
max = 30°temp = 18°min = 10°
CS 349 - Basic Concepts
translate
present
perceive
express
notify
change
Event: "An observable occurrence, phenomenon, or an extraordinary occurrence"
Event: "A message to notifyan application that somethinghappened"
18
20
10
30
Model
SpeechTemperatureControl
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 - Basic Concepts
translate
present
perceive
expresschange
notify
19
Interfacevs.Interaction
§ Whatisthedifferencebetweenaninterface andinteraction?
§ Interface referstotheexternalpresentationtotheuser- Controls(whatyoucanmanipulatetocommunicateintent)- Visual,physical,auditorypresentation(whattheprogramusestocommunicateitsresponse)
§ Interaction isusedtoconnotebehavior:Theactionstheusermustinvoketoperformataskandthecorrespondingresponses- Interactionisactionanddialog- Unfoldsovertime
CS 349 - Basic Concepts20
InterfaceandInteractionDesign
§ Whatistheinterface?
§ Whatistheinteraction?
§ Whyisinteractiondesignsohard?
CS 349 - Basic Concepts21
InteractionDesign
§ Challengingbecauseofvariabilityinusersandtasks- Varyinglevelsofexpertiseamongusers- Oftenarangeoftaskswillperformedwiththesametool(i.e.toolscanbegeneric)– canyouanticipateallusesandscenarios?
§ Noone“rightway”todesignaninterface;interfacescanalwaysbeimproved.
§ Pushingtechnology“forward”requiresustorethinkinteraction.- EmergenceofUXasadiscipline
CS 349 - Basic Concepts22
WhyStudyInteraction?EmpoweringPeople
§ Welldesignedinterfacesempower peopletodothingstheycouldn’totherwisedo- Desktoppublishing,grassrootsjournalism(blogs),movieproduction,musicproduction,imageediting,assistivetechnologies…
§ Interactionisthekeytoenablingnewtechnologies-Multi-touchandgesturesonsmartphones- Voiceinterfacesforcars,watches- Touchscreensontablets,notebooks
§ Awelldesignedtoolcanchangetheworld- Thewebbrowser,Linux,originalNapster,thespreadsheet,email,instantmessaging…
CS 349 - Basic Concepts23
SyllabusWhattoexpect
Howtobesuccessfulinthiscourse!
Nextsteps
CS349Objectives
ThegoalofCS349istoteachyou:
1)howtodesign,implement,andevaluate userinterfaces- providethefoundationalknowledgeforbuildinghighlyinteractive,usabledesktop,webandmobileapplications
- illustratetheunderlyingarchitectureofmodernGUItoolkits- teachstrategiesapplicableacrossarangeofinterfaceproblems- teachessentialdesigntools,techniques,andprocesses
2)waystounderstandusers- physicalandcognitiveabilitiesofusers- visualdesignprinciples
User-centereddesigniscoveredmoreextensivelyinCS449.
CS 349 - Syllabus25
26
ListofTopics§ Syllabus(introduction,motivation),Basic
Concepts(userinterfaces,interaction)§ Multiplewindows(BWS,WindowsMgr,X
examples)§ Java:advanced(interfaces,listeners,canvas,
drawing)§ Events(eventcapture,eventloop,dispatch)w.
Javadispatchexamples§ 2Dgraphics(shapemodels,mouseinteraction,
selection)§ MVC(rationale,demos,widgets)§ Widgets(physicalvs.logicalinput,consistency,
toolkits)§ Layout(Dynamic/Responsive,LayoutManagers,
Composite/StrategyDP)§ Visualperception(temporal/spatialresolution,
color,displays)§ Users:visualdesign(gestaltprinciples,
structure)§ Responsiveness(perception,UIfeedback,Java
UIthreads,Webasync calls)§ Undo/Redo;Cut/Paste
§ Designprinciples(usefulvs.usable,Norman,gulfevaluation/execution,metaphor,feedback)
§ Designprocess(UCD,prototyping)§ History(interactionuptoWIMPinterfaces)§ Touchinterfaces(Input,Interactionproblems,DM
onWIMP/touch,gestural,mobile)§ Touchlessinterfaces(gestural/speechdesignand
problems)§ Android:advanced(intents,activities,mvc,
graphics)§ Users:perceptionandcognition(cognetics,
memory,bias)§ Accessibility(impairments,curb-cut,legal
obligations)§ Input(typesofinput,keyboards,positionalinput,
absolute/relative,direct/indirect)§ Inputperformance(KLM,Fitt’s Law,SteeringLaw)§ HCIresearch,methodology
27
CS349People
§ Instructors:- JeffAvery&AlexWilliams
§ InstructionalSupportCoordinator(ISC):- CarolineKierstead
§ InstructionalAssistants(IA):- Shaishav Siddhpuria- TerenceDickson
§ TeachingAssistants(TAs):- Bahareh Sarrafzadeh- DallasFraser- JeremyHartmann- LisaElkin- QiFeng(Edmund)Liu-WillCallaghan
CS 349 - Syllabus28
Website,Schedule,Textbook
§ WebSite:www.student.cs.uwaterloo.ca/~cs349/
§ Scheduleonwebsite- lecturetopics,slides,samplecode- assignment&midtermdates
§ Slidespostedbeforeclass- Lecturesmayincludemorethanwhatiscoveredintheslides
§ Textbooks- usefulbutnotrequired!- BuildingInteractiveSystems,DanR.OlsenJr.
- TheDesignofEverydayThings,DonaldA.Norman
- DesigningwiththeMindinMind,JeffJohnson
CS 349 - Syllabus29
Lectures
Days Time Room
§ Mon,Wed,Fri 10:30-11:20 MC4040 Jeff
§ Mon,Wed,Fri 1:30-2:20 MC4040 Jeff
§ Mon,Wed,Fri 2:30-3:20 MC4040 Jeff
§ Mon,Wed,Fri 3:30-4:20 MC4040 Alex
We’llattempttokeepallsectionsin-sync;ifyoumissyourscheduledlecture,youhaveotherchancestocatchit!
Duringlectures:
§ Participatebyaskingandansweringquestions
§ Tryandlimitcomputeruseforanythingotherthantakingnotes.
CS 349 - Syllabus30
AssignmentsAssignmentsmeanttoprovidemeaningful,engagingexperiencesinconstructinginterfaces…whilegivingyoutheopportunitytocreateapplicationsyouwillwanttosharewithothers.
§ Fourassignments,spaced(roughly)3weeksapart.- Youwillbuilddesktop applicationsusingC++andJava.- YouareexpectedtolearnGit andJavaonyourowntime!- A“gettingstarted”tutorialwillbeofferednextweek.
§ There’slotsofroomforcreativityinassignments- Typicallyhaveacomponentforgoingaboveandbeyondthespec
§ Assignmentsrequiresignificanttimecoding- Donotunderestimatethetimeittakestocodeinteractiveapplicationsthatareintuitiveandeasy-to-use.Startearly!
§ IndividualNOTgroupassignments
CS 349 - Syllabus31
WhatYou’llNeedforAssignments
§ A1:XWindows- C++andXlib (XWindows)- Canbedoneonyourlaptop(Linux,Mac)orinthestudentenvironment.- Required:editor,g++compiler,xlib installed,git client
§ A2-A4:Java- Java8SE- Canbedoneonyourlaptop(Linux,Mac,Windows)orinthestudentenvironment.
- Required:editor,Java8compiler/runtime,git client- Recommended:IntelliJIDE
You’reexpectedtolearnJavaandGit onyourowntime!
CS 349 - Syllabus32
AssignmentPolicies
§ Duedates:5:00pmonthedateinschedule- LateassignmentsareNOTaccepted,exceptforvalidmedicalreasons(withadoctorsnoteprovidedtoCaroline).
§ Assignmentssubmissionsarethroughyourprivate repoonGit- ReposwillbesetupforyouMondayofthesecondweekoftheterm- http://git.uwaterloo.ca
§ Assignmentsareyourindividualwork- Youmayuseexamplesprovidedinclassandonthecoursewebsite- YoushouldNOTbedoingInternetsearchesforspecificsolutions.
§ YoushouldNOTpostyoursolutionsonline.- GoogleindexesGitHub(i.e.anyonecaneasilyfindyourrepo).- IfsomeonefindsyourassignmentonGitHubandusesyourcode,it’sanacademicoffenseforBOTHofyou.
CS 349 - Syllabus33
GettingHelpOutsideofLectures
§ OfficeHours-Lectureandassignmenthelp-Detailspostedoncoursewebsite
§ PiazzaforQ&A-Everyoneshouldsignup!Pleaseuseameaningfulname-Staffwillmonitor(best-effortresponse,notime-guarantees)-Whenposting• Searchbeforeyoupost!• Useameaningfultitleforeverypost• Answerquestions,butdon’tbetooexplicit• Buildonecollaborativeanswer!
CS 349 - Syllabus34
Grading
§ Assignments:40%- 10%,10%,10%,10%
§ Midterm:20%-WedFeb 15@7:00PM– 8:50PM(locationTBD)
§ Final:40%- ScheduledbytheRegistrar’sOffice
§ Topassthecourse,youmustpasstheweightedexamaverageand theweightedassignmentaverage
§ Ifyoufailtheassignments,youfailthecourse,regardlessofhowwellyoudoontheexams.
CS 349 - Syllabus35
NextSteps
Thisweek
§ Explorethewebsite:http://student.cs.uwaterloo.ca/~cs349
§ GetsignedupforPiazza:http://www.piazza.com/uwaterloo.ca/winter2017/cs349/home
§ Logintothestudentenvironment- ssh [email protected]
§ LogintoGit:http://git.uwaterloo.ca- Loggingincreatesyouraccount– requiredforustocreateyourrepos!- Repositorieswillbecreatedlaterthisweek(we’llpostdetailsonPiazza)
Nextweek
§ InstallJava8JDK,Git client(graphical,orcommandline)CS 349 - Syllabus36
Questions?
CS 349 - Syllabus37
