Cullmann Design Blog

Icon

A Different Kind of User Interface

Mobile Interface Design for Cars and DriversI became interested in embedded operating systems like those found in cars early this year while developing ideas for clients. While the idea of designing special interfaces for drivers is as old as the automobile, making intuitive interfaces for computers and people without visuals is a somewhat less developed art. For these interfaces to work for a distracted driver barreling down the freeway is all new territory for almost all User Interface (UI) designers.

So why not leave automotive design to the auto-industry? Because the auto industry is coming to the user interface designer. Particularly, the explosion of smartphone ownership and a crack-down on handset use while driving will spur a market for applications to help the driver navigate, monitor conditions and make changes to their environment. Auto manufactures are quickly recognizing the need to create a safe and easy way to allow drivers to use their devices. Ford, an early adopter to in-cabin technology has announced a solution for developers to interface smartphones with their SYNC technology.

Ford’s AppLink SYNC SDK will allow for the voice-activated system in the car (which is already charged with navigation, audio and communication controls) to control applications on iOS (iPhone), Android and BlackBerry devices. Although Ford is not the only company to provide an computer control interface or voice-activated controls, it is the first to have a solution that developers are gravitating to.

Currently, the SYNC system, is only available in Ford, Lincoln and Mercury vehicles. Similar systems are available from GM (marketed under the OnStar brand) and Chrysler (UConnect), but few foreign car builders are providing a challenge to Ford. None of Ford’s competitors are as fast to provide solutions for developer either. For a market driven by technology, the uptake by the development community will fuel both innovation and adoption.

For someone who is designing solutions for consumers to take advantage of technology while driving, Ford’s AppLink is the first step to modern design solutions for developers and user interface experts. Currently, the SDK will provide developers the ability to use voice control, steering wheel buttons, text-to-speech features and vehicle data (speed, gps location, etc).

Although in-vehicle application development provides challenges, the ability to present the driver with solutions for comfort, communication, health and safety is a completely new frontier that had previously been limited to those in automotive circles.

Learn more about AppLink for the Ford SYNC

LiveView For Mac

If you design or develop for any of the web, iPhone or iPad LiveView is a must-have app. Essentially a screencasting tool, it allows the user to place a “virtual” device on their host mac and share that marque view with an iPad or iPhone via WiFi. Great tool, genius idea. John Hicks has posted a video that does the product justice.

Quick demonstration of how LiveView works from Jon Hicks on Vimeo.

iPad, Apps and Publishing

The App and the Interactive CD-ROM: What do they have in common?Apple’s iPad has been out for a few months and there is still quite a bit of excitement as publications begin to experiment with this new platform. Both Popular Mechanics and WIRED had been quick to release 2 very impressive “App” versions of their publication. Both of these pieces are very engaging and mirror content found in their print publication. The interactive versions include some dynamic enhancements including video content, interactive 3D models and social media integration. Of course, there are also video-based ads and dramatically animated advertisements. These pieces, and a number of other publications that have been released in the AppStore, are showcases for what can be implemented on these platforms.

Despite how impressive these applications are, they are not the future of publishing. In fact, these publications offer none of the benefits of what an “App” can offer at all. The WIRED application as well as PM and many other newly launched periodicals available in the AppStore are merely screenshots of the print publications they are replacing. There is interactivity and user engagement not found in the pulp-versions, but there is no evidence of what is really driving people to online media: Real-time, always on information. One of the most attractive qualities of the web is the ability to retrieve information as it becomes available: RSS, cross-linking, related posts, comments. These are all data-points flowing into one another as a real-time conversation. The “new publication” model utilizes few, if any of these differentiators.

What I am especially discouraged by is how closely the new “publication as app” model resembles the CD-ROM boom of the early 90′s. Very much like the iPad publication hype, CD-ROMs where supposed to change the way that media was distributed. CD-ROMs fell from popularity because they where proprietary, not easily shared, difficult to update and did little to further user engagement beyond what was already being offered in the market. I don’t want to come across as an Apple hater or someone who doesn’t think the iPad is a paradigm shift. My issue is with publishers who believe that porting their print materials to a screen and accompanying a few interactive elements is going to save or reinvent their industry.

