Alarm clocks have one purpose in life. There’s only one thing they need to do to be considered a success. It’s not to ‘tell the time’. That’s a nice bonus, but the purpose of an alarm clock is to get you up in the morning. This is doubly so for alarm clocks in hotel rooms. If you are sleeping in a hotel it’s likely because you have traveled somewhere to do something, and it’s also likely that you want to do that something at a certain time; hence a clock to wake you up so that you may do that something without being late and getting fired. A device which cannot reliably complete this basic task is simply a failure, and not worth being made or purchased. End.

The Bad

How are they bad? Oh, please let me count the ways. (cue evil grin of glee).

First, most clocks tack on a ton of extra features, like iPod integration. Then they massively overload these features onto a small number of buttons by using modes. Many will have a single set of buttons to set both the time and the alarm, with a switch to toggle between the modes. Modes aren’t a great idea in desktop software when you have a huge screen. They are even worse on the limited user interface of a clock with a fixed LED readout. Which mode am I in?. Did I set the time or the alarm? After I’ve set the alarm how do I know which mode I’m in now? Did it switch back automatically somehow or do I need to press another button?

Some clocks use quasi-modes to get around these problems. A quasi-mode is like a shift key: a button you hold down to temporarily enter a new mode, then release when you are done. Not a bad idea for a computer with a full keyboard. Absolute madness on a clock where you must hold the mode button with one hand and try to set the time with the other.

Even worse, some clocks put the mode button on the front instead of the top. Clocks, typically being small, are lightweight. So pushing from the front will shove it right off the nightstand. Now you have to use your third hand to hold the clock on the table, while accomplishing the aforementioned gymnastics.

Now do all of the above right when you go to bed… when you are sleepy.. and it’s dark… No wonder so many people opt for a wakeup call or use the alarm on their phones. I always completely unplug the clock just in case the guy before me set it to ring at 3am. (yes, this actually happened to me)

Now suppose this is a clock you’ve never used before (very likely, since every hotel bought from a different supplier). Now you have to learn how to use this particular clock. Some come with their own instruction books. It’s madness, I tell you. Madness!

The Good

Only once in my life have I found a non-sucky hotel alarm clock. It was in my room at a very nice hotel in Tokyo. Here’s what it looked like.

Simply beautiful. Two buttons to change the alarm time up or down. One button to arm the alarm and snooze. AM/PM is indicated with real words.

How do you set the time? You don’t. I’m serious, there were no buttons anywhere to set the time or customize the alarm. Either the time is set via radio or there’s hidden controls locked inside somewhere. Maybe they use something wireless through that little transceiver on the front. The point is: I don’t have to care. The only thing I care about is setting the wakeup time, so that’s all the device lets me do. They also don’t put in a radio since that would require controls to change the station. If you are in an international hotel in Tokyo you probably wouldn’t understand the radio anyway, so jettison the feature. Simplify, simplify, simplify.

I don’t know why this clock isn’t used in the US. Perhaps it’s because everything in Tokyo is from the future. Perhaps in another five years will will all be enjoying alarm clock bliss. No wait.. I took that photo five years ago! Yeah, we’re doomed.

The Ugly

So why do hotel alarm clocks suck so badly? I think there is two reasons. First, these devices are mass produced overseas so they cut corners wherever they can to save costs and increase profits. If you can make a clock which uses two buttons to set the time instead of three buttons, then you might save five cents. Across millions of units that adds up to a lot of money.

Second is the buying decision. I’m not 100% sure, but I suspect that electronic clocks in general have become commodity products. The guts are a single chip that costs around 25 cents, and it’s probably the same chip used by everyone. So the various clock makers compete with each other on price, features, or by simply looking cool. Now, don’t get me wrong. There’s nothing wrong with competing on price, features, and visual design. But what suffers in this competition usability.

I think usability suffers because of how clocks are bought. When you go to the store you can see the price, features and design from outside the box. What you don’t see is how difficult it’s going to be to actually set the alarm on the damn thing. The buying decision doesn’t include usability. And since manufacturers optimize for the buying decision, usability gets dropped on the floor. C’est la vie.

The Lesson

I don’t know how to fix the economics of alarm clock design, but the moral of today’s story when applied to other products is simple: when you make a product you must design for the primary use case first and foremost. In this case that means setting the alarm reliably so you can wake up in time to not get fired. Everything else is secondary.

Okay kids. Time for work. I woke up late!

I joined Sun in 2005 to work on the Windows L&F for the Swing team. Since then I’ve been on several different teams, always working with some incredible engineers. First the Swing team, then the NetBeans team to work on the GUI builder, then the JavaFX team to work on the designer, samples & docs, and general development. Finally I’ve spent the last year working on the desktop client for the Java Store, written in JavaFX.

I didn’t start working with Swing at Sun, though. I’ve actually been doing Java GUI stuff since before there even was a Swing toolkit. In 1995 I learned Java at the recommendation of my favorite TA, Ian Smith. He was convinced that Java was the future of OO languages, not C++. Shortly after I began writing AWT graphics hacks, creating the world’s first (to my knowledge) Java ray tracer in 1996. I then spent my last year at Georgia Tech working for Scott Hudson on an experimental GUI toolkit called SubArctic. (the demos should still work, actually). That work led to my one year internship at Xerox PARC where I got to work with Studio RED and met Marc Weiser (who foresaw of today’s smartphone and embedded computing revolution). I even got to have dinner with Alan Kay when he was at Disney. (FYI: Alan Kay is the man who invented everything in the 1970s, including the iPad).

