InteractiveFish

Customization and Design Integrity

2008-08-26 02:12:28+00:00

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

2008-08-22 17:15:08+00:00

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

2008-08-22 14:04:11+00:00

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

2008-07-05 19:56:27+00:00

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

2008-04-06 21:29:18+00:00

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

2008-04-02 01:05:46+00:00

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

2008-04-01 22:49:04+00:00

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

2008-03-31 09:06:50+00:00

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

2008-03-28 15:19:26+00:00

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

2008-03-18 01:15:57+00:00

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

2008-03-15 04:24:52+00:00

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

2008-02-28 20:45:13+00:00

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

2008-02-26 04:00:51+00:00

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

2008-02-25 22:38:45+00:00

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

2008-02-24 08:57:39+00:00

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.

No Use For Windows

2008-02-22 12:37:16+00:00

I just realized that while I was so excited months ago to get Parallels to install Windows XP on my Mac so I could play all my PC games, I hardly use it now. I'm surprised too. I used to be an avid user of MS Paint, but since I made the switch to Mac and had only Photoshop to play around in, I guess I've lost touch with my MS Paint roots.

It used to be that I had to force myself to use Mac programs because my PC had some kind of virus that kept me from using it. But overtime, I got used to the Apple interface and when I finally got my PC fixed, I didn't need it anymore.

Now I have Windows back on my computer and I find myself never needing to use it, ever. I mean, sure, if I feel like playing computer games, I'll use it (though I hardly play computer games anymore). But otherwise, it's kind of pointless. Most software is made for Mac now - and the Mac 2008 version of Office is so much better than the PC version - so, I have no use for Windows.

I will say that I find it very amusing, however, when I fullscreen Windows XP. Windows OS on the MacBook Pro. How anachronistic.

Multi-Touch Interfaces

2008-02-18 22:52:09+00:00

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

2008-02-12 03:08:39+00:00

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?

Fishing for Feedback

2008-02-11 14:59:20+00:00

It's really important to continually let your users know what's happening as they use your application. There shouldn't be any point in their user experience where they are confused as to what's going on. When you're in an elevator, the lights and 'dings' tell you as you move from floor to floor (regardless of whether or not they're actually correct). Imagine having to ride an elevator 30 floors and never knowing how much you've progressed... that would suck.

Progress bars, ajax loading icons, status displays, animations, etc. are all great ways to give the user feedback as your system processes some information. If you submit a form that takes a long time to read, make sure you display something to the user (like Expedia displaying a page to inform the user it is searching for flights). Additionally, if the user is filling out a multi-step form in many pages, it really helps to include in the interface design some graphic element to let them know what step they're on. Most Web 2.0 sites do this as part of their "easy to use", "simple to sign up" site interaction designs.

When it comes to displaying error messages, the more precise the better. Tell the user exactly what's wrong - which fields are blank, which entries are incorrect, etc. Don't make them guess. Additionally you can provide suggestions to commonly made mistakes (such as "did you mean..." or "try this...").

Separate foreground and background processes. Let the foreground display the pretty, usable interface to the user to present information and progress and let the background do all the behind-the-scenes work. Ensure, however, that any communication with the user is done through the foreground interface.

As the interaction designer, your job is to guide your users through the interaction process of your site or application. Don't turn your back on them for too long or walk ahead - they can get stuck or turn down the wrong path if they're not careful. Keep an eye out, be helpful, answer questions and keep them on track by always providing feedback.

Always Coding Generically

2008-02-08 01:24:17+00:00

I've been programming websites for a while now and though I often do things fast for prototyping purposes, I find myself wishing I coded in a more generic manner.

Sure, it's easy to go ahead and write the code as you need it, but eventually you get to the point where everything can be jumbled up and it's hard to find what you're looking for.

The solution?

Set up a class-like, object-oriented structure and create a whole slew of variables at the top of the document. This way you can quickly change them without having to scroll through all the code and find all the spots where you might use the same value.

For example, I may create a website that's specifically for use by me only. Therefore I put in a lot of default values. If I simply save those as variables at the top of the document, it makes it much easier to take the platform I've built and extend it (perhaps to other people or just to other uses).

Besides creating variables, put as much in-line code as you can into a function. Yes, you have to think a little bit more about parameters and whatnot, but often times I find myself eventually reusing the same code (and having to "function-ize" it after all).

Just a thought.

Press Enter to Submit

2008-02-07 14:14:22+00:00

This is just a quick entry to mention that forms should always be allowed to be submitted using the Enter key.

Sometimes when you want the form to do something special (i.e. some special Javascript/AJAX function), users will have to click the button because using Enter will still submit the form. The way around this is to write:



&lt;form onSubmit="return false;"&gt;

...

&lt;input type="submit" value="Submit" onclick="doSomething(); 

return false;"&gt;

There are two parts to this:
(a) the form tag cannot have a method or action attribute. In fact, you should have the onSubmit attribute simply return false.

(b) writing "return false" at the end of the onclick prevents the form from being formally submitted (a la page reload) after calling your Javascript function.

It's much more satisfying to be able to press Enter at the end of a form than to have to move the mouse and click the button.

Additionally, consider doing the following when submitting a form via AJAX:

