Visual Vocabulary for Rich Internet Applications

Visual Vocabulary
for Rich Internet
Applications

Anthony Colfelt

Anthony Colfelt - Visual Vocabulary for RIAs

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


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

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

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

?


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


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


Elements Recap - Page

Simple Rectangle
Connected to other pages
with arrow connectors or
non-linear connectors


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.


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.


Elements Recap - Continuation Points

Square Brackets
Continuation Points allow
separation of our
diagrams into easily
digestible sections.
They bridge the gaps
between pages.


Elements Recap - Flow Reference

Octagonal shape
Refers to another flow
diagram for more detail


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.


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.


Elements Recap - Conditional Branch

Triangle indicates where
the system determines
one of a number of
possible results as defined
by the condition.


Elements Recap - Conditional Selector

Isosceles trapezoid used
to show where the
system determines
multiple outcomes as
defined by the condition.


Elements Recap - Concurrent Set

Indicates where the
system performs multiple
actions at the same time.


Conditional
Interfaces
Classmates.com


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


Rich Interfaces
myfamily.com Single Photo


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


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


Rich Anatomy:
Pages, Controls
and elements
myfamily.com Single Photo
myfamily.com


Pages, Controls and elements

Captures the nested
nature of rich
applications.
Rich Pages contain
Controls
Controls contain Elements


Page, Control,
Element


Pages, Controls and Elements

Captures the nested
nature of rich
applications.
Rich Pages can contain
Controls and Elements
Controls contain Elements
or other Controls


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.


Single Photo
Rich Page


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.


Next-Previous Control


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.


Photo
Display Element


Russian Dolls

Controls inside pages…
Controls inside Controls
Elements inside Controls


Display Elements and Interactive Elements

Display
Element

Interactive
Element


Rich VisVocab Elements - State

Dotted Rectangle with dotted
bar at top
Represents a State of an
Interactive Element

State 1

State 2


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.


Putting it into practice…


Macro Flow


Notes…


Zoom in: Single
Photo Rich Page


Rich Page Flow


Control Flow (Micro)


Control Flow with Transitions…


Pattern Libraries

Controls become patterns
Elements become UI
Styles
Differences between
instances of a control are
expressed through
parameters


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


Visual Vocabulary for Rich Internet Applications

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Visual Vocabulary for Rich Internet Applications

Similaire à Visual Vocabulary for Rich Internet Applications (20)

Dernier

Dernier (20)

Visual Vocabulary for Rich Internet Applications