eFishDesign

The Bottom-Up Approach to Design

Sun, Nov 09 2008 14:25:20 EST

There are two approaches to take when designing an interface: bottom-up and top-down.

In top-down, you first consider what the user needs are. Take a long and broad look at all the people in the world who could potentially use your product and figure out what features and components they would like as well as what workflow would best suit them. This I call "top-down" because you start with a large audience and narrow it down. This methodology can be alright if you have no idea what you want to do and you want to start by solving some existing problem.

The opposite approach (the one I subscribe to), however, is to start by first understanding what you're actually building. What your product *is* and what it *does* are two different things. When I talk about product design with various developers, I always ask them to first tell me what their product is. Their initial response is something to the effect of "well it does this and this and this." It's important to figure out what the core value of the product is before going forth. Understanding this will make it a lot easier thereafter making design decisions because they all must relate back to the essence.

Think of concentric circles. The core is the very essence of the product - what it is. The second ring is capabilities - what the product does. The third and final ring is context - how the product will be used.

In this visualization, you can imagine bottom-up as also being "outward" whereas top-down is "inward."

The difference between the two approaches is illustrated in the fact that when solutions are reached, there is a gap between them. The solution reached from the bottom-up approach is usually simpler because it started from something as simple as possible. Conversely, starting from the top-down will end up with something more complex because the starting point was much broader.

Yes, I know I'm not really giving too many specifics, but I want to make sure I don't reveal too much from what I'm privately writing. I just wanted to call attention to this idea. I suppose both methods have their good and bad points, but I think there are many more ways something can go wrong if you start on the top.

Usability Testing is Limited

Mon, Sep 22 2008 14:01:24 EDT

"Usability Testing" seems like one of those buzzwords you use to impress clients. It's supposed to show you did research to come up with the interface results you did. But in my opinion, usability testing can go so far and I tend not to rely on it for designing a UI.

Usability studies test for efficiency in the form of timing and key strokes. What it doesn't test for is an emotional response. It's not enough to simply measure "how many clicks does it take to get to the center of a tootsie pop." And further, it's certainly not enough to ask people what they think. For the most part, people don't know what they want, so it's not enough to simply rely on their thoughts when asked about their experience with a given product. In fact, it's more likely that they will inadequately explain their thoughts (or perhaps even make up some) because they're happy to feel included in the design process.

While Apple doesn't do user testing, Microsoft bases all its UI decisions from in-depth, long-term studies. The whole idea behind its new Fluent interface for Office was to analyze the user workflow and figure out which buttons should be placed together and how all the tabs should be organized to increase efficiency. The problem here is that they're using collected data to assume the way a user will work, and it's just not always accurate.

Conversely, Apple provides an objective approach to design, having hired hundreds of super-qualified designers who understand the human mental model, user-centric design and art principles. As a result, their interfaces don't make any assumptions of the user workflow; instead, they provide a logical and objective organization of the various buttons to mimic what we'd expect to see in the real world. If you deconstruct it, you really can't argue with its foundation.

This isn't to say that *all* user testing is bad, but it's essential to keep in mind that it's not enough off which to base a design decision. You won't be any closer to understanding human psychology unless you've studied the principles of it yourself and have experimented in their application to design.

Design is objective. Aesthetics are personal. And what you basically get from asking a lot of people their thoughts on using a product is, well, a bunch of aesthetic opinions.

So, don't assume the way a user will work. Sometimes more clicks are better when the process is logical! Usability is not about measuring efficiency. It's about addressing a user's *real needs* and providing a logical toolset to help them achieve their goals.

More of this to come when I finish my book.........

Transparent Technology

Sat, Aug 30 2008 23:26:06 EDT

Some people may claim that Microsoft is a tech company that focuses on technology that's never been done before. I might agree. Apple's core value is "innovation" but to me, it's innovation on the user experience front. We've seen touch-screens before, but not like the iPhone. We've seen personal computers before, but not like the iMac. In their case, Apple spends its time tweaking existing technologies to make it so easy for the user that it's like magic. "It just works," is the common sentiment on Apple products.

My thinking:

The most advanced technology doesn't matter if it's not transparent to the user.

My goal in working with technology is not to simply create things that haven't been made before. Big deal. I mean sure, it's challenging, but what's more challenging is making it usable. If the end user can't use it, then it's worthless in my mind. Instead, I'd rather take existing technologies and make them better by improving the user experience.

Give me a blank piece of paper and a pencil and tell me to design something and I will probably draw blanks (no pun intended). But give me something pre-existing and ask me how to fix it and I can give you endless advice. As much as I enjoy creating things myself, I've found in my experience that I much more enjoy re-creating things that have existed before but done in a more user-friendly way.

Customization and Design Integrity

Tue, Aug 26 2008 02:12:28 EDT

I was thinking about some of the fundamental differences between Microsoft and Apple (and there are many) and thought of a nifty analogy.

One of the basic differences between the two platforms is that Windows is a completely customizable OS, especially popular with tech nerds who want to fiddle with everything. On the flip side, Apple doesn't allow for a lot of customization, often in fact making it super difficult to do anything other than what they prescribe. To the Microsoft techies, this is a giant con and the complaints we hear are often to the tune of "I don't like Apple because I can't do X or can't use Y."

But by allowing total control of the interface on Windows, it's super easy to lose design integrity. That is, when your average user has a lot of design control, they often do what they think is "cool" and are often wrong in the eyes of most people. Hence why so many people complain about Microsoft interfaces versus Apple. Because Apple controls everything, it is able to keep things always simple while Microsoft allows for a multitude of features which overcomplicates everything.

We see this exact same paradigm in the web today with the rivalry between MySpace and Facebook. Here are two very popular social networks, one of which (MySpace) has WAY more users than the other. In this situation, Microsoft is the MySpace of software while Apple is Facebook. MySpace allows for total customization of your profile page and has a lot of problems with all sorts of spam. Facebook, on the other hand, controls its environment, with VERY limited profile customization and very limited ad space.

Word on the street for MySpace is that it's poorly designed, looks ugly, is too complicated, is too spammy, etc. And it's true - BUT it allows for the most customization - like Microsoft - and was around way before Facebook - like Microsoft. Consequently we have way more users. The majority of people like to create their own working environments, usually because they like feeling creative and having control of their life. So as much as I dislike the way MySpace looks, it's actually a good platform for these sorts of people (the majority).

But there's a way to allow for creative control and still maintain design and brand integrity. Surely Apple could loosen its grip on several of its products - but then it would lose its essence of being a company who cares about design in every little thing it does. Microsoft could tighten up creative control but then it would have to instill some sort of self-branding - which it lacks - and it would also anger all those tech nerds who grew up taking apart PCs.

We've come very far in computing in the last 28 years and whether it's software or the new-fangled Internet, we still see the separation between total control and minimal. I think this is just the way it's always going to be.

The Art of Presentation

Fri, Aug 22 2008 17:15:08 EDT

I've seen and done a lot of presentations in my five+ years in the "user experience" industry and I get it. After teaching lectures to all sorts of students and then teaching at Apple to external developers and internal employees, you learn a few key things that most everyone is missing.

People tend to be quick to blame the tools when a bad presentation is given. But following the right guidelines, even PowerPoint can look amazing ;-)

1. Tell a Story

Whether you think so or not, your presentation is a story about whatever subject you�re presenting. The best storytellers keep the story universally understandable by describing things simply and not delving into too much detail, which could, potentially, be irrelevant. Realize what the core of your presentation is and work from there.

When you�re writing the script for your presentation, make sure it�s in story form. People will listen easier when there�s a story involved. Whether it�s a �step by step� process or recalling an actual story from your life, it�s always helpful. Standing in front of an audience and presenting a bunch of statistics is useless. You�ve got to capture the audience�s attention so that when you reveal stuff, they�re already emotionally invested. If Steve Jobs had just introduced the iPhone at the beginning of his January �07 keynote without leading up to it, the reaction would not have been close to what it was.

2. Make it Visual

Don�t make your slides full of words. Just don�t do it! That doesn�t mean go the opposite way and put no words in. No, it�s got to be a healthy balance. You should be able to give your presentation *without* slides and still be compelling and interesting. The point of the slides is not to display what you�re saying but rather to enhance it through emphasizing specific points and providing visual illustrations. If you�re going to have text on a slide, keep it minimal � a few words at most. Really spend time on the visual quality by creating nice graphics to support your talk.

If you think statistics help, for example, create a visually interesting graph or animation. Don�t just pull some random chart from the Internet and paste it in � it will look awful.

When you�re in front of an audience talking, they�re listening to you subconsciously while they watch your presentation. People are visual creatures, so any visual stimuli will come first. This is why you need to include bullet points. As you speak, you are essentially telling a story, weaving between the specific points you want to emphasize. By calling attention to these words or phrases in your presentation, you�re drilling it into the audience�s heads � they hear it and see it, which creates the relation in their memory.

3. Know Your Transitions

When you�re standing up in front of lots of people, it�s easy to forget your train of thought. Make sure you keep track of which slides come after each other so that you can direct your talk and smoothly segue between topics. It�s okay if you don�t have the entire slide deck memorized. But if you know what comes after a given slide, you can add a few sentences in your speech that will make the transition easier. Nothing�s more jarring in a presentation than a seemingly irrelevant jump between topics.

And of course, don�t use too many transition effects. Both PowerPoint and Keynote have have a lot of fun stuff, but you can�t use them all! Pick two or three and determine what their meaning is. For example, you could use a cube transition to signal transitioning between large topics while you could use dissolve to signal transitions between subtopics. Too many different transitions hurt the focus and quality of your presentation. Remember, you�re telling a story, so it�s got to be smooth.

4. Cut Out Extras

Seriously, after the first draft of your presentation, you�ll have a whole bunch of stuff that�s just unnecessary. Don�t be afraid to just cut that out entirely. Make the time you�re on stage as interesting and relevant as possible without adding filler information. Weed out whatever information isn�t critical to your point.

5. Practice!

Having a story in mind helps you remember your presentation better. In fact, if you know the basic story idea, you don�t really need to practice as much, if you�re good at improv. Nevertheless, the more you run through your deck � even if it�s just reading slide-by-slide in your head � the better you will have an idea of its structure. You�ll notice that some parts are super easy to get through while others are harder. Get those easy parts down and it won�t be as nerve-wracking when you get up there. And if you do forget some stuff, it�s okay to glance at the computer or the screen. It�s better to do that than to try to fill the void by talking about something irrelevant or overly detailed.

Staying Current with a Portfolio Site

Fri, Aug 22 2008 14:04:11 EDT

Website designers tend to be obsessed with redesigning their own websites all the time. It's nothing unusual - we're just trying to stay current, not necessarily with web trends, but more our own design style. After all, our websites *are* us virtually, so it's important that they reflect who we are and what our design preferences are.

It's funny, but even after you spent hours on version 3.2, which you were quite satisfied with originally, a couple months roll by and suddenly now you feel the need to change everything: the colors, the fonts, the words, etc. and come out with version 4. But redoing the website shouldn't necessarily be about those surface things - it should be about the underlying concept. Are you changing your target audience? Are you marketing yourself differently? What's at the core?

Your Concept

If it's not already clear, you should ensure that your site presents a story about you, either through words or pictures or both. Sure, throwing up a bunch of random pictures and artwork will tell anyone you're a well-rounded artist...but is that the real message you want to convey?

For me, I want my audience to know that I'm a good storyteller in whatever form of media I choose. A large portfolio of various artwork only makes sense here when I can explain the story behind each piece, evincing strategic design skills and not just graphic design.

Before even considering a redesign, you should form a one-sentence high-concept description of what you're creating and what your theme is. It's usually very hard - I don't even know if I have it down. But every design decision you make from there on should work with your theme. Give your audience a "six-second pitch" and make them understand from the moment they get to your homepage who are you and what you're about.

As I've mentioned before, good design is visual appeal + underlying concept. It's fairly easy to make a website that looks pretty. It's much harder to make it fused together with some theme or core idea.

Your Content

If you've got a bunch of stuff to display, you've got to categorize. People often split into "traditional artwork" or "websites" etc. which is fine. But you may end up with too many topics, which can detract from your theme. Yes, you're a designer, but what does that *mean* to you? To your audience?

For a long time, I didn't focus my "design campaign" and was getting offers for jobs I didn't want to do - web programming and the like. And I realized that by not focusing my presentation on what I wanted to do, people were reading about the engineering feats and responding to that only. My goal was really to show that I'm a designer who also understands the functionality side.

Your presentation is the voice of your concept. Every piece of information or image that your audience sees should be linked to your story or theme somehow. And sometimes you may just have to refrain from showing certain art pieces because they don't fit in. That's okay - you don't have to show everything.

~~

This is not, of course, the end all. If you create a perfect website, it won't last. Knowing your audience and the industry is how you got here now. But it's ever changing and your site will too. That's what keeps you in the game :)

The Relationship With Design

Sat, Jul 05 2008 19:56:27 EDT

When I tell people I'm a designer, their initial reaction is that I make things look pretty, which is entirely inaccurate. In fact, I don't do that at all. I mean sure, I can make pretty layouts and interfaces, but design goes way beyond that.

Design has its roots in psychology, which, in turn has its roots in biology (which one might argue is essentially math). So design is not about aesthetics but rather a deeper understanding of the human condition and the way we go about the world.

The relationship between a user and something that has been designed is much like any relationship you'd see person to person. Think about how you go about forming a relationship with someone and you start to see the parallels.

Step 1: Sensory Encounter

