From Website To Webapp Shane Morris

From Website to WebApp: Designing for Workflow Shane 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 Sites

Finding Information

Organising Information

GUI’s

Organising 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 Evolving

Controls Hard

Conventions Hard

JavaScript Hard

DHTML Hard

Remote Scripting Hard

But The Web Kept Evolving

Controls Hard

Conventions Hard

JavaScript Hard

DHTML Hard

Remote Scripting Hard

Gmail Easy!

pptPlex Section Divider Collision Course The slides after this divider will be grouped into a section and given the label you type above. Feel free to move this slide to any position in the deck.

Parallel Paths Command Line CUI GUI Web Games

Parallel Paths Command Line CUI GUI Web Games 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

Application

Users perform tasks

Actions have an effect

2-way flow of information

Web

Delivered via web technology

Leveraging web technologies

Probably leveraging web conventions

Probably running in a web browser

Continuum

Web Site

Static information

Lot’s of information

One direction

Structured transactions

Atomic transactions

Web App

Dynamic information

Less information

Two 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 Publishing

Refactoring

Zero-install

Bookmarks / Favourites

Back / Forward

Links

No window management

Search

Breadcrumbs

Scrolling

Browsers

What we love about Browsers

Ease of Publishing

Refactoring

Zero-install

Bookmarks / Favourites

Back / Forward

Links

No window management

Search

Breadcrumbs

Scrolling

What we hate about Browsers

Designed for static content

Sandboxed

Largely stateless

Clunky windowing model

Poor accessibility

No 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 Paradigm

GUI 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

Google Docs

Tips – Designing for Workflow

Reveal 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

Web Site

User Research

Personas

Card Sorting

Content Structure

Wireframes

Usability Test

Refine

Site Map

Treat

...

Techniques

Web Site

User Research

Personas

Card Sorting

Content Structure

Wireframes

Usability Test

Refine

Site Map

Treat

...

Web Application

User Research

Activity Scenarios

Task Analysis

Workflow Diagram

Storyboards

Usability Test

Refine

Screenflow 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

Are

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

High-level

A 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

Are

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

High-level

A 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 not

A site map

A 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 Decision Y N Entry/Exit point Optional Usually enough

Workflow diagram The Hiser Group Plan Special Effect Record Composite to Film Preview Retouch Images Interpolate Set Parameters Select Nodes Scan in Film Rolls Convert & Manipulate Tape Build Flowgraph Composite Convert & Manipulate Tape Arrange Elements on Lightbox Preparation Planning Implementation Completion

Interpreting workflow diagrams

Examine your workflow diagrams for:

Groupings of related functions

Suggests screens, pages or panels

Avoid ‘one screen/page per workflow diagram box’.

Key flows between activities

And therefore flows between screens/pages

Clues to the overall Interaction model

Hub-based / Document Centric?

Wizard-based?

Combination?

For the Record

Other types of task analysis

GOMS

HTA

Etc.

Interaction model Early draft The Hiser Group Node Palette Node Parameters Preview Console File Manager Lightbox Flowgraph Paint Conversion/ Transfer Manager Composite Scrapbook Notes Job Navigation Minature Interpolation Palette Palette Palette Palette

Screen Flow Diagram

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.”