xocea

(zoe-sha)




just one person dreaming of a more logical, sustainable, and usable world

Visual Design Resources

Filed under: ux, web design — xocea at 9:24 pm on Sunday, July 23, 2006

I Found this list of visual design resources from LukeW’s blog.

Visual Organization

Visible Narratives: Understanding Visual Organization -Luke WroblewskiA primer on the visual organization of web pages, which condenses the core principles of functional aesthetics.

Visually Critiquing Web Pages -Pete FaradayThis paper explores how visual information is organized in a web page.

Books:
Visual Explanations, Edward Tufte, 1997. I list this Tufte book for two reasons: it features (cover image) Edward Tufte and Colleen Bushell’s redesign of an storm simulation and Edward’s redesign of the information presented following the Challenger disaster. These two information design examples are loaded with lessons all designers should take to heart.

Envisioning Information, Edward Tufte, 1990. Tufte’s second book is probably the most applicable as it lays out many fundamental information design considerations.

Look, Feel, and Personality

Who Are You? Get a Personality (PDF) -Luke WroblewskiSample chapter on designing an appropriate and engaging personality for Web sites from Luke’s book, Site Seeing: A Visual Approach to Web Usability.

Setting the Mood with Color -Sean GlitheroArtists use a variety of methods to create mood in their works including color.

Pricing Beauty: Reflects on Aesthetics & Value -GAINExplains why aesthetics is an important value in products.

Branding and the User Interface, Part 2: Tips on New Media Branding: Behavior and Color -CooperHow branding of software user interfaces, with a focus on behavior and color.

Color My World -New ArchitectThe way color is used in a worldwide context is a profound issue that’s often misunderstood or overlooked by Web designers.

Trends in Web Design (PowerPoint) -Silicon Valley Web Guild Visual Design Group

Books:
Site Seeing: A Visual Approach to Web Usability,
Luke Wroblewski, 2002.Shows how good visual design can make a site not just usable, but user-friendly.

PANTONE Guide to Communicating with Color, Leatrice Eiseman, 2000. A good first overview (though slim on content) of using color to communicate.

Process

How to (and not to) Work with a Designer -Daniel Will-HarrisThe trouble is, a lot of people hire designers because they want their site to “look good.” But that’s just scratching the surface of what a designer can and should do.

Simplicity

The Pursuit of Interface Design Simplicity -Luke WroblewskiWhy is the process of making things easy so challenging, and what can we do not to stray from the path to simplicity?

Top 10* Design Problems -Health InfoDesignA survey of barriers to simplicity (information density vs. simplicity, task interruption, indistinct information spaces, etc.) in HealthCare interfaces.

Custom Personal Portals

Filed under: Uncategorized, news — xocea at 7:53 pm on Sunday, July 23, 2006

Here’s links and information on a few of the players in this new space. Not sure how this solution will evolve, but as usual MS is staking a claim.

Windows Live – Your online world gets better when everything works simply and effortlessly together. That’s the basic idea behind Windows Live™. So the things you care about—your friends, the latest information, your e-mails, powerful search, your PC files, everything—come together in one place. This is a brand new Internet experience designed to put you in control. And this is just the beginning—you’ll see many more new services in the coming months.

Pageflakes – Pageflakes is your personalized Internet. You can add what you like and remove what you don’t like – and it’s totally simple. What you see on the site right now is just a selection of a few standard modules (“flakes”, as we call them) that allow you to read blogs, do web searches, create a to-do list, check your Gmail account and read the latest news. Normally you’d have to go to a different web page for each of those things. With Pageflakes, you have it all on one page! And it’s all free.

Netvibes – Netvibes.com is a custom made web 2.0 home page solution. This service is free and gives the user the ability :
* to create a personalized page with the content they like.
* to put together data feeds and services from web 2.0 with a very simple interface
* to access your page anytime and from any computer .
* browse, modify, and import your RSS feeds with our integrated RSS/ATOM feedreader. You can easily import an OPML file as well.
* to import, download and listen podcasts without any additional software
* to check your mail on one or many gmail account, to stick webnotes, weather and many more to come !

Apple Reflection Script

Filed under: web design — xocea at 9:31 pm on Saturday, July 22, 2006

reflectionCow’s Blog has a nice script that reproduces he reflection effect often used by Apple on images.

Quote: “I wrote some Javascript which will get the script to search through the document for all images with a certain class and then to use the canvas tag and Javascript to generate a reflection. Using unobtrusive Javascript, all existing images will then be replaced with the canvas enhanced images with reflection.”
LINK