Equally as offensive to the “interactive” arrangement of JPG and PNG files is the cost model that is being provided for subscribers. Although the cover price is similar to what is found on the traditional newsstand, the development costs don’t seem to warrant the $4.99 app costs that need to be paid every-month for an issue. One hope I had for the new publication model is that without the cost for printing and shipping, that the hyper-engaged advertising opportunity would provide a reduced subscription cost. Instead, users are downloading 400, 500 and even 600MB+ files into their devices to deliver advertising (a issue still pending is how metered bandwidth will affect this model as over-the-air download of these applications is not available via AT&T). Even with the proliferation of broadband, the “web” as a rule is still very lean and content can be provided over a range of bandwidths while maintaining a decent user experience.

The iPad offers so many opportunities for developers and content creators. The massive selection of useful applications is a testament to that. Taking the WIRED and PM samples to task, the solution that should have been implemented is one that provides a subscription “stub” on the device with a framework for the publisher to populate daily or over the course of the month as opposed to a traditional release cycle. This would provide a benefit beyond traditional content delivery and make user engagement more meaningful. This would also lessen the storage footprint and make the application more serviceable to those who have purchased devices with smaller amounts of memory. Advertising would be downloaded on a cycle so that the ad-model itself would apply as it does now. Interactive ads could pull “on-demand” with smaller portions of the ads cached and delivered under a “no-charge” bandwidth model-perhaps the Apple iAd service. I think an offering like this is more valuable and more inline with what the iPad’s benefit is to it’s users: Always-on content delivery that is up-to-the minute.

Touch Interfaces And Web Design

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 5 C’s of Website Usability

(5 Things Everyone Must Know About Good Web Design)

I spend a lot of my day working with all kinds of people to scope, design, code and deliver websites. I work with people having many different skill sets and coming from all kinds of disciplines. Of all of the challenges that I face in the process of getting from the conception of a website to complete, the toughest, and often-times the hardest to articulate is the concept of good usability.

