1
|
- Week 4
- LBSC 690
- Information Technology
|
2
|
|
3
|
- 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
|
4
|
|
5
|
- 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
|
6
|
- Text
- Keyboard, optical character recognition
- Speech recognition, handwriting recognition
- Direct manipulation
- 2-D: mouse, trackball, touch pad, touch panel
- 3-D: wand, data glove
- Remote sensing
- Camera, speaker ID, head tracker, eye tracker
|
7
|
- Produces character codes
- ASCII: American Engli=
sh
- Latin-1: European languages
- UNICODE: (nearly) Any language
- Pictographic languages need “entry methods”
- Keyboard shortcuts help with data entry
- Different conventions for standard tasks abound
- VT-100 standard” functions are common
- Differing layouts can inhibit usability
|
8
|
|
9
|
|
10
|
- Match control actions with on-screen behavior
- Use a cursor for visual feedback if needed
- Rotary devices
- Linear devices
- Touch pad, touch screen, iPod shuttle, joystick
- Rate devices
|
11
|
|
12
|
- Visual
- Position/motion, color/contrast, symbols
- Auditory
- Position/motion, tones/volume, speech
- Haptic
- Mechanical, thermal, electrical, kinesthethic
- Olfactory
- Vestibular
|
13
|
- Image display
- Acoustic display
|
14
|
- Immersive visual
- Surround projection, Movable view
- Force feedback
- Pen, joystick, exoskeleton
- Tactile
- Vibrotactile, pneumatic, piezoelectric
- Vestibular
- Locomotive
- Stationary bicycle, treadmill
- Thermal, Olfactory
|
15
|
|
16
|
- Language-based interfaces
- Command line interfaces
- Interactive voice response systems
- Graphical User Interfaces (GUI)
- Direct manipulation
- Menus
- Virtual Reality (VR)
- Ubiquitous computing
|
17
|
- Select a metaphor
- Desktop, CD player, map, …
- Use icons to represent conceptual objects
- Watch out for cultural differences
- Manipulate those objects with feedback
- Select (left/right/double click), move (drag/drop)
|
18
|
- Windows (and panels)
- Resize, drag, iconify, scroll, destroy
- Selectors
- Menu bars, pulldown lists
- Buttons
- Labeled buttons, radio buttons, checkboxes
- Icons (images)
- Select, open, drag, group
|
19
|
|
20
|
|
21
|
- People transfer expectations from similar objects
- Positive: prior learning applies to new situation
- Negative: prior learning conflicts with new situation
|
22
|
|
23
|
- The perceived and actual fundamental properties
of the object that determine how it could be used
- Appearance indicates how the object should be used
- Chair for sitting
- Table for placing things on
- Knobs for turning
- Slots for inserting things into
- Buttons for pushing
- Complex things may need explaining but
simple things should not
- When simple things need instructions, design has failed
|
24
|
|
25
|
|
26
|
- Limitations of the actions possible perceived from object’s
appearance
- provides people with a range of usage possibilities
|
27
|
|
28
|
- The thing that happens right after an action is assumed by people to=
be
caused by that action
- Incorrect effect
- Invoking unfamiliar function just as computer hangs
- Causes “superstitious” behaviors
- Invisible effect
- Command with no apparent result often repeated
- e.g., mouse click to raise menu on unresponsive system
|
29
|
|
30
|
- Because a trashcan in Thailand may look like this:
- A Thai user is likely to be confused by this image popular in Apple
interfaces:
- Sun found their email icon problematic for some American urban dwell=
ers
who are unfamiliar with rural mail boxes.
|
31
|
- People learn “idioms” that work in a certain way
- Red means danger
- Green means safe
- Idioms vary in different cultures
- Light switches
- America: down is off
- Britain: down =
is on
- Faucets
- America: counter-clockwise on
- Britain: counter-clockwise off
|
32
|
- Windows
- Icons
- Menus
- Pointing devices
|
33
|
- Conserve screen space by hiding functions
- Hierarchically structured
- Logical grouping
- Conventional positioning
- Tradeoff between breadth and depth
- Too deep Þ
can become hard to find things
- Too broad Þ
becomes direct manipulation
|
34
|
- Keyboard-initiated direct manipulation
- Select menu items by typing part of a word
- After each letter, update the menu
- Once the word is displayed, user can click on it
- Examples: Google queri=
es,
Windows help
|
35
|
- Visual affordance
- Visible constraints
- Mapping
- Causality
- Transfer effects
- Idioms
- Metaphors
- Cultural associations
- Individual differences
|
36
|
- Informative feedback
- Easy reversal
- User in control
- Anticipatable outcomes
- Explainable results
- Browsable content
- Limited working memory load
- Query context
- Path suspension
- Alternatives for novices and experts
|
37
|
|
38
|
- The structural design of an “information space” to
facilitate access to content
- Two components:
- Static design
- Interaction design
|
39
|
- Organizing principles
- Logical: e.g., chronological, alphabetical
- Functional: by task
- Demographic: by user
- Metaphors
- Organizational: e.g., e-government
- Physical: e.g., online grocery store
- Functional: e.g., cut, paste
- Visual: e.g., octagon for stop
|
40
|
|
41
|
|
42
|
|
43
|
|
44
|
|
45
|
|
46
|
|
47
|
|
48
|
- Contrast: make different things different
- to bring out dominant elements
- to create dynamism
- Repetition: reuse design throughout the interface
- Alignment: visually connect elements
- Proximity: make effective use of spacing
- to group related and separate unrelated elements
|
49
|
- Chess analogy: a few simple rules that disguise an infinitely complex
game
- The three-part structure
- Openings: many strategies, lots of books about this
- End game: well-defined, well-understood
- Middle game: nebulous, hard to describe
- Information navigation has a similar structure!
- Middle game is underserved
|
50
|
|
51
|
|
52
|
|
53
|
|
54
|
|
55
|
- Drive to content
- Drive to advertisement
- Move up a level
- Move to next in sequence
- Jump to related
|
56
|
|
57
|
- Formative vs. summative
- Extrinsic vs. intrinsic
- Quantitative vs. qualitative
- User study vs. simulation
|
58
|
- Direct observation
- Evaluator observes users interacting with system
- in lab: user asked to complete pre-determined tasks
- in field: user goes through normal duties
- Validity depends on how contrived the situation is
- Think-aloud
- Users speak their thoughts while doing the task
- May alter the way users do the task
- Controlled user studies
- Users interact with system variants
- Correlate performance with system characteristics
- Control for confounding variables
|
59
|
- Time to learn
- Speed of performance
- Error rate
- Retention over time
- Subjective satisfaction
|
60
|
- LBSC 733: Networks
- LBSC 795: HCI Design and Evaluation
- INFM 700: Information Architecture
- LBSC 790: HCI Implementation
|
61
|
|
62
|
- Different devices have different capabilities
- Rendering maps logical tags to physical layout
- Controls line wrap, size, font…
- Place the title in the page border
- Render <h1> as 24pt Times
- Render <strong> as bold
- Somewhat browser-dependent
- Internet Explorer and Netscape make different choices
|
63
|
- “Tags” mark structure
- <html>a document</html>
- <ol>an ordered list</ol>
- <i>something in italics</i>
- Tag name in angle brackets <>
- Open/Close pairs
- Close tag is sometimes optional (if unambiguous)
|
64
|
- Head
- Body
- Headers: <h1> <h2> <h3> <h4> <h5>
- Lists: <ol>, <ul> (can be nested)
- Paragraphs:<p>
- Definitions: <dt><dd>
- Tables: <table> <tr> <td> </td> </tr>
</table>
- Role: <cite>, <address>, <strong>, …
|
65
|
- Font
- Typeface: <font face=3D“Arial”></font>
- Size: <font size=3D“+1”></font>
- Color: <font color=3D“990000”></font>
- http://webmonkey.wired.com/webmonkey/reference/color_codes/Emphasi=
s
- Bold: <b></b>
- Italics: <i></i>
|
66
|
|
67
|
- Internal anchors: somewhere on the same page
- <a href=3D“#students”> Students</a>
- Links to: <a name=3D“students”>Student
Information</a>
- External anchors: to another page
- <a href=3D“http://www.clis.umd.edu”>CLIS</a>=
;
- <a href=3D“http://www.clis.umd.edu#students”>CLIS
students</a>
- URL may be complete, or relative to current page
- <a href=3D“video/week2.rm”>2</a>
- File name part of URL is case sensitive (on Unix servers)
- Protocol and domain name are not case sensitive
|
68
|
- <img src=3D“URL”> or <img src=3D“path/fil=
e”>
- <img src=3D“http://www.clis.umd.edu/IMAGES/head.gif”=
>
- SRC: can be url or path/file
- ALT: a text string
- ALIGN: position of the image
- WIDTH and HEIGHT: size of the image
- Can use as anchor:
- <a href=3DURL>&=
lt;img
src=3DURL2></a>
- Example:
- http://www.umiacs.umd.edu/~daqingd/Image-Alignment.html
|
69
|
|
70
|
- <table align=3D“center”>
- <caption align=3D“right”>The caption</caption&g=
t;
- < tr align=3D“LEFT”>
- <th> Header1 </th>
- <th> Header2</th>
- </tr>
- <tr><td>first row, first item </td>
-  =
;
<td>first row, second item</td></tr>
- < tr><td>second row, first item</td>
-  =
;
<td>second row, second item</td></tr>
- </table>
- See also: http://www.umiacs.umd.edu/~daqingd/Simple-Table.html
|
71
|
- Divide browser pages into separate sections
- Useful when you want to scroll separately
- Each section can display an HTML page
- Example 1: menu frame on the left side of a page
- <frameset cols=3D“10%,90%" >
- <frame src=3D“template.html">
- <frame src=3D“images.html">
- </frameset>
- Example 2:
- http://www.hq.nasa.gov/alsj/frame.html
|
72
|
- Specify appearance, based on structure
- Style rules “cascade” from broad to narrow:
- Browser’s default behavior
- External style sheet
- Internal style sheet
- Inline style
|
73
|
- Inline style:
- Causes only the tag to have desired properties
- Internal stylesheet:
- Causes all tags to have the desired properties
|
74
|
- Define a custom style for standard HTML tag
|
75
|
- Store formatting metadata in a separate file
|
76
|
- Basic syntax:
- Example:
- Causes
- Font to be center-aligned
- Font to be Arial and black
|
77
|
- Key design issues:
- Content: What do you want to publish?
- Style: How do you want to present it?
- Syntax: How can you achieve that presentation?
- Sources of information
- Online tutorials (there are lots of these)
- Technical materials (e.g., the W3C HTML spec)
|
78
|
- Design for generic browsers
- And test on every version you wish to support
- Provide appropriate “access points”
- User needs and navigation strategies differ
- Design useful navigational aids
- A Web search may lead to the middle of a site
- Include some indication of currency
- Date of last update, “new” icons, etc.
- Indicate who is responsible for the content
- Helps readers assess authority
|
79
|
- Design for device independence
- Maintain compatibility with earlier browsers
- Provide alternative pages if necessary
- Provide alternatives to aural and visual content
- Alt tags for images, transcripts for audio
- Make is easy for assistive devices to work
- Use structural (rather than layout-oriented) markup
- Give a title to each frame
- Only use HTML tables for table data (not content layout)
- Use markup to indicate language switching
|
80
|
- A text equivalent for every non-text element shall be provided.
- Equivalent alternatives for any multimedia presentation shall be
synchronized with the presentation.
- Web pages shall be designed so that all information conveyed with co=
lor
is also available without color.
- Documents shall be organized so they are readable without requiring =
an
associated style sheet.
- Redundant text links shall be provided for each active region of a
server-side image map.
- Client-side image maps shall be provided instead of server-side image
maps except where the regions cannot be defined with an available
geometric shape.
- Row and column headers shall be identified for data tables.
- Markup shall be used to associate data cells and header cells for da=
ta
tables that have two or more logical levels of row or column headers=
.
- Frames shall be titled with text that facilitates frame identificati=
on
and navigation.
- Pages shall be designed to avoid causing the screen to flicker with a
frequency >2 Hz and <55 Hz.
- A text-only page, with equivalent information or functionality, shal=
l be
provided when compliance cannot be accomplished in any other way. The
content shall be updated when the primary page changes
- When pages use scripting languages to display content or to create
interface elements, the information provided by the script shall be
identified with functional text that can be read by assistive
technology.
- When a web page requires that an applet, plug-in or other applicatio=
n be
present on the client system to interpret page content, the page must
provide a link to a plug-in or applet that complies with the above.<=
/li>
- When electronic forms are designed to be completed on-line, the form
shall allow people using assistive technology to access the informat=
ion,
field elements, and functionality required.
- A method shall be provided that permits users to skip repetitive
navigation links.
- When a timed response is required, the user shall be alerted and giv=
en
sufficient time to indicate more time is required.
|
81
|
- Goal is to create Web pages, not learn HTML!
- Several are available
- Macromedia Dreamweaver available commercially
- Microsoft Word (Page->Edit with Word in IE 7
- Many more options available on www.tucows.com
- Tend to use physical layout tags extensively
- Detailed control can make hand-editing difficult
- You may still need to edit the HTML file
- Some editors use browser-specific features
- Some HTML features may be unavailable
- File names may be butchered when you upload
|
82
|
- Syntax checking: cross-browser compatibility
- http://validator.w3.org
- Try it on http://www.umd.edu L
- Style checking: Section 508 complianc=
e
- http://www.cynthiasays.com/
- Try it on http://www.umd.edu L
|
83
|
- HTML
- Confounds structure and appearance (XML)
- HTTP
- Can’t recognize related transactions (Cookies)
- URL
- Links breaks when you move a file (PURL)
|
84
|
- Content
- Structure
- Appearance
- Behavior
|
85
|
- Early standards were “typesetting languages”
- HTML was developed for the Web
- Too specialized for other uses
- Specialized standards met other needs
- Change tracking in Word, annotating manuscripts, …
- XML seeks to unify these threads
- One standard format for printing, viewing, processing
|
86
|
- SGML was too complex
- HTML was too simple
- Goals for XML
- Easily adapted to specific tasks
- Rendering Web pages
- Encoding metadata
- “Semantic Web”
- Easily created
- Easily processed
- Easily read
- Concise
|
87
|
- Text Encoding Initiative
- For adding annotation to historical manuscripts
- http://www.tei-c.org/
- Encoded Archival Description
- To enhance automated processing of finding aids
- http://www.loc.gov/ead/
- Metadata Encoding and Transmission Standard
- Bundles descriptive and administrative metadata
- http://www.loc.gov/standards/mets/
|
88
|
|
89
|
|
90
|
- Definition: DTD
- Known types of entities with “labels”
- Defines part-whole and is-a relationships
- Markup: XML
- “Tags” regions of text with labels
- Markup: XLink
- Defines “hypertext” (and other) link relationships
- Presentation: XSL
- Specifies how each type of entity should be “rendered”<=
/li>
|
91
|
- View “The Song of the Wandering Aengus”
- http://www.umiacs.umd.edu/~oard/teaching/690/spring08/notes/3/xml.h=
tm
- Built from three files
- yeats01.xml
- poem01.dtd
- poem01.xsl
|
92
|
|
93
|
|
94
|
|
95
|
|
96
|
|
97
|
- XML is case sensitive
- XML declaration is the first statement
- An XML document is a “tree”
- Must contain one root element
- Other elements must be properly nested
- All start tags must have end tags
- Attribute values must have quotation marks
- Certain characters are “reserved”
- For example: < is used to represent <
|
98
|
|
99
|
- Google Maps
- Google Suggest
- http://www.google.com/webhp?complete=3D1&hl=3Den
- Sajax Tables
- http://labs.revision10.com/?p=3D5
- Sajax
- http://www.modernmethod.com/sajax/
|
100
|
|
101
|
|
102
|
|
103
|
- CML – Chemical Markup Language
- CellML – biological models
- BSML – bioinformatic sequences
- MAGE-ML – MicroArray Gene Expression
- XSTAR – for archaeological research
- MARCXML – MARC in XML
- AML – astronomy markup language
- SportsML – for sharing sports data
|
104
|
- Learning to build simple Web pages is easy
- Which is good news for the homework!
- All documents are structured documents
- But some expose the structure better than others
- XML is a flexible markup language
- Complete separation of structure and appearance
|
105
|
- On a sheet of paper, answer the following (ungraded) question (no
names, please):
- What was the muddiest point in today’s class?
|