Project: Designing for a Pressure Sensitive Keyboard

Oct 5 (Monday)

• You: In class development: discussion of techniques / problems

• You: Project demonstration (On-line and paper portfolio, system, design crit)

• Project given out.
• Homework: You begin sketching 10 designs, plus 10 details.
• Tutorial: WPF basic tutorial begins.

(:cellnr :) Sept. 14 (Mon): (:cell :)

(:table border=1 :) (:cellnr :) Sept. 9 (Wed):

(:cellnr :) Sept. 14 (Mon): (:cell :)

• You: present best sketch to class (I will photograph and project it) / Design crit.
• Tutorial: Pressure sensitive keyboards, and more WPF examples
• Homework: evolve your sketch, start working with C# / WPF / Keyboard

(:cellnr :) Sept. 16 (Wed) (:cell :)

• You: Exchange latest sketch with classmate. Critique / expand other person's sketch
• Tutorial: More WPF examples
• Homework: Flesh out your sketch. Start coding to see what is possible

(:cellnr :) Sept. 21 - 23, 28 (:cell :)

• Tutorial: More WPF examples as needed (advanced); using MSI
• In class development: discussion of techniques / problems
• Homework: Continue coding; final sketches. Work on portfolio.

(:cellnr :) Sept. 30 (Wed) (:cell :)

• In class: Project demonstration (On-line and paper portfolio, system, design crit)

(:tableend :)

Project-specific schedule (tentative)

• Sept. 30 (Wed)

Project-specific Schedule

• Sept. 9 (Wed):
  • Project given out.
  • Homework: You begin sketching 10 designs, plus 10 details.
  • Tutorial: WPF basic tutorial begins.
• Sept. 14 (Mon):
  • You: present best sketch to class (I will photograph and project it) / Design crit.
  • Tutorial: Pressure sensitive keyboards, and more WPF examples
  • Homework: evolve your sketch, start working with C# / WPF / Keyboard
• Sept. 16 (Wed)
  • You: Exchange latest sketch with classmate. Critique / expand other person's sketch
  • Tutorial: More WPF examples
  • Homework: Flesh out your sketch. Start coding to see what is possible
• Sept. 21 - 23, 28
  • Tutorial: More WPF examples as needed (advanced); using MSI
  • In class development: discussion of techniques / problems
  • Homework: Continue coding; final sketches. Work on portfolio.
• Sept. 30
  • In class: Project demonstration (On-line and paper portfolio, system, design crit)
• Sept 16 (Wed):

• Portfolio supplies as needed

• what if you could attach objects to each key or combination of keys (e.g., by clay)?

• Immediate idea: use the keyboard to affect the graphical design of an image. Perhaps by how I type, the circle will grow, change its shape and color, the letters will animate in different ways...
• Extended idea: generalize it to animate graphical design properties, to have them react to what you do.

• Immediate idea: use the keyboard as a type of wa-wa foot peddle that affects the sound characteristics as I play
• Extended idea: use the keyboard as a foot control to augment some other input

• Immediate idea: Create a typing game between multiple people, where they have to coordinate their actions. For example, whenever a person presses a key, a bubble showing that letter appears, where the bubble size depends on the pressure. The other person has to type the same letterto match the pressure. If the two pressures stay the same for a certain amount of time, the letter is entered into a textbox (i.e., typed). If they don't, the bubble will pop.

1. 10 competing design sketches, 10 sketch details, and sketch refinements. In your sketchbook, generate at least 10 competing (different) designs of a system that exploits this keyboard. Show and explain your design(s) to others. You will know which ones are the most exciting by how you talk about them and how others react. Choose the most promising one, and then produce 10 details and/or variations of a particular sketch in your sketchbook. You will be asked to briefly present your best one. As your ideas change, sketch them out. You will be asked at any time to show your sketches to the instructor, TA, and/or the class.

Lateral thinking

Your first thoughts will be something that is fairly derivative of what you can normally do with a keyboard, e.g., use pressure

• to influence font size / grey level,
• to influence key press attributes like key repeats.
• as a games controller to affect other dimensions (e.g., to extend existing properties of arrow keys, etc.)

Start thinking about unconventional things. Begin with other output, e.g.,

• visual non-textual output (can you paint with this keyboard)?
• sounds (can you use this as an instrument)?
• patterns (can you use this as a password system)?
• games controller (can you use this to create a very unconventional / novel game specifically designed around these properties, as was done with the WII)?

Start thinking about it as a pressure pad rather than a keyboard

• what if it was under a foam pad, and people could walk and/or sit on it?
• what if it was placed in a pillow on a bed?
• what if it was under a tight shirt that a person was wearing? Would it capture them breathing?

Start thinking about it as a mechanism, where you could attach things to it

• what if you could attach some levers that pressed different keys selectively?

Use serendipity. For example, go to Google Images, and type in some words. For example, I typed in 'Fun' and then looked at the images and asked What in these images could inspire some action with this keyboard? The key is to generate many ideas. Most ideas will stink or will be undoable. Others may have promise, and will cause you to think in new directions. Some examples:

• Attach:fun.jpg
  • Immediate idea: use the keyboard to affect the graphical design of an image. Perhaps by how I type, the circle will grow, change its shape and color, the letters will animate in different ways...
  • Extended idea: generalize it to animate graphical design properties, to have them react to what you do.

Attach:guitar.jpg

• Immediate idea: use the keyboard as a type of wa-wa foot peddle that affects the sound characteristics as I play
• Extended idea: use the keyboard as a foot control to augment some other input

Attach:bubbles.jpg

• Immediate idea: Create a typing game between multiple people, where they have to coordinate their actions. For example, whenever a person presses a key, a bubble showing that letter appears, where the bubble size depends on the pressure. The other person has to type the same letterto match the pressure. If the two pressures stay the same for a certain amount of time, the letter is entered into a textbox (i.e., typed). If they don't, the bubble will pop.

1. 10 competing design sketches, 10 sketch details, and sketch refinements. In your sketchbook, generate at least 10 competing (different) designs of a system that exploits this keyboard. Choose the most promising one, and then produce 10 details and/or variations of a particular sketch in your sketchbook. You will be asked to briefly present your best one. As your ideas change, sketch them out. You will be asked at any time to show your sketches to the instructor, TA, and/or the class.

• Sample code illustrating how to access keyboard events

• UIST Contest Web Site not only details the contest, but provides several videos illustrating the keyboard and sample ideas
• Sample code illustrating how to access keyboard events will be supplied during class

Worth: 20%

This unconventional hardware was deliberately chosen, as there is no obvious solution to how to exploit such a system. Nor are there other examples out there that you can easily copy, excepting for a few simple demonstration applications (see video) . Thus it is up to you to be as creative as possible.

(:title Project: Designing for a Pressure Sensitive Keyboard :) Back to CPSC 581 home Worth: 20%

Description

This is an exercise in creativity, where you will design, implement, document and demonstrate an interface that creatively exploits the capabilities of a pressure-sensitive keyboard. This keyboard is an experimental Microsoft prototype - only a few are in existence today. Thus no interfaces exist (except for a few demonstrations) that use such a keyboard's capabilities. See a video illustrating the hardware.

This unconventional hardware was deliberately chosen, as there is no obvious solution to how to exploit such a system. Nor are there other examples out there that you can easily copy, excepting for a few simple demonstration applications (see video) . Thus it is up to you to be as creative as possible.

The hardware was developed for the ACM UIST contest, where contestants will have their systems judged at the ACM UIST Conference (October 4-. Victoria BC). We are officially entered - if suitable, we may submit our best system to the contest (there is a prize).

To prepare for this assignment, you will learn techniques on: how to brainstorm and refine ideas via sketching, how to program in WPF, how to program the keyboard, how to create a portfolio entry displaying your results.

Pedagogical Objectives

• Apply basic sketching techniques and lateral thinking to produce various designs
• Acquire first-time experiences brainstorming ideas via sketches in a sketchbook
• Learn how to implement, package, install and document WPF programs
• Acquire first-time experiences creating a portfolio web site and summary

Assignment Deliverables and Details .

1. 10 competing design sketches and 10 sketch details. In your sketchbook, generate at least 10 competing (different) designs of a system that exploits this keyboard. Choose the most promising one, and then produce 10 details and/or variations of a particular sketch in your sketchbook.
2. An implemented WPF application. Implement a WPF application that demonstrates how your system works.
3. Poster portfolio summary. Create a paper-based visual summary (it should be easy to carry and show, e.g., no larger than 18x24) that illustrates your system. Provide a title, minimal text (perhaps as annotations), and visuals that reveal what this is about. Emphasize the visuals over text - let it tell its own story. Don't feel bound to flat paper or a poster - you can have things unfold, have set of pages, overlays, use a box or other packaging, re-purpose stationary and art materials, etc. Have impact.
4. Web portfolio. Create a web site that will contain all your portfolio summary. Include a brief introduction to yourself and (if you prefer) a photo. Make it engaging. For ideas, Google design portfolio and art portfolio. Also see Artist Portfolio Guidelines for some hints on portfolios and how they are used.
5. Portfolio summary. Within this web site, create a portfolio summary of your project that documents your design and implementation in a visually appealing manner. Note that this may become your standard style for other summaries. The portfolio must include:
   1. a front page with an illustrative image, description and index
   2. an illustrated and annotated sequence describing your button. Avoid lengthy text. Use visuals as much as possible, e.g., screen snapshots, animation, video, etc.
   3. a download page containing the complete source and executables, and instructions for running the sample and/or inserting your control into an application, and the API for the control
6. Demonstrate your work. During class time, you will be asked to demonstrate all the above work to other class members and the instructor

Materials

• UIST Contest Web Site not only details the contest, but provides several videos illustrating the keyboard and sample ideas.
• Sketchbook
• Visual Studio 2008 (including WPF)
  • You can download VS 2008 for free from the U Calgary MSDNAA Software Center. After logging in, click Software (top left), then select Visual Studio 2008 Professional Edition. You should also download the MSDN Library for Visual Studio 2008. You can also download Blend, which is an advanced graphical interface to WPF.
• Art supplies as needed

Evaluation

Your grade will be based delivery of sketches, your design creativity, your implementation, documentation and packaging, and your portfolio summaries (paper and electronic). However, great successes or failures, or incompleteness in one exercise criteria will likely affect your total grade. Note that a successful implementation is required: if you cannot demonstrate your system, you will automatically receive a zero. Similarly, missing or incomplete work will result in a large grade penalty.

Hint: Generating Ideas by Lateral thinking

1. In you sketchbook, jot down several words that you (or your friends) would use to describe your personality.
2. For each of these words, visualize in your head how different professionals would create a caricature of this personality trait e.g.,
   • a Disney cartoonist (animating a person, an animal, a flower, a rock...),
   • an architect (building a home, a high-rise, a garden shed, a city),
   • an industrial designer (creating a shovel, a tea kettle, an action figure),
   • a fashion designer,
   • an avant garde artist,
   • a computer scientist (hey, that's you!),
   • and so on.
3. For each one of these, sketch out some graphical explorations of buttons that somehow capture the essence of these personality traits. Label these sketches, and annotate them if necessary. Don't try to evaluate your sketches - its quantity, not quality of ideas that matter right now.
4. Alternately, google the personality trait and click the images view - you will likely get many ideas by seeing other people's images. Use these images to inspire you own sketch attempts, especially in terms of interactivity. For example, how would your button react to one or more clicks, or an approaching/leaving cursors? How will its visuals change over time?
5. Generate as many sketches as possible i.e., you may wish to sketch several designs of one personality trait, or explore several personality traits and their combinations. You can exaggerate these traits: the buttons can be caricatures. Humour is allowed!
6. Show and explain your design(s) to others. You will know which ones are the most exciting by how you talk about them.