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 Anthony Colfelt - Visual Vocabulary for RIAs

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

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

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

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

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

Elements Recap - Page Simple Rectangle Connected to other pages with arrow connectors or non-linear connectors Anthony Colfelt - Visual Vocabulary for RIAs

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

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

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

Elements Recap - Flow Reference Octagonal shape Refers to another flow diagram for more detail Anthony Colfelt - Visual Vocabulary for RIAs

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

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

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

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

Elements Recap - Concurrent Set Indicates where the system performs multiple actions at the same time. Anthony Colfelt - Visual Vocabulary for RIAs

Conditional Interfaces Classmates.com Anthony Colfelt - Visual Vocabulary for RIAs

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

Rich Interfaces myfamily.com Single Photo Anthony Colfelt - Visual Vocabulary for RIAs

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

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

Rich Anatomy: Pages, Controls and elements myfamily.com Single Photo myfamily.com Anthony Colfelt - Visual Vocabulary for RIAs

Pages, Controls and elements Captures the nested nature of rich applications. Rich Pages contain Controls Controls contain Elements Anthony Colfelt - Visual Vocabulary for RIAs

Page, Control, Element Anthony Colfelt - Visual Vocabulary for RIAs

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

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

Single Photo Rich Page Anthony Colfelt - Visual Vocabulary for RIAs

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

Next-Previous Control Anthony Colfelt - Visual Vocabulary for RIAs

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

Photo Display Element Anthony Colfelt - Visual Vocabulary for RIAs

Russian Dolls Controls inside pages… Controls inside Controls Elements inside Controls Anthony Colfelt - Visual Vocabulary for RIAs

Display Elements and Interactive Elements Display Element Interactive Element Anthony Colfelt - Visual Vocabulary for RIAs

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

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

Putting it into practice… Anthony Colfelt - Visual Vocabulary for RIAs

Macro Flow Anthony Colfelt - Visual Vocabulary for RIAs

Notes… Anthony Colfelt - Visual Vocabulary for RIAs

Zoom in: Single Photo Rich Page Anthony Colfelt - Visual Vocabulary for RIAs

Rich Page Flow Anthony Colfelt - Visual Vocabulary for RIAs

Control Flow (Micro) Anthony Colfelt - Visual Vocabulary for RIAs

Control Flow with Transitions… Anthony Colfelt - Visual Vocabulary for RIAs

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

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

http://colfelt.com	114
http://www.colfelt.com	48
http://www.slideshare.net	11
http://2105.tumblr.com	2

Visual Vocabulary for Rich Internet Applications

by Anthony Colfelt on Apr 30, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 175

Statistics

Visual Vocabulary for Rich Internet Applications — Webinar Transcript