CS3205, HCI in Software Development - PowerPoint PPT Presentation

Title: CS3205, HCI in Software Development


1
CS3205, HCI in Software Development

• Course Introduction
• Spring 2013

2
There must be a problem because
SIS
3
Whats the Course About?

• In one sentence
• Human-computer interaction (HCI) and
  user-centered design in the context of SW
  engineering
• Note the target audience
• Students who may be involved in SW development
• HCI is important to others HW designers and
  engineers, Web designers, psychologists, etc.
• But CS3205 targets SW development

4
What is HCI?

• More soon
• Human-Computer interface
• Where people meet or come together with
  machines or computer-based systems
• Physical interface (e.g. buttons, screens, menus,
  etc.)
• Logical interface
• The model a system presents a user
• Set of tasks available and how theyre organized

5
From the SIGCHI Website

• HCI is
• An inter-disciplinary discipline (engineering,
  CS, psychology, graphic design, ergonomics, etc.)
• Concerned with design, evaluation, and
  implementation
• Addresses peoples needs, capabilities,
  limitations

6
SIGCHI curriculum definition site

• Human-computer interaction is a discipline
  concerned with the design, evaluation and
  implementation of interactive computing systems
  for human use and with the study of major
  phenomena surrounding them.

7
What is an interface?

• ?

8
What is the User Interface?

• Is it the screen layout?
• Is it the documentation?
• Is it the interaction devices and techniques?
• Is it what the application does?
• Is it the help system?
• Is it the code?

9
Evolution of HCI interfaces

• 50s - Interface at the hardware level for
  engineers - switch panels
• 60-70s - interface at the programming level -
  COBOL, FORTRAN
• 70-90s - Interface at the terminal level -
  command languages
• 80s - Interface at the interaction dialogue level
  - GUIs, multimedia
• 90s - Interface at the work setting - networked
  systems, groupware
• 00s - Interface becomes pervasive
• RF tags, Bluetooth technology, mobile devices,
  consumer electronics, interactive screens,
  embedded technology, information appliances
• Late 00s computing becomes more ubiquitous
• Internet use becomes the norm
• Web applications become richer. The Cloud.
• Mobile devices like smartphones tablets become
  mainstream

10
User Execute Tasks, Interpret Information or
Results

• HCI is at the interface between a human and a
  computer performing a task
• Task - write document, calculate budget, filter
  email, register for course, find best route, ...
• Task might be work, play, learning,
  communicating, etc etc
• Essential user activities
• Express task (execution)
• Interpret results (evaluation)
• Not just on the desktop! (How many computers in
  your family home, including the garage?)

11
HCI Wide Range of Concerns

• Make an interactive system be useful for a task,
  and support that task effectively
• Easy to use, easy to learn, avoid errors
• Must understand users, understand users tasks
• Create a usable logical interface
• A users conceptual model of the system
• Overall design of how we interact
• Physical and low-level design
• Physical interface buttons, keys, screens
• SW interface menus, screens, colors
• Evaluating usability
• During development, after completion

12
High-level Terms

• HCI, CHI
• Usability
• User-centered Design
• An approach to design (SW, Web, other) that
  involves the user a great deal, in many phases
• Interaction Design (ID)
• Something different than HCI? Maybe.
• Our current textbook is an ID text

13
Usability

• A definition from ISO standard 9241
• The extent to which a product can be used by
  specified users to achieve specified goals with
  effectiveness, efficiency and satisfaction in a
  specified context of use.
• Effectiveness
• accuracy and completeness in achieving goals
• Efficiency
• resources expended
• Satisfaction
• comfort, acceptability (happiness, pleasure)

14
Discussion

• Effectiveness, efficiency and satisfaction
• Are all of these equally important?
• All the time?

15
(No Transcript)
16
What is User-Centered Design?

• An approach to UI development and system
  development.
• Focuses on understanding
• Users, and
• Their goals and tasks, and
• The environment (physical, organizational,
  social)
• Pay attention to these throughout development

17
ISO on User-centered Design

• ISO 13407 describes human-centered design
  processes for interactive systems
• Principles of human-centered design
• Active involvement of users
• Appropriate allocation of function between user
  and system
• Iteration of design solutions
• Multidisciplinary design teams

18
ISO on User-centered Design (2)

