From Website to WebApp:Designing for WorkflowShane Morris

Marlon Paul Bruin - my-daily-image.blogspot.com

The impending death of Information architecture

“The fact is that IA is a theory about the inherent structure of information…the architecture of information…and if we are moving away from that we should call it something else.”

Joshua Porter bokardo.com/archives/thoughts-on-the-

impending-death-of-information-architecture/

C$_

dictionary.zdnet.com/definition/GUI.html

GUI Basics

Visibility

Affordance

Standards

Usability

blog.codersanonymous.com/?p=81

The Web Was Irrelevant

Problem was not hard

Few Degrees of Freedom

3 forms of interaction

What we were worried about

Web SitesFinding InformationOrganising Information

GUI’sOrganising functionality Jamming functionality into the Standard

Breaking the standard

The Web Was Awesome

No installation

Cross-platform

Refactoring

New interactions

The Web Also Sucked

Page waits

But The Web Kept EvolvingControls Hard

Conventions Hard

JavaScript Hard

DHTML Hard

Remote Scripting Hard

But The Web Kept EvolvingControls Hard

Conventions Hard

JavaScript Hard

DHTML Hard

Remote Scripting Hard

Gmail Easy!

Parallel Paths

Command Line CUI GUI WebGames

Parallel Paths

Command Line CUI GUI WebGames

Web Applications

Enabling Technologies

Flash

Flex

AIR

Silverlight

Curl

XUL

HTML 5

JavaFX

OpenLazlo

Pipes

Gears

Chrome

Web Applications?

RIA?

Rich Internet Application

Rich Interactive Application

What’s This, Chopped Liver?

RIA?

Web Applications

ApplicationUsers perform tasksActions have an effect2-way flow of information

WebDelivered via web technology

Leveraging web technologies

Probably leveraging web conventions

Probably running in a web browser

Continuum

Web SiteStatic information

Lot’s of informationOne direction

Structured transactions

Atomic transactions

Web AppDynamic information

Less informationTwo directions

Unstructured transactions

Work broken over time

Web Applications

Outlook Web Access

Web Applications

Buzzword - blogs.zdnet.com/Stewart/images/buzzword_2.png

Web Applications

PhotoShop Express - Lynda.com

Web Applications

dominos.com.au

Web Applications

mscui.net

How do I know if I’m working on a Web

Application?

How Do I...

...support work that can happen in any order?

...support work that is stopped and restarted over time?

...give users a constant view of their work in progress?

...give users access to dozens, or hundreds of functions?

...give users instant feedback and a sense of control?

...allow users to freely and confidently experiment?

...shield new users from the full range of functions, while giving experts easy access?

And...

How Do I...

...support work that can happen in any order?

...support work that is stopped and restarted over time?

...give users a constant view of their work in progress?

...give users access to dozens, or hundreds of functions?

...give users instant feedback and a sense of control?

...allow users to freely and confidently experiment?

...shield new users from the full range of functions, while giving experts easy access?

And...

...draw a sitemap for a site that has only one page?

Dear Internet...

Dear Internet...Welcome to 1993

The Thing About Work

The Problem With Web Apps

Applications tend to an object-action model

The browser

Browsers

What we love about Browsers

Ease of PublishingRefactoringZero-installBookmarks / FavouritesBack / ForwardLinksNo window management

SearchBreadcrumbsScrolling

Browsers

What we love about Browsers

Ease of PublishingRefactoringZero-installBookmarks / FavouritesBack / ForwardLinksNo window management

SearchBreadcrumbsScrolling

What we hate about Browsers

Designed for static content

SandboxedLargely statelessClunky windowing model

Poor accessibilityNo standards?

Designing for work

A different navigation paradigm

Web Site: User navigates to information

This is about wayfinding…

Web App: Functionality comes to the user

This is about working in one place…

A Different Interaction ParadigmGUI Principles▪Recognition over recall▪Object/action paradigm▪Visibility▪Explicit destruction▪Standards and Terminology

Visibility

Google Docs

Standards

slideshare.net

Interaction paradigms – Outlook Web Access

Outlook Web Access

Outlook Web Access

Google Docs

Tips – Designing for WorkflowReveal the Process

Focus on the Work Artefact

The Primary Workspace

Is there a process which needs to be visible? ▪(E.g. a set of steps?)

Or is a work artefact the primary focus? ▪(E.g. a document/form?)

