Visual Vocabulary for Rich Internet Applications
Upcoming SlideShare
Loading in...5
×
 

Visual Vocabulary for Rich Internet Applications

on

  • 3,521 views

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 ...

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.

Statistics

Views

Total Views
3,521
Views on SlideShare
3,234
Embed Views
287

Actions

Likes
5
Downloads
67
Comments
0

5 Embeds 287

http://colfelt.com 196
http://www.colfelt.com 77
http://www.slideshare.net 11
http://2105.tumblr.com 2
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Visual Vocabulary for Rich Internet Applications Visual Vocabulary for Rich Internet Applications Presentation Transcript

  • 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