InteractiveFish

Elegance is Simple. Not Vice Versa

2009-06-02 16:57:47+00:00

I've written about "simplicity" being important in design. While that's true, I'd like to clarify that it's really "elegance" that's important - not so much simplicity. Here's the difference:

Elegance calls for an interface with all the facets necessary to do what it needs to without any extra features or components. Because the word "elegant" means to select carefully, the fundamental idea is to take away until you can't anymore.

Simplicity, on the other hand, is rather vague. A black dot on a large white canvas is simple. But does it do what it needs to? Maybe. Then again, maybe not.

So when it comes to designing an interface, "simple" is not really the appropriate word choice. You want elegant. A design that's too simple may not be robust enough to accomplish the tasks presented to your users and therefore is rather useless.

The Google homepage is simple, yes, but it's elegant. You go to the site to search. Because that's their driving functionality and core feature, there really is no reason to clutter it up. It's a quick jumping-off point. You're not meant to linger. The iGoogle page, however, fills the rest of that white space with all sorts of widgets and extra features. You're meant to linger here.

The Twitter page design is simple. Maybe not elegant, but they're getting there. Before they started with some of their redesigns, the page was *too* simple - it didn't do enough of what the users needed it to. Luckily, all the third party apps have closed that gap. As they improve the main Twitter page, however, they maintain the simplistic structure, but just fill in some of the blanks, allowing it to do more of what's needed without compromising the interface.

