Image & Representation

(material from: Designing Visual Interfaces by Mullet and Sano)
 

Images are particularly important in three areas:

identification
expression
communication

a sign is 'something that stands for someone or something in some respect or capacity'
product of a 3-way relation between the representation, the object, and its mental interpretant

3 levels

• syntactics - internal structure of the representation
• semantics - relation between the sign and the meaning of the sign
• pragmatics - effectiveness of the syntax/semantics for a particular person/community

representation depends on establishing a clear relationship between a representation and its object

• icon - denotes its object by virtue of its own likeness or resemblance to the object
• index - refers to the object indirectly, by means of an association
• symbol - denotes the object by convention alone

Principles:

• Immediacy - should be recognized at a glance without having to analyze it
• Generality - imagery is normally used to represent a clas of objects, not a particular instance - abstraction creates generality
• Cohesiveness - as in the previous week, images are not viewed in isolation but as part of an overall system - shared components and individual components
• Characterization - function by focusing on essential characteristics
• Communicability - interpretation depends on the creator and viewer sharing a common environment (physical, cultural, conceptual)

Common Errors:

- misleading syntax

what do these represent?
 
 
 

answer: takeoffs and landings (plane viewed from the top, arrow viewed from the side)
 
 

- poorly integrated structure

if you need to think about the image and especially if you have to break the image into pieces to understand it, then it doesnt work

a        what does this mean?
b,c     images that differ in just the direction of an arrow are hard to parse
d        small details are hard to parse
 
 

- dominant secondary elements

While its good to have a certain amount of regularity, those regular elements should not be the focus of the images
 

- using type as image

 
 

- using images for abstract concepts

hard to find appropriate images for abstract concepts
a - here is where baloon help is really useful to try and put some text on the screen to ID these icons
b - boomerang for 'no-on'?
c - does the stairway suggest sort ascending and sort descending
d - step through a macro?
 
 

- images based on obscure allusions

a - master task list (stove icon, things you want to do someday but arent schedued for a particular day - on the back burner)
b - magnet movies an entry from one page to another in an appointment book, axe tool breaks links established by the anchor tool, footprints are backtrack
c
 
 

- culture or langauge dependencies

a- defaults, screen dump, C-shell, hello world
b - DOS icon is an image of the original IBM PC - remember those
c - debugger
d - (apple for the teacher?)
e - spelling
f - back burner
g - drag on
 
 

- offensive or suggestive imagery

a - kill icon from next-step
b - overly intrusive
c - overly suggestive ???????
d - gestures are culturally based, gun for killing taksks
e - lots of connotations here
f - diembodied limbs  - taboo in some cultures
g- more dead tasks

Techniques:

• selecting the right vehicle
• refinement through progressive abstraction
• coordination to ensure visual consistency

Selection

1. if the concept to be communicated is a concrete, familiar object or a tangible, externally obvious state, use an iconic sign
2. if the concept to be communicated will be used repeatedly throughout an application or environment, consider establishing a conventional symbolic or indexical sign, especially if an existing sign can be borrowed from the 'real' world'
3. in most other cases - and particularly when the concept to be communicated is an abstract process or a subtle transition between states - a textual label should be used
4. avoid, as much as possible, the mixing of purely textual, iconic and indexical or symbolic signs within a single image set.

Refinement

1. determine the appropriate level of abstraction for your image set, based on the subject matter, audience, and display resolution
2. begin with an image seen from the viewpoint including the most characteristic contours. The source can be a photograph, drawing, or sketch of the object from the desired point of view.
3. use the trace overly technique to rapidly develop a series of drawings derived from the original image. Omit details until only the most essential or characteristic elements remain. Experiment with different combinations of elements to identify those that best characterize the object
4. simplify complex shapes into regular geometric forms where possible. Repeatedly tracing the outline of the shape through multiple layers will itself tend to regularize the image
5. eliminate contour information that is not required for recognition of the object. Experiment with negative space to suggest contours.

Coordination

1. begin with sketches of a full set of images that have been sufficiently developed to establish the visual characteristics of each image
2. use a similar or identical point of view and type of perspective for each image. Determine the predominant viewpoint and redraw any divergent images from the new perspective
3. use a similar form of representation and level of abstraction (i.e. dont combine icons with symbols)
4. use a consistent size, orientation, layout, color, and overall visual weight for each image. Use a layout grid to help insure consistent internal structure across images
5. wherever possible, use the same elements - including line weights, curvatures, textures, and forms - throughout the image set. In fact, it is not difficult to completely redraw the entire image set using standard components once a formal vocabulary has been defined

Evaluation Techniques

(material from: Information Anxiety by Saul Wurman, The Psychology of Human-Computer Interaction by Stuart Card and friends, Designing the User Interface 3rd Ed. by Ben Schneiderman, Human-Computer Interaction 2nd by Dix etc)

3 goals:
    assess the extent of the system's functionality
    assess the effect of the interface on the user
    identify any specific problems with the system

Jonas Salk spent 98% of his time documenting things that didnt work before he found the thing that did

Kenneth Boulding "The moral of evolution is that nothing fails like success because successful adaption leads to the loss of adaptability ... This is why a purely technical evaluation can be disasterous. It trains people only in thinking of things that have been thought of and this will eventually lead to disaster"

How evaluation is done depends on many factors
    stage of design
    novelty of project
    number of expected users
    criticality of the user interface
    costs of product and finanses allocated for testing
    time available
    experience of the design and evaluation team

Different types of evaluation

Evalutaing the Design
   cognitive walkthrough
        detailed review of a sequence of actions
        main focus is on how easy the system is to learn for a new user
        given
            - description of system prototype
            - description of task user is to perform
            - complete written list of actions user must perform
            - indication who the users are and what experience they have
    heuristic evaluation
        multiple evaluators
        main focus is evaluating early designes
        10 heuristics
            visibility of system status
            match between system and real world
            user control and freedom
            consistency and standards
            error prevention
            recognition rather than recall
            flexibility and effeciency of use
            aesthetic and minimalist design
            help users recognize, diagnose, recover from errors
            help and documentation
    review-based evaluation
            look through existing literature for previous related experiments
    model-based evaluation
            GOMS, keystroke-level model, etc

Evaluating the Implementation

    qualitative
    quantitative

    - Expert reviews
    - Usability Testing
        in the laboratory - controlled but may be unrealistic and short term focus
        in the field - longer term, more realistic but harder to control

        informal testing with mockups
        thinking aloud
        video and audio tapes

        tends to emphasize first time usage and limited number of features
        pilot studies are very important to find errors in the testing procedure
            run through the entire experiment with a small group of subjects
        participation should be voluntary and FULLY informed
        user should feel they are not being tested
        important to collect data about the participant's background
        privacy of records is very important

    Surveys
        Questionaire for User Interaction Satisfaction (QUIS)
        www.lap.umd.edu/QUISFolder/quisHome.html
    Acceptance Tests
         establish specific testable criteria for the aplication
            time to learn, speed of usagem rate of errors

Controlled Experiments
        come up with a hypothesis that is testable and measurable.
        set up an experiment where certain control variables are varied

        subjects
            match expected users
            should have at least 10 subjects, in general more is better
        variables
            variables that are manipulated - independent variables
                each independant variable can have a number of differnet values - levels
            variables that are measured - dependent variables
            manipulate independent variables to produce different conditions for comparison
            dependent variables should be only affected by the independent variables
        hypothesis
            prediction that varying the independant variables will affect the dependant variables in a certain way
            goal is to show that this prediction is correct
            disprove the null hypothesis (no difference in the dependent variable between levels of indep. variable)
            produce values to compare to various levels of significance
            if its significant, at some level of certainty, that differences would not have occurred by chance
        experimental method
            between groups (randomized) - each subject assigned to a different condition
                each user only does 1 condition
                experimetnatl condition - the variable has been manipulated
                control - experimental condition without manipulating the variable
                need more subjects
                differences among subjects can bias the results
            within groups
                each user performs under each condition
                possible problems with transfer of learning effects
                need fewer users
        statistics
            LOOK at the data and SAVE the data
 

Talk briefly agout groupware applications - notes available at: http://www.evl.uic.edu/aej/578/week5.html