After PARC I worked in a few startups doing interface architecture and view engines until the dot-com bust. As required by law, all programmers in Atlanta must work at least one of the following: Home Depot, CNN, Cox, Verizon, Coke. I worked for Home Depot & Verizon, then joined Docucorp; doing various client & server side UIs for each. Finally, while at Docucorp, I started blogging on Java.net and wrote Swing Hacks with Chris Adamson. It was Swing Hacks which eventually led to the Sun position, and to where I am today.

So, from 1995 until the present I’ve spent my professional career working on Java GUIs of some sort. Now that it’s the year 2010 (freakshow!) I’ve decided to start working with something completely different: HTML, JavaScript, and CSS on the WebOS. The Oracle transition seems like a good time to make the change.

Don’t think that I’m leaving Java and JavaFX behind. I’m proud of the work we have done, from making UIs easier to code, to reinventing JavaDocs. JavaFX is a great technology with a bright future now that it will have Oracle’s financial and marketing support. Now I’ll just be involved with them from the other side, as a user and application programmer. I still plan to work on Leonardo, my wireframing tool in the Java Store. I’ve also got another release of MaiTai ready to ship when JavaFX 1.3 & Prism are out. The JavaStore is going to be a big part of desktop computing, and I look forward to buying lots of great apps through it.

Finally I want to thank my incredible colleagues at Sun. Rich, Jasper, and Amy: you’ve done a great job designing a GUI toolkit for the 21st century. Jeff, Jeet & Nandini. I’ve greatly enjoyed working in your teams. And most of all, I feel incredibly fortunate to have worked with the inventor of Java (and the Java Store), James Gosling. I still have your signed dollar on the wall of my office.

When I was in college there were five companies I dreamed about working for. Sun was one of those companies. All my wishes for a bright Java future.

A Taxonomy of Device Forms

I had the incredible fortune to meet Marc Weiser when I was an intern at Xerox PARC. We are now building the world he firmly believed would come to pass; a world full devices. A world where computing has disappeared into the fabric of our everyday lives. He divided the device landscape into several forms, as described in this article.
(from Designing Devices)

Tangible Interaction = Form + Computing

Many first-generation tangibles have been whimsical and artistic explorations of what new technology can do. Some are simple; some, more complex. Some are elegant embeddings of display and projection. Some celebrate new materials. Some add sensing in clever ways. The field is still wide open, but one thing is clear: We’re likely to see more, not less, programming in things, and a lot more experimentation.

(from the ACM)

Realism in UI Design

When choosing icons and other symbols for your application it’s important to remember when to use realism and when not to. A graphic which is too realistic can actually make it harder to recognize and use. (from ignore the code)

The Apple Tablet Interface Must Be Like This

Many years ago Jeff Raskin designed an ultimate device he called the information appliance. This article details his design and how it might match up to the iTablet. (from Gizmodo).

A Brief History of Eye-Tracking

Who knew eyetracking technology started in 1879! (from the UX Booth)

Ribbon Hero

Yes, Microsoft has designed a game into the latest edition of Office. The goal is to teach you how to effectively use the Ribbon bar. (from Lost Garden, an awesome site on game design)

Edison’s Kindel

Edison’s Nickel based 40,000 page book and other future technology visions that haven’t quite come true. I love yesterday’s tomorrows. (from Technologizer).

(Apple Tablet photo courtesy of Flickr user Rego)

By the end of this essay I think you’ll agree there is a compelling case that the PC era is over and that the growth, and most of the cash, is going to be for tablets and netbooks and other non-PC devices.

When I say “PC” I mean a computer running a traditional desktop windowing operating system like Windows or Mac OSX regardless of whether it’s a desktop or laptop form factor. The PC was always designed for a professional. It requires technical knowledge to use and maintain. How many of you have had to fix your parents’ computer and thought: if cars were built the way PCs are the car makers would be sued out of existence. This is not to knock PCs. They are technical marvels our ancestors could only dream of, but their major asset is also their major flaw: they are general purpose computing devices. It is this generalness is that makes them some troublesome. It increases both the production and maintenance costs (in dollars, hours, and brain cells). This generalness is what makes them less competitive with the coming wave of post-PC devices.

But tablets are just PCs with touch screens.

So.. right.. touch. Touch is all the rage these days but it doesn’t magically make a computer easier to use. Yes the touch interface of the iPhone is easier to use than a traditional desktop UI but most of the improvement is due to the simplification of UI metaphor, not because of touch itself. The iPhone OS doesn’t have files. It doesn’t have multiple overlapping windows. It doesn’t have a persistent dock, screen savers, firewalls, movable palettes, or any of the other things which make up the modern desktop computer. Of course, lacking the features of a modern desktop OS makes the iPhone a more limited device…

But here’s the thing: most people don’t need these features. Most people use their computers for surfing the web, watching videos, playing music, reading news, and the like. The most intensive typing they do is sending emails and updating their Facebook status. You don’t need the full power of a general purpose computer to do these things.

Now most of you reading my blog will say “I’d never settle for just a browsing computer”. And that’s right, most of you wouldn’t. In fact almost none of you would. That’s because anyone who reads a blog on software and UI design is by definition not most people. Most people don’t write software, use Photoshop, edit videos, or the countless other things that general purpose computers are so good at. The modern PC interface is overkill for what most people actually do with their computers.

It really comes down to this: consumption versus creation. Tablets and netbooks are great at consumptive tasks. Tasks where you browse and click/tap a lot with very little typing or detailed pointing. PCs are very good at those tasks, but long with it comes all of the complexity of a desktop OS. Most people don’t need that complexity, so the minute a better solution comes along they will adopt it. I think 2010 is the year when technology will finally bring that better solution: a browsing computer.

