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

Roadmap • Sitemaps • Sitemaps • Wireframes 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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

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 

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 

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 

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 

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 

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 

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 

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 

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 

Roadmap • Sitemaps • Sitemaps • Wireframes 

Wireframes • Views + user interaction + navigation 

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 

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 

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