We recently added the Google Website Optimizer to LessAccounting.com. My first test was to see if reversing the layout would effect the sign-up percentage.

Conversion Results

With the design below were receiving 10% of our traffic to sign-up with a trial account.




With the design below were receiving 12% of our traffic to sign-up with a trial account.

How Google Website Optimizer Works

The optimizer works by adding pages to test and then having a goal page to mark the "conversion". We had two pages and the goal page was the sign-up page.

My Theory

The buttons are the left are "easier" (less cursor distance) than having them on the right. There is less chance the visitor will scroll past them. A jump from 10% to 12% is huge in my book. I highly recommend using the optimizer, I'll continue to test the brochure portion of the app in various ways.

Tweetie, an osx twitter app, is a good app that could be great with a few changes.



I'm expecting a comment from @timchilcott who is Tweetie's #1 fan.

I keep a design account on flickr, where I can upload my favorite pieces of websites. I find myself coming back to that account looking for inspiration. Here's the link to the flickr account and here's the rss feed

---

---

---

---

---

---

---

---

---

---

While my car’s been in the shop, I’ve been driving around in a rented Audi A4. I’ve been very pleased with many aspects of the car but I’ve been surprised with a bit of really good UI in the radio. They take a departure from the typical radio’s on/off function and realize that on/off is really the same as mute. This means that I can turn the radio on from the steering wheel controls! Here is how the UI works:

• Clicking off turns off the radio, just as you’d expect.
• Clicking on returns it too its last state, just as you’d expect.
• Turning the volume all the way down shows a mute icon.
• When off, turning the volume up turns the radio on. ** This is very cool.

My only complaint is that they didn’t quite go far enough. They could have easily made turning the volume all the way down turn the radio off instead of mute, that way if you click the on/off button it could turn the volume up just a bit. The reality is that the mute function is a non function and could be entirely removed from the radio. Mute is the same as off.

FYI: It took me forever to figure out the UI on the A/C.

I started to cut the grass yesterday evening but the tank was empty. So I took my gas can and started pouring gas into the tank and all down the side of the mower. To crank the mower I had to grab the wet gasoline soaked handle getting gas on my hands. I'm no sissy but I have a seriously OCD about washing my hands. This gas mishap happens nearly every time I fill up the tank. An issue with your product that happens repeatedly can't be called user error, it's a problem with the product.

Here's some possible solutions. Move the pull cord handle away from the gas opening. Make the gas tank level easier to see (you can hardly predict when its full until its too late). Maybe enlarge the size of the gas tank opening. The solution could be very simple. I'm reminded of the manufacturer's poor decision every time I use the mower. I am sure the makers of this mower do not actually use this mower at their homes or they'd feel my frustration and fix the problem.

37signals changed my life. Again. The first time they inspired and liberated me. This this they've turned me sour. Their highly popular blog (which I love) preaches about appreciating craftsmanship and paying for it, supporting artistry. Jason Fried, the founder of 37signals, constantly tweets about sports car design, Aston Martin seems to be his favorite. I loved 37signals, I even went to their SEED conference. Their book, "Getting Real," changed my life. They hire people based on taste and style. They are amazing.

In a recent blog post Jason brings up a stupid error in Quickbooks Pro. What a confession, a stark revelation. They use Quickbooks. Quickbooks is a product by Intuit, the makers of bloatware accounting software. This made my skin crawl, how can a guy that harps on the finer things, style, elegance and design use a piece of software that is the farthest thing from it? I'm not saying anything we write is perfect and bug free, God knows everything is a work in progress. Of all the accounting software to use, why use the one that is the antithesis of 37signals it should be an anathema to them. For the love of God, why? Think of the children!

Batman is taking bribes. Superman is playing poker with Lex Luthor. The Lone Ranger is a racist. Steve Jobs uses a Dell. My world is in shambles.

Fair warning Jason: I'm gonna give you noogies at FOWA.

I sign-up for new web apps and social networking sites all the time. Rarely, do any of these site draw me in and make me want to participate with them. Very few apps are able to bring me back for a return visit after my initial login. And no I am not talking about the feeling people get when the app has reached critical mass and everyone is joining, those users are feeling like they don't want to be left out or "what's all the hype about?".

So this got me thinking, what qualities do successful apps contain that engage their viewer? With blogs, every site has an rss feed, what user emotions are needed to get the viewer to leave their RSS reader and comment?

Kathy Sierra (whom I have a crush on) says you must make the user feel like they're kicking ass, but that's only true for business apps. Let's talk about social networks/apps.

Twitter

I wonder what my friends are doing/saying?
Feeling = "I'm missing out on the content (links and opinions) from my peers)"

Facebook

I wonder what my friends are saying?
Feeling = "I want gossip"

Blogs

I agree or disagree so strongly that I need to comment on that post.
Feeling = I want to be heard and I want to hear what the blogger has to say.

Flickr

I need to see a full sized view of that image.
I want to explore other photographers pictures.
Feeling = Intrigued by beauty

---

How do you build a site that makes a user feel like they must contribute?
What are current apps doing to make their users feel this way?
What brings you back to your favorite websites again and again?

The shortest distance between two points is a straight line. A good UI is often one when a user can "get through" the function quickly. An often missed point of good UI is to think about creating short cursor movements when planning the layout/UI of the app. As UI designers the copy writing and styling are concerns that sometimes overshadow our minds. I have to remind myself to work towards the shortest cursor path to complete a task or move between tasks.

Practical Usage

In LessAccounting we use fixed position buttons.

Issue with the example

