Compare the two posts below, both written by the exact same SEO expert and each containing around the same number of words. Without knowing the subject, can you guess which post earned more links?

Try 378 to 6. In addition to its visual appeal, the left post was more timely, useful and informative – all hallmarks of copywriting grace.

Firstly, good designers don’t tend to think about consumers; they think about people and what they want and need. It’s a subtle point, but thinking about people as consumers immediately dehumanizes them and makes it harder to empathize.

Secondly, good designers like observing — really looking at what people do rather than simply relying on what they say they do. As Paul Smith once explained, when asked where he got his ideas from: “You and I could walk down the street together and look at the same things, but I’d SEE ten times more than you would.”

Thirdly, they bring expertise in other categories and industries to bear on problems in others. They pull together threads from different functions, disciplines, fields, and sectors, and integrate them into a new and (the dreaded word) “holistic” understanding.

Fourthly, good designers look at what might all change in the short, medium and long-term, by engaging with the best trends and forecasting intelligence. Unlike other crystal ball gazers they use this prescience to help them understand how they could bend the future, shape it to their vision.

And lastly, good designers pressure test their conclusions by consulting with other cultural ‘interpreters’ from a broad range of other disciplines.

The exam­ple below arranges the home page focal point ele­ments per­fectly. The head­line, which users read first, is in the pri­mary opti­cal area where users first look. The sup­port­ing text, which users read after the head­line, is in the strong fal­low area, where users move their eyes to sec­ond. The prod­uct image, which users look at after they read, is in the weak fal­low area. This is the best spot for the prod­uct image because images tend to get longer visual fix­a­tions. Plac­ing it in the weak fal­low area means that the image won’t get fix­ated on too long over other ele­ments. Each ele­ment is effi­ciently placed so that it fol­lows the user’s nat­ural view­ing pat­tern. A call to action in the ter­mi­nal area makes it quick and easy for users to take action.

The dif­fer­ence between a left and right call to action may only seem like its place­ment. But when you look deeper, where you place your call to actions can affect whether users click them or not. Know­ing this will allow you to pro­mote and dis­play your prod­uct in an effi­cient way that makes users act.

source: http://uxmovement.com/buttons/why-users-click-right-call-to-actions-more-than-left

The truth is there’s only so much designers can do on their own to make a company successfully innovative. Companies that misalign their expectations — and many do ignore their own part in becoming more innovative — generally fail. They genuinely want good design, and they want it to impact their bottom line, but they want it to take place externally. Their vision of design as a purely third-party service is doomed.

This misalignment expresses itself in many forms. Here are five of the most common ways to fail at design:

1. Refuse to change any other part of your business. Treating design as an add-on can work when a company commissions a “designer series” of products to briefly boost the brand’s appeal, but this is hardly what we mean when we talk about innovation saving your business. The smartest companies foster an internal culture of innovation, which creative consultants can support, but only if other aspects of the business — management, development, manufacturing, marketing — are open to change. More immediately, requiring a design team to propose only solutions that can be realized with your current process ensures more of the same.
2. Design outside of your innovation space. Designers don’t implement solutions, companies do. For that reason, the most innovative solution on earth won’t work if it’s pursued by a company that can’t properly execute it. At Ziba we call this capability the client’s “innovation space” — the arena in which they’ve already proven themselves willing and able to lead the pack. Some companies are technology innovators, others are product innovators or experience innovators. Learning which you are in order to direct later efforts is a crucial first step that most companies skip.
3. Try to design for everybody. Design works as a differentiator because it responds to human needs, both functional and emotional. Most of us agree that a Ferrari is beautifully designed, but nobody would say it’s for everyone. The same could be true of a minivan. Each succeeds in its market because it delivers to a tightly defined group of users. In a landscape where consumers increasingly demand tailored experiences, failing to identify a clear strategic target is designing to fail. The most useful tool a client can give a consultancy is a well-considered, focused profile of who they’re designing for. The least useful is a mandate to create something that appeals to everyone.
4. Insist on replicating another company’s success. “We want to be the Apple of [insert industry]” might be the single most common request clients make of creative consultancies, and it’s certainly one of the most damaging. Good design does more than just serve the needs of its audience, it does so in a way that’s true to the company’s purpose and values. An Apple-like experience delivered by a company that isn’t Apple can’t be sustained, because it’s not backed up by Apple’s culture and resources. The result is an inconsistent experience that feels disingenuous to customers, and shatters their loyalty. This is why “me too” innovation almost never works. Not only does it make you look like a copycat, it shows you don’t care about your own brand enough to express it in your user experience.
5. Compartmentalize design into isolated tasks. It’s tempting to treat design as a menu of services, applying it here and there on bits of a project that need sprucing up. To a skeptical client this can feel economical and controlled, but it cripples the design effort by fragmentation. The best user experiences are integrative; they make sure that every touch point is consistent and logical, building trust from the user, and reinforcing the brand’s character. Piecemeal design work creates an incoherent experience that users will ultimately reject.

Do’s And Don’ts

I have observed hundreds of multivariate tests, and I have seen many people make the same mistakes. Here is some practical advice, direct from my experience.

Don’ts

• Don’t include a lot of sections in the test.
  Every section you add effectively doubles the number of combinations to test. For example, if you’re testing a headline and image, then there are a total of four combinations (2 × 2). If you add a button to the test, there are suddenly eight combinations to test (2 × 2 × 2). The more combinations, the more traffic you’ll need to get significant results.

Do’s

• Do preview all combinations.
  In multivariate testing, variations of a section (image, headline, button, etc.) are combined to create page variations. One of the combinations might be odd-looking or, worse, illogical or incompatible. For example, one combination might put together a headline that says “$15 off” and a button that says “Free subscription.” Those two messages are incompatible. Detect and remove incompatibilities at the preview stage.
• Do decide which sections are most worthy of inclusion in the test.
  In a multivariate test, not all sections will have an equal impact on the conversion rate. For example, if you include a headline, a call-to-action button and a footer, you might come to realize that footer variations have little impact, and that headline and call-to-action variations produce winning combinations. You get a powerful section-specific report. Below is a sample report from Visual Website Optimizer. Notice how the button has more impact (91%) than the headline (65%):

  

• Do estimate the traffic needed for significant results.
  Before testing, get a clear idea of how much traffic you’ll need in order to get statistically significant results. I’ve seen people add tens of sections to a page that gets just 100 visitors per day. Significant results from such a test would take months to accumulate. I suggest using a calculator, such as this A/B split and multivariate testing duration calculator, to estimate how much traffic your test will require. If it’s more than what’s acceptable, reduce some sections.

The checkout process is a popular area of your site to test, and for good reason. When a visitor has added items to cart and clicks the “proceed to checkout” button, it’s a good indication of purchase intent! But often carts are abandoned early in the process – even at the login screen. Your design and copy on this page have a major impact on whether customers figure out which option is right for them (sign in, create account or guest checkout) and make it smoothly through to the next step.

As I’ve written about before, Amazon and Sears’ radio button approach is likely the “path of least resistance.” But if you want to test for yourself, the following is an inspiration gallery of 4 different approaches to log in: the aforementioned radio button, two-option, three-option and expanded/one-page.

Must read for anyone involved in usability and web design..

So you’ve got a website, but do you know whether it’s usable or not? The answer to this question can make the difference between a successful site and one that’s just ignored. Go through this checklist to make sure your site is up to snuff.

1. Do you answer your user’s questions?: Users visit a site because they want answers, so it’s vitally important that your site gives them what they are looking for.
2. Is your navigation clear and simple?: Make sure that your navigation lets the user know where they have been and where they can go in a clear, consistent manner.
3. Do you provide anchor text?: Ensure that your visitor always knows where links are headed by discussing the site before you ask them to “click here.”
4. Does your design guide the eye?: Use color, position, size, and more to create a specific flow for your site.
5. Do you start link names with important keywords?: Use important keywords in your links so that users know when they’ve found the right information.
6. Is your wording straightforward?: Take a look at your language to make sure it’s simple enough for all users to understand.
7. Does your writing look like an inverted pyramid?: Give web users the instant gratification they want by offering the most important information early on.
8. Do you have “white space?”: By placing too many elements too close together, you may overwhelm users. Spread things out a little.
9. Have you offered contact information?: If your site doesn’t answer all of a visitor’s questions, they will probably want to speak to you about it. Allow them an easy way to contact you.
10. Do you change URLs?: Don’t. This creates linkrot, in which links to your site are broken, and discourages other sites from linking to you in the future.
11. Do you have a site map?: A site map is very important for a large site, because it helps lost users find their way and also makes it easy for search engines to spider your site.
12. Does your information look like an ad?: Users will ignore information if it resembles a promotion, so avoid using large red text and other design elements found in advertisements.
13. Does your site require unnecessary plugins?: Be aware that not everyone’s browser is fully decked out. Use a plugin only if it adds value and is absolutely necessary.
14. Have you enabled graceful degradation?: Be sure that even if your site can’t display certain elements, the rest will still function properly.
15. Does your logo link home?: Users expect that your site’s main logo will always link to your homepage, so make sure you’ve done this.
16. Have you grouped information?: Make it easy for users to find what they’re looking for by arranging related information together, such as your corporate history alongside your career offerings.
17. Do you provide visual clues for links?: Make sure that you’ve made your links obvious with colored, underlined text.
18. Have you used color properly?: Avoid placing light-colored text on a light-colored background, or it will be hard for visitors to read your content. The same goes for dark-on-dark.
19. Do you support deep-link users?: Check all of your site’s pages to make sure a user could orient themselves if they arrived on that page before any other place on your site.
20. Is your site organized with a consistent structure?: Be sure to include headings, lists, and a unifying structure from page to page.
21. Do you show users where they’ve been?: Differentiate between visited and unvisited links so that visitors can navigate with ease.
22. Is your text annoying?: Use bold, italic, and upper-caps text sparingly.
23. Do your graphics mean anything?: If your graphics seem irrelevant or frivilous, users won’t be impressed, so make sure that any images you use are directly related to the content.
24. Do you date your content?: Don’t make users guess about which content is current and which is obsolete. Add dates to articles, press releases, and other content.
25. Is your site full of animation?: Cut down on unnecessary animations to avoid overwhelming the user.
26. Have you optimized your writing for the web?: Ensure that your text is short, scannable, and to the point, offering answers and common language.
27. Do your links work?: Always double check your site for broken links, as they’re one of the worst user annoyances out there.
28. Do you have a tagline?: Use a tagline to give visitors an extremely quick summary of what you do and what the site’s about.
29. Do you offer prices?: If you’re using your website as a sales tool, it is vitally important that you answer what is almost certainly your customer’s biggest question-how much is it?
30. Do your error messages help?: Take a look at your error messages, and consider whether they just tell the user they’re wrong, or if they actually provide suggestions for how to remedy the problem.
31. Have you tested alternative browsers?: Although the majority of the Internet is still on Internet Explorer, it’s vital that you make sure your page renders correctly in browsers like Firefox, Safari, Opera, and more.
32. Does your content require horizontal scrolling?: Cut down on user annoyance by ensuring that your page’s width does not exceed your visitor’s browser.
33. Have you added descriptions to images?: Let your users know what purpose an image serves by placing information in the ALT and TITLE attributes.
34. Do you link within a page?: If so, cut it out. Linking to a different position on the same page will confuse visitors and undermine their understanding of the browser.
35. Is your design consistent?: Don’t leave users guessing whether they’ve stumbled upon a different site. Use similar colors and typefaces throughout your entire site.
36. Is your name and logo on every page?: Don’t assume that just because a user is on your site, they know who you are. Place your name and logo prominently on your site.
37. Have you accelerated to the next step?: Make it painstakingly easy for users to see where they’re supposed to go next.
38. Does your FAQ answer real questions?: If your FAQ is full of questions that you only wish your visitors would ask, you need to reassess. Make sure that you’re actually featuring frequently asked questions so that the FAQ is actually useful.
39. Can users find information quickly?: Follow the 3-click-rule, which states that users will stop using a site if they can’t find the information they want within 3 mouse clicks.
40. Is your information cluttered?: If so, you need to break pages down into different sections.
41. Are your forms too much trouble?: Cast a critical eye on your forms to make sure you’re allowing flexible inputs and not asking for unnecessary information.
42. Is your site accessible for users with disabilities?: Check to make sure your site is readable by those with disabilities, especially the blind.
43. Are your fonts readable?: Make your text readable by avoiding small font sizes and allowing font resizing.
44. Is your site broken down into digestable chunks?: Follow the 7, plus or minus 2 principle, which states that users can retain only about 5-9 things at one time.
45. Does your page load quickly?: Make sure your pages load quickly so that your website is friendly to those on slow Internet connections, or who have to pay per minute of Internet access.
46. Is your title descriptive?: Make sure that your page title makes sense for the content you offer.
47. Does your site render correctly in different screen resolutions?: If you’re only optimized for 1024×767, you’re rendering your site incorrectly to a lot of visitors.
48. Offer a search function: Make it incredibly easy for users to find information by providing a search box.
49. Have you outlined a privacy policy?: It drives users crazy to give away their contact information without knowing what will be done with it. Make it explicitly clear whether you’ll sell their email address, and how often they’ll get email from you.
50. Do you have a liquid layout?: Frozen layouts and fixed page widths make it difficult for large browsers to render your page, and this design poses problems with printing.
51. Does your content have spelling errors?: Check your content for errors in spelling or grammar, and don’t rely solely on a spell-check function because sometimes that software’s online engineering isn’t perfect.
52. Use tabs responsibly: Use tabs to change views while still in the same context, and make them incredibly readable and logically broken up.
53. Is your splash page absolutely necessary?: Most users prefer to get right to the content instead of watching and waiting for a splash page to complete.
54. Do you have a brandable URL?: Use a short URL so that it can be easily relayed from one user to the next, and you’ll make viral marketing easier to come by.
55. Have you filled out TITLE and META tags?: Make sure you’ve filled out this information to let users and search engines know what your site’s all about.
56. Do you emphasize high-priority tasks?: Make sure that your homepage highlights the important actions you’d like visitors to make.
57. Do users know when they’re clicking an email link?: Ensure that users know when to expect their email program to pop up.

Three Boxes

This is probably the most simple layout on the list. In fact, you’ll be tempted to think that it’s far too simple to ever fit your own needs. If this is the case, you’ll be surprised if you really put some thought into how versatile the arrangement really is.

The three boxes layout features one main graphic area followed by two smaller boxes underneath. Each of these can be filled with a graphic, a block of text or a mixture of both. The main box in this layout is often a jQuery slider, capable of showcasing as much content as you want!

The silhouetted shapes along the top are areas that can be used for logos, company names, navigation, search bars and any other informational and functional content typically on a website.

This design is ideal for a portfolio page or anything that needs to show off a few sample graphics. Each of the images could be a link that leads to a larger, more complex gallery page. Later in the article we’ll see how to mix this idea up even further.

3D Screenshots

As developers continue to create an endless collection of webapps, the 3D screenshots layout seen below, or some variant of it, is becoming more and more popular. The basic idea is to top your page with a headline and then toss in some stylized previews of your application. These often come with reflections, heavy shadows, big background graphics, or even complex adornments such as vines crawling all over the screenshots, but the core idea is always really simple.

Another place I see this trick used a lot is in pre-built themes. In these cases, a designer is selling a stock layout and really needs his/her placeholder graphics to shine, and nothing says cool and modern like some fancy 3D effects!

Advanced Grid