When you first meet someone, you can only judge based on physical appearance and/or sound. That is, you can see what they look like as well as how they speak. Your sensory input is primarily through your eyes and ears (although the nose may play a role, depending on if the person you've just met is clean or not). Nevertheless, you have a sense of the person, surface-level only.

This is quite similar to the initial sensation you would get from looking at a product or interface. Your first line of judgment is purely physical and sensory. Does it look good? sound good? smell good? taste good? feel good? These are the judgments you unconsciously or consciously make and these affect your first impression and whether or not you continue to explore or back off.

Step 2: The Interaction

When you start speaking to a person, regardless of your previous impressions, you begin to build an interaction with them. The interaction can depend on a variety of things, especially the behavior of others. Over time you will no doubt characterize the person by applying a variety of personality traits such as being nice, funny, sarcastic, etc. These things, of course, may not have been evident in your initial sensory stage.

And like how these things evolve over time as interaction progresses, so can your experience with a product as you spend time using it. Is it fun to use? Easy to use? Helpful? Useful? Do you feel good using it? Etc. And if you may have had one judgment call on the sensory stage, this interaction phase can alter it for the worse or better. If something looks bad and is hard to use, this is most likely where you'll call it quits. On the other hand, if it looks great but is hard to use, or the reverse, you need more information to make a firm decision.

Step 3: The Strategy

Behind any well-thought-out decision is a core concept or set of concepts; a soul. And this part may not ever be noticed by the end user, though it essentially drives everything else about the product. My friend Demian describes the idea as the soul (strategy/concept) driving the brains (functionality/interaction) which drives the voice (interaction/visual).

As humans - or just any semi-intelligent lifeform - we seek to identify, classify and define. That's just the nature of life. And so in everything we do as we interact with the world and learn new things, we're constantly following this path from surface to strategy, forming opinions and definitions along the way in order to gain a fundamental understanding of what something is.

That is the psychology. That is design.

The Pitfalls of Site Re-Launching Alone

Sun, Apr 06 2008 21:29:18 EDT

Last week I launched a revamp of my site, OneUpMe.com which I spent most of the previous weekend re-coding.

I don't have a team of developers and designers to make sure everything goes according to plan, and as such I've noticed a few things over the last week as the site debuted that should be noted:

For one, when launching a redesign of a site, it's imperative to include all the same features that a previous version had (or at least include a note somewhere saying what you removed and why). Sometimes you don't realize which features are popular and which aren't until you forget to include one and get negative feedback.

For another, having someone always around to respond to bugs and other minor tweaks is necessary. In the rush of trying to get a new version out the door, it's easy to forget things here and there. Now normally, on a larger team of people, there would be extensive testing before a launch - but when you're one person working alone, you can't always spot the bugs yourself. Best thing to do is launch it with a note saying you're still working and be extremely quick to respond to feedback.

Sometimes it amazes me how much code is involved in making the simplest of features. It's not so much the base functionality - it's the whole user experience that requires a lot of code. For example, AJAX-y forms with email notification and an administration panel on login to manage what was submitted are all UX features of one main feature. It would be easy to add something into the database - but building the interaction components around it is really what takes the most time. Of course, once you finish that, you'll find that it makes a big difference as you use the feature later on.

Additionally, because as a sole developer there's no team to bounce ideas off of, it can be dangerous to assume anything on your own. The best way to counteract this is to ask friends and users of your existing site. Be receptive to negative feedback - if you admit uncertainty to begin with, it shouldn't be a problem.

I'm certainly looking forward to working with a group of people on product launches in the future and no longer having to be the sole provider.

Web 2.0 Ridiculousness

Wed, Apr 02 2008 01:05:46 EDT

So what's the deal with these web 2.0 names? All the good, reasonable ones were taken so it seems we've resorted to making up words.
Hulu, Joost, Gabbr, Ookles, Zoho...

It's like someone just put up a dartboard of letters and told his team to just throw darts.
"We'll name our site at the word you end up making."
"But what if it's not a word?"
"You're fired."
And then people just start throwing darts.

"Ted, what've you got?"
"I've got Joomla."
"Oh dude, is that contagious??"
"No no, that's the name for a website."

"John, what'd you come up with?"
"Well, I got flicker...but without the r."
"That's ok. We don't have time to correct our spelling. Let's just get our site up there!"

That's the other thing. So many 2.0 site names are just simply misspellings - mostly forgetting the "e" when the end is "er." Should we just alter the English language? Is that supposed to be cool?

Gabbr.com. It's not Gabber with an e. It's cooler.
Wondir.com. It's a wonder they think this makes sense.
Frappr, talkr, flagr, Gtalkr, browsr, tumblr (sigh).

Additionally, other words are just lame.
Skype, skobee, slawesome, mabber, mologogo, goowy, diigo, rollyo, jambo, zooomr (three o's??). Where do they come up with these?

Actually, I heard that a few sites are now hiring babies to come up with their domain names. I think they pay well too - like $100K. Suddenly babies' first words are actually million-dollar ideas!

And in case you don't understand these names, other sites have opted to tell you exactly what you do on their site by including you in their names. YouTube. MySpace. YouSendIt. ISpott. MyBlogLog. MyProgs. IOweYou. MeFeedia. I mean, if I go to your online profile, why is MySpace your space?

Some site names are just patronizing. Are we that stupid? Prosper, RateItAll, GiveMeaning, MailBigFile, LibraryThing. Come on now.

Others are just odd. Plurn. Pando. Riya. Yedda.

Seriously. You want a good web 2.0 name? Write down every letter of the alphabet three times, putting each letter on its own index card. Now throw this pile on the floor and pick a random number of cards in any order. There's your domain name. I don't care what it is, you can use it.

Oh, and the more vowels you can take out, the better. Let's write this Hebrew style.

But seriously...
On the design side, 2.0 is a wave of design changes that aim at providing more user-friendly interfaces. This includes larger fonts, bright colors and gradients. Almost ALL web 2.0 logos consist of their name written in some kind of fat, gradient, colorful font. As much as this causes a definite generality and loss of individualism with all 2.0 sites (as in, you can tell right away if a site is 2.0 based on its look), at least you can be sure of one thing: it's probably easy to use.

And about these 2.0 forms. They're so heavily AJAXed and Javascripted that everytime you move from one input to another, the site makes sure you know what you're typing either by highlighting the input in a colorful box or putting a checkmark next to it as you type so you know what exactly you're doing. Well you know what? I'd like to make a passive-aggressive site with a registration full of blank inputs that just says "Guess."

Come on though. Everytime I go to a site that's got these grayed-out stripes and bright colors and gradients, I just find myself getting annoyed.

And the worst part is, these made-up words have seeped into our daily conversation. We now "facebook." We "skype." We check out peoples' "myspaces." We flickr.

Face it, we do. We flickr hard.

As if it wasn't already hard enough for our parents to understand what goes on in our lives, now even if we decide to talk, they won't get it.

I told my Mom to check out my photos on flickr. She went to the site and said there wasn't anything there.
"It's spelled without an e" I said.
"Without an e? Do they know they spelled it wrong?"

My Dad was barely learning how to use his new Mac when I told him that I poked this girl on Facebook who then friended me and wrote on my wall.
He said, "what does that all MEAN??"

I think the only good thing that can come out of this is that my professors don't know all the 2.0 names that exist and I can use it as an excuse not to come to class. I mean, having the Flu these days just sounds boring and made-up. I think I'd get a lot more attention and leeway if I had Zorpia.

Good Design = Concept + Visual Appeal

Tue, Apr 01 2008 22:49:04 EDT

Okay, I'm going to amend a post I made a couple days ago on "Understanding Typeface Meaning."

In this post, I said that I felt that learning art history (as far as design goes) would only separate myself from the average person as I design more. I also said that I've seen some artwork that's supposed to be really historically important conceptually and I don't get it because I don't like the visual appeal.

Well, I think I've figured it out.

It's my opinion that designs are made of two fundamental components: the concept on which it is based and the overall visual appeal. Personally, I find most art to be purely conceptual and generally hard to understand. I look at the world from a visual mindset. Some art obviously is good-looking, but there's plenty of esoteric art out there that I don't like but other people love because of its concept and not its visual appeal.

I guess my concern beforehand was that if I were to focus solely on the concept of a design rather than the visual appeal, that I might end up with something that isn't visually pleasing and cut out half my audience. What I failed to realize is that good design is about success in both areas. Having a design that's visually appealing is, of course, very good. But if you can do this while maintaining some underlying concept, then your design becomes that much better. Why only do half of something?

I think the best analogy to this is looking at a popular comedic TV show like The Simpsons or Family Guy. The shows' episodes frequently allude to things in the real world which you'd have to understand in order for the jokes to be funny. As a worldly viewer, the shows become that much funnier when you understand the meaning behind an inside joke. However even if you don't understand the references, the shows are still funny. They succeed in pleasing both a general audience and a smaller, more well-read audience. This is what good design should do.

When I talk about "designing for the average person" I really am being somewhat shallow, in a sense, because even if something looks very good, it may not have any reason. And though this is usually fine if I'm attracting a broad audience, sometimes it's important I have both components and some concept.

In fact, it's really easy to come up with a design that looks good. That just uses all the design principles and techniques that I've outlined in previous posts: color scheme, layout, typography, etc. It's much harder to make illustrating a concept good. Lots of times I'll come up with an interesting idea but have a lot of trouble trying to illustrate it decently.

This is the challenge of a good designer: making something that has a broad appeal but also has some depth and meaning.

OneUpMe Reloaded

Mon, Mar 31 2008 09:06:50 EDT

OneUpMe.com has been completely revamped. No longer can the system handle only one game. Users can now create and manage their own games. The rules and game frequency/hours are up to the creator but the basic OneUpMe format is a one-to-many topic-to-posts structure.

At each game, a new topic gets displayed on the game's main page. Users can respond to the topic according to the rules. The game only allows posting during the hours of operation, specified by the game creator. Additionally, each game includes an archives page to view past posts and a forum to allow for discussion.

The new site took three days to make and I'm not gonna lie, it's probably going to take much more than that to iron out any kinks and fix issues.

Check it out at OneUpMe.com!

Understanding Typeface Meaning

Fri, Mar 28 2008 15:19:26 EDT

Is understanding the history and meaning of typographic choices necessary? While I do agree that understanding the history behind typography and typefaces to utilize knowledge of its origins and essence in design, it's unfortunately the case (at least it seems to be, to me) that the majority of the world won't understand what you, as the designer, will. This is not to say that you're necessary designing for the broader public, but the group of people in the world who will understand your work at a deep, meaningful level is small in comparison.

As a designer, I think I like to design for the broader audience rather than a small subset. I've often found that when I put a lot of time and effort into something esoteric, it doesn't quite work to my advantage. People tend to focus on the overly obvious. In the case my book cover, no one who looks at it is going to know that each letter has a font that was created chronologically after the font of the letter before it. But they *should* after just a glimpse see that the title is composed of different fonts and that's supposed to mean something.

I'm not saying that just because of that generality that I shouldn't try something deeper, but in my several years of designing, I've noticed that the majority of people just don't see the world the way I do - and it's frustrating. I've been using typography since I was a little kid because my mom is a publisher. Having been passionate about the written word and typography since she was my age, she eventually started a business in our house and I was thrown amidst page layouts, fonts, typewriters and computers, copy machines, paper and stamps. Since then I've had a fascination with creating visual layout designs that depend on typography.

Now, I'm not claiming that my design interest is built on a foundation of understanding that Futura, for example, was created in 1928 and inspired by the streamlined geometric forms that followed the retro style of the 1920s (which is, coincidentally, my favorite decade). And even though I actually am interested in learning about typographical history to that end, I feel like it will only separate myself further from the general public in my design - perhaps to a point where no one will understand my style (and that's what I'm afraid of).

Don't get the impression that I'm "afraid to learn" because that's not what I mean. I'm happy to learn about things - in fact I love learning about things I'm interested in. But when a design is supposed to make sense only because of its background and origins, that's just not enough for me. I've seen plenty of artwork and designs that I really don't like but are supposed to be really important and novel because of their undertones. And I just don't care; it doesn't enhance the design for me. If I don't get it, I don't get it.

When Steve Jobs picked Myriad as Apple's new corporate font in 2002, he didn't pick it because of its "history." In fact, it really has no history - it was created for Adobe in the early 1990s. He picked it because of its humanistic, modern and friendly quality that he probably thought the majority of consumers would gravitate to. Had he picked some older font due to its specific history and meaning at the time of its creation in relation to the world's history and not simply because "it looked nice", it's probable people would not like it as much. And yet, it's well-known that Apple is big on typography, ever since Steve took a random calligraphy course at Reed college before he dropped out.

Of course now we get into this duality of "art for the sake of art" or "art for the sake of functionality." And you could argue either way. I guess in that context, I design for the sake of functionality. If something does what I need it to and it's understandable to many, then I consider it a better choice than something which has so many underlying, hidden meaning that the form outweighs the function.

User Experience design is all about understanding what designs work best for the end user - and that takes into account not only ideas of design and functionality, but psychology as well. I've got to think of how a design will be perceived by your average person before I go any further with deeper meaning.

New Site Design

Tue, Mar 18 2008 01:15:57 EDT

So, I redid my website. Why? A few reasons.

Color.
The older site had just a bit too much color - between the header and all the various images of my websites and icons, it was too much. There wasn't a cohesive palette, which hopefully there is now. I went with a very modern, gray/blue color scheme. There's a hint of a gradient at the top of the page and then a blue highlight in the left sidebar.

Layout
Three columns is not always necessary except for pages where there's actually a lot of content to display (i.e. the blog). So I removed that from the homepage and decided to create a blog tag cloud and project snapshot in the left sidebar, which helps give a more interesting overview of popular posting categories and recent projects.

Blog
In the blog, I decided that scrolling through the entire length of every post is kinda painful. So I limited the amount of text being displayed to whatever the nearest line break is after 500 characters. That way, you can peruse several posts at once without having to scroll a lot. Additionally, I included icon-based DIVs that link to comments and the actual blog post. These icon divs are also used on the homepage, so it adds to a cohesive design.

I also slightly changed the link style on the left by adding bullet icons (to match the icon divs) and created a search form so you can search all of the blog posts. The words you searched for are highlighted in the search results.

Ooh - you'll also note that as you scroll down the page, the left sidebar moves with you. No, this isn't a fixed div - it's a little bit of Javascript that updates the div's position as you scroll.

Header
I keep playing around with logo ideas. I had to change it this time to match with the new decor, and I figured I'd go with a sleek font choice of Geo Sans Light followed by a newer, more sharp logo of the fishies. It's also clickable and will take you back to the homepage.

I also simplified the top links - they have a black bottom border (wow, alliteration) rather than regular text-decoration. Makes it more pronounced I think.

Anywho. Please feel free to leave comments or suggestions. I'm always open to design critiques!

An AJAX Restaurant

Sat, Mar 15 2008 04:24:52 EDT

I was putting together a little presentation talking about what AJAX is and why it's useful and I was trying to think of some kind of real-world analogy to explain the benefits. I came up with the interactions you have at a restaurant between the customer and the chef.

If we have a website that only uses HTML and PHP, then we constantly have to refresh the page everytime we want to perform any action, however simple (i.e. deleting a blog post, displaying something different, submitting a form, etc.). While sometimes this is necessary for large amounts of data, it's generally a pain for the user if he/she has to sit through a page refresh to perform a simple operation.

When we go to a restaurant, we don't constantly get up from our table, walk into the kitchen, get our food and bring it back to our table. No, instead we let the chef and the waiter handle all the behind-the-scenes processing for us while we sit idle and talk or read the placemat or unscrew the salt shaker.

In case it's not obvious, we as the customer are the HTML. The kitchen and the chef is the PHP. The waiter, in this scenario, serves as our Javascript/AJAX component. He is responsible for going back and forth between us and the kitchen to bring us food and give us feedback while we remain seated. In the same way that much of Javascript's functionality doesn't even need to use AJAX and interact with the server, so does our waiter in not necessarily needing to go to the kitchen for every little thing (like bringing us coffee or an extra spoon or a cup of milk for our coffee).

While we wait for our food, we have the ability to ask the waiter for an update. Likewise, the waiter can also periodically check up on us as we go through our meal to ensure things are going well. These interactions don't require us to wait for anything - we can simply call the waiter over and ask.

When we send an AJAX call to a PHP page via Javascript, we are essentially calling a page reload on a PORTION of our page. By doing this, not only do we not have to sit through a potentially lengthy page refresh, but we can look at other things on the page while we wait. Additionally, because Javascript has the ability to alter the HTML in real-time, we can get feedback on how the process is going, either by being displayed a simple ajax loading animated gif or some kind of text display.

It's imperative along the user experience that we avoid confusion and continually allowing for feedback and keeping the page content displaying is a key way to keep users happy. And being that it's not actually a restaurant, you don't even have to leave a tip!

Interaction Design: A Visual Command Line

Thu, Feb 28 2008 20:45:13 EST

Code is essentially comprised of a bunch of functions that achieve some task. In the old days of computers, users would utilize these functions by typing something in some kind of command line. Even these days when writing programs, users can "interact" with them by simply writing function calls like the following:



&gt; Cat c = new Cat("Muffin");

&gt; c.meow()

&gt; int x = c.calculateExponent(4,7);

In a visual design class, people create some form of static artwork (graphic design, drawing, painting, photography, etc.). In these cases, we are able to simply look at the final product, though we can't interact with it necessarily. There are plenty of design principles when it comes to layout - and in a sense, you would "interact" with a magazine based on its layout. Still, there's a limit to what choices the user can make. For instance, the user can't contribute anything to the magazine as though it were a public forum. Likewise, the user can't comment on an article in real-time nor can he/she add photos and whatnot.

Enter technological interaction design - a way for us combine the interactivity associated with command-line interaction with the visual designs we see around the world. Websites have, by far, the closest relationship between code and visual design. Yes, there plenty of elements of visual design in software, but websites are essentially a virtual piece of paper with all the same abilities that print design have and one extra component of interactivity.

Webpages are called "pages" for a reason. That terminology isn't used in software. We have the ability to print text and images just like we could in a newspaper, magazine or flyer. But whereas a poster you might see on a wall somewhere is static, we can now include users in our technology, allowing them to add to it, shape it, use it.

So when we design for a website, the functionality is more of a given. Everyone can write code. The focus is on how the code gets executed and the experience the user gets when interacting with it. This is interaction design - fusing visual design with coding functionality and defining how the two relate to each other and to the user.

Formatting File Names

Tue, Feb 26 2008 04:00:51 EST

In case you don't do this already, I wanted to point out the advantages of using some kind of format for naming all your files (or at least the images).

It can easily become confusing to remember what you named your images when you've uploaded dozens to your site. So when this becomes the case, you may find it useful development-wise to come up with some kind of format for naming your images. Perhaps all start with a unique name followed by an underscore and some other keyword, etc.

On my social-networking sites, user-uploaded images are usually in the format of photoID_userID_albumID or something. Similarly, website images on my site are labeled with an extension of "_sm" for the smaller versions. In this way, I can create a loop to run through an array of image names, simply appending the "_sm" extension if I want to show the smaller version. Also ensure you use the same filetypes (don't make some jpgs and others gifs unless there's a good reason!).

This filename formatting allows for easier development because if multiple files have similar names, you can program more generically, which means if you add more images, you don't have to change your code. For example, if all your icon files start with "icon_", you can quickly find them in your directory and search for them in your code. Standardizing your image names greatly reduces time and increases efficiency in your coding.

Additionally, if you're coding generically already, think about creating a PHP array on your page to store information about a picture. Adding an "alt" and "title" attributes to your image tag can greatly enhance their presence on search engines.

Just a recommendation :^)

Developing Tools For Specific Audiences

Mon, Feb 25 2008 22:38:45 EST

Our fundamental goal in creating software or web applications is to provide a useful tool for people that allows them to do something. Word lets us make documents, iTunes lets us organize and listen to music, Photoshop allows us to make images, etc.

Not only do these applications improve upon old-word, non-technological practices (such as no longer cutting and pasting images together to make a collage or having to redo an entire document page upon finding a mistake), but they also create new behaviors that we wouldn't have been able to do before.

I'd like to separate out the different types of tools that exist, however, into a few different groups. Clearly we have the tools that exist for the everyday user, but we also have advanced tools for people already passionate and skilled in a specific area and furthermore, we have tools to help make other tools.

Look at the difference between MS Paint and Adobe Photoshop. Of course the latter has much more extensive functionality, however you have to understand the program to be able to use it to its full potential. It doesn't "help you out" at all - it just gives you the power.

Look at any of Apple's iLife applications, meant to empower the everyday user to design great things. In this set of tools, we provide templates and guides that make the users feel as though they are good at design without actually knowing anything.

Additionally, the tools that help create tools exist to speed up the development process and provide help in areas that may otherwise require more time and people. Dreamweaver, for example, though it can be used in strictly development mode, allows for a design view for people who don't understand HTML that well. Even though I dislike the design tab, some may argue it's a useful tool. Other development tools like Eclipse or Coda provide useful features to developers. These, of course, are strictly meant for people who know what they're doing - not who are just playing around like with iWeb or iPhoto.

So, in our continual development of software/web "tools" we should really consider our target audiences and classify them in these various "shells."

Shell 1: CORE a small group of core users who have a specific skill set, passion and set of needs to be satisfied. This might be perhaps a handful of lighting developers at Pixar who need a special software to work between several customized applications and accomplish specific tasks. Example: Pixar's Renderman.

Shell 2: COMMITTED a larger group of users who share a standard set of needs but less specific. This would be a group of developers in a specific language, maybe. It's not important what their task is - just that they all are committed to something specific, doing fairly similar things and have specific skill sets. Example: Adobe Photoshop or Dreamweaver.

Shell 3: CONGREGATION a broader audience with a specific interest, such as artists vs. business people vs. developers vs. writers. Instead of focusing on very specific functionality, your software has to understand a general need that a group of people could use in a variety of ways. Example: Microsoft Excel or Powerpoint.

Shell 4: CROWD everyone else - tools that could be useful to any average person. Example: Apple iTunes or Mail.

This is not to say that if your target audience falls into a broad shell that you can't allow for specific functionality within your application. Just don't make it the primary focus if the majority of your audience is using your application for general purposes.

So decide in your development stage what kind of "tool" you're making. This fundamental decision affects your interaction design, UI design, marketing, etc.

The iPhone and Social Networking

Sun, Feb 24 2008 08:57:39 EST

Because of the versatility of the iPhone - email, web-browsing, photos, YouTube, contact information, to-do lists, etc. we now have the ability to have everything we need at our fingertips as we walk around the world.

However, although we can view websites with the iPhone just as we would on a computer, and although there have been websites specially made for iPhones to allow for better interactivity, we're lacking on the social-networking end.

It seems reasonable that with such a highly portable device that's always connected to the Internet, that we could devise a system whereby social-networking, currently strictly in an online zone from one computer screen to another, transitions into the real world as a fusion of the Internet and reality.

Social Networking is about connecting people through the Internet in a multitude of ways: blogs, photos, videos, profile information, etc. But how do we take these ideas to the mobile platform?

Currently, the iPhone is really nothing more than a simpler and portable version of your Mac. All the programs like Mail, Calendar, Notes, etc. sync to your computer so that you can essentially take all the important stuff on your Mac with you when you leave (without having to carry around a laptop). But I think that we're forgetting the potential that having a mini-computer mobile device with fast online capabilities has.

Consider an idea that was mentioned at the Apple Intern Contest over the summer that I attended, whereby iPhones would be able to recognize other iPhones in local areas and pinpoint their locations. For example, suppose you were walking into your local Starbucks and your iPhone connected to your friend's since he happened to be a block away. You might integrate this feature with GoogleMaps, allowing you to locate your friends as you zoom around different parts of the country.

Additionally, you might want to swap photos and music with other friends' iPhones. Suddenly the device becomes a public extension of yourself - allowing you to share all sorts of data with anyone around you. The phone could receive periodic updated information retrieved from the internet, not just RSS feeds from blogs, but perhaps RSS-like feeds from people's current statuses.

(PS I'm not limiting the networking idea to friends only - you could connect to all kinds of people, whether it be for simply social, business or dating purposes.)

Application Design

Expect that once the SDK is released, there'll be a flurry of Internet-accessed "desktop" applications that play on this idea of new mobile social networking. Design-wise, however, we still only have a 320 x 460 viewport for iPhone desktop apps and a smaller 320 x 356 viewport for iPhone web applications. This means we can't have any overcomplicated designs, so the question becomes how developers are to pack in extreme functionality in a very minimalist design.

Multi-Touch Interfaces

Mon, Feb 18 2008 22:52:09 EST

The multi-touch interface is emerging of late as the new interface for digital devices, what with the iPhone, Macbook Air, Microsoft Surface and others. With this comes a whole new way of human-computer interaction which mimics more real-world gesturing. This breakthrough in HCI can open the doors to a whole new array of human interface guidelines - we're still very attached to the mouse as the main interaction device with the computer, but perhaps the touchpad on the Macbook Air will help transition to using fingers.

However, it's clear that although this new way is quite different yet intriguing, we will need to thoroughly understand its capabilities and ways in which people use it before we can fully transition over to the multi-touch interface. It's too early to tell if we'll all make the switch, but it's already evident that it offers several advantages and improvements to old-world interfaces.

The switch has its disadvantages. For one, people tend to be much better at making small movements with a mouse versus their fingers. Likewise, supposing we had touchscreen computers, we'd have to do a lot more work with our arms to touch the screen rather than keep it more-or-less stationary, resting on the mouse and making slight movements. Perhaps touchscreens on a large scale are meant for commercial uses rather than personal use - I could see it being very effective as a communication tool for presentations, but not so much for someone sitting along in their room working on a Word document.

I'm waiting for the interactive media box that will replace TVs and computers. Soon.

Switching from PC to Mac

Tue, Feb 12 2008 03:08:39 EST

It's no secret that the Windows OS interface is quite different than the Mac OS one, however much Vista tries to look similar. I recently convinced various members of my family to get iMacs and make the PC to Mac switch. The main reason, I said, was that the interface was just easier to use.

Much to my surprise, however, I continually hear complaints from them that the mac is "overcomplicated" and "un-intuitive," words that go against what the Apple Human Interface Guidelines try to convey. This puzzles me greatly. Clearly I and most all Mac users find the interface to be very intuitive and easy to use. So why then are my family members having problems? Is it because they're of an older generation? No, I think the answer lies in the fact that they've grown accustomed to Windows for as long as they've been computing.

The Mac interface claims to be intuitive because it mimics the real world and the user's mental model. We've grown very accustomed to Windows interface standards, however, because it's been the dominant operating system for the last decade. Their interface doesn't always mimic the real world, so when we think of "intuitive" on the Mac interface, we're thinking of what the PC would do. One of my family members expected something that would happen on a PC but not a Mac and was confused when it didn't work. Going against the mental model of expectation? For sure.

I was a PC user until mine crashed and I had to use my new MacBook Pro while it was getting fixed. Of course, it was hard to get used to the new interface, but I made a real effort and by the time my PC was fixed, I didn't need it anymore.

But just because I have an interest in learning new things and have an ability to understand things quickly doesnâ��t mean everyone is like me. So how do we fix this problem? Surely using the Mac more and more will cause a predictable adjustment, but even so â�� how do we get people to stop thinking like Windows and start thinking Real World and Mac?

Obviously the first thing to notice on the Mac interface is there's no start menu or bottom bar. Instead, we have a dock that displays images instead of text to signify an application. Technically, our brains should be able to recognize an image faster than reading text, so this is, in fact, a good idea (plus it saves space). Most everything on the Mac is icon-based while the PC is text-based. Thus, people are used to reading the description of something to tell what it does rather than recognize an icon. This in itself is a big switch.

Now, it's true that having no "start" button does leave us a bit confused on where to go. Using the Finder is something to get used to, but then we run into a large difference when dealing with windows.

Probably one of the biggest differences between the two interfaces is the fact that windows on the Mac are separated from the menu bar (File, Edit, View, etc.). Thus, PC users are likely to look for these buttons within the window rather than at the top of the screen. Additionally, closing a window doesnâ��t close the program â�� it just closes the particular window instance. On the PC, closing the window closes the program. This, again is something to get used to, I suppose.

Thing about Macs â�� they only show you what you need to know. On PCs you'll probably run into a bunch of files and folders that you won't care about along with error messages and whatnot that display things you won't understand. The Mac puts all this behind the scenes so you're left only with what you really care about in the foreground. That cleans up your interface for you. Now it's just a matter of understanding the basics of windows and icons.

Thoughts?