What will the browsing computer look like?

Tablets are getting all the buzz right now due to the Apple rumors, but I don’t think the form factor is as important as the software interface. Netbooks are just as viable as PC replacements. The only difference between a netbook and a tablet is the presence of a hardware keyboard. Both tablets and netbooks are built out of the same pieces as PCs (and gives us that handy economies of scale), but they are fundamentally different products and are used differently.

The browsing computer strips away the complexity of a PC operating system by stripping away the features that most people never use. Apple’s tablet will most likely be a large iPod Touch, devoid of a filesystem, overlapping windows, and system utilities. Of course all of those things will still be inside the tablet’s software but they will be implementation details. The end user will never need to know about those things. The Microsoft Windows tablets of the past have always failed because they were desktop PCs shoehorned into a formfactor they were never designed for. The Windows OS was simply never built for touch, and too much of the OS cruft is exposed to the end user. The name “Windows” should be our key indicator: touch doesn’t work well with movable overlapping windows. While the iPod Touch does use parts of Mac OS X underneath, the parts exposed to the user were designed from the ground up for a browsing computer experience.

Why now? Why not 5 years ago, or 5 years from now?

This one is a bit trickier. I think the browsing computer is ready to hit mainstream because of a few long term trends that finally converged.

First, Moore’s law has made hardware fast and cheap enough to make a viable 400$ browsing computer. Five years ago the iPhone wasn’t possible to build for a viable price. Today Apple makes 200$ profit on every one they sell. A few more turns of Moore’s law makes the tablet viable for a similar price point (though I expect Apple to charge a premium initially).

Second, all apps are Internet apps now. The Windows OS benefited from the network effects of hardware and software compatible with it. Items bought in stores, requiring shelf space and retailers and distributors. Creating a new desktop OS required replicating this entire network of infrastructure. Today you can make your own profitable ecosystem by distributing everything online and having few or no hardware add-ons. Building a platform with tons of apps and content is a whole lot easier now. The idea of a computer that only runs software from it’s own store or browses the web isn’t crazy anymore. In fact, the idea of an app that doesn’t have some connection to the Internet is now crazy.

Third: slave devices are becoming independent. The browsing computer is built on long term trends that have been underway for a while. What is new is that we are very close to the point where one of these non-PC devices can actually replace a PC for a lot of people. Palm Pilots and the iPod were early steps along this trend, but they were slaves to a PC. The could do nothing without the attached PC. In fact, they were made better devices by the fact that hard tasks were offloaded to the PC, such as syncing with data and managing your music. In 2007 we got the far more independent iPhone. It can directly access the web and install apps without a master computer. You still need a PC to use an iPhone for media management and configuration (plus the initial setup), but it’s a lot closer to being the independent PC replacement. The final step may be the tablet/netbook. Devices which exist entirely separate from the PC and don’t require it for anything. Even if we don’t get these in 2010, they will be here very soon. And when it happens, it’s going to happen fast. The world has been waiting.

How about some concrete predictions?

Apple will release a tablet (slate?) and sell millions

In the early part of this year Apple will release a tablet computer, but it will be a large iPod Touch instead of a small Mac. It will be almost exactly twice as large as the iPod touch in both dimensions and have worse battery life, but still be essentially the same. It will run the same software and install apps from the same store. Porting an app to the tablet will just require recoding your UI slightly to fit Apple’s updated UI guidelines and the larger screen size. That’s pretty much it. There will be no magic hardware, no crazy screen technology, and the UI will be pretty much the same as the iPod Touch. They will probably let you run multiple apps at once, switchable with a dock interface at the bottom, but apps will still fill the screen. It will be more like switching pages in Mobile Safari.

One part I’m unsure of is how independent the tablet will be from your desktop. I believe that Apple fully intends to make a device that will replace your laptop (at least for 95% of us), but I’m not sure they will enable this in the first version. The key will be where you store your music and movies. They might go with a cloud solution, or make a version of the Time Capusle that acts as a headless media server. The key indicator will be if you can sync your iPod from the tablet or if you still need a real PC. In any case, if it doesn’t happen now it will in the next few years.

Other tablets will ship

Apple is obviously not the only one working on this. CES should be quite interesting. I expect several other browsing computers will be shown this weekend, running either Chrome OS or Android, and in both netbook (folding screen & keyboard) and tablet (touch screen with soft keyboard) form factors. Possibly something in between, but transformer laptops have never worked well. Apple’s primary advantages over the competition will still be their industrial design and the content ecosystem they’ve developed over the past 8 years with the iPod.

Dedicated eBook Readers will be screwed

It’s sad to see a new category of devices leave us so suddenly, but I think the browsing computers will supplant them very quickly. Once a dedicated device can read books for 400$ it’s only a year or two before a more powerful browsing computer can do the same for the same price. On the other hand, Amazon won’t care if the Kindle dies. They want to sell eBooks, which they do just as easily on the iPhone as they do on their own device. I predict that within a year they will sell more eBooks on other devices than their own, and within 5 years they will stop making the Kindle. On the other hand, the e-paper technology is continuing to improve as well, so these categories may simply merge into one.

PCs will be freed to become workstations again

When photography arrived it didn’t kill off painting. Instead there was an explosion of new painting styles after the artists were freed from the duty to faithfully record the real world and could now focus on more creative things. Impressionism and modernism didn’t happen until after the bulk of painting chores, portraiture and landscapes, moved to the realm of photography. I think something similar will happen to PCs. Freed from being the browser computer for the masses, PCs can morph into something more advanced and specialized. They will again become tools used by professionals, returning to their original name: workstations. As a PC user I can’t wait to see what this future brings.