You might compare this ideology to people you've met in the world: some people are really simple - they barely talk and, if they do, they don't say much. Not so valuable. Others might talk way too much, all the time, and still not say much either (or they might say too much and it's overload). But there are plenty of people - mostly the successful ones - who only say what they need to and say meaningful things. Elegance.

This isn't to say that simple is bad. But you have to be careful with simple. Going with elegance is always the right way.

Designing Simplicity

2009-05-10 18:28:40+00:00

Designers are not artists. Design is a form of art, but it is about problem solving and is constrained by a number of facets. Artists engage in the manipulation of a particular medium to produce an aesthetic, personal response - a situation in which there are few constraints. As such, art is valued for its originality and ability to express an idea. Design, on the other hand, must be relevant to a particular user or task and solve a specific problem. Were it an aesthetic response, it might only work for some people. Design is intended for mass production and widespread distribution, concerned with finding the best way to communicate some information to everyone and resolve any confusion along the way. Design is never evaluated in formal terms, but rather, how effective it is at solving the problem at hand.

To do this, design decisions must be logical and practical. Modern design, especially, is based on the rational belief that all design decisions should be justified on objective grounds. By being able to reason choices almost mathematically, design can be timeless - a quality apparent in many old designs such as church architecture and Roman lettering. It is this timeless quality that proves a design has solved a problem.

The key to a timeless design is simplicity, which Da Vinci said was the "ultimate sophistication." It can always be found in nature, from the laws of physics to the crystal formations in caves and even the human anatomy. Logarithmic spirals can be produced mathematically, yet they are the basis for countless well-known forms that exist in the real world. But although a particular design may appear simple and elegant, the path to creating it is most likely not.

To design for simplicity, there are a few components to be aware of:

1. Approachability
Simple is approachable. If there are fewer buttons and there is less clutter, there is less of an endeavor to take on in approaching an interface. In the overall user experience, there is less effort needed from the user to categorize, identify and define what something is.

2. Recognizability
Something which is recognizable is more approachable. An interface which uses familiar and consistent elements leads to quicker recognition of what it is and how to use it. Recognition is the most powerful form of memory recall, so it's no wonder that familiarity is a strong basis for good design.

3. Learnability
The combination of approachability and recognizability, learnability describes how immediate a product is to use. If a user knows what something is and is not afraid to engage with it, the user gains a faster understanding and the product makes a greater impact. Spending time to learn something new hurts the user experience.

4. Usability
After the user has already engaged with the product, the amount of time with which to accomplish tasks should be small. If there are less controls and a more simple interface, the procedures are more memorable.

Design must meet expectations and, when it fails to do so, the problems can be attributed to errors in one or more of these categories.

The real trick to design is focus. It's all too easy to tack on unnecessary components and often it's here where design can go down the wrong path. Right at the start of the process, it's imperative to reduce the design to its essence, it's core emotional value. A good design is simple, bold, direct. Its purpose is clear and it focuses the user's attention on the significant components while removing the ones that are not.

That's where the term "elegant design" originates. The word "elegant" really means "to choose out" or "select carefully" and is based off the same Latin roots as "elect" and "select." Being simple requires immense discipline because design is really about taking away until you can't anymore.

The Importance of Consistency

2009-02-17 01:14:06+00:00

I'm a designer who really doesn't like unique interfaces. Sometimes they're cool, but more often than not, they suck. They end up taking an interesting piece of functionality and making it way too hard to learn or use. Some claim they did this to "preserve the brand," claiming they have to ensure that the user must be aware what product they're using while they're using it, that how else will they get the user to get their other stuff?

When it comes to interface design and user experience, I support consistency. Especially for making applications on iPhone and the Mac, limiting company branding and designing familiar interface paradigms is essential. You get instant learnability and usability with little to no effort on your end.

Now, of course, there are situations when interfaces call for unique elements. So use that with discretion. For the most part, however, I see too many things that could have been consistent with familiar design paradigms but are done instead in a unique and harder-to-learn fashion.

I suppose that's why I'm more of a layout guy than a visual designer. Visual design is great, but I see it as a last step, the icing on the well-prepared cake. The cake will still taste good either way, but adding fancy icing and decorations can give it that extra edge which makes the whole experience more enjoyable.

Remember: goal + action = expectation. If the users have performed a similar task somewhere else, they've come to expect a certain action to achieve the same goal. Now, if you suddenly make them perform a new action, it messes up their mental model - and the last thing you want to do is confuse people.

So, the take-home point is this: when you're designing something, be sure to look around at who else has done it before. Look at the popular applications of the design paradigm and mimic it. It's not being "cheap" or "uncreative" - it's being smart. If your users are already familiar with how your interface works, then it will not become an obstacle in their way of getting to your functionality.

Browser Resolutions and Webpage Widths

2009-02-09 17:37:32+00:00

With widescreen computers as popular as they are today, and with Firefox's usage now nearing 50% market share, I'm hoping that we're coming to a point where the web becomes a uniformly interpreted platform and is used for even more serious computing. I've already stopped pandering to people who don't move with the times. Many of my sites don't work in Internet Explorer and I put up a special disclaimer to those users instructing them to upgrade to Firefox, Safari, or even Chrome for that matter.

My sites of late have been growing in width. I was looking for statistics on the standard browser dimensions these days and found that it's relatively low - 1024x768, compared to the now outdated 800x600 from only a few years ago. This means that we essentially have another 224 pixels of width to our webpages that we can be designing for. That's actually a lot of space. Most sidebars on blogs are only about 180px in width and manage to include all sorts of auxiliary but useful information.

But the trick is *not* to make the width of your website the entire length of the browser. The trend these days (a trend I follow as well) is to design your site full width, but have the content at a fixed width and centered. That is, your webpage looks as though it's taking up the fullscreen, yet the content of interest only takes up say, 950px, leaving 74 pixels of padding on either side.

The CSS paradigm is as follows: all content divs consist of two: the outer and the inner. The outer div is 100% width, text-align center. The inner div is a fixed width with margin: 0 auto, so it floats in the middle. You see this all over the web now, for every section on a webpage: headers, content, footers, etc.

The NY Times, for one, a site super saturated in text and image content, is 972 px wide and floats in the browser's center. Yet they've managed to squeeze as many as FIVE columns of information in that space. My screen can handle the width being as much as 1224px (which I tried by altering the page's CSS using Firebug) yet at this width, the site becomes much more complex and unreadable. Surprisingly, by cramping the width down to 972 and leaving the extra white space on either side that most browsers are sure to display, the site design becomes a bit more acceptable. Your eyes can move back and forth from resting in the white space to delving into the complex columns of commentary in the center.

I'm frustrated by sites which have not adopted this new standard and am constantly annoyed when I visit sites with too much content for an 800px width or ones that have the content anchored to the left side of the browser, leaving the rest of the window barren and useless. So, make use of the space we have! Design for the majority, not everyone. If you try to design for everyone, you just end up making something that everyone's unhappy about.

The Bottom-Up Approach to Design

2008-11-09 14:25:20+00:00

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

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

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

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

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

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

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

Usability Testing is Limited

2008-09-22 14:01:24+00:00

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

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

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

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

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

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

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

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

Transparent Technology

2008-08-30 23:26:06+00:00

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

My thinking:

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

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

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

Customization and Design Integrity

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.

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.

It's the Marketing that Matters

2007-12-23 00:55:26+00:00

I'm sure there are plenty of neat websites out there with some nifty functionality, however basic or complex. But it's not about what you have, it's about how you get it known. Marketing your website is the real hurtle once you've created your project.

In the sea of popular 2.0 sites, many are at the core a very simple foundation. The first version of Facebook was quite simple and easily coded. Digg.com is simply a collection of links with ratings. Popular networking sites don't necessarily have to be complex to be popular - the key is just hitting the tipping point so everyone knows about it.

It's reasonable to assume that any decent piece of functionality you can make that's useful for you is also useful for hundreds of other people. But what does it take to reach those people to make them aware? How can you leverage the quick networking capabilities of the Internet to popularize your site?

Step 1 : Know Your Audience

If you're going to go market your product, you darn well want to ensure you're targeting the right group of people! If your site is geared towards college kids, don't go marketing it to business people.

Step 2 : Find the Venue

There are a lot of website that help you promote your ideas. Some people make videos on YouTube that take off. Others post something on Digg. More rely on getting featured on popular blog sites with high traffic. Seek out the sites that you think would help promote yours and be aggressive at getting featured! Off the web, there are newspapers and magazines. Journalists are always looking for stories and if you have an "in" with one, compose a rough article about your site and persuade the journalist why it calls for an article.

Step 3: Promotion

Getting featured on something isn't enough. It helps, but the progress can still be slow. So now that the name is out there, you need to ensure that you create the best experience for the users that trickle to your site.

It's like opening a new restaurant. You get a few customers the first couple days and you want to make sure they have the best experience possible so they go and tell their friends. Word of mouth is a big deal, so don't let people go away with the wrong impression.

Step 4: Be Open For Change

If you're getting many users to your site, collect feedback! Find out what people like and what they don't and be open for change. If something continually detracts from their experience, fix it! If there's a crucial feature you're missing, add it!

One of the things that helps make tipping points happen is the availability and willingness of site developers to adapt as more users visit. If people see that a site is in progress and the right changes are being made, they will stay with you.

~~

Of course, this isn't a perfect algorithm to getting a perfect site, but it does serve as a general guideline. You can't always rely on your perfect functionality to get the traffic you need.

Getting Others Involved in Enginetworks

2007-12-21 05:58:34+00:00

Interested in working on ideas for social websites? If you're the kind of person who is constantly coming up with neat website ideas and is able to implement prototypes fast and efficiently, join the collaborative.

Email me at: info@enginetworks.com

OneUpMe.com : A Site for Wordplay

2007-12-19 16:42:04+00:00

In the spirit of having a great idea and running with it, meet OneUpMe.com if you haven't already.

OneUpMe.com is a site I made exactly one year ago that features wordplay competition which fosters abstract and creative thought. Registered users compete daily in a competition to "one-up" each other with a more creative response to the phrase of the day.

Every morning, a phrase appears at the top of the site in the format of a "STARTER" followed by a colon and a "RESPONSE". The response is something that describes both a person and something else, specified in the starter. For example, He was like Stalinism: of Russian Descent or She was like a walled city: unnecessarily defensive.

If the phrase of the day is She was like conditioning shampoo: multi-tasking, users might respond with "always making promises she couldn't keep" or "often found in hotel bathrooms".

Like most InterNetworks that I create, this one's purpose is to develop an online community with a theme. Developing a reason why people keep coming back regularly is one of the hardest aspects of social web applications to accomplish. Creating a game-like environment is one way of fixing that problem.

So check it out, register if you haven't and play! It gets addictive when you get into it :^)

Recipes for Innovation

2007-12-17 02:38:25+00:00

When it comes to computing, our goals are always to complete some task. We have some idea of how to do it, but we need help. That's why we've developed so many new tools to help us accomplish our tasks better, faster and more efficiently.

But which is the real innovation? How we accomplish our goals? Or our goals themselves?

As I've said before, people don't want something new. They want something they've seen before, just different. I think that same rule applies to interface design for applications. In this case, we know what our goal is and we know how to accomplish it. We just want interfaces to help us accomplish the task better.

Let's talk about recipes.

All recipes are simply a combination of ingredients paired with a series of directions to produce something. These ingredients are nothing new or special - they're things we've seen before. You're not going to find many recipes that call for a specific type of newly-discovered sugar found only in the jungles of Madagascar. No, most everything that requires sugar will call for any old regular sugar. Now, the innovation in these recipes is not only in what ingredients they contain, but the step-by-step instructions that lead to the end product. It's all about HOW you use these ingredients that makes something cool.

Applying This To Interfaces: A Recipe for Success

Your ingredients are your interface elements and standard design practices. These are all handed to you before you create your product. You have this great functionality/food you want everyone to know about and you have to let them know by using a recipe. Combine all the visual, textual and interface elements you need and write out the step-by-step instructions on how to use your product, given these ingredients.

Your innovation comes in which elements you use and how you use them together. Maybe most applications call for simply flour and sugar. Maybe yours adds a little vanilla extract. Don't overcomplicate your recipe though - people don't want to take time to run out to the store for ingredients they don't have and they certainly won't want your recipe if it calls for things that are confusing. Pick something simple that everyone already knows and go with a twist. Then you can spice things up from there.

From Architecture to Web Design

2007-12-15 00:15:57+00:00

Your step-by-step guide to creating the foundation and all the little details.

An Architecture Analogy Again?

Yeah well, architecture is very similar to interface design. Let's think about some of the steps to building a house. You've got the floorplans, then you actually build the frame. Then you fill the frame with all the wiring and heating, etc. Then you cover up all the walls and start painting, adding trim, etc. And once you buy the house, you bring in your own furniture.

So what does this have to do with web design? Well, you need a floorplan for your site, a mapping of the user flow from how they start engaging in your site to how they move around.

You can think of all the piping/wiring as the functionality associated with a website. You build the HTML frame and you embed PHP or another scripting langauge to make everything work together.

Let's add the CSS, or interior design. Pick your colors, fonts and other styling elements to make things pretty.

Finally, if you're building a dynamic site, let the users "move in" and add their own content. You've provided them with a free, empty house with all the functionality they need. Now it's time they made it theirs.

So, here are your steps:



Step 1: Design your floorplan; your ergonomic flow,

        how you want the users to move around your site

Step 2: Build the framework to allow this flow

Step 3: Fill out your functionality to make everything work together

Step 4: Add your interior design; do some CSS work to define 

        colors, fonts, borders, etc.

Step 5: Let the users "move in"

Think of your site at each stage like a new house at each stage of development. Just be sure to actually deliver a final product to the customer. Just like the architectural process, you can't focus on the details until you get the foundation down. So don't get your priorities out of order and go designing the trim before you've even thought of how you're going to make the room!

Recognition to Expectation in Interface Elements

2007-12-13 13:31:06+00:00

As computer users, we've grown accustomed to various interface elements. We can recognize what action to take when we see certain things. For example, we know that a right arrow usually means if we click it, we will get some list of options that will drop down. Additionally if we see something that looks like a tab, we know our content will change if we click another. If we see a slider, this tells us we can adjust something to be more or less.

There's nothing novel about these elements; they are simply mimicking things we know from the real world. But for those who are not familiar with interface standards, it's hard to decide what actions to take. This is especially confusing if the interface elements are completely different than other applications.

In a few decades, it's highly possible that those of us who are computer savvy now are going to feel out of the loop when our kids come home with even crazier technologies. If that's the case, recognition should be the one thing that remains the same in all interfaces to come. Recognition and consistency.

The best way to become familiar with an interface is to click around and learn what certain things do. Then, as a user, you grow accustomed to expect certain things to happen when you perform certain actions.

This starts building your mental model of Goal + Action = Expectation. And as I've mentioned before, if you now come across an interface that goes against this equation, it's quite confusing. The older generation, who has less patience with technology and is a lot more hesitant to try things, will not enjoy this confusion. In fact, one slip can denounce any other learning that had taken place.

Think of the rat who's trained to press a lever and get food. After a few trials, he comes to expect food from his lever-pressing action. Then there may come a trial in which he presses the lever and nothing happens. If you've learned of any psychology, you'd know that this causes much distress in the animal. The rat becomes quite confused - and sometimes angry.

I'm not saying we're rats. Or maybe I am. Maybe this whole discussion speaks to our most primal instincts. Maybe the fact that we're more intelligent and can think a lot more deeply about problems than a rat is irrelevant.

Ensure when designing your interfaces that you stick to consistency. Before you create a new element (that may or may not do the same task as an existing element), think hard about why you're making something new and its potential consequences on the user's experience. After all, you don't want an unhappy rat.

Design is an Experience

2007-12-11 18:13:32+00:00

What is design?

Is it the graphics we use? The colors? The fonts?
Yes, those all have some effect on the end experience, but I'm talking about something bigger. Something more encompassing. Design is the whole experience. It's the fusion of technology with humanity and the arts that makes good design.
You should put the human experience first in all aspects from when you create a product to how you build it, advertise it, package it, get it to the users and interact with them while they use it. In that sense, design can be described as a long-term, multi-faceted engagement that forces us to think about everything that touches the consumer, on every level of detail. And while there are sets of design principles and guidelines, there's no set formula all around. The best solutions are different every time with every product and every person.

So how does this Design work? Our goal is to create products that will be useful and usable to millions of people. To do that, we obviously first need a useful product. Something with functionality that will improve our users' lives. Now we need a method to let our users use the product that will be intuitive and easy for them. To do that, we need to understand people and their needs. We are translating the mental model into a machine model by developing interface standards that match up to familiar things in the real world. We develop prototypes and test them. We analyze our audiences and the way they interact with technology. We look at the downfalls of other products and figure out how to improve them.

A Brief Look at the Mental Model

Users have goals in mind of what they want to accomplish. They also have an idea of the steps they need to take to accomplish these goals. Goal + Action = Expection, that is, they have some idea of what performing the action will do. When something goes against expectation, we have confusion. And we don't like that.

We put a lot of thought into how we design our products so that our users don't have to. Funny, but we want the user to focus solely on what they want to accomplish and not be distracted by finding the right tools. We know what they want to do and how they can do it, so it's just a matter of making it easy for them.

Say you want to build a model airplane. You as the user know what you want to do. We as the developer should provide you with the tools. But it's not simply a matter of giving you a bin of materials, paint, plastic, etc. It's figuring out which tools you need the most, which are secondary, which should be on the table and which should be in the drawer, etc. You want everything at your fingertips without being overwhelmed by too much clutter.

Analogy

Ever tour a new house being built to see the layout structure? Maybe you find that the living room only has one doorway or the upstairs bathroom is way down the hall from the bedrooms and you think, "Hm, well that's inconvenient." Or maybe you're reading a newspaper or magazine and get confused by the way the text and images are put together on a page. Or you start using a new computer program and find that buttons aren't quite in the places you'd expect?

These are all examples of going against intuition. That is, creating something that doesn't foundationally make sense to the user. And we're entirely against this. The architect may have his reasons for giving the living room only one door, but if we're finding that user after user finds this inconvenient, then it's not the architect's call anymore and we're gonna add another door. And then we're gonna find out what's the best place that door should lead. And then we're gonna figure out what kind of door we're going to put and how it's going to look. And then we're gonna make sure that it's easy to get to the door from anywhere in the room.

Why So Involved?

You may think this is tedious work. Why is it so important that we go to such lengths to listen to people and design in such detail? We've seen plenty of examples where products that are wildly successful lack thoughtful design. You could just throw in a bunch of standard design elements and call it a day. But having these elements is not enough to make your product the best it can be. Your turn to shine comes in HOW you use these elements to your advantage. How do you layout the structure of your application? Where do you place the buttons? How many clicks does it take to perform any action? When users open your application, what's the first thing they're going to do?

Can it really hurt to invest the energy? The payoff may be more than you hoped.

Image-ine a Site Without Images

2007-12-06 08:45:49+00:00

What is it about some websites whose makers think that having MORE imagery makes the site MORE usable? Can I just set the record straight here: number of images != amount of usability. They are not directly proportional.

Visual elements are definitely important to any application, but they are not to be relied on to guarantee great interface design. The key - as with most applications - is to find the right balance between the two. Where something can be text instead of an image, use text. Where something must be an image, go ahead and use an image.

Interaction design is focused more on layout than graphics. It's about how you design the positioning of your content. Plenty of websites have extremely minimal graphics, which declutters everything and allows for greater usability. Look at Google, whose interfaces are completely bare, save for the occasional colored horizontal rule.

I think Marissa Mayer said it best when she described Google's UI:"All of us on the UI team think the value of Google is in not being cluttered, in offering a great user experience. I like to say that Google should be 'what you want, when you want it' as opposed to 'everything you could ever want, even when you don't.'"

The Handy Dandy Kitchen Helper : Site of the Future!

2007-12-04 18:57:43+00:00

Ah, the Honeymooners. And ah, multi-faceted websites. I wish that someone would invent a household utensil that would do the work of all of these (said, of course, in the Art Carney accent).

Ever find yourself staring at an application that has virtually no functionality and a completely overcomplicated interface to cover it up? You look at it and say "ooh pretty" and then realize "wait, what does it do?"

Conversely, you may find yourself at one that has such complex functionality that it's impossible to figure out where to start!

Well it would appear we have two problems:

Minimal Functionality

If you're thinking about making an application and you're focused too much on the interface at first, that's a problem. Make sure you've got your functionality down before pretty-ing everything up. Why are people using your product? What do you have to offer? If you can't think of something useful, then perchance you need to do something else.

Build useful functionality and then a usable interface on top of it. Don't get these switched. The best interfaces come when the functionality is clear and uncluttered by interface design.

Extreme Functionality

If you've thought long and hard about what your application can do and have implemented all the functionality, that's great. This is a fantastic opportunity to develop a nice interface because you already have the core of your product designed.

From here, you need to figure out what aspects of the product are most important and design the interface around that. Do not overclutter. Try a version that has as little as possible. Then sit with it for a while and see if it makes sense to add more components. Don't go drawing all over the whiteboard with graphic ideas to make the site pretty.

It's all about process. The user will use the application in steps and you should design in steps too. When you get it down, as Ralph Kramden says, "Alice, that's big, big, big! This is probably the biggest thing I ever got into."

...and then Alice says "The biggest thing you ever got into was your pants."

Application's the Word

2007-12-01 03:02:06+00:00

Please note I've started referring to website as "applications" since discussions on user interface design principles apply to all kinds of technology including both web and desktop applications.

If you think the web is different than a desktop app, think again. I mean, yes, there are plenty of differences, but interface design principles remain the same through both. There are components on the web that you don't get in a desktop app and conversely, but at the core, if you can design a usable web application, you can design a usable desktop application :^)

Spaces

2007-11-27 00:18:10+00:00

Define spaces in your application.

Too many websites and desktop applications jumble everything else. Again, like a house floorplan, divide everything into spaces and figure out the 'transition functions' between them.

Think of traffic flow as it relates to kitchen design or general house design. Which are the important/most-used rooms? How many paths are there from one room to another?

Seriously - ever go into a house that has only one entrance to the living room? Personally, I feel blocked in. You should always have at least two entrances/exits to/from public spaces.

Okay, let's relate this to websites. Don't make a page that's only accessible from a series of clicks. Users should be able to view nearly every page through a small number of clicks. This means all the most-used pages need to be accessible from EVERY page. Smaller sub-pages should be only two clicks away. Once you pass three, you're on thin ice. You can easily lose your audience's attention this way.

That's why having search capabilities is great. Wouldn't it be neat if you could jump to any room in your house? You have that power with the Internet - so use it!

Confusion leads to abandonment. If your user is lost, he/she will probably just close the window and go to another site. Or buy another house.

Designing in Steps

2007-11-26 21:50:40+00:00

If you're creating an application that DOES something (as opposed to say, a website where users just search for something) it's essential to design in steps.

What does that mean? You need to figure out how to user interacts with the program at each critical point. For example, what does the user see when he/she starts off? How intuitive is it to find where to go next? And if the user is able to get to step two, are the guidelines clear?

Often times, a user will have a series of steps in mind before even using a program. In Microsoft Word, the user may go in with the following:



1. Start a blank document

2. Type a letter

3. Format

4. Print

Your goal as a designer is to make this process as fast as possible. From the getgo, they should be able to easily start typing. Now, Word is generally a very usable program, so there are no qualms here.

Conversely, on a website that holds a lot of information, there should be a clear direction of where to go "FIRST" and "SECOND" up until a point where the user feels comfortable enough to start randomly clicking around. Presenting too much information -- or too little, in some cases (like Flashy restaurant websites) -- is confusing!

Take some time to sit down and draw out a map of your program and a few scenarios. Ensure that the user can accomplish these tasks easily. If it's not immediately obvious in some cases, it's back to the drawing board.

Strike 1, You're Out : Increasing Learnability

2007-11-24 19:36:24+00:00

When it comes to technology, I think the main difference between the young and older generations is the amount of patience.

Older people, who have lead most of their lives in the absence of technology, are much quicker to denounce the advantages of the computer when something doesn't work. Conversely, those of us who have grown up amidst the silicon chips are much more lenient when problems arise.

The baby-boomers and their parents are far less likely to "try it and see what happens." If they press a button on the computer and it doesn't work, they won't try other options. They'll just stop. If an error message pops up, they won't click "OK"; they'll worry and call someone younger. For me and others in my age group, problems with the computer is just part of the learning experience. Seeing an error message doesn't cause panic; getting the wrong search results doesn't cause anger towards Google.

Yes, more and more people are like us in their interaction with technology, nevertheless it is still imperative that the learning curve on any new product be very small. Learnability is your first step at using a technological product and if it's too confusing, you're going to lose the impatient members of your audience.

So if you're designing a website or desktop application, make sure your mother and grandmother can use the basics before you go marketing it.

The 'Novelty' of User Experience

2007-11-23 16:54:47+00:00

In the movie industry, people don't want to see something new. No, they want to see the same stories over and over again told in different ways. We all know that the main character will live and the hero will get the girl. What we want to see is HOW.

The same is true of interface design. Present a user with a completely new interface and they're hesitant, confused, uncertain. There's so safety net to fall back into. We know what we want to accomplish, but we don't know how. Yes, we've done it before in other applications, but we have our problems with those interfaces and we want a new way to accomplish our tasks at hand.

This is not to say don't be completely innovative when it comes to designing an interface. Just ensure that there are features within your design that mimic those already familiar to the users. For example, look around for similar navigation structures and information architecture.

On a website, the user is going to look at three things to determine what to do next:
(1) The logo/tagline -- are we even on the right site?
(2) The navigation -- what are my first steps?
(3) The content -- is this what I'm looking for yet?

In a desktop application, the user is going to start by looking at the menu bar for familiar buttons such as "File" and "Edit" which all applications universally share. Windows' new version of Office (2007) with its Fluentâ�¢ interface has redone the menu bar to be more intuitive - we have yet to see how well it's received among the masses.

In general however, the "novelty" of user experience comes in how you tell the story - not the story itself. We know how the story ends. Tell us how it happens.

Case Study: An iPhone App for Target

2007-11-19 04:38:54+00:00

Target is the fifth largest retailer by sales revenue in the US. As such, its website generates a lot of traffic focused around buying products. It's clear from just looking at the website that they're big on advertising special deals, hot items and product searching. There is a lot going on and our goal is to figure out what's most important for the iPhone version.

» What Does It Do?
Tells users about sales, special events and hot items
Lets users browse for products by category, age or arbitrary
Displays store information, store locators and other company info

» What Are The "Cool" Features?
Nothing is spectacularly interesting

Part One: What's an iPhone Interface?

The interesting thing about web applications for the iPhone is that their focus, user-interface-wise, is completely different than on a normal browser. Most notably, web applications are to be presented as a series of menus, which means navigation is key. While the iPhone Safari allows for zooming in and out of normal webpages, users will quickly learn that this is not the optimal situation. Therefore, the focus in the interface is on creating small amounts of content per space, several spaces and large buttons to get around.
With this in mind, sites must now decide what their main features are and promote them in the iPhone design. What are people going to the site for? How fast can you get the users to their desired destination? Most iPhone versions disregard a large percentage of the content you would see in a normal browser. Instead, the iPhone applications are much more directed and certainly less cluttered.

Part Two: Building the Basics

Because Target is a retailer, users are primarily interested in finding items to purchase. Right away it should be obvious that an iPhone version should present the user with a list of items (taken directly from the site's navigation). Then through a series of menus, the user will eventually find the product he/she is looking for, along with information about the product.

Remember, we want our site to be broken down into a series of small menus or spaces, so we need to consider what these spaces are and how best to design them.

HOMEPAGE
Chances are, users looking at Target.com on an iPhone are searching for something specific. You're on the go and you're trying to find something - you're not there to browse. So the interface should get to the point as fast as possible. That means SEARCH is the most important feature. From the homepage, the user should be able to search for a particular product first and foremost. If not, then there should be a list of categories to choose from.
But if we include tabs, we allow for extended functionality. Perhaps the user wants to take a quick look at the "hot" products" or perhaps look up something in the company info (i.e. store hours, store locations, etc.). We don't want to overdo it, but having (a) search, (b) tabs for alternate content and (c) a list of product categories allows for multiple interactions. In this way, we can cover all the bases.

HOMEPAGE (ALTERNATE)
Another option for the homepage is to enclose all the categories in a select box. This saves room and allows for other content on the homepage such as a Javascript horizontal scroller list of hot items. Tapping the arrows will slide the images left and right. This allows for quick browsing if something catches your eye. Below the select box browsing, there can now be large links to pages like My Account.

RESULTS PAGE
Once you've searched for an item or clicked through a series of categories, you now have a list of resulting products. How best to display? Pictures can be too small. Text may not be descriptive enough. But the two together can provide enough context to adequately tell if you've found what you're looking for. Each list item should include a close-up product picture, the product title, the price and a link to view the details. The cleaner the better; no need for the eye to get distracted by anything other than the basic product information.

Only a certain amount of search results should load initially, like the iPhone Mail application. Scrolling to the bottom should display a list item that says "showProj More Results"
Note: now that we've navigated away from the homepage, we don't have our search box anymore. Instead, we maintain a "Search" button at the top of every space which, when clicked, will make a search bar pop up. Clicking the Back button can take you to the previous page.

PRODUCT PAGE
The product page will have a larger image, larger title and price and a description of the product.

Now, we have a few options from here:
ADD TO CART button - add the product to your virtual cart
FIND NEAREST STORE button - if you're on the go, let the user know where the nearest store is and how long it's open for

If the application is cookie-based, then the user can automatically be logged into his/her account when visiting the website. In this fashion, instead of a purchase button, we can have an "Add To Cart" button which will add it to the user's account cart. The next time he/she logs in from a home computer, the item will be in the cart and ready to purchase. Shop on the go, but purchase in the safety and comfort of your home.
Product pages can also display relevant information such as customer reviews as well as items that other customers bought along with this one, for example.

FOOTER
Just like every page has the same top bar that allows you to go back and search, the bottom of every page should also maintain the same functionality (a footer). This can include links to your account, shopping cart, home and a help section. It's important that the user can move to several spaces from any given space.

Part Three: Putting it All Together

Designing an interface for the iPhone is all about menus and simplicity. Users don't mind tapping more than a few times to go from place to place. Each space should be very readable and easy to use, including large text and large buttons. There should be no need to struggle to view anything or tap a link. Pages can scroll, but there should be a height limit, hence limiting search results to a certain amount at a time.

Key points to make:

SEARCHABILITY
When you're on the go, you want to find things fast. Allow for searching from anywhere on the site, especially if it's product/retail-based.

NAVIGATION
Web applications on the iPhone are better suited for a series of menus. Don't put too much content in one space. Have several spaces and buttons. The user won't mind tapping, as long as the amount of tapping doesn't get to be too much! Always have links back to neutral/important spots from any space.

FOCUS
Don't overcomplicate. Understand what the user will be looking for and allow quick and easy access. There can be many things on one page, but ensure that they are spaced appropriately so everything is readable.

Case Study: Google Earth for Mac

2007-11-19 04:30:13+00:00

GoogleEarth is actually a very usable application. It can perform a variety of "tricks" and it's been very successful among users. Some things, however, don't match up with other Mac applications. Additionally, all the advanced functionality can be confusing.

» What Does It Do?
Lets users view aerial photos of the world
Draw on, measure, email and print areas
Create tours consisting of several locations
View all kinds of layers (i.e. 3D buildings, roads)

» What Are The "Cool" Features?
Everything except for drawing functions

So what's wrong?

MAKING IT A MAC
A lot of the interface is not Mac-specific. Google has created its own icons and button styles and it doesn't match up entirely with the rest of the Mac interface. Luckily, it has a cohesive and understandable menu bar. It's simple, intuitive and it matches up with other Mac applications. Therefore, we're primarily concerned with redesigning the program navigation and viewing options.

VISIBILITY
A lot of the program's functionality is lost because the tools in the left sidebar are squished and do not have enough space. Because you're left to explore for yourself, you may not come across the features that actually interest you. We can fix this by spacing things out more.

Part One: Making it "Mac"

When we say "making it Mac," we mean integrating it with the Mac OS X interface by using standard interface elements. Google Earth has created its own icons which could easily be "mac-ified." The point of doing this is to build familiarity with the users so that they feel more comfortable using the application in the Mac environment.

We first mimic Mail by surrounding Google's icons with glossy buttons and spacing them out more. We also provide each icon with a text description so users can see the button's functionality.

The ruler functionality can be implemented through a menu bar command and/or keyboard shortcut (such as Command+R) while the "View in Google Maps" icon can also be placed in the menu bar under "File".

Next, let's mimic the Mail and iTunes applications since the Google Earth interface is already very similar. If we create other spaces, like perhaps a side and bottom bar, not only does this separation allow for both viewing and searching options to have more room, but visually the user is a lot more aware of the difference in functionality.

Finally, let's copy nearly every Mac application by putting a search bar in the top right of the top bar. After all, this IS primarily a search-based application, so it makes sense to place the search bar in the same location as every other application. Again, this builds user familiarity.

Before we continue with adding mac-like interfaces, we need to analyze the functionality that's squished together in the left sidebar.

Part Two: Visibility

Google Earth can do a lot of stuff. If we break up the functionality into different spaces, we have a better chance of understanding all its features and better ability to make use of them. We'll start by identifying the different pieces and what we'll need:

VIEWING OPTIONS
The layers - or viewing options - allow the user to select what they want to see when they peruse the earth. Several of these are grouped under a parent so there may be a series of clicking arrows before finding the right layer.
Of the three big features, viewing options is probably the least clicked. It's more of a "settings" panel. As a user, you decide what layers you want to be viewing and then you're off to explore. Therefore, this doesn't need as much prominence and could be tucked away in a sidebar. We can showProj and hide this at will, allowing it to be out of sight for the majority of your searching and not in your way.

SEARCHING
We've addressed basic searching by placing the search bar in the top bar. However there are other search capabilities that we want to allow (such as searching for local businesses and directions). We also want to be able to keep a list of our previous searches for reference later.
But wait...Google is THE search king. There's no reason why our newly-created search form in the top bar can't be a smart search. That is, it can detect if what was typed was a location or a business and search appropriately. For example, if you type "11 Farm Meadow Road, Newtown CT" it knows that this is an address and can zoom to that location. Now in this context, if you type "pizza" it knows the user is looking for pizza restaurants in the area and it can mark them similar to Google Maps on the iPhone.

DIRECTIONS
You can get directions from any one place to another, just like Google Maps. Only in this case, you can zoom from point to point along the way, which can be much more useful.
Using Smart Search allows us to get rid of the search panel entirely. We can allow for directions by mimicking the Google Maps iPhone interface again. That is, you search for a destination first and then you can click on it to select "Get directions to" or "Get directions from." This functionality is already provided by the current interface so having it twice is redundant.

TOURS
One piece of functionality that may be overlooked is tours. This allows users to set up a tour - or list/group/playlist - of destinations and then "go sightseeing." Pressing play will make the application zoom from place to place as if you were traveling the world. What's not intuitive is how you create a tour and add destinations.
Lucky for us, we've gotten rid of both the search and viewing options panel on the left, so we are free to expand tours and search results to take up the entire left side. Everytime a user conducts a search, we store the result in a list. Similar to the iTunes application, dragging an item from a list to a "tour" will add it to the playlist.

In this sense, your "recent searches" becomes your iTunes songlist. Your "tour" or "groups" becomes your iTunes playlists. Users can add tours like they would playlists and continually drag searched locations into a tour folder. Then, after selecting a tour, the user could go sightseeing!

Part Three: Putting it All Together

Google Earth is a perfect example of an application with great functionality and a fairly decent user interface. Some minor tweaks to make it "Mac" allow for more visibility of functions, which allows for a more intuitive interface. Adding Mac interface elements integrates the application with other Mac applications and spaces out the features more so things are more easily recognized and usable.

Key points to make:

SPACING
Breaking up functionality into different spaces visually separates functionality, which means the user can understand the program's features better.

INTEGRATION
Small adjustments like making glossy buttons and standard window layouts make the program more integrated with other Mac applications and thus more intuitive from the getgo.

VISIBILITY
Having too much functionality crammed into a small space is confusing and frustrating. Users don't want to constantly have to resize spaces and scroll. Don't hide functionality or else you run the risk of users not finding it. Ensure all your features are visible.

Case Study: EyePuzzles JPEG Puzzle

2007-11-19 04:21:57+00:00

At first glance, EyePuzzles JPEG Puzzle is a program with a lot of advanced funtionality but not a very user-friendly interface. This is a common problem in several applications and it's unforunate especially when the lack of a thoughtful interface prevents users from using the application to its fullest extent. Download from eyepuzzles.net.

» What Does It Do?
Load one or multiple images
Catalog all images from a selected folder
Alter image(s) with various effects
Create collages by overlaying images and blending them together
Draw shapes and lines on the images
Break final image into smaller pieces and randomize to create a puzzle

» What Are The "Cool" Features?
Ability to view all images in a folder
Ability to add visual effects and make collages
Ability to create a puzzle game from an image

So what's wrong?

SPACE
We have no definition of space. That is, we need a grouping of similar functionality so the user has a better understanding of what he/she can do. Currently, all the functionality is split among too many menu bar options. There is only one application window and it's as basic as can be. At first, it's not immediately obvious to the user what the program's capabilities are. Revealing its true potential requires too much investigation.
The lack of space also means that all of the program features are not visible. Therefore, it's not clear what you can and cannot do with the program. Also, clicking some of the menu options doesn't do anything and requires the user to perform another task after in order to see the effect. The steps aren't clear.

DIRECTION
Another issue is that we have no starting point. It's exceedingly important that the user has some direction when the application is first opened. We have learned through the years that a general starting point is to go to File -> New or File -> Open but that feature doesn't exist here. So, it's not apparent what the application's purpose is.
Without a start screen, instructions, overview or standard menu bar options, the user is left to click around and try to figure out what the program does. And even then it may not be obvious because there are a series of buttons that need to be clicked in succession in order to accomplish even the simplest of tasks.

MODES
It's not immediately clear that the program has two modes: editing and game. Therefore, it's easy for the user to be confused about which mode he/she is currently in, since there is no indicator!

Part One: Defining Spaces

It's important to separate the functionality of the program into different zones, or spaces, so that the user knows where to look for certain features. After listing the program functionality and deciding which are the most important features, group everything together into a few zones and figure out which type of interface is best suited to convey the functionality of each space.

INSPECTOR
We want the user to feel there is a "place for everything." We do this by establishing different spaces, modes, etc. It's pretty clear from the beginning that we need some kind of editing panel where the user can add effects to the images. We do this by creating an "inspector window" that takes all the image functionality out of the menu bar and puts it into a much more user-friendly space.

Grouping general functionality together like this not only de-clutters the menu bar, but it mimics other programs which have separate editor windows (such as Photoshop, Illustrator, Keynote, Pages) and has real-life references to an artist's pallette.

SIDEBAR
One of the neat features of the program is its ability to open all the images from a specified folder ("cataloging"). However, it's not intuitively clear that clicking "next" in the slideshowProj menu bar, for example, will go to the next image in the selected folder. Similarly, it's not clear that the user can import multiple images into the workspace and overlay them to make a collage. The solution to this problem is to have all the images load in a sidebar that slides in and out of the side of the application.

When a user selects a folder, all the images will load into the sidebar, mimicking Preview's functionality. Additionally, images should be able to be dragged and dropped into the workspace, rather than through a series of menu bar clicks. This method of interaction is far more intuitive and on par with the rest of the Mac OS X interface.

PANEL
While the program allows for several images to be placed in the workspace, it does not allow for easy alteration. That is, the user is limited to where images can be placed and how they can be moved around. Images should be in layers - like Photoshop - so that the user has total control over placing, resizing and rotating images within the workspaces. Users should be able to make arbitrary decisions on image placement and orientation. Layers should then be visible in a side panel.

The layers displayed in the panel should be sortable, as in Photoshop, and selecting a particular layer should alter the state of the Inspector so that the appropriate property values are changed to reflect the image's current state. Changes made in the inspector should only affect the image(s) selected in the side panel.

TOPBAR
Like most Mac OS X applications, the main application window should include a top bar which should house a series of icon-based buttons. These include zooming in and out, viewing the previous and next image as well as print and email icons. It should also include a button to hide the drawer as well as a button to switch from Text to Image mode.

Part Two: Creating Direction

Breaking functionality down into different spaces already creates some direction for users. It tells them which functionality is most important based on the space prominence and organization. But we also have to consider the menu bar and initial view because, as with most applications, this is where users start first.

SPLASH SCREEN
What do the users see when they first load the application? Currently, it's just a very large black screen. This is unhelpful. If we replace this with some dialog that tells the user he/she needs to load an image, then we're well on our way to using the program!

MENU BAR
Users are familiar with the basics of any application and that includes standard menu bar options like File, Edit, Help, etc. When faced with a new application, their first instinct is to look here to see what their first step is, if it's not immediately obvious when the application is opened.

MENU BAR » FILE
We need a File option in the menu bar. This will include several pull-down options, including:
Open Image
Open Image Folder
Save
Save As...
Print
This will allow the user to right away see that he/she must load an image or folder of images to get started.
If the user selects one image, the entire image contents of that folder will be loaded into the sidebar. The selected image will be displayed in the workspace. The left panel, which showProjs layers, will have only one image listed. Users can then drag other images from the sidebar into the workspace.

MENU BAR » EDIT
The Edit option will allow standard functions such as:
Undo/Redo
Cut/Copy/Paste
Clear Screen
Any other editing-type options

By default, users know to go to the Edit option for these functions, so it makes sense to provide them here.

Part Three: Separating Modes

We need a way to let the user know that he/she is in editing mode versus game mode. This is easily determined by examining which functionality does and does not exist in each mode. Then we need to alter the interface in some way so that one mode doesn't look like the other.

EDITING MODE
In editing mode, the user is focused on the workspace. He/she can add/remove images and play around with image and screen effects. This mode is where the user essentially builds his puzzle (or just a neat-looking image). Here, we showProj the inspector, the sidebar and the panel.
When the user clicks "Puzzle-ize!", a dialog sheet pops up asking the user to specify the level of difficulty (i.e. how many pieces to the puzzle?). After selecting one and clicking "OK", we leave editing mode and go into game mode.

GAME MODE
In game mode, the user is solely concerned with moving puzzle pieces around. Therefore there's no need to have the sidebar, panel or inspector displayed. When the user clicks "Puzzle-ize!", the image should zoom to fill the entire application window and the inspector should hide. The buttons in the top bar which are related to editing mode (such as zoom) should be disabled and grayed-out. Meanwhile, the "Puzzle-ize" icon should turn to a Pause or Stop icon which allows the user to return to edit mode.

It might even be fun to display "Time Elapsed" since the game started so the user can time him/herself :^)
In the current version, it's not clear how the user is supposed to play the game. You're supposed to RIGHT-click on a puzzle piece and it swaps images with the previously selected piece. When a piece is in the correct place, it becomes unclickable.
This functionality can be better designed by first enabling LEFT-clicks and then making all the puzzle pieces slightly darker and with a bright border while they are not in the correct position. When the user moves a piece to the correct position, it should become dim and the border should disappear. The contrast with the other pieces is a clear signal that the piece is in the correct spot and the user will not accidentally click on this piece anymore and wonder why it can't be clicked. In keeping with other buttons in the Mac interface, something that's grayed-out is not clickable.

Part 4: Putting it All Together

We see there is a delicate balance between complexity and simplicity. Both having too much and too little can confuse the user. It's all about figuring out just the right amount to showProj so that the user has enough to start working but can still explore to find other details without being overwhelmed.

Key points to make:

LEARNABILITY
Ensure the amount of time it takes for the user to understand what the program does and where to start is small. Taking too long to learn results in frustration. Users should always have a starting point and a place to go next.

FAMILIARITY
Ensure that there are several aspects of the program that mimic other Mac applications (buttons, functions, etc.) That enables the user to understand the program better even if the functionality is entirely novel.

USABILITY
When it comes to actually using the program, don't make the user click around too much. Ensure that the process for using the program is easy and simple; not overly complex. Since there are so many image-editing applications out there, it's especially important in this case to ensure good usability.

Search vs. Browse

2007-11-14 21:02:34+00:00

For sites that display products or items that people might be looking for, it's important to allow for both searching and browsing.

Think of when you go to a store. Depending on your current rush, you may need to find something quickly or you might have more time to browse around. The search bar is your "quick ask" tool (without the hassle of trying to find someone in the store to ask!). Meanwhile, browsing allows you to saunter through the aisles until you find the product you're looking for.

Don't assume people will always have time to browse. Especially on the iPhone, Internet is "on the go" - no one wants to browse. People want to find stuff quickly. So searching on a product-based web app is essential.

Too many sites out there don't allow for quick searching - or have too complicated a browsing system. As Thoreau says, "simplify, simplify, simplify."

Information Architecture and Interface Design

2007-10-10 14:30:46+00:00

You may have heard the terms "information architecture" and "interface design" especially when it comes to websites. When there's a good relationship between the two, then you have yourself a decent site.

Information architecture is where you put all of the stuff on your site that drives people to visit and how it's all linked together. Interface design is how you design their interaction with your content and how it's all found.

For example, suppose you want to have a dictionary website that has a list of all the words and their definitions. That's your content. But there are several ways to organize it through the site. For example, you may have a page that lets users browse for words. You may opt to just have a search box. It's up to you as the designer to determine how the user navigates the site to find what he/she is looking for.

This idea goes hand-in-hand with navigation principles (from a previous post). You can present all your content on one page if you want, but that's probably not the best solution. Instead, breaking it down into smaller subsets will make things a lot easier for the user.

So when thinking about information architecture, design where certain content belongs: what goes together? What doesn't? Where should there be links between pages/sections? What should be visible on one page that may not be visible on another?

Once you've developed this sitemap, then you can start designing the interface to make navigating easy and pretty.

An Analogy: A House

The floorplan of a house is like your information architecture. You've decided that there's a doorway from the kitchen to the dining room because there will be a lot traffic between the two spaces and it makes sense to minimize the distance as much as possible. Similarly, it makes sense on a website to link one page with an appropriate other page.

You can think of interface design as how you get from one space to another. What kind of door is between the kitchen and the dining room? Is it a door that opens both ways? Is there a little window from the kitchen to the dining room? What does the door look like and how are the rooms designed? Etc.

Dynamic Media and "InterNetworks"

2007-09-20 18:17:45+00:00

Static media is fading.

People want to be able to control and interact with the media now. They don't want to be presented with content as though they are watching from behind a glass wall.

When the Internet first emerged, it served essentially as a large encyclopedia or newspaper. People browsed websites searching for information. But now in this new age of networking, no longer do we approach the Internet purely to "look something up." No, we use it to engage with the world, with our friends, with companies and individuals.

Websites that purely present static content aren't in their prime anymore. If you're considering creating a website to display information about your organization , think carefully. You'll want to create a site that will draw people to it again and again, and often. You do this with dynamic media.

What is dynamic media? Just go by the definition: media that is changing. But don't go by the book to define "media." Initially you might think of media as advertisements, television, movies... but as we've seen in top-viewed websites these days, media also includes blogs, photo galleries, instant messagers, social-networking websites and we're constantly creating new ones.

But adding dynamic media to your site is only step one. Put up an often-updated photo gallery and you'll have visitors coming back to check the new material. That's not enough, however, to throw your site among the best. Your content may be changing, but you're still presenting information to the viewer. The key is building a community with your content - or better yet, making your site generate its own community and content.

"InterNetworking" - that is, networking with the world via the Internet and web applications - is growing fast. And all internetworks are not necessarily complicated code-wise. Yes, they include some new-age dynamic media, but even basic versions of most of those aren't terribly difficult to create.

Provide a way to make your site a hub for communication and you're on your way to something far superior than what you may have initially considered.

More to come on this topic...

Processing Forms: Javascript or PHP?

2007-08-29 16:04:46+00:00

I've dealt with a lot of online forms. Most, on submit, will refresh the page and process the data before the page loads. Then it will tell you of any errors you have.

Sometimes, a page reload can take a while. If you're filling out a long form and then wait a minute for the page to reload, only to tell you that you forgot to fill in something, it can be quite frustrating.

Processing forms with Javascript FIRST can make all the difference, especially if you need to check for blanks before actually processing the information. You can easily write a Javascript function to run through all the form elements and check for blanks, returning any errors it finds. This happens lightning fast for the user, so there's no need to wait. THEN, if everything is set, you can either choose to refresh the page and process the information in PHP (forgetting about checking for blanks, since that's already been done) and that will also save some page reload time.

You can also choose to send all the form data via AJAX to a separate PHP page which will process it all and return something back. In this way, there is no need to reload the page and you can just display to the user a spinning gear while AJAX is retrieving results.

I think seeing a spinning gear is sometimes a lot nicer than seeing a blank page. Spinning gears tell you something is working at least. Imagine trying to search for airline tickets and seeing a blank page for 20 seconds while it works in the background. Not so hot.

But reloading a page to process a form has its advantages. I'd recommend you try both options to see which works best for your site. For example, logging in - which will most likely need to take you to a new page anyway - might be the kind of form you want to process by page refresh. Changing your information only to see a "success" message doesn't require a page refresh.

So feel it out, but keep the user's experience in mind.

Getting Lost in a Website : Navigation Principles

2007-08-26 03:16:34+00:00

Ever go to a website looking for something specific and you just can't seem to navigate your way through the pages to find it? It happens a lot and it's the result of poor navigation planning.

Information architecture I feel is one of those things that you kinda think about but you don't always pay that much attention to when making a website. But really, it ends up being one of the most important parts. After all, the whole point of your website is to display content and if a user can't even find the right content, then what's the point? You want users to find their way around easily. If they have too much trouble, they might just give up and go look at some other site.

The "Nav" Bar

First and foremost, you should always somewhere have a clear-cut navigation bar that appears on every page of your site. A website is not a book or magazine where the user can just flip back a page to read previous content. You always need to provide a guide to your users, a "road map" if you will.

How you organize your nav bar depends on what kind of site you have. If you have a lot of information to display, you probably want to use some kind of hierarchical structure, where a user can start out broad and click links to narrow the focus.

If your site isn't specific like that, maybe you just want links to the main pages of your site. Those pages can have their own links if necessary. What you DON'T want though, is too many "local" navigations. That is, if every page you visit has a different set of links, it gets quite confusing and your users will lose their way.

Top or Side?

You'll notice that most websites either have their navigation on the top or on the side. My preference? It really depends on how many pages you want to link to. If I only have a few, I'll usually make a top navigation. It saves real estate on the rest of the page. But if there are several pages to link to, a side navigation makes more sense because it's easily expandable down the page.

But seriously, please don't use a side navigation if you only have three links or so.

Another option, of course, is using a top navigation that displays more links on mouseover, which seems to be quite popular as well. This isn't my preferred style mostly because sometimes it's unclear how the sublinks are grouped and you often have to mouseover several links before finding the sublink you want.

Wrapping up...

Just make sure your users can find what they're looking for fast and easily. Count the clicks.
Too many clicks means there's a lot to fix :^)

iPhone : Look at the web differently

2007-08-12 19:54:18+00:00

I've been spending the last couple days playing with the iPhone, browsing websites that have been "iPhone-ized" and trying to develop iPhone versions of existing sites of mine.

My thoughts? If the iPhone is as successful as people predict and the network/comms technology industry moves more toward mobile devices, then there will be a huge wave of a new kind of web development.

Currently, you can view all the regular websites with the iPhone, in a zoomed-out view that forces you to have to double-tap and zoom in to be able to read things, use forms, etc. However, sites that have already started developing versions for the iPhone have realized that people don't want to have to zoom in and out. So, the new apps are developed so that they fit in the 320 or 480px wide view, no zooming required.

They've also designed the UI so that it mimics the iPhone interface: glossy buttons, a lot of Javascript animation, background images, etc. In fact, sometimes you can't even tell you're looking at a webpage.

In these new versions, there's no such thing as a "webpage" anymore. Websites basically become an array of interactive menus, where one button leads to another menu, etc. But the possibilities seem endless of what can really be accomplished with this new way of designing sites and I look forward to examining that more.

Improving User Experience Through Client-Side Scripting

2007-07-27 02:29:42+00:00

I feel pretty comfortable with AJAX and Javascript nowadays, which is great because I just started playing around intensely with these two languages in late April.

Being that I'm interested in user-interface design and how people interact with technology, I'm almost sorry that I wasn't as familiar with these ideas earlier. But then again, not knowing it at first has made me appreciate it all the more. As far as user experience is concerned, AJAX and Javascript really improve it.

Javascript

For one, if you're going to display a bunch of content on a page on load, sometimes it's good to hide some and show it via a link that calls a Javascript function. It's always nice to go to a site and be able to see everything you need without having to refresh the page. No one wants to sit through another minute of waiting for the page to load just to see some other content that could easily have been put somewhere on the previous page.

Client-side scripting is also a lot faster than server-side. So if you're going to validate a form, might as well do it through Javascript and have instant results, versus reloading the page and having PHP check every value, echoing an error if it finds one.

AJAX

The great thing about AJAX is that it gives you all the functionality you would otherwise get from loading a new page, except the user doesn't have to sit and wait for the page to load.

I think the best use of AJAX is what I call the "secret use", where AJAX calls are sent to the server without the user even knowing. Usually for large tasks, the user will be presented with your typical animated gif loading icon, so they know something's up. But if it's simply updating a database with some info, there's no need to let the user know necessarily. You can let the AJAX call run in the background and the user can continue using your site, unaware that a simple click he/she made that took a second has altered some setting in the database.

This is particularly useful for editing settings and the like, where you wouldn't want to refresh the page after every change, nor set a bunch of properties in a form and click "Save" at the very end.

What now?

Well I can't imagine ever going back to my "static" ways. When starting work on a new site, my first thought is how to make it Javascript and AJAX-based. A little extra work on your part as the developer goes a long way for the user's experience.

After all, isn't the goal to make everything appear simple?

Focus Your Site Design

2007-07-24 03:48:18+00:00

It's amazing to me sometimes how little people know about design. They seem to know all the stereotypes or what generally looks good, but they don't necessarily understand the concept of interface design or color scheme or focus.

I was looking up a restaurant online the other day because I wanted to look at the menu. Instead, I got a Flash application that took a minute to load and then presented me with all these different animations, loud music (which I was not expecting) and crazy colors. It took me a while before I could actually find where the menu was. And even then, it wasn't linked in the right way. Yeah, the site looked pretty, but it really took away from its focus.

Focus.

A lot of the time, people will either over-design their site or under-design it. The example above evinces the over-design aspect. It's a restaurant. Most people would go to the site to find out (a) where it's located, (b) how to make reservations and (c) the menu. If all that information is easily attainable, then it's ok to go ahead with all the other stuff.

The other end of the spectrum is the under-design - and you tend to see these kind of sites when someone just wants to put up some information quickly. Sometimes it's a real shame too, because the content is important and it's just displayed terribly.

So when thinking about the design for a website, think carefully about its focus. Sometimes you can embellish the design with lots of colors and images for effect. Other times, you might just want simple lines, light colors and emphasize the text (and you'll want to look into typography for that).

The other thing of importance, besides color and content, is the development side. Some sites use too much Javascript when they don't need to. Others use too many page refreshes and it gets annoying if you constantly need to be clicking through page to page. Consider adding a small bit of Javascript and/or AJAX functionality to toggle the page content.

Consider all these ideas and implement the ones you think are necessary. If done right, it can make a world of difference to the user.

PHP Arrays

2007-07-19 01:35:36+00:00

PHP hashmap-style arrays make a great solution to wanting to pass multiple variables but not wanting to specify them all in the arguments to a function.

As far as object-oriented stuff goes, you can specify an array of properties (pun intended?) and pass them all via one variable.

The nice thing is, if your function or object is expecting certain properties and you format your array properly, you can get a lot out of your array.

For example, making an object entirely based on an array you pass it can be wonderful when you write your object once (and yeah it will be complicated) but whenever you want to create new instances of it, with all the same functionality and display style, you probably only need to write a few more lines of code.



$fields = array (

  "table_name" => "users",

  "table_order" => "userID",

  "dependence" => array (

                 "table_name" => "posts",

                 "table_order" => "postID"

  )

)



$editable = array (

   "Name" => array (

           "type" => "text",

           "required" => true

           "db_field" => "username"

    )

)

Something like the above code could generate a very complicated webpage, if you code it properly ;^)

AJAX solutions

2007-06-26 03:07:48+00:00

For a neat collection of AJAX articles, visit Smashing Magazine.

So yeah, I've gotten really comfortable with using Javascript and AJAX everywhere. It really makes things both easier and cooler, mostly because all updates are in real time, and there's no need to refresh the page.

Meanwhile, I find that it's kind of a pain if it's overused, so the new trick is figuring out where it SHOULD go and where it shouldn't. Too many AJAX tricks will just annoy people.

Dynamic Content...and now, Dynamic Layout

2007-06-06 01:01:08+00:00

I've always been a fan of Dynamic Content and Static Layout. What do I mean by that? I mean, creating websites whereby there are pages for everything with hard-coded HTML that gets filled and filtered through PHP. Take a profile page, for example, where the layout (tables, divs, etc.) is all hard-coded but the content (based on the user, from the database) is dynamically generated.

But apparently a very standard way of doing things in the industry is dynamic layout. That's where you create PHP Objects and Modules that generate the layout AND the content, given a few parameters that, as a developer, you can easily specify and change.

For example, say you have a "profile" module instead of a profile page. You could write a lot of PHP code that would generate the entire profile page and fill it with the appropriate content by a simple function call like:



include_once("module.php");

session_start();

generateProfile($_SESSION["userID"]);

...and that's the only thing on your profile.php page.

The upside - yes, it's a lot of coding but once it's done, you can easily use the modules to create various things with ease.

The downside, it makes editing things a pain layoutwise. Plus it's just hard to read and is not intuitive. Maybe to a standard developer, but we are designers who develop. We look at things from a much more intuitive, right-brained side.

Any thoughts?