Archive for the ‘Web Design’ Category

Spaces in Between

Sunday, March 23rd, 2008

Spaces In Between ThumbnailThis is sort of a backpost since I didn’t have a blog back then. Last October I was sitting at Peet’s reading Bill Buxton’s Sketching User Experiences and he quoted a book on comics stating how the importance between frames are so important because that is where the reader’s imagination fills in the gaps between the static images. Somehow this idea plus the old problem of digital spaces not having the same sense of orientation as physical spaces led to this idea: why not use transitions to give users a sense of where they are going when they browse the web? Instead of teleporting from page to page, transition animations would whisk the user from one page to another. I decided to go home that instant and quickly build a rough “interactive sketch” that Buxton advocates. I wanted to see what the experience would be like.

While working on it in Flash, I decided to convey relationships by having different animations depending on the relationship between the page the user is currently on and the page the user is about to go to. Drilling down into a hierarchy would zoom in. Moving from one page to another on the same level would move side to side. Moving back up the hierarchy would zoom out. Leaving one site to go to another would fly across cyberspace (cached pages in the browser history) and arrive at the requested site. One thing I didn’t really decide on is whether the back and forward buttons would respect relationships or move from side to side. I included a small site map in the corner that shows the current page’s location in the hierarchy for reference. You can watch it here.

All of this could easily be applied to software or other digital products but I chose to apply it to the web to see what it’d look like. Apple has since, with the release of Leopard, introduced even more communicative animations into the Mac UI. They started pretty early with the cube transition for user switching and genie effect for minimizing, but have added more things like the transitions when using the Spaces feature, going to the next page in Preview, or in Time Machine when going “back in time”. Overall however, few digital products actually use animation effectively today. I’m tired of pointless animations in both AJAX and Flash sites that are purely for boom and sizzle instead of substance.

As a very practical tip, you could try doing this in your presentation with a deck of slides. Only use animations either when switching from one major point to another. Examples include subject changes or in preparation for concluding remarks. This is the same strategy those masters of temporal design use when editing film. Usually, all cuts within the same scene are immediate jump cuts because they go unnoticed and don’t distract the audience. Only at the end of a scene is there something like a fade out. Animation is a powerful tool because movement attracts so much attention from the user. It should be used more to communicate instead of distracting. Hopefully we’ll see more of this as time goes on.

I like big buttons and I can not lie

Thursday, January 24th, 2008

Push the button

Big buttons seem to be popular in the Web 2.0 aesthetic. From my experience, users love big buttons and designers hate them. Why? I’ll postulate on both.

My guess is that users like big buttons because it provides an illusion of simplicity. Part of this has to do with Fitt’s Law since it requires less precision to hit a large target, and the other part has to do with that fact that with bigger buttons you physically can’t place as many of them. It’s probably also the case that psychologically, the bigger the button, the greater the user’s sense of accomplishment upon clicking it. Hmmm. This button is large. It must be powerful and do a lot of work.

Why do designers dislike big buttons? Designers are control freaks that tend to prefer tight layouts that are perfect for a context. (That’s why so many of their heads explode when dealing with digital stuff where the context can shift quickly.) It’s similar to the reason they like small text when users prefer nice large text. The big buttons are harder to fit nicely into a tight looking layout because they stick out like a sore thumb. Plus, they take up more room than is necessary for those efficiency-minded Modernist types. My other theory is that since designers have heightened visual awareness, they notice details even when they are small, and thus big buttons are the equivalent of a screaming baby. Whereas the average user usually isn’t paying particular attention to every visual element (they’re doing whatever they came to a site to do) and wants the screaming element to direct them along.

The following is the deeply insightful IM conversation I had with another designer over the matter:

