The Balio UI Kit is an absolutely massive PSD file containing buttons, stickers, icons, pagination, menus, login forms and much much more. It’s a very high quality UI kit that can come in really handy for your designs. It’s free for personal and commercial purposes.

The set was designed by Grafpedia, where they teach you how to advance your design skills and they also constantly publish loads of graphic resources such as icons, vectors, brushes, textures and a whole bunch of other stuff. They already have 70,000 items available! Check out their tutorial on how to use this kit for designing a web layout.

The Kit is available for free to all WDD subscribers, simply enter your email address below to gain instant access and download the files. Being a subscriber of WDD allows you to get early access to freebies like these and much much more (and it costs nothing to subscribe anyways)!

We’ve included a full preview after the jump… Enjoy!

Never Ending WordPress Business Bundle – only $14!

This technique involves fixing some element in the browser while the rest of the page scrolls. Most often we find this done on header elements including the main navigation for a site. This is also a popular approach on single page sites where the in page navigation needs to be ever present. We also find various elements of web pages locked in place using such techniques.

There are many situations we can find where fixing an element in the page is a good thing, but it all comes back to a single purpose. In almost all of these situations the fixed element keeps a critical part of the page in front of users at all times.

The importance of these elements varies, but to some degree the fundamental goal is to keep some part of the page perpetually in the view port.

As you consider using this technique I highly recommend you carefully consider why and how you do so. Keep in mind that whatever part of your page doesn’t move will automatically draw lots of attention. So be sure you are putting it to work. Let’s dive in!

Fixed headers

Fixed headers are by far the most common fixed position element, so much so in fact I had to start adding to this collection in order to avoid too many samples. Most often the header is fixed in place to ensure that the sites navigation is ever present. As I mentioned before, this is especially true when dealing with a single page web site.

There are many subtle variations in how you can handle fixed headers so we will review some samples for various ideas on this approach.

Freckles & Handsome

This is what I would consider a classic example of this technique. The header is fixed in place as you scroll through the site. This includes the logo and main navigational elements. Additionally, it is a single page web site. Clicking on the main navigation scrolls you to the appropriate part of the page.

In such a case as this the sticky header makes browsing the single page site straight forward. It also avoids one of the more annoying aspects of many single page sites: when the navigation is only at the top of the page, but it scrolls on for ages. As such, the fixed header not only looks nice and keeps the site’s main branding front and center, but also ensures the site is easy to use.

Mapalong

This example uses a fixed header, but with its own minor twist. This site is also a single page layout, but lacks any in page navigation. In this case the fixed header contains the main logo and a sign in button, both very important elements. But, even better than this, when you scroll down the page the main call to action moves to the header as it rolls out of view. As a result, the primary conversion point for the site is always visible. And yet, even better than that, the act of the call to action fading into view calls the user’s attention to it, further emphasizing the conversion point in the design! In my opinion a brilliant use of the approach.

Kisko Labs

Another clever approach to the fixed position header is a technique I call slide and stick. On the Kisko Labs site only part of the header sticks. As you scroll down the page the main navigation scrolls as well. That is until it hits the top of the screen, then it sticks there. Thus, the navigation slides (or scrolls) as normal, then sticks to the top.

An extra detail that is really nice here is how the navigation highlights the part of the page that you are currently viewing. Since this is a single page design it is helpful to have the current part of the page identified as you would with the normal “current page” status of any navigation.

Raise the Roof

A common extension of this style is to incorporate some level of transparency into the sticky layer. In many of the examples you will find here this is done by simply having an uneven edge to the sticky element. Sometimes this is done by having an element protrude from the fixed bar, other times with a jagged edge. On the Raise the Roof site it has been accomplished with a very organic and nearly random border.

In this sample we find an interesting visual result. Through the use of overlapping elements the site creates visual depth as the contents scroll behind the header. This is further emphasized by the moon in the background that is also fixed. The end result is three visual layers. Such depth adds a great level of visual interest and can create a visually striking design.

Welcome to the Water

The Welcome to the Water site is a rather unusual creation. Very little about this site fits the norms of web layout and design. Of particular interest for the topic of this article is the fixed header. On this site that fixed element serves as a navigational tool to the site. But in many ways it has more of a toolbar feel to it.

Additional samples of fixed headers

Here are some additional examples of fixed headers. You will find a wide range of styles and subtle variations here.

Tam Cai

Marlon Messam

Big Eye Creative

Balencic Creative Group

Ivo Mynttinen

Krista Ganelon

Creattica

Ian James Cox

Make Better Apps

Matthew Carleton

Shweplantis

TruQua

Rodolphe Celestin

Holcomb Guitars

Trussystem

Fixed Footers

Perhaps the most obvious opposite to the fixed header would be the fixed footer. In such cases the footer of the page is stuck to the bottom of the screen. As the user scrolls, the element stays in place.

Much like any other fixed element, creating a focal point is still the primary goal. Interestingly though with footers such as these it is most often about a secondary function that is still a primary goal.

Unleaded Group

The Unleaded Group site is a prime example of this. Here the fixed footer contains elements that are action oriented and strike at the core purpose of the site. First note that all of the items in this bar are things a user can do: promote them on social media, place a phone call, or email them. Secondly, they are the primary action items the agency most likely wants you to take. They either want you to promote them, or contact them. These are the primary reasons to have a site such as this. So it makes good sense to fix them in place I a footer where they will get lots of attention.

Envato

The Envato site also has a fixed footer. Here the bar contains the site’s primary logo, which has interestingly been moved here from the typical top left. Frankly, for a brand like Envato this is not an issue. Also, you will find a series of drop down menus that launch you onto their various web properties. This simple function is their real goal. In fact you might say that this business profile page is not really where they want people to end up. As such, the focus on driving you back to their content sites is prominent and unavoidable.

Kiyuco

For many sites such as this one their email marketing programs are of critical importance. As such, having a fixed placed footer that prominently highlights the sign up form can go a long way to grow such mailing lists. Can email marketing help you promote your site over a longer period of time and more effectively pursue clients? If so, perhaps a fixed footer such as this one would be a great tool.

Fixed position sidebars

Locking elements of a web page into place is not something limited to headers and footers, though they might be the most popular. It would seem that a fixed position sidebar is a close second.

Fixed place sidebars often contain very similar information to what you would find in a header. This includes things like logos, navigation and social media tools. Here are some samples to consider if you want to use this approach.

Jorge Rigabert

This gorgeous site is a perfect example of the style at work. Here the side bar contains the sites primary branding and navigational options. This sidebar type of approach is great because it keeps the navigation in view as the page scrolls, but also because it doesn’t intersect with the content as it moves. Though this might be a subtle distinction, it makes for an incredibly smooth interface. Sites such as this display an elegance that appears simple, but is incredibly difficult to put together.

More Hazards More Heroes

I really love the way this site works. The fixed elements in the sidebar are the core functions the site owners want you to take. More than anything they want you to hear the music! As such, the prominent and permanently on screen “play” feature is ready and waiting. I can’t imagine a more critical element to the site, and to have it so prominently displayed just makes good sense. And you have to love that it hasn’t been presented in an obnoxious way; it doesn’t even auto play. Kudos to the designer that controlled that temptation.

Yowza

Sometimes it is desirable to create a single sticky element that promotes a particular function. We have seen this with various feedback and support services that you can plug into your site. In this case, a Facebook like button has been affixed to the side of the site. It stays in place as you scroll the page. This, of course, draws the user’s attention to the element and encourages them to use it. I would say this shows the power and importance of social referrals in a web-based business such as this.

As a side note, I love the site’s twist on the 10px top border that has become so popular. Here the element simply scrolls by. Not a dramatic animation, but something about it is fun and adds a layer of interest and life to the site.

Fat-Man Collective

This site follows all of the patterns we have found in our previous samples. But it stands out in a huge way due to a simple animation. As you scroll down the page the character in the side bar animates and walks. This element single-handedly elevates the site into a unique and memorable category. How is it that something so trivial can have such an impact. It takes this simple site and pumps it full of awesomeness. It shows that the agency behind it loves polishing their work with the types of finishing touches any client is going to die for.

More fixed sidebar elements

Here are some additional examples of fixed sidebars at work.

Silly Poems

Colin McKinney

Informant

This is Marcela

Janette D. Council

Logo only

An approach that we don’t find all that often is a fixed position logo. In this example the logo has been locked into place even as the page scrolls. This atypical approach keeps the site’s name front and center. Designs such as this can be interesting to consider. It is really hard to guess why they might have done this, but one can only assume that the main branding is of critical importance. Perhaps they have lots of similar competition? Perhaps they just want to make sure you remember their name? Regardless, it is an interesting technique worth keeping in mind if it applies to your project.

“Back to top”

When it comes to really long pages a nice feature to add is a link that takes you to the top of the page. And with sticky elements you can create such a link that stays in the same place as you scroll the page. This is exactly what the samples provided here have done.

Most frequently such an element is placed just outside the layout. This way it doesn’t interfere with anything else in the design as it traverses the page. You will also notice how these elements frequently have an arrow pointing up—perhaps an obvious element to include, but very important to keep in mind as it informs users quickly as to it’s purpose.

This approach somewhat contrasts the notion of a sticky header. In this case the navigation is most often only at the top of the page. So returning there is important as it allows people to quickly bounce around sites contents. In the case of single page sites though this can be a bit of an annoying extra step.

Overlapps

This sample demonstrates a nice extra touch in that it doesn’t show the return to top element unless you’re not actually at the top of the page. Perhaps an obvious detail to include, but as you will find it isn’t always the case. Part of the power in this approach is that the very act of it appearing draws attention to it to ensure a user is aware of it.

Two more samples

The two following examples both have return to top buttons, though they are visible all of the time. It is interesting to me that this element is most frequently placed in the bottom right corner of the screen. It is not the most prominent part of the design, so perhaps it’s secondary nature is good for such a less important element. You will notice of course though that the element is still highlighted by breaking the borders and with bold colors. I suppose the morale of the story is to consider its importance to the use of your design. If it makes all the difference, make sure it is visible.

Wildcard Thinking

Dusanka & David

Multiple fixed elements

In this final example we will take a look at a site that has many fixed elements in the page. In many ways this site breaks with most of the norms of web design and layout. Except for the logo in the top left corner, almost nothing is in its usual place.

We do find some elements we are familiar with based on this article though, such as the fixed side bar. However, you will notice that two others are far from typical. For example, the fixed footer that contains some site wide links. Things like privacy policies and terms & conditions seldom warrant such prominent position in a page. Yet here you find them affixed to the page with some other rather important navigational links.

I do really like how they have tacked the user account links to the top right corner. This is where they are frequently placed, though are seldom fixed there regardless of scrolling as in this case. I like this because it ensures you can always quickly gain access to the member’s features of the site; something that perhaps some other apps and web sites could benefit from.

All in all this site is far from normal, but something about it works incredibly well and is easy to love. Its unusual layout doesn’t make it hard to use and the end result is a distinct and pleasurable experience.

Resources

Finally, with this round up I would like to include some handy jQuery plugins that address the need of fixing elements to a specific location in a page. They offer different features that will fit various needs you might have, so be sure to explore them all to find the right fit.

The great thing is that they are all jQuery plugins and they are super simple to implement. If you do want to produce this style, these will at least make it an easy job.

Meerkat

Meerkat is one of my favorite tools for this particular job. It’s ability to be hidden makes it a great tool for displaying promotional content or important features such as email sign up forms.

Stickyscroll

Stickyscroll is a plugin that allows you to create elements that scroll with the page until they hit the top, and then they stick in place. This plugin also helps ensure elements don’t scroll into a footer region by giving it a bottom boundary; a nice extra feature for sure.

Waypoints

Waypoints allows you to trigger jQuery events when a user scrolls to specific points in a page. This is handy if you would like to highlight or change the navigation to match the user’s location in the page. But the fun doesn’t end there as there are countless things you could do to a page or design as a user scrolls and interacts with it.

Conclusion

Fixed elements are now a common element designers can put to work. Tools to accomplish such features and full browser support are no longer an issue.

As such, it is a great technique to keep in your tool belt and draw out when the time is right. Such approaches are, of course, not the type of thing you use every day, but can be incredibly powerful when used effectively.

Patrick McNeil is a freelance writer, developer and designer. In particular he loves to write about web design, train people on web development and build web sites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

Never Ending WordPress Business Bundle – only $14!

If someone has already created something that fits what you need and/or want, and especially if that element is available for free, then why waste your time designing something that turns out virtually identical?

Your time and effort is better spent on creating new and unique parts of your design, while using what’s already available for other parts.

Below are more than 50 free UI element packs from a variety of designers. Buttons, form elements, media players, and similar stock elements are the most popular, though there are other elements included also.

And as a bonus, there are over half a dozen premium element packs at the end. Enjoy!

Free Elements

Soft UI Kit: Free PSD for Mocking Up Web Designs

A set of common web elements for mockups, designed by Adrian Pelletier and provided by Six Revisions.

Transparent Glass UI: Free PSD for User Interface Design

This set of dark UI elements was created by PixelsDaily, and is also provided by Six Revisions.

Freebie: Modern UI Pack Photoshop PSD

A modern, minimalist UI kit with some simple, basic elements.

Freebie: Massive Web UI & Button Set

This web UI kit from MediaLoot includes brightly-colored buttons, info boxes, breadcrumbs, search forms, and many other elements.

Web UI Treasure Chest v1.0

This kit includes over 100 elements for your designs, including banners, buttons, tooltips, badges, and more.

Web Form Elements

A set of gray and gold web form elements, including text areas, buttons, and dropdowns.

Web Form Elements Vol.2

A set of gray web form elements, including sliders, dropdowns, tabs, and more.

Got Wood? UI Design Elements

A kit consisting of more than 100 modern UI elements with a wood-grain look.

Snow UI Kit

This UI kit from MediaLoot has a muted gray color scheme with dark bluish-gray accents.

Dark Mysterious Web Elements

This set of design elements was designed specifically for use with dark and highly-styled sites. It includes search bars, separators, buttons, audio player elements, and more.

Black UI Kit

The Black UI Kit includes glossy, black and blue elements, including plenty of media controls.

Moonify UI

Moonify is a set of UI elements that includes a search bar, rating stars, and some basic form elements.

Blue and White GUI Kit

A set of soft blue and white UI elements, including form inputs and buttons.

Black UI Elements

A set of glossy black and bright blue UI elements, including sliders, buttons, dropdowns, and text inputs.

“Grayness” UI Kit

Grayness is a set of form UI elements in light gray.

Solid UI Kit

The Solid UI Kit has a retro sci-fi look to it, with a yellow-gold color scheme.

Dark UI Element Set

A set of dark, slightly glossy buttons and UI elements with a purple loading bar.

E-Commerce Steps UI

The elements here are designed specifically as the second step of an e-commerce checkout process.

“Calligraphy” GUI Elements

A set of UI elements inspired by Chinese calligraphy techniques.

“Sepia” UI Elements

A set of brownish-gray form elements with an antique but clean feel to them.

Bloom UI Kit

The Bloom UI Kit includes buttons, form inputs, sliders, and more.

Apple Styled UI Elements

A set of Apple-inspired elements, including buttons and form inputs.

Textured Alerts

A set of transparent alert styles, with changeable colors and a removable texture overlay.

Header & Navigation Pack

