Cullmann Design Blog

The design of web interfaces are based on the mouse and keyboard model of user interaction. That model is based on the presumption that a user is engaged with your content primarily with the use of a keyboard for text input and a mouse (or similar pointing device) controlling an ever-present on-screen cursor. With a touch-enabled interface, the user interaction model is different. Designers need to define exactly what a “click” will yield without the act of discovery that is part of some modern website designs. Equally important is the directive copy. No longer can the user rely on a “tool-tip” or similar device to nudge users along an interactive path to engage their content.

In the past few weeks, there has been a tremendous amount written about touch-interface and specifically Flash. Flash is not the culprit in this evolution, but it is a primary offender. In Steve Job’s public denouncement of Abobe Flash, he points towards it’s reliance on mouse driven interaction. This is not so much a Flash issue (although many Flash sites rely on rollover as a primary state of user interaction) as it’s a design issue that carries over from the popular operating systems including Mac OS X (the hidden doc and spring-loaded folders for instance). There are many instances of non-flash interfaces taking advantage of rollovers to expose content, change state or even reveal entirely new content areas. As a general rule, this is probably a bad design decision. If your design lacks a concise call to action for exposing content or leading the user to commit to an action, then there is a chance that the user may not discover that content (rollover or not).

How do designers and content creators fix this? The marketer’s tool: Call To Action. Anything that requires the user to interact with for content or to discover something should clearly announce “I am what you are looking for! Click on me”. In some cases the button should be this obvious, in other cases, subtlety may be in order. Either way, assume that a use must be committed enough to retrieving content that they click and commit to the action. This is good user interface design AND works for any and all methods for user input.

One cans make a case that AJAX and hidden content on a page can provide a good and responsive user interface. I agree. I myself make use of some content that is hidden for the user when they first visit my site. What is important, and the intent for my post, is to provide a good user experience regardless of the user’s device or if it supports a mouse, a touch-screen or even javascript. This is good for the user and also good for the designer/developer. Adhering to these practices future-proofs your designs regardless of what emerges in the market-place.

The mobile marketing is expanding exponentially: 17% of mobile phones sold are smartphones according to a Forrester Research survey. That 17%, make up over half of cellular data traffic transmitted by US carriers. As a web developer and designer, it’s very important that the work I create for my clients as well s my own work is accessible to users regardless of how they are accessing content.

Although I am a huge proponent for web-standards and accessible design, sometimes, I’m glad to have a little help. Enter WordPress Mobile Edition. This WP plug-in is a theme designed to make your WP blog a pleasurable experience for mobile users, regardless of platform. It’s free, easy to install and from my tests seems to work on a wide range of mobile devices. You can download it from CrowdFavorite.