SlideShare a Scribd company logo
Designing Rich
Applications



Theresa Neil
User Experience Designer
Austin,Texas
Background
Rich Internet Applications (RIA)

  richness of desktop                       familiar features of
      applications
                                        +         the web




  live save    drag and drop    slide          hyperlinks     bookmarks    tags
   preview     direct editing   undo           pop-ups flash animation      file
    redo drill down    immediate               upload   graphics back button
    feedback     dynamic refresh                 browser      CSS single click
      drawing     resize collapse             search paradigms       multi media
                                                            innovation
slideshow
        accordion

Adding an Ajax
control to a page
does not make a RIA
You Have to Design for Richness at 4 Levels


                        Application Structure


                        Screen Layouts

 cat
 cat acomb
                        UI Controls
               7.651


 cat apult     3,453

 cat epillar   11,281




                        Interactions
Application Structure
fundamental shift in thinking from hierarchal site maps to
choosing a structure that supports a richer experience




 shift away from HTML paging        map screen flow directly to
           paradigm                        users tasks

     eliminate unnecessary             one-screen-per-goal
           navigation                      philosophy
application patterns
                                                              three types

  People’s goals fall into
  one of three categories
                                         I need to
                                         complete
                                         this task
      Give me
      info                                                       Let me
                                                                 create...




                                  Process Pattern
           Information Pattern

                                                     Creation Pattern
From Designing For Flex by Rob Adams
application pattern
                                          information




       maps          news readers




                                        online stores



   media players      dashboards


The right pattern to use when people need to browse,
compare, comprehend information (95% of the time)
application pattern
                                                              information
spokes
                                    spokes


                                                      search           print



                                                   link          map            send


                            hub                               get      change
                                                          directions    route

                                    and


  Google Maps


  emphasizes visual communication

  de-emphasizes navigation and extraneous tasks
application pattern
spokes                                  spokes              information


                                                     acknowledge       suppress



                                                 delete       events
                                                                                  save
                                                                                  view


                         hub                                           customize
                                                                          view



                                                 zoom
                                                 graph         event
                                                               details


                                                                       add comment
                                                     open device
Zenoss Open Source Systems Management


start by displaying the primary content
give content maximum real estate
offer integrated filters and multiple views
application pattern
                                                          process




product configuration   set-up/installation




                                                  book travel




    fill out forms          checkout


The right pattern to use when people need
provide information in a structured manner
application pattern
steps                                    process


                                    for complex or
                             infrequent workflows

                                  show the steps-
                                      provide clear
                                        navigation

                             let people skip ahead

                             keep the goal visible




                           goal
 next
        step   1   2   3
application pattern
                                               creation




    illustrate           code




                                         diagram


   photo editing    document/write


The right pattern to use when people need to
create new content or modify existing content
application pattern
                                              creation
contextual tools   total control

                                       allocate the most
                                     real-estate for the
                                               workspace

                                       utilize contextual
                                      tools- show them
                                     only when they are
                                                   needed

                                       undo and redo are
                                              mandatory




         workspace
Screen Layout




master/ detail   column browse      search/ results   filter dataset




        form     palette/canvas       dashboard        spreadsheet

   1    2   3

                  Q      A

       wizard    question/ answer   parallel panels    interactive
                                                          model
screen pattern
                                     master/detail


top to bottom   master   left to right




  detail                 master detail
screen pattern
                                      column browse



1          2   Details   1      2      3      4




                                Details


vertical                 horizontal
screen pattern
                                       search/results

     search

                                        search
                                        criteria




simple

         results
                   complex

                             results
screen pattern
12 Standard Screen Patterns




           google
12 Standard Screen Patterns

  download PDf with 100+
     current examples
UI Controls
auto-suggest             fisheye/spotlight          slide show
carousel/coverflow       gauges                     slider
charts/graphs            help tips                  scoped search
collapsible panels       hot keys                   sparklines
combobox (advanced)      hover action               tabs (advanced)
date-picker (advanced) hover detail                 table/data grid
dialogs                  inline edit                toolbar
docking                  progress indicator         vertical browser
drag & drop manager      magnify                    view toggle
dynamic filter           rating                     WYSIWYG editor
feedback/status          record locator/paginator   zoom/pan

  cat
  cat acomb     7.651


  cat apult     3,453

  cat epillar   11,281
