Design Usability Tips – Taking Into Account the Users Logical Flow

A very basic but extremely vital part to web design is understanding your users’ logical thought process and flow. You want to take this into account as early as possible in your design phase so that you create a very familiar flow to the user.? Putting a link or information in the next logical place makes the process intuitive and thus, more likely will lead the user to convert.?? The more familiar the flow, the less they have to figure out where to go which betters their chances of getting from their starting point to your ending point.? The your end-point could be them submitting your form or buying your product.

While missing this boat can make you question “Why isn’t my page converting?”, getting it right can change your page from an occasional “hit-or-miss” to a conversion machine.?? In some cases, simply changing your design to make a button or link more intuitively available might end-up increasing your conversion rate by 100′s of percentage points.? That small design update just grew your business astronomically.

There are two main aspects when it comes to understanding logical user-flow:

User-interface and page yayout – actual elements of the page that the customer will be interacting with.Site structure and navigation – how your pages are organized.

In this post, I’d like to go through the first item – UI and page layout.

As I said, it’s important to remember the way your user will interact with your page while designing your page layout.? Take into account your users’ natural reading pattern – which in the U.S.A is left to right, then top to bottom. Thus, the top-left-most content will be the first thing they see then and they’ll be moving in an “F” pattern down your page.

Here’s an example of a login form that does poorly at following user-flow:

Can you spot the issue here? ANSWER: The “Login” link is in a bad place (you see it at the top right).

A user will go to the “Customer ID” field and enter their ID.Moving left to right, they will move on to enter their password.Resetting now like a type-writer (I don’t know if people still remember those), the user will move to the “Language” field below.Ok, now were ready to login. When I move down and to the left…where the heck did the “login” button go?

The placement of the login button is not in the next logical place, and not only breaks up the user flow, but is also hard to find (aside from the fact that it is not a clear clickable button).

Now this may not seem like a big deal here cause there’s not much going on in this form. But what happens when the form is longer down the page and they have to scroll back up to search for this login/submit link? Should we assume the user knows to do this?

No. You’ll be surprised the percentage of people clicking such a link decreases or increases based on simple logical placement of this button.? Remember, a as surfers, we do not want to think.? We do not want to search.? It is as easy for us to close the page, and move on to the next site in a blink of an eye.

Worse – let’s say this is a “Checkout Now” button and your site makes $10k a month in revenue on this product. If the placement of this button even affects conversion even? by 10%, that’s enough to make a difference.? Larger sites that make significant online revenue a month would be greatly impacted, where even a small percentage of decrease would hurt (or a small increase could pay-off big time).

In the case that you are a smaller/medium size online business, online conversion may be your businesses only means of survival, so a small design detail like this could even make or break your business.

Technorati Tags: usability, web design

Tags: usability, web design

This entry was posted on Tuesday, May 5th, 2009 at 12:38 PM and is filed under web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

View the original article here

Improve Your Conversions: Design Meets Data Using Google Browser Size and Google Analytics

Google has recently introduced a new tool called Browser Size to help web designers “ensure that important parts of a page’s user interface are visible” by a wide audience. You basically type your URL in the tool and it’ll then load your page and show what percentage of users see what sections of the page, without having to scroll i.e. giving us a visual view of what is seen “above the fold”. The idea is if more people have to scroll to find your “calls to action” they are less likely to click and convert. For example, Google applying this method on Google Earth download page layout had an impressive 10% increase in their download rates by moving the download button up by 100 pixels.

So what does the Browser Size look like? Here is how our home page appeared in the Google Browser Size:

As you can see, 90%+ of the web population can see our “Optimize Your site” Call-to-Action, the green button (surrounded by a red box for you to see it in this above snapshot, but the home page doesn’t have this ugly red box ). Kudos to our creative director and web designer (luckily we recently distributed Nordstrom’s gift certificates for the Holidays, otherwise they both would be asking for a bonus after reading this post:)).

Now that you have a visual view of your most important page elements, it’s time to put this useful information into action. We do know that design best practices for usability and conversion teach us that your important information should be immediately visible and easily accessible to users. An example of such an element is a conversion button, such as “Buy Now” for an ecommerce website.

Let’s say you have a “Buy Now” button at the bottom of the page, where only 20% of users can see it. And say your “add to cart” rate is 5% for all the visitors that come to this page – so for 1000 visitors, that’s 50 starting the purchasing process.

If we know that according to design best practices, a visible “Buy Now” button that catches your users’ eyes will entice users to buy, thus, “above the fold” is the way to go – that is, making sure this button is visible to as many users as possible (not requiring them to scroll down) could significantly increase your “add to cart” rate. That is, if 20% of your users seeing the “add to cart” button is leading to a 5% “add to cart” rate, imagine what 90% of your users immediately seeing the button may do. Even if that causes a 5% increase in “add to cart” (the new “add to cart” rate will now be 10%), you’re looking at doubling the number of visitors that start the purchasing process and you are likely to double your sales/revenue.

So with the help of this tool, if your page is being designed for 1280×720 and you realize 20% of your users can see that resolution while 90% can view 800×600 – though you don’t have to change your design to be tailored to fit the smaller size, at least the important elements should take this into account.

It’s worth mentioning that some folks have other views about the benefits of the “above the fold” concept, for example we really shouldn’t be cramming too much information up “above the fold” and we should keep in mind that “less is more”. Nonetheless, the Google Browser Size is still very useful.

The data in the Google Browser Size is collected based on visitors to Google.com. What you can also do is to use screen resolutions data from Google Analytics on your own site . Here is how to get the data in Google Analytics:

Click on the “Visitors” tabClick on “Browser Capabilities”Then click on “Screen Resolutions”

You’ll get a report on screen resolutions that visitors to your own site use. You can then optimize your site based on this information. Here is a look at the report for our site:

So it appears that from our own screen resolutions data, most of the visitors can more or less view the entire page (a very good thing!).

Now, if you had a site that had a different screen resolution distribution, like the one below, you’d want to review the current design/layout of your pages and tailor them to the different visitors’ pattern.

And as always, don’t just look at data in aggregates, use segmentation to your advantage and zoom in on the data segment that is most important to you. Here are some examples of how to slice your data before you start your analysis and fact finding:

If your targeted audience is only in US & Canada, then run the Screen Resolutions reports on an Advanced Segment for the US & Canada audienceYou might want to also segment by buyers and non-buyers and monitor any interesting trends between these two distinct groups of visitorsIf you have different page layouts on your site, for example, your blog, your home page and category pages, you’d want to run the above analysis on each unique layout and make sure the messaging/calls-to-action are where you want your visitors to see them

One last note. If you are used to running tests, whether A/B or Multivariate, then it’s probably a no-brainer to run an experiment before you make massive (or small) changes across your site. If you haven’t tried testing yet, then this is a perfect opportunity to take the data and analysis to your manager and convince them to support you with resources to begin testing and realize site and revenue improvements! You can use the powerful and free testing tool from Google, the Google Website Optimizer (GWO), or another testing tool of your choice, to confirm (or disprove) your hypothesis before your roll out the design and layout changes.

Hope you find this post helpful. Feedback, comments and questions are most welcome!

Technorati Tags: google analytics, web analytics, web design

Tags: google analytics, web analytics, web design

This entry was posted on Wednesday, December 23rd, 2009 at 12:49 PM and is filed under web design. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

View the original article here

Web 2.0 Button Design

Web 2.0, THE popular style and standard for contemporary web design, utilizes the use of clean, bright colors, and gradients. A key visual indicator of Web 2.0 design is the use of large, 3D buttons that grab the user’s attention. Buttons can be used to promote a sale, contact, and/or have a slogan such as “Lose Weight!”, while at the same time, tempt the user into clicking and going where you want them to go. You know you couldn’t resist pressing the red button when your mom told you not to!

The impact of having a button is far greater than just having a link on your site. For example, if your site said “Contact Us” at the bottom within the content, the viewer would most likely have to read through the content until they get to the “Contact Us” to even know its there since its buried in text. But a button that clearly states “Contact Us” is more likely to visually attract their attention.

In this post, I’m going to go through how to make web 2.0 buttons that “pop”, even if you’re not that Photoshop savvy.

I just learned how to create web 2.0 buttons a couple months ago. It usually takes me a couple hours to get the right effect and gradient exactly the way I want it to look. Luckily, I stumbled upon an awesome resource for gradients and styles that made making buttons much easier than I could’ve imagined. I was searching around various blogs trying to find a post that was interesting and useful and found this BIG TIME TIME SAVER!!!

After downloading these photoshop styles/button templates, all you really need to do is minor tweaks, and your button is ready to go.

Here’s how:

First thing you have to do is download the zip file from dezinerfolio.com, who shared their styles on their blog.After you download the zip file on this page, upload it into your Photoshop,Open up a new Photoshop file and go to Window > Styles to bring “Styles” into your toolbox (shown below).

Now that you have uploaded the style, you’re ready to create a web 2.0 button in little to no time!

Open a New Layer on your file and find a style you like best.Once you’ve found a style you like, simply click on the style and the settings of that particular style will automatically be implemented onto the layer.As you can see in the images below, the image on the left shows the styles in the toolbox and the one on the right shows how the styles effects automatically updated into the layer.

Next, choose a shape for your button; I like using the rounded rectangle tool for a button.After you’ve chosen a button shape, click and drag the mouse to make the rectangle as big as you want. As you can see in the image below the color of the style/gradient I chose fills in the rectangle.

After you have the button, color, and style you want all that’s left is adding text and layer effects. Below I have an example of the button with text. I have put some layer effects on the text to make it pop out of the button.

After you have stylized the button how you want it, you can trim the white space around the button.

And there you have it, a button! That didn’t take long at all!

Technorati Tags: web 2.0, web buttons, web design

Tags: web 2.0, web buttons, web design

This entry was posted on Tuesday, June 9th, 2009 at 12:26 PM and is filed under web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

View the original article here