Archive for the ‘Design’ Category

« Older Entries
Jan 27 2010

I worked on Apple’s tablet

No, not that tablet.

The year was 1992. I was still at school doing some research on user interfaces based on speech and gestures. But I had this problem: I had all these cool ideas but no hardware to try them on.

I was young, naive, and an Apple fanboy before the term was even invented. In May I traveled to San Jose to attend Apple’s WWDC and at one of the sessions Ron Avitzur demoed a software that turned pen scribbles into neatly formatted equations. That was the coolest demo I saw at WWDC that year. I tracked down the Apple guy who was hosting the session, and asked if he was looking for a summer intern. There was only an extremely remote chance he would say yes, but fortune favors the bold. And that day fortune was very, very kind to me. I joined Apple’s Human Interface Team in August for an internship that was only supposed to last a couple of months. I would leave Apple 10 wonderful years later.

I soon found out that Apple was working on a project code-named PenLite. The hardware was based on the Macintosh Powerbook Duo. It shared the same motherboard and greyscale screen, and the same special dock connector for peripherals such as floppy disc drives and Ethernet (well… AppleTalk). It lacked a keyboard, but its display could detect the hovering and taps of a special pen.

Our job was to write PenMac, the system software extensions to Mac OS that would allow existing Mac applications to be used in this environment. It was a very interesting problem. For example, with the menu bar at the top of the screen your hand would hide the menu after you tapped on it. You also quickly realized how you take for granted the shift and commands keys.

I started working on the problem of gesture recognition, figuring that gestures would perhaps be a way of bringing back the convenience of keyboard shortcuts. I came up with a few interesting ways of doing this that ended up as patents for Apple (5,583,946, 5,590,219, 5,594,810 and 5,749,070).

As an aside, in 1993 we were paid a visit by a couple of guys from San Diego who were working on a drawing app they called SmartSketch. You could sketch four lines with a mouse and they would turn into a square. As much as it was fun to use with a mouse, it really shined when using a pen: it’s much easier to sketch with a pen than with a mouse and it made for a much more natural interaction. We gave them much encouragement to build pen-based software. They eventually founded a company and called it FutureWave. In 1995 they added support to create animations and called their new app FutureSplash Animator. Macromedia acquired FutureWave in 1996, and renamed FutureSplash Animator to Flash 1.0. Guess what I am working on these days… Small world.

Apple canceled the PenLite project in August 1993 as it decided to focus on Newton. We were all sad, but that experiment had also showed the limitations of repurposing a traditional desktop user interface. And yet, having a clipboard-sized computing device was deeply compelling. Despite the low resolution of the screen compared to what today’s technology can offer, the form factor of the device, the ability to cradle it in your arms, made for a fundamentally different, more intimate, experience than a laptop.

And yet, the Windows-based tablet computers of today suffer from the same problem: repurposing for a tablet a UI designed for a desktop is like eating pea soup with a fork.

Here’s hoping we will soon see clipboard-sized devices with a custom-designed user interface. I want to eat my ice cream with a spoon.

Design Development
3 Comments »

Apr 24 2009

Out of box experience of Microsoft Surface

The whole experience was probably best summed up by Amanda who, when asked why it was taking us so long to get the machine up and running, and why we all looked so unhappy, replied “Oh, it’s just so…Microsofty.”

Read more at http://kinesismomentum.wordpress.com/.

They’ve pulled the article. Link updated to cached version.

Design
No Comments »

Apr 1 2009

Can Design Save Newspapers?

Puls Biznesnu

Puls Biznesu

Great design work by Jacek Utko, a Polish designer whose redesign of several east-european newspapers led to an increase in their readership. His plea: “Give power to designers”.

I’m skeptical that paper-based newspaper will survive, but design will continue to be important when we transition to new mediums.

Watch his talk at TED.

Design
1 Comment »

Jun 30 2008

Quadrichrome: a New Blog Layout

I’ve created a new blog template for my other blog. I’m calling it quadrichrome as it’s based on four primary colors. It’s a very pared down design, but hopefully easy to navigate and pleasant to look at.

I’m using the colors as a subtle color coding of sort:

  •  red is for primary content. Since red is such a loud color, I use it for the most important thing on the page
  •  blue is for navigation links, the default color for links since the very first web browser
  •  green is for administration and navigation
  •  yellow is for secondary and quoted content.

I’m thinking of using it on this blog as well. Thoughts?

Design Web
No Comments »

Jun 24 2008

Template updated

Updated (more like deconstructed, tore apart and rebuilt from the ground up) my blogging template to work nicely with the iPhone. Still not perfect, but better. I’m sure I’ll continue to tweak it over time.

What are those changes, you ask?
In the <head> section, add:
<meta name=“viewport” content=“width = device-width” />
The viewport tag will ensure that the page is taking the full width of the iPhone, without any horizontal scrolling.
Next, add this to the <body> tag:
<body onload="setTimeout(function() { window.scrollTo(0, 1); }, 100);">
This will make sure that once the page is loaded the top toolbar will get scrolled out of view so that as much as your web page as possible is displayed on the screen.
Finally, you’ll want a custom stylesheet for the iPhone. My stylesheet is built-in into my template (i.e. not an external file), so I added another <style> tag that overrides and modify the style defined in my “default” stylesheet:
<style media="only screen and (max-device-width: 480px)" type="text/css">

/* Override style definitions as appropriate */
body {
  width:480px;
  background:#f00
  margin:0;
  padding:0;
  font: large "Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;;
  color:#333;
 }

/* etc… */

.not-iPhone {display:none;}

</style>

Note that I define a #not-iPhone class so that I can hide any content that I don’t want to show up on the iPhone, such as large images or unsupported media formats.
In the iPhone stylesheet, I’ve changed the layout so that it fits a smaller screen (480 px). For example, I moved the sidebar at the bottom of the page, instead of on the left. I also simplified the layout and removed some of the background textures I used on the desktop. Finally, I used a resized version of the header image (resized to 480 px wide), so that it loads a bit faster.

Design Web
No Comments »

« Older Entries