GE’s Collaborative Whiteboard

Filed under: design, ux, web design — xocea at 4:49 pm on Saturday, July 22, 2006

whiteboardArmchair Media pointed me to this amazing litle tool provided by…GE? Go GE! Quote: Here’s a simple, smoothly executed idea from General Electric. They call it “Imagination at Work” and give you a marker and a whiteboard. Draw with your friends, colleagues or with your kids while you’re traveling on business… just draw…LINK

Link Thumbnails

Filed under: ux, web design — xocea at 4:30 pm on Saturday, July 22, 2006

thumbnailArc90 Lab has a nice write up on creating thumbnails on mouseover. “A little bit JavaScript, a little bit CSS and a little bit clairvoyance, Link Thumbnail shows users that are about to leave your site exactly where they’re going. When that curious mouse pointer hovers over a link pointing to somewhere outside of your site, the script displays a small image of the destination page. It’s a nice visual cue that serves a very real purpose: providing a clearer picture (no pun intended) of what’s ahead.” LINK

Treehugger

Filed under: Uncategorized, design, news, sustainability — xocea at 4:11 pm on Saturday, July 22, 2006

treehugger blogTreeHugger is a fast-growing web magazine, dedicated to everything that has a modern aesthetic yet is environmentally responsible. Our influential audience stops by frequently to check out the latest news, reviews and recommendations for modern yet green products and services. Consumers also rely on the directory to help facilitate their buying processes. TreeHugger is the most effective way for them to find well designed products that are also ecologically sensitive.

LINK

An Event Apart NYC – Two Days of Design & Code

Filed under: ux, web design — xocea at 10:22 am on Wednesday, July 19, 2006

an event apartI really wish someone would pay my way to web conferences like this one: “Join Tantek Çelik, zefrank, Aaron Gustafson, Jason Santa Maria, Khoi Vinh, Eric Meyer, and Jeffrey Zeldman for two days of design and code in the heart of New York City” LINK to an overview on Tantek.

Don’t Make Me Think: Part 1

Filed under: ux, web design — xocea at 12:48 pm on Thursday, July 6, 2006

Don't Make Me Think : A Common Sense Approach to Web Usability (2nd Edition)

Usability is common sense…explained. I was brushing up on this literary classic recently and decided to condense some of the more memorable points. A return to the basics, if you will.

How We Really Use the Web

Fact of Life #1
Users don’t read the web, we scan it just the way we do a magazine or a newspaper. The goal of the user is to accomplish desired tasks quickly. Users are not under the impression that we need to read everything, and we have plenty of practice scanning other media types before the internet arrived on the scene. Garry Larson has a funny comic about what a dog hears when his or her owner speaks to them. “Blah blah blah blah blah blah ROVER, blah blah blah.” It’s a good metaphore for how the mind works when scanning a bunch of information for a desired goal. Users tend only to see words that relate to the task at hand, or relating to current personal interests.

Fact of Life #2
Users don’t typically choose the best option, we choose the first reasonable option that we encounter. we satisfice. Again, we are usually trying to accomplish a task as quickly as possible, we know that there is little or no penalty to guessing incorrectly, we know that stopping to consider all options may not improve our chances, and guessing can also be fun, or may lead to unexpected benefits. This behavior of course depends somewhat on the user’s level of patience, frame of mind, and the amount of existing trust we have in the site.

Fact of Life #3
We don’t read the instruction manual before we try to muddle through things. Users muddle through for many of the same reasons we satisfice, and when we find something that works we stick to it even if it isn’t efficient or the actual intended use of the tool.

Usability is about helping users “get” it. If a user gets it:

  • There’s a better chance that we will find what we are looking for
  • There’s also an increased chance that we will understand the full range of what the site offers
  • The designer will be able to more easily steer the us to content that he wants us to see
  • We will feel smarter, and more in control of the experience, and will likely return…that is until someone else makes a site down the street that serves the same needs and makes us feel even smarter and more in control

    What Can Be Done?

  • Create a cleat visual heirarchy. The more important an element is the more prominant it should be
  • Elements that are related logically should also be related visually
  • Elements should be nested visually to accurately illustrate what is part of what
  • Take advantage of usage conventions
  • Design layouts that break the page into clearly defined areas
  • Make it self-evident what is clickable
  • Minimize visual noise, – or at least keep it down to a dull roar
  • Keep in mind that users like mindless choices
  • Accommodate for both search-dominant and link-dominant users.
  • Omit needless words religiously
  • I think that’s a good start. In a Part 2 I will cover the second half of the book.