Dan: what do you think of big buttons?
Ryan: dont really like em
Dan: why? Same reason you like tiny text? (leading question)
Ryan: most of the time they seem too big, not needed. it reminds me of staples commercials. the easy button
Dan: people loved that
Ryan: big huge button
Dan: it was successful as an ad campaign
Ryan: people just want a btn to press and not have to do anything themselves and the bigger that button, the better
Dan: my theory is the satisfaction of pressing a big button for the power plus it also creates an illusion of simplicity
Ryan: what could be more simple than pressing a big button?
Dan: and IT IS easier to press a big target, you don’t have to be as precise
Ryan: yup cant miss it, 90 yr old half blind ppl could do it
Dan: i’m going to post this conversation on the blog
Ryan: don’t you wish there was big giant button that said click here to post this conversation to my blog?
Dan: yea, it would make my life easier
Dan: I wonder how well this sells
Ryan: thats pretty dorky
Dan: i want one
Ryan: it would be cool if it did something
Dan: like launching an app? the doomsday app?
Ryan: anything
Ryan: something
Dan: launches minesweeper
Dan: causes a BSOD
Ryan: at least ejects the usbs

Filtering vs. Searching

Wednesday, January 16th, 2008

I’m revisiting this topic since I’m currently working on a project where I feel filtering is appropriate. Way back around Christmas of 2005, a shoe store web site called went live. It’s owned by Amazon and competes with the likes of Zappos and Shoebuy. The thing that made this site interesting to me wasn’t the shoes they sold. It was the navigation that fascinated me (and the -$5 overnight shipping marketing tactic). uses an AJAX sidebar that lets users filter shoes according to gender, category, brand, color, size, and price range. Keep in mind this was started back when AJAX was just catching on. The filters are composed of UI widgets you can interact with like accordion panes, sliders, and buttons with instant feedback. Click on your shoe size and instantly, the gallery of shoes to the right would disappear and only shoes that were in stock for that particular size would fade in. They’ve made refinements over the past two years. The fade effects are gone, the filters themselves are organized slightly differently, but overall it’s pretty much the same as when it first launched.

Why does filtering work so well for a site like Endless but less so for its parent Amazon? Filtering works for specialized niche sites where users are browsing rather than searching for something specific that they have in mind already.

First, filtering works when the store is selling only a couple classes of products. Amazon sells pretty much everything. Endless only sells shoes. Amazon uses filters for purchasing diamonds but otherwise it would be too overwhelming to use filters to browse its entire catalog. On Endless, the filter options are limited to shoe properties. This is a limited set that can fit in a single sidebar without getting too complicated. On the other hand I have found that the only effective means of browsing a huge department store like Amazon is through following a trail of suggested products.

Second, filters can only be applied to relatively clear and easily defined properties. In other words: objective criteria. You could start applying subjective categories like style but that introduces a bunch of issues. I might filter for “urban” shoes but be presented with options that I don’t feel are urban-looking at all. The only exception is if there’s a pretty clear consensus about something within a community. Something like defining furniture as mid-century modern-esque might work but it’s still a pretty loose criteria. And obviously, not all furniture shoppers are design freaks.

Third, the filters have to be visually located very near the data it is affecting. If the filters are tucked away somewhere, users are unlikely to find them or understand the relationship between the filters and the data. This is why effective filters are usually directly to the left or right of the data or above it. This way, when a user changes a setting, she sees the effect instantaneously on the data.

Finally, the hardest part of designing filters is figuring out what the filter criteria should be. The only way to determine this is to understand how the user thinks and what he would expect either through the designer’s personal experience and/or through research. Part of making these decisions is also what NOT to include. Keep in mind that the point of filtering is not to have the user arrive at one perfect product, job post, or flight. The goal is to present the user with a manageable list of highly relevant options and then let him decide.

I think going forward, we’re going to see a lot more filtering with enabling technologies like AJAX and Flex going mainstream. There’s just so much information being generated each day that search is no longer an adequate means of finding information. Like in education where a student doesn’t always know what she needs to know until she needs to know it, finding information is often the same. We don’t know what we’re looking for all the time. But often we can sense when we are getting closer to finding it. Steve Krug, author of Don’t Make Me Think, calls this sense the “scent of information”. Search isn’t going anywhere, but it’s going to be complemented by things like crowd wisdom and filters depending on the type of information being sifted through.

Several other interesting examples of filters:

Nike Store (adaptive filters change downstream filters depending on selections that come before)

Well-formed data | Elastic Lists demo (Elastic lists or adaptive filtering)