So what was the problem?

Expedia analysts realised the site needed to be changed after investigating why many customers who clicked the ‘Buy Now’ button on the company’s site did not complete the transaction.

“This is someone who was on our site, found the right location and hotel, put in all their billing and travel information and clicked the ‘Buy Now’ button,” Megibow said.

“As far as leading indicators of purchase intent go, this is as good as it gets and yet we weren’t taking the money.”

Analysts began examining and correlating information about these failed transactions to identify what traits they had in common.

The answer, it turns out, was quite simple: “We had an optional field on the site under ‘Name’, which was ‘Company’,” Megibow said.

“It confused some customers who filled out the ‘Company’ field with their bank name.”

What did they try?

“After we realised that we just went onto the site and deleted that field – overnight there was a step function [change], resulting in $12m of profit a year, simply by deleting a field.

“We have found 50 or 60 of these kinds of things by using analytics and paying attention to the customer.”

I love data.

 Comments | Comment

From Kicker Studio: Big, huge gestural interfaces aren’t all they are cracked up to be:

Oh sure, they  look really cool, and certainly  companies are doggedly trying to create them.  Bloggers and tech geeks love them. (Any time you put Minority Report into a title, you’re bound to get traffic.) But I guarantee you very few of those people have actually  used one for any length of time. If not done well (and sometimes ever if they are), they are exhausting. Human beings aren’t meant to hold their arms out in front of their bodies making gestures for long periods of time. It creates a condition called  Gorilla Arm (aching muscles, stiffness, a swollen feeling) because it violates  basic human ergonomics. Tom Cruise (who, let’s be honest, is in better shape than 95% of us) was reportedly tired from just acting out the scenes in the movie.

I loved the Surface when it came out, but the first question was — how do I use it?

It makes sense in a mobile device to have a lot of gestural interfaces, or the iPad for example. But in a bigger stage, waving your hands around just doesn’t seem like fun. Like Dan Saffer pointed out in the article, it’s the places where a subtle gestural interaction can be used it makes sense.

 Comments | Comment

About design:

f you haven't seen the Oatmeal comic  How A Web Design Goes Straight To Hell, you need to go read that first, and then come back here – it's a perfect summary of the problem. The ultimate post on this problem has also already been written, so I'm not going to spend too much time on it – just go read every word in  Why Design by Committee Must Die in Smashing Magazine. I do want to highlight a couple of areas in that article, and add some of my own comments.

One of the main problems we have in web design today is that everyone thinks they're a designer. With coding it's different – not everyone can code. But design is different. Like art, everyone has an opinion on design. You like it or you don't. And because you have this immediate visceral reaction to a design, it's tempting to confuse that with knowing what makes a design good. But that's simply not true.

As posts like  Designing for the Mind and  Gestalt Principles Applied to Design have shown, what makes a design "good" has very little to do with taste, and everything to do with the proven psychology of visual perception. "Pretty" is a small part of design compared to applying the principles of solid user experience design to an interface. So please, let's leave design to the people who are trained in this stuff. Have I mentioned the importance of trust?

 Comments | Comment

Thanks to Ha Phan.

 Comments | Comment

Great article.

Usability Findings:

• Form labels work best above the field
• Users focus on faces
• Quality of design is an indicator of credibility
• Most users  do know how to scroll
• Blue is the best color for links
• The ideal search box is 27 characters wide
• White space improves comprehension
• Effective user testing doesn't have to be extensive
• Informative product pages stand out
• Most users are blind to advertising

 Comments | Comment

Great Article.

Junior designers are those with some training and (hopefully) some talent. They've gone to design school or done a handful of professional projects. They can create deliverables, although not without supervision. They can often explain design decisions, and can handle problems of moderate complexity. Junior designers should always be paired with a more senior designer.

…

Senior designers are those with the magic  10,000 hours of experience that make one a master. For those who are math challenged, that's 250 40-hour work weeks, or over five years being a designer. In my experience, this is more like seven to 10 years of being a working designer to reach this level of mastery, where one is able to tackle complex problems in a variety of domains.

I would love to see this standard applied — there are many people that have a false idea of where they are in the industry (including myself ;) ). Read the complete article to see Dan Saffer’s thoughts.

 Comments | Comment

From UXMovement:

1.618 is a number all serious designers should know. It's known as the golden ratio found through ­out nature, art and architecture. Seashells, the Mona Lisa and the Parthenon all show the golden ratio. Our faces and bodies are also proportional to the golden ratio. It's so omnipresent that it's even found in sounds and intervals of time. If there ever was a mathematical way to explain and express natural beauty,  the golden ratio is  it.

The golden ratio gives us a divine sense of aesthetic that we can apply to web design. By applying the golden ratio properly, we can make our web sites visually compelling. The most common way to use the golden ratio is with layout. Using the golden ratio we can divide the width of our web site to create a  "golden layout" of two columns.

For example, take your typical 960 pixel width layout and divide 960 by 1.618. You'll get about 594, which is the width of your main content column. To get the width of your sidebar, subtract 594 from 960 and you get 366. Put it all together and you have a  two column layout with widths of the golden ratio.

There’s another completely different reason I also go with this structure — studies have shown that sites are easier to read when line length is limited.

The length? Between 550 and 600 pixels wide.

 Comments | Comment

Guillermo Cedillo is a UX designer that works for Sieena, a development firm in Mexico. This is a great article that talks about design. The article originally appeared on Website Magazine, but we have permission to republish it. Cheers.

The four principles of design are balance, rhythm, emphasis and unity. Each one of them is essential for bringing together the different visual elements that are necessary to achieving a strong design, which, in turn, is imperative for a website to succeed on any level. What follows is an examination of each principle, with insights about how to incorporate them into your own Web design for optimal results.

Balance

Different colors, shapes and sizes can create different degrees of what is called “visual interest” on a Web page. It is important that pages are designed to hold a user’s interest without overwhelming them or causing distraction away from the elements most important to conversion goals. As such, distribution of this interest needs to be controlled and balanced by considering each element in a layout and its “visual weight” – determined by its size, shade and thickness of lines.

Symmetrical balance is achieved by placing elements in the design evenly. If you place a large, heavy element on the right side, you will have a matching heavy element on the left. Centering is the easiest way to get a symmetrically balanced page. But be careful, as it can be difficult to create a centered design that doesn’t look flat. For symmetrically balanced design, it is better to create the balance with different elements – an image on the left and a large block of text to the right of it, for example.

Asymmetrical balance is an arrangement of unlike objects of equal weight on each side of the page. Color, value, size, shape and texture can be used as balancing elements. However, asymmetrically balanced pages can be more challenging to design, as elements are not matched across the centerline of the design.

For example, you might have a large element placed very close to the centerline of the design. To balance it asymmetrically, you could place a small element farther away from the centerline. If you think of your design as being on a teeter-totter or seesaw, a lighter element can balance a heavier one by being further away from the center of gravity. You can also use color or texture to balance an asymmetrical design.

Sometimes the purpose of the website itself makes an off-balance design the right choice. Designs that are off-balance suggest motion and action. They make people uncomfortable or uneasy. If the content of your design is also intended to be uncomfortable or make people think, a discordantly balanced design can work well.

Rhythm

Rhythm in design is also known as repetition – a pattern created by repeating elements that are varied, allowing your designs to develop an internal consistency that makes it easier for your customers to understand. Once the brain recognizes the pattern in the rhythm it can relax and understand the whole design.

Repetition (repeating similar elements in a consistent manner) and variation (a change in the form, size or position of the elements) are the keys to visual rhythm. Placing elements in a layout at regular intervals creates a smooth, even rhythm and calm, relaxing mood. Sudden changes in the size and spacing of elements creates a fast, lively rhythm and an exciting mood.

Gestalt is a general description for concepts that make unity and variety possible in design. The mind has the ability to see unified “wholes” from the sum of complex visual parts. Some principles of gestalt are proximity, similarity, continuance, closure, uniform connectedness and 1+1=3 effects.

Emphasis

Emphasis (or dominance) in design provides the focal point for the piece, enabling the most important design element to stand out. To draw the reader to the important part of the piece, every layout needs a focal point.

Generally, a focal point is created when one element is different from the rest. However, to maximize emphasis, it is necessary to avoid too many focal points, so as not to dilute the dominant effect. When all elements are given equal emphasis, it can make the piece appear busy, at best, or even boring and unappealing.

Emphasis can be achieved in the following ways:

Using semantic markup to provide some emphasis, even without styles.

• Changing the size of fonts or images to emphasize or de-emphasize them in the design.
• Using bold, black type for headings and subheads and much lighter text for all other content. Placing a large picture next to a small bit of text.
• Using contrasting colors. For example, using a series of evenly spaced, square photographs next to an outlined photograph with an unusual shape.
• Placing an important piece of text on a curve or an angle while keeping all of the other type in straight columns.
• Using colored type or an unusual font for the most important information.

Unity

Unity (or proximity) helps all the elements look like they belong together. Readers need visual cues to let them know an article is one unit – the text, headline, photographs, graphic images and captions all go together. Elements that are positioned close to one another are related while elements that are farther apart are less so.

Unity can be accomplished through the following methods:

• Being consistent with the type font, sizes and styles for headings, subheads, captions, headers and footers throughout the website.
• Positioning elements so that those close to one another are related, while elements that are farther apart have less of a relationship.
• Using only one or two type styles and various size or weight for contrast throughout the site.
• Repeating a color, shape or texture in different areas throughout.
• Choosing visuals that share a similar color, theme or shape.

Web users rely heavily on visual clues when making decisions about a website – whether to click and explore, consider a purchase or sign up for a service. This is even more pronounced for first-time visitors when the decision to stay on-site or abandon is made in just a few seconds. Follow these four design principles and you can be sure that your users and new visitors will stay engaged with your website.

Guillermo Cedillo is responsible for the design and implementation of modifications of different Web, desktop and mobile applications as a User Interface Designer for Sieena. Sieena is a Nearshore software development firm specializing in Microsoft technologies, with operations in Los Angeles and Monterrey, Mexico.

 Comments | Comment

Fashizzle to generate shackalack amet.

Lorizzle ipsum boom shackalack hizzle amet, consectetuer adipiscing elit. Nullam sapien velizzle, pimpin’ volutpizzle, suscipizzle quis, fo shizzle mah nizzle fo rizzle, mah home g-dizzle vizzle, arcu. Pellentesque for sure for sure. Sizzle erizzle. Boofron izzle dolor dapibus mammasay mammasa mamma oo sa tempizzle i’m in the shizzle. Maurizzle pellentesque mah nizzle et yo. izzle funky fresh. The bizzle go to hizzle rhoncizzle nisi. Dang its fo rizzle boofron platea dictumst. Brizzle dapibizzle. Curabitizzle tellus phat, pretizzle eu, gizzle pot, eleifend away, nunc. Dang suscipizzle. Integizzle semper velit gangster purus.

 Comments | Comment

It’s hard to find a good UI Engineer.

That’s the conversation I’ve had with several people in the Bay Area. Great front-end engineers are hard to find, and the ones available get multiple offers. This, in a time when many people are having problems finding jobs, you would think that developers would be looking into UI as a career path.

But it’s not so easy to be one because of the needed skillset — it’s this odd combination of solid development skills, decent UX skills, and being able to slice and dice PSDs in minutes instead of hours. I’ve resorted to training people to do proper HTML and CSS instead of hiring engineers, just because of the bad habits many engineers have developed over time.

True UI engineers are almost art forgers with one specific addition: they have to understand how something works so it’s elegant and useful.

UI Engineers are worth their weight in gold. In most organizations, they are the gatekeepers (Joel On Software had a whole article on this). They are the final word on how something gets implemented, and the best ones truly add to a product.

My prediction:

The need for good front-end engineers is going to eclipse the need for back-end engineers. Common backend tasks can easily be done by resources not here (read: India and nearshore). The skills required to do great User Experience applications need an attention to detail that comes only with craftsmanship of a great product and understanding the local culture. One owner of an outsource development firm all but admitted that it was better for him to get the UX work done here than having his engineers do it.

Or, to put it another way — would you outsource your marketing copy to someone in China?

Why the shortage shall persist

Attention Paid to User Experience

One of the nice things about being in User Experience now is that companies are finally getting it. They know they need a solid user experience to make it in the marketplace, and that requires great User Experience professionals. The most useful person for a user experience professional is a UI Engineer than can translate wireframes and visual designs into engaging experiences.

The best UI Engineers I work with, turn the working experience into a true collaboration. In the end, you get a solution that’s great for the user.

HTML 5

The kind of new but not really technology, if promised, will provide more functionality and the ability to do more cool things with HTML that you currently have to do through graphics. No more rounded corners, drop-shadows or other funky work-arounds through jQuery and wacky CSS, providing not only faster downloads, but faster development times.

jQuery

Sure, it’s a framework to make things easier, but solid knowledge of jQuery requires almost as much knowledge about Javascript as Javascript itself. There has to be solid knowledge of how it should be used (as opposed to the way most UI Engineers use it today) and how to create great user experiences that use jQuery right. It’s just not about the Lightbox, it’s about all kinds of user experiences.

AJAX

Who needs a backend engineer, when you can do most of the work using REST and AJAX calls? The MySpace platform is a great example: many of the calls to retrieve data could be done purely through Javascript. Browsers are getting better about standardized Javascript (and as soon as Internet Explorer 6 is out of the picture, there will be a party). So AJAX is becoming the language du jour for a lot of web experience.

How do you search through a flight? Kayak, which has a display engine that updates on the fly.

How do you search Google? Google Instant. This is the wave of the future.

Mobile Applications

Say what you want about the iPhone, sometime next year the Android OS is going to surpass it. Native apps are cool, but aren’t really cross-platform on mobile. So the quicker go-to-market approach would be a combination of native and HTML. That means engineers that can create engaging experiences with crazy specifications by UX professionals.

If you have a solid UI Engineer, you could test product concepts across multiple phones easy without investing a ton of development time in a native application.

Commodization of the Backend Engineer

When a lot of the calls to data are done through Javascript, you eliminate some of the need for a backend engineer. More goes out the door when scalability goes to the cloud, allowing companies to scale web applications quicker and don’t require teams of developers working on how to optimize the code just a bit faster.

Lastly, development costs have dropped because of the number of technology frameworks that allow developers to bring products to market faster.

 Comments | Comment

From the IXDA list:

• Super Senior Interaction Design Engineer needed at CISCO
• October 19, 2010 – 12:56pm
• San Jose, CA

Wears a cape? Can do usability tests in a single bound? Has eye-tracking vision?

Mondo’s next. I want to be a Mondo Super Senior Interaction Designer.

 Comments | Comment

I’m not the biggest fan of his site, but this article is great — it explains mental models in Fisher Price terms.

From Jakob Nielsen:

A mental model is  what the user believes about the system at hand.

Note the two important elements of this definition:

• A mental model is based on belief, not facts: that is, it’s a model of what users know (or think they know) about a system such as your website. Hopefully, users’ thinking is closely related to reality because they  base their predictions about the system on their mental models and thus plan their future  actions based on how that model predicts the appropriate course. It’s a prime goal for designers to make the user interface communicate the system’s basic nature well enough that users form reasonably accurate (and thus useful) mental models.
• Individual users each have their own mental model. A mental model is internal to each user’s brain, and different users might construct different mental models of the same user interface. Further, one of usability’s big dilemmas is the common gap between designers’ and users’ mental models. Because designers know too much, they form wonderful mental models of their own creations, leading them to believe that each feature is easy to understand. Users’ mental models of the UI are likely to be somewhat more deficient, making them more likely to make mistakes and find the design much more difficult to use.

No matter what you think, your users have a different idea what the site does than you do.

And…

Remember Jakob’s Law of the Internet User Experience: Users spend most of their time on websites  other than yours. Thus a big part of customers’ mental models of your site will be influenced by information gleaned from other sites.

A huge duh moment. What do you mean they spend more time at places other than my restaurant?

 Comments | Comment

