• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Designing Rich Applications
 

Designing Rich Applications

on

  • 58,467 views

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

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

Statistics

Views

Total Views
58,467
Views on SlideShare
46,951
Embed Views
11,516

Actions

Likes
225
Downloads
3,388
Comments
3

93 Embeds 11,516

http://theresaneil.wordpress.com 5181
http://blog.frogiology.com 2057
http://designingwebinterfaces.com 1770
http://www.itwriting.com 489
http://looksgoodworkswell.blogspot.com 488
http://whyinteraction.com 307
http://www.usability.by 298
http://www.slideshare.net 174
http://kanzaidesign.com 122
http://www.yeeyan.com 72
http://openitguru.blogspot.com 56
http://article.yeeyan.org 53
http://journal.whyinteraction.com 32
http://www.linkedin.com 31
http://vikramv.posterous.com 30
http://jira.global.sdl.corp 27
http://herebesubtlety.squarespace.com 19
http://paper.li 19
http://openitguru.blogspot.in 18
http://localhost 17
http://m.chorfa.net 15
http://www.hallicious.com 15
http://blog.youmila.com 11
http://www.looksgoodworkswell.com 10
https://theresaneil.wordpress.com 10
http://www.9ishow.com 10
http://janakikumar.posterous.com 9
http://www.onebywon.com 8
http://webcache.googleusercontent.com 8
http://sannelig.blogspot.com 8
http://raymondfish117.wordpress.com 7
http://interacto.tumblr.com 7
http://www.shakayu.com 7
http://skysigal.xact-solutions.com 7
http://www.looksgoodworkswell.blogspot.ru 6
http://ileif.de 6
http://pinterest.com 6
http://openitguru.blogspot.com.au 5
http://sjors.posterous.com 5
http://www.meilione.com 5
http://openitguru.blogspot.de 4
http://xianguo.com 4
http://peterharmon.com 4
http://openitguru.blogspot.co.uk 3
http://www.whyinteraction.com 3
http://openitguru.blogspot.jp 3
http://www.picksth.com 3
http://wiki.orbitz.net 3
http://translate.googleusercontent.com 3
http://greatblueheron.tumblr.com 3
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Designing Rich Applications Designing Rich Applications Presentation Transcript

    • 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