SlideShare ist ein Scribd-Unternehmen logo
1 von 45
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Andere mochten auch

Setting tab stops worksheet
Setting tab stops worksheetSetting tab stops worksheet
Setting tab stops worksheetJennifer Spann
 
English Vocabulary
English VocabularyEnglish Vocabulary
English VocabularyHelena Gomes
 
Spanish Food Vocabulary
Spanish Food VocabularySpanish Food Vocabulary
Spanish Food Vocabularycclift1114
 
CFGS de Sistemes de telecomunicacions i informàtics
CFGS de Sistemes de telecomunicacions i informàticsCFGS de Sistemes de telecomunicacions i informàtics
CFGS de Sistemes de telecomunicacions i informàticsEduard
 
Worldwide Telecomunications Inc. Communication
Worldwide Telecomunications Inc. CommunicationWorldwide Telecomunications Inc. Communication
Worldwide Telecomunications Inc. CommunicationAshley Kruempel
 
Computer skills vocabulary
Computer skills vocabularyComputer skills vocabulary
Computer skills vocabularyEllie Simons
 
Glosario técnico n°1
Glosario técnico n°1Glosario técnico n°1
Glosario técnico n°1jrtorresb
 
English basic computer vocabulary
English  basic computer vocabularyEnglish  basic computer vocabulary
English basic computer vocabularyRoberto Rodriguez
 
ESL Computers and Computer vocabulary
ESL Computers and Computer vocabularyESL Computers and Computer vocabulary
ESL Computers and Computer vocabularysamevans83
 
Technology Vocabulary
Technology VocabularyTechnology Vocabulary
Technology VocabularyPaula Gómez
 
Nursing informatics presentation
Nursing informatics presentationNursing informatics presentation
Nursing informatics presentationLeeann Sills
 
Wireframes and Interaction Design Documents
Wireframes and Interaction Design DocumentsWireframes and Interaction Design Documents
Wireframes and Interaction Design Documentspiksels
 
Computer hardware presentation
Computer hardware presentationComputer hardware presentation
Computer hardware presentationJisu Dasgupta
 
Types and components of computer system
Types and components of computer systemTypes and components of computer system
Types and components of computer systemmkhisalg
 

Andere mochten auch (20)

Setting tab stops worksheet
Setting tab stops worksheetSetting tab stops worksheet
Setting tab stops worksheet
 
English Vocabulary
English VocabularyEnglish Vocabulary
English Vocabulary
 
Naruto_668
Naruto_668Naruto_668
Naruto_668
 
Computer parts
Computer partsComputer parts
Computer parts
 
Spanish Food Vocabulary
Spanish Food VocabularySpanish Food Vocabulary
Spanish Food Vocabulary
 
CFGS de Sistemes de telecomunicacions i informàtics
CFGS de Sistemes de telecomunicacions i informàticsCFGS de Sistemes de telecomunicacions i informàtics
CFGS de Sistemes de telecomunicacions i informàtics
 
Telecomunications
TelecomunicationsTelecomunications
Telecomunications
 
Worldwide Telecomunications Inc. Communication
Worldwide Telecomunications Inc. CommunicationWorldwide Telecomunications Inc. Communication
Worldwide Telecomunications Inc. Communication
 
Telecomunications
TelecomunicationsTelecomunications
Telecomunications
 
Computer skills vocabulary
Computer skills vocabularyComputer skills vocabulary
Computer skills vocabulary
 
Glosario técnico n°1
Glosario técnico n°1Glosario técnico n°1
Glosario técnico n°1
 
English basic computer vocabulary
English  basic computer vocabularyEnglish  basic computer vocabulary
English basic computer vocabulary
 
ESL Computers and Computer vocabulary
ESL Computers and Computer vocabularyESL Computers and Computer vocabulary
ESL Computers and Computer vocabulary
 
Technology Vocabulary
Technology VocabularyTechnology Vocabulary
Technology Vocabulary
 
Nursing informatics presentation
Nursing informatics presentationNursing informatics presentation
Nursing informatics presentation
 
Wireframes and Interaction Design Documents
Wireframes and Interaction Design DocumentsWireframes and Interaction Design Documents
Wireframes and Interaction Design Documents
 
Internet of Things
Internet of ThingsInternet of Things
Internet of Things
 
Computer hardware presentation
Computer hardware presentationComputer hardware presentation
Computer hardware presentation
 
Types and components of computer system
Types and components of computer systemTypes and components of computer system
Types and components of computer system
 
Software Development Life Cycle (SDLC)
Software Development Life Cycle (SDLC)Software Development Life Cycle (SDLC)
Software Development Life Cycle (SDLC)
 

Ähnlich wie Visual Vocabulary for Rich Internet Applications

Sa 008 architecture_views
Sa 008 architecture_viewsSa 008 architecture_views
Sa 008 architecture_viewsFrank Gielen
 
Elements Of User Experience
Elements Of User ExperienceElements Of User Experience
Elements Of User Experienceguest829deb
 
Elements
ElementsElements
Elementskaa kaa
 
