« December 2003 | Main | February 2004 »

26 posts from January 2004

Friday, 30 January 2004

hand-painted signs

love this! an online gallery of hand-painted & hand-crafted signs

Please do not sit on stoop

art has also collected and posted other collections of what he calls "visual junk":
- devilish goat beer labels
- 45 rpm record label designs

dieter's ten points of good design

via xblog:

Dieter Rams, head of design at Braun and creator of the 606 Universal Shelving System, provides his ten point design philosophy in this month's metropolis

606 Universal Shelving System

Dieter Rams: I have distilled the essentials of my design philosophy into ten points. But these points cannot be set in stone because just as technology and culture are constantly developing, so are ideas about good design.

1. Good design is innovative.
Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology and can never be an end in itself. When designing the shelving system, I had the idea that it should be like a good English butler. It should be there when you need it but be in the background when you don't.

2. Good design makes a product useful.
A product is bought to be used. It has to satisfy certain criteria, not only functional but also psychological and aesthetic. Good design emphasizes the usefulness of the product while disregarding anything that could possibly detract from it.

3. Good design is aesthetic.
The aesthetic quality of a product is integral to its usefulness because products we use every day affect our well-being. But only well-executed objects can be beautiful.

4. Good design makes a product understandable.
It clarifies the product's structure. Better still, it can make the product talk. At best, it is self-explanatory.

5. Good design is honest.
It does not make a product more innovative, powerful, or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.

6. Good design is unobtrusive.
Products fulfilling a purpose are like tools. They are
neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user's self-expression.

7. Good design is long-lasting.
It avoids being fashionable, and therefore never appears antiquated. Unlike fashionable design, it lasts many years--even in today's throwaway society. I live with the shelving system. It's the only way I can improve it. I'm proud when I get letters from users who say they bought system in 1962 and were able to add elements to it as their needs grew and changed.

8. Good design is thorough down to the last detail.
Nothing must be arbitrary. Care and accuracy in the design process shows respect toward the consumer.

9. Good design is environmentally friendly.
Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the life cycle of the product. A few years ago I had the crazy idea that gas stations should not only be places to buy gas but locations where you could return goods for recycling. Companies have the technology; the problem is finding ways for users to be able to return a product at the end of its life.

10. Good design is as little design as possible.
Less but better--because it concentrates on the essential aspects, and the products are not burdened with inessentials. Back to purity, back to simplicity!

Thursday, 29 January 2004

google redo

came across this redesign excercise of Google's search results [1] by Andrei Herasimchuk.

i really like his application of the Tufte [2] guideline "To clarify, add more detail" where he displayed the full information for the first 5 results and then blocks of results (6-25, 26-50, 51-75, 75-100) displaying title only. resulting in a single, very clean, page with 100 results!


Google Results Redesigned [3]

Visual displays rich with data are not only an appropriate and proper compliment to human capabilities, but also such designs are frequently optimal. If the visual task is contrast, comparison, and choice -- as so often it is -- then the more relevant information within eyespan, the better. Vacant, low-density displays, the dreaded posterization of data spread over pages and pages, require viewers to rely on visual memory -- a weak skill -- to make a contrast, a comparison, a choice.

Micro/macro designs enforce both local and global comparisons and, at the same time, avoid the disruption of context switching. All told, exactly what is needed for reasoning about information.

Edward Tufte [4], from his book Envisioning Information [5], page 50

Andre's comments on it:

Using Tufte's concept about micro/macro readings that to clarify, you add more detail, I added 100 results to the page, but I truncated each one after the first five to just the title. I put the description for the remaining results into a TITLE tag, which still allows it to be available to the user. (In the mock-up, I only added the TITLE tag to results 6 through 25.) I don't know about everyone else, but I find that I infrequently go past pages 4 or 5 using the Google pagination widget. Tufte is right about context switching, when I do go past page 4 into pages 7 or higher, I often find it hard to remember which page to return to that contained a certain link.

This new design places many more results on the page, which should significantly reduce context switching between pages. I think it would have the added benefit that people would more often examine more of the results, even going into the two or three hundred range more often. As a final benefit, I think this single page would work using the 80/20 rule. That is to say, that 80% of the time, users would never need to go past the first 100 search results to find what they are looking for, only needing this one single page for most their search needs.


Wednesday, 28 January 2004

method for full css layouts

Russ Weakley of Max Design posted a process for creating a full CSS site.

haven't had a chance to run through iot completely but here's the toc:

