![Page 1: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/1.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Visual VocabularyVisual Vocabulary
for Rich Internetfor Rich Internet
ApplicationsApplications
Anthony Colfelt
![Page 2: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/2.jpg)
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
![Page 3: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/3.jpg)
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
![Page 4: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/4.jpg)
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
![Page 5: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/5.jpg)
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
![Page 6: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/6.jpg)
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
![Page 7: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/7.jpg)
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
![Page 8: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/8.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Elements Recap - PageElements Recap - Page
Simple Rectangle
Connected to other pageswith arrow connectors ornon-linear connectors
![Page 9: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/9.jpg)
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.
![Page 10: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/10.jpg)
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.
![Page 11: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/11.jpg)
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.
![Page 12: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/12.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Elements Recap - Flow ReferenceElements Recap - Flow Reference
Octagonal shape
Refers to another flowdiagram for more detail
![Page 13: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/13.jpg)
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.
![Page 14: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/14.jpg)
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.
![Page 15: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/15.jpg)
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.
![Page 16: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/16.jpg)
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.
![Page 17: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/17.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Elements Recap - Concurrent SetElements Recap - Concurrent Set
Indicates where thesystem performs multipleactions at the same time.
![Page 18: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/18.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
ConditionalConditional
InterfacesInterfaces
Classmates.comClassmates.com
![Page 19: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/19.jpg)
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
![Page 20: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/20.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Rich InterfacesRich Interfaces
myfamily.com Single Photomyfamily.com Single Photo
![Page 21: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/21.jpg)
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
![Page 22: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/22.jpg)
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
![Page 23: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/23.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Rich Anatomy:Rich Anatomy:
Pages, ControlsPages, Controls
and elementsand elements
myfamilymyfamily.com Single Photo.com Single Photo
![Page 24: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/24.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Pages, Controls and elementsPages, Controls and elements
Captures the nestednature of richapplications.
Rich Pages containControls
Controls contain Elements
![Page 25: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/25.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Page, Control,Page, Control,
ElementElement
![Page 26: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/26.jpg)
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
![Page 27: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/27.jpg)
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.
![Page 28: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/28.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Single PhotoSingle Photo
Rich PageRich Page
![Page 29: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/29.jpg)
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.
![Page 30: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/30.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Next-Previous ControlNext-Previous Control
![Page 31: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/31.jpg)
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.
![Page 32: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/32.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
PhotoPhoto
Display ElementDisplay Element
![Page 33: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/33.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Russian DollsRussian Dolls
Controls inside pages…
Controls inside Controls
Elements inside Controls
![Page 34: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/34.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Display Elements and Interactive ElementsDisplay Elements and Interactive Elements
DisplayElement
InteractiveElement
![Page 35: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/35.jpg)
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
![Page 36: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/36.jpg)
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.
![Page 37: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/37.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Putting it intoPutting it into practicepractice……
![Page 38: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/38.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Macro FlowMacro Flow
![Page 39: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/39.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
NotesNotes……
![Page 40: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/40.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Zoom in: SingleZoom in: Single
Photo Rich PagePhoto Rich Page
![Page 41: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/41.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Rich Page FlowRich Page Flow
![Page 42: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/42.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Control Flow (Micro)Control Flow (Micro)
![Page 43: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/43.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Control Flow with TransitionsControl Flow with Transitions……
![Page 44: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/44.jpg)
Anthony Colfelt - Visual Vocabulary for RIAs
Pattern LibrariesPattern Libraries
Controls become patterns
Elements become UIStyles
Differences betweeninstances of a control areexpressed throughparameters
![Page 45: Visual Vocabulary for Rich Internet Applications](https://reader034.vdocument.in/reader034/viewer/2022042623/54632c4caf7959a4058b4d68/html5/thumbnails/45.jpg)
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