Most people love the fixed position buttons, but some people are so accustom to seeing the buttons at the bottom of the form they "miss" the button bar. We're still trying to figure out how to make them more noticeable without being annoying. Got any ideas? We'd love to hear them.

I see so many good designs floating around the internet, these designs would be great if only slight changes were made. These small change are usually better because they emphasize or de-emphasize parts of the page, improving the visual hierarchy.

Good design is a series of small decisions that collectively turn into a good design. The difference between a good design and a great design might be a very small overlooked detail. No design is ever finished, there's always room to improve. Here's a good design that I made some very very small changes to that make it better. The image you first see if the original design, it's fantastic. Take your mouse and hover over it and wait a second, you'll see my changes. It might take your eye a second to see the changes.

What I did...

I enlarged the font size on the navigation so your eye picks up on it more quickly. I gave the individual stories a little more spacing and separated the columns a tad as well. The date on the article I made less eye catching, it's just not that important. Are these changes mind blowing? No, they're minor changes that can greatly affect the outcome of the design.


if you're in firefox, click on the image and you'll see my noted changes

The Problem...

As a designer I have a tendency to cram things into a site, this isn't a good thing. You need to give you visitors eye breathing room. The original design "www.GOOD.is" had was cramped. It caused my eye to speed up and hurry thru the elements. Give your user's eyes white space/open space it's a key piece of good design.

With so many Photoshop tutorials floating around everyone thinks they're designers. There's nothing wrong with tutorials or Photoshop but Photoshop isn't the foundation of good design. Good design is about visual balance, a font hierarchy, color weight, alignment and proximity, these pillars are how you, the designer, guide the viewer's eyes around the page to the places you want them to be.

Below is a simple design, but very effective. The spacing is clear and the alignments are perfect.

My design journal on Flickr
Design journal RSS Feed

Simple alignments make a difference.

See the consistent spacing?

When I first started designing web apps I got hung up on being perfect on the first release. I would design and write markup not realizing in a few weeks things would change. I was concerned that each graphic was perfect, the drop shadow just right and the borders were nailed. Instead of looking at the launch as just the birth for an app, I'd think it was the finish line, I was wrong. I didn't realize my design, layout and everything is subject to change shortly after gathering feedback from the few round of users. If you can simplify your design to speed up the markup process do it. These issues would slow me down and keep me from getting my work completed and back to the developers. I wasn't slow but I wasn't as productive as I could be. I needed it to be perfect when good enough was enough.

Moral: No successful app launches just once. Your design is going to change, plan for it.

These people inspire me from their words and actions. Listed below in no particular order.

• Jason Fried - be simplistic
• Gary Vaynerchuk - love everyone, be everywhere
• Kathy Sierra - help your users kick ass
• Seth Godin - everything you do is marketing

no real reason to make this graphic besides a laugh.

Some one sent us an email complimenting Allan on his design and asking for some pointers for a design noob. Allan’s response was so simple and pointed that I wanted to post it here for everyone to enjoy:

Design is all about proximity and alignment. Being constant with spacing, styles and such is key. Having a visual hierarchy of what you want the user to see first is also very important. Being good at photoshop, thats just practice.

[Your site] is very clean and really good. I’d say that it’s a good design. I like simple clean stuff.

My design journal: http://flickr.com/photos/ispypurdydesigns/

I find it hard to write and talk about good UI, I think I know why. We received this feedback about the new LessAccounting.com design.
--------------
Jeremy Consulo of Consulo Studios said...
"I really like the new UI. I can't pinpoint exactly why it's better. It just feels more polished and solid."
--------------
Whoa! Good design/UI just feels better. There are general rules to follow but for the most part its about feeling. Thanks Jeremy for that spark!

So how do you "know" when you've created or found a good design?

In any job, in any industry, you must constantly be getting "better" at what you do. The only way to improve is to evaluate yourself. I do this constantly, I look back at the work, the situations and the outcome. I ask myself questions like... What makes me good at what I do? What makes me different? In what facets of my skill set am I subpar? When and why am I unproductive? Be honest, its pointless without honestly. Criticize yourself, find the path to improvement.

I will evaluate myself now...

What makes me good at what I do? My business partner, Steve makes me better. He raises my work quality. He questions my decisions and pushes me past my initial solution. Research makes me better by knowing what others are doing, spending time signing up for other sites and evaluating them. Maybe we (Less Everything) need more QA help to question my UI choices more often?

What makes me different? The opinions I give, my thought process, the final product. Being honest with a client telling them my honest opinion. Another differentiator is bad jokes, clients and even our employees love them! :) They can't get enough of them! Well maybe not, but maybe I do handle a client differently than most. Can I improve my relationships with our co-workers and clients? Yes, I probably need to work on being more patient and in tune to their needs and feelings.

Am I growing/improving as a designer <insert skill set here>? Not as much as I should be. I have booked several conferences to attend this year. I am lacking in face to face interaction with others. I need to spend more time throwing ideas around with others. I need to spend some time learning haml. Working out, I need to keeping going to the gym, I really think it must pump oxygen to my brain it really helps my creativity.

Where am I unproductive? What slows me down during the day? My lack of rhtml knowledge. I need to add that to my need to work on list. I need to turn my phones off more and IM as well. I am interrupted too much. And I have got to stop watching my AAPL and GOOG stocks like a hawk.

If you work alone in a freelance or contract position, you will slip and slide down the slope of unproductivity and fall behind on your learning. If someone isn't watching over you pushing you, you will lose your edge. You must be that judge, be honest it will pay off.