Workflow is creating, making or revising something ▪What is the ‘something’ in your application?

Techniques

Techniques

Web SiteUser ResearchPersonasCard SortingContent StructureWireframesUsability TestRefineSite MapTreat ...

Techniques

Web SiteUser ResearchPersonasCard SortingContent StructureWireframesUsability TestRefineSite MapTreat ...

Web ApplicationUser ResearchActivity ScenariosTask AnalysisWorkflow Diagram

StoryboardsUsability TestRefineScreenflow diagrams

Treat ...

Activity Scenarios

Among many things...

Focus on the sequence

Applications Break At The Joins

Task Analysis

“Much of my user-centered practice in rich application design relies on task analysis for its basis. Task analysis is a key part of the early research that usability specialists perform when determining what an application ought to do. … Information architecture—and much Web design and development effort—has focused on content.”Leo Frishberg

Workflow Diagram

The Hiser Group

Workflow Diagrams

From:▪User research▪Activity scenarios

Workflow Diagrams

AreA map of the main user steps that make up a task

High-levelA way to start thinking about how to break tasks up in the user interface

A way to focus on flow between functions, not just the functions

Workflow Diagrams

AreA map of the main user steps that make up a task

High-levelA way to start thinking about how to break tasks up in the user interface

A way to focus on flow between functions, not just the functions

Are notA site mapA diagram of the screens/pages in an application

A diagram of every possible path and action

Workflow Diagram

The Hiser Group

Creating Workflow Diagrams

Start by creating one workflow diagram for each activity scenario / task.▪Avoid the temptation to incorporate other scenarios/functions at this stage.

Keep it high-level!▪Once you have a first-pass, try to simplify the diagram. (By combining steps, for example.)

Once you have a few, try to combine related diagrams into one, more abstract diagram.

Workflow diagramming in action

The Hiser Group

Workflow diagram syntax

No set rules

Keep it simple

User action 1

User action 2

Condition DecisionYN

Entry/Exit point

OptionalUsually enough

Workflow diagram

Plan SpecialEffect

RecordComposite

to Film

Preview

RetouchImages

InterpolateInterpolate

SetParameters

SetParameters

SelectNodes

SelectNodes

Scan inFilm Rolls

Convert &Manipulate

Tape

BuildFlowgraph

Composite Convert &Manipulate

Tape

ArrangeElements on

Lightbox

Preparation Planning Implementation Completion

The Hiser Group

Interpreting workflow diagrams

Examine your workflow diagrams for:

▪Groupings of related functionsSuggests screens, pages or panelsAvoid ‘one screen/page per workflow diagram box’.

▪Key flows between activitiesAnd therefore flows between screens/pages

▪Clues to the overall Interaction modelHub-based / Document Centric? Wizard-based? Combination?

For the Record

Other types of task analysis▪GOMS▪HTA▪Etc.

Interaction model

Nod

e P

ale

tte NodeParameters

Preview

Console

FileManager Lightbox Flowgraph PaintConversion/

TransferManager

Composite ScrapbookNotesJob NavigationMinature

Interpolation

Pale

tte

Pale

tte

Pale

ttePale

tte

Early draft

Plan SpecialEffect

RecordComposite

to Film

Preview

RetouchImages

Interpolate

SetParameters

SelectNodes

Scan inFilm Rolls

Convert &Manipulate

Tape

BuildFlowgraph

Composite Convert &Manipulate

Tape

ArrangeElements onLightbox

Preparation Planning Implementation Completion

The Hiser Group

Screen Flow Diagram

Select Property Item

In Store

Save

Open item for EditingAdd New Item…

A10

2.1.2

A11

Edit

Add/Edit from PRO010

Edit from PRO030

Print Property Transaction

PRO110

If launched from PRO100

Edit Property Location

PRO060

Update Property Item

PRO040

PRO030

Offender File window – View Property Item

Edit Default Property Location

PRO020

PRO010

Offender File window –Offender Property

PRO100

Offender File window –Property Update History

You already know a lot

“Though the process of designing and creating application and information space user experiences for the Web is virtually the same — even if the deliverable design documents may differ — their user experiences are fundamentally and profoundly different.”

http://www.uxmatters.com/MT/archives/000063.php(Emphasis mine)

User Experience Fundamentals

A question of emphasis

Thank youShane Morrisshanemo@microsoft.comblogs.msdn.com/shanemo