Visual Vocabulary for Rich Internet Applications

3,503 views
3,316 views

Published on

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.

Published in: Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,503
On SlideShare
0
From Embeds
0
Number of Embeds
371
Actions
Shares
0
Downloads
77
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Visual Vocabulary for Rich Internet Applications

  1. 1. Visual Vocabulary for Rich Internet Applications Anthony Colfelt Anthony Colfelt - Visual Vocabulary for RIAs
  2. 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. 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. 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. 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. 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. 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. 8. Elements Recap - Page Simple Rectangle Connected to other pages with arrow connectors or non-linear connectors Anthony Colfelt - Visual Vocabulary for RIAs
  9. 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. 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. 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. 12. Elements Recap - Flow Reference Octagonal shape Refers to another flow diagram for more detail Anthony Colfelt - Visual Vocabulary for RIAs
  13. 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. 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. 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. 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. 17. Elements Recap - Concurrent Set Indicates where the system performs multiple actions at the same time. Anthony Colfelt - Visual Vocabulary for RIAs
  18. 18. Conditional Interfaces Classmates.com Anthony Colfelt - Visual Vocabulary for RIAs
  19. 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
  20. 20. Rich Interfaces myfamily.com Single Photo Anthony Colfelt - Visual Vocabulary for RIAs
  21. 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. 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
  23. 23. Rich Anatomy: Pages, Controls and elements myfamily.com Single Photo myfamily.com Anthony Colfelt - Visual Vocabulary for RIAs
  24. 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
  25. 25. Page, Control, Element Anthony Colfelt - Visual Vocabulary for RIAs
  26. 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. 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
  28. 28. Single Photo Rich Page Anthony Colfelt - Visual Vocabulary for RIAs
  29. 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
  30. 30. Next-Previous Control Anthony Colfelt - Visual Vocabulary for RIAs
  31. 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
  32. 32. Photo Display Element Anthony Colfelt - Visual Vocabulary for RIAs
  33. 33. Russian Dolls Controls inside pages… Controls inside Controls Elements inside Controls Anthony Colfelt - Visual Vocabulary for RIAs
  34. 34. Display Elements and Interactive Elements Display Element Interactive Element Anthony Colfelt - Visual Vocabulary for RIAs
  35. 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. 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. 37. Putting it into practice… Anthony Colfelt - Visual Vocabulary for RIAs
  38. 38. Macro Flow Anthony Colfelt - Visual Vocabulary for RIAs
  39. 39. Notes… Anthony Colfelt - Visual Vocabulary for RIAs
  40. 40. Zoom in: Single Photo Rich Page Anthony Colfelt - Visual Vocabulary for RIAs
  41. 41. Rich Page Flow Anthony Colfelt - Visual Vocabulary for RIAs
  42. 42. Control Flow (Micro) Anthony Colfelt - Visual Vocabulary for RIAs
  43. 43. Control Flow with Transitions… Anthony Colfelt - Visual Vocabulary for RIAs
  44. 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. 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

×