Designing Rich Applications - Theresa Neil

You Have to Design for Richness at 4 Levels Application Structure Screen Layouts UI Controls Interactions

Designing Rich Applications Theresa Neil User Experience Designer Austin,Texas Background richness of desktop applications Rich Internet Applications (RIA) familiar features of the web + live save drag and drop slide preview direct editing undo redo drill down immediate feedback dynamic refresh drawing resize collapse hyperlinks bookmarks tags pop-ups flash animation file upload graphics back button browser CSS single click search paradigms multi media innovation Adding an Ajax control to a page does not make a RIA slideshow accordion You Have to Design for Richness at 4 Levels Application Structure Screen Layouts UI Controls Interactions cat cat cat cat 7.651 3,453 11,281 acomb apult epillar map screen flow directly to users tasks one-screen-per-goal philosophy Application Structure shift away from HTML paging paradigm eliminate unnecessary navigation fundamental shift in thinking from hierarchal site maps to choosing a structure that supports a richer experience People’s goals fall into one of three categories application patterns three types Give me info I need to complete this task Let me create Information Pattern Process Pattern Creation Pattern From Designing For Flex by Rob Adams application pattern information online stores dashboards news readers media players maps The right pattern to use when people need to browse, compare, comprehend information (95% of the time) application pattern information print send link search change route get directions map Google Maps emphasizes visual communication de-emphasizes navigation and extraneous tasks and spokes hub spokes start by displaying the primary content give content maximum real estate offer integrated filters and multiple views suppress customize view acknowledge save view events delete Zenoss Open Source Systems Management application pattern information spokes hub event details add comment open device zoom graph spokes [...]... 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 multi-level tools secondary menu interactions... single-page process virtual scrolling inline assistant process 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... brighten/dim expand/collapse self-healing fade animation spotlight slide in/slide out faceplate flip accordion carousel animation & accordion fade 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... 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 cray egg reacts immediately refining search interactions 6 Principles google Designing Web Interfaces www designingwebinterfaces... 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 multi-field inline edit drag & drop list drag & drop... 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... document/write The right pattern to use when people need to create new content or modify existing content application pattern contextual tools total control creation 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...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 . (RIA) familiar features of the web + live save drag and drop slide preview direct editing undo redo drill down immediate feedback dynamic refresh drawing resize collapse hyperlinks bookmarks. Controls cat cat cat cat 7.651 3,453 11,281 acomb apult epillar auto-suggest carousel/coverflow charts/graphs collapsible panels combobox (advanced) date-picker (advanced) dialogs docking drag & drop manager dynamic filter feedback/status fisheye/spotlight gauges help tips hot keys hover