Posts Tagged ‘usability’

May 05
2009

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:

  1. User-interface and page yayout – actual elements of the page that the customer will be interacting with.
  2. 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.

User-Interface 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:

Poorly designed Control Center login form.

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

  1. A user will go to the “Customer ID” field and enter their ID.
  2. Moving left to right, they will move on to enter their password.
  3. Resetting now like a type-writer (I don’t know if people still remember those), the user will move to the “Language” field below.
  4. 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.

Apr 08
2009

While here at E-Nor, we are heavy on analytics, data-crunching, and numbers, we do have a fun side :) – an understanding of aesthetics and usability through design. After all, let’s say your landing page bounce rate stinks. It could be the design that’s causing users to be frustrated and just “bounce”. How do we fix that? That’s where the Creative Department comes in! We make sure your site is as usable as possible, getting the visitor comfortable enough to ultimately convert.

Today, let’s talk about a great new usable design for multi-level drop down navigation menus. The “Uber-Menu”.

What the heck is an “Uber-Menu”? I recently attended a webinar given by Hagan Rivers, a UI navigation expert, and she brought up a great concept of “uber menus” which many sites are using today. Uber menus, as they relates to web sites, are basically drop-down or flyout menus that lay out certain levels of your site in one big box – most likely to layout your second and third levels.

a) Often, third level dropdowns or flyouts can be quite annoying (see above). The main problem is that our hands aren’t usually steady enough to go in that perfect “L” shape to perfectly hover over 1st, then 2nd, finally 3rd level drop down or flyout. Most of the time, you slip, and both menus disappear! Freaking annoying! Enough unsuccessful tries, and your user may end up frustrated enough to try your competitor’s menu.

b) Another usability standard to take into account is laying out links versus keeping them an extra move (click or hover) away. Studies show that links are more likely to be clicked if they are explicitly “laid out” as opposed to someone having to hover over their parent or having to click their parent link to get to another navigation page or tab containing the link. (See above).

Also, many sites have recognized the error of including a third level in your drop down menu – you run into the problem outlined in (a).  The usual solution is to cut out the third level completely from the menu. Which is kind of the same thing as saying, “This compass is a little hard to use, I’m just gonna chuck it in the river.”

Uber-menus seem to solve (a) and (b) outlined above, coming up with a nicer navigation layout.

We can see here, the level 1 parent being “Patio and Garden, level 2 and 3 are completely laid out – level 2 in bold and level 3 is indented in normal font, which allows the user to easily differentiate the two. You don’t have to worry about keeping a surgical hand on the path to the third level of the dropdown menu. On top of that, your user at first glance can see all goodies and pages your third level has to offer.  One thing to also notice that you can’t see in the picture is that by clicking on “Patio and Garden” the menu stays open.  A positive of that is moving off the menu wont cause it to vanish.

Interested in advanced web design and navigation techniques? Give us a shout!

Jun 26
2008

My high school English teacher advised us about writing essays, “you have to assume the reader is an intelligent alien”. This was meant to say that they are smart enough to figure things out but we have to assume that they don’t know anything. Basically, to write a good paper, make sure you lay everything out but at the same time respect the reader and don’t patronize them.

This type of thinking forces you to balance giving enough information to cover any holes in your work while preventing you from putting too much extra fat that may bore or frustrate the reader.

Replace the word “reader” with “user” in the previous sentence, and I think you have an excellent philosophy for usability.

The internet is the fastest and most convenient way of getting information. In the small amount of time it’s existed, we’ve realized that the easier a site is to use – well…the more people will use it. In turn, as surfers we’re spoiled like this and now come to expect that a website will get your job done quick and dirty. So as surfers, we are on the hunt – frantically scanning pages. If we have to think too much – there’s no penalty for hitting that back button and moving on to the next search engine search result on the list – in hopes that maybe this next site “dumbed it down” enough.

It’s safe to assume that the user that stumbles upon your page is thinking just that, and that’s why it’s important that your site is as “dumbed-down as” possible – so even a smart Martian could use it…

Conventions

Continuing my reminiscing of high school (quick, someone pinch me with a 2 by 4 and get me out of this daydream nightmare), there were two mannerisms that I learned without being taught:

1) When walking down the hallway, there are two lanes – On-coming traffic and On-going traffic. When you want to go somewhere, you walk on the right side of the hallway in the On-going traffic lane.

2) When you open a door, you have to go that extra inch to swing it all the way open as an etiquette to the random student who may be following behind you coming through the doorway. This eventually is a reflex for everyone and is done in all instances, regardless of who’s behind you. In fact, after awhile it was so automatic you didn’t even check if anyone was behind you, you just swung that door wide open.

What the heck does this have to do with usability?

Well, Sociology 101 – a bunch of people doing something and consistently repeating it means everyone will end up doing it (almost naturally). No one explicitly instructed me to do these things. I just picked it up by copy-catting everyone else.

This is an important concept to take advantage of in Usability – standard conventions – understanding what EVERYONE has been trained to do and are doing.

The new laptop you bought is easy to use because it works just like all the hundreds of other laptops you’ve seen/used recently. The ‘on’ button is this circle at the top of your keyboard, there are a bunch of pretty lights indicating different things, you have external volume buttons on the outside, usually on the front bumper of your laptop, etc. In the back of your computer, most average Joe’s now know that, for my audio speakers, I plug the green plug into the green socket.