Special thanks to Flickr user vernhart for the hilarious photo.

Update

It appears that last night at CES Steve Balmer showed off a tablet computer from HP. It’s a PC running Windows 7, a PC operating system. It will fail miserably. They simply don’t get it.

2009 was a big year for technology. A fairly bright spot in an otherwise dismal economy. From a design perspective we’ve seen the further growth in next-gen UI technologies like Flash, Silverlight, and HTML 5; and a greater focus on design in the app development process. We’ve also seen major growth of alternatives to the WIMP (window, icon, menu, pointdevice) user interface that has dominated computing for the past 30 years. Touch screens, ePaper, accelerometers, and embedded cameras are mainstream technologies and have started working their way into every gadget we buy.

The next year should be an exciting one, but with mostly evolutionary improvement of technologies we have today. I predict nothing out of the blue. (Of course, if something was truly out of the blue we, by definition, wouldn’t be able to predict it). Anyway: on with the show!

I’ve broken my predictions up into three categories: software, hardware, and misc. Each prediction has a percent indicating the likely-hood it will come true. Next December we’ll revisit these and see how I did.

Software in 2010

Software is moving to the cloud. The UI of any given app might be implemented in HTML & Javascript in a webbrowser, or through an RIA toolkit like Java, Flash, or Sliverlight. (and occasionally a native toolkit like iTunes). But the trend is clear, all software comes from the internet and a significant portion of their features are implemented on the server side. This is a long term trend and won’t be reversed. Given this trend, here are the effects I think we’ll see in 2010:

Social Networking sites become useful. 80%

We’ve had Facebook, Twitter, LinkedIn, and other social networking sites for a few years now. I think the industry is starting to coalesce into a set of useful offerings now that we’ve had enough time to figure out what all of this stuff is actually good for. This means both companies and individuals will start to see real value from these services.

The downside is that privacy sinks to an all time low and our public & private lives heavily bleed into each other. I’ve taken the step of fully separating my personal and professional identities. I now use Facebook only for personal friends that I know in real life, and push my professional life through Twitter, LinkedIn, and this blog. Fortunately the social networking tools have improved enough to make this a relatively painless process. However, given that each service has a different audience I’m often conflicted about what to post where.

OpenID finally takes off: 70%

OpenID is an open standard which lets you log into a website using your username from another website. It promises to free us having to remember a million different logins. Since Google, Yahoo, and others now expose their user databases through OpenID I predict a huge increase in websites using it. The era of a universal login might soon be upon us.

Downside: the era of a universal trackable login might soon be upon us.

Cloud enabled netbooks ship: 70%

You will be able to buy a small laptop who’s entire software catalog is purchased through an online store in the device. It will probably run Chrome OS, Android, or an Ubuntu variant. All apps will be HTML in the browser or written in a crossplatform RIA toolkit like Java or Flash. If your netbook dies, you just buy a new one and click a button to reinstall everything from the cloud.

We’ll have several shipping toolkits that let you target all of the major smartphone OSes: 80%

This means a write-once run everywhere cross-device toolset for smartphones that is actually shipping (not tech demos), and supports iPhone, WebOS (Palm), Android, and Blackberry.

We are pretty much there already. Adobe has promised a version of Flash in 2010 that will let you build apps on WebOS (Palm), BlackBerry, and the iPhone; and some Android phones ship with Flash support. PhoneGap lets you target every device with a WebKit derived browser, which is pretty much everything. Silverlight is being ported to other platforms and MonoTouch lets you write C# code that targets the iPhone. 2010 will see all of these toolkits mature, with several prominent app makers adopting them for all of their apps except games.

Windows Mobile and older JavaME based feature phones aren’t on the list above because developers won’t care about them. Sad but true. WinMo is dead unless Microsoft does something truly amazing with Windows Mobile 7 (and I sincerely hope they do). Older JavaME based phones have the numbers (2 billion +) but those phones (and their associated cellphone contracts) don’t encourage users to buy apps, so they don’t matter to developers. If you can’t ship apps to them then they don’t count.

Hardware in 2010

Hardware improvements shouldn’t be surprising: everything will be smaller, faster, and cheaper. Moore’s Law will not be repealed. The focus on power efficiency means the world is going mobile. The biggest shift we will see in 2010 is the general purpose ‘personal computer’ losing sales to more specialized devices. eBook readers, smartphones, tablets, and set-top boxes will continue to chip away at the market share of desktop and laptop computers.

Someone will create a TV attached device worth owning: 30%

Everyone has some sort of a TV attached device these days. It makes sense, the TV is the largest screen in most homes so why not do something more with it than just playing video. I want a device which will play media, play games, check mail, browse the web, and let me install my own apps; all displayed in gorgeous 1080p. The potential is huge!

Sadly the market is terribly fractured with no standards and a bunch of half finished solutions. The AppleTV has devolved into an iTunes Store front-end. The Wii, XBox, and Playstation all do games well, but their video and content services are weak. The cable companies have semi-decent DVRs, but don’t have stores with downloadable apps or access to internet content. The most compelling options today are actually home-brew Linux boxes running MythTV.

I really hope someone can pull the pieces together into a single solution, but I don’t have high hopes. It may take an iPhone-like dark horse entrant to change the power structure of this market.

Pico-projectors for Smart-phones become popular: 20%

