Slide 1

Slide 1 text

Notations for Notations for Information Architecture Ivano Malavolta Ivano Malavolta [email protected] http://www.di.univaq.it/malavolta

Slide 2

Slide 2 text

Roadmap • Sitemaps • Sitemaps • Wireframes

Slide 3

Slide 3 text

Sitemaps They represent: • relationship relationship relationship relationship of content to other content and • relationship relationship relationship relationship of content to other content and • how the user travels travels travels travels through the information space

Slide 4

Slide 4 text

Symbology We will use a basic symbology We will use a basic symbology for diagramming information information information information architecture architecture architecture architecture and interaction design interaction design interaction design interaction design concepts concepts concepts concepts Proposed by Jesse James Garrett Proposed by Jesse James Garrett he coined the term Ajax Ajax Ajax Ajax, by the way

Slide 5

Slide 5 text

Information Architecture It is about It is about • Conceptual Structure Structure Structure Structure • Organization of Content Content Content Content It is NOT NOT NOT NOT about navigation among views

Slide 6

Slide 6 text

Interaction Design It is about • navigation navigation navigation navigation among views • how the user flows flows flows flows through defined tasks It is NOT NOT NOT NOT about navigation details It is NOT NOT NOT NOT about navigation details buttons, checkboxes, pictures, etc… are defined here, they are part of wireframes

Slide 7

Slide 7 text

Goal of the symbology to describe at a high high high high level level level level the structure and flow of the user experience of a website structure and flow of the user experience of a website or app Features: • Simple the focus is on the • Tool-independent • Small • Self-contained the focus is on the macro-structure

Slide 8

Slide 8 text

Audience Project Project Project Project managers managers managers managers and and and and Sponsors Sponsors Sponsors Sponsors – to get a general sense of the project Content Content Content Content Producers Producers Producers Producers – to derive content requirements I I I Interface nterface nterface nterface Designers Designers Designers Designers – to derive interface design requirements Technologists Technologists Technologists Technologists – to derive functional requirements Information Information Information Information Architects Architects Architects Architects – to derive navigational and interface requirements

Slide 9

Slide 9 text

Conceptual model The system presents the user with paths paths paths paths The user moves along these paths through actions actions actions actions The user moves along these paths through actions actions actions actions These actions then cause the system to generate results results results results

Slide 10

Slide 10 text

Pages Pages are the fundamental unit of presentation they are also called views views views views they are also called views views views views not (necessarily) a unit of implementation one page in your diagram may correspond to multiple files Pages can be organized into a page stack A unique label can be associated to a page

Slide 11

Slide 11 text

Files Files are parcels of data without navigational properties properties They are delivered to the user for use outside the app Files can be organized into a file stack A unique label can be associated to a file

Slide 12

Slide 12 text

Connectors Relationships Relationships Relationships Relationships between elements are depicted with simple lines depicted with simple lines Arrows Arrows Arrows Arrows to convey directionality they indicate how the user will move through the system A crossbar crossbar crossbar crossbar on the opposite end of the arrow is used to prohibit upstream movement

Slide 13

Slide 13 text

Conditional Connectors It is used when a path may or may not be presented to the user depending upon whether one or more the user depending upon whether one or more conditions conditions conditions conditions are met

Slide 14

Slide 14 text

Continuations Continuation points allow us to split split split split our diagrams

Slide 15

Slide 15 text

Areas They are used to identify a group of pages group of pages group of pages group of pages that share one or more common attributes one or more common attributes ex. appearing in a pop-up window having some unique design treatment

Slide 16

Slide 16 text

Iterative Areas They are used to represent architectures that involve repeating repeating repeating repeating the the the the same basic structure same basic structure same basic structure same basic structure as it is applied repeating repeating repeating repeating the the the the same basic structure same basic structure same basic structure same basic structure as it is applied to a number of functionally identical information elements ex. a product catalog in which each product has a number of associated pages

Slide 17

Slide 17 text

Conditional Areas It is used when one or more conditions applies to conditions applies to conditions applies to conditions applies to a a a a group group group group of of of of pages pages pages pages group group group group of of of of pages pages pages pages es. access permissions an outgoing result is generated if the condition is not fulfilled

Slide 18

Slide 18 text

Flow areas It encloses a sequence of steps sequence of steps sequence of steps sequence of steps that will appear repeatedly in the diagram repeatedly in the diagram es. login procedure They require the two special types of continuation points: entry entry entry entry points and exit exit exit exit points

Slide 19

Slide 19 text

Concurrent Set It is used when a user action generates multiple multiple multiple multiple simultaneous simultaneous simultaneous simultaneous results results results results simultaneous simultaneous simultaneous simultaneous results results results results

Slide 20

Slide 20 text

Decision Point It is used when a user action may generate one of a number of results number of results number of results number of results, and the system must make a number of results number of results number of results number of results, and the system must make a decision decision decision decision about which result is to be presented

Slide 21

Slide 21 text

Conditional Branch It is used is when the system (not based on user action) must select one path among a number of action) must select one path among a number of mutually exclusive mutually exclusive mutually exclusive mutually exclusive options options options options

Slide 22

Slide 22 text

Conditional Selector Same as conditional branch, but paths are paths are paths are paths are not mutually exclusive not mutually exclusive not mutually exclusive not mutually exclusive not mutually exclusive not mutually exclusive not mutually exclusive not mutually exclusive

Slide 23

Slide 23 text

Cluster Similar to conditional selector, system allows more more more more than than than than one path one path one path one path for certain for certain for certain for certain conditions conditions conditions conditions than than than than one path one path one path one path for certain for certain for certain for certain conditions conditions conditions conditions

Slide 24

Slide 24 text

Roadmap • Sitemaps • Sitemaps • Wireframes

Slide 25

Slide 25 text

Wireframes • Views + user interaction + navigation

Slide 26

Slide 26 text

Lo-Fi Wireframes A Lo-Fi wireframe is built built built built on the on the on the on the sitemap sitemap sitemap sitemap and has a focus on focus on • the LAYOUT LAYOUT LAYOUT LAYOUT of the views • interaction interaction interaction interaction with elements within the views L L L Low ow ow ow fidelity fidelity fidelity fidelity for preventing confusion of visual design confusion of visual design concepts with information design concepts

Slide 27

Slide 27 text

Hi-Fi Wireframes An Hi-Fi wireframe is a refinement refinement refinement refinement of of of of a a a a lo lo lo lo- - - -fi fi fi fi wireframe wireframe wireframe wireframe with a focus on with a focus on • how each view will appear appear appear appear in in in in details details details details • sensory sensory sensory sensory sensations sensations sensations sensations of the user typography colour palette colour palette textures + everything about the look & feel

Slide 28

Slide 28 text

References http://jjg.net/ia/visvocab Chapter 7