1) Change the value of the submit button to "Submitting"
2) Disable the form fields (including the submit button)
3) Display an ajax-loader icon (A cool generator can be found here)
4) When everything's been processed, then change the value back and re-enable the form (after resetting it)

This structure has been proven to be very user-friendly, as it gives the user immediate feedback upon submit of what is going on and when it's finished.

Apple Breaks The Consistency Rule

2008-02-06 19:58:54+00:00

My friend Elliott informed me that there's a discrepancy between the MacBook Air multi-touch interface vs. the iPhone interface and it's quite fascinating.

A major part of Apple's Human Interface Guidelines (Found Here) is Consistency. That is, ensuring that all applications for the Mac platform are consistent with each other both in functionality and interface design. Well that makes sense - users will get used to a specific functionality and should expect to see it all over the place (for example, expecting a program's preferences to be under the right button in the menu bar).

Consistency is a major player in the Mental Model: Goal + Action = Expectation. If the action is not what it should be, then the end result is not expected - and this causes confusion.

Generally, Apple strives to create interface design solutions that mimic the real world - especially when it comes to the iPhone, the first device that actually uses your hand as input rather than an input device.

Okay, okay - so what did they do to break this consistency rule?

On the iPhone, when browsing photos, you can flick left to go to the next photo (right). You flick right to go backwards - just as you would if you were flipping through a book of photos. This, of course, mimics the real world and makes perfect sense as you use the iPhone.

However, using the Macbook Air's multi-touch pad with a program like Preview actually does the opposite. That is, if you move right on the trackpad, the image moves left! Take a look at the Video Here and then try using the iPhone. You'll notice that as the user moves left on the track pad, the image appears to move right, because he's moving the viewing plane left.

So here's the deal. There are two ways we can interact with these "film strips" of images. Either we move the strip, or we move the viewing plane. On the iPhone, we are moving the strip when we touch the screen. We grab a photo and drag it right and it moves right. But on the Macbook Air, we are moving the viewing plane, so our actions have opposite effects.

Anywho. This goes against the consistency principle because it doesn't match up with the iPhone interface. So the question is, which is the best way? Moving right on the trackpad will take you to the next image in Preview. Moving right on the iPhone will take you to the previous image.

The truth is, they're actually both correct. When you flip through a photo album in the real world, you move the page left to go forward. That makes sense. But also notice that when you look around at your world, as you move your head left, the image slides right over your retinas. So this, too, mimicks the real world. The difference is touch vs. viewing plane. Context is important.

But it's my opinion that the MacBook Air interface should be like the iPhone. When you click and drag stuff on the display, they move in the direction of your finger. This should be consistent throughout everything.

Clearly we need to be thinking about what exactly we're mimicking in these new multi-touch gestures. Are we doing something like the real world (a la iPhone) or are we doing something more computer-y? Perhaps we need third-party multi-touch human interface guidelines.

The Benefits of Targeted Advertising

2008-02-05 03:18:15+00:00

I don't mind targeted advertising. I mind being shown ads that I don't care about - and that's the way it's been for years. The fact that the Internet has become more social, allowing us to specify personal information about ourselves for public display and algorithmic analysis means that sometime in the future we can expect that during our time online, we will only be shown ads relevant to our lives.

The only way we've been able to use free applications online is through advertising and the concept of "let someone else pay for me in hopes that I'll buy something from them." Well, the likelihood is that I probably won't buy something from whoever's paying from me. In fact, I almost never find myself clicking on the various advertisements I see. Why? I'm not interested. They're not targeted enough.

But let's face it, we buy stuff. So what factors go into the decision of what to purchase? Obviously we have word of mouth from friends who recommend products to us. Additionally we use our previous purchases as a baseline to rate future ones. Thirdly we generally can recognize a need for something in our lives and then start the search to fill the void. For example, when I decided I wanted new speakers for my projection system, I started browsing around online, starting from a Google search and progressing from site to site.

I like this gecko

I like clothes shopping - but only from particular stores. Show me advertisements of new shipments from these stores and I'm definitely likely to click the ad to learn more. Show me advertisements on new Apple products and I'll probably click as well. But how would you extract this information from my personal profile without me explicitly saying what kinds of advertisements I want to see? Sometimes I don't even know - something random will be recommended and it turns out to be a great product that I buy. It doesn't happen often, but that's the point - being able to analyze my purchase history and my personal profile to figure out what kinds of products I'm likely to buy next.

I'm all for people recommending things to buy, but it only makes sense and is valuable if it's relevant to my life. I know there are plenty of companies out there trying to create this kind of algorithm right now and I look forward to seeing what gets created. Until then, no, I do not want to save 15% or more by switching car insurance companies.

One Site to Rule Them All

2008-02-05 02:31:51+00:00

With the rise of Google's OpenSocial initiative, it's becoming increasingly more likely that soon in the future we will see social networking sites which follow the same programming foundation.

To those who aren't familiar with the concept, the idea is that if all the social networking sites out there use the same platform, it's easy for developers to create applications for a broader audience than for one particular site.

It would be great if social Internet users could maintain one giant profile page of all their social information (contact info, personal info, professional info, pictures, etc.) that the various websites can then just pick and choose from.

For example, I'm on Facebook, LinkedIn, MySpace and a slew of other various networking sites. Several use the same information such as my email and website address as well as my picture. Had we developed one central site that all these read from, I could swap my base picture once and the change would radiate throughout dozens of sites I use.

If only all these text input boxes would allow me to insert a URL to a webpage I could make that would display appropriate information read from a database. Then I could maintain my own one profile page that would automatically update all the others.

We're essentially creating virtual identities in the various fields we've filled out on the networking sites we've joined. Yes, most fields are the same, but perhaps we can get a little more creative, writing out our personalities virtually and in such detail that in a sense, our social-networked identity becomes an extension of ourselves, the other half of our daily lives, the part that can reach all the people we don't interact with in person regularly.

The idea can be, of course, scary. Who wants all their personal information available all over the Web? The key is in the privacy controls and settings. I'm fine with writing whatever about myself, so long as the information is used appropriately and is safe from anything harmful.

Nevertheless, I look forward to the coming years on the Internet - I expect we shall see a growing and deeper online social presence, and I'm eager to see where we take it.

White Space for Rent

2008-02-05 02:14:46+00:00

White space is important when reading an online or printed document. It gives the reader some breathing room, a place for the eyes to rest. A lot of sites can overcomplicate their interfaces with too many colors, text and graphics and while this can be visually appealing, it can also be chaotic.

Here are some ideas on how to increase the white space on your site:

1) Increase the line-height in your stylesheet. Using a slightly-higher-than-default line height can give just enough of a subtle hint of space to make your content read better.

2) Add bottom margins to your paragraphs. Not only does this help to separate each block of text more clearly, but it adds to the overall readability.

3) Create padding around the outer edges of your page. Some sites have text that goes right up to the sides of your browser window. Adding a couple dozen pixels of space not only focuses your content, but it gives a nice border around everything.

4) Leave padding and margins around images. If you're using floating images in paragraphs, add a hefty portion of padding. No one says you need the text to come right up to the image border. The added white space will help emphasize your image more.

Don't be confused and think that the concept of "whitespace" only applies to the color. Whitespace can be anything - any "dead" space devoid of images and/or text. Don't go overboard with your spacing either. Text with too much leading and too much kerning (letter-spacing) can inhibit readability.

Promoting Yourself with a Good Resume

2008-02-04 01:29:27+00:00

I know this seems a little off-topic for User Experience Design, but resume-writing IS a graphic art (printed medium typography) so it's worth discussing a little.

I'm amidst a bunch of college seniors struggling to find jobs before we finish school in 86 days and I continually find that many aren't too sure how to make a decent resume. Don't be misinformed; it's not simply putting a list of the stuff you know and have done on a page and sending it off to several companies. There are several details of which a good resume writer should be aware.

CONTENT

Contact Info

At the top, you should have your name somewhere in a large font. Also at the top, either on the opposite side of the page or under your name, include:

(1) Your website (if you have one)
(2) Your email address
(3) Your phone number
(4) Your address (some people include both permanent and school, but you can really just include one)

This allows for easy and quick reference to your contact information if someone needs it fast.

Focus

Your resume needs to have a focus, an objective. What, specifically, are you looking for? This should be written in one clear, concise statement that describes:

(a) the type of position you want
(b) the type of working environment you want
(c) the type of people you want to work with

The skill here is to write everything in as few words as possible. When employers read this line at the top, you immediately stand out more than a candidate without an objective. You're telling them exactly what you're looking for before they even read the rest of your resume. If it's not a match, so be it. If it is, they'll read more.

Education

This part should be pretty standard. Highlight your school(s) and major(s) as well as any minors and important activities that took place (such as academic groups or extracurriculars). If you're in a special program, include a short description.

Some people include "relevant coursework," which I used to as well until I realized that it's not always necessary. You can talk about your coursework in your interview - mentioning it on your resume can waste valuable space that can be used for something that speaks more to your skills. They know you took good classes as part of your education.

Skills

Highlight a list of the skills you have. I'm used to dealing with the technology world, so these of course include abilities with programming and design software among other things. Include only the skills relevant to your objective.

Work Experience

Create a list of only the places you've worked that help emphasize your objective. Saying you want to be an Interaction Designer and putting that you worked as a cashier one summer isn't helping you. Specify the position, the company and the dates involved. Then, in bullet-form, describe the work you did using what are called "action" verbs (one list can be found here). Using the appropriate language can have drastic effects on how you are perceived. For example, consider replacing a phrase like "worked with a team..." with "collaborated with a team..."

Other

Many resumes also have an additional section, either used to highlight personal interests, academic projects or side activities. Use this section only if it helps illustrate your objective. Otherwise, it's just filler text.

DESIGN

I've seen a lot of different designs for a resume. There's a striking difference between the artist's resume and the engineer's. What's cooler is if you have an artist's resume but filled with an engineer's content ;^)

Layout-wise, the standard is the full horizontal, with the name centered at the top and each section taking up the width of the page. The next is the vertical, where the content takes up half the page, includes a vertical line down the left side and the name is left- or right-justified at the top.

Think carefully about which fonts you use. Readability is very important, so don't overcrowd your words and use unreadable colors. Pick fonts that are crisp (sans-serif) and a nice balance of dark and lighter colors/tints. Don't use too small a font - 8px is the minimum!

Make sure your paper is a standard portrait 8.5" x 11" too. And don't overdecorate it with graphics or fancy paper. Yes, they care about the appearance; but they care more about the content.

Overall

Your resume tells a story about you. It's not a detailed story, but more a summary of the major points of the plot. You want to do this. You studied here. You learned these skills and you put them to use at these work places.

When you start looking for jobs, your resume is an extension of yourself. The care and attention you put into it speaks of your character and skill, so put in the effort!

When There's Too Much Color

2008-02-02 18:43:58+00:00

When it comes to choosing colors for your website, there's a standard limit: three.

Most things in the world come in three's: jokes, pigs, stooges, blind mice, space dimensions... But in terms of color on a website, you can think of the three being:

(1) your main color
(2) your secondary supporting color
(3) your highlight color

Think about your audience and site focus when picking a color scheme. Do you want something bright and saturated or the opposite? The use of color can have drastic effects on your overall user experience. For example, having orange text on a white background creates a totally different feeling than white text on a black background. What's the overall vibe you want to make?

Consider the feelings associated with colors:
- Red: passion, romance, fire, violence, aggression.
- Purple: creativity, mystery, (reddish purple) royalty, mysticism, rarity.
- Blue: loyalty, security, conservatism, tranquility, coldness, sadness. Light blues create a feeling of openness, clean air and freshness, while dark blues can convey tradition, trust and solidity.
- Green: nature, fertility, growth, envy. A lighter, somewhat desaturated green is the color of money and indicates wealth or value.
- Yellow: brightness, illumination, illness, cowardice. Some yellows can symbolize the precious metal - gold - and are universally valued.
- Black: power, sophistication, contemporary style, death, morbidity, evil, night.
- White: purity, innocence, cleanliness, truth, peace, coldness, sterility.

Now consider how these colors come together to form color schemes. Yellow and green tend to feel like Spring whereas Black and Red seem a bit more morbid.

In addition, it's important that your color choices not inhibit readability. If your text color is too light, it can become very hard to read. The same is achieved if you have a dark background and dark text.

Don't overdo it. Too many colors on a site can not only be confusing, but it detracts from your "branding." If all your links are different colors and all your headers are different, you lose consistency. When everything matches a style, your users will more quickly be able to identify and understand the various aspects of your site.

There are a couple cool sites out there to help you pick a color scheme:

WellStyled.com
WebColorSchemes.com
Kuler
ColourLovers.com
Genopal

Typography and Technology

2008-01-28 14:00:56+00:00

In a medium where communication is key, it makes sense that understanding typography would be useful. Let it not be underestimated; typography is not simply about typing words and phrases. Rather, it's identifying why one font is better than another in one context or what sizes and colors are appropriate. Thinking about how you display text can dramatically alter the overall site experience.

Unfortunately, there are only a handful of web-safe fonts - nine to be exact: Arial, Arial Black, Comic Sans, Courier, Georgia, Impact, Times New Roman, Trebuchet and Verdana. Using stylesheets allows us to specify a set of fonts to choose from, in order of preference. In case someone's browser doesn't have your first choice font, the site will display in the second choice.

But besides font-family, there are several other aspects to consider:

Line-Height (Leading)

This is the space between the lines of a text. The default value depends on the font size and increasing or decreasing this affects readability.

This paragraph has 9px of line-height. Clearly the lines are much closer together and it inhibits one's ability to read.

Similarly, this paragraph has 28px of line-height. Because the lines are spaced so far apart, it can also inhibit the ability to read. The key is to find a happy medium.

Letter-Spacing (Kerning)

Letter-spacing is obviously the space between letters.

This paragraph has a -2px letter spacing. With all the letters tighter together, it certainly is interesting but it can be hard to read as well.

Meanwhile, this paragraph has letters spaced 2px apart. And while it looks a lot better after having read the above paragraph, it can also becomes hard to read since everything looks like a space!

Using a positive letter-spacing value (like .5px or 1px) can give your text a much more open, airy feel. Additionally you can use a property called "word-spacing" which will, as you might expect, affect the amount of whitespace between words.

A negative letter-spacing is usually good for short amounts of texts like titles or subtitles. When people are reading paragraphs of text, it's best to adopt the standards we see in printed mediums. Using a "slightly off" line-height or letter-spacing has subtle effects on the reader. It provides a bit of an "edge" that can enhance the site design.

Font Families: Serifs & Sans-Serifs

It's very common to see sans-serif fonts on the web these days. For those who don't know, sans-serif means fonts without any "frills" - just plain. Serif has the frills - the nonstructural details at the ends of some letter strokes.

A A

Several studies have been conducted to find out which type of font is the best for readability on the web. It's been found that serif fonts are actually more easily readable because the subtle details in the letter form can be much more quickly understood and processed. In a sans-serif type, readers may actually have to read the whole letter to see it. Obviously these are split-second glances, but it does have an overall effect. The purpose of serif fonts is to guide the horizontal "flow" of the eyes by providing these details to lead from one letter to the next. Additionally, these details also increase the space between letters, which helps with legibility. Additionally, the details can help bind letters together, which Gestalt theory will tell you is better (looking at the whole than the sum of its parts).

Font Sizes

On pages where there are lots of text, we've seen an increase in smaller-sized fonts. For most people, this is acceptable, but it's not universally accessible and a lot of the older generations tend to have trouble reading. Of course, they can fix this in browsers that allow for zooming. Nevertheless, keeping fonts around the 10-12px range is standard. Larger is, of course, more universally appropriate, however when there's lots of text to display, it can get long and hard to read.

In the 16th century, a common "scale" was developed for font-sizes. This doesn't have to be replicated on the web, however it is also a standard practice. That's why most text software yields a standard set of pre-defined sizes (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72). Using high contrasts between font-sizes (as in a header vs. body text) can create a modern feel and a clear definition of the context of each text.

Capitals

The world doesn't speak in capital letters. Due to the wide variety of letter heights, it's much easier to read lowercase letters. Using capitals removes these heuristics and forces us to spend more time reading a letter or word to process it.

IS THIS SENTENCE EASIER TO READ BECAUSE IT'S IN CAPITALS AND THEREFORE MORE IMPORTANT?

Is this sentence easier to read because it's in lowercase, and while not capitalized, still important?

Colors

We have to consider color because there is a very important difference between the printed medium and the screen: on the screen, pixels of color are built by combing RGB light together. This is known as an additive color system. All colors added together make white, the brightest. Contrarily, on a printed piece of paper, all the pixels of color are absorbing and reflecting light. All colors combined make black and this is called a subtractive color system.

The standard "black-on-white" is ubiquitous, stemming from the days of having only printed text. However, keep in mind that since a white page is different than a white screen, the computer screen emits a lot of light from white backgrounds and not as much from dark backgrounds. And while black text will certainly stand out on a white background, it can be a real strain on the eyes to read for an extended period of time with a bright white screen.

Conclusions

Well anywho, there are obviously a variety of ways to display text on a page. I'd go with a few different scenarios and test them out with people, asking them to give an overall impression. It's likely most people will say "yes" or "no" and give a reason that's hard to explain. This is probably because of all the subtle, unconscious-type things discussed earlier. But that's okay - go with what they like.

Mac Office 2008!

2008-01-16 15:29:59+00:00

Apple announced yesterday at MacWorld the Microsoft's Office 2008 for Mac is now available. I've just installed it and it's worlds better!

Why?

For one, everything is contained within one window - unlike the 2004 version which put everything into separate ribbons. Word, Powerpoint and Excel are formatted the same way now - the one main window and a separate formatting palette much like Apple's Pages and Keynote.

Additionally, the new version of office comes with with a Mac version of their Fluent interface, allowing all sorts of actions to be completed without searching through a series of drop-down menus. Rather, this version is icon-based.

Word also includes the ability to drag and drop images around (a la Pages or InDesign style) and create image effects like a frame and drop shadow (a la Keynote). It also includes a series of design templates so that you can design more graphically-pleasing Word documents.

Excel includes 3D charts and a more intuitive menu to select them. Additionally, they've made it easier to add graphics and word art through the same Fluent interface.

Powerpoint looks a lot more like Keynote now (yay) and allows users to quickly add elements to their slides. I still think it's a bad idea to start with a completely blank slide when the program is opened. Keynote forces users to pick from a list of templates. Most people are lazy and so having a blank template to start will probably mean that most people won't change it to something more creative. Oh well - at least there are a lot more options to design their slides now.

Their transitions could still use more work - not just in the actual transition, but the interface to show their preview doesn't work as smoothly as Keynote's. Nevertheless, it's certainly an improvement. They even have a 3D cube and Page Fall (although they have icons for each kind of cube rotation rather than just one with a drop-down menu to choose direction like Keynote - superfluous?).

Yay! Time to go out and make some cool presentations and Word documents. I'll be scrutinizing to compare Keynote to PowerPoint now that they're more on the same level. Maybe I'll have more comments in the future.

Design Technologists

2008-01-16 12:46:18+00:00

So, in the process of finding an internship for this semester, I learned that I'm a "design technologist." What does that mean, exactly? According to Frog Design:

The Design Technologist helps analyze, prototype, design, and develop an application's user-interface. He/she turns stunning ideas into working prototypes and production-quality applications â�� not only providing a high-fidelity implementation, but also creatively enhancing the vision of the visual and interaction designers. The DTs works closely with design analysts and business strategists to generate ideas based on their knowledge of technology platforms and their comprehensive understanding of industry-specific technology trends. He/she bridges the gap between design and technology by providing technical guidance to the creative team, facilitating the transition from design to development, and leveraging his/her design sensibilities during user interface development.

For the last year or so I've considered myself an Interaction Designer but apparently in the industry that can be limited to strictly design. I, on the other hand, am proficient in development and programming, which makes me more multi-faceted than a regular interface designer, I guess.

The fact that this description says that the DT "bridges the gap between design and development" is precisely the description of my interests. A little of this, a little of that, my career interests are to dabble in both design and programming with an overall concentration in user experience.

It's very interesting to learn of all the little niches in the industry that are all somewhat related: interaction designers, interface designers, visual designers, design analysts, design technologists, product and program managers, user experience designers, software developers, etc. Just goes to show you that there's someone for every job, no matter how specific it is.

Thing is, yes I enjoy making things and I've been making sites for a few years now. But these days I get burnt out easily. I never run out of interesting ideas and improvements but I find myself not always wanting to jump right in and start coding. I'd need someone else to do it for me :^P

I guess that's the mindset of the visionary.

Is Prototyping Necessary?

2008-01-15 00:10:07+00:00

Many web designers stress the need for heavy site prototyping and planning before the actual coding happens. That is, they sit down and after outlining the information architecture, plan the design with all the images and colors, etc.

Personally, I find that process rather tedious and time-consuming. My method is to simply start with a really simple layout, build the basic code and get some links working. Then once the basic site is setup, it's time to go in and add tweaks. I'm the kind of person who is continually improving things. I'm usually never satisfied with something and can probably always find little things to change here and there.

Hence, when I'm making a new website, one of the reason why I make it so fast is because I don't think much about the design other than what is needed. Yes, this tends to lead to very clean and sleek designs because it's simple and fast. But later, I can go and add more details if I feel like it.

The point is that I don't want to overthink the design. That's the worst thing that can happen to a web designer. If you put too much thought into the design and not enough into the functionality, you become an artist: form over function. But we're designers - that means we put function first. So I like to set up a decent and simple interface and then work on all the functionality (AJAX, Javascript, PHP, MySQL database design, etc.).

Once I feel comfortable in the site's functionality, I'll sleep on it and use it for a few days and undoubtedly will come up with improvements for the layout.

Function over form can entice users and make them keep coming back. The interface should always be intuitive yet unobtrusive. A flashy-designed site with poor functionality can have the reverse effect, driving users away. Making it simple both in form and function is the real trick.

When Animation Goes Awry

2008-01-15 00:01:11+00:00

Too many sites overuse animation. It's supposed to be a subtlety that adds to the overall user experience by making something more intuitive. For example, having something slide in and out can be very useful if you're mimicking a drawer (such as sliding comments in and out on a blog post). Other times, animation can just be unnecessary and annoying because of the time it takes.

Animation also serves to let the user see what is happening rather than just display something quickly. In some cases, simply showing/hiding something instantaneously can cause confusion. Note how in Mac OS X when you minimize a window, you see the animation as it actually shrinks and places itself in the dock. If it simply disappeared and appeared in the dock, you could probably get confused as to where your window went!

But besides Javascript effects, the other kind of animation popular on the web is through Flash. And that's just what the site is if there's too much useless animation - flashy. You'll see this kind of design most often on classy restaurant websites. It's okay to use animation as long as it doesn't run longer than the user's attention span, which, I read, is about 8 seconds.

I found this survey conducted by Akamai Technologies on "Threshold of Acceptability for Retail Web Page Response Times". In it, they surveyed over 1,000 web users and found that if, say, an eCommerce website took longer than 4 seconds to load, 75% of the participants would not return to the site!

How frustrating is it to go to a restaurant site to find their phone number and have to sit through a 10-second animation of images before you actually enter the site only to be confused by their navigation , unable to find what you were looking for?

So please. Keep the animations to when they actually enhance the user experience rather than detract from it.

Using PHP When Possible

2008-01-14 23:12:29+00:00

In recent months, I've gotten in the habit of writing things in PHP arrays, using a function with a loop to actually generate HTML. This works great for anything where you have repeating elements (such as a table, lists, navigation, images, etc.). The benefit is that it's much clearer when you need to change the text - rather than looking through HTML code and brackets, you can just change the text:



$arr = array(

  "Home"    => "home.php",

  "About"   => "about.php",

  "Contact" => "contact.php"

);



echo '&lt;ul&gt;';

foreach($arr as $k=>$v) {

  echo '&lt;li&gt;&lt;a href="'.$v.'"&gt;'.$k.'&lt;/a&gt;&lt;/li&gt;';

}

echo '&lt;/ul&gt;';

Instead of hand-writing each navigation button in their HTML form, here we separate them into two parts: the text-only array and then the HTML code which doesn't ever have to be touched. Thus, it's much easier and faster to edit (especially for those who don't know HTML and are afraid to touch code!).

The same thing can be said for tables - perhaps each item in the array is a row which maps to its own array of table cells with data. Whatever the case, it's much easier to separate the text from the HTML and it saves time later.

I've had to do numerous websites for clients who then go on to edit the code themselves for updates (this is, of course, if they opt not to include a content-management system). So using this approach makes it easier for them to edit their pages without worrying they'll mess up the code. User Experience behind the scenes!

Just a useful note in case you didn't know :^P

Mobile Browsing

2008-01-10 07:01:29+00:00

With the explosion of mobile technology in the last year - first with the Blackberry, then the iPhone and now a slew of touch-screen-type phones with Windows Mobile and what not - we're drastically changing the way we use the Internet.

Originally, the Internet was a place to house information which everyone could access without downloading a piece of software. We then moved into dynamic content where information could be changed and updated, creating more frequent traffic to sites. Next we added the social component, allowing people to connect through various forms of media (photos, news, video, music, etc.).

Popular social network sites now have become quite complicated in their functionality and interface. But because these mobile phones have limited space on their screen, we see that this type of fully-used UI is not the way to go anymore.

Suddenly, it's like we've almost been thrown back to Web 1.0 whereby we want to use the Internet to get information fast. When we're on the go, our Internet goals are different than if we were leisurely sitting at our home or office computer. We want to do things quickly, whether it be find an address, look up a word's definition, check email, read a news feed, get contact info from a site, etc.

Sites made for the mobile phone need not over-clutter with dozens of UI features. Rather the opposite is needed: a total reconstruction which highlights only the pieces that are absolutely necessary, allowing users to find what they're looking for as fast and easy as possible.

Search boxes, quick lists, large buttons and less text have become popular in mobile interface design. No flashy ad banners, no miscellaneous links and content. Quick and to the point. And yet if mobile technology continues to skyrocket in popularity, the ad agencies are going to have to come up with a new way to advertise online - we only have so much space on the screen!

Designing a Visionary

2008-01-10 06:31:01+00:00

Aww, Steve.

Much like me, Steve loves technology and sees the potential in new, innovative products. He's a visionary - not an engineer. Sure, he grew up in the technology realm, working at HP and Atari among others, but he wasn't the real "engineer" behind Apple.

The difference between Jobs and Wozniak is this: while SteveyW loved to build nifty gadgets over and over, SteveyJ saw their potential in the marketplace. He harnessed Wozniak's ability to make a profit and change the industry. He had the vision and the means to make it happen.

It's been said that Steve "doesn't sell pieces of metal; he sells the experience." It's true. Steve is a marketer. He knows how to grab people's attention with his electrifying presentations. He's well-versed in communication and psychology. Aside from being the main product manager at Apple, he's an overall interaction designer because he knows how things should be and has been right most all of the time.

Being a visionary does not necessarily mean being capable of a hardcore talent like designing icons or programming a computer. Visionaries don't even have to be in the technology realm! (I often find myself wildly interested in several other career fields like architecture, film and journalism but I just happen to have gone into technology for college. Good choice if you ask me.)

Their skills are multi-faceted: understanding people, the world, where things can be improved and of course having a general understanding of how to do things. One of the main complaints I have about "business" people is that they think they have the vision but they lack the real passion in and general understanding of the subject matter.

As far as user experience is concerned, Steve understands what is best. When he left Apple and founded neXTSTEP, his aim was to develop a very intuitive and user-friendly operating system. Obviously it was successful and that's why it evolved into Mac OS X.

I see a lot of parallels between him and me, mostly because I share the same vision and interest in new technologies but lack the personal ability to create things solely on my own. Lucky for him, he was able to hire extremely talented engineers and visual designers to help him with his goal. I haven't been that fortunate yet - perhaps someday.

When I think about user experience concepts and where I want to be 10 years down the road, I continue to find that I belong in a Steve-like position. But I can't do it alone. Apple works not just because of Steve's direction but because of all the hundreds of hard-working, creative engineers that develop and enhance the vision.

There's Always Someone Better

2008-01-10 01:24:40+00:00

I'll be honest. I only started really programming two years ago. I didn't do anything at all before that. I wanted to make a website, so I went around looking at the source code of other sites, saving copies, changing things and seeing what happened visually.

The only reason why I've been able to do so much in so little time is essentially because I spent nearly every waking minute teaching myself the web programming technology. I didn't like to use anything pre-existing because I wanted to know how everything worked and make it myself. I wrote my own scripts and libraries from scratch, even when others suggested I could use something already made.

When people started calling me a "developer" I laughed it off, maintaining that I wasn't because I didn't consider myself a computer science nerd like the ones I'd met in my classes. In fact, I wasn't even doing well in my computer science classes!

The truth was, however, that I kind of was a developer but didn't know it. I couldn't meet anyone else who coded as fast or as often as me. I was able to come up with an idea for a website and finish the beta version within the evening. I enjoyed writing lots of code and figuring out new algorithms and I often worked "developer-style" - staying up all night with little or nothing to eat because I was so engrossed in the work.

Jobs and Woz: Here we have a classic example of the visionary and the ridiculous engineer who just loved to make stuff

When I got to Apple, however, I started losing my drive to program everyday, mostly because that was precisely my job. And while I was slowly getting more and more discouraged, I was shocked to learn how many people in the technology world actually love programming all the time. My roommate didn't even come home; he slept at work. This wasn't simple eagerness to do well - this was his third summer at Apple on top of the numerous personal projects he made beforehand.

As I looked around, I noticed just how many more people were like him. Some older employees had been doing the same programming job for years and years, declining offers to move to upper management. It was definitely an eye-opener.

I realized then that I wasn't a developer. I liked coding and figuring out how things worked, but there was no way I was going to program for my career. If anything, I was just obsessive - a quality which I still maintain, but on lots of different things.

When I got back to school, I was burnt out. I didn't open a text-editor for weeks. I didn't write a line of HTML. And even a month or so later when I slowly got back on the wagon, I still didn't have the drive I once had.

At Apple, I had to work with a lot of pre-existing Javascript frameworks despite my original lack of desire to do so. But in the process, I realized the benefits. And similarly, just because I enjoy aspects of programming and figuring things out, doesn't mean I need to do it all myself. There are always scripts better than yours and programmers better than you and I'm not at all ashamed to admit that.

Rather, I'm excited at the idea of working with the kind of people I've met - the kind who not only get giddy at the prospect of a new web project but never get tired of sitting down to code it all out. Those are the kind of people I want to be working with.

The same can be said for designers. I also had the opportunity while out in California to meet a slew of ridiculous graphic designers, lightyears ahead of me. I'm sure I could sit down and try to become an expert at Photoshop techniques, but I don't want to. It's not a passion. I'm glad it's theirs - it makes me want to work with them too.

The one thing that I never get tired of being obsessed about is design. Whether it's designing the code (HTML layout, CSS style, PHP backend, MySQL database design, Javascript effects) or designing graphics, page layouts, presentations, print material, writing, music, etc. I never get tired of finding ways to improve things and thinking up new ideas.

I think that's who I really am.

Designers Are Not Artists

2007-12-29 19:20:56+00:00

Designers are not artists. Most people confuse art with design, but there's a difference. Designers have artistic talent, but they are not required to be experts in graphics, typography, colors, etc.

The job of the designer is multi-faceted. Most importantly, it's to understand artistic elements and put them together to make something interesting. Designers have the concept, the idea inside their heads. Their goal is to express it to others, mapping out layouts, describing the vision, innovating.

Think of a few design professions out there. Interior designers do not craft the tiles, blinds, furniture, fabric, etc. Rather, they research and understand the various material types and figure out all the different ways they can come together to produce nice interior decor. Fashion experts don't necessarily make clothes, though they have an understanding of what items go together to make a decent outfit.

Artists express themselves but designers do the opposite. There's an element of psychology that comes into play because designers have to understand people and create things not for themselves but for the world to use. Designers can also do something that some artists can't: communicate ideas with all kinds of people, those who interact with the product and those who make it come alive.

While design is not art, design is AN art. It's an art of communication. It's about combining various skill sets to communicate a message to an audience. And while both artists and designers can make a statement through their work, the difference is this: artists create for themselves and designers create for others.

Choices: Less is More

2007-12-27 03:28:52+00:00

How many ways can you eat a Reeses? How many ways can you turn off your computer? People like choices, but they don't like too many. I was reading a bit from Barry Schwartz's "Paradox of Choice" and was intrigued on the things he has to say regarding choices.

Decades of research have told us that freedom, autonomy, and choice are essential for psychological well being, and it seems only logical that if some choice is good, then more choice is better. Nonetheless, recent findings suggest that as the number of choices people face increases, a point is reached at which satisfaction and well-being go down--that choice stops being liberating and starts to become paralyzing.

It seems odd, yet the more choices you give your user, the more unhappy they are. People don't want to have to think when they navigate a website or use a software application. They want direction. If you give them too many, it's confusing.

Place a subject in a room with 10 doors all colored in different shades of blue. Then tell him to pick the light blue door. Compare this to the subject who has only two doors, one dark and one light. Their experiences are drastically different.

On the Web

Utilizing good navigation principles can help you give the user a more directed experience. Many sites out there have so many pages that they just link to every one of them from the homepage. It's overwhelming, confusing and it won't keep your users. Breaking down your navigation into smaller pieces and dividing it into a hierarchy of importance will drastically improve your user experience.

You may think that the user should have as many options as possible in order to best find what he/she is looking for - but as a designer, it's up to you to design how they accomplish their goals. That's part of the interaction design. You can always include a search bar to cover the extra bases.

In Software

If there are too many ways to do the same function, it's unnecessary and can be confusing as well. Along the same lines, if it takes too many clicks or menus to accomplish a simple task, it's even more confusing. I won't point out specifics, but in many cases, you have to go through a series of menus before finding the button that does what you want.

Sometimes this is okay because the direction through the menus makes sense. But if the functionality is something used often and it's still hidden under layers of menus, then the navigation hierarchy doesn't make much sense.

~~

Ever go into the supermarket wanting to buy cereal? It's a very different experience when you know what cereal you want versus just browsing. I've counted over 160 different varieties, not including the different versions of any particular cereal (i.e. Honey Nut Cheerios, regular Cheerios, etc.). Too many choices is daunting if you don't know what you're looking for. I want a flaky cereal that's kind of healthy. Okay...that limits it down to the top shelf. Oh wait, but there are some on the bottom shelf too.

We have too many options in our daily lives today. The world is such that we're convinced of the notion that "more things make us happy." But it's not always true. Sure, people would rather have some choice than no choice at all, but we want guided free will.

User Experience Design: A Definition

2007-12-25 21:29:37+00:00

When it comes to technology, "design" is a long-term engagement between the user and the product. It is the user's whole experience: from interacting with the product to how the product looks and feels to what the user takes away from it.

I've mentioned the mental model before in other posts: Goal + Action = Expectation. Design is about creating something that meets some expectation. It's the "Action" part of the equation. It's not at all limited to simply graphics or materials but rather, it encompasses everything. User Experience Design in particular is concerned with utilizing all aspects of design for creating just that - a great user experience, a satisfying emotion as the user accomplishes the goal.

Like all designers, creating a great user experience requires research and understanding. But it's not necessarily the same kind of understanding that artists or engineers have. Graphic artists will come to understand typography and digital design as well as color theory and techniques. Engineers will study the math foundations of computer science and how to think of fast and efficient algorithms to create complex tasks. But UXD (user experience design) includes two more elements: psychology and communication.

Psychology and Communication are two extremely big factors in UXD aside from art and engineering. From the psychology side, we want to observe people, try to understand what makes them feel good, what things they enjoy doing and how best to help them achieve their goals. The communication comes into play in our efforts to, in a sense, carry out a conversation with our users in their experience with the product.

UXD is not any one particular field. Rather, it takes aspects of art, engineering and humanity and bring it all together in the end.