AsFusion

Everything you know about design is wrong...

...when running your app on a small, high screen-density device.

As you may know, we are developing a GTD application that runs on the Blackberry Playbook and Android tablets (others to come) called Conqu. When we started, back in November, we were making designs as normal with Photoshop at the right size, and what we liked the most when looking at the designs (even when made small to fit the size of the device) were usually not all that good on the device. Since we hadn't developed the app yet, we only had mockup images to see. So what we did was browse those images to see how the actual app would look like.

This is what we learned:

You need more contrast than you think

While looking at the designs on the desktop monitor, bold and contrasting designs looked kind of ugly. They looked overdone. Not so on the device. The more contrast the elements had, the better they looked, the easier was to find them, the more defined were the different parts of the application, such as menus or navigation bars. Clearly defined elements were much needed than on the desktop. People using your app may be waiting for the bus under the sun, the screen may have glare, or they may have it sitting on their desk flat, so the viewing angle might not be optimal. Design for not-optimal viewing conditions.

Compare these two selected item designs for the menu:

Very little contrast.

A lot of contrast. While the first one might work on the web or desktop, the second was better for a handheld device. This design also has larger font, making it easier to read.

Subtleties get lost

While designing, we liked subtle shadows, soft colors and small details. However, on the device, soft gradients, small changes in tone or color were almost completely lost. Thin lines almost disappeared and elements we not clearly defined when there was not enough contrast. What's interesting is that "enough contrast" is actually "a lot" of contrast in a regular design (see point number one). You need detail, otherwise the application will look flat and uninteresting, but don't rely on subtleties for important things. For example, if you want to mark an item in a list as selected, make sure there is enough difference in color or texture, and not just some subtle shadow or change in tone. You also have to think about how far from the device your user will be. For a phone, people tend to look closer to it, so you can get away with small fonts and small details, but with a tablet, they may have it in their lap on the couch, so their eyes might be not as close to the device, so you would need larger fonts, more contrast, etc. 

Subtle lines. Overdue date is only shown with a nice glowy red box.

More contrasting lines. The overdue date is shown with a "pill" to make it clearer. The checkbox is also red, but it is not the sole indicator.

The device has its own boundaries

Unlike a big desktop monitor these devices have boundaries (physical boundaries, the bezel) that you immediately see. While desktop applications can be full screen, they are generally enclosed in a window chrome, which can be "floating" around among other applications and you may even see your desktop wallpaper as background. In a device, however, your app will be full screen and will interact with the bezel and the device boundaries. The edges are important and elements that fit directly on the edges looked better than those that have space around them close to the edge. So in my opinion, the first menu looked better than the second one, as it used the device itself as an edge. This worked better on a smaller device (Galaxy Tab), but it may not necessarily be better on a larger device such as the iPad or Motorola XOOM. In those bigger displays, you may need additional borders so that the app doesn't look like is falling out the edge. 

This design had a big border around the menu.

This design is snapping to the border of the device, utilizing the bezel as the sourounding box. It felt better than the previous one.

Speaking about the XOOM, or rather about Honeycomb, you have to remember that Honeycomb tablets have three buttons on the lower left edge. Unfortunately, that was the same placement for our lower four menu items. The issue here is that we no longer had a smooth edge and extra controls were added to that edge.

The arrow shows the stacked menus (ours and Honeycomb's at the bottom)

Test and test some more

Devices can differ in size and screen density, the operating system may add controls, or a status bar and you need to make sure the design will work on those environments. Make sure you always check your designs in at least a couple of devices.

So maybe not all you know is wrong. Just take into account those points above as a reference since design is so subjective anyway (not even our designer Mark completely agrees with everything I said).