Step 1. Decide on a level of browser support
Step 2. Look for containers
Step 3. Name the containers
Step 4. Mark-up the containers
Step 5. Choose a position method for the containers
Step 6. Colored boxes
Step 7. Drop in the content
Step 8. Styling inside the containers
Step 9. Taking out the CSS
Step 10. Hiding rules from older browsers
Step 11. Print CSS

Tuesday, 27 January 2004

persuasive design

via karl long on AIGAExperienceDesign:

Guiding Users with Persuasive Design: An Interview with Andrew Chak

Chak argues, correctly imo, that usability isn't enough:

Even if a user can complete a transaction on your site, doesn't mean that they will transact.

To be successful, sites must go beyond Usability by focusing on Persuasive Design. They must motivate users by taking advantage of persuasive tactics that will make them take action. The most persuasive web sites focus on making users feel comfortable about making decisions and helping them act on them.

part of this involves designing for the user at different stages of need:
Browsers
Evaluators
Transactors
Customers

book cover
All of this is in his book Submit Now: Designing Persuasive Web Sites

karl points out that chak, influenced by maslow, created a "web hierarchy of user needs"

Availability > Usability > Confidence > Desire

see my earlier post on karl's online customer relationship hierarchy. In his message to the AIGAExperienceDesign list he states his newest iteration:

Value>Trust>Competence>Depth>Autonomy>Relatedness

Monday, 26 January 2004

interface criteria

lukew recently launched a wonderful new site called Functioning Form.

in one of the entries he shares the "informal set of criteria for evaluating effective designs" gathered during several Interface Design Evaluations conducted with his students:

Context –Does the interface provide contextual information about: where you are situated within content (the information and activities that constitute an interactive system), the various relationships between content, and a big picture (macro view) of the information/interaction space?

Anticipation –Anticipation is closely related to context and refers to the ability of an interface to answer user questions before they need to be asked. Does this interface anticipate what I’d like to do and provide adequate and appropriate interactions and information?

Consistency –Though being consistent when presenting information and interactions sounds relatively easy, the truth is it’s difficult enough to be the most common problem in interactive systems.

Transparency –Does the interface get in the way of your interactions or is the content (information/activities) the focus?

Clarity/Simplicity –Many interface designs are a delicate between visual simplicity and information density: offering many choices/options vs. guiding users without overwhelming them. Which side you lean toward depends on your target audience. However, a clear presentation of information (aesthetic integrity) is always a must.

Metaphor –If metaphors are utilized to clarify the system are they limiting or empowering?

Feedback –Do user actions result in clearly presented system reactions? Is what you see really what you get?

Control –Who’s in charge: you or the system?

User-Focused –Are user needs and objectives the driving force for the design? How well do the designers know their users?

Of these, the vast majority (Context, Consistency, Transparency, Clarity, Feedback, Metaphor, User-Focused) are issues of communication. What are you telling your audience and how are you saying it? And because most interfaces are highly visual, we’re really dealing with issues of visual communication.

Friday, 23 January 2004

interface patent

Flash demonstration of an interface design that this company is attempting to have patented.

The idea is to visually represent the unseen portions of an interface device on the screen.

The graphic is animated to give the illusion of a mechanical connection to input device.

(via joshua seiden on ixd-discuss)

bar charts with css

via dave horan:

using css to create bar graphs

Thursday, 22 January 2004

history flow

via infodesign:

project from IBM's Collaborative User Experience (CUE) Research Group called History Flow attempts to visually represent the contributions and evolutions of online collaboration.

history flow provides answers at a glance to questions like, Has a community contributed to the text or has it been mostly written by a single author? How much has a particular contributor influenced the current version of the document? Is the text's evolution marked by spurts of intense revision activity or does it reflect a smooth transition from its beginning to the present?

visualization

Wikipedia page on "evolution"; each color represents the contribution of a partibular registered author. White and gray represent the contributions of anonymous authors.

the site shows results from analyzing Wikipedia on such aspects of vandalism, author contributions, activity over time, and persistence of contributions.

fibonacci series explained

dean allen (textism.com) created this short, cleanly designed flash-piece explaining the Fibonacci Series.

My Photo

My Photos

  • www.flickr.com
    carriejeberhardt's items Go to carriejeberhardt's photostream

More Places to Find Me

Flickr LinkedIn Other... Twitter

My Tribe

  • Interaction Design Association

    Interaction Design Association

Subscribe

Powered by TypePad Member since 07/2003