• Essential activities in human-centered design
• Understand and specify the context of use
• Specify the user and organizational requirements
• Produce design solutions (prototypes)
• Evaluate designs with users against requirements

19
Are You Experienced? (in UC Design, I mean)

• Think about a significantly complex software
  project youve been involved in
• Work, research, CS3240, etc.
• Did it seem like an example of user-centered
  design?
• How did it, or how did it not?

20
(No Transcript)
21
What is interaction design?

• Designing interactive products to support people
  in their everyday and working lives
• Sharp, Rogers and Preece (2002)
• The design of spaces for human communication and
  interaction
• Winograd (1997)

22
Goals of interaction design

• Develop usable products
• Usability means easy to learn, effective to use
  and provide an enjoyable experience
• Involve users in the design process

23
Unclear about what ID is?

• Not surprising!
• Well read
• What is Interaction Design and What Does It Mean
  to Information Designers? by Craig Marion
• http//www.chesco.com/cmarion/PCD/WhatIsInteracti
  onDesign.html
• and
• From Computing Machinery to Interaction Design by
  Terry Winograd
• http//hci.stanford.edu/7Ewinograd/acm97.html

24
From HCI to Interaction Design

• Human-computer interaction (HCI) isconcerned
  with the design, evaluation and implementation of
  interactive computing systems for human use and
  with the study of major phenomena surrounding
  them (ACM SIGCHI, 1992, p.6)
• Interaction design (ID) is the design of
  spaces for human communication and interaction
  (Winograd, 1997)
• One distinction more application areas, more
  technologies and more issues to consider when
  designing interfaces

25
Relationship between ID, HCI and other fields
Academic disciplines (e.g. computer
science, psychology)
Design practices (e.g. graphic design)
Interaction Design
Interdisciplinary fields (e.g HCI, CSCW)
26
Relationship between ID, HCI and other fields

• Academic disciplines contributing to ID
• Psychology
• Social Sciences
• Computing Sciences
• Engineering
• Ergonomics
• Informatics

27
Relationship between ID, HCI and other fields

• Design practices contributing to ID
• Graphic design
• Product design
• Artist-design
• Industrial design
• Film industry

28
Relationship between ID, HCI and other fields

• Interdisciplinary fields that do interaction
  design
• HCI
• Human Factors
• Cognitive Engineering
• Cognitive Ergonomics
• Computer Supported Co-operative Work
• Information Systems

29
What do professionals do in the HCI or ID
business?

• interaction designers - ??
• usability engineers - ??
• web designers (we know this one!)
• information architects - ??
• user experience designers - ??

30
What do professionals do in the HCI or ID
business?

• interaction designers - people involved in the
  design of all the interactive aspects of a
  product
• usability engineers - people who focus on
  evaluating products, using usability methods and
  principles
• web designers - people who develop and create the
  visual design of websites, such as layouts
• information architects - people who come up with
  ideas of how to plan and structure interactive
  products
• user experience designers - people who do all the
  above but who may also carry out field studies to
  inform the design of products

31
Reminder What is involved in the process of
UC/ID design

• Identify needs and establish requirements
• Functionality, goals, tasks
• Develop alternative designs
• Build interactive prototypes that can be
  communicated and assessed
• test, refine, iterate
• Evaluate what is being built throughout the
  process(This is what youll do this semester!)

32
Rules about Developing for Users

• Rule 1 All users are not like you.
• Rule 2 All users are not alike.
• Consider
• Physical cognitive abilities special needs
• Personality culture
• Knowledge skills
• Motivation

33
Class Activity

• Think-Pair-Share
• Pairs write down differences
• Pairs merge results
• Instructor calls on pairs to share answers
• Question
• Think about a hard-to-use software product (or
  computer-based system).
• In what way does it have poor usability?
• General problems
• Specific examples

34
Bad Interfaces, Spring 2013
35
Bad Interfaces, Spring 2013
36
Bad Interfaces, Spring 2013
37
Bad Interfaces, Spring 2013
38
Bad Interfaces, Summer 2012

• Collab scroll bars in scrollbars
• SIS not intuitive, steep learning curve, hard to
  find where things are, timeout, SB in SB, cant
  use back button, some tasks req. gt1 window
• Photoshop very hard for novice, buttons not
  intuitive (what do they represent), easy to mess
  up selecting pixels/colors
• Mathcad not intuitive, too much info, user not
  directed to whats needed. Not clear what icons do