ui controls
                                 te
                                                                    framework matrix
                              le     /
                             p     se w                                                    op
                          om     ou flo       s     ble s                     g         Dr      ic
                         C      r r         t     si el          g s        n
                              a e         ar llap an          lo         ki           &       am ter
                    u to     C v
                                o       h       o P         ia        oc           ag      yn il
                  A           C       C      C            D          D          Dr       D F

          Dojo
     JQuery
      Ext JS
          YUI
        GWT
   MooTools
    BackBase
          ZK
Scriptaculous
       Laszlo
           Flex
   Silverlight
ui controls
     30 Essential Controls




        google
 30 Essential Controls

many examples from live
     applications
Interactions

 #1 Make It Direct

 #2 Keep It Lightweight

 #3 Stay In the Page

 #4 Provide An Invitation

 #5 Use Transitions

 #6 React Immediately
interactions
                             make it direct


                          single field inline edit
                          multi-field inline edit
                                 overlay editing
                                      table edit
                                      group edit
                           module configuration


                           drag & drop modules
                               drag & drop list
multi-field inline edit
                             drag & drop object
                            drag & drop action
                          drag & drop collection
interactions
                      make it direct


                   single field inline edit
                   multi-field inline edit
                          overlay editing
                               table edit
                               group edit
                    module configuration


                    drag & drop modules
                        drag & drop list
                      drag & drop object
                     drag & drop action

drag & drop list   drag & drop collection
interactions
                      keep it lightweight

                         always-visible tools
                           hover reveal tools
                          toggle-reveal tools
                            multi-level tools

toggle reveal tools          secondary menu




multi-level tools
interactions
                             stay on the page

                                   virtual scrolling
                                       inline paging
                                     scrolled paging
                                    virtual panning
                           zoomable user interface


                    interactive single-page process
                           inline assistant process
virtual scrolling
                             dialog overlay process
                              configurator process
                                static single-page
                                            process
interactions
                                           stay on the page

                                                 virtual scrolling
                                                     inline paging
                                                   scrolled paging
                                                  virtual panning
                                         zoomable user interface


                                  interactive single-page process
                                         inline assistant process
                                           dialog overlay process
                                            configurator process
                                              static single-page
                                                          process
interactive single-page process
interactions
                           provide an invitation

                             call to action invitation
                                      tour invitation
                                     hover invitation
                                affordance invitation
                             drag and drop invitation
                                  inference invitation
                             more content invitation
drag and drop invitation
interactions
                   provide an invitation

                     call to action invitation
                              tour invitation
                             hover invitation
                        affordance invitation
                     drag and drop invitation
                          inference invitation
                     more content invitation




tour invitations
interactions
                          use transitions

                                brighten/dim
                              expand/collapse
                            self-healing fade
                                   animation
                                    spotlight


                             slide in/slide out
                                    faceplate
                                           flip
                                    accordion
                                      carousel
                                          fade
animation & accordion
                                         zoom
                        perceived performance
interactions
                  react immediately

                         auto-complete
                            live-suggest
                             live search
                         refining search


                            live preview
                   progressive disclosure
                      progress indicator
                        periodic refresh


live preview



refining search
interactions
                    rich applications

                              made it direct
                    object selection pattern

                        stayed in the page
                                 dialog inlay
                            virtual scrolling
                         single page process

                       provides invitations
                      affordance invitation

                           uses transitions
                                  faceplate

                        reacts immediately
                            refining search



whitestone cheese
interactions
            rich applications

                     made it direct
           object selection pattern

                keep it lightweight
                 toggle reveal tools

                stayed in the page
                              tabs
               configurator process

                 provides invitations
           call to action invitation
               affordance invitation

                    uses transitions
                       brighten/dim
                  progress indicator

                reacts immediately
cray egg            refining search
interactions
                 6 Principles




          google
Designing Web Interfaces

          www.
 designingwebinterfaces.
           com
Design Challenge
                   navigation nightmare-
                    more than 20 screens

                   heavy reliance on tabs

                   multiple dashboards and
                            lots of reports

                        oceans of buttons
