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.

If you have worked as a Graphic Designer or Art Director for any length of time, you’ve been asked to integrate a chart into your design. There are some innovative and inspiring ways to create informational graphics—it’s an art-form in itself. In some cases, the experience and craft is stifled by having to accommodate changing data. For the web designer or developer, there are additional hurdles: clarity of data, being able to showing values for large data-sets, updating data frequently, how to present that same data for search engine index.

Google has introduced a tool that may help alleviate some of the designer and developer’s burden: Google Chart Tool. This new service from Google allows you to use a generated image or, via javascript, a live rendering of your data on your webpage or presentation. The solution includes a gallery with a huge selection of graphic solutions to present data in a variety of forms.

Your chart can be fed data from a huge variety of sources. The most simple is to create your data parameters in Google Docs and “connect” that data to your chart for real-time updates. Google also provides an embedded data solution that allows you to provide plain-language data within your page. Although there is no documentation the data is enclosed in Google’s tagging structure and will likely be indexed for search and categorized as “charted data”. This can be an advantage to content that relies on the expression of data as a business model or a differentiator. The charting API (Application Programming Interface) also allows you to tie your chart to a wide variety of dynamic solutions including JAVA, JSON and XML.

Although the solution provided by Google is not a replacement for good graphic design and creating a comprehensive design solution for your information, it does give designers and developers a tool that allows for flexible inclusion of data into a web design and separates presentation from the data itself. It is crucial to remember that using Google’s (or any third-party tool) for charting will have you relying on that party for your site’s integrity. If the service changes or goes down, your data may not display properly, or at all. These same solutions will give you a great looking solution without creating a custom code or constantly updating data and give you more opportunity to focus on making your site’s design great.

Learn more about information graphics and design around data and take a look at some of the sites and books below:

Edward Tufte
Flowing Data
Infosthetics
Jakob Neilsen

(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

Touch is the new click: with the growing number of devices using touch as the primary input method, the common vocabulary for designing user interface is changing. Punchcut has produced a very elegant video for user interface considerations when designing for a touch-screen device. The video is excellently produced andPunchcut’s summary is right on point.

Punchcut Perspective: Considerations for Designing Touch UI from Punchcut on Vimeo.