A set of three navigation/header styles.

Simple UI Elements

A set of versatile minimalist, rounded UI elements.

Pretty Little Search Fields

These Pretty Little Search Fields come in two styles (rounded and square), with three different color schemes.

Add to Cart Buttons

A set of add-to-cart buttons in three muted colors.

Simple Tabbed Navigation

A PSD for simple tabbed navigation with dropdown menus.

Dark Button Navigation 2

A set of dark navigation buttons for horizontal or vertical menus.

Transparent Tooltips

A set of transparency tooltips in four colors, from Premium Pixels.

Neat Sliders – Free PSD

A set of retro sliders with chrome buttons and yellow accents.

Minimalist Horizontal Navigation

Simple navigation elements with subtle coloring and awesome state designs.

Sleek Dropdown Menu

A dark dropdown menu button.

Fancy Slider & Toggles

A gorgeous multi-colored slider with chrome ends.

A Minimalist Calendar Widget

A simple blue and gray calendar widget PSD.

Form Goodness Kit

The Form Goodness Kit is a set of minimalist but bold form elements, including input fields and buttons.

Green Contact Form

A simple, modern green contact form with icons and a submit button.

Modal Box Contact Form

A minimalist modal box contact form.

Login Form PSD

A highly-styled PSD login form.

Quick Sign In Form

A short, minimalist sign-in form in blue and gray.

Vintage Newsletter Form

A vintage-styled newsletter signup form.

A Clean Login Box

A minimalist login box in white and muted red.

All In One Web Elements Kit

A huge collection of elements in dark gray, red, blue, and green, this kit includes buttons, sliders, and multiple content styles.

Victor Elements

A set of retro-styled UI elements, including sliders and buttons.

Mini Gallery

A set of PSD image gallery elements.

Wraps and Ribbons Pack

A set of ribbon and wrap effect PSD files.

Design Elements

This pack includes search inputs, buttons, sliders, dropdowns, and more.

Big Block UI

The Big Block UI includes a number of bold elements, including a search box, sliders, rating stars, and a dropdown button.

Freebie: Modern Web UI Set

This set of black and gray, slightly glossy UI elements includes navigation, buttons, scrollbars, panels, and breadcrumbs.

Light UI Elements

A set of light gray elements, including buttons, media player controls, and breadcrumbs, with various colorful accents.

Spring GUI

A set of green elements, including buttons and dropdowns, among others.

Web Elements

A set of dark, multi-colored elements, that includes scrollbars, search fields, download buttons, and more.

Video Player

A slick video player chrome.

Premium Elements

Glorious Colors UI Kit ($6)

A set of brightly colored UI elements, including sliders, switchers, buttons, and more.

Glowing UI Kit ($5)

A set of glowing UI elements, including form elements, separators, buttons, and more.

Minimalist Slider Creator ($4)

Contains more than 70 elements for creating sliders, including shadows, frames, vignettes, and more.

Stitched Web Elements ($5)

Set includes a login box, subscription box, download button, and more, and comes in four different colors.

Subtle Web Elements II ($5)

A set of retro-styled elements with subtle color schemes that include bright blue and orange highlights.

Minimalist White Web Elements v3 ($3)

A set of white and light gray elements that are clean and fresh.

Web Elements Pack ($5)

A set of elements that includes banners, media elements, navigation, buttons, and badges, in five color schemes.

Written exclusively for WDD by Cameron Chapman.

What’s your favorite site for finding PSD files for your designs? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

Most importantly, a button has to look good. It has to scream “Click me!,” or else it simply won’t be as effective as it needs to be. Buttons are commonly used to “”Search,” “Submit,” “Send,” “Buy” and “Upload.”

In this article, we’ll look at seven common button elements in modern interface design: textures, patterns, 3-D, pixel-perfect strokes, indented backgrounds, glows and highlights.

You’ll find 35 fantastic examples of these techniques as well as a handful of mini-tutorials for Photoshop.

1. Textures

Using texture is a great way to add some depth to buttons and make them stand out a little from the rest of the interface (and ultimately making them more clickable). Below are some great examples of textures in buttons.

ShelfLuv uses texture throughout to add dimension to its interface, especially in the button and text field areas.

Texture is used all over this interface, but it is heavier in the “Upload” button area, making it a focal point.

The texture here is blended well with the beveled button, making it look real.

Texture isn’t actually used on this UI button but does appear in the background, allowing the button to stand out.

Creating a Textured Button

Create a simple background using the Shape tool and by adding noise (Filter → Noise → Add Noise).

Reselect the Shape tool and draw a rectangle, making sure the top of it is hidden off the edge of the canvas.

Change the color of the shape to blue. I used #00A3D9.

Duplicate the Shape layer and resize it in the same position. Change the color to a slightly darker blue.

Duplicate the layer once more. Position the layer beneath the last two Shape layers, and change the color to a light gray.

Photograph or download a paper texture (I used one from Lost & Taken). Go to File → Place, and locate the file to place it in the document. Resize it and position it over your blue shapes.

Remove any excess texture by using the Marquee tool, and change the blending mode of the texture. Experiment with different modes because different textures produce different results. You may also want to lower the opacity levels a little.

Open the Layer Style window for your darker blue shape, and apply the following Drop Shadow style to add a subtle white shadow.

Now apply a Stroke to your shape using the settings below.

Finally, add an Inner Shadow to the shape, to give it further dimension.

Add some text to the button and you’re done!

2. Patterns

Patterns are another great way to add a bit of interest and depth to interface buttons. Below are a few examples of patterns in buttons, all subtle yet effective.

A diagonal reflection is used on the left side of the button here to separate the icon from the type.

A diagonal line is used in this button, fitting the vintage look while adding dimension to the design.

This is my favorite use of a pattern in these examples. Although not used in the buttons themselves, the pattern in the gray header adds dimension to the whole design and ultimately helps the orange buttons stand out.

Creating a Patterned Ribbon Button

After creating a textured background using the technique in the previous mini-tutorial, draw a rectangle using the Shape tool, and fill it with a blue-green. I used the color #008B8D.

Draw another shape with the same height and color.

Using the Lasso tool, create a triangle, as seen below. Position it over the edge of the new shape, and hit the “Delete” key to remove the area we don’t need.

Duplicate the shape and go to Edit → Transform → Flip Horizontally to make it face the opposite direction.

Position the two shapes beneath the larger shape, as seen below.

Right-click on one of your shapes, and open up the Blending Options / Layer Style window. Apply a Gradient Overlay similar to the one seen below. You can also add a subtle Drop Shadow. Once done, right-click on the layer and select “Copy Layer Style.” Select your other banner shape. Right-click and select “Paste Layer Style.” Open the Layer Style window, and change the angle of your Gradient Overlay from 180° to 0°.

Using the Lasso tool, create a selection similar to the one seen below to match up the two corners of our shapes. Fill it with an even darker color.

Duplicate the layer, flip it horizontally, and position it on the other side.

Create a line pattern. Alternatively, you could use the one that I made below.

Paste the pattern over your whole banner. While holding Command + Shift, click on the layer thumbnails of all of your banner layers. This will select all of them. Right-click and select “Select Inverse.” With your line pattern layer selected, press the “Delete” key to remove the areas of the pattern you don’t need.

Change the Blending Mode of the pattern layer to “Multiply” to hide the white from the layer. Now drop the opacity down to somewhere between 25 and 75%. Experiment for the best result.

Using the Shape tool, create some lines similar to the ones below.

Remove the areas that sit on the image’s background.

Experiment with the Blending Mode of each of your lines. Here is the result:

3. 3-D

Three-dimensional buttons are great because it makes the buttons look far more realistic. They’re almost impossible not to click! The only drawback is that the effect is rather playful and so doesn’t suit all websites (such as corporate ones). Below is a selection of some lovely 3-D buttons.

