Web Characterization (online) Web Design

Publish in

Documents

19 views

Please download to get full document.

View again

of 54
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Share
Description
Web Characterization (online) Web Design. Week 3 LBSC 690 Information Technology. Today’s Goals. Be able to discuss what the Web “is” Understand human-computer interaction principles What makes something well or poorly designed? Connect that knowledge to good Web site design
Transcript
Web Characterization (online)Web Design Week 3 LBSC 690 Information Technology Today’s Goals
  • Be able to discuss what the Web “is”
  • Understand human-computer interaction principles
  • What makes something well or poorly designed?
  • Connect that knowledge to good Web site design
  • Begin to think about evaluation
  • *Review
  • FTP
  • URLs
  • G1: What the Web ‘is’ Web Characterization Let’s reflect G2: Understand HCI Human-computer interaction Implementation Design Evaluation Human Computer Interaction
  • A discipline concerned with the of interactive computing systems for human use.
  • What are Computers Good At?
  • Sense stimuli outside human’s range
  • Calculate quickly and accurately
  • Store large quantities and recall accurately
  • Respond rapidly and consistently
  • Perform repetitive actions reliably
  • Work under heavy load for an extended period
  • What are Humans Good At?
  • Sense low level stimuli
  • Recognize patterns
  • Reason inductively
  • Communicate with multiple channels
  • Apply multiple strategies
  • Adapt to changes or unexpected events
  • Individual Differences
  • Physical
  • Anthropomorphic (height, left handed, etc.)
  • Age (mobility, dexterity, etc.)
  • Cognitive
  • Perceptual
  • Sight, hearing, etc.
  • Personality
  • Cultural factors
  • Where is the bottleneck? computer performance human performance 1950 2000 2050 Synergy Humans do what they are good at Computers do what they are good at Strengths of one cover weakness of the other Interaction Forming an intention Internal mental characterization of a goal Selection of an action Review possible actions, select most appropriate Execution of the action Carry out appropriate actions with the system Evaluation of the outcome Compare results with expectations Stages of Interaction Goals Intention Expectation Evaluation Selection Interpretation Mental Activity Physical Activity System Execution Perception Mental Models
  • How the user thinks the machine works
  • What actions can be taken?
  • What results are expected from an action?
  • How should system output be interpreted?
  • Mental models exist at many levels
  • Hardware, operating system, and network
  • Application programs
  • Information resources
  • Mental Models
  • Built from:
  • Affordances, causality, constraints, mapping
  • Positive transfer, stereotypes / cultural transfer
  • Instructions
  • Interactions
  • Allow people to mentally simulate use of a system
  • Thus developing expectations for how the system will work & respond
  • Can be wrong
  • Especially if any of the above are misleading: Direct link between system features and user’s state of mind.
  • Modeling Interaction: Computer Peripherals & Human Sensory Perception Human Mental Models Sight Sound System Task Hands Voice Software Models Keyboard Mouse Task User Display Speaker Computer Modeling Interaction Perception Human Mental Models Sight Sound System Task Hands Voice Software Models Keyboard Mouse Task User Display Speaker Computer Human Senses Perception
  • Visual
  • Position/motion, color/contrast, symbols
  • Auditory
  • Position/motion, tones/volume, speech
  • Haptic
  • Mechanical, thermal, electrical, kinesthethic
  • Olfactory
  • Smell, taste
  • Vestibular
  • Human-computer communication Perception
  • Human-to-computer
  • Input devices
  • Keyboard, mouse, touchscreen, microphone, etc.
  • Hardware mechanisms that receive the kind of data that can be processed by software processes
  • Computer-to-human
  • Output devices
  • Screen, speaker, device vibration, etc.
  • Hardware mechanisms that can send the kind of data that can be processed by human senses
  • G3: Connect HCI principles with good Web site design Perception Human-computer interaction + Human-information interaction Objects & Design: PerceptionLessons from Donald Norman
  • Objects have natural actions that go with them
  • Chairs are for sitting
  • Knobs are for turning
  • Buttons are for pushing …
  • Vandalizing a train
  • Example from The Psychology of Everyday Things by Donald Norman.
  • The perceived and actual fundamental properties of an object determine how it will be used.
  • Bridging Users & Systems: PerceptionAffordances
  • Real or perceived action possibilities of an object
  • A knob can be twisted or pushed
  • A cord can be pulled, twisted, wrapped
  • A link can be read, clicked, copied
  • A box can be typed into
  • Complex things may need explaining, but simple things should not
  • Affordances Gone Wrong Perception Dials for turning Sliders for sliding What does this button do? Are these buttons? Can only push, Perceptionside to push clearly visible Which side? Push or pull? Bridging Users & Systems: Visible Constraints
  • Visible limitations on affordances
  • Limitations in a good way: Reduces complexity, uncertainty of objects with many possible affordances
  • Users play a role too! Perception
  • Not all visual constraints are seen, perceived, followed!
  • Visible Constraints: Date Entry Perception Bridging Users & Systems: PerceptionMapping
  • Design concept
  • Draw clear relationships between objects and the things or behaviors they control
  • Should help users develop reasonable expectations of cause and effect
  • What will probably happen if I click here?
  • paired Perception full mapping arbitrary front back front back 2 possibilities per side = 4 total possibilities backright frontleft backleft frontright 24 possibilities, requires: -visible labels + memory Possible Mappings Bridging Users & Systems: PerceptionCausality
  • More specifically, perceivedcausality
  • What happens immediately after an action is feedbackabout the consequences of the action
  • False causality
  • Post hoc ergo propter hoc.
  • Incorrect effect
  • E.g., invoking unfamiliar function, then computer freezes
  • Can cause ‘superstitious’ behaviors
  • Invisible effect
  • Command with no apparent result often re-entered repeatedly
  • Causality and design
  • Maintain awareness that humans naturally and unavoidably ascribe causality
  • Design for consequences of this kind of reasoning
  • Bridging Users & Systems: PerceptionTransfer Effects
  • People transfer their learning/expectations of similar objects to current objects
  • Positive transfer: Previous learning applies well to new situation
  • Negative transfer: Previous learning conflicts with new situation
  • Bridging Users & Systems: PerceptionPopulation Stereotypes/Idioms
  • People learn idioms and symbols differently in different cultures:
  • Red means stop or danger
  • Green means go or safe
  • Light switch in America versus Great Britain
  • Faucets in America versus Great Britain
  • Thai trash can icon
  • American trash can icon
  • Lessons from PerceptionArchitecture: Patterns
  • “[A] pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.”
  • Christopher Alexander, A Pattern Language. 1977.
  • A design concept that can apply to anything that gets ‘built.’
  • Buildings, landscapes, software, Web sites, collections
  • Pattern Examples Perception
  • 251: Different Chairs Conflict: People are different sizes; they sit in different ways. And yet there is a tendency in modern times to make all chairs alike.Resolution: Never furnish any place with chairs that are identically the same. Choose a variety of different chairs, some big, some small, some softer than others, some with rockers, some very old, some with arms, some wicker, some wood, some cloth.
  • Pattern Examples Perception
  • 112: "Entrance Transition" Conflict: Buildings, especially houses, with a graceful transition between the street and the inside, are more tranquil than those which open directly off the street.Resolution: Make a transition space between the street and from front door. Bring the path which connects street and entrance through this transition space, and mark it with a change of surface, a change of level, perhaps by gateways which make a change of enclosure, and above all with a change of view.
  • Layers of Patterns for Web Design Perception
  • Posture – genre, type, purpose
  • Commercial, informative, social, creative, combo
  • The posture of the site it becomes clearer what kinds of experiences to design
  • Experience
  • User tasks and goals within the realm of the posture
  • High-level tasks & goals
  • Primary & secondary level experiences
  • Task
  • Specific solutions and strategies for creating experiences
  • Can be drawn as wireframes or sketches
  • Action
  • Low-level widgets & features that contribute to task performance
  • Affordances & Constraints go here Wire Framing Perception
  • Design, brainstorming technique
  • Highly conceptual
  • Low-fi
  • Low risk, low cost
  • Rapid
  • Incorporates three elements of Web design:
  • Information design. Which information will go where?
  • Navigation design. How will users get around?
  • Interface design. What kinds of elements convey functionality?
  • G4: Begin to think about evaluation Perception Timing, methods, and outcomes of usability evaluation Human-Computer Interaction Perception Implementation Design Evaluation A discipline concerned with the of interactive computing systems for human use Usability Evaluation Methods Perception
  • Quantitative
  • Numeric data
  • Usually objective
  • Qualitative
  • Narrative data
  • Usually subjective
  • Mixed Methods
  • Combine both kinds of data
  • Objective Data: PerceptionQuantitative Analysis
  • Response/task times
  • Captured via transaction logs
  • System can capture time & place of mouse clicks, text entries, etc.
  • Screen capture can record any on-screen activity (movement of mouse, typing, screen loads)
  • Reading time/locus of attention
  • Eye trackers can record a “movie” of where a person looks and for how long
  • Response/task accuracy
  • Types of responses can be tracked and categorized, then compared with accuracy benchmarks
  • Subjective Data: PerceptionQuantitative Analysis
  • Numeric user survey responses
  • Likert scale
  • Odd (neutrality allowed) or even (forced choice) number of choices allowed
  • Statistics calculated for each question
  • Mean, standard deviation, N-per-answer
  • Objective Data: PerceptionQualitative Analysis
  • Content analysis of user’s text entries
  • E.g., Query logs
  • Qualitative evaluation of transaction logs, screen captures, eye-trackers
  • Requires some inferences, conjecture on researcher’s part, unless user corroboration is built into evaluation method
  • Heuristic evaluation
  • Applying established design guidelines to the analysis of a site
  • E.g., Homework 3 using HHS Usability Guidelines
  • Subjective Data for PerceptionQualitative Analysis
  • Interviews: Researcher & One Participant
  • Structured: The same pre-planned list of questions is asked of every participant, with no going off-script
  • Semi-structured: The same pre-planned list of questions or talking points are touched on with every participant, although some follow-up questions or tangential discussions are expected
  • Unstructured: No structured plan going in; a free form conversation between researcher and participant
  • Subjective Data for PerceptionQualitative Analysis
  • Focus groups: Group of users and observation by a (perhaps invisible) researcher
  • Small groups are asked to collaborate on a task, OR
  • Work independently on a task, then discuss, OR
  • Discuss their wants, needs, reactions to a real or proposed product
  • Sometimes facilitated by researcher, sometimes the researcher stays out of the room
  • Subjective Data for PerceptionQualitative Analysis
  • User reactions to system
  • Think-aloud: User is asked to think out loud while using the system
  • Often requires prompt from the researcher, like “What are you trying to do right now?” or “Tell me what you’re thinking about the system while you do this.”
  • Stimulated recall: User is shown a transaction log, screen capture, etc. and asked to recall what was going on at the time
  • Processing Qualitative Data Perception
  • Transcripts are often made of narrative data (interviews, focus groups, etc.)
  • Researcher uses software (e.g., Nvivo, Atlas.ti) to highlight interesting passages and code them according to evaluation benchmarks or research topics
  • E.g., Researcher might highlight all passages where an interviewee discusses the menu structure, or all passages where interviewee expresses disatisfaction.
  • Related Search
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks