Visual Vocabulary for Rich Internet Applications

Anthony Colfelt - Visual Vocabulary for RIAs

Visual VocabularyVisual Vocabulary

for Rich Internetfor Rich Internet

ApplicationsApplications

Anthony Colfelt


Tell Tell ‘‘em em what youwhat you’’re re gonna gonna tell themtell them……

Introducing me,introducing you…

Some definitions of terms

JJG’s VisVocab Recap

Conditional Interfaces vsRich interfaces

Rich App Anatomy

Rich VisVocab symbols

Diagramming with theRich VisVocab


WhatWhat’’s a Rich Internet Application?s a Rich Internet Application?

… Web applications thathave the features andfunctionality of traditionaldesktop applications.[Wikipedia]

Typically run in a Webbrowser, or do not requiresoftware installation

Enabled by technologiessuch as Adobe Flash™and JavaScript

Gmail was a leading RIA that mimicked theuser experience of desktop email clients

3


WhatWhat’’s a Flow Chart?s a Flow Chart?

… attempt to visualize aprocess around a specifictask or function… oftenrepresent a series ofscreens that collect anddisplay information to theusers. [Dan Brown -

Communicating Design]

Can be used to specify ausers movement andinteraction flow through asystem

4

Simple flow charts show how a user movesthrough pages and functions


Why do Flows?Why do Flows?

Communicate to a broadarray of stakeholders in avisual, easy-to-follow way

Work through a user’sjourney through a system

Expose holes in thinkingand design

Specify the desiredbehavior of the system

?

? ?

Y N


WhatWhat’’s Visual Vocabulary?s Visual Vocabulary?

Conceived by Jesse JamesGarrett, released in 2000

…outlines a basicsymbology fordiagramming informationarchitecture andinteraction designconcepts, and providesguidelines for the use ofthese elements. [Jesse James

Garrett - http://jjg.net/ia/visvocab]

Capable of documentingbasic conditionality

The VisVocab includes symbols to documentplurality, such as concurrent actions andsystem artifacts like downloadable files


Premises of Diagramming Interaction FlowPremises of Diagramming Interaction Flow

Rectangle = Page

Connectors labeled withactions

Symbols indicate types ofcondition

Conditions referenced innotes section

Page-level interaction nottypically captured


Elements Recap - PageElements Recap - Page

Simple Rectangle

Connected to other pageswith arrow connectors ornon-linear connectors


Elements Recap - ConnectorsElements Recap - Connectors

Relationships betweenelements are depictedwith simple lines orconnectors

Convey directionality toindicate how the user willmove through the systemtoward completion of aparticular task.


Elements Recap - Conditional ConnectorElements Recap - Conditional Connector

A path that is onlyavailable under certainconditions

A dotted line with anarrowhead at one end torepresent the direction ofthe interaction flow.

The condition under whichthe path is available isdocumented near the line.


Elements Recap - Continuation PointsElements Recap - Continuation Points

Square Brackets

Continuation Points allowseparation of ourdiagrams into easilydigestible sections.

They bridge the gapsbetween pages.


Elements Recap - Flow ReferenceElements Recap - Flow Reference

Octagonal shape

Refers to another flowdiagram for more detail


Elements Recap - Decision PointElements Recap - Decision Point

Diamond denotes whereuser action maygenerate one of a numberof results for a givenpath.

Usually binary featuring‘yes’ or ‘no’ outcomes asdefined by the conditionposed as a question.


Elements Recap - Conditional AreaElements Recap - Conditional Area

A dotted line around theoutside of the group ofelements to which acondition applies.

Condition documentednear the line.


Elements Recap - Conditional BranchElements Recap - Conditional Branch

Triangle indicates wherethe system determinesone of a number ofpossible results as definedby the condition.


Elements Recap - Conditional SelectorElements Recap - Conditional Selector

Isosceles trapezoid usedto show where thesystem determines

multiple outcomes asdefined by the condition.


Elements Recap - Concurrent SetElements Recap - Concurrent Set

Indicates where thesystem performs multipleactions at the same time.


ConditionalConditional

InterfacesInterfaces

Classmates.comClassmates.com


Diagramming Diagramming ConditionalConditional Interfaces Interfaces

Pages which are servedwith content determinedby conditions

Data-driven UI

Not ‘Rich’ - data does notdynamically change as aresult of interaction withthe UI


Rich InterfacesRich Interfaces

myfamily.com Single Photomyfamily.com Single Photo


The problem - diagramming RIA FlowThe problem - diagramming RIA Flow

One page facilitatesdialogue between userand system, withoutrequiring a new page tobe served

Page to page metaphorbreaks down

No information capturedabout dynamically serveddata


The problem - diagramming RIA FlowThe problem - diagramming RIA Flow

Captures what data ischanged dynamically

Does not specify how datais manipulated and servedthrough the UI Controlsor Elements

Does not specifyinteraction styles andbehaviors e.g. statetransitions


Rich Anatomy:Rich Anatomy:

Pages, ControlsPages, Controls

and elementsand elements

myfamilymyfamily.com Single Photo.com Single Photo


Pages, Controls and elementsPages, Controls and elements

Captures the nestednature of richapplications.

Rich Pages containControls

Controls contain Elements


Page, Control,Page, Control,

ElementElement


Pages, Controls and ElementsPages, Controls and Elements

Captures the nestednature of richapplications.

Rich Pages can containControls and Elements

Controls contain Elementsor other Controls


Rich Rich VisVocab VisVocab Elements - Rich PageElements - Rich Page

Rectangle with a ‘FlowReference’ inside it

A collection of controlsand/or Elements

Draw a new Rich Pageelement to describe acollection of controls andelements that alwaysexist on screen togetheras an identifiable unit

Some controls andElements may appear ordisappear based oncertain conditions.


Single PhotoSingle Photo

Rich PageRich Page


Rich Rich VisVocab VisVocab Symbols - ControlSymbols - Control

Rectangle with solid barat top, contains a ‘flowreference’

A collection of Elements.

The Control manipulatesElements as a result ofinteraction or conditions.


Next-Previous ControlNext-Previous Control


Rich Rich VisVocab VisVocab Symbols - ElementSymbols - Element

Rectangle with solid bar attop

The most granular unit –does not contain any otherunits.

Two classes of elements -Interactive Elements andDisplay Elements

Interactive Elements(I_ELMT) have states ofinteraction

Display elements(D_ELMT) do not havestates.


PhotoPhoto

Display ElementDisplay Element


Russian DollsRussian Dolls

Controls inside pages…

Controls inside Controls

Elements inside Controls


Display Elements and Interactive ElementsDisplay Elements and Interactive Elements

DisplayElement

InteractiveElement


Rich Rich VisVocab VisVocab Elements - StateElements - State

Dotted Rectangle with dottedbar at top

Represents a State of anInteractive Element

State 2

State 1


TransitionsTransitions

Symbol borrowed frommovie editing software

Used to note animationeffects in the UI

Applied on a connector toindicate a visual effectthat transitions onepage/control/element/state

to another.


Putting it intoPutting it into practicepractice……


Macro FlowMacro Flow


NotesNotes……


Zoom in: SingleZoom in: Single

Photo Rich PagePhoto Rich Page


Rich Page FlowRich Page Flow


Control Flow (Micro)Control Flow (Micro)


Control Flow with TransitionsControl Flow with Transitions……


Pattern LibrariesPattern Libraries

Controls become patterns

Elements become UIStyles

Differences betweeninstances of a control areexpressed throughparameters


AcknowledgementsAcknowledgements

Jesse James Garrett -author of the original andencourager ofadvancements

Rick Spencer - ideabouncer, experimenterand contributor

Jason Williams fromIntuitect - idea bouncerand challenger

cheers ta thank youthanks acclaim admire adore adulate

advocate aggrandize applaudappreciate approve bless

boost bow celebrate cite

clap commend compliment

distinguish elevate endorse exalt

extol flatter glorify hail honorkudize laud pay tribute proclaim

rave over recommend resound

reverence tout worship