Designing Rich
Applications



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

  richness of desktop                       familiar features of
      applications
    ...
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


                        Scre...
Application Structure
fundamental shift in thinking from hierarchal site maps to
choosing a structure that supports a rich...
application patterns
                                                              three types

  People’s goals fall into...
application pattern
                                          information




       maps          news readers




      ...
application pattern
                                                              information
spokes
                     ...
application pattern
spokes                                  spokes              information


                            ...
application pattern
                                                          process




product configuration   set-up/i...
application pattern
steps                                    process


                                    for complex or
...
application pattern
                                               creation




    illustrate           code




        ...
application pattern
                                              creation
contextual tools   total control

             ...
Screen Layout




master/ detail   column browse      search/ results   filter dataset




        form     palette/canvas...
screen pattern
                                     master/detail


top to bottom   master   left to right




  detail   ...
screen pattern
                                      column browse



1          2   Details   1      2      3      4




...
screen pattern
                                       search/results

     search

                                       ...
screen pattern
12 Standard Screen Patterns




           google
12 Standard Screen Patterns

  download PDf with 100+
   ...
UI Controls
auto-suggest             fisheye/spotlight          slide show
carousel/coverflow       gauges                ...
ui controls
                                 te
                                                                    framew...
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 Transi...
interactions
                             make it direct


                          single field inline edit
            ...
interactions
                      make it direct


                   single field inline edit
                   multi-f...
interactions
                             stay on the page

                                   virtual scrolling
         ...
interactions
                                           stay on the page

                                                ...
interactions
                   provide an invitation

                     call to action invitation
                    ...
interactions
                  react immediately

                         auto-complete
                            live-...
interactions
                    rich applications

                              made it direct
                    objec...
interactions
            rich applications

                     made it direct
           object selection pattern

     ...
Design Challenge
                   navigation nightmare-
                    more than 20 screens

                   hea...
Time To Sketch Up Some Designs


go to: http://www.bmockups.com/tneil
             k you to  Balsamiq
      Than
user name...
redesign
              information application pattern

                   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

“Desig...
Designing Rich Applications
Designing Rich Applications
Designing Rich Applications
Designing Rich Applications
Designing Rich Applications
Upcoming SlideShare
Loading in...5
×

Designing Rich Applications

54,222

Published on

This presentation was given on Aug. 6, 2009 at DELVE NYC- a 2 Day Masterclass on Designing User Interfaces.

This presentation goes hand in hand with our book (Bill Scott & Theresa Neil) called Designing Web Interfaces: Principles and Patterns for Rich Interaction.

This presentation also addresses structuring your application for richness, using standard screen patterns, and selecting the best UI controls.



http://designingwebinterfaces.com
http://www.theresaneil.com
http://looksgoodworkswell.com

Published in: Design, Technology, Business
3 Comments
238 Likes
Statistics
Notes
No Downloads
Views
Total Views
54,222
On Slideshare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
3,474
Comments
3
Likes
238
Embeds 0
No embeds

No notes for slide

Designing Rich Applications

  1. 1. Designing Rich Applications Theresa Neil User Experience Designer Austin,Texas
  2. 2. Background
  3. 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. 4. slideshow accordion Adding an Ajax control to a page does not make a RIA
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. screen pattern master/detail top to bottom master left to right detail master detail
  17. 17. screen pattern column browse 1 2 Details 1 2 3 4 Details vertical horizontal
  18. 18. screen pattern search/results search search criteria simple results complex results
  19. 19. screen pattern 12 Standard Screen Patterns google 12 Standard Screen Patterns download PDf with 100+ current examples
  20. 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. 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. 22. ui controls 30 Essential Controls google 30 Essential Controls many examples from live applications
  23. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 35. interactions 6 Principles google Designing Web Interfaces www. designingwebinterfaces. com
  36. 36. Design Challenge navigation nightmare- more than 20 screens heavy reliance on tabs multiple dashboards and lots of reports oceans of buttons
  37. 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. 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. 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. 40. redesign dashboard screen pattern overview call to action
  41. 41. redesign inlay edit
  42. 42. redesign live preview/ WYSIWYG editor
  43. 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

×