Archive for the ‘Design’ Category

Crash Course Education in Interaction Design

Sunday, March 23rd, 2008

I never had the luxury of a formal education in interaction design or HCI. Sometimes I wish I had majored in HCI, but I wouldn’t have given up my liberal arts degree and study abroad experience for anything. Majoring in Communication at USC let me explore the various fields from cultural theory to pscyhology, sociology, marketing, accounting, and anthropology. I just wanted to learn more about people and culture from all sorts of perspectives so I took whatever sounded interesting. All my technical and web knowledge is pretty much from years of independent study reading lots of books, articles, and blogs. Supplemented, of course, with constant observation/analysis since I was 12 of why certain products or web sites work well or why they are frustrating.

Anyway, because of all that other stuff that got in the way before I found what my calling in life was called (interaction design), I am now trying to catch up as quickly as possible by learning from the experiences of others so I don’t have to make quite as many mistakes that others have already have. I have experience with visual design and video so I have an intuitive sense for color and I know about typography, information hierarchy, and timing. Those have helped a lot so far, but I’ve decided to bite the bullet and register for courses at Cooper and UCLA Extension.

The Interaction Design Practicum at Cooper is an intensive 4-day workshop of the whole process from research to handing off a spec to developers. I need the hands on experience learning from seasoned designers. I also signed up for their 2-day Communicating Design course since that’s pretty much covering the deliverables that most interaction designers produce as well as the even more important aspect of presenting and selling designs to stakeholders. If those go well I’ll probably just continue through all their courses and do their certification program.

The UCLA course, User Experience Design for the Web, is probably going to be very similar since it’s taught by Jeanine Harriman and she used to be at Cooper. However, this course is online over 15 weeks so it’s a much longer engagement. I figure I’ll have to deliver a more substantial product at the end of that class. I also thought of taking a Drawing for Communication course through UCLA, but have decided to hold off so as not to get too overwhelmed balancing class with work. I know the drawing class is going to take a lot of time for practice. I’ll probably take that later this year after blogging about the results of these other classes.

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.

Mac OS Invert Screen Battery Life Tip

Monday, January 28th, 2008

Mac OS Screen Colors Inverted

I was at Colin Moock’s AS3 Tour when I glanced at the guy’s screen next to me. All the colors on the screen were dark. At first I thought he had a custom interface on the app that he had darkened. But then I noticed that when he switched apps it was still all dark and that photos were also inverted. I asked him what was up. Without a word, he motioned to his keyboard ctrl + option + ⌘ + 8. I pressed those keys and my world changed. I now got more battery life on my MacBook Pro when I needed it at the cost of color accuracy. No problem for surfing or blogging. Plus it’s a neat trick even most power Mac users don’t know.

Method Shower Cleaner Spray

Sunday, January 27th, 2008

Method Shower SprayI use Method cleaning products from Target for my day to day maintenance cleaning since it’s supposed to be non-toxic and better for the environment. I applaud the guys who started the company for their success in bringing green cleaning products at affordable prices to the masses. They even encourage less waste by selling bulk refills for their spray bottle products. Since I’ve used their stuff for a couple of years, I know they’ve also experimented a lot with their packaging design. (That’s gotta be pricey when it comes to experimenting with different bottles.) That’s why I was a little surprised that this two bottle system wasn’t designed better.

The goal is to decant liquid from the larger bottle into the spray bottle. The problem is that you either need a funnel or a steady hand to carefully pour from the wide spout into the narrow one on the spray bottle. Inevitably, some of the liquid will probably spill if you opt for the latter method (no pun intended). In all cases, the bottleneck (man they just keep coming) is the smaller of the two.

One idea is to stick something like a dish soap spout on top of the larger bottle. This would probably be the cheapest option since it’s not a custom spout. The downside would be the rate at which it would dispense the replacement liquid. Another idea would be to use a bottle with a spout that is just slightly narrower than that of the spray bottle. My third idea would be some sort of retractable pouring/funneling mechanism built into the cap of the larger bottle. Something like those pour cups built into the caps of liquid detergent except it would flip over and screw on reversibly and allow liquid to pass through.

Maybe this is over-complicating the matter and everybody else has a clean funnel even though I don’t.

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

High-tech fabrics and materials blow my mind

Thursday, January 17th, 2008

Back in high school I briefly flirted with the idea of being a biotechnologist since I find biology interesting. Then I found out that I sucked at chemistry. I didn’t get it because I couldn’t visualize interactions at the atomic level. And so that answered any question of me ever being a scientist or electrical engineer. But all of that only increased my appreciation for scientific advancements and fine engineering because it seems so magical.

That’s why I’ve been so impressed by the fabric and materials technologies that I’ve noticed creeping into products over the past couple of years. Some of my favorites are those used in sports and performance clothing. From the spandex woven into t-shirts and jeans to give it stretch, to running fleeces that are impossibly warm for their weight, to jackets that block wind, repel water like it’s coated with oil, and still breathes at the same time. These all seem to impress me because of their seemingly magical properties.

I think my favorite material has to be bamboo. I remember having backyard fencing matches with my brother Asian style with bamboo stalks. The stuff is supposedly renewable and fast-growing like some miracle weed. None of this really matters if the performance sucks but I’ve found it exceeds cotton and wood in some cases. The NY Times had an article saying bamboo is overdone and bashing bamboo sheets. Apparently the author has never slept in the ridiculously soft bamboo sheets from The Company Store. The bamboo towels they have are also the softest towels I have ever encountered. This stuff is far better than Egyptian cotton. I also tried bamboo towels from CB2 but they came nowhere near.

Bamboo is also useful for things like salad bowls and platters. I like its earthiness, cleanliness, and durability. Case in point for bamboo is the company Bambu. Although I’m wary of bamboo cutting boards since Alton Brown mentioned in his knife episode of Good Eats on the Food Network that bamboo is harder than wood so it dulls knives more quickly than hardwoods. Eh. This stuff is still the best thing since…bent plywood.

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)