SlideShare a Scribd company logo
1 of 43
Download to read offline
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

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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
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
 
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
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
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
 
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
 
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
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
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
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
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
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
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
 
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
 
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
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
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
 

Recently uploaded (19)

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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
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
 
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
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
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
 
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
 
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...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
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
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
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
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
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
 
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
 
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...
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
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
 

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