Tags // Interface

Designing collections for the web

Designing collections for the web - my new article over at PebbleRoad. The idea of the article came up when the team was discussing how best to leverage and surface homogeneous information. We were doing a redesign of a hospital website and found out that patients wanted to be connected with getting care in many different ways - by clinic, by doctor, by diseases and conditions etc. This idea let us to investigate collections, first as used by libraries, and then modified and as used by social media. This article compiles our experimentation and learning on the subject.

“A collection is a list of homogeneous items. A collection on the web can be as simple as a blog (a list of posts) to as complex as a library collection (multiple lists of different library materials). Collections are an integral part of many websites, but not all collections are designed with ease-of-use and ease-of-retrieval in mind. In this article, I’ll cover some theory and give practical advice on designing online collections for the websites and intranets.”

Marti Hearst’s new book is now available for reading online - “To make this book available to as many readers as possible, the author, with permission of Cambridge University Press, has placed the full text online free of charge.”

10 Useful Techniques To Improve Your User Interface Designs

"There are many techniques involved in crafting beautiful and functional interfaces. Here’s my collection of 10 that I think you’ll find useful in your work. They’re not related to any particular theme, but are rather a collection of techniques I use in my own projects."

16 User Interface Prototyping Tools

Russell Wilson has written up an extensive comparison of 16 prototype tools for UI development. I just watched the demo for Adobe's Thermo, and it looks really impressive. Omni Graffle has been my staple over the years, but would like to give others a try.

Wells Fargo ATM design case study

"The design team learned that the single-most used feature of an ATM is the cash withdrawal. The objective for the new UI was to continue to offer quick and easy cash withdrawals, while making the other services more visible and accessible. Some of these services, such as purchasing stamps and printing account statements, can be convenient for customers and they save a trip to the post office or branch office. For Wells Fargo, it is an additional source of revenue."

Writing an Interface Style Guide

Jina Bolton writes about keeping the interface relevant and useful even after the launch. Her key -- interface style guides.

"Interface design standards enable brand stewardship. Commonly documented in a design “style guide,” these standards inform clients and content editors of branding guidelines for typography, whitespace, color, etc. The design style guide provides a reference in which developers can describe the way the interface is intended to look, and helps designers to be consistent as the interface is updated so that, in turn, the interface continues to feel consistent."

Don’t design ‘what if’ navigation

Gerry McGovern describes what the pattern community call the hub-and-spoke navigation system. In large websites, where there are a lot of options, the hub-and-spoke arrangement does bring order and clarity to the page. But it does have a downside. What if someone comes directly to the website from, say, a Google link. He will surely miss the other options. This is where the global navigation, or the one in vogue these days -- 'pre-footer' navigation -- can come to the rescue. For more of these patterns, check out Jennifer Tidwell's book Designing Interfaces.

Cover-flow on the web

New camera interface

The new models of Samsung cameras have an interesting matrix interface. Yes, it does give access to many options in just 2 clicks, but it looks like I would have to spend some time to learn. Check out the video.
[Via Small Surfaces]

The Science and Art of User Experience at Google

"Focus on the user and all else will follow. From its inception, Google has focused on providing the best user experience possible. Jen Fitzpatrick will take you through the art and science behind Google's design process and share examples of how design, usability and engineering come together in Google's unique culture to create great products."

Design patterns

Luke Wroblewski explores design patterns with the experts such as Jenifer Tidwell and Bill Scot. Here's part 1 of the discussions.

There are a couple of books mentioned in these discussions, but I prefer Jenifer Tidwell's Designing Interfaces. It's a wonderful book, one that I keep referring to many times over during a project. The other resource is the Yahoo Design Pattern Library.

With the growing complexity of websites and increasing pressure to manage them properly, it makes sense to pursue a design pattern approach that provides enough flexibility within boundaries to respond to the changes.

Processes that pop out

Juan C. Dürsteler has written an article at Infovis on pre-attentive processing in visualization. The human brain is programmed to very quickly automate repeated tasks. So in order to highlight a certain aspect of the interface or task, it needs to be differentiated from its surroundings. And there are several way of doing that: Colour, Form, Movement and Spatial Localization. Read the article to see examples and illustrations of each type.

People as a Source of Breakthrough Innovation

At Philips,we apply this approach to three things: our market,ourselves, and our interactions with our consumers…By combining all the insights we gain from looking at our market, ourselves, and the consumer interface, we can arrive at a general vision ofthe future. On that basis,we can then work out, for the next few years, what new types ofbenefits we should aim to provide, what new competences we need to do it, and how we should interact with our end users.

Apple’s VoiceOver

OS X Tiger "introduces VoiceOver, an accessibility interface that gives you magnification options, keyboard control and spoken English descriptions of what’s happening on screen. If you have a visual impairment, VoiceOver enables you to work collaboratively with other Mac users or work on their computers without assistance."

What Makes a Design Seem ‘Intuitive’?

This is a nice article showing how to bridge the gap between users current level of knowledge about an interface and the target knowledge they need to use the interface intuitively.

The biggest challenge in making a design seem intuitive to users is learning where the current and target knowledge points are. What do users already know and what do they need to know? To build intuitive interfaces, answering these two questions is critical. For identifying the user’s current knowledge, we favor field studies... For identifying necessary target knowledge for important tasks, usability testing is a favorite technique of ours.