The shadows and 1-pixel lines here highlight certain areas and make the button appear 3-D. This and some good CSS effects would make for a super-interactive button.

Our second element (patterns) is also used in this design to add dimension to an already very 3-D button.

This button takes a slightly different approach, relying only on gradients for its 3-D look.

This set shows different heights to indicate whether the button is in its normal, hover or active state. The lines and texture give the buttons a more life-like appearance.

Like a couple of other examples in this section, a combination of gradients and strokes makes these buttons look 3-D.

This button looks 3-D because of its “out of the box” design, being wrapped around the UI.

Creating a 3-D Button

Start by drawing a shape with the Rectangle tool, with a corner radius of 7 pixels. Open the Layer Style window, and apply a Gradient Overlay going from dark red to light red. Use an even lighter red at the very end of the gradient bar to highlight the top of what will be our 3-D button.

Now apply a stroke to the button. Change the fill type to “Gradient” so that you can change the color of the top and bottom of the stroke. Go from a light to dark red (the opposite of the Gradient Overlay).

It should look something like this so far:

Duplicate the Shape layer. Nudge the original layer down by about 10 pixels.

Apply a Drop Shadow to the original layer using the settings seen in the screenshot below.

Also, darken the Gradient Overlay by making each individual color in the gradient bar a little darker.

You should have something that looks like this:

Select the Text tool, and type something on the button. Open the Layer Style window, and apply a Gradient Overlay similar to the one seen below:

Apply an Inner Shadow using these settings:

Apply a Drop Shadow using these settings:

And we’re done! You should end up with something like this:

4. Pixel-Perfect Strokes

The art of perfecting pixels has become integral to all aspects of user interface design, not just buttons. One-pixel lines (or strokes) give buttons depth and a slightly 3-D look. They also make buttons look indented. Here are some brilliant examples of this.

You can clearly see that a white (overlaid) 1-pixel line is used as a highlight at the top of the red button, with a darker line at the bottom. This makes it appear slightly 3-D and adds a lot of detail to the page.

The typography in this button has an inner shadow, making the button appear as if it is sitting above the interface.

These CSS3-only buttons (absolutely no Photoshop) have 1-pixel strokes that make them stand out from the background and appear indented when clicked.

Another example of a 1-pixel light stroke at the top of the button to act as a highlight.

This green button shows a slightly different approach, with an inner glow acting as a highlight at the top of the button. The stroke on the outside creates a very fine shadow.

Yet another button combining the aforementioned techniques.

This basic button has a thin stroke and delicate drop shadow to make it stand out from the simple design.

This button has a subtle inner glow to make it stand out from the background. Its active state has a lowered opacity, which does the trick.

Forget the button: this whole design is pixel-perfect, with its modern typography and lines making for a beautiful user interface.

Create a Pixel-Perfect Button

Select the Rectangle Shape tool (found in the toolbar at the top of Photoshop when the Shape tool is selected), and give it a corner radius of 5 pixels. Draw a black rectangle similar to the one below.

Open the Layer Style window, and apply a Gradient Overlay to the shape. I used a dark green to a slightly lighter green.

Give the shape a gradient stroke, going from a green to an ever-so-slightly darker green.

Now give the shape a white Inner Shadow style, using the settings seen below.

And now a Drop Shadow, with a size of 0 pixels and an opacity of just 5%.

Find an icon on the Internet (or create your own), and place it in your document by going to File → Place, positioning it correctly. Apply a Gradient Overlay to it.

Give the Inner Shadow of your icon a distance of 1 pixel, and the white Drop Shadow a distance of 1 pixel. This makes the icon look like it was engraved into the button.

Add some text to the button, and apply a low-opacity Drop Shadow effect using the Layer Style window. Here’s the result:

5. Indented Backgrounds

An indented background makes a button look like it is buried in it, giving the button depth and visual interest. Below are some great examples of this.

This button background has a subtle inner shadow to make it appear indented.

The inverted gradients in this background make the buttons appear indented.

A combination of strokes and drop shadows gives these indented buttons more depth.

This button background has several styles, including a gradient, inner shadow and drop shadow.

This indented button background is a lot smaller than what we’ve seen but still follows the same techniques.

Yet again, a drop shadow and inner shadow are used to create an indent.

6. Glows

Glows are a fairly hard technique to pull off in interface design, and are usually seen only in dark interfaces (although we’ll see a light example below). These examples show how glows can be used in different ways.

A glow is used on the inside of this button, giving it an all-around highlight.

Glows are cleverly used to make the typography in this button stand out from the dark background. And the glows make the loading bars appear lifelike.

Glows are commonly used in dark interfaces for the iPhone. Here we see a glow around the typography when the button is in its active state.

The light and fairly subtle glow gives this button the extra boost it needs to become beautiful.

Creating a Light Glowing Button

Using the Rectangle Shape tool once again, draw a rectangle, this time with a corner radius of 3 pixels. Apply a Gradient Overlay similar to the one below. Give your center colors a position of “49” and “50.”

Apply the following Inner Shadow.

Apply the following Drop Shadow.

Apply the following Outer Glow.

Add some typography to the button. You should end up with a nice, clean and incredibly easy-to-produce result like this:

7. Highlights

Highlights give buttons depth, visual interest and clickability. The examples below prove this.

A simple low-opacity white shape is used on the top half of this button to give it a bit of depth and help it fit the overall red and gray interface.

As with many others buttons in this post, a 1-pixel stroke highlights this one.

Light to dark to light gradients serve as highlights and shadow for these buttons.

This post was written exclusively for WDD by Callum Chapman, the man behind Picmix Store and Circlebox Blog.

Which button designs do you use most and why? Did you find a higher click thru rate for some designs? Please share below…

Never Ending WordPress Business Bundle – only $14!

This principle, which I’ll refer to in this piece simply as the 80/20 rule, when considered in the context of website and web app design can have a profound effect on the user experience, and ultimately on the effectiveness of the content or functionality of your website or web app.

In this post, I’ll first provide a basic definition, then I’ll consider some specific examples of how the 80/20 rule proves beneficial, and then I’ll summarize some lessons that can be gleaned from having knowledge of this rule.

What is the Rule?

The 80/20 rule was originally observed by Italian economist Vilfredo Pareto, and the actual principle was named the Pareto Principle by Joseph M. Juran.

Below are definitions from two different sources. First from the book Universal Principles of Design:

The 80/20 rule asserts that approximately 80 percent of the effects generated by any large system are caused by 20 percent of the variables in that system.

And next, from Wikipedia:

The Pareto principle… states that, for many events, roughly 80% of the effects come from 20% of the causes

So immediately you’ll notice that this is not always a principle that we as designers have direct control over, but rather it’s a principle that we observe as occurring almost naturally.

With knowledge of the existence of this principle, or pattern of occurrence, we are then equipped with valuable information to make decisions that will help improve the usability and effectiveness of our designs.

Never Mind the Hypothetical Nature of the Rule…

Yes, there are critics and those who feel the 80/20 rule is nothing more than a hypothesis or overly-general theory that doesn’t always apply.

But putting that aside, the concept itself is certainly of benefit to those working on user interfaces and functionality that requires examination and optimization — even if the rule is more like 70/30 or 90/10.

How Can We Apply it to the User Experience?

In any website, web app, or software environment, the 80/20 rule tells us that 20% of the functionality and features in any one environment will be responsible for 80% of the results, or actions taken within that environment.

In some cases, figuring out what constitutes the 20% that has such a large impact is easy. Web analytics stats, form submissions, and session cookies, can all be used to track user behavior. Analysis of those items will help us determine which areas of the UI are interacted with most.

On the other hand, smaller tasks that are not tracked using those methods may be harder to analyze. In this case, usability studies can be conducted where users are observed as they interact with your website’s UI.

Some Examples That Recognize the 80/20 Rule

Whether it’s intentional or not, there is plenty of evidence that UI and UX designers are considering the value of this principle.

Take for example a simple UI element like a drop-down list of countries presented in a registration form. Most site developers or content creators recognize that 80% of the time, certain countries will be selected.

So although it would seemingly be bad practice for such a long list to break the alphabetizing of the list, the 80/20 rule allows that convention to be broken by putting the most selected countries at the top, as shown in the screen-grab below from Fenn Wright Manson’s checkout page:

In other cases, as when adding a new address to your address book on Amazon.com, the default choice is the most selected country — in this case, the United States:

Here’s another example, this time from a U.K. based business called North Rock Gallery, which has the U.K. option selected by default:

These simple examples above show the importance of optimizing for the functions and options that are used or selected most often.

Where Do User’s Look?

The F-Pattern reading and scanning habits of web users have become pretty established by now. Of course, the F-Pattern is not always an indicator in every market, but it is a pretty good starting point for considering where your users will look when they interact with your designs.

Take a look at the heatmaps shown below from the well-known Alertbox article linked above:

Assuming this is a good indicator of where a user’s eye is focused, this supports the concept of the 80/20 rule. The most intense areas on the map could represent the 20% of the page that the user’s eyes interact with 80% of the time.

From that knowledge, as designers, we can make decisions that will help enhance and optimize the areas that the user is going to be habitually drawn to.

Of course, the design will often be the determining factor of where the user looks, so this suggestion should just be a basic guide and not necessarily a dogmatic way of deciding what falls under the 20%.

Mobile Design Trends and the 80/20 Rule

Recently with the explosion of mobile devices worldwide, some designers and developers, most notably Luke Wroblewski, have been encouraging mobile-first web design. That is, when designing and developing a website, the mobile version should be done first, instead of the other way around, to attain certain benefits.

In a traditional website or web app, certain areas of your site will naturally fall under the 20% that are most often used and interacted with. When a mobile site is designed, focus is placed on that 20% (or thereabouts).

So while the mobile version of a website might have its own 20% most-used options, in relation to the full content available on a traditional website, the mobile version will normally have only the most important functions.

Here’s a simple example below using the PETCO.com website:

Shown above is the full version of the site, in all its cluttered glory. While there are some call-to-action areas, and it’s certainly not the worst design in the world, overall it’s not very focused and there are too many options.

Compare that to the mobile version, below:

By contrast, the mobile interface shown above is simple and helps the user get to the most important areas first, without overwhelming them. Whatever options and content areas are most used in the full version are the only options available in the mobile version.

Thus good focused mobile web apps are great examples of designers channeling their energies on the most important aspects of their projects, staying focused on the functionality and content (the 20%) that’s used most of the time (the 80%).

Lessons Summarized

Having understanding of how the 80/20 rule works, designers are equipped to take action in a number of ways, summarized below:

• Where possible, analyze analytics and usability data carefully to determine your website’s 20% most-used functions
• Prioritize; that is, focus on the most important aspects of your website or web app, and enhance those
• Don’t spend too much time optimizing stuff that falls in the 80% that’s not often used
• Simplify your designs and layouts based on data that determines what falls under the 20% most-used functions
• Remove noncritical functionality or content that’s not used often
• Don’t invest too much time and money optimizing lesser-used functionality since the return on your investment will likely be poor
• Find ways to improve the functionality and design of lesser-used more critical elements that could have a larger impact on conversions if those elements of the design were used more often

While the 80/20 rule is a debatable principle with some inherent flaws, it’s not without value. So consider this rule during the process of your redesigns, realigns, or even for new projects.

This should help your users stay focused on the most important functionality and content, and will ultimately help improve conversion rates.

This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

Have you considered the 80/20 rule in your design decisions? What effect has it had on the success of your website or web app? Share your comments below.

Never Ending WordPress Business Bundle – only $14!

Although many reports are referring to this as a “redesign”, I think it’s difficult to classify it as such. There certainly are some significant changes, but the changes are not exactly a complete overhaul as was the case for CNN.com in late 2009.

Nonetheless, the changes are significant to web designers, so I’ll briefly look at them here. If there’s anything about the changes that I’ve neglected to mention, feel free to comment.

A Redesigned Navigation Bar

The most significant change (albeit still a somewhat subtle one) is the look of the navigation bar. Apple has one of those navigation bars that, design-wise, everyone loves and envies. It seems impossible that it could be improved. Well, they were somehow able to find ways to make it even better looking and more intuitive.

Here is the old navigation bar:

Here is the new:

Changes include:

• It’s darker
• The gradient has been replaced by bolder glossy look
• The logo’s appearance is simplified
• The search box is smaller (more on that below)

I think it really takes a great team of designers to make what really are fairly significant changes to the look of a very important UI element, while still giving the impression that nothing has changed. It just goes to show that visual details are often not as important as the overall feel of the design.

The Flexible Search Box (WebKit Only)

Being obviously WebKit-biased, the Apple design team have included some WebKit-only enhancements, one of which is associated with the search box.

In most browsers, clicking into the search box will brighten its background to a more readable white. In Chrome or Safari, the search box animates using CSS3 Transitions to become wider and arguably a little more usable. The screen grab below shows the search box in Chrome after it has animated to become wider:

To accommodate the size of the search box, the other navigation items and the logo resize themselves.

I like this feature; it adds a feeling of intuitiveness. But it has, in my opinion, a small flaw: It doesn’t go back to its initial state after you remove focus. Of course, if something was typed into the search box, then you wouldn’t want the size to change back, but I think it should return to its normal state if it loses focus and remains empty.

Of course, since it’s extremely unlikely that anyone will click into the search box and not type anything, I suppose this is an insignificant omission.

The Navigation Bar’s Animated Entry (WebKit Only)

Another small WebKit-only feature is the animated entry of the navigation bar. I don’t remember seeing this effect on their site before, so I am assuming this is another new feature. The animated entry only happens on the home page, and only once per browser session. This is good practice and a good lesson for developers adding animated effects to their interfaces.

As visualized in the screen grab above, the navigation bar enters from off-screen, probably using CSS3 keyframe animation, along with JavaScript to control when the animation should or shouldn’t occur.

The Animated Product Browsers (WebKit Only)

Another recent addition is the use of animation on some of the product pages. CSS3-based animations are used on the Mac and iPod product browsers, one of which is shown below:

The products animate when you first arrive on the page, and if you switch between sub-categories, the visible products scurry away and new ones jump into their place. This is done via CSS3 keyframe-based code, some of which is shown below:

On non-WebKit browsers, the product browser’s animation switches to simple JavaScript-based fading. Although this kind of thing is not ideal in every circumstance (since it essentially amounts to “code forking”), it is a realistic option for developers and designers today who want to code for the best possible browsers and provide less enhanced functionality for the rest.

Search Box Auto-Suggest

[UPDATE] As pointed out by a number of people in the comments, the auto-suggest is not a new feature. Our inclusion of this as a “new feature” was based on another article that reported that the auto-suggest was new. Nonetheless, we’ll keep this section because it is a good feature that has the potential to make a website a little more usable, and provides a good example for other developer and designers to follow, if it fits with their project.

The Ajax-driven auto-suggest drop-down appears as you type a search query:

As shown in the screen capture above, not only does the drop-down show search results that match the typed characters, but the results are accompanied by product photos and descriptions. I think the photos are more valuable in this spot than the descriptions, but overall this has the potential to streamline product search and conversions.

Anything Else?

That seems to cover the major changes in the recent re-tooling of the Apple.com design. Are there any other significant changes to the design or code that I haven’t mentioned here?

This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

What do you think of the changes to the Apple.com design? Are there any changes that we haven’t mentioned here?

Never Ending WordPress Business Bundle – only $14!

People (mostly) use apps because they’re useful, not because they look pretty. But that doesn’t mean you can ignore good UI design, or just slap together a generic-looking user interface. Good UI design adds to the overall user satisfaction of any web app.

Good UI design is, in many ways, similar to good web design. Principles of color theory, negative space, and layout all still apply. But UI design requires a bit more thought in many cases due to the interactivity it requires.

Visitors won’t just be looking at your site; they’ll be interacting with it, sometimes in ways you didn’t expect. It’s vital that you take the time to really explore UI design prior to embarking on a web app design.

Below are a number of principles and ideas for designing a great user interface.

Consistency is Vital

In user interface design, consistency between pages, functions, and options is vital. Users come to expect certain things as they use your program, and if those things change from one page to the next, it’s both confusing and frustrating.

For example, if on the home page for your application users navigate between pages with a top navigation bar, make sure that same top navigation bar appears on subsequent pages, and that the pages linked from it appear in the same order.

Other things that need to be kept consistent include your color scheme and general layout, as well as links to important pages that might not be directly used within the application (such as an account page or an FAQ).

Your Users Will Make Mistakes

Regardless of how carefully you design your user interface and how intuitive it is, your users will make mistakes on occasion. Sometimes it’s just because they inadvertently clicked when they didn’t mean to. Other times it’s because they weren’t really paying attention to what they were doing, or weren’t reading the page’s content.

In either case, it’s important that users can easily undo the mistakes they make.

You’ll notice on a number of web apps, including Google Docs, that virtually any time you do something, a link appears to undo the last action. On other apps, you might have to use a menu to undo an action, but the best web apps still make it easy and accessible to go back a step or two at any point.

Highlight Changes

When changes are made during the use of a web app, it’s useful to your users if you highlight those changes. For example, if your app includes a feed of information from a variety of sources or users, highlighting new content as it appears is a useful feature.

There are a number of ways you can highlight content. One of the most popular is to put a shaded background behind new content.

Other apps use icons to indicate new content. Whatever you decide to do, make sure the new-content indications don’t interfere with the readability of the content. It’s also important to make these notifications unintrusive, so as not to distract users who aren’t currently concerned with changing content.

TitanPad uses color coding to indicate changes made by each user.

Enable Keyboard Shortcuts

Not every user out there is going to use keyboard shortcuts, even if you make them available. But for the percentage of users who are used to keyboard shortcuts, not including them can have a disastrous effect on user satisfaction.

Think about the most common actions users will perform on your website and make sure keyboard shortcuts are available for those.

Make sure, too, that whatever keyboard shortcuts you use are logical. Certain shortcuts are already commonly used for certain functions (like Ctrl+Z to undo or Ctrl+V to paste), so make sure those continue to work as they do in other programs.

Choose the keys used in your shortcuts logically, so they’re easy to remember for your users. Make sure you also include them in any drop-down menus next to their respective actions.

Use Familiar Standards and Conventions

Widely-used applications have set certain standards for the way things are expected to work in an application. For example, people are used to seeing a folder icon for “Open”, or a clipboard for “Paste”.

They’re also used to having certain options and actions appear under specific application menus (creating a new document or file is almost always located under the “File” menu dropdown; copy and paste are almost always found under the “Edit” menu dropdown).

Think about established apps that do similar things to what your app will do, and look at how they organize actions and what icons they use.

If you see consistencies between various apps, you should seriously consider using the same or similar icons for your own app. It makes it more intuitive for users who are switching from another app to yours and will improve their experience.

Offer Personalization Options

A lot of web apps allow users to make customizations to their account. Some sites let you adjust the color scheme or upload custom graphics. Others let you rearrange the layout or what’s shown when you first log in. Still others let you create custom pages or similar content that displays the information you’re concerned with.

Think about the possible customizations that would improve both the functionality and the user experience of your apps.

Some apps might not benefit much from customizations, while others are filled with possibilities. Even simple things like allowing users to upload their own logo or change the color scheme or font to suit their personal preferences can have a drastic impact on user experience and satisfaction.

Highrise lets users customize the color scheme of their dashboard. Small customization options like this can greatly add to user satisfaction.

Use Tooltips and Integrated Help Messages

A lot of app developers include extensive documentation for using their apps, which is incredibly helpful to new users. But in many cases, this documentation is kept in its own, separate section on the website. In order to access it, users have to effectively leave the application.

While extensive documentation is still a good idea for complicated apps, incorporating tooltips and integrated help messages in modal windows or in a sidebar within the page increases usability for the majority of users.

It’s a seamless way of offering help while someone is actually using your application, which saves them time and makes the entire experience more enjoyable.

Use Tabbed Navigation and Buttons for Actions

Tabbed navigation has a number of advantages over buttons or text links. The most important, though, is the subtle psychological effect it has.

Tabs evoke using a notebook or binder. Each tab denotes a new section or topic. The same is true online. Tabs make people subconsciously think of physically moving to a new section of a site or app.

Buttons, on the other hand, evoke an action. Using buttons for things like submitting a form makes sense psychologically, as people associate pushing a button with doing something. So for optimal user experience, remember tabs = navigation, buttons = action.

Shade Everything Behind a Modal Window

This is one of those really basic things that sometimes gets overlooked. When opening a modal window, make sure you shade out everything in the background behind the window. This makes the window stand out more and eliminates distractions.

A good example of a modal window with a shaded background.

Use Relevant Icons and Labels

A lot of developers opt to use icons in their apps without labeling those icons. Other than the absolute most common icons, this is often a mistake and only confuses the user.

Adding in alt tags that appear when icons are hovered over isn’t a good solution to avoid confusion, as it still requires too much effort on the part of the user.

Placing labels next to your icons means they’re instantly recognizable. As users become familiar with the meaning of each icon, they’ll be able to more quickly find what they’re looking for, and until then they can easily see exactly what each icon stands for.

Another option is to make it possible for your users to hide the labels, though make sure the default option is for them to be shown.

Keep Things Simple

The best interfaces are as simple as they can effectively be. Don’t add bells and whistles for the sake of adding bells and whistles. If a function has a clear purpose, then add it. If it doesn’t, then don’t.

The same goes for design elements. If there’s a purpose to an element, then it’s okay to add it. But avoid adding things that just look pretty. They’ll only add visual clutter and confuse your users. Choose the simplest solution that gets the job done.

This doesn’t necessarily mean your app needs to be minimalist. But remember that most people use apps for their functionality, not for their design. As long as the design doesn’t interfere with their ability to efficiently use your app, then they’re unlikely to even pay much attention to the visual elements of the app.

Efficient Workflow

When designing a user interface, you need to consider the workflow of your users. People have predetermined ways they use particular types of software and particular apps, and you’ll need to design your interface to conform to those patterns.

For example, if certain actions are generally taken in association with each other, group them together in the same area of the app.

Study the workflow of a number of users to see what seems to be getting in the way of their efficient completion of tasks, and then figure out how to improve the UI to cater to their needs. In some cases, UI alone can’t solve these issues, but sometimes it can.

15 Examples of Great User Interfaces

There are hundreds or even thousands of web apps out there with fantastic user interface designs. Here are more than a dozen to give you some ideas.

Shoply

Shoply makes it quite easy for users to delete, edit, or view products they’ve already uploaded, as well as to add new products.

Invoicera

Invoicera uses tabbed navigation and buttons to perform actions. It also keeps a relatively simple and straight-forward layout and color scheme.

Pandora

It’s obvious that the designers behind Pandora took into account the interfaces present on MP3 players and other media devices in designing their user interface. It’s an intuitive and easy-to-use design with virtually no learning curve.

Wufoo

