There are two parts to platform UI guidelines, as there are two parts to the “look-and-feel” term. The first part is the visual fidelity across the application surfaces, and the second part is the behavioral fidelity across the application responses to the peripheral devices used to interact with it.

As a developer of a cross-platform look-and-feel, i don’t care that much when a particular application does not conform to the visual guidelines of the specific platform except for two very important areas – matching desktop fonts and font rasterization – as evidenced by the work to extend the font policy support from the Looks library to Gnome, KDE and Mac. The behavioral fidelity is a completely different thing:

From a usability standpoint, behavioral consistency is a more meaningful type of consistency than visual consistency. Being behaviorally consistent means that an application behaves in the same way as other applications, and thus in the way the user would typically expect.

The more consistent the look, the more important behavioral consistency becomes. Visual consistency can hurt usability if it gives a false sense of behavioral consistency, telling the user that a given widget will behave like something he already knows when it does not.

Using “Tahoma 11” in Swing applications on Windows Vista is bad. Using “dialog” which does not resolve to “Lucida Grande” on Mac is bad. What is also bad? Treating ctrl+C as copy when Mac users expect meta+C. It’s not the end of the world, of course. It’s just that people have tendency to memorize keyboard shortcuts, and the more proficient they get, the more they memorize. And they also expect different applications to respond (behave) the same to the same keyboard shortcuts.

An apparently quick solution to appease the differences between Windows and Mac keyboard mappings would be to change all ctrl modifiers to meta. This works for “select all”:

  • On Windows: ctrl+A
  • On Mac: meta+A

What about “copy”? It has multiple keyboard shortcuts:

  • On Windows: ctrl+C, COPY, ctrl+INSERT
  • On Mac: meta+C, COPY

Changing ctrl+INSERT to meta+INSERT on Mac is bad. If you’re already doing it, do it right and remove the mapping. What about “moving to next word”?

  • On Windows: ctrl+RIGHT
  • On Mac: alt+RIGHT, alt+KP_RIGHT

Now this is getting interesting. In some cases you need to replace ctrl with alt and add an extra (but very similar) shortcut. What about “move to beginning of line extending selection”?

  • On Windows: shift+HOME
  • On Mac: shift+meta+LEFT, shift+meta+KP_LEFT

Now not only the modifiers are different, but the main key is also different. What about “delete previous word”?

  • On Windows: ctrl+BACK_SPACE
  • On Mac: alt+BACK_SPACE, ctrl+W

You have two different keystrokes on Mac, one similar to Windows, and another completely different. Clearly this calls for an extensible cross-platform solution to address the behavioral guidelines of the specific platform. When do we want it? Now. How do we get it? Read on.

The latest 6.1dev drop of Substance provides first support for platform-specific keyboard input maps. The new SubstanceLookAndFeel.setInputMapSet API can be used to install a set of input maps for all the relevant core Swing controls. The org.pushingpixels.substance.api.inputmaps.SubstanceInputMapUtilities class exposes two static methods that follow the look-and-feel related APIs in the core UIManager class:

  • InputMapSet getSystemInputMapSet() to get the system specific input map set
  • InputMapSet getCrossPlatformInputMapSet() to get the cross platform input map set

By default you will have the system specific input map set installed – so that you don’t need to call the API above if you want to conform to the platform behavioral guidelines. The cross platform input map set provides functionality identical to that of Metal. The system specific input map set provides the following:

  • Input map set identical to that of Windows look-and-feel on Windows platforms.
  • Input map set identical to that of Gtk look-and-feel on Gnome.
  • Input map set almost identical to that of Aqua look-and-feel on Aqua. While the keystrokes are the same, the difference is in the actions mapped to the keystrokes. In a small number of cases Aqua UI delegates provide platform-specific implementation of actions that are not found in the basic UI delegates (see the list below). In this case i tried mapping the keystrokes to the closest basic action.
  • Cross-platform input map set for other platforms.

If you’re interested in the implementation details, start here. This is the cross-platform set, and this is the Aqua set. If you find anything missing for one of the supported platforms (Windows, Mac, Gnome), or wish to contribute an implementation for a different platform (KDE, …) – let me know. To test this new functionality, take Substance 6.1dev for a spin.

P.S. The complete list of Aqua differences:

  • All combo keyboard shortcuts are mapped to Aqua-specific actions not present in Basic.
  • Up, down, page up and page down keyboard shortcuts in multiline text components (editor panes, text areas, text panes) are mapped to Aqua-specific actions not present in Basic.
  • Missing actions for end and home in list.
  • Different shortcuts mapped to collapsing and expanding a single node in trees are mapped to Aqua-specific actions not present in Basic.
  • Missing actions for collapsing and expanding the full branch in trees.

http://farm1.static.flickr.com/54/137413905_9232662cf6.jpg

Image by Here’s Kate

Every month this series is tracking the latest design trends and collecting the best examples of modern web designs. Here is the list for April 2010 with almost 1700 links from 47 aggregator posts:

Design, uninterrupted #21

April 30th, 2010

Today’s post highlights the design of CrayonsLife.com by Jessette Dayate. The background texture is reminiscent of the pattern left by the crayons on a pavement. This texture extends into the inset effect of the page header title, as well as the beautiful hand-drawn illustration of a girl sitting on a stack of crayons. The footer section uses illustrations as well – for the horizontal separator and the tweet decoration. If you reload the page, note the fade-in effects on the “Latest project” images.

The layout could use a little bit more alignment. The left edge of header section text hangs in between the two columns of the main content. And while the left edge of the “Latest project” images is aligned with the main content column, the right edge falls short.

Being in control

April 29th, 2010

Certainly an interesting week, with Palm acquired by HP and Apple’s detailed response on why Flash is no go on their platforms. Along with the recent acquisition of Sun by Oracle, it is shaping to be a battle of giants in the consumer market. Now we have (in alphabetical order) Adobe, Apple, Google, HP, Microsoft and Oracle – each with its own platforms, tools and plans to get a piece of desktop, web and mobile consumer markets.

  • Apple, Microsoft and (presumably soon) Google have their own desktop operating systems. They do not need to ask anybody a favor to be able to shape where they are going, and what they can run on it.
  • Apple, Google and Microsoft have their own browsers. They do not need to ask anybody a favor to shape what can run in it.
  • Apple, Google, HP and Microsoft have their own mobile operating systems. They do not need to ask anybody a favor to be able to shape where they are going, and what they can run on it.

Where does that leave Adobe and Oracle? Each is certainly a behemoth in the area of cross-platform consumer-oriented platforms. Adobe has Flash, Flex and Air. Oracle has Java and JavaFX. But do they control their own long-term destiny?