39
Bad Interfaces, Summer 2012

• Word has unnecesary commands, too many buttons,
  cant control indentation, corrects when you
  dont want it to, format of pasted text doesnt
  match doc
• Blender (image/graphics app) not intuitive, hard
  to figure out what you want to do, how to do it
• Sony alarm clock setting time,
  network/GPS/something, time off by 5 minutes

40
Bad Interfaces, Summer 2012

• Blackberry slow to respond
• Android phone slow, IMs delayed, easy to hit
  buttons on screen
• Emacs hard to switch windows, scroll too far
  problem

41
Bad Interfaces, Spring 2012

• Windows Mobile 6.1
• Small buttons, inaccurate key presses
• Made for stylus (not used often)
• Remotes for DirectTV, Satelite
• Too many buttons
• Needs shortcuts for frequents
• All first person shooters
• Motion sicknesss
• Standalone GPS devices
• Onscreen keyboards dont match conventions
• Too many clicks to do a task

42
Bad Interfaces, Spring 2012

• Playstations DVD functionality
• Using controller (w/o remote), wrong button sends
  you out of DVD mode, back to main
• Googles multiple account signin
• Cant see all of them, use temp account
• Doesnt show all information. Limited.
• Virtual Box
• Hard to share files between host and guest
• Facebook newsfeed auto update
• Frequent updates move you back to top (even when
  scrolling)

43
Bad Interfaces, Spring 2012

• Web interfaces with long list of data
• Need to click through all pages to find something
• Smartphone keyboards
• Qwerty may not be best, button size,
  autocorrection
• Link in facebook app doesnt take you to specific
  link but to top-level page
• Cant like a specific comment.
• Entering text with a game controller or without a
  keyboard

44
Bad Interfaces, Spring 2011

• SMOK
• Hard to learn. Cant always right- or left-click
• Scroll disabled depending on Zoom level
• Canvas wont resize.
• Looks cluttered.
• Lines dont move with objects when you move them.
• IBCM (web-based version)
• Freezes if stuck in a loop. Must restart browser
  (not in Chrome)

45

• Voice mail or audio-based systems
• Not visual. Slower to navigate.
• UVa registrar listen to long set of options. Not
  able to skip if you know what to do
• Not clear / visible what commands are
• Voice recognition helps, but pronouncing
  international names is hard for many
• Facebook app for Blackberry
• Scroll down through notifications, but must
  scroll all the way back to top
• Look at photos from the beginnning (always)
• To scroll up in message, must go to the bottom
  and then scroll up
• Etc. etc. etc.

46

• World of Warcraft
• Abilities on action bars that cover bottom and
  right side of screen. Must scroll quickly
• Health info in two different places
• Must look in many places to be efficient
• No effective key mapping
• Emacs
• Hard to learn key-strokes
• Relies on key-strokes, not visual
• Interaction between undo and redo

47

• Word 2008 (Mac)
• Unstable, location/use of toolbars
• Adobe CS Suite
• Undo in photoshop is just a toggle
• Others more like undo/redo
• Unstable
• Blender (3D animation modeling)
• Steep learning curving
• Not like any others. Learning others doesnt
  help. Tries to be different.
• Too many options, windows, hotkeys

48

• SIS
• One window at a time. Info distribted across
  multipe winodws
• Nested scrollable windows
• Time out is irritating
• Too many clicks to do simple tasks
• To search, must choose dept from drop-down and
  there are a LOT of departments
• Cant enroll in class from search windown
• Cant go on waitlist from search window
• To change, sometimes must drop
• Edit may work. Bad name. Swap not what you want.

49

• SIS (page 2 of ?)
• Left-hand side useless info. Better if it showed
  where you are in interface, supported quicker
  navigation
• Transcript request fails (if downloads, doesnt
  make it clear it)
• Missing ability to see how one of multi sections
  fits your schedule

50

• iMovie
• 2006 version than later versions
• More intuitive
• More restrictive

51
Bad Interfaces, Spr 08

• SMOK
• Zooming hard, not intuitive
• Do it too much, overlap, too much scrolling
• Sometimes right-click, other times do something
  else
• Some commands buried
• Default when adding component bad, things
  overlap,
• Things you need to find not labeled well
• Too much zooming, search to find things
• Add tings and file is lost
• Components/things easily deleted by mistake
• Failed to always load file correctly
• Demands advance planning, otherwise hard to
  change things later