None of these conventions are mandatory – your laptop manufacturer could’ve put your ‘on’ button on the bottom of the laptop or your speaker plug could have been the color ‘orange’ – but the convention everyone uses is what makes it “natural” and thus, easy for everyone to figure out.

So unless you plan to be a trendsetter (“I’m going to wear my underwear on the outside of my pants until everyone copy’s me!!!!” – let’s see how far that one goes Superman), a good bet is that your website design will be usable when it copies conventions that everyone’s used to doing.

A good place to start, then, for design inspiration is looking at the big dawg’s websites that everyone uses which have now defined common usability conventions. For example, if you are planning to create a site that will be displaying a huge amount of videos, you may want to look at the video big dawg (we’ll call him “TouYube”) and design your layout that way – i.e. video display at the top left of the page, search at the top middle, “related videos” box on the right, etc. If you’re designing an email client or some sort of document creation user interface, the “compose”and “reply” are usually buttons at the top left. In your design, you may not want to have those as just hyper links in the top right corner then -use buttons and put them at the top left.

At this point, it’s unlikely you’d have to worry whether, “Hmmmmm…would the placement of these functions objectively be logical to the user?” They’ve already been trained to use this layout the millions of time they used the big dawg’s site. Your usability now has already been ingrained into the user’s skull by someone else.

If you insist on being original and innovative, at least consider the conventions big dawgs have defined, and make your site a combination of them or at least some sort of derivation based on them, as to still take advantage of the familiarity.

In conclusion, (large numbers of people) + (consistent repetition of an action) = a Social Standard. Take advantage of these standard conventions and apply common practices to the layouts of your website design.

Farid

Creative Director, E-Nor

May 12
2006

Well you’ve finally come to the conclusion that you need a website. Great stuff! A website is an effective marketing tool for your business. Literally millions of people go online now to find what their looking for instead of flipping through the antiquated yellow pages. So where do you begin?

Enter Li’l Johnny, your nephew, aka the computer geek of the family. Li’l Johnny is an exceptionally bright kid, with a very rare talent in “doing computer stuff”, and this makes him the perfect candidate to take on the job of designing your website. The hours and hours he spent fiddling around in Adobe Photoshop zooming into images, resizing them, warping them, and applying all sorts of crazy, sometimes ill-contrived effects serves as the foundation of his knowledge. The skills he honed in scanning your family re-union photos, editing the group image of your family, cutting out old Aunt Beth and replacing her with a tree stump, have most certainly prepared him well.

The trick is to get Li’l Johnny inspired and in the right frame of mind by buying him something he wants… like those cool new Nike shoes, or tickets to a football game for him and his buddies. Once he appreciates you, he’ll be in the right frame of mind to produce the right design for you.

So with a great attitude and a renewed love for his favorite relative, Li’l Johnny will get hard at work and slap together a design that will totally blow you out of the water. Finally the day arrives – It’s everything you ever imagined, the perfect representation of your business…

Or is it?

Perhaps we should look at this from another angle. A professional website design takes into consideration several factors, none of which involve removing annoying relatives from family photos, as enticing as that might sound :)

Li’l Johnny, while sincere in his efforts, isn’t aware that a successful website design takes into account the following factors:

1) Goals and Objectives – Designing a site with loosely defined or no measurable goals is a waste of time. To achieve design success, take the time to identify specific goals and objectives, and ensure a mechanism is in place to test against those benchmarks. Investing in tracking or surveying software to qualitatively and quantitatively monitor the site.

2) Target Audience – This is the most important aspect of website design. A successful user experience will result in repeat visits, referrals, and a positive atmosphere on your site. Even one bad experience, and your customer is lost. Focus on who your target audience is. Identify their likes/dislikes, their background?

3) Web Standards – Ensure that the site is designed to meet the latest level of web standards. Even the smallest mistake can result in alienating a huge percentage of your customer base, because the site won’t function in their browser, or their monitor resolution. To achieve the greatest level of flexibility, make sure the code is streamlined, and effectively employing Cascading StyleSheets that separate content from presentation. Keep an eye out for Usability and Accessibility standards.

4) Usability – Your site may look nice and be technically sound, but is it usable? Information should be easily accessible by a broad base of users, each of their own level of expertise and background. Users should be able to navigate the site with minimum clicks and find the information they are looking for easily.

5) Keywords – Have you done any research on what your target audience is searching for online? Did you make sure that these keywords are prominent on the site and in your content? Did you know that most site visitors, don’t actually read the content…they skim through it. Keeping that in mind, keywords should be placed strategically throughout the site, to achieve maximum visibility. This is a major aspect of implementing an effective Search Engine Optimization (SEO) program.

6) Marketing - do you have a solid plan in place to market your website once it’s complete? Even with the nicest design, a website is useless unless your customers visit it. How effective would it be to have a beautiful store, without any customers in it? Same principal…

7) Maintenance – A site is only as good as its content, and content should change on a regular basis. How should that happen? Should you hire a web design company each time updates are needed? That doesn’t sound very appealing. Instead, invest in an infrastructure allowing the you to easily update content/information regularly.

Let’s let Li’l Johnny focus on his grades in school, or perhaps he can do a website for your family. Leave your business to the professionals.