Designing Rich Applications

Designing Rich Applications

Theresa NeilUser Experience DesignerAustin,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

slideshowaccordion

You Have to Design for Richness at 4 Levels

Application Structure

Screen Layouts

UI Controls

Interactions

catcatcatcat

7.651

3,453

11,281

acombapultepillar

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 patternsthree types

Give me info

I need to complete this task

Let me create...

Information Pattern Process Pattern

Creation PatternFrom Designing For Flex by Rob Adams

application patterninformation

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 patterninformation

print

sendlink

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 contentgive content maximum real estateoffer integrated filters and multiple views

suppress

customize view

acknowledge

save view

eventsdelete

Zenoss Open Source Systems Management

application patterninformationspokes

hub

event details

add commentopen device

zoomgraph

spokes

application patternprocess

product configuration

checkoutfill out forms

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

book travel

set-up/installation

for complex or infrequent workflows

show the steps- provide clear

navigation

let people skip ahead

keep the goal visible

application patternprocesssteps

goalnext step 1 2 3

application patterncreation

illustrate

photo editing

The right pattern to use when people need to create new content or modify existing content

code

document/write

diagram

allocate the most real-estate for the

workspace

utilize contextual tools- show them

only when they are needed

undo and redo are mandatory

application patterncreationcontextual tools

workspace

total control

Screen Layout

1 2 3

Q A

master/ detail column browse search/ results filter dataset

form palette/canvas dashboard spreadsheet

wizard question/ answer parallel panels interactive model

screen patternmaster/detail

master

detail master

top to bottom left to right

detail

screen patterncolumn browse

1

vertical

2 Details 1 2

Details

3 4

horizontal

screen patternsearch/results

simple

complex

search criteria

results

results

search

screen pattern12 Standard Screen Patterns

google12 Standard Screen Patterns

download PDf with 100+ current examples

UI Controls

catcatcatcat

7.651

3,453

11,281

acombapultepillar

auto-suggestcarousel/coverflowcharts/graphscollapsible panelscombobox (advanced)date-picker (advanced)dialogsdockingdrag & drop managerdynamic filter feedback/status

fisheye/spotlightgaugeshelp tipshot keyshover actionhover detailinline editprogress indicatormagnifyratingrecord locator/paginator

slide showsliderscoped searchsparklinestabs (advanced) table/data gridtoolbarvertical browserview toggleWYSIWYG editorzoom/pan

ui controlsframework matrix

DojoJQueryExt JS

FlexSilverlight

MooToolsBackBase

YUIGWT

Laszlo

ZKScriptaculous

Auto Com

plete

Carou

se/

Cover

flow

Chart

s

Collap

sible

Panel

s

Dialog

s

Docki

ng

Drag &

Drop

Dynamic

Filter

ui controls30 Essential Controls

google30 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

single field inline editmulti-field inline edit

overlay editingtable editgroup edit

module configuration

drag & drop modules drag & drop list

drag & drop objectdrag & drop action

drag & drop collection

multi-field inline edit

interactionsmake it direct

single field inline editmulti-field inline edit

overlay editingtable editgroup edit

module configuration

drag & drop modules drag & drop list

drag & drop objectdrag & drop action

drag & drop collectiondrag & drop list

interactionsmake it direct

always-visible toolshover reveal toolstoggle-reveal tools

multi-level toolssecondary menu

interactionskeep it lightweight

multi-level tools

toggle reveal tools

virtual scrollinginline paging

scrolled pagingvirtual panning

zoomable user interface

interactive single-page processinline assistant processdialog overlay processconfigurator process

static single-page process

virtual scrolling

interactionsstay on the page

virtual scrollinginline paging

scrolled pagingvirtual panning

zoomable user interface

interactive single-page processinline assistant processdialog overlay processconfigurator process

static single-page process

interactive single-page process

interactionsstay on the page

call to action invitationtour invitation

hover invitationaffordance invitation

drag and drop invitationinference invitation

more content invitation

interactionsprovide an invitation

drag and drop invitation

call to action invitationtour invitation

hover invitationaffordance invitation

drag and drop invitationinference invitation

more content invitation

interactionsprovide an invitation

tour invitations

brighten/dimexpand/collapse

self-healing fadeanimationspotlight

slide in/slide outfaceplate

flipaccordioncarousel

fadezoom

perceived performance

interactionsuse transitions

animation & accordion

auto-completelive-suggest live search

refining search

live previewprogressive disclosure

progress indicatorperiodic refresh

interactionsreact immediately

live preview

refining search

made it directobject selection pattern

stayed in the pagedialog inlay

virtual scrolling single page process

provides invitationsaffordance invitation

uses transitionsfaceplate

reacts immediatelyrefining search

interactionsrich applications

whitestone cheese

made it directobject selection pattern

keep it lightweighttoggle reveal tools

stayed in the pagetabs

configurator process

provides invitationscall to action invitation

affordance invitation

uses transitionsbrighten/dim

progress indicator

reacts immediatelyrefining search

interactionsrich applications

cray egg

interactions6 Principles

googleDesigning Web Interfaces

www.designingwebinterfaces.

com

Design Challengenavigation nightmare- more than 20 screens

heavy reliance on tabs

multiple dashboards and lots of reports

oceans of buttons

Fundraising Web App Requirements

user

goal

features

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 possible

- 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/tneiluser name:password:

Thank you to Balsamiq

Mockups for providing

their great wire framing

tool for our workshop!

www.balsamiq.com

hub

Spoke

Spoke

redesigninformation application pattern

Spoke

send thank

you notecompose message

update your web

site

see more tips

funds raised

redesigndashboard screen pattern

overviewcall to action

redesigninlay edit

redesignlive 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 Adamshttp://www.adobe.com/devnet/flex/articles/fig_pt1.html