"Project Design for Optimaizing User Experience" 20070927
"Project Design for Optimaizing User Experience" 20070927"Project Design for Optimaizing User Experience" 20070927
"Project Design for Optimaizing User Experience" 20070927Takashi Sakamoto
 
The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User ExperienceMichael Grillhösl
 
The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User ExperienceBen van de Sande
 
Zukunftsmarkt Zocken
Zukunftsmarkt ZockenZukunftsmarkt Zocken
Zukunftsmarkt ZockenStephan Engl
 
Brokerage 2007 presentation hci
Brokerage 2007 presentation hciBrokerage 2007 presentation hci
Brokerage 2007 presentation hciimec.archive
 
More than the Sum of its parts, the API's whole
More than the Sum of its parts, the API's wholeMore than the Sum of its parts, the API's whole
More than the Sum of its parts, the API's whole3scale
 
In order for UX to achieve it’s potential, we need to reframe it as a profess...
In order for UX to achieve it’s potential, we need to reframe it as a profess...In order for UX to achieve it’s potential, we need to reframe it as a profess...
In order for UX to achieve it’s potential, we need to reframe it as a profess...Peter Merholz
 
Modelling the User Interface
Modelling the User InterfaceModelling the User Interface
Modelling the User InterfacePedro J. Molina
 
Framework Engineering
Framework EngineeringFramework Engineering
Framework EngineeringYoungSu Son
 
Not your father's analytics report Mahaffey & Straub, UPA 2011 Atlanta
Not your father's analytics report  Mahaffey & Straub, UPA 2011 AtlantaNot your father's analytics report  Mahaffey & Straub, UPA 2011 Atlanta
Not your father's analytics report Mahaffey & Straub, UPA 2011 AtlantaKath Straub
 

Ähnlich wie Visual Vocabulary for Rich Internet Applications (20)

Sa 008 architecture_views
Sa 008 architecture_viewsSa 008 architecture_views
Sa 008 architecture_views
 
Elements Of User Experience
Elements Of User ExperienceElements Of User Experience
Elements Of User Experience
 
Elements
ElementsElements
Elements
 
Element S
Element SElement S
Element S
 
Elements
ElementsElements
Elements
 
"Project Design for Optimaizing User Experience" 20070927
"Project Design for Optimaizing User Experience" 20070927"Project Design for Optimaizing User Experience" 20070927
"Project Design for Optimaizing User Experience" 20070927
 
Applicaton Software
Applicaton SoftwareApplicaton Software
Applicaton Software
 
The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User Experience
 
Wk08 Best Practice
Wk08 Best PracticeWk08 Best Practice
Wk08 Best Practice
 
Wk08 Best Practice
Wk08 Best PracticeWk08 Best Practice
Wk08 Best Practice
 
E3 chap-08
E3 chap-08E3 chap-08
E3 chap-08
 
The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User Experience
 
Elements
ElementsElements
Elements
 
Zukunftsmarkt Zocken
Zukunftsmarkt ZockenZukunftsmarkt Zocken
Zukunftsmarkt Zocken
 
Brokerage 2007 presentation hci
Brokerage 2007 presentation hciBrokerage 2007 presentation hci
Brokerage 2007 presentation hci
 
More than the Sum of its parts, the API's whole
More than the Sum of its parts, the API's wholeMore than the Sum of its parts, the API's whole
More than the Sum of its parts, the API's whole
 
In order for UX to achieve it’s potential, we need to reframe it as a profess...
In order for UX to achieve it’s potential, we need to reframe it as a profess...In order for UX to achieve it’s potential, we need to reframe it as a profess...
In order for UX to achieve it’s potential, we need to reframe it as a profess...
 
Modelling the User Interface
Modelling the User InterfaceModelling the User Interface
Modelling the User Interface
 
Framework Engineering
Framework EngineeringFramework Engineering
Framework Engineering
 
Not your father's analytics report Mahaffey & Straub, UPA 2011 Atlanta
Not your father's analytics report  Mahaffey & Straub, UPA 2011 AtlantaNot your father's analytics report  Mahaffey & Straub, UPA 2011 Atlanta
Not your father's analytics report Mahaffey & Straub, UPA 2011 Atlanta
 

Kürzlich hochgeladen

Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 

Kürzlich hochgeladen (19)

Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
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
  • 18. Conditional Interfaces Classmates.com 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
  • 20. Rich Interfaces myfamily.com Single Photo 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
  • 23. Rich Anatomy: Pages, Controls and elements myfamily.com Single Photo myfamily.com 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
  • 25. Page, Control, Element 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
  • 28. Single Photo Rich Page 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
  • 30. Next-Previous Control 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
  • 32. Photo Display Element 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
  • 39. Notes… Anthony Colfelt - Visual Vocabulary for RIAs
  • 40. Zoom in: Single Photo Rich Page Anthony Colfelt - Visual Vocabulary for RIAs
  • 41. Rich Page Flow Anthony Colfelt - Visual Vocabulary for RIAs
  • 42. Control Flow (Micro) 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