User Study

I'm reading a CHI paper recently and noticed some techniques and terminologies in it that may be useful for my future user studies.

Counterbalancing

Definition: a within-subjects design involves changing the order in which treatment conditions are administered from one participant to anther so that the treatment conditions are matched with respect to time. The goal is to use very possible order of treatments with an equal number of individuals participating in each sequence. The purpose of counterbalancing is to eliminate the potential for confounding by disrupting any systematic relationship between the order of treatments and time-related factors [1].

Sources:
1. Gravetter. F., and Forzano L.. Research Methods for the Behavioral Science. 259.

祝爸爸生日快乐！

今天（苏州是昨天）是爸爸60岁大寿，我做了可爱的兔子，马和猪（我们一家三口，muhaha）还有寿桃为爸爸祝寿。马比较难做，只能发挥想像了。用牙签做的4条腿是Victor的主意，因为马的腿比兔子和猪要长的多，所以可以突出这点来区分他们。还是比较成功的，站得也挺稳。马的头上还有鬃毛，是木耳。

这是做生日快乐字样的模板，这比做latte art简单多了，不需要手上的技巧，但是也挺好看的。:)

爸爸妈妈自己也小小庆祝了一下，天梭的表是我送给爸爸的生日礼物，去年十一月回去的时候带回去的。

CSS Layout: Positioning

Yesterday, during the Google Chrome Hackathon, I was trying to replace the text on a button with an image, for example, replacing "Go" in the button below with an arrow image.


I can certainly add a background image for the button, but the text will still be seen above the background. Due to the lack of time, I just deleted the text in the html file. However, I feel that replacing the text with an image is really a styling choice rather than semantic.

Today, I started to read the book "Pro CSS and HTML Design Patterns" to improve my css skills. It actually mentions about the Text Replacement design pattern in the first chapter. It requires the use of css layout positioning to achieve the effect.

First, a recap on the positioning models:

• Position an element by setting position to something other than static.
• Use left, right, top and bottom to change the default position.
• You can use position: static to "unposition" an element.

position	In flow	Positioning
static	yes	according to the flow
relative	ghost	relative to the flow position
absolute	no	offset from its nearest positioned ancestor
fixed	no	screen coordinate space

Text Replacement

Replace "Go" with this image:

Result:


Method: (Taken from p209 of the book.)
HTML

 TEXT 

CSS

#UNIQUE-ID { 
  position:relative; 
  padding:0; 
  overflow:hidden;
  width:IMAGE_WIDTH;
  height:IMAGE_HEIGHT; 
}
#UNIQUE-ID span { 
  position:absolute; 
  left:0; 
  top:0; 
  margin:0;
  width:IMAGE_WIDTH;
  height:IMAGE_HEIGHT;
  background-image:url("FILE.EXT");
  background-repeat:no-repeat; 
}

Initially, when I was testing with this, I found that the Chrome browser includes the border width in the height and width of the content size. By inspecting the element, I found that box-sizing is set to border-box. By setting it back to content-box, it behaves normally.

DLP vs LCD Projectors

I'm using 4 DLP projectors (Dell 5100MP) for my tabletop display system and so far they are giving me a lot of troubles. First, it produces rainbow artifacts when the display is seen through a camera. Now, it produces significant flickering when projecting through an optical shutter. The LCD projector does not produce such artifacts. It seems like we should have gone for the LCD projectors at the very beginning. I think by understanding better how each of them works will allow us to make better decisions in the future and also for the current research.

LCD Projector
LCD (liquid crystal display) projectors contain three separate LCD glass panels, one each for the red, green, and blue components of the video signal. Each LCD panel contains thousands (or millions) of liquid crystals that can be aligned in either open, closed, or partially closed positions to allow light to pass through. The alignment is controlled by the electric field between the two transparent electrodes on the two sides of the liquid crystal molecules. The projector typically sends light through special dichroic filter / reflector assemblies called "dichroic mirror" that separates light to the three LCD panels. Wikipedia has a nice explanation and a diagram on how it works.

DLP Projector
DLP (Digital Light Processing) projectors use a DLP chip with reflective surface made up of millions of tiny mirrors. To define color, a color wheel is used which contains a red, green and blue filter. This wheel spins in the light path between the lamp and the DLP chip and alternates the color of the light hitting the chip. The mirrors tilt away form or into the lens path based upon how much each color is required for each pixel. In the most expensive DLP projectors, there are three separate DLP chips, one each for the red, green and blue channels. They are usually over $10,000 and do not use a color wheel.

Rainbow Artifacts and Flickering
The wheel based DLP projectors produce rainbow artifacts because of the sequential color updating from the wheel. As the color wheel spins, the image on the screen is either red, green or blue at any given instant in time. Since LCD projectors and 3-chip DLP projectors always deliver a constant red, green, and blue image simultaneously, they do not create rainbow artifacts.

Under a switching optical shutter, flickering occurs with the 1-chip DLP projector because the period of the rotating wheel does not match with the period of the optical shutter.

Source: http://www.projectorcentral.com/lcd_dlp_comparison.htm

Notes on David Rose's TED Talk on How to Pitch to VCs

Things to Convey
Integrity, Passion, Experience, Knowledge, Skill, Leadership, Commitment, Vision, Realism, Coachability

Timeline of Your Presentation
The moment you walk into the door, you are going to take the VCs on an emotional ride. The overall arc of your presentation should start like a rocket. Use the first 10 - 30s to grab the attention. And then take them on a solid, steady, upward path right from the beginning to the end. Everything should be reinforcing this and it should get better, better and better. And in the end, boom! You should make them excited, ready to write you a check and throw money on you.

How to do this?

• Logical progression: Don't skip a step and go backwards. First, talk about what the market is? Why are you going to do X, Y, Z? And how are you going to that?
• Thing VCs know or can relate to: relate back to the world.
• Validators: outside references, sales, award, people has done before, beta test is doing well .
• Believable upsides: revenue in 5 years (a million, not a upside; a billion, not believable).
• Avoid downsides: 
• Things VCs know that are not true.
• Things they don't understand: need to make a leap to think about it. This will stop the flow of the presentation.
• Things make them think: need to take them step by step without being patronizing.
• Internal inconsistencies: e.g. numbers in sales.
• Typos, errors, unpreparedness.

What to Include in Your Presentation

• Company logo
• Quick 15-30s intro to grab the attention (a factor, something counterintuitive, a story, an experience)
• Quick business overview: 2 sentences (we built widgets for the X, Y, Z market; we sell service to help someone to do X) to put everything in context.
• Management team: past experience
• Market: size
• Product: what is it? A screenshot of the website or a canned demo (no live demo). Why people would buy it?
• Revenue (business) model: how are you going to make money on a per unit basis? Who are your customers?
• Strategic relationships: distribution, producing partner. This is good for validation. 
• Competition: even it is an old way of doing something. This allows the VCs to judge how you fit in all these and how you are special.
• Barrier to entry
• Financial overview: 1-2 years backwards and 3-5 years forward (5 may be too much, 4 is rational). Translate business model to a company model (how many units you are going to sell?). Give a picture of how the company will perform in the next few years.
• Use of proceeds
• Capital and valuation: who invested; did you invest yourself? your friends, family? What's the capital structure up until this point?
• Conclusion: take back to your logo and wrap up. This the final boom that should send the VCs to the space.

Parentheses

Use parentheses ( ) to include material that you want to de-emphasize or that wouldn't normally fit into the flow of your text but you want to include nonetheless.

If the material within parentheses appears within a sentence, do not use a capital letter or period to punctuate that material, even if the material is itself a complete sentence. (A question mark or exclamation mark, however, might be appropriate and necessary.) If the material within your parentheses is written as a separate sentence (not included within another sentence), punctuate it as if it were a separate sentence.

Examples:
Forty-three years after his death, Robert Frost (we remember him at Kennedy’s inauguration) remains America’s favorite poet.
Forty-three years after his death, Robert Frost (do you remember him?) remains America’s favorite poet.
Forty-three years after his death, Robert Frost remains America’s favorite poet. (We remember him at Kennedy’s inauguration.)

Source: http://www.nationalpunctuationday.com/parentheses.html

Understanding Certificates

Digital Signature

A digital signature scheme typically consists of three algorithms:

• A key generation algorithm that selects a private key uniformly at random from a set of possible private keys. The algorithm outputs the private key and a corresponding public key.
• A signing algorithm that, given a message and a private key, produces a signature.
• A signature verifying algorithm that, given a message, public key and a signature, either accepts or rejects the message's claim to authenticity.