Documenting for Interactive Websites
       @ Enhancing Online User Experiences
                        14 November 2008
A bit about me
•   Senior Experience Architect @ NDM
•   Previously:
    –   Intranet and information management consultan...
Introduction
•   Highly interactive websites/apps present new
    challenges to web designers and UX pros
•   “Web 2.0” an...
Compare this…
Web 1.0: the page model
•   Click a link go to a page
•   This is the basic model of the web
•   Typical of most websites,...
…with this
Interactive web apps
•   This is a new model of interaction
     –   Clickable, dragable, contextually aware UI
     –   D...
…or this
Interactive news website
•   Many different types of interaction
     –   Drag’n’drop
     –   Expandable elements
     – ...
Key challenges
• Communicating highly interactive designs
• Evolving this along with the designs
• Iterating rapidly (in s...
Site maps
Site maps
•   Probably the most common form of
    documentation for websites
•   Capture the structural aspects of a webs...
Wireframes
Wireframes
•   Along with site maps, almost ubiquitous
•   Sadly, they are often mis-used
•   Lack flexibility and can be ...
Other forms of documentation
Other forms of documentation
•   Of course there are many other forms of
    documentation that can (should?) be used in a...
We are in need of an update
We are in need of an update
•   “Traditional” methods may not work so well any more
•   Particularly in terms of documenta...
Hybrid documentation
Hybrid documentation
• Hybrids of existing forms of documentation
• Attempt to capture the higher interactivity
• Whilst m...
Storyboards
Storyboards
• Borrowed from movie and games
  production
• Excellent for interfaces with complex
  states and sequences of...
Paper prototyping
Paper prototyping
• Early (in the process) prototyping technique
• Typically using print-outs of wireframes or
  storyboar...
Not just documents but methods
Not just documents but methods
•   Not only are the websites more interactive but
    also how we go about building them
•...
Methodology affects documentation
•   With paper prototyping you can see that there is a strong
    connection between doc...
Advanced paper prototyping
Advanced paper prototyping
• The technique can be extended into quite
  a sophisticated testing methodology
• Still quicke...
Low-fi prototyping
Low-fi prototyping
•   Quick and dirty RIA prototypes
     –   Hand-drawn sketches
     –   Digitised via camera
     –   ...
More low-fi prototyping
More low-fi prototyping
• Explanation of method to be used, part of
  a pitch to senior stakeholders
• Created before the ...
Interactive questions
Interactive questions
• Uservoice.com was used to collect and
  prioritise today’s topics for discussion
• Initial suggest...
Firstly, a bit about you
•   Who here is creating Web 2.0 or RIAs?
•   Who’s a visual designer?
•   Who’s a developer?
•  ...
Taming scope creep

 How do you deal with scope creep when
  developing interactive websites and web
                   ap...
Responding to the broad and
various client expectations

When developing interactive websites and
 web apps, there is ofte...
Challenges for design
documentation


 What challenges do you face in terms of
  documenting the design of interactive
   ...
Evolving documentation to meet
the challenges


How has the documentation you use had to
     change to better fit the typ...
Challenges for project
documentation


 What challenges do you face in terms of
  documenting plans and progress for
  pro...
Further reading
•   Sketching User Experiences
    by Bill Buxton ISBN: 0123740371
•   Communicating Design
    by Dan Bro...
Further questions?
• Patrick Kennedy
• Email: patrick.kennedy@newsdigitalmedia.com.au
• Blog: www.usit.com.au
    (I’ll bl...
Case study: news.com.au
•   Conceptual sketches
•   Rough wireframes (part screengrab part Visio)
•   “Proof of concept” p...
A quick audience poll
•   Who is using…
    –   Wireframes?
    –   Storyboards?
    –   Paper prototypes?
    –   Low-fi ...
What decides the method you use?
•   Cost?
•   Skill in using various tools?
•   Time taken to prototype?
•   Comfort with...
Documenting For Interactive Websites
Upcoming SlideShare
Loading in...5
×

Documenting For Interactive Websites

6,106

Published on

An interactive discussion session presented at the "Enhancing Online User Experiences" conference in Melbourne, Australia. November 13th 2008.

Published in: Technology, Design
1 Comment
21 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,106
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
1
Likes
21
Embeds 0
No embeds

No notes for slide

Documenting For Interactive Websites

  1. 1. Documenting for Interactive Websites @ Enhancing Online User Experiences 14 November 2008
  2. 2. A bit about me • Senior Experience Architect @ NDM • Previously: – Intranet and information management consultant – Information Architect – Team leader and ‘solutions architect’ – Front and back-end web developer – Electrical and Computer Systems Engineer • Wide variety of experience in designing and building traditional websites as well as 2.0/RIA
  3. 3. Introduction • Highly interactive websites/apps present new challenges to web designers and UX pros • “Web 2.0” and Rich Internet Applications (RIA) – Higher levels of interactivity – Breaking away from the “page model” web – Built using Flash, Flex, AJAX, Air, Silverlight, Java etc • Plus the new agile ways of development • So, do we need all this documentation? • Do we need more? • Image credit: http://www.flickr.com/photos/frankjepsen/1355329357/
  4. 4. Compare this…
  5. 5. Web 1.0: the page model • Click a link go to a page • This is the basic model of the web • Typical of most websites, even in the age of Web 2.0 • UX for this kind of interface is well understood • We can design these and document those designs • Image credit: http://en.wikipedia.org/wiki/Rich_Internet_application
  6. 6. …with this
  7. 7. Interactive web apps • This is a new model of interaction – Clickable, dragable, contextually aware UI – Dynamic and active rather than passive – More like a desktop software interface • UX for this kind of interface is not yet well understood • Nor is how to document their design • And this is a relatively tame example • Image credit: www.moo.com/products/minicards.php
  8. 8. …or this
  9. 9. Interactive news website • Many different types of interaction – Drag’n’drop – Expandable elements – Animated transitions – Conditional behaviour – Active user feedback and interactive tour • These are relatively simple examples, designers and developers are building cooler, more complex apps and sites all the time • How do you document this design? • Image/video credit: www.news.com.au (home page recently redesigned)
  10. 10. Key challenges • Communicating highly interactive designs • Evolving this along with the designs • Iterating rapidly (in step with agile) • Project management when the end product is not precisely known
  11. 11. Site maps
  12. 12. Site maps • Probably the most common form of documentation for websites • Capture the structural aspects of a website • Easily become too complex for their own good • They don’t handle dynamic aspects well • Better for content sites with strict hierarchy • Image credits: – (left) www.treith.com/ia_presentation/16sitemap.html – (right) Step Two Designs
  13. 13. Wireframes
  14. 14. Wireframes • Along with site maps, almost ubiquitous • Sadly, they are often mis-used • Lack flexibility and can be very time consuming • Not great for interactivity or small changes • Better for ‘page model’ websites • Of course, your mileage may vary • Image credits: – (left) Step Two Designs – (right) www.gdoss.com/images/lmf_paper_prototype.gif
  15. 15. Other forms of documentation
  16. 16. Other forms of documentation • Of course there are many other forms of documentation that can (should?) be used in a web site/app design project, eg: – Personas (maybe use ‘design comics’) – Scenarios / user stories – Task matrices – In fact any artifact from research • I haven’t focused on these today because they aren’t directly related to the design. Or are they? • Image credits: – (left) http://www.designcomics.org/ – (top right) http://toddwarfel.com/archives/the-task-analysis-grid/ – (bottom right) www.neuralmatters.com/Reference/Buzan/MindMap.gif
  17. 17. We are in need of an update
  18. 18. We are in need of an update • “Traditional” methods may not work so well any more • Particularly in terms of documentation – New ways have surfaced and are entering the ‘mainstream’ – Types of documentation that • Lend themselves to greater interactivity • Faster and more easily produced and updated • Rapid iterative prototyping; see it working then refine it – Save time and effort on documentation • Image credit: http://www.flickr.com/photos/nakedcharlton/72041049/
  19. 19. Hybrid documentation
  20. 20. Hybrid documentation • Hybrids of existing forms of documentation • Attempt to capture the higher interactivity • Whilst maintaining familiar look and tools • Image credits: – Wireflow (top left) http://nform.ca/tradingcards/2008_19.jpg – Wireframe storyboard (bottom left) thinkingandmaking.com/entries/art/36/wireframe-storyboard.gif – Task flow for an Ajax login component (right) www.uxmatters.com/MT/archives/images/rias-figure%205.png
  21. 21. Storyboards
  22. 22. Storyboards • Borrowed from movie and games production • Excellent for interfaces with complex states and sequences of events • Sketching is seeing a big revival • Can be cheap, quick and info laden • Image credit: http://fromthedogbox.files.wordpress.com/2008/05/landing_image.jpg
  23. 23. Paper prototyping
  24. 24. Paper prototyping • Early (in the process) prototyping technique • Typically using print-outs of wireframes or storyboards • Easy to produce and update • Works well with task based usability testing • Image credit: www.nngroup.com/reports/prototyping/prototype_tabs.jpg
  25. 25. Not just documents but methods
  26. 26. Not just documents but methods • Not only are the websites more interactive but also how we go about building them • Agile development methodologies – Design is shifted earlier in the project – More iterative, deliberately less documentation – Taken the tech world by storm • Beyond documentation, our approach may need to change also • Image credit: http://www.flickr.com/photos/psd/1347700815/
  27. 27. Methodology affects documentation • With paper prototyping you can see that there is a strong connection between doco used and the way we work • Going hand-in-hand with the agile approach and less documentation is: – More (and earlier) prototyping – More usability testing – Rapid iteration (fail faster and evolve quicker) – More access to users – Less inertia – Lower cost techniques
  28. 28. Advanced paper prototyping
  29. 29. Advanced paper prototyping • The technique can be extended into quite a sophisticated testing methodology • Still quicker and cheaper than hi-fi • Video credit: Werner Puchert www.youtube.com/watch?v=oITeUEjrY3Q • Related case study: http://fromthedogbox.sapaintball.info/2008/08/16/from- humble-low-fi-prototype-to-live-online-campaign/
  30. 30. Low-fi prototyping
  31. 31. Low-fi prototyping • Quick and dirty RIA prototypes – Hand-drawn sketches – Digitised via camera – Imported into Flash for addition of animation and interactivity • Can be more convenient than paper • A video such as this might in itself become a design document • Video credit: Werner Puchert www.youtube.com/watch?v=OT3yYXkafy8
  32. 32. More low-fi prototyping
  33. 33. More low-fi prototyping • Explanation of method to be used, part of a pitch to senior stakeholders • Created before the ‘advanced paper prototyping’ video • Video credit: Werner Puchert www.youtube.com/watch?v=y4Wwnt9KIjg • Related case study: http://fromthedogbox.sapaintball.info/2008/08/16/from- humble-low-fi-prototype-to-live-online-campaign/
  34. 34. Interactive questions
  35. 35. Interactive questions • Uservoice.com was used to collect and prioritise today’s topics for discussion • Initial suggestions were supplied by myself and the conference chair • But don’t let this stop you, suggest your own questions as we go!
  36. 36. Firstly, a bit about you • Who here is creating Web 2.0 or RIAs? • Who’s a visual designer? • Who’s a developer? • Who’s a producer or project manager? • Who’s a UX geek?
  37. 37. Taming scope creep How do you deal with scope creep when developing interactive websites and web apps? What documentation helps with this problem?
  38. 38. Responding to the broad and various client expectations When developing interactive websites and web apps, there is often an air of magic in terms of client expectations regarding what is possible and what the product will be able to do (despite the requirements that are actually recorded).
  39. 39. Challenges for design documentation What challenges do you face in terms of documenting the design of interactive websites and web apps? (eg RIAs, web 2.0)
  40. 40. Evolving documentation to meet the challenges How has the documentation you use had to change to better fit the types of projects/products you do?
  41. 41. Challenges for project documentation What challenges do you face in terms of documenting plans and progress for projects that aim to develop interactive websites and web apps?
  42. 42. Further reading • Sketching User Experiences by Bill Buxton ISBN: 0123740371 • Communicating Design by Dan Brown ISBN: 0321392353 • Documenting the Design of Rich Internet Applications: A Visual Language for State by Richard F. Cecil www.uxmatters.com/MT/archives/000251.php • The Guided Wireframe Narrative for Rich Internet Applications by Andres Zapata www.boxesandarrows.com/view/the_guided_wire
  43. 43. Further questions? • Patrick Kennedy • Email: patrick.kennedy@newsdigitalmedia.com.au • Blog: www.usit.com.au (I’ll blog my thoughts on today, feel free to comment or continue the discussion further) • Slides: www.slideshare.net/PatrickKennedy
  44. 44. Case study: news.com.au • Conceptual sketches • Rough wireframes (part screengrab part Visio) • “Proof of concept” prototype • Collaboration between UX, design, dev • Final wireframes • For more information see post by Chris Khalil: www.usit.com.au/2008/10/27/relaunch-of-new-newscomau/
  45. 45. A quick audience poll • Who is using… – Wireframes? – Storyboards? – Paper prototypes? – Low-fi prototypes? – Hi-fi protptypes? – Long beta? • Something else?
  46. 46. What decides the method you use? • Cost? • Skill in using various tools? • Time taken to prototype? • Comfort with prototypes in business? • Culture of team? • How agile the team is?

×