Quite a complex topic to present, the Visual Vocabulary for Rich Internet Applications is an adaptation of Jesse James Garretts' original notation. It shows how with a few extra symbols, the visual vocab can be used to specify rich interface behaviour, in a diagram.
The future of UX design support tools - talk Paris March 2024
Visual Vocabulary for Rich Internet Applications
1. Visual Vocabulary
for Rich Internet
Applications
Anthony Colfelt
Anthony Colfelt - Visual Vocabulary for RIAs
2. Tell ‘em what you’re gonna tell them…
Introducing me,
introducing you…
Some definitions of terms
JJG’s VisVocab Recap
Conditional Interfaces vs
Rich interfaces
Rich App Anatomy
Rich VisVocab symbols
Diagramming with the
Rich VisVocab
Anthony Colfelt - Visual Vocabulary for RIAs
3. What’s a Rich Internet Application?
… Web applications that
have the features and
functionality of traditional
desktop applications.
[Wikipedia]
Typically run in a Web
browser, or do not require
software installation
Enabled by technologies
such as Adobe Flash™
and JavaScript
Gmail was a leading RIA that mimicked the
user experience of desktop email clients
3
Anthony Colfelt - Visual Vocabulary for RIAs
4. What’s a Flow Chart?
… attempt to visualize a
process around a specific
task or function… often
represent a series of
screens that collect and
display information to the
users. [Dan Brown -
Communicating Design]
Can be used to specify a
users movement and
interaction flow through a
system
Simple flow charts show how a user moves
through pages and functions
4
Anthony Colfelt - Visual Vocabulary for RIAs
5. Why do Flows?
Communicate to a broad
? array of stakeholders in a
visual, easy-to-follow way
Work through a user’s
journey through a system
Y
Expose holes in thinking
and design
N
Specify the desired
behavior of the system
?
Anthony Colfelt - Visual Vocabulary for RIAs
6. What’s Visual Vocabulary?
Conceived by Jesse James
Garrett, released in 2000
…outlines a basic
symbology for
diagramming information
architecture and
interaction design
concepts, and provides
guidelines for the use of
these elements. [Jesse James
Garrett - http://jjg.net/ia/visvocab]
The VisVocab includes symbols to document Capable of documenting
plurality, such as concurrent actions and
system artifacts like downloadable files
basic conditionality
Anthony Colfelt - Visual Vocabulary for RIAs
7. Premises of Diagramming Interaction Flow
Rectangle = Page
Connectors labeled with
actions
Symbols indicate types of
condition
Conditions referenced in
notes section
Page-level interaction not
typically captured
Anthony Colfelt - Visual Vocabulary for RIAs
8. Elements Recap - Page
Simple Rectangle
Connected to other pages
with arrow connectors or
non-linear connectors
Anthony Colfelt - Visual Vocabulary for RIAs
9. Elements Recap - Connectors
Relationships between
elements are depicted
with simple lines or
connectors
Convey directionality to
indicate how the user will
move through the system
toward completion of a
particular task.
Anthony Colfelt - Visual Vocabulary for RIAs
10. Elements Recap - Conditional Connector
A path that is only
available under certain
conditions
A dotted line with an
arrowhead at one end to
represent the direction of
the interaction flow.
The condition under which
the path is available is
documented near the line.
Anthony Colfelt - Visual Vocabulary for RIAs
11. Elements Recap - Continuation Points
Square Brackets
Continuation Points allow
separation of our
diagrams into easily
digestible sections.
They bridge the gaps
between pages.
Anthony Colfelt - Visual Vocabulary for RIAs
12. Elements Recap - Flow Reference
Octagonal shape
Refers to another flow
diagram for more detail
Anthony Colfelt - Visual Vocabulary for RIAs
13. Elements Recap - Decision Point
Diamond denotes where
user action may
generate one of a number
of results for a given
path.
Usually binary featuring
‘yes’ or ‘no’ outcomes as
defined by the condition
posed as a question.
Anthony Colfelt - Visual Vocabulary for RIAs
14. Elements Recap - Conditional Area
A dotted line around the
outside of the group of
elements to which a
condition applies.
Condition documented
near the line.
Anthony Colfelt - Visual Vocabulary for RIAs
15. Elements Recap - Conditional Branch
Triangle indicates where
the system determines
one of a number of
possible results as defined
by the condition.
Anthony Colfelt - Visual Vocabulary for RIAs
16. Elements Recap - Conditional Selector
Isosceles trapezoid used
to show where the
system determines
multiple outcomes as
defined by the condition.
Anthony Colfelt - Visual Vocabulary for RIAs
17. Elements Recap - Concurrent Set
Indicates where the
system performs multiple
actions at the same time.
Anthony Colfelt - Visual Vocabulary for RIAs
19. Diagramming Conditional Interfaces
Pages which are served
with content determined
by conditions
Data-driven UI
Not ‘Rich’ - data does not
dynamically change as a
result of interaction with
the UI
Anthony Colfelt - Visual Vocabulary for RIAs
21. The problem - diagramming RIA Flow
One page facilitates
dialogue between user
and system, without
requiring a new page to
be served
Page to page metaphor
breaks down
No information captured
about dynamically served
data
Anthony Colfelt - Visual Vocabulary for RIAs
22. The problem - diagramming RIA Flow
Captures what data is
changed dynamically
Does not specify how data
is manipulated and served
through the UI Controls
or Elements
Does not specify
interaction styles and
behaviors e.g. state
transitions
Anthony Colfelt - Visual Vocabulary for RIAs
24. Pages, Controls and elements
Captures the nested
nature of rich
applications.
Rich Pages contain
Controls
Controls contain Elements
Anthony Colfelt - Visual Vocabulary for RIAs
26. Pages, Controls and Elements
Captures the nested
nature of rich
applications.
Rich Pages can contain
Controls and Elements
Controls contain Elements
or other Controls
Anthony Colfelt - Visual Vocabulary for RIAs
27. Rich VisVocab Elements - Rich Page
Rectangle with a ‘Flow
Reference’ inside it
A collection of controls
and/or Elements
Draw a new Rich Page
element to describe a
collection of controls and
elements that always
exist on screen together
as an identifiable unit
Some controls and
Elements may appear or
disappear based on
certain conditions.
Anthony Colfelt - Visual Vocabulary for RIAs
29. Rich VisVocab Symbols - Control
Rectangle with solid bar
at top, contains a ‘flow
reference’
A collection of Elements.
The Control manipulates
Elements as a result of
interaction or conditions.
Anthony Colfelt - Visual Vocabulary for RIAs
31. Rich VisVocab Symbols - Element
Rectangle with solid bar at
top
The most granular unit –
does not contain any other
units.
Two classes of elements -
Interactive Elements and
Display Elements
Interactive Elements
(I_ELMT) have states of
interaction
Display elements
(D_ELMT) do not have
states.
Anthony Colfelt - Visual Vocabulary for RIAs
33. Russian Dolls
Controls inside pages…
Controls inside Controls
Elements inside Controls
Anthony Colfelt - Visual Vocabulary for RIAs
34. Display Elements and Interactive Elements
Display
Element
Interactive
Element
Anthony Colfelt - Visual Vocabulary for RIAs
35. Rich VisVocab Elements - State
Dotted Rectangle with dotted
bar at top
Represents a State of an
Interactive Element
State 1
State 2
Anthony Colfelt - Visual Vocabulary for RIAs
36. Transitions
Symbol borrowed from
movie editing software
Used to note animation
effects in the UI
Applied on a connector to
indicate a visual effect
that transitions one
page/control/element/state
to another.
Anthony Colfelt - Visual Vocabulary for RIAs
37. Putting it into practice…
Anthony Colfelt - Visual Vocabulary for RIAs
38. Macro Flow
Anthony Colfelt - Visual Vocabulary for RIAs
43. Control Flow with Transitions…
Anthony Colfelt - Visual Vocabulary for RIAs
44. Pattern Libraries
Controls become patterns
Elements become UI
Styles
Differences between
instances of a control are
expressed through
parameters
Anthony Colfelt - Visual Vocabulary for RIAs
45. Acknowledgements
cheers ta thank you Jesse James Garrett -
thanks acclaim admire adore adulate author of the original and
advocate aggrandize applaud encourager of
appreciate approve bless advancements
boost bow celebrate cite Rick Spencer - idea
clap commend compliment bouncer, experimenter
distinguish elevate endorse exalt and contributor
extol flatter glorify hail honor
Jason Williams from
kudize laud pay tribute proclaim Intuitect - idea bouncer
rave over recommend resound
and challenger
reverence tout worship
Anthony Colfelt - Visual Vocabulary for RIAs