Fundraising Web App Requirements

    user   signed up to train for a marathon and raise 5K
           ~41 years old, mostly women, first time doing this

           raise money online with as little time and effort as
    goal
           possible

features - tracks money earned to date (online and offline)
           -   provides email templates for fundraising letters
           -   tracks emails send and who has donated or not
           -   list of fundraising tips and best practices
           -   provides a way to create and update a personalized
           training web site
Time To Sketch Up Some Designs


go to: http://www.bmockups.com/tneil
             k you to  Balsamiq
      Than
user name:
      M ockups for   providing
password:
              great wire  framing
      their
           l for our w orkshop!
       too
       www.bal samiq.com
redesign
              information application pattern

                   Spoke
                                                     send
                               compose              thank
                               message             you note



        hub                               funds
                                          raised



                               see more             update
                                 tips              your web
                                                     site

                       Spoke
Spoke
redesign
           dashboard screen pattern




overview
                    call to
                    action
redesign
inlay edit
redesign
live preview/ WYSIWYG editor
More Resources
“About Face 3: The Essentials of Interaction Design”
Alan Cooper, Robert Reimann, David Cronin 2007

“Designing Web Interfaces: Principles and Patterns for Rich Interactions”
Bill Scott and Theresa Neil, O’Reilly Press 2009

“Designing Interfaces: Patterns for Effective Interface Design”
Jenifer Tidwell, O’Reilly Press 2006

“The Design of Everyday Things”
Donald Norman 2002

“The Designers Guide to Web Applications, Part 1”
Hagan Rivers, Two Rivers Consulting

“Web Form Design: Filling in the Blank”
Luke Wroblewski, Rosenfeld Media 2008

Designing For Flex by Rob Adams
http://www.adobe.com/devnet/flex/articles/fig_pt1.html

More Related Content

Recently uploaded

Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
monikaservice00
 
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdfSMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
Magdiel70
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
monikaservice00
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
Mostafa Abd Elrahman
 
A Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdfA Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdf
Mostafa Abd Elrahman
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
Peclers Paris
 
Doreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemonDoreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemon
DanielNacorda4
 
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdfAcclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
ssuserdee4d8
 
Introduction to Vertical Cities Vertical cities are high-density, mixed-use ...
Introduction to Vertical Cities  Vertical cities are high-density, mixed-use ...Introduction to Vertical Cities  Vertical cities are high-density, mixed-use ...
Introduction to Vertical Cities Vertical cities are high-density, mixed-use ...
Mostafa Abd Elrahman
 
Pranay Mhatre Introduction cum Portfolio
Pranay Mhatre Introduction cum PortfolioPranay Mhatre Introduction cum Portfolio
Pranay Mhatre Introduction cum Portfolio
Pranay Мhatre
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
sonalibook860
 
A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability
Mostafa Abd Elrahman
 
ITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdfITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdf
shyamraj39
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
bookneha89
 
Overview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets ModuleOverview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets Module
lakshmichitra031
 
Maria Reginalda Alifia's Creative Portfolio 2024
Maria Reginalda Alifia's Creative Portfolio 2024Maria Reginalda Alifia's Creative Portfolio 2024
Maria Reginalda Alifia's Creative Portfolio 2024
alifia97
 
The Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady Hat
TeeFusion
 
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)
Kal-el Shows
 
Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...
Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...
Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...
kimmi singla$A17
 
Unit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.pptUnit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.ppt
ChiragSuresh
 

Recently uploaded (20)

Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
 
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdfSMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
 
A Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdfA Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdf
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
 
Doreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemonDoreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemon
 
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdfAcclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
 
Introduction to Vertical Cities Vertical cities are high-density, mixed-use ...
Introduction to Vertical Cities  Vertical cities are high-density, mixed-use ...Introduction to Vertical Cities  Vertical cities are high-density, mixed-use ...
Introduction to Vertical Cities Vertical cities are high-density, mixed-use ...
 
Pranay Mhatre Introduction cum Portfolio
Pranay Mhatre Introduction cum PortfolioPranay Mhatre Introduction cum Portfolio
Pranay Mhatre Introduction cum Portfolio
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
 
A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability
 
ITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdfITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdf
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Overview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets ModuleOverview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets Module
 