• Hard to distinguish arrows between components
  where there are many

52
Excel

• Copy and paste from Word puts stuff in just one
  cell
• Hard to change details in graphs
• Wizard great, but hard to see how to customize
• 2D graphs
• Print formatting
• Steep learning curve
• Hard for beginners needing advanced features
• Click on cell, selects all, and you may delete it
  when you mean to edit it
• Formulas hard to follow which cells are
  referenced
• Floating point accuracy

53
Fake iPod

• Different buttons are used to select at different
  times
• Mistake takes you back to beginning instead of
  back one
• Cant define order of songs when playing

54
ISIS

• Type in year/semester use odd format
• Could default to logical semester
• Doesnt have all info in it to be good
• Need COD which isnt there
• Waitlist isnt well integrated
• Availability closed at certain times (?)
• Cant press enter to login in, must click
• Also, tab order isnt logical
• Must return back to main menu always, even when
  theres a logical other window you want to do
• Cant use Backspace/Back to go back
• Close window causes it to chide you
• Audit have this request/wait/return option
• Seems unfriendly, unresponsive
• Timer period too short since you have to use gt1
  system
• Refresh -- F5 logs you out

55
Examples of non-usable systems

• Krogers self-checkout
• Use of the scale is confusing, not enough room
  for stuff
• Slow scanners, not as efficient as youd hope
• Slow to scan/place/wait, so takes longer
• Default fix is get cashier, no other
  suggestions
• Poor error recovery
• Why cant I swipe student ID? Didnt check if
  you were a student once
• Ableton-Live or similar recording/audio software
• doesnt look like standard Windows program, so
  hard to find GUI controls
• might look cool but makes it less efficient

56

• Games that used keyboard commands only and used
  card-board cut-out
• Chem151 HW checker program
• Cant backtrack in the steps you have to do
• Crashes a lot
• Didnt accept numeric answers missing x.0
• No feedback on why
• UVas Webmail
• Ugly to look at, not pleasing
• hard to keep mail organized in folders
• Must explicitly copy and move
• Slow
• Useless spam filter
• Must log into webmail/toolkit even when youve
  logged into a machine
• Filters out mail headers / not clear you can
  control this
• Indents messages in a thread, but if too deep you
  dont see enough of the message

57

• Mathcad
• hard to learn at first
• hard to keep track of variable / whole thing
  fails because of one small error / not good at
  explaining source of errors
• use of arrow-keys vs. space-bar to move things in
  an equation
• expected arrow keys to work
• 4 different versions of the equals-sign / hard
  to distinguish on the screen
• new version cant read files from other versions
• hard to remember after not using it for a while
  (lots of tricks needed, hard to remember)

58

• ISIS
• pops up a window, pop-up blocker problems
• cant use browsers back button
• gives course instructor number instead of name
• must enter schedule-number instead of clicking on
  course ID and number
• Must use semester as a code, and if you get this
  wrong its confusing whats wrong
• Interface has pictures/images for links, not the
  conventional under-lined links
• not integrated into COD, so must copy info over
  from COD to ISIS
• Kicks you off too quickly
• Too often overloaded, too many users
• Unavailability at certain hours / dont know when
  its unavailable / status not visible easily
• Links on main page are too similar
• SSN number use

59
Spring 06 Examples of non-usable systems

• Eclipse
• Hard learning curve, bad for beginners
• Too many windows, confusing layout, too much
  going on (advanced options)
• Mathcad
• Interface not intuitive
• Not monkey-proof (lets you make mistakes that
  crash it, make it unstable)
• Saving didnt always work well
• Mouse scrolling caused program to crash

60

• Main UVa website
• Cluttered, too much stuff
• Random, not organized
• Things you need small, hard to find must search
  for
• User-base
• Grad school application sites
• Multiple systems, not standard
• Important info not clear, not consistent
  (deadlines)
• Geometers Sketchpad
• Hard to figure out how to use (sit down, cant
  figure out what to do). Need to read instruction
  book. Bad help

61

• AOL IM
• Flashing movies, ads
• Opens up another window
• Unwanted info, windows, distracting
• Adds buddies to your buddy list (cant remove)
• vi
• Not intuitive, need instructions
• Simple function but needlessly complex

62
End of lecture 1