This is why I’ve been so quiet on the blog. The Pick An Excuse application now on the iTunes store. Join in with my experiment in social media and user generated content.

You can also go to PickAnExcuse.com to download it.

 Comments | Comment

That’s all the needs to be said.

 Comments | Comment

I have kind of a site up as a placeholder at Pick An Excuse,  but I’m really close to releasing a beta version of the application (the next couple of weeks). If you’re interested, shoot me an email at beta@pickanexcuse.com or follow pickanexcuse on Twitter.

I’ll be doing a short run of t-shirts of one of the excuses, and giving them out to betatesters.

 Comments | Comment

Very funny.

 Comments | Comment

That’s cutting edge.

Here’s the complete list of what they look like on an iPhone.

 Comments | Comment

I posted this as an answer of Quora, but I thought it would be very appropriate here. This could go for any company, but some of us actually enjoy designing large applications.

They have to be solving a real world problem.

Too often, I get the “It’s like Twitter, except we’ll charge people” response. There has to be a very  definite  need for the product that’s fairly obvious. We don’t want to work on products that are going to get killed because there’s no market for them.

Most enterprise apps have that.

I like designing enterprise apps, because a) it’s not a microsite (I don’t know where to start), and b) you get to talk to the users directly, most of the time. Users will same the damnest things, and some of those things make great products, especially if they solve a real world problem.

They have to have great management.

There’s nothing worse than walking into the door and realizing the person that’s going to manage you doesn’t have the slightest idea what user experience is, other than what they read in a book.

User experience types have a jaded view of the world because of the environments we work in, and get frustrated in environments where we want to have an impact. I could go on and on about a friend of mine that hates her environment, but puts up with it. Great UX people want to work in great environments where they can flourish and learn.

Good managers attract good people — as simple as that. If you’re working at a company that develops enterprise applications, and you can’t attract good UX types, you should take a long, hard look at who’s managing them.

They want to let them do their job.

Let them define the process, but hold them to it. Don’t let seagull management (come in, shit on it, leave) creep into User Experience.

Show that it’s a team concept, but that user experience will drive requirements with product management. Let them gather data to back up their assertions. Let them perform usability tests. Let them see how the work translates into better sales.

They want to take pride in their jobs, nothing more.

They want to do things the right way.

That means following some sort of process. That doesn’t mean going all the way to doing a card sort, but if they think user experience is about delivering wireframes and mockups, and that’s all, something’s wrong. We’ve all worked in environments like this, and it gets tiresome.

We want to learn if the process works as much as the company does.

They want to pay a good wage.

Most enterprise apps have multimillion dollar implementations. This means that the developers of these applications should get paid a decent wage, because a good design means saving thousands of dollars for the clients.

There’s nothing more frustrating than having a conversation with a recruiter, and the recruiter says, “well, this is what the budget is.” That’s not something you tell to someone that can help saving thousands and millions of dollars.

The average implementation is over a million dollars, and they don’t want to spend a little extra on someone that can have a great impact only only on implementation, but on potential sales?

 Comments | Comment

Old study, but still interesting, from Social Media Explorer:

• People still share via email and instant messenger more than via social networks. An astounding 59% of all shares on the widget were done via email, 25% via instant messenger and just 14% were passed along on networks like Facebook and Twitter.
• Twitter, which has recently emerged as the share site du jour for those in the social media world, accounts for only one percent of all shares. Facebook is 11%. Yahoo mail is the highest individual share channel at 26%.
• Yahoo (44%) and MSN (25%) mail are way ahead of Gmail (19%) as the email provider used by Tell-A-Friend users.
• Facebook accounts for 79% of all shares via social networks. MySpace is second at 15%. Twitter is just 5% of all social network shares via the widget.

Thoughts?

 Comments | Comment

The Mashable article…

The notes here are from the NY Daily News:

• Google officials said that Google Instant will save 2-5 seconds per search.
• And since Google answers 1 billion search queries a day, the company says it will cumulatively save people more than 3.5 billion seconds a day, or 11 hours a second.

I’ve tried it. It’s pretty cool.

That’s a lot of time saved — now we can go to Starbucks sooner.

 Comments | Comment