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.”
Search User Interfaces - Marti Hearst’s book available online free of charge
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.”
This is a fantastic resource. Thanks Marti. Thanks CUP.
If you want a quick reference of Marti’s book - watch her giving this presentation of her book to Google.
Zombie home page chronicles
Now this is serious fun. I’ve seen this happen so many times. From Tales from Redesignland.
Read the entire episode.
MIT Students Turn Internet Into a Sixth Human Sense
This is awesome. It goes to show that new ideas can be explored when projection systems go micro -- here MIT students use a battery powered projector to project interfaces on any object.
Designing Web Interfaces
10 Useful Techniques To Improve Your User Interface Designs
Brilliant collection again by Smashing Magazine. This one's one basic UI elements.
"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
An in-depth article that describes how Pentagram redesigned the interface of Wells Fargo's ATMs.
"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.
User Interface Implementations of Faceted Browsing
Faceted browsing is going to become quite the norm for navigating large data sets -- health information, consumer products, etc. This article takes a good look at some of the interface implementations of faceted browsing.
Cover-flow on the web
Like to see the cover-flow interface on the web? Check out: http://creativspace.at/. The images are pulled from Google Image search.
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]
Information Architecture 3.0
Peter Morville has written a brilliant piece of the state of IA and how it will grow in the coming years. I like how he explained the difference between IA and the current fad, interaction design:
I’ve been an interaction designer since 1994. I’ve designed online communities, software products, graphical user interfaces, and Ajax-enabled mapping mashups that leverage tags and taxonomies.
I’ve been an information architect since 1994. I’ve designed online communities, software products, graphical user interfaces, and Ajax-enabled mapping mashups that leverage tags and taxonomies.
Both of those statements are true, though it’s also fair to say that I am mostly known as (and self-identify as) an information architect.
The Science and Art of User Experience at Google
Nice video on Google's UX work.
"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."
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
Stefano Marzano, Chief Executive Officer and Chief Creative Director, Philips Design writes about how Philips goes about looking for design opportunities.
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.
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.