Many of the layouts that you’ll see in this article adhere to a pretty strict grid alignment. However, for the most part, they don’t simply suggest a page full of uniform thumbnails. For instance, the layout below mixes up the size of the images to avoid redundancy.

As with the three boxes example, there’s one primary graphic heading up the page. This is followed by a simple twist on the idea of a uniform grid of thumbnails. The space would allow for a span of four squares horizontally, but instead we’ve combined the first two areas so that the left half of the page differs from the right.

As we mentioned with the first layout, the blocks don’t have to be images. For example, you can imagine this as blocks of text on the left flanking square images on the right.

Featured Graphic

Sometimes you don’t have enough content for a page full of images. So what do you do if you want to showcase one icon, photo or perhaps even a symbol such as an ampersand? The layout below is a super easy solution that is quite popular and reads very well due to the lack of distractions.

The result is a page that is bold, yet minimal and clean. The statement it makes is strong and impossible to miss, just make sure your graphic is good enough to be featured so prominently!

Five Boxes

The five boxes layout is simply an evolution of the three boxes layout. All of the same logic applies, it’s just been modified to hold even more content. It could easily be four boxes as well, it just depends on what you want to showcase. It also makes it look like you put a little more effort into the design!

Obviously, as you add to the layout, the secondary items become smaller and smaller so for most uses, five boxes is probably going to approach the limit.

Just as with the three box layout, this one is so versatile that it can literally be used on just about any type of site. Ideas for switching it up include adding a large background graphic, rounding the corners, adding shadows and/or reflections, or perhaps even adding an interactive element to the smaller thumbnails. You could easily add in buttons that cause them to scroll horizontally.

Fixed Sidebar

Thus far all the sites that we’ve seen have had a top-side horizontal navigation. The other popular option is of course a vertical navigation, which lends itself to creating a strong vertical column on the left side of the page. Often this is a fixed element that stays where it is while the rest of the page scrolls. The reason for this is so the navigation can stay easily accessible from any point in the site.

The rest of the content can borrow from one of the other layouts on this list. Notice that I’ve again modified the three box layout, this time in a four box arrangement. Once you’re done reading this article, look at all the layouts again and think about how you can mix and match the ideas to create new layouts.

Headline & Gallery

Everyone loves a good gallery page. From a layout perspective, what could be simpler? All you need is a solid, uniform grid of images and some room for a headline with an optional sub-head. The key here is to make your headline big and bold. Feel free to use this as a point of creativity and include a script or some crazy typeface.

This example uses squished rectangles to mirror the real site below, but this can and should be modified to fit whatever you’re showing off. The point here is to get you to think outside the box and not default to a square, maybe you could use vertical rectangles or even circles in your own gallery!

Featured Photo

The layout below is extremely common, especially among the photography community. The basic idea here is to have a large image displaying either your design or photography (anything really), accompanied by a left-side vertical navigation.

The navigation might be the strongest in a left alignment, but feel free to experiment with a center or even right alignment to compliment the straight edge of the photo.

Power Grid

The power grid is the most complex layout in this article, but it is one of the most effective layouts I’ve seen for pages that need to contain all kinds of various related content. From images and music players to text and videos, you can cram just about anything into this layout and it stays strong.

The key lies in the bottom half of the preview above. Notice that there’s actually a large container that holds a series of rectangles. This container provides you with the boundaries for your space, and all the content you place inside should be formatted in a strong but varied grid, not unlike the advanced grid layout near the beginning of this article.

Full Screen Photo

The final layout on the list is another that is ideally suited for photographers, but will work on any site with a big, attractive background graphic to display and a limited amount of content.

It can be really hard to read content when it is laid over a background image, so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links, copy, logos and other content.

Rather than using the bar as one really wide content area, try splitting it into a few different sections. This can be done by varying the background color, adding some subtle vertical lines as dividers or even actually breaking the big box into smaller disconnected boxes as I’ve done above.

Check out Designshack for real life examples of each layout.