Wufoo’s form design interface is about as intuitive as an app can get. Help messages are displayed when you start designing a new form to explain exactly what to do without having to leave the page.

Grooveshark

Grooveshark uses icons to help with navigation and functionality. Commonly recognized icons like the “play” and “skip” buttons aren’t labeled, but others, like the Home and Favorites icons, are.

Wridea

Wridea uses an intuitive interface that lets you edit anything just by clicking on it. They also use menus that only expand when you hover over an idea, which reduces visual clutter, and they let users choose between two color schemes.

Backpack

Backpack uses buttons for actions and tabs for navigation, making it more intuitive to use.

Remember the Milk

Remember the Milk uses tabbed navigation and buttons for actions. They also include helpful notations that mostly negate the need for separate documentation.

Ta-da List

Ta-da Lists keeps their interface as simple as possible. There’s no extra information, just the task at hand. It’s incredibly intuitive and makes for an excellent user experience.

Relenta

Relenta uses tabbed navigation and labeled icons. They also stick to standard conventions for email programs, so there’s virtually no learning curve for their users.

Viviti

Viviti uses an intuitive user interface that takes into account the needs of their non-designer users. Tips are provided whenever you log in, and the documentation is easily accessible and user-friendly, allowing you to choose what type of help you want before actually leaving the page you’re working on.

Bounce

Bounce’s interface is very straight-forward and simple. The tools available are intuitive (just drag over an area to make a note, write feedback, and then share).

Meetifyr

Meetifyr uses such an intuitive interface that virtually no documentation is needed. Looking over the app, it takes only seconds to instantly recognize both how to use it and what the different icons and color codes mean.

DoingText

DoingText simplifies use by not requiring any type of signup process. Documents are simply URL-based and collaborators only need the URL. It makes collaboration an almost-instantaneous process.

Writeboard

Writeboard includes useful styling help in the sidebar next to the main content area.

Written exclusively for WDD by Cameron Chapman.

What’s your favorite UI design? Have any other tips for designing outstanding user interfaces? Please share them in the comments!

Never Ending WordPress Business Bundle – only $14!

Sometimes clients will suggest things such as forcing all users to register with a six page long form before they can even access the site. They aren’t web professionals, it’s not their fault for not knowing that this isn’t a good idea from a usability perspective.

If you’re going to convince them that this is a bad idea, however, then you’re going to need some rock solid material to back that up. While an element of trust is always important to a working relationship, you have to respect that sometimes clients will just need to see the facts in front of them to fully understand that what you’re saying is correct.

So, what we’ve done for you today is compiled a list of some of the biggest, most compelling usability articles which address common issues. Hopefully this should help you during tough conversations about what does and doesn’t work on a a website.

Bookmark this post, come back to it, use it in meetings and educate your clients on the things which work for other websites, so that they might also work for them.

How Not Forcing Users to Register Increased Sales by $300million

A truly fascinating article covering how one ecommerce site removed forced user-registration during the checkout process, with a result of a $300million increase in revenue. Very impressive.

10 Useful Usability Findings and Guidelines

• 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

Browser Resolution Stats by Google

A big diagram by google showing browsers sizes overlaid on top of a web page and where you should place call to actions to ensure that they are immediately visible without the need to scroll.

The myth of the page fold: evidence from user testing

“People tell us that they don’t mind scrolling and the behaviour we see in user testing backs that up. We see that people are more than comfortable scrolling long, long pages to find what they are looking for. A quick snoop around the web will show you successful brands that are not worrying about the fold either.”

247 web usability guidelines

A massive post of usability articles covering:

• Home page usability: 20 guidelines to evaluate the usability of home pages.
• Task orientation: 44 guidelines to evaluate how well a web site supports the users tasks.
• Navigation and IA: 29 guidelines to evaluate navigation and information architecture.
• Forms and data entry: 23 guidelines to evaluate forms and data entry.
• Trust and credibility: 13 guidelines to evaluate trust and credibility.
• Writing and content quality: 23 guidelines to evaluate writing and content quality.
• Page layout and visual design: 38 guidelines to evaluate page layout and visual design.
• Search usability: 20 guidelines to evaluate search.
• Help, feedback and error tolerance: 37 guidelines to evaluate help, feedback and errors

An Introduction to Using Patterns in Web Design

A fascinating article covering the use of patterns for usability in web design, or “chunks” as the author calls them!

F-Shaped Pattern For Reading Web Content

Eye-tracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

Top Ten Mistakes in Web Design

The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.

Weblog Usability: The Top Ten Design Mistakes

Blogs are often too internally focused and ignore key usability issues, making it hard for new readers to understand the site and trust the author.

Top-10 Application-Design Mistakes

Application usability is enhanced when users know how to operate the UI and it guides them through the workflow. Violating common guidelines prevents both.

Mega Drop-Down Navigation Menus Work Well

Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user’s choices.

10 Usability Crimes You Really Shouldn’t Commit

A big post by Chris Spooner covering forms, logo links, link states, alt attributes, background images, content, link text and text alignment.

101 Five-Minute Fixes to Incrementally Improve Your Web Site

An absolutely huge post covering quick improvements for usability across so many different levels. This is great one for picking out things that your client’s site might need to have done to it!

Blasting the Myth of the Fold

Another article slamming the idea that nothing below the fold ever gets seen. Users know how to scroll. The fold is relevant for a few things, but it is not the be-all and end-all.

UX Myths

A great site which is regularly updated with a list of (sometimes funny) myths of user experience issues, these include things such as “all pages should be accessible in 3 clicks” and “the home page is your more important one”.

Eyetracking points the way to effective news article design

Real eye tracking tests carried out and showing interesting results with regards to the effectiveness of laying out new articles and blog posts.

Label Placement in Forms

A detailed case study showing that the optimum placement for label forms is to the top-right of the form field.

12 Standard Screen Patterns

A great rouncup of some standard screen layouts which may pursuade clients away from spherical invisible navigation, or similar.

“Mad Libs” Style Form Increases Conversion 25-40%

This interesting article covers how well forms work when arranged as blanks within sentences rather than simple linear pages.

Breadcrumbs In Web Design: Examples And Best Practices

“On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages.”

Inline Validation in Web Forms

A study by A List Apart on inline validation in forms with live user videos showing the differences between standard forms vs inline validation.

This post was authored exclusively for WDD by John O’Nolan, a core contributor to the WordPress UI Team, writer and entrepreneur based in Surrey in the United Kingdom. John loves to talk to people, so why not follow @JohnONolan on twitter too?

What about you? Do you have any really great articles like these which you think would be a good addition to the list? Drop us a line in the comments below so that everyone can benefit from them!

Never Ending WordPress Business Bundle – only $14!

High quality content, regardless of whether the site aims to inform, entertain, or sell a product, will increase the site’s likelihood of converting visitors. But beyond providing high quality content, a site also needs to organize that content in a way that makes it accessible to visitors.

Prioritizing your content is one of the best ways to make sure your visitors are finding the information you want them to find, and that they want to find. But figuring out what content is most important and how to arrange it to reflect that can get confusing, fast.

In many cases, designers and content creators feel like it’s all important, and should all get equal billing. But that’s not doing your visitors any favors. You need to get to the root of what’s most important to them, and then provide that in the most user-friendly way possible.

What Are the Site’s Goals?

The first thing you need to think about when deciding which content is most important on a website is what the website’s goals are. Different sites are going to have different goals. For one, it might be selling a product. Another one might be looking to provide information. Others might want people to become members. Some do a combination of the three, or something else all together.

Once you know what your site’s goals are, you can start tailoring the content to fit those goals. If your site aims to sell a product, then the most important information on that site will be that which describes the benefits of the product, answers potential customer questions, and tells visitors how to buy.

