Notations forNotations forInformation Architecture

& UI DesignIvano MalavoltaIvano Malavolta

ivano.malavolta@univaq.it

http://www.di.univaq.it/malavolta

Roadmap

• Sitemaps• Sitemaps

• Wireframes

Sitemaps

They represent:

• relationshiprelationshiprelationshiprelationship of content to other content and• relationshiprelationshiprelationshiprelationship of content to other content and

• how the user travelstravelstravelstravels through the information space

Symbology

We will use a basic symbologyWe will use a basic symbology

for diagramming information architectureinformation architectureinformation architectureinformation architecture

and interaction design conceptsinteraction design conceptsinteraction design conceptsinteraction design concepts

Proposed by Jesse James GarrettProposed by Jesse James Garrett

he coined the term AjaxAjaxAjaxAjax, by the way

Information Architecture

It is aboutIt is about

• Conceptual StructureStructureStructureStructure

• Organization of ContentContentContentContent

It is NOTNOTNOTNOT about navigation among views

Interaction Design

It is about

• navigationnavigationnavigationnavigation among views

• how the user flowsflowsflowsflows through defined tasks

It is NOTNOTNOTNOT about navigation detailsIt is NOTNOTNOTNOT about navigation details

buttons, checkboxes, pictures, etc… are defined here, they are part of wireframes

Goal of the symbology

to describe at a high level high level high level high 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 managersmanagersmanagersmanagers and and and and SponsorsSponsorsSponsorsSponsors– to get a general sense of the project

ContentContentContentContent ProducersProducersProducersProducers– to derive content requirements

Interface Interface Interface Interface DesignersDesignersDesignersDesigners– to derive interface design requirements

TechnologistsTechnologistsTechnologistsTechnologists– to derive functional requirements

Information Information Information Information ArchitectsArchitectsArchitectsArchitects– to derive navigational and interface requirements

Conceptual model

The system presents the user with pathspathspathspaths

The user moves along these paths through actionsactionsactionsactionsThe user moves along these paths through actionsactionsactionsactions

These actions then cause the system to generate resultsresultsresultsresults

Pages

Pages are the fundamental unit of presentationthey are also called viewsviewsviewsviewsthey are also called viewsviewsviewsviews

not (necessarily) a unit of implementationone 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 propertiesproperties

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

RelationshipsRelationshipsRelationshipsRelationships between elements are depicted with simple linesdepicted with simple lines

ArrowsArrowsArrowsArrows to convey directionality

they indicate how the user will move through the system

A crossbarcrossbarcrossbarcrossbar 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 conditionsconditionsconditionsconditions are met

Continuations

Continuation points allow us to splitsplitsplitsplit 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 attributesone 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 repeatingrepeatingrepeatingrepeating the same basic structure the same basic structure the same basic structure the same basic structure as it is applied repeatingrepeatingrepeatingrepeating the same basic structure the same basic structure the same basic structure the same basic structure as it is applied to a number of functionally identical information elementsex. 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 a conditions applies to a conditions applies to a conditions applies to a group of pagesgroup of pagesgroup of pagesgroup of pagesgroup of pagesgroup of pagesgroup of pagesgroup of pageses. 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 diagramrepeatedly in the diagrames. login procedure

They require the two special types of continuation points: entryentryentryentry points and exitexitexitexit points

Concurrent Set

It is used when a user action generates multiplemultiplemultiplemultiplesimultaneous resultssimultaneous resultssimultaneous resultssimultaneous resultssimultaneous resultssimultaneous resultssimultaneous resultssimultaneous results

Decision Point

It is used when a user action may generate one of a number of resultsnumber of resultsnumber of resultsnumber of results, and the system must make a number of resultsnumber of resultsnumber of resultsnumber of results, and the system must make a decisiondecisiondecisiondecision 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 optionsmutually exclusive optionsmutually exclusive optionsmutually exclusive options

Conditional Selector

Same as conditional branch, but paths arepaths arepaths arepaths are

not mutually exclusivenot mutually exclusivenot mutually exclusivenot mutually exclusivenot mutually exclusivenot mutually exclusivenot mutually exclusivenot mutually exclusive

Cluster

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

Roadmap

• Sitemaps• Sitemaps

• Wireframes

Wireframes

• Views + user interaction + navigation

Lo-Fi Wireframes

A Lo-Fi wireframe is builtbuiltbuiltbuilt on the on the on the on the sitemapsitemapsitemapsitemap and has a focus onfocus on

• the LAYOUTLAYOUTLAYOUTLAYOUT of the views

• interactioninteractioninteractioninteraction with elements within the views

Low fidelity Low fidelity Low fidelity Low 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 refinementrefinementrefinementrefinement ofofofof a loa loa loa lo----fi fi fi fi wireframewireframewireframewireframewith a focus onwith a focus on

• how each view will appearappearappearappear in in in in detailsdetailsdetailsdetails

• sensorysensorysensorysensory sensationssensationssensationssensations of the user

typography

colour palettecolour palette

textures

+ everything about the look & feel

References

http://jjg.net/ia/visvocab

Chapter 7