Sketching Interactive Experiences

HCILectures.HCILectcuresSketching History

Show minor edits - Show changes to output

May 20, 2012, at 10:06 AM by 24.64.81.73 -
Changed lines 70-72 from:
!!! Web sites with sketches
[[http://www.number27.org/sketchbooks.html |Jonathan Harris ]] - snapshots of his sketchbook
to:
May 20, 2012, at 10:05 AM by 24.64.81.73 -
Changed lines 65-66 from:
* [[http://www.youtube.com/watch?v=Zto6aTZM9t0&NR=1 | Nokia Morph Concept]]
to:
May 20, 2012, at 10:01 AM by 24.64.81.73 -
Deleted lines 20-28:
!!!Selected Videos from [[http://webzone.k3.mah.se/k3jolo/designVideo/ | Designing with Moving Images]]
The videos below point to video sketch prototyping examples posted on the above web site.
* [[http://webzone.k3.mah.se/k3jolo/designVideo/ | Designing with Moving Images]] collects various video sketches. Most are based around 'thin fiction' stories showing various scenarios of use. A subset is listed below
** [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo02.htm | Tip-Toe]] illlustrates floor buttons used to unlock a door.
** [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo04.htm | News Media]], a news-on-demand service showing three scenarios of use.
** [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo05.htm | Posthoc WorkNotes]], a rich media content management system.
** [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo06.htm | Our News and Sports ]]
** [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo07.htm | Sitep ]] uses cutout animation to tell the story.
Deleted line 64:
** [[http://youtube.com/watch?v=eRqUE6IHTEA| Google Docs in Plain English]] - a great example of mixing sketches, concepts, use scenarios, and even interface walkthroughs in an engaging video sketch.
May 20, 2012, at 09:48 AM by 24.64.81.73 -
Deleted lines 16-43:
!!Exercises

!!Topics Covered
* The Sketchbook

!!Required Readings
# Buxton, W. (2007) '''Sketching User Experiences: Getting the Design Right and the Right Design'''. Morgan Kaufmann.
** This excellent, entertaining and informed book describes the why and much of the how of sketching for user interface design experiences.

!!In-Class Activities

!!Software supporting sketching
* [[http://www.balsamiq.com/products/mockups/examples | Balsamiq]] is a drag and drop interface builder that let you sketch out interfaces quickly. Interface widgets have a sketch-like appearance.
* [[http://www.bluebeam.com/| Bluebeam PDF Revu]] can create and edit PDFs, and lets you export vector graphics to other software (e.g., Illustrator).Costs around $60 in the([[http://www.academicsuperstore.com/products/Bluebeam/PDF+Revu/996489academic store]].

!!Commentaries about sketching
* Nic Marquardt's [[http://www.nicolaimarquardt.com/blog/ | blog entry]] describes how he uses his sketchbook.

!!Additional Readings
* Baskinger, M. \\
[[HCIPapers:baskinger-pencilsbeforepixels.interactions08.pdf|'''Pencils before pixels: a primer in hand-generated sketching''']]. interactions 15, 2 (Mar. 2008), 28-36. DOI= http://doi.acm.org/10.1145/1340961.1340969 2008.

!!Videos illustrating or using sketching methods
!!!Talking over a screen-captured slide show
Adding narration to your sketch can help make it self-explanatory. One simple way to do this is to take a series of screenshots (or mocked up screenshots) showing an interactive sequence, and assemble them in a slide show. Then use a screen capture program tp capture the slide show, your mouse position, and your voice as a video. A narrator can talk about each screen (pointing with the cursor), then click to the next screen. As Lowgren (in the example) states, "the resulting video communicates the temporal qualities of the design much better than the static screenshots would, and it didn't take many minutes to produce.''
* [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo11.htm | '''c3demo''']] by Jonas Lowgren, 2007. 'An example explorative work in interactive visualization of semi-structured data.
Deleted line 17:
* [[http://dotsub.com/films/twitterin/index.php?autostart=true&language_setting=en_3068| Twitter in Plain English]]
Changed lines 20-21 from:
* [[http://www.livescribe.com/sneakpeek/index.html | An example illustration]] of how to use an innovative design of a live notebook i.e., envisions its use rather than just the interface.
to:
Deleted lines 82-83:
!! Major sources used to prepare lecture material
* Buxton, W. (2007) ''Sketching User Experiences: Getting the Design Right and the Right Design''. Morgan Kaufmann.
May 20, 2012, at 09:41 AM by 24.64.81.73 -
Added lines 2-5:


THIS SITE IS BEING MIGRATED OVER TO: [[http://grouplab.cpsc.ucalgary.ca/sketchbook/index.php |http://grouplab.cpsc.ucalgary.ca/sketchbook/index.php]]
Changed lines 15-18 from:

!!Handouts
*
to:
Changed line 114 from:
* Buxton, W. (2007) ''Sketching User Experiences: Getting the Design Right and the Right Design''. Morgan Kaufmann.
to:
* Buxton, W. (2007) ''Sketching User Experiences: Getting the Design Right and the Right Design''. Morgan Kaufmann.
Changed lines 108-110 from:
to:
!!! Web sites with sketches
[[http://www.number27.org/sketchbooks.html |Jonathan Harris ]] - snapshots of his sketchbook
Changed line 5 from:
* [[HCILectures:Pres-581-Sketchbook.ppt|The Sketchbook]] [-(see [[http://grouplab.cpsc.ucalgary.ca/papers/videos/2002-buddy-bugs-skigraph.wmv | video]])-]
to:
* [[HCILectures:sketching-overview.ppt|The Sketchbook]] [-(see [[http://grouplab.cpsc.ucalgary.ca/papers/videos/2002-buddy-bugs-skigraph.wmv | video]])-]
August 23, 2009, at 07:56 PM by 24.64.89.150 -
Changed lines 28-32 from:
to:
* [[http://www.bluebeam.com/| Bluebeam PDF Revu]] can create and edit PDFs, and lets you export vector graphics to other software (e.g., Illustrator).Costs around $60 in the([[http://www.academicsuperstore.com/products/Bluebeam/PDF+Revu/996489academic store]].

!!Commentaries about sketching
* Nic Marquardt's [[http://www.nicolaimarquardt.com/blog/ | blog entry]] describes how he uses his sketchbook.
August 23, 2009, at 07:51 PM by 24.64.89.150 -
Added lines 26-28:
!!Software supporting sketching
* [[http://www.balsamiq.com/products/mockups/examples | Balsamiq]] is a drag and drop interface builder that let you sketch out interfaces quickly. Interface widgets have a sketch-like appearance.
August 15, 2009, at 06:42 PM by 24.64.89.150 -
August 15, 2009, at 04:55 PM by 24.64.89.150 -
Changed lines 2-3 from:
This site captures and archives various materials and resources related to sketching that I and others have produced. It is still under development, but will grow over time.
to:
This module captures and archives various teaching materials and resources related to sketching that I and others have produced. It is still under development, but will grow over time.
Deleted line 32:
Changed lines 35-36 from:
* [[http://hci.stanford.edu/research/paper/docs/apps1.html | Varous prototypes]] This page used to have videos; I will contact the author.
to:

!!! Video Enactments of Ideas
* [[http://dotsub.com/films/twitterin/index.php?autostart=true&language_setting=en_3068| Twitter in Plain English]]
* [[Attach:shadow1.wmv | Shadow Reaching - concept]] by Garth Shoemaker and Tony Tang, UBC
* [[Attach:shadow2.mov | Shadow Reaching - implemented]] by Garth Shoemaker and Tony Tang, UBC
* [[http://www.livescribe.com/sneakpeek/index.html | An example illustration]] of how to use an innovative design of a live notebook i.e., envisions its use rather than just the interface.

!!!Selected Videos from [[http://webzone.k3.mah.se/k3jolo/designVideo/ | Designing with Moving Images]]
The videos below point to video sketch prototyping examples posted on the above web site.
* [[http://webzone.k3.mah.se/k3jolo/designVideo/ | Designing with Moving Images]] collects various video sketches. Most are based around 'thin fiction' stories showing various scenarios of use. A subset is listed below
** [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo02.htm | Tip-Toe]] illlustrates floor buttons used to unlock a door.
** [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo04.htm | News Media]], a news-on-demand service showing three scenarios of use.
** [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo05.htm | Posthoc WorkNotes]], a rich media content management system.
** [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo06.htm | Our News and Sports ]]
** [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo07.htm | Sitep ]] uses cutout animation to tell the story.

!!!Selected Videos from [[http://www.mkp.com/sketching | Bill Buxton's Sketching User Experience Videos]]
The videos below mirror various prototyping examples that accompany Buxton's book '''Sketching User Experience'''. See that web page for credits, permissions, and disclaimers and [[Attach:videolog5.doc|this file]]
* '''Organizing design materials'''. While each system can be considered a 'sketch', they are better viewed as ways that designers can handle their materials electronically.
** [[Attach:01-PWpda.wmv|Portfolio Wall]] (15MB WMV) illustrates 2 versions of a large format display that lets you view and annotate a portfolio of images in different ways. 1st version is for a presenter to control via touch, 2nd version is for multiple people to control via multiple PDA touchpads.
** [[Attach:02-cabinetmovie.mov|Cabinet-Collecting Visual Material]] (19MB MOV) - A way to collect and managing visual material for designers on a large surface.
** [[Attach:02a-AtelierCoWall.wmv|Atelier]] (12MB WMV) A wall that lets one enter/organize/display digital media using tangible methods

* '''Chameleon''' is a system that lets one pan over 3D spaces. These are done as interactive sketches, where parts are simulated.
** [[Attach:03-boomchameleon.wmv| Boom Chameleion]] (19 MB WMV) shows the display attached to a boom.
**[[Attach:04-chameleon.wmv| Chameleon]] (7MB WMV) uses position tracking of a small screen
** [[Attach:05-tabletpcchameleon.mpeg|Tablet Chameleon]] (7MB MPEG) uses a mouse attached to a tablet to do its spatial tracking.
** [[Attach:12-chameleonpictdriv.ppt|Powerpoint Chameleon]] (.5MB Powerpoint) uses powerpoint and animated gfs to sketch out the concept behind Chamelean - [[Attach:09-animationstanda.gif]] is the GIF file used in one of the slides

* '''Office of the Professional''' is a very early envisionment of an office of the future.
** [[Attach:20-officeoftheprofessional.wmv| Full video]] (30MB WMV)
** [[Attach:18-bifocaldisplay.wmv|Bifocal Display]] (9MB WMV) illustrates an early fisheye view paper prototype - a superb interactive sketch

* '''Two Handed Input''' shown via simple video sketches
** [[Attach:10-fingermovie1.wmv |One Finger moving]] (WMV)
** [[Attach:11-fingerscale2.wmv| Two handed scaling]] (WMV)

* '''Two People Communicating through a display'''
** [[Attach:06-VideoWhiteboard.mov|Video Whiteboard]](13 MB MOV) done by video cameras
* [[Attach:22-clearboardiii.mov]] (22MB MOV File) is a futuristic video of the concept

* '''Mug Metaphor Interface'''
** [[Attach:24-luciamugsketch.mov|Sketch version]] (11MB MOV) of the concept
** [[Attach:23-luciamug_hirez.mov|Hi Rez version ]] (9MB MOV ) Hi Rez version of the same concept.

* '''Bill's Instructional videos''' mirrors methods described in his book
** [[Attach:25b-postitvideosketch.wmv | Postit Video Sketch]] (7 MB WMV) shows how to make a very simple video sketch

* '''Assorted others'''
** [[Attach:19-matterduplicator.wmv | Matter Duplicator]] (1358KB Windows Media Audio/Video file) - a spoof of a photocopier machine, an example of an extremely simple video sketch!
** [[Attach:07-shakerMP3.wmv|Shaker MP3]] (6 MB WMV) built quickly using Phidgets
** [[Attach:08-Truck.wmv]] (.5MB WMV) sketch animation of a truck moving through obstacles
** [[Attach:13-graspableproto.wmv|Graspable Prototype]] shows a tangible interface prototyped thorough director on a digital desk.
** [[Attach:14-ocadcursor.wmv | Position-dependant cursor]] (2MB WMV)
** [[Attach:15-belisle3dgesture.mov|3D Gesture]] (1.5 MB MOV) on a large screen
** [[Attach:16-sketchamove.mov|Sketch-A-Mov]] (12MB MOV ) - prototype of new concept for toy cars. Brilliantly executed.
** [[Attach:17-wristwatchclip.wmv |Wristwatch Cursor]] (8MB WMV) sketch of a finger-operated watch.
** [[Attach:25-tektronix.wmv|Tectronix]] (2MB WMV) usability study over a paper prototype
** [[Attach:26-ronbirdagenda.mov |Agenda]] (11MB MOV) an interative slide show of a prototype; video may be damaged.
** [[Attach:27-climatecontrol.wmv|Climate Control]] (20MB WMV), explanation of screen snapshots of a paper / pictive prototype
** [[http://youtube.com/watch?v=eRqUE6IHTEA| Google Docs in Plain English]] - a great example of mixing sketches, concepts, use scenarios, and even interface walkthroughs in an engaging video sketch.
* [[http://www.youtube.com/watch?v=Zto6aTZM9t0&NR=1 | Nokia Morph Concept]]

!!! Not sure how these were done...
* [[http://vimeo.com/266383 |iPhone Copy and Paste]] - a mockup of what it might look like to Copy and Paste on iPhone, using the magnifying loupe and a second-finger tap.
August 15, 2009, at 04:53 PM by 24.64.89.150 -
Changed lines 34-35 from:
* [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo11.htm | '''c3demo''']]: ''an example explorative work in interactive visualization of semi-structured data''.
to:
* [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo11.htm | '''c3demo''']] by Jonas Lowgren, 2007. 'An example explorative work in interactive visualization of semi-structured data.
August 15, 2009, at 04:52 PM by 24.64.89.150 -
Changed lines 33-34 from:
* [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo11.htm | c3demo ]]: ''an example explorative work in interactive visualization of semi-structured data''.
to:
* [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo11.htm | '''c3demo''']]: ''an example explorative work in interactive visualization of semi-structured data''.
August 15, 2009, at 04:51 PM by 24.64.89.150 -
Changed line 30 from:
!!Videos
to:
!!Videos illustrating or using sketching methods
August 15, 2009, at 04:51 PM by 24.64.89.150 -
Changed lines 31-36 from:
to:
!!!Talking over a screen-captured slide show
Adding narration to your sketch can help make it self-explanatory. One simple way to do this is to take a series of screenshots (or mocked up screenshots) showing an interactive sequence, and assemble them in a slide show. Then use a screen capture program tp capture the slide show, your mouse position, and your voice as a video. A narrator can talk about each screen (pointing with the cursor), then click to the next screen. As Lowgren (in the example) states, "the resulting video communicates the temporal qualities of the design much better than the static screenshots would, and it didn't take many minutes to produce.''
* [[http://webzone.k3.mah.se/k3jolo/designVideo/designVideo11.htm | c3demo ]]: ''an example explorative work in interactive visualization of semi-structured data''.

* [[http://hci.stanford.edu/research/paper/docs/apps1.html | Varous prototypes]] This page used to have videos; I will contact the author.
August 15, 2009, at 04:39 PM by 24.64.89.150 -
Changed lines 27-28 from:
# [[http://delivery.acm.org/10.1145/1350000/1340969/p28-baskinger.pdf?key1=1340969&key2=8195921321&coll=ACM&dl=ACM&CFID=17345829&CFTOKEN=88816703 | Baskinger, M. 2008. '''Pencils before pixels: a primer in hand-generated sketching.''' interactions 15, 2 (Mar. 2008), 28-36. ]]
to:
* Baskinger, M. \\
[[HCIPapers:baskinger-pencilsbeforepixels.interactions08.pdf|'''Pencils before pixels: a primer in hand-generated sketching''']]. interactions 15, 2 (Mar. 2008), 28-36. DOI= http://doi.acm.org/10.1145/1340961.1340969 2008.
August 15, 2009, at 01:53 PM by 24.64.89.150 -
Changed line 21 from:
# Buxton, W. (2007) ''Sketching User Experiences: Getting the Design Right and the Right Design''. Morgan Kaufmann.
to:
# Buxton, W. (2007) '''Sketching User Experiences: Getting the Design Right and the Right Design'''. Morgan Kaufmann.
Changed lines 27-28 from:
# [[http://delivery.acm.org/10.1145/1350000/1340969/p28-baskinger.pdf?key1=1340969&key2=8195921321&coll=ACM&dl=ACM&CFID=17345829&CFTOKEN=88816703 | Baskinger, M. 2008. ''Pencils before pixels: a primer in hand-generated sketching.'' interactions 15, 2 (Mar. 2008), 28-36. ]]
to:
# [[http://delivery.acm.org/10.1145/1350000/1340969/p28-baskinger.pdf?key1=1340969&key2=8195921321&coll=ACM&dl=ACM&CFID=17345829&CFTOKEN=88816703 | Baskinger, M. 2008. '''Pencils before pixels: a primer in hand-generated sketching.''' interactions 15, 2 (Mar. 2008), 28-36. ]]
August 15, 2009, at 01:52 PM by 24.64.89.150 -
Added lines 15-16:
!!Exercises
Changed lines 27-28 from:
to:
# [[http://delivery.acm.org/10.1145/1350000/1340969/p28-baskinger.pdf?key1=1340969&key2=8195921321&coll=ACM&dl=ACM&CFID=17345829&CFTOKEN=88816703 | Baskinger, M. 2008. ''Pencils before pixels: a primer in hand-generated sketching.'' interactions 15, 2 (Mar. 2008), 28-36. ]]
August 15, 2009, at 01:51 PM by 24.64.89.150 -
Added lines 1-3:
(:title Sketching Interactive Experiences :)
This site captures and archives various materials and resources related to sketching that I and others have produced. It is still under development, but will grow over time.
Deleted line 4:
I created this series of presentations as a module for my HCI courses. See
Changed lines 10-30 from:
* [[HCILectures:Pres-581-SketchMethods-SlideShows-Videos.zip| Slides Shows / Animation - videos]]
to:
* [[HCILectures:Pres-581-SketchMethods-SlideShows-Videos.zip| Slides Shows / Animation - videos]]

!!Handouts
*

!!Topics Covered
* The Sketchbook

!!Required Readings
# Buxton, W. (2007) ''Sketching User Experiences: Getting the Design Right and the Right Design''. Morgan Kaufmann.
** This excellent, entertaining and informed book describes the why and much of the how of sketching for user interface design experiences.

!!In-Class Activities

!!Additional Readings


!!Videos

!! Major sources used to prepare lecture material
* Buxton, W. (2007) ''Sketching User Experiences: Getting the Design Right and the Right Design''. Morgan Kaufmann.
August 15, 2009, at 01:46 PM by 24.64.89.150 -
Added lines 1-8:
!!Presentations
I created this series of presentations as a module for my HCI courses. See
* [[HCILectures:Pres-581-Sketchbook.ppt|The Sketchbook]] [-(see [[http://grouplab.cpsc.ucalgary.ca/papers/videos/2002-buddy-bugs-skigraph.wmv | video]])-]
* [[HCILectures:Pres-581-SketchMethods-Vanilla.ppt | Vanilla Sketches]]
* [[HCILectures:Pres-581-SketchMethods-Storyboards.ppt | Storyboard Sketches]]
* [[HCILectures:Pres-581-SketchMethods-SlideShows-part1.ppt | Slides Shows / Animation - part 1]]
* [[HCILectures:Pres-581-SketchMethods-SlideShows-part2.ppt | Slides Shows / Animation - part 2]]
* [[HCILectures:Pres-581-SketchMethods-SlideShows-Videos.zip| Slides Shows / Animation - videos]]