This document discusses the differences between designing web sites and web applications. Web sites primarily provide static information to users, while web applications provide dynamic functionality. Different techniques are used for each type of design, including user research, wireframes, usability testing, and workflow diagrams for web applications. The document also provides examples of workflow diagrams and screen flow diagrams to illustrate the design process for web applications.
4. Parallel Paths
Web Applications
Command Line CUI Games GUI Web
5. Continuum
Web Site Web App
Static information Dynamic information
Lot’s of information Less information
One direction Two directions
Structured Unstructured
transactions transactions
Atomic Work broken over
transactions time
6. A different navigation paradigm
Web Site: User navigates to information Web App: Functionality comes to the user
This is about wayfinding… This is about working in one
place…
7. Techniques
Web Site
User Research
Personas
Card Sorting
Content Structure
Wireframes
Usability Test
Refine
Site Map
Treat
...
8. Techniques
Web Site Web Application
User Research User Research
Personas Activity Scenarios
Card Sorting Task Analysis
Content Structure Workflow Diagram
Wireframes Storyboards
Usability Test Usability Test
Refine Refine
Site Map Screenflow
Treat diagrams
... Treat
...
9. Workflow Diagram
Create ‘Policy Clai
Create ‘Customer’
m’
New
New
What do
New Inq Who is c Finish
they wa Act on request
uiry alling? Call
nt?
Existing
Existing
Identify ‘Customer Identify ‘Policy Clai
’ m’
The Hiser Group
11. Workflow diagram
Interpolate
Set
Parameters
Retouch
Images
Select
Nodes
Convert & Arrange Convert & Record
Scan in Plan Special Build
Manipulate Elements on Composite Manipulate Composite
Film Rolls Effect Flowgraph
Tape Lightbox Tape to Film
Preview
Preparation Planning Implementation Completion
The Hiser Group
12. Interpolate
Interaction model
Set
Parameters
Retouch
Images
Select
Nodes
Convert & Arrange Convert & Record
S can in Plan Special Build
Manipulate Elements on Composite Manipulate Composite
Film Rolls Effect Flowgraph
Tape Lightbox Tape to Film
Preview
Early draft Preparation Planning Implementation Completion
Palette
Node Palette
Palette
Palette
Interpolation
Palette
Node
Parameters
File Conversion/ Flowgraph
Manager Lightbox Paint
Transfer
Manager
Console
Navigation
Job Minature Preview Composite Notes Scrapbook
The Hiser Group
13. Screen Flow Diagram
Edit Default
Edit Property
Location Save
PRO020
2.1.2
Offender File Offender File
window – Select Property Item window – View
Offender Property Item
Property
Edit
from
PRO010 PRO030
A11 PRO030
Open item for Editing
Print Property Add New Item… Update
Add/Edit from PRO010
Transaction Property Item
PRO110 A10 PRO040
If launched
from PRO100
Offender File
window – In Store Edit Property
Property Update Location
History
PRO100 PRO060
14.
15.
16.
17.
18.
19.
20. Expression Studio Ecosystem
PhotoShop
Illustrator
Expression Expression Expression
Visio... Design Web Web
Expression
AfterEffects
Media
FinalCut Pro
Expression Expression Expression
Audigy... Encoder Blend Blend
Zam3D
DeepZoom ...
Composer
21. Process – 5 C’s
Don’t start at the end!
Composition
Construction
Contract
Content
Concept
Naming
conventions
Sketch Events Media
Wireframe States Layout Graphics Slice
Comp Data sources User controls Copy HTML
• Pen • TFS • Expression Blend • Expression Media • Expression Design
• Visio • Word • Expression • Expression Web
• Expression Design Encoder
• Omnigraffle • Expression design
• Axure • Photoshop
• ... • Illustrator
• AfterEffects
• MovieMaker
• ...
23. Contract
Contract
Agreed objects and events Naming
conventions
that form the conduit Events
between front end and States
back end Data sources
24. Contract
Name Type Notes
UC_PeepControl User Control Avatar
UC_PeepControl.SB_Enter Storyboard Attendee arrival
UC_PeepControl.SB_Exit Storyboard Attendee departure
CV_Theatre Canvas Boundary for Theatre Scene
TBL_Pax TextBlock # Attendees
ME_Video Media Element Logos video loop
GD_ChartContainer Grid Container for graphs
TBL_SponsorType Text Block Type of current sponsor
UC_PeepControl.VS_Vic Visual State Visual State if from Victoria
UC_PeepControl.VS_NSW (etc. for NSW, Qld, SA, WA, Tas, ACT, NT)
...
26. Content
Content
Video
Audio Media
Graphics
Graphics Copy
Copy
27. Composition
Composition
Assemble HTML
Load Assets
Slice
HTML
28. Expression Studio Ecosystem
PhotoShop
Illustrator
Expression Expression Expression
Visio... Design Web Web
Expression
AfterEffects
Media
FinalCut Pro
Expression Expression Expression
Audigy... Encoder Blend Blend
Zam3D
DeepZoom ...
Composer
29. Lessons Learnt
Wireframing
Expression Design does have a role
Comps without layout
Bitmap effects
More complex elements
Slicing
The Contract
Agreed Names
Naming Conventions