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.

1. Designing
Silverlight Web
Apps
Microsoft Korea
Reagan Hwang

3. Parallel Paths
Command Line CUI Games GUI Web

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

10. Workflow diagramming in action
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

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

22. Concept
Concept
Wireframes
1. PowerPoint Sketch
2. Expression Design Wireframe
Comp
Graphic Design proceeds...
3. Expression Blend
Interaction Design proceeds...
Development proceeds...

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

25. Construction
Construction
Layout
User controls

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

30. It Starts With The Team

31. But Wait A Second…
?
layout,
animation,
events, markup,
integration

32. The Team With An Integrator
Integrator
layout,
animation,
events,
integration

33. The Team & Tools

34. What Ties Us Together?
<XAML>

35. XAM L XAM L
XAM L

36. Reference
http://www.slideshare.net/garrettdimon/improving-interface-
design
http://www.slideshare.net/shanemo/web311-designing-
compelling-silverlight-user-experiences-with-expression-studio-
presentation
http://www.slideshare.net/shanemo/from-website-to-webapp-
shane-morris-presentation
http://www.slideshare.net/guest83d3e0/how-to-express-your-
creative-self-with-windows-presentation-foundation-and-
silverlight
http://www.slideshare.net/billwscott/designing-for-ajax/