human-computer...
TRANSCRIPT
![Page 2: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/2.jpg)
CARD SORTING
2
![Page 3: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/3.jpg)
3
![Page 4: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/4.jpg)
4
![Page 5: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/5.jpg)
5
![Page 6: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/6.jpg)
6
![Page 7: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/7.jpg)
7
![Page 8: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/8.jpg)
INFORMATION ARCHITECTURE AND INTERACTION DIAGRAM
8
![Page 9: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/9.jpg)
• A visual vocabulary for describing information architecture and interaction design, by Jesse James Garrett
9
![Page 10: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/10.jpg)
10
![Page 11: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/11.jpg)
11
AJAX
![Page 12: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/12.jpg)
12
![Page 13: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/13.jpg)
13
Software Interface: querying database
![Page 14: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/14.jpg)
14
Hypertext system
Hypertext system
![Page 15: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/15.jpg)
15
Software Interface
![Page 16: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/16.jpg)
16
Hypertext system
![Page 17: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/17.jpg)
17
![Page 18: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/18.jpg)
Audiences
1. Project sponsors and managers use them to obtain a general sense of the scope and form of the project.
2. Content producers use them to derive content requirements.
3. Visual and interface designers use them to derive a count of how many unique page designs must be produced, and to obtain an initial sense of the navigational and interface requirements for these designs.
4. Technologists use them to derive functional requirements.
5. Information architects and interaction designers use them to develop detailed navigational and interface requirements for each page.
18
![Page 19: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/19.jpg)
Goal
• To guide a (team of) designer or (team of) programmer who would produce the website
19
![Page 20: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/20.jpg)
Requirements
• Whiteboard-compatible: The vocabulary should be simple enough that diagrams can be sketched quickly by hand. The elements of the vocabulary should be distinct enough from each other that moderately sloppy drawing cannot compromise the clarity of the diagram.
• Tool-independent: The vocabulary should be designed so that specialized software tools are not required in order to construct diagrams. The vocabulary should not favor the use of any particular software tool, but should instead enable architects to work with the tools they are most comfortable using.
20
![Page 21: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/21.jpg)
Requirements
• Small and self-contained: Because the diagrams are used by a diverse range of audiences with differing levels of knowledge of (or even interest in) diagramming systems used in other areas of technical development, the vocabulary should not require such knowledge or interest. The total set of elements should be kept as small as possible, maintaining a strict one-to-one correlation between concepts and symbols, so that the vocabulary can be learned and applied quickly. The concepts expressed by a diagram may be arbitrarily complex; the means of their expression should not be.
21
![Page 22: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/22.jpg)
Level of detail
• The diagram focuses on the macrostructure, providing just enough detail to enable team members to get the "big picture“
• The task of the architect is to determine the appropriate level of detail to meet this objective
• The specific page-level detail, or microstructure, is detailed in other documents that the architect may not be primarily responsible for developing
22
![Page 23: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/23.jpg)
ELEMENTS
23
![Page 24: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/24.jpg)
Page
• The page is a unit of presentation, not (necessarily) a unit of implementation -- one page in your diagram may correspond to multiple HTML files (as in a frameset interface) or multiple units of code (as in a server-side include or database-driven implementation)
24
![Page 25: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/25.jpg)
File
• A resource without navigational properties
• Files are delivered to the user for use outside a Web browser environment (such as audio or video files, stand-alone documents like PDFs, or executables)
25
![Page 26: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/26.jpg)
Stack
• Pagestack: a group of functionally identical pages whose navigational properties are immaterial to the macrostructure of the site
• Filestack: a group of files that receive identical navigational treatment and can be classified as a single entity (such as a collection of downloadable games or a library of PDF instruction manuals)
26
![Page 27: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/27.jpg)
27
![Page 28: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/28.jpg)
28
A B 1 2
Labels: These don't need to correlate to actual designations such as HTML <TITLE> elements or filenames, but they do need to be unique for each page or file in the diagram
![Page 29: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/29.jpg)
RELATIONSHIPS
29
![Page 30: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/30.jpg)
• Relationships between elements are depicted with simple lines or connectors. These conceptual relationships will inevitably translate into navigational relationships -- but not all navigational relationships will appear in the diagram
30
![Page 31: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/31.jpg)
31
![Page 32: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/32.jpg)
• Arrows: convey directionality to indicate how the user will move through the system toward completion of a particular task
32
![Page 33: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/33.jpg)
• Arrows are not like the arrows indicating a one-way street, but rather like the arrows indicating the way to the food court in the mall
• The user is not prohibited from moving in the opposite direction; the arrow merely indicates the direction in which the user is likely to want to go
33
![Page 34: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/34.jpg)
34
Crossbar
![Page 35: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/35.jpg)
35
Labels: the use of these should be limited to cases in which the action taken by the user needs to be clarified. If the labels become long and unwieldy and start to clutter the diagram, point the reader toward a footnote or appendix entry.
![Page 36: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/36.jpg)
OTHER ELEMENTS
36
![Page 37: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/37.jpg)
37
Concurrent set: a user action generates multiple simultaneous results (such as spawning a pop-up window at the same time a page is loaded in the main window, or displaying a page while a file is being downloaded)
![Page 38: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/38.jpg)
38
Continuation point: list one or more sources or destinations as needed.
![Page 39: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/39.jpg)
39
Area: used to identify a group of pages that share one or more common attributes (such as appearing in a pop-up window, or having some unique design treatment). Use labels to identify these attributes or (as with connectors), refer to notes elsewhere in the document if you have a lot to say.
![Page 40: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/40.jpg)
40
Iterative area: repeating the same basic structure as it is applied to a number of functionally identical information elements.
![Page 41: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/41.jpg)
41
Reusable components: flow areas and references
![Page 42: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/42.jpg)
CONDITIONAL ELEMENTS
42
![Page 43: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/43.jpg)
43
Decision point
![Page 44: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/44.jpg)
44
Conditional connector: is used when a path may or may not be presented to the user depending upon whether one or more conditions are met.
![Page 45: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/45.jpg)
45
Conditional branch: the system must select one path among a number of mutually exclusive options to be presented to the user
![Page 46: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/46.jpg)
46
Conditional selector element: functions much like the conditional branch, with one important difference: with the selector, the various downstream paths are not mutually exclusive. any number of the paths that fulfill the condition(s) may be presented to the user.
![Page 47: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/47.jpg)
47
Cluster: the cluster can appear downstream from either a conditional branch or a conditional selector.
![Page 48: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/48.jpg)
48
Conditional area: when one or more conditions applies to a group of pages
![Page 49: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/49.jpg)
49
![Page 50: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/50.jpg)
EXAMPLE
50
![Page 51: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/51.jpg)
51
![Page 52: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/52.jpg)
52
![Page 53: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/53.jpg)
53
![Page 54: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/54.jpg)
TOOLS
54
![Page 55: Human-Computer Interactionrua.ua.es/dspace/bitstream/10045/51827/2/2-IA_and_interaction_diagram.pdf · •Arrows are not like the arrows indicating a one-way street, but rather like](https://reader034.vdocuments.us/reader034/viewer/2022051911/6001592020e7e75fa14cd59c/html5/thumbnails/55.jpg)
55