Post on 19-May-2015
description
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