If your site aims to recruit members, then you’ll want to put information about why someone should join front and center. If the site’s primary purpose is to provide information, then you’ll want to make sure that either the information or navigation to find that information is place in a prominent position on the home page.

Case Study: Speak Human

Speak Human
It’s obvious from the Speak Human website that their prospective customers are interested in how the book will help them become better marketers. While the emphasis here is placed squarely on that content, they also make it easy to find other information through a well-placed and well-designed navigation bar (which also places more emphasis on the “Buy Now” link than the others, which makes sense since the main goal of the site is to sell books).

Case Study: VaultPress

VaultPress
It’s obvious here that VaultPress wants visitors to sign up for their service, but the positioning of that banner also directs the eye to the content immediately underneath, which talks about the benefits of using VaultPress. Setting apart certain content with a subtle background color also adds priority to some items over others.

Make a List of Necessary Content

Once you know what the site’s goals are, you’ll need to make a list of the necessary content to reach those goals.

For example, if you have a site that aims to sell a product, you’ll want to include product benefits and features, information about your company, a FAQ page, and information on how to purchase the product (or a form to do so right on the website).

If your primary goal is to provide information, then you’re going to want to make sure a taste of that information is available on the home page. You’ll also want to make sure navigation to the rest of the site is placed in an easy-to-find place and is easy to use.

Case Study: Checkout

Checkout
Prioritizing information through the size and placement of content, as well as through icons, is a slightly different approach that isn’t seen as often. In this case, it works very well, though. Also, including an icon and a bit of information about each feature group right in the local navigation make each section appear equally important, regardless of the order in which it appears.

What Do Users Want?

Once you have a list of all the information your site will need, you’ll want to prioritize it so you can figure out what goes where. To do this, think about what your users want. This, again, will depend on the goal of your site. If you want your visitors to purchase something, then think about what information they’re going to want before making a decision. The larger and more expensive the purchase, the more information they’re going to want.

If your site is there to provide information, think about the order in which people need to learn about your topic. Make sure visitors can find information for beginners first, but also make it easy to tap into more advanced information for those visitors who are already familiar with your subject.

For membership sites, think about what your visitors want to know about joining. It’s likely they’ll want to know what benefits they’ll receive (especially if it’s a paid membership). They might also want to be able to view existing members or sample site content that’s generally reserved only for members.

Taking a few hours to really think about what your visitors are going to be interested in is vital. Visit some similar sites to yours and think about how they’ve arranged the information on their site and what seems to be missing or is hard to find. Then, correct those deficiencies on your own site.

Case Study: Global Spend Solutions

Global Spend Solutions
A lot of sites overlook the use of graphics as major conveyors of information, rather than just complementary to the written content. The infographic used here in the header tells us exactly what Global Spend Solutions does and what their business process is, as well as how they can help a visitor. Sometimes they best way to give priority to content is to simplify it into its most basic terms.

Case Study: dConstruct 2010

dConstruct 2010
dConstruct 2010 obviously knows that visitors are most interested in who the speakers are for the year and place that content front-and-center in the design. They also make other information easy to find, though, both through a well-designed navigation bar and through additional content on the home page.

Deciding How to Organize Information

So, you have a list of the necessary content for your website, and you know what your visitors are going to want to know first. But let’s say you have a lot of information to convey and you aren’t sure how, exactly, you should do that. It’s not uncommon to have lots of information or links that need to be presented that have equal importance on a page. In those cases, it’s best to decide on some formal method for organizing it, rather than just ordering it randomly.

There are a number of schemes you can use to organize lists of information. Alphabetical or numerically are two of the most common, but they only really work for certain types of content. Lists of links, for example, can work really well arranged alphabetically.

Organizing information by who its intended audience is works well for sites where there are likely to be multiple different types of visitors. For example, an online banking website might have business customers and personal customers. Arranging information separately for each type of visitor makes sense, as there will be different priorities for each.

Other schemes for organizing content can include things like geography or format. If your content includes or is dependent at all on geography, that can be an effective and logical way to organize that information. The format of content can be another great way to keep things organized. Let’s say, for example, you have a blog where you offer roundups, tutorials, interviews, and inspiration posts. Separating and organizing that content by format makes a lot of sense in this case. It’s logical.

That’s what content organizing comes down to: logic. If your content is organized and laid out in a logical manner, your visitors will be able to find what they’re looking for. If it’s laid out in a random fashion, they’ll waste time looking for the information they need, and may look elsewhere if they get frustrated.

Case Study: 2pxBorder

2pxBorder
2pxBorder makes use of typography and color to prioritize the information on their home page. The big, bold headings let us know exactly what they do, while other visual cues on the page direct us to the most important other parts on the page.

Card Sorting

If you’re unsure of how to organize the information on your site, or you can figure out multiple ways that seem like they’d work, you might consider using card sorting to figure out the most intuitive way of organizing that information. With card sorting, you put summaries of your site content onto index cards and then let users sort that content into what they think are the most logical groups. You’ll need a focus group in order to carry this out, and turning to your current customers or users can be a good option.

All your users need to do is arrange the cards in the way they think best represents how they should be grouped. You can choose to put them in groups at the start, and then let users rearrange them, or you can just put them all in one group. The former method may work best if you already have a content structure in place and are wondering what improvements could be made, while the second one may be best for new designs.

Card sorting is simple and cost-effective, which makes it a good option for developing a content structure without spending a lot of money. One big disadvantage, though, is that results may not be very consistent between users. You might have ten users and get back ten completely different methods for organizing your site’s content. But it’s often a good starting point, if nothing else.

Pay Attention to Priority on Each Page

Once you know what information is necessary and how important each element is, you’ll need to decide how to prioritize the information on each page. It’s important to properly format and prioritize information within pages, especially when there’s a lot of content present.

If you don’t, the entire thing looks like one giant block of text, and your visitors will have a harder time picking out what’s important and what’s not. Since it’s your site and you have clear site goals, you want to direct your visitors to what’s most important, to increase the chances that they’ll follow through on those goals.

There are a number of elements that play into how information is prioritized on each page of your site. There are the obvious things like color, font size, and graphical indicators, but there are also more subtle cues that will let your visitors know what information is most important.

White space is one of the most important factors in prioritizing information on a page. Leaving more white space around an element on your page increases its importance among the other parts of the page. When combined with color, font size, and other design elements, it does an excellent job of setting apart the most important parts of your page.

The most important information on your pages should be positioned near the top of the page. Use heading tags to format headlines for each of your sections, and remember the hierarchy inherent in those tags (use H1 for the most important, H6 for the least important). Use color sparingly to add even more importance to one section or another. When the page is fully formatted, you should instantly be able to pick out the most important element on that page, without question.

Case Study: Joyent

Joyent
Joyent uses color and typography to emphasize certain content over others. Graphics also play a large role in directing visitors to certain information.

Case Study:The Rackspace Cloud

The Rackspace Cloud
Using different colors in the navigation to set apart the most important element is an excellent way to organize content. Note how they also use different background images and colors, along with icons, to set apart different content areas.

Written exclusively for WDD by Cameron Chapman.

Have you developed any methods for prioritizing content in your web design projects? Or have any resources for getting user feedback on the way your content is presented? Please share them in the comments!

Never Ending WordPress Business Bundle – only $14!

This useful PSD file includes a great selection of GUI elements that you can use for free for both commercial and free app development (with attribution).

All elements are on their own layers which should make customization really quick and easy.

If you’d like to share this PSD with your friends, please refer them to this page so that they can download their copy from here.

Below is a full preview of all elements for quick reference. Enjoy!

View the full size detailed preview by clicking on the image below:

This freebie is now available through our sister site, MightyDeals.com. Click on the download button below to be redirected to download the files.

Never Ending WordPress Business Bundle – only $14!