eFishDesign

Elegance is Simple. Not Vice Versa

Tue, Jun 02 2009 16:57:47 EDT

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

Sun, May 10 2009 18:28:40 EDT

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

Tue, Feb 17 2009 01:14:06 EST

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

Mon, Feb 09 2009 17:37:32 EST

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

Sun, Nov 09 2008 14:25:20 EST

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

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

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

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

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

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

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

Usability Testing is Limited

Mon, Sep 22 2008 14:01:24 EDT

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

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

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

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

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

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

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

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

Transparent Technology

Sat, Aug 30 2008 23:26:06 EDT

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

My thinking:

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

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

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

Customization and Design Integrity

Tue, Aug 26 2008 02:12:28 EDT

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

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

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

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

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

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

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

The Art of Presentation

Fri, Aug 22 2008 17:15:08 EDT

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

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

1. Tell a Story

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

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

2. Make it Visual

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

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

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

3. Know Your Transitions

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

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

4. Cut Out Extras

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

5. Practice!

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

Staying Current with a Portfolio Site

Fri, Aug 22 2008 14:04:11 EDT

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

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

Your Concept

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

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

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

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

Your Content

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

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

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

~~

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

The Relationship With Design

Sat, Jul 05 2008 19:56:27 EDT

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

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

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

Step 1: Sensory Encounter

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

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

Step 2: The Interaction

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

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

Step 3: The Strategy

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

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

That is the psychology. That is design.

The Pitfalls of Site Re-Launching Alone

Sun, Apr 06 2008 21:29:18 EDT

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

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

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

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

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

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

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

Web 2.0 Ridiculousness

Wed, Apr 02 2008 01:05:46 EDT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Face it, we do. We flickr hard.

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

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

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

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

Good Design = Concept + Visual Appeal

Tue, Apr 01 2008 22:49:04 EDT

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

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

Well, I think I've figured it out.

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

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

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

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

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

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

OneUpMe Reloaded

Mon, Mar 31 2008 09:06:50 EDT

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

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

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

Check it out at OneUpMe.com!

Understanding Typeface Meaning

Fri, Mar 28 2008 15:19:26 EDT

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

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

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

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

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

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

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

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

New Site Design

Tue, Mar 18 2008 01:15:57 EDT

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

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

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

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

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

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

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

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

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

An AJAX Restaurant

Sat, Mar 15 2008 04:24:52 EDT

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

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

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

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

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

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

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

Interaction Design: A Visual Command Line

Thu, Feb 28 2008 20:45:13 EST

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



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

&gt; c.meow()

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

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

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

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

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

Formatting File Names

Tue, Feb 26 2008 04:00:51 EST

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

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

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

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

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

Just a recommendation :^)