Maria Reginalda Alifia's Creative Portfolio 2024
Maria Reginalda Alifia's Creative Portfolio 2024Maria Reginalda Alifia's Creative Portfolio 2024
Maria Reginalda Alifia's Creative Portfolio 2024
 
The Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady Hat
 
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)
 
Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...
Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...
Russian Girls Call Delhi 🛵🚡9711199171 💃 Choose Best And Top Girl Service And ...
 
Unit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.pptUnit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.ppt
 

Featured

2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing
Search Engine Journal
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
OECD Directorate for Financial and Enterprise Affairs
 
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
SocialHRCamp
 
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 

Featured (20)

2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
 
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
 
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 

Designing Rich Applications

  • 1. Designing Rich Applications Theresa Neil User Experience Designer Austin,Texas
  • 3. Rich Internet Applications (RIA) richness of desktop familiar features of applications + the web live save drag and drop slide hyperlinks bookmarks tags preview direct editing undo pop-ups flash animation file redo drill down immediate upload graphics back button feedback dynamic refresh browser CSS single click drawing resize collapse search paradigms multi media innovation
  • 4. slideshow accordion Adding an Ajax control to a page does not make a RIA
  • 5. You Have to Design for Richness at 4 Levels Application Structure Screen Layouts cat cat acomb UI Controls 7.651 cat apult 3,453 cat epillar 11,281 Interactions
  • 6. Application Structure fundamental shift in thinking from hierarchal site maps to choosing a structure that supports a richer experience shift away from HTML paging map screen flow directly to paradigm users tasks eliminate unnecessary one-screen-per-goal navigation philosophy
  • 7. application patterns three types People’s goals fall into one of three categories I need to complete this task Give me info Let me create... Process Pattern Information Pattern Creation Pattern From Designing For Flex by Rob Adams
  • 8. application pattern information maps news readers online stores media players dashboards The right pattern to use when people need to browse, compare, comprehend information (95% of the time)
  • 9. application pattern information spokes spokes search print link map send hub get change directions route and Google Maps emphasizes visual communication de-emphasizes navigation and extraneous tasks
  • 10. application pattern spokes spokes information acknowledge suppress delete events save view hub customize view zoom graph event details add comment open device Zenoss Open Source Systems Management start by displaying the primary content give content maximum real estate offer integrated filters and multiple views
  • 11. application pattern process product configuration set-up/installation book travel fill out forms checkout The right pattern to use when people need provide information in a structured manner
  • 12. application pattern steps process for complex or infrequent workflows show the steps- provide clear navigation let people skip ahead keep the goal visible goal next step 1 2 3
  • 13. application pattern creation illustrate code diagram photo editing document/write The right pattern to use when people need to create new content or modify existing content
  • 14. application pattern creation contextual tools total control allocate the most real-estate for the workspace utilize contextual tools- show them only when they are needed undo and redo are mandatory workspace
  • 15. Screen Layout master/ detail column browse search/ results filter dataset form palette/canvas dashboard spreadsheet 1 2 3 Q A wizard question/ answer parallel panels interactive model
  • 16. screen pattern master/detail top to bottom master left to right detail master detail
  • 17. screen pattern column browse 1 2 Details 1 2 3 4 Details vertical horizontal
  • 18. screen pattern search/results search search criteria simple results complex results
  • 19. screen pattern 12 Standard Screen Patterns google 12 Standard Screen Patterns download PDf with 100+ current examples
  • 20. UI Controls auto-suggest fisheye/spotlight slide show carousel/coverflow gauges slider charts/graphs help tips scoped search collapsible panels hot keys sparklines combobox (advanced) hover action tabs (advanced) date-picker (advanced) hover detail table/data grid dialogs inline edit toolbar docking progress indicator vertical browser drag & drop manager magnify view toggle dynamic filter rating WYSIWYG editor feedback/status record locator/paginator zoom/pan cat cat acomb 7.651 cat apult 3,453 cat epillar 11,281
  • 21. ui controls te framework matrix le / p se w op om ou flo s ble s g Dr ic C r r t si el g s n a e ar llap an lo ki & am ter u to C v o h o P ia oc ag yn il A C C C D D Dr D F Dojo JQuery Ext JS YUI GWT MooTools BackBase ZK Scriptaculous Laszlo Flex Silverlight
  • 22. ui controls 30 Essential Controls google 30 Essential Controls many examples from live applications
  • 23. Interactions #1 Make It Direct #2 Keep It Lightweight #3 Stay In the Page #4 Provide An Invitation #5 Use Transitions #6 React Immediately
  • 24. interactions make it direct single field inline edit multi-field inline edit overlay editing table edit group edit module configuration drag & drop modules drag & drop list multi-field inline edit drag & drop object drag & drop action drag & drop collection
  • 25. interactions make it direct single field inline edit multi-field inline edit overlay editing table edit group edit module configuration drag & drop modules drag & drop list drag & drop object drag & drop action drag & drop list drag & drop collection
  • 26. interactions keep it lightweight always-visible tools hover reveal tools toggle-reveal tools multi-level tools toggle reveal tools secondary menu multi-level tools
  • 27. interactions stay on the page virtual scrolling inline paging scrolled paging virtual panning zoomable user interface interactive single-page process inline assistant process virtual scrolling dialog overlay process configurator process static single-page process
  • 28. interactions stay on the page virtual scrolling inline paging scrolled paging virtual panning zoomable user interface interactive single-page process inline assistant process dialog overlay process configurator process static single-page process interactive single-page process
  • 29. interactions provide an invitation call to action invitation tour invitation hover invitation affordance invitation drag and drop invitation inference invitation more content invitation drag and drop invitation
  • 30. interactions provide an invitation call to action invitation tour invitation hover invitation affordance invitation drag and drop invitation inference invitation more content invitation tour invitations
  • 31. interactions use transitions brighten/dim expand/collapse self-healing fade animation spotlight slide in/slide out faceplate flip accordion carousel fade animation & accordion zoom perceived performance
  • 32. interactions react immediately auto-complete live-suggest live search refining search live preview progressive disclosure progress indicator periodic refresh live preview refining search
  • 33. interactions rich applications made it direct object selection pattern stayed in the page dialog inlay virtual scrolling single page process provides invitations affordance invitation uses transitions faceplate reacts immediately refining search whitestone cheese
  • 34. interactions rich applications made it direct object selection pattern keep it lightweight toggle reveal tools stayed in the page tabs configurator process provides invitations call to action invitation affordance invitation uses transitions brighten/dim progress indicator reacts immediately cray egg refining search
  • 35. interactions 6 Principles google Designing Web Interfaces www. designingwebinterfaces. com
  • 36. Design Challenge navigation nightmare- more than 20 screens heavy reliance on tabs multiple dashboards and lots of reports oceans of buttons
  • 37. Fundraising Web App Requirements user signed up to train for a marathon and raise 5K ~41 years old, mostly women, first time doing this raise money online with as little time and effort as goal possible features - tracks money earned to date (online and offline) - provides email templates for fundraising letters - tracks emails send and who has donated or not - list of fundraising tips and best practices - provides a way to create and update a personalized training web site
  • 38. Time To Sketch Up Some Designs go to: http://www.bmockups.com/tneil k you to Balsamiq Than user name: M ockups for providing password: great wire framing their l for our w orkshop! too www.bal samiq.com
  • 39. redesign information application pattern Spoke send compose thank message you note hub funds raised see more update tips your web site Spoke Spoke
  • 40. redesign dashboard screen pattern overview call to action
  • 43. More Resources “About Face 3: The Essentials of Interaction Design” Alan Cooper, Robert Reimann, David Cronin 2007 “Designing Web Interfaces: Principles and Patterns for Rich Interactions” Bill Scott and Theresa Neil, O’Reilly Press 2009 “Designing Interfaces: Patterns for Effective Interface Design” Jenifer Tidwell, O’Reilly Press 2006 “The Design of Everyday Things” Donald Norman 2002 “The Designers Guide to Web Applications, Part 1” Hagan Rivers, Two Rivers Consulting “Web Form Design: Filling in the Blank” Luke Wroblewski, Rosenfeld Media 2008 Designing For Flex by Rob Adams http://www.adobe.com/devnet/flex/articles/fig_pt1.html