I’ve put together 5 items that I believe everyone who is thinking about, in the act of or has recently completed a website should know about usability and why it is so important to you, and your end user.

  1. Copy (too much, too little, too complicated, too dense)
    It’s usually too much, copy that is. I believe that content is king, but content does not always mean a lot of copy. It’s very important to not loose perspective of web behavior when writing messaging and content for a website. You have about 3-5 seconds to provide an engaging experience while a user is deciding if they are going to hit the “back” button or close your site. In that time, you have to visually engage them and be able to deliver some type of scannable messaging in that window. To do this, write your copy so that it’s skimmable. Make use of headlines, subheads, bullets and bolding. The length of copy is very important as well. Unless you are writing long-format editorial or scientific content, you should break your copy into digestible bites. If the content still becomes too cumbersome, consider breaking it into multiple pages (which will help with natural search-engine optimization).
  2. Creating a visual flow
    Going hand in hand with copy is the visual flow. You should break your copy into easily scannable pieces and make use of headlines, subheads and bullets to further guide the user to your key points. This can also be greatly enhanced with images and graphic devices like block-qoutes. If you have a fair amount of copy you should be sure that the main focus of the page is close to the top. If the content runs long, you risk the copy falling “below the fold” or beyond what is shown in the browser window without scrolling down in the page. The eyes of your users should move from one paragraph to the other quickly and catching all of the primary messages and headings.
  3. Call to Action
    I am used to working with commercial content on the web. Very often the site owners want an action to be executed by the users. This action can be a purchase, registration, enrollment in a service or clicking on link to a section of the website where one of these actions can be made. Not all content creators have such a direct “call to action”. If your purpose is to educate people or share information a call to action may not seem as obvious, but there is reason to keep your users attention and draw them deeper into your site. You may want to have your readers learn more about your subject or click on links to other content on your site (as I have on the my own site). You may want to establish your credibility by having users look at your background or even continue to stay engaged by following you via social media. Regardless of your tactic, you want to keep your user engaged and do not leave them on a “dead-end” or with nowhere to click.
  4. Color
    From a usability stand-point readability is king. Regardless of your branding or corporate aesthetic, you should use a high-contrast field for type and call to action. Not only will you make your site accessible to someone who may be color-blind or using a device with a weak screen (like a mobile device), but you will also lessen reading fatigue. The most desirable design solution is to use very dark text on a white field (black and white), with a san-serif typeface designed for screen-reading (Arial and Verdana come to mind as a safe standard). Recently, the quality of computer displays and advances in the way that operating systems render text has presented serif typography as an option, but conventional wisdom still makes the safe choice a san-serif typeface. Avoiding type on top of images and patterns is also recommended. Although screen-readers can parse text separately, patterns can make text difficult to read and your audience may miss key messages.
    Headlines and subheads should be presented as plain-text whenever possible. Although your use of special typefaces may be limited, you should avoid relying on images to present text. There are several reasons including search engine optimization and bandwidth, but the key reason is platform interoperability. With such a huge variety of browser and mobile options, being sure that your headlines are delivered is the primary reason to rely on tried and true methods for text presentation. There are several very promising solutions currently being developed to allow designers to use a much wider range of fonts and this will likely widen options for site owners and content creators. It is also important to avoid using images for headlines and subheads whenever possible.
  5. Conventions
    Nothing helps your users more than using conventional solutions for message delivery, navigation, interactivity and the location of content. Don’t avoid innovation or even completely new alternatives for how users can engage your content, but make sure that your solution is easy to adopt and that you don’t mistake “engagement” for turning off your users. A few examples that come to mind are hyperlinks: Traditionally hyperlinks are blue with an underline. Visited links change to purple and it’s very easy to scan a page for the next chance to move to new content. I think that we (users and content creators) have come a long way and we can move comfortably to an expanded visual vocabulary for links. You should make your links obvious. Make use of color, underlining, icons (or all three) and be sure to visually cue a user that they have already seen a particular URL by enabling a different visual label for “visited” sites.
    Don’t hide your navigation or branding. The “inverted L” is a truth and users are conditioned to looking in the upper left-hand corner for navigation and branding. If you do engage users with compelling content, you would like them to know who you are and how to find out more about you! If you want a user to pay special attention to a call-out, make sure it’s in the top-left of your layout or in the left-hand edge of your design. This will dramatically increase the chances that it gets noticed and clicked on. Marketers have unfortunately trained users to avoid the right-hand edge of the screen with consistent placement of banner ads and unrelated content. Use this to you advantage and stack your messages towards the left.

Many of the usability tips mentioned above are proven methods to those designing and developing websites. Many of the tips outlined are things that successful designers ignore-successfully, but may be relevant to someone starting out or, if you’re having trouble with traffic or people “sticking” on your site, you should try. It’s a return to best practices, good design and appreciating your user’s time and attention.

Learn more about usability and the how it can make or break your next project:

Don’t Make Me Think by Steve Krug
Jakob Nielsen
25 Point Usability Checklist
Usability.gov Standards

About Cullmann

Chris Cullmann is a Creative Director and Online Strategist. He works for Ogilvy CommonHealth Interactive Marketing, a digital agency dedicated to healthcare marketing. His professional and personal portfolio includes interactive websites, viral and social media, and online education applications. His portfolio and observations about the design and marketing industry can be found at www.cullmanndesign.com

The opinions expressed on this site are my own and do not reflect those of my employer or those who I am professionally connected.

LinkedIn Profile

View Chris Cullmann's profile on LinkedIn

Follow Cullmann

Follow Cullmann on Twitter

WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera