16 Crucial Webdesign and Usability Best Practice Compilations and Tools

In this article I have compiled a list of what I currently think is the best guidance you get on Do’s and Don’ts for Web Design and Usability.

Some state that content is King and it is to some extent right. On the other hand good content presented in a really bad way will be hard or even impossible for some people to consume.

As competition is enormous on the Internet and just getting worse all the time it is becoming more and more important to focus on accessibility and usability. User just have to feel invited, comfortable and special otherwise they will be quickly off to the next lucky website or blog waiting hungry to receive the hit. Usability is hard and it is a domain of expertice just as perogramming and graphic design is.

The web developer have to combine it all in the end and taking some advice from others having experience in this field is essential. Below you will find the information, tips, techniques and tools you need. Before you read on however, I would like to inform you that one of the most common ways to build webistes today is to use WordPress and simply install a WordPress theme where a skilled designer have already used best practice.

For business website you may want to check this business website template collection. WordPress is also great for setting up cool portfolio websites. I also found a cool collection of portfolio themes you may want to check out here. Lets get started!

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
echo $filestr;[/exec]

10 Tips to Create a More Usable Web (@webdesignerdepot.com)

Whether it’s your portfolio, a blog, a marketing web site, or a collection of games, we all want to attract visitors to our website and to ensure that they have a pleasant experience.

Usability measures the level of a user’s experience and can be characterized by how easily a given task can be completed; whether it’s done with prior knowledge, or by having the user learn a new way to interact. I think Jakob Nielson probably explained it best when he said:

“Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease–of–use during the design process.”

In this article I hope to give you some form of a usability checklist, covering topics from form design to simple navigation tips that you can apply to any Web project.

1. Creating active navigation

Letting the user know what section of the site they’re in, or what category they’re navigating through can be give a huge usability boost to any site. Active navigation is one of those usability concepts that are almost automatic at this point. And we all have our own way of creating it…. Read on

9 Crucial UI Features of Social Media and Networking Sites (@smashingmagazine.com)

This article goes over crucial features of the user interfaces of social media and social networking sites. It discusses important features, techniques and concepts behind these designs and explains why they are important, with examples from top sites. These easy and general usability strategies can be applied almost anywhere and to almost any type of user interface.

1. Simple Interface Is The Key

Before getting into the specifics of the user interface, it’s important to point out the fact that simplicity in user interface is a shared characteristic of social media and networking websites. Social media websites are rather simple in terms of color scheme and graphics. The color scheme usually consists of a few colors along with slight monochromatic variations; the background is generally white, updates (e.g. status updated) are often highlighted with a light color as well (usually green or yellow; alerts are usually highlighted with a red background color)…. Read on

30 Usability Issues To Be Aware Of (@smashingmagazine.com)

In this article we present 30 important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood. What is the difference between readability and legibility? What exactly does 80/20 or Pareto principle mean? What is meant with minesweeping and satisficing? And what is Progressive Enhancement and Graceful Degradation? OK, it’s time to dive in.

Usability: Rules and Principles – 7±2 Principle

Since human brain has some limits on its capacity for processing information, it deals with complexity dividing information into chunks and units. According to George A. Miller’s studies humans’ short term memory can retain only about 5-9 things at one time. This fact is often used as an argument for limiting the number of options in navigation menus to 7; however there are heated debates about The Myth of “Seven, Plus or Minus 2?. Therefore it’s not clear how the 7±2 Principle can, could or should be applied to the Web. Miller’s studies… Read on

10 Usability Nightmares You Should Be Aware Of (@smashingmagazine.com)

In this article we take a look at some of the usability nightmares you should avoid designing functional and usable web-sites. At the end of the article you’ll also find 8 usability check-points you should probably be aware of.

1. Hidden log-in link.

Backpack, 37signal’s one of the most usable organizational and project management tools out there, explains exactly what the tool can be used for, how one can use it and which features it has to offer. However, once you’ve signed up, you might need few minutes to find out what you should do to actually start using the tool… Read on

9 Common Usability Mistakes In Web Design (@smashingmagazine.com)

By now, all good designers and developers realize the importance of usability for their work. Usable websites offer great user experiences, and great user experiences lead to happy customers. Delight and satisfy your visitors, rather than frustrate and annoy them, with smart design decisions. Here are 9 usability problems that websites commonly face, and some recommended solutions for each of them.

1. Tiny clickable areas

Hyperlinks are designed to be clicked, so to make them usable, it makes sense to ensure that they’re easy to click. Here’s an example of links that are far too small; clicking them is harder than it should be. These are the comments links on Hacker News, a social news website. (Clickable areas are highlighted in red)… Read on

10 Useful Techniques To Improve Your User Interface Designs (@smashingmagazine.com)

Web design consists, for the most part, of interface design. There are many techniques involved in crafting beautiful and functional interfaces. Here’s my collection of 10 that I think you’ll find useful in your work. They’re not related to any particular theme, but are rather a collection of techniques I use in my own projects. Without further ado, let’s get started.

1. Padded block links

Links (or anchors) are inline elements by default, which means that their clickable area spans only the height and width of the text. This clickable area, or the space where you can click to go to that link’s destination, can be increased for greater usability. We can do this by adding padding and, in some cases, also converting the link into a block element. Here’s an example of inline and padded links, with their clickable areas highlighted to show the difference… Read on

10 Principles Of Effective Web Design (@smashingmagazine.com)

Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.

We aren’t going to discuss the implementation details (e.g. where the search box should be placed) as it has already been done in a number of articles; instead we focus on the main principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information… Read on

Elements of Great Web Design: The Polish (@psd.tutsplus.com)

This is a great tutorial and best preactice resource on web design.

Unlike with Photoshop effects, Web design can’t really be taught in a set of easily repeatable steps. If you look at most great Web designs, they are not difficult to reproduce technically. You could probably screenshot a design, put it into Photoshop and then replicate the same design layer by layer. The trick, however, is coming up with that design in the first place.

For this reason, in these tutorials on Web design I am going to try a few different techniques to convey different aspects of the process that I personally go through when designing a Web site…Read on

useit.com: Jakob Nielsen’s Website

Most web professionals know what Jakob stands for. Some would say (even myself) that Jakob takes simplicity to far. Most of the material available on this site is not free but it is a must to know it if you’re interested in web usability. Make sure you visit his Alertbox (Blog) as it contains many interesting articles with loads of usability thoughts.

ui-patterns

It has long been common practice to use recurring solutions to solve common problems. Such solutions are called design patterns; standard reference points for the experienced user interface designer. This website seeks to better the situation for the UI designer, who struggles with the same problems as many other UI designers have struggled with before him.

This site will help you in two ways: You can read insightful design pattern articles or browse through our screenshot collection.

Design Pattern Library (@developer.yaho0.com)

More usability and web design patterns…

usability.gov

Governments usually have requirements for extremely high standards for usability and accessability. Anyone should be able to use their online solutions even people with disabilities. This all comes at a high prize during the development phase and most corporate websites will never get the needed funding to get on that level of usability and accessability. Still there is a lot to learn from the rules and principles used for building public sector solutions.

88 checks, The ultimate webdesign usability checklist

“I noticed that I, and fellow webdesigners, keep making the same usability mistakes over and over. This checklist with 88 questions is a must read for every webdesigner who cares about usability.

This website, NotUsable.com, is not designed by me. Giving me the perfect excuse why this website doesn’t pass my own usability checklist. But I would love to hear your comments and don’t forget to let me know when you can answer the whole checklist with ‘yes’!”

Technical

1. Did you validate your (X)HTML using W3C Markup Validation Service?
2. Did you validate your CSS using W3C CSS Validation Service?
3. Did you check your website in at least IE, FF, Opera and Safari?

Images

1. Did you add the ALT and TITLE attributes to all your important images?
2. Did you add the LONGDESC attributes to all your image that need a description?
3. Did you write effective ALT text?
4. …

12 Standard Screen Patterns

With more companies turning to RIA frameworks for enterprise software development, these screen patterns are indispensable for product managers, UX designers, information architects, interaction designers and developers. The patterns rely heavily upon desktop design principles, subtly blended with many of the better RIA components and principles. I’ve included 100 examples to illustrate these patterns, pulled from desktop, Flex/AIR, Ajax, Laszlo, and Silverlight applications.

01. Master/Detail

Master/Detail screen pattern can be vertical or horizontal. Ideal for creating an efficient user experience by allowing the user to stay in the same screen while navigating between items. Horizontal layout is a good choice when the user needs to see more information in the master list than just a few identifiers- or when the master view is comprised of a set of items that each have additional details…

9 Essential Principles for Good Web Design

Web design can be deceptively difficult, as it involves achieving a design that is both usable and pleasing, delivers information and builds brand, is technically sound and visually coherent.

Add to this the fact that many Web designers (myself included) are self-taught, that Web design is still novel enough to be only a side subject in many design institutions, and that the medium changes as frequently as the underlying technology does.

So today I’ve put together my 9 principles for good Web design. These are only my opinions and I’ve tried to link off to more reading on subjects so you don’t only hear my voice. Obviously, I have lots of disclaimers: rules are made to be broken, different types of design work differently, and I don’t always live up to my own advice. So please read these as they are intended–just some observations I am sharing

1. Precedence (Guiding the Eye)

Good Web design, perhaps even more than other type of design, is about information. One of the biggest tools in your arsenal to do this is precedence. When navigating a good design, the user should be led around the screen by the designer. I call this precedence, and it’s about how much visual weight different parts of your design have…

Usability Tools

userfly

Simple and free, yep very powerful usability testing tool. This is really worth cheking out!

Loop¹¹

Loop¹¹ is a web-based user-experience tool, allowing companies to conduct remote, unmoderated usability testing on any kind of digital interface.

Loop¹¹ provides the ability to gain detailed insights and understandings of user behaviour. These insights are obtained via a live interactive environment where users are asked to complete a series of tasks and questions on your website or interface. All interactions are captured, processed and made available in real-time reports.

Loop¹¹ is not a survey or web analytics tool, but a user experience tool… helping you to understand user behaviour.

Lars

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.