All posts tagged as "UI Design Patterns"

We had indicated on the mobile design resources page that we would be adding design recommendations and style guide information. This information would be recommendations that don’t constitute a design pattern, but nevertheless are good or best practices. And of course, the information is free and you are encouraged to add or edit content.

We just loaded a long page on mobile game design. It’s the chapter on game design from my 2003 User Interface Guidelines for J2ME MIDP 2.

We’re still working on getting other major information providers (a quick call-out to dotMobi, W3C, Nokia, SonyEricsson, Sprint, Vodafone, and others) to provide support and/or information. If you provide support in the form of a lot of content and/or money to defray our expenses, you’ll get your logo built into the templates.

Morten Hjerde just posted a lovely discussion on 2D navigation on mobile phone screens. He then posted two new patterns on the mobile design wiki: backstepping and 2D navigation on mobile.

Remember, on the wiki you can polish up anything already done, so we have a community understanding of what these principles mean.

I’ve been getting an increasing number of requests for information on “what do I need to learn to get into mobile design?”. I always take this opportunity to mention my book, Designing the Mobile User Experience, which was written to help user experience, marketing, and product professionals translate their skills into mobile design and business.

Why? We think:

• iPhone awareness – in recent user research, one participant said of mobile Internet, “No, not on my phone. That’s what the iPhone is for.”


• one phone for every two people – 50% penetration is getting lots of business attention


• unlimited data plans – finally! For me, it’s one of the biggest draws of the iPhone.

Designing the Mobile User Experience has information about mobile users, differences in mobile use worldwide, design principles, some design patterns, sources for further design recommendations, industry structure, visual design for mobile media, and information on mobile user research including usability testing.

I’m pleased to announce that we have re-launched our mobile UI patterns web site. It is now intended as a full mobile design resource center, and is built on MediaWiki, the same software that runs Wikipedia.

In the long run, we’ll want to provide full style guide type information, device information, and so forth. For now, it is the mobile UI patterns plus some more. Oh, and there is a new pattern in there.

So have fun, add whatever resources you think are relevant, edit a page (there are several that are incomplete), and contribute to the community!

Mobile Design Resource Center

(Morten Hjerde, you are specifically tagged to incorporate some of the principles you discussed at IxDA Interaction 08)

This pattern is adapted and updated from Martijn van Welie's UI patterns with permission.

When users get deeper into mobile web sites they also need to be able to go back to important locations such as the home page or category page. The homepage is practically always relevant but the other locations depend on the context of the page.

Design

Create a consistent set of links to be displayed at the bottom of each page. Consider including links to:

• the site home page
• search
• home
• important locations

Unless you can support AJAX-like capabilities, the footer should be short, no more than approximately 5 links. Large footers will increase the load time of every page in your site.

Applicable Devices and Platforms

Web sites and other platforms that do not provide access to softkeys.

When Used

Use on all pages in your site.

Rationale

The footer is the place that is seen last when browsing a page. That is the moment when users have to decide what to do, if they haven't already done so. Home is an important element to have since it forms an always present link to a "safe location".

I've finished the set of design patterns that were in my book, Designing the Mobile User Experience. This is the first not covered in the book. As always, patterns are cataloged and editable at patterns.littlespringsdesign.com.

While error messages are not unique to the mobile space, error messages are frequently mishandled across most platforms.

Design

In general, error messages should give the user the information needed to solve the problem. In many situations, this means the underlying code needs to better differentiate error conditions.

Log all errors ... and fix the problems.

Body

• Put error codes at the end of the message. This allows any support personnel to get the relevant information without costing the user is time to read it ... or risk having the code push some of the words off the bottom of the screen/window.
• Keep the message short.
• Give clues regarding what the user can do to resolve the situation.
• Be specific.

When looking at your code, see whether there is a large "else" statement (in whatever language you are using). If most of the error conditions fall into that pile, you probably need to be a bit more specific.

Consider using a dialog box rather than a full screen, if your platform and device supports it. If possible, categorize errors into based on whether the user can fix the problem, the user needs to retry later, or an unfixable error has occurred. Of course, many unfixable errors should be fixed by the developer.

Commands (softkeys, links, or buttons)

Frequently, the best commands are "Retry" and "Cancel". "OK" is rarely a good choice.

Provide the user the ability to do some set of:

• try the action again (Retry) ... used to perform the same action again immediately or restart a process
• fix the user entry (Edit)
• abandon the task (Cancel) ... returning the user to a logical starting point
• save the data (Save) ... allowing the user to abandon the task without losing context