Wednesday, April 27, 2005

Pick-Me Buttons

Now that we knew how to draw transparently...


Pick-me button 1  Pick-me button 2  Pick-me button 3

What you see above is a group of pick-me buttons, which I so named because they seemed to jump up at me and say, "Pick me! Pick me!" Right now they're entirely pre-drawn, but eventually we'll be able to draw everything except the button image using RoundRect(), GradientFill(), and Ellipse().

One of my true passions has always been computer interfaces. How do we interact (link: see Usage Note) with these powerful machines that force us to work by their rules? But I'll spare you the soap box (in this post). What this meant for this project was that the entire user interface was my canvas, and I was an eager painter.

Pick-me buttons aren't really 2D or 3D controls. They live somewhere in the 2½D world. Their shadow gives them a sense of height and a different platform than the background they rest on. The illusion is compounded by the way that they jump up when selected, and their shadow correspondingly shrinks.

These buttons really only work in a horizontal arrangement, which makes them good if you have a landscape display. They use more space than their Win32 counterparts, toggle button and radio button groups. But in my opinion they're well worth the real estate. Also, for our application the only input was by a touch interface. Touching one of these buttons and seeing it spring to life gives immediate visual feedback and tactile gratification.

They worked even better when we set up our button class to reduce flicker by buffering its draws off-screen.

3 Comments:

At 5/01/2005 10:51 PM, Blogger Stacey said...

Those are really cute, so cute you could turn them into stuff them and market them to small children.

 
At 3/10/2010 4:49 PM, Anonymous Anonymous said...

You have tested it and writing form your personal experience or you find some information online?

 
At 3/13/2010 10:44 AM, Anonymous Anonymous said...

You have tested it and writing form your personal experience or you find some information online?

 

Post a Comment

<< Home