Anthony Colfelt - Visual Vocabulary for RIAs
Visual VocabularyVisual Vocabulary
for Rich Internetfor Rich Internet
ApplicationsApplications
Anthony Colfelt
Anthony Colfelt - Visual Vocabulary for RIAs
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
Anthony Colfelt - Visual Vocabulary for RIAs
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
Anthony Colfelt - Visual Vocabulary for RIAs
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
Anthony Colfelt - Visual Vocabulary for RIAs
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
Anthony Colfelt - Visual Vocabulary for RIAs
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
Anthony Colfelt - Visual Vocabulary for RIAs
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
Anthony Colfelt - Visual Vocabulary for RIAs
Elements Recap - PageElements Recap - Page
Simple Rectangle
Connected to other pageswith arrow connectors ornon-linear connectors
Anthony Colfelt - Visual Vocabulary for RIAs
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.
Anthony Colfelt - Visual Vocabulary for RIAs
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.
Anthony Colfelt - Visual Vocabulary for RIAs
Elements Recap - Continuation PointsElements Recap - Continuation Points
Square Brackets
Continuation Points allowseparation of ourdiagrams into easilydigestible sections.
They bridge the gapsbetween pages.
Anthony Colfelt - Visual Vocabulary for RIAs
Elements Recap - Flow ReferenceElements Recap - Flow Reference
Octagonal shape
Refers to another flowdiagram for more detail
Anthony Colfelt - Visual Vocabulary for RIAs
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.
Anthony Colfelt - Visual Vocabulary for RIAs
Elements Recap - Conditional AreaElements Recap - Conditional Area
A dotted line around theoutside of the group ofelements to which acondition applies.
Condition documentednear the line.
Anthony Colfelt - Visual Vocabulary for RIAs
Elements Recap - Conditional BranchElements Recap - Conditional Branch
Triangle indicates wherethe system determinesone of a number ofpossible results as definedby the condition.
Anthony Colfelt - Visual Vocabulary for RIAs
Elements Recap - Conditional SelectorElements Recap - Conditional Selector
Isosceles trapezoid usedto show where thesystem determines
multiple outcomes asdefined by the condition.
Anthony Colfelt - Visual Vocabulary for RIAs
Elements Recap - Concurrent SetElements Recap - Concurrent Set
Indicates where thesystem performs multipleactions at the same time.
Anthony Colfelt - Visual Vocabulary for RIAs
ConditionalConditional
InterfacesInterfaces
Classmates.comClassmates.com
Anthony Colfelt - Visual Vocabulary for RIAs
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
Anthony Colfelt - Visual Vocabulary for RIAs
Rich InterfacesRich Interfaces
myfamily.com Single Photomyfamily.com Single Photo
Anthony Colfelt - Visual Vocabulary for RIAs
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
Anthony Colfelt - Visual Vocabulary for RIAs
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
Anthony Colfelt - Visual Vocabulary for RIAs
Rich Anatomy:Rich Anatomy:
Pages, ControlsPages, Controls
and elementsand elements
myfamilymyfamily.com Single Photo.com Single Photo
Anthony Colfelt - Visual Vocabulary for RIAs
Pages, Controls and elementsPages, Controls and elements
Captures the nestednature of richapplications.
Rich Pages containControls
Controls contain Elements
Anthony Colfelt - Visual Vocabulary for RIAs
Page, Control,Page, Control,
ElementElement
Anthony Colfelt - Visual Vocabulary for RIAs
Pages, Controls and ElementsPages, Controls and Elements
Captures the nestednature of richapplications.
Rich Pages can containControls and Elements
Controls contain Elementsor other Controls
Anthony Colfelt - Visual Vocabulary for RIAs
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.
Anthony Colfelt - Visual Vocabulary for RIAs
Single PhotoSingle Photo
Rich PageRich Page
Anthony Colfelt - Visual Vocabulary for RIAs
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.
Anthony Colfelt - Visual Vocabulary for RIAs
Next-Previous ControlNext-Previous Control
Anthony Colfelt - Visual Vocabulary for RIAs
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.
Anthony Colfelt - Visual Vocabulary for RIAs
PhotoPhoto
Display ElementDisplay Element
Anthony Colfelt - Visual Vocabulary for RIAs
Russian DollsRussian Dolls
Controls inside pages…
Controls inside Controls
Elements inside Controls
Anthony Colfelt - Visual Vocabulary for RIAs
Display Elements and Interactive ElementsDisplay Elements and Interactive Elements
DisplayElement
InteractiveElement
Anthony Colfelt - Visual Vocabulary for RIAs
Rich Rich VisVocab VisVocab Elements - StateElements - State
Dotted Rectangle with dottedbar at top
Represents a State of anInteractive Element
State 2
State 1
Anthony Colfelt - Visual Vocabulary for RIAs
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.
Anthony Colfelt - Visual Vocabulary for RIAs
Putting it intoPutting it into practicepractice……
Anthony Colfelt - Visual Vocabulary for RIAs
Macro FlowMacro Flow
Anthony Colfelt - Visual Vocabulary for RIAs
NotesNotes……
Anthony Colfelt - Visual Vocabulary for RIAs
Zoom in: SingleZoom in: Single
Photo Rich PagePhoto Rich Page
Anthony Colfelt - Visual Vocabulary for RIAs
Rich Page FlowRich Page Flow
Anthony Colfelt - Visual Vocabulary for RIAs
Control Flow (Micro)Control Flow (Micro)
Anthony Colfelt - Visual Vocabulary for RIAs
Control Flow with TransitionsControl Flow with Transitions……
Anthony Colfelt - Visual Vocabulary for RIAs
Pattern LibrariesPattern Libraries
Controls become patterns
Elements become UIStyles
Differences betweeninstances of a control areexpressed throughparameters
Anthony Colfelt - Visual Vocabulary for RIAs
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