The concept seems good on paper: a tiny projector that fits in your pocket, attaches to your cellphone, and projects a 4 foot image on a wall or T-shirt. Sounds like science fiction! It seems like a great idea, but in practice the images are too dim and shakey to be useful. It will remain a novelty that most people don’t need or want

Tablet computers will be popular this year: 100%

I’m planning a much longer post on tablets for next week so I’ll just summarize here. Both the hardware and software have converged to make a useful tablet computer possible. The key will be building a device that doesn’t try to be a full featured desktop computer in a tablet form factor. Any successful tablet computer will be more like a large iPod Touch rather than a flat laptop. It will be the next step along the road of making computing ubiquitous and invisible. After all, what is a tablet but a computer where everything has been made invisible except the display.

Given the Apple rumors and pre-announcements from several vendors I expect several tablets to be on sale next year. If they can figure out one or two killer features (most likely relating to media consumption and social networking) then I think they will be very popular.

My specific prediction regarding the Apple tablet: it will be a large iPod Touch running the same OS and managed though iTunes. There will probably be a few extensions to the Cocoa Touch APIs and new UI guidelines for the larger form factor. The basic apps will be retooled for the larger screen but little change in functionality. iTunes will add a book and magazine store. But that’s it. No revolutionary form factor or display technology. Just a large iPod Touch. And it will sell millions. The time is just right.

An ebook reader using something other than eInk ships: 50%

Ebook readers are all the rage right now, and with good reason. They represent the future of paper, but the display technology is still very limited. Virtually all of the ebook readers on the market use the same physical display technology: an electrosensitive fluid from eInk. Refresh rate and contrast is horrible, but it’s a good enough start to create a market for better products. A slew of competing technologies are under development and success of the Kindle will ensure they get funding, so there’s a good chance one of them will ship in 2010.

Smartphones won’t improve significantly, but over half of all phones sold in the US will be smartphones: 80%

The iPhone, Android devices, the Palm Pre, and new BlackBerries have solidified what a ’smartphone’ is: a general purpose touch-centric device with user installable applications. A year from now I don’t expect this to look any different. We’ll have some new devices with more memory and faster CPUs, but the landscape will be pretty much the same.

As a side effect of this market stability I expect smartphones to make huge inroads into the general cellphone market. Thanks to Apple’s ads the average consumer now understands the benefits of a smartphone with installable apps, and carriers love to sell data plans. I expect over half of all new phones sold next December to be smartphones. AT&T’s network will continue to strain under the usage.

Land line phone service falls by half: 80%

This has been a long time coming. I’ve personally had only a cellphone for the past decade. Thanks to competition from wireless carriers, Skype, and VoIP solutions I expect the retreat from landlines to reach 50% by the end of 2010.

On The Edge

Voice recognition becomes a significant user interface: 20%

Voice recognition will continue to be a technology that’s just around the corner but still never arrives. Any growth will come from 411 style services that let you speak a question and receive a webpage answer. Google is pushing heavily in this area with their Google Voice service. I still don’t think we’ll have true voice command (KITT style) until we have much stronger AI. But that’s just around the corner.

Self driving cars: 0.001%

The potential is huge, but the chances of me being able to buy a self driving car this year is almost certainly none.

However, we are likely to see some interesting advancements on the way to self driving cars. Some luxury cars can now parallel park themselves and the DARPA challenges have been successful. I suspect we’ll see more closed course demonstrations of cars doing things that would simply be impossible for a human driver to accomplish. Things like drifting and spinning become trivial when you can control each wheel’s drive and breaking separately. Since most drivers don’t have eight feet, the computer will have a leg up on humans.

YouTube, Twitter, and Facebook combine into a single time wasting website: YouTwitFace

Likelyhood: 92.6%

Happy New Year!

From The Design Cublicle: [link]

I’m always looking for design inspiration, especially trends from previous eras. This link has forty really cool retro (or at least retro-looking) posters that pop with great colors. The Nerd eyeglass pattern is one of my favorites.

10 Tips for Creating Compelling Web Copy

From the Web Design Ledger: [link]

Part of creating a good experience for your users is the language you use on your website and in your documentation. Your text must engage the reader and keep them entertained as well as informed. And most of all you must not waste your user’s time. After all, user is just short for future customer, and customers don’t want you to take them for granted.

Complete Beginner’s Guide to Interaction Design

From UX Booth [link]

The title says it all!

Yahoo! Design Pattern Library

Yahoo: [link]

Found via the aforementioned guide to interaction design. A catalog of different design patterns from accordion to the convention of labeling stuff with Your.

Branching is Fun

From Mr. Doob [link]

Not at all design related, but I’m a sucker for cool visualizations and graphics effects.

And for when you really must think outside the box

[found via Peta Pixel]

outside the box from joseph Pelling on Vimeo.

Unlike my last topic, color, modern typography is actually quite old. Most of modern color theory was developed in the 20th century with the invention of modern dyes, paints and emissive displays. The core typographic theories, however, were in place when Gutenberg made the first printed books over 500 years ago. Certainly a lot has been developed since then, but the universal principles of type like alignment and grids were already developed during the dark ages by monks transcribing bibles by hand. When Gutenberg converted these principles to his mechanical printing press modern typography was born.

Typeface vs Font

First things first: typefaces versus fonts. A typeface, also called a font family, is a set of fonts designed with a stylistic unity, each comprising a coordinate set of glyphs. (wikipedia.org). A font is a complete character set of a typeface at a particular size, weight, and style. In software engineering terms you can think of a typeface as a class and the font as an instance of that class with a particular configuration.

The exact meaning of typeface and font have changed subtly over the years as the technology has shifted from mechanical type to computer-set type to purely digital type. Originally fonts from the same typeface were literally different boxes full of chunks of metal shaping each letter at a given size. These days we have scaleable font technology so different sizes, weights and styles can be generated algorithmically or the multiple forms can distributed in a single physical file. Thus font and typeface have somewhat merged, and today you can safely refer to a typeface as a ‘font’ in general usage, and only use the more precise terminology when referring to particular instances of that font (or when talking to ornery typographers).

Anatomy of a Font

Weight

The weight of a font is the thickness of the lines that make up the letter forms. Since this thickness is relative to the size of the letters we refer to these as their weight. You are probably most familiar with bold vs regular, but some fonts have as many as nine weights from thin and light up to bold, heavy, and black. The True Type font format specifies weights on a scale from 100 to 900. CSS can use words or scale numbers to specify the weight.

Helvetica (wikipedia.org)

Style: AKA Slope, Italic & Oblique

We usually think of the slope of a font as italic or normal but, as with everything in typography, there’s more subtlety to it. Italic text really means text which is drawn differently to indicate it is emphasized and should stand out in some way. Italic text can be programmatically generated by leaning the text to the right, called oblique text. Some fonts include a true italics form which actually draws the letters with different shapes. Fancier fonts may lower the fs, adjust the roundness of letters, or lean to the left instead of the right (depending on the language).

roman, italic, and oblique (wikipedia.org)

Width

Some fonts have wider and narrower versions of the letterforms. The terms for these versions vary by font maker, but will often be called things like condensed and expanded. These fonts adjust the horizontal width of the letters themselves.

Leading

Leading (pronounced like treading or fed-ing) is the spacing between lines of text. Back in the metal typesetting days they used strips of metal lead to separate lines, which is where the name comes from.

Kerning & Tracking

Kerning and Tracking (wikipedia.org)

Kerning and Tracking are adjustments to the spaces between letters of a proportional font. With tracking the extra space uniformly applied to all letters. With kerning the extra space allocated by letter pairs. This means that certain pairs of letters will have more or less space than other pairs, resulting in a more pleasing look. In some cases letters may vertically overlap to make them look better.

Kerning values are very hard to generate algorithmically because it depends on the how the letter forms visually look to the human eye. For this reason well kerned fonts are created by hand by a font expert, and are therefore more expensive. The results can be well worth it, however, because the badly kerned fonts result in keming. Also available as a T-shirt.

Keming, from Ironic Sans.

Font Metrics

The actual letter forms have a specific vertical anatomy based on how we measure them. Together these measurements are the font’s metrics. We use these measurements to decide how to put letters together to form words, lines, and paragraphs of text.

Font Metrics (wikipedia.org)

Of the various measurements in this diagram the most important is baseline. The human eye finds baseline aligned text very pleasing, and will notice the tiniest imperfections in this alignment.

In GUI software it is important to align UI controls containing text (which is most of the standard controls) along the baseline of the text rather than the visual bounds of the actual control. For example, a button should be aligned with the text inside the button rather than the rectangular edges of the button itself. It may seem like a small detail but it makes a big difference. I once spent a year fixing bugs in the Windows Look and Feel for Swing, and the most visible bugs were vertical alignment issues. Yes, I spent a year of my life turning this:

into this

All in all, I still think it was a year well spent

Odds and Ends

• Small capitals, aka: smallcaps, is simply smaller forms of the capital letters. Usually these smallcaps have the same height as the lowercase letters of the normal font. Smallcaps may be included in a font or generated algorithmically by shrinking the regular capital letters.
• Dropcaps or Initials: special forms of the intial letter in a paragraph or chapter. They are often much larger than the regular text on the page and will ‘drop down’ into the lower lines.
• Logical font: a font which doesn’t actually exist, but will be replaced with a real font at runtime. For example, in webpage you can use the font ’sans-serif’. There is no real font named ’sans-serif’, but the webbrowser will pick the user’s preferred sans serif font and substitute it at runtime.

Categories of Fonts

In Roman languages (languages which use the 26 letters of the Roman alphabet plus various accent and punctuation marks) there are five major categories of fonts.

Serif

Serif letters drawn with features at the ends of their strokes. The serifs are the little feet we see in fonts like Times. These are some of the oldest type designs. The feet along the baseline help guide the eye from left to right, making them very ‘readable’ fonts.

Serif Font

Sans Serif

Sans Serif (french for “without serifs”) are letters drawn with straighter lines and no feet. Their larger letterforms make them very legible, but can cause greater eye strain when used in long runs of text. Helvetica is considered the quintessential sans serif font.

Sans-serif Font

Script

Script fonts imitate hand written letter forms. They are much harder to read than serif and sans serif fonts, and should never be used for body text.

Ornamental

Ornamental fonts are highly decorative and tend to work only at larger type sizes. They are often called ‘display’ fonts. They should never be used for body text (I’m looking at you, Comic Sans!).

Type set in Baby Kruffy

Monospace

Monospace fonts have letterforms that are exactly the same width, or are at least equally spaced. These come from the days of typewriters and old computers that could only move fixed distances. The are rarely used today except when the vertical alignment of columns matters. Examples include code editors and laying out tabulated data.

Text Placement

Most of our type terminology in software comes from the world of newspapers. In practice we have three major kinds of text when building webpages and software: body, header, and navigation.

• Body: this is the bulk of your text organized into paragraphs. It is usually smaller than the other text and should use a simpler font that looks good at smaller sizes.
• Header: this text in short runs (usually a single line or less) that must stand out. Headers usually appear at the top of a page or paragraph indicating that the reader should move their eyes here to begin reading something. Headers also look good with serif and sans serif fonts, but you have more freedom because the text is typically larger.
• Navigation: this text is very short and is usually at the top or sides of the page or screen. It indicates the structure of the entire work, such as newspaper sections or different pages in a site. It should also indicate to the user how to navigate to that section. In a newspaper you would use page & section numbers. For software the text would be rendered as something clickable (a button, an underlined link, a hover effect etc.).

Quick Tips

Use the right font for the size

Not all fonts look good at all sizes. Some really shine at small sizes, others at large ones. Use the right font for your size. At smaller sizes you want fonts which are simpler and easier to read such as the basic serif and sans serif fonts. Try Arial, Helvetica, Times, Verdana, and Georgia. They are installed on virtually all computers and were designed to look good on screen at smaller sizes.

Use different font categories for different parts of text

Use a sans serif font for the header and a serif font for the body, or vice versa. It creates a contrast without banging you over the head with it.

Use truly crazy fonts only for top headers

Use the cool and crazy fonts only for the top most headers. In the example below I used a font meant to evoke mid-century Tiki-culture, with a funky light effect to suggest it’s alcoholic origins. I only used this font in one place: the top most header of the page. Everything else is done with Helvetica; a standard sans-serif font.

Home page of Project MaiTai

Use restraint. Pick one crazy font to use for your whole site or application and use it sparingly. If everything is different then nothing is. You can use a fancy font (somewhere between the plain boring fonts of body and crazy fonts of only top most headers) for headers within the page. And use one of the plain boring fonts for body text. Leave the crazy fonts just for the top most header.

Use color and style to create contrast

Use color changes or capitalization style instead of fonts to contrast between the headers, body, and navigation. For example, in recent versions of iTunes the headers in the sidebar are all capitalized and in a slightly lighter color with a hint of etching.

iTunes 9

Bundle a font in your app

For the body text I still recommend sticking with one of the standards, but for your header font you can choose something a bit more distinctive. Here are some great places to get cheap or free fonts.

• The League Of Moveable Type
• Font Squirrel
• 1001 Fonts

Avoid Cool Fonts

Don’t use cool / cute / themed fonts unless the subject matter really warrants it. Your website on technology trends really shouldn’t use a cutesy bubble font unless you are really targeting the tween market.

Sniglet

Just the beginning

Typography is an incredibly large topic. What I’ve covered here is just the beginning. In the future I’ll cover text as part of the overall design and dive into the grid system. If you’d like to read more on typography, here are a few good resources:

• The Wikipedia page on Font
• A List Apart on Web Typography.

The 20 Do’s and Don’ts of web typography.

Don’t believe me? Think back to the iPhone of 2007 when it launched. Or just look at the Apple provided apps in today’s iPhone (since not much has changed). How many of these built-in apps use multi-touch? I can only count 3: Maps, Photos, and Safari. All three of them use multi-touch in a single simple way: zooming in and out. You could make a non-multitouch iPhone by simply providing a zoom-out button for these three apps (and a quick-tap for zooming in).

Very little of what made the iPhone interface so revolutionary was multi-touch. What made it so great was the focus on using a single finger for virtually all interaction with the device. The designers at Apple decided from day one to make a device that was finger centric. This means UI controls that are large and require only a tap gesture to activate. Swipe gestures are used for navigation. And that’s it. Taps and swipes with a single finger. That’s what made the iPhone so great, not multi-touch (or the accelerometer, for that matter).

Oh, and one more thing made it great. The large screen with a capacitive touch sensor. Older touch enabled devices (like my old beloved Treo) used resistive screens which were far less accurate and required you to either push hard with your finger or use a stylus. A Treo with a capacitive screen could have supported an iPhone like interface with ease (even on the much slower hardware available to it at the time).

While the hard glass iPhone screen does support multiple touch-points at once, that’s not what made it a success. It’s designing an interface and device from the ground up for finger-based touch interaction that changed the mobile device playing field. Multi-touch is simply a red herring.

Finger photo used under Creative Commons from Flickr user bayat

Interactive Visualizations

First up is Eric Stollnitz from Microsoft Research’s Interactive Visual Media Group. This is the group responsible for the zooming PhotoSynth technology. They are continuing to pump out amazing imaging technology, some of which he demoed to us.

Eric showed us the Image Composite Editor which will stitch a multi-gigapixel panorama out of a hundred photos taken with a standard consumer digital camera. You just give it a directory full of images and it does the rest, arranging and blending the photos into a single final image. I especially liked how it would arrange the photos randomly and then move them into place as it does the analysis. This gives you a sense of what the app is doing. It uses realtime feedback as you change parameters to update the generated panorama using lower quality thumbnails. Once you’ve got settings that you like press the render button and let it run in the background, producing the final (very large) image. Future versions of this app may work with video footage as well.

The first thing he noted about their demos is that almost everything is now done with WPF, which is Microsoft’s vector based UI toolkit for writing native Windows apps. It lets developers work at a higher level and produce apps that would be difficult to impossible using the older WinForms toolkit. In the Java world this parallels the relationship of JavaFX and Swing. The panorama stitching app was originally in older technology and they were able to have one intern completely rewrite it in WPF over the summer.

Eric demoed several apps using the DeepZoom technology that has been shown by MS for the past couple of years. It’s interesting to see how this technology has evolved. Early demos simply focused on the amazing technical ability of zooming into insanely large images. Now that this is commonplace the focus has shifted to what useful things can be done with the technology, which is really far more exciting. Modern computers so much excess computing power, it’s nice to see us doing interesting things with it.

My favorite DeepZoom app is called WorldWide Telescope. It combines beautiful large space images from various telescopes with user created content. You can ‘tour’ the galaxy with paths from different tour guides. In one example a seven year old kid first showed us his home in Toronto, followed by a tour of his favorite constellations. Another tour took us from earth, through the solar system, to the local galaxy structures, and finally to the edge of the known universe. The blending of multiple images into the same experience were simply amazing.

• Microsoft Research
• WorldWide Telescope
• DeepZoom Composer
• Image Composite Editor

Tap is the New Click

Next up was Dan Saffer of Kicker Studio. It turns out I’ve been reading his blog for months. I found it while Googling for touch interfaces on Bing.com.

Dan gave us a brief history of touch technology, an overview of the various options, and finally some design guides for using touch in new interfaces.

One of the most interesting challenges in designing touch interfaces is the fact that fingers are larger than a mouse pointer (significantly) and that your hand can be in the way of the screen. With clever design you can address these shortcomings, but it’s not trivial.

One way to solve the size issue is with iceberg and adaptive touch points. A touch point is simply a place on the screen where a user can touch. It’s what we’d think of as a button or clickable image in traditional user interfaces. An iceberg touch point is when the touchable area is larger (sometimes a lot larger) than the apparent visual bounds of the thing being touched. This focuses the user’s attention in the center of the touch point, but allows for a lot of error.

An adaptive touch point is where the touch bounds adjust based on context. For example, in the iPhone keyboard if you type ‘t’ then ‘h’, the OS can guess you are likely to type a vowel next (at least in English). The keyboard can adaptively expand the touch size of the vowels to make them easier to hit. This improves the error rate of touch keyboards significantly.

The final example Dan showed us was a visual remote control system his firm developed. It’s a set top box for your TV that uses a camera and vision system to let you control the TV with just hand gestures. They developed a simple language of gestures for changing the volume, navigating menus, and turning the TV on and off. It was interesting to see how they reduced a complex task into a small set of simple gestures through very careful research and design. Great stuff.

Quote of the day: The best designs are those that dissolve into behavior.

• Kicker Studio Blog
• Designing Gestural Interfaces, by Dan Saffer, O’Reilly publishing.

Making web applications for iPhone

On Thursday I attended a talk by Michael Samarin on developing iPhone web applications without navigating Apple’s app store or writing a single line of JavaScript (well, okay, he wrote 3 lines). He did everything with Dashcode, Apple’s visual web design tool, and Java servlets in NetBeans.

Dashcode has improved a lot since I last used it. Originally for building dashboard widgets, it has turned into a general purpose web design tool with a drag and drop interface similar to their InterfaceBuilder tool for desktop apps. Most importantly it has tons of Javascript enabled widgets that emulate the native iPhone environment.

Michael built a simple app on stage that could navigate and play a directory of of video clips on his server using a JSON web feed from the servlet. Dashcode lets you bind Javascript UI controls to JSON fields, making a functional app with only about 3 lines of actual code. You can even add simple hardware accelerated 3D flip transitions using CSS. The server side component was a straight Java servlet which parses the directory structure on disk and generates the JSON feed.

Next he used some Applescript called from Java to build a web based remote control for the QuickTime player. It was simple to build and surprisingly responsive. Every bit as good as a native iPhone app without all of the headaches. Michael’s company, Futurice, now often recommends web apps to their clients instead of native iPhone apps because development time is far shorter, cheaper, and can be updated instantly without going through Apple’s approval process.

The rapid development time really lets his team focus on the user experience. While I still believe in plugin based rich clients for the web, I was very impressed with what’s possible in pure JavaScript and CSS on the iPhone. They’ve got quite smooth stack.

Conclusion

I love OreDev because it exposes me to technology I wouldn’t otherwise get to see. Ultimately great design doesn’t depend on the technology you use, but how you use it. And if the talks presented here are any indication, the future looks bright for many technologies.

That’s the highlights for me. I did my final presentation on JavaFX Friday followed by some fun demos for a local Java group. Both went quite well and is in prep for a new app I’ll be launching in a couple of days. Now time for some sleep.

If you live in northern Europe and have never been to OreDev I highly recommend it. It’s not too big (600ish attendees), has some excellent speakers, and covers a broad array of topics. I love speaking at OreDev because I not only teach others about JavaFX but also get to learn about many other technologies that I wouldn’t otherwise be exposed to. Last year I learned about JRuby, Silverlight, and Jython.

This year I’m speaking on JavaFX user interfaces and the Java Store, as well as announcing an open source project I’ve been working on for the past few months.

In the mean time, I’m also starting the NaNoDrawMo drawing challenge. This isn’t a competition like the challenges I run on JFXStudio. Instead this is purely personal. Your goal is to draw 50 things in 30 days. Just draw and draw. Practice makes perfect.

And by draw I do indeed mean drawing on paper with pencil or pen; though any form of drawing, analog or digital, is valid.

Why am I discussion drawing, typically considered an ‘art’ on a design site? Well, I’m not an artist and I never will be. But many of the skills of an artist have great use in design. As I’ll cover later, the first step whenever I design a new user interface is to sit down with a piece of paper and draw it. Drawing is fundamentally the ability to take what’s in your head and put it on paper. And only once it’s on paper for others to see can it start to become design. So drawing is a valuable skill which I wish I had more of. Hence: practice makes perfect.

I’ll be posting my drawings on Flickr as the month progresses, as well as more posts on design theory and tech tips, so stay tuned.

– Josh