background preloader

10 Useful Usability Findings and Guidelines

10 Useful Usability Findings and Guidelines
Advertisement Everyone would agree that usability is an important aspect of Web design. Whether you’re working on a portfolio website, online store or Web app, making your pages easy and enjoyable for your visitors to use is key. Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites. 1. A study by UX Matters found that the ideal position for labels in forms is above the fields. Tumblr features a simple and elegant sign-up form that adheres to UX Matter’s recommendation. Positioning labels on the left also poses another problem: do you left-align or right-align the labels? 2. People instinctively notice other people right away when they come into view. Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study. And now the baby is looking at the content.

Hick's law Hick's law, or the Hick–Hyman Law, named after British psychologist William Edmund Hick and Ray Hyman, describes the time it takes for a person to make a decision as a result of the possible choices he or she has: increasing the number of choices will increase the decision time logarithmically. The Hick–Hyman law assesses cognitive information capacity in choice reaction experiments. The amount of time taken to process a certain amount of bits in the Hick–Hyman law is known as the rate of gain of information. Background[edit] Hick first began experimenting with this theory in 1951. His first experiment involved 10 lamps with corresponding Morse Code keys. Hick performed a second experiment using the same task, while keeping the number of alternatives at 10. While Hick was stating that the relationship between reaction time and the number of choices was logarithmic, Hyman wanted to better understand the relationship between the reaction time and the mean number of choices. Law[edit] E.

22 Essential Tools for Testing Your Website's Usability The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off. A site's ease of use, or its usability, is an integral part of its success, especially with websites becoming more and more interactive, complex and packed with features. User-centered design is all about building websites that fulfill the goals and desires of its users, and at the heart of this concept is that a user must be able interact with your website effectively. Testing usability is an art and a science. There are many times when usability testers rely on qualitative measurements, intuition, opinions and feedback from users and experience. In this post, we'll discuss six crucial factors that affect usability. We'll focus on practical usability testing, so the emphasis is on pragmatic and inexpensive strategies that most site owners can do. 1. 2. 3. 4. 5. 6.

Gapminder: Unveiling the beauty of statistics for a fact based world view. Mastering CSS, Part 2: Advanced Techniques and Tools - Smashing Coding Advertisement CSS is one of the most basic building blocks of modern web design. It creates the structure and style that surrounds your content and is capable of making your site a joy to use or a pain in the neck. Mastering CSS is one of the most important things a web designer can do, and has really become an essential criteria for being a successful designer. In Part 1: Styling Design Elements we covered the basics of web design with CSS. 1. CSS can be used to build calendars, timelines, and even “tables” (or charts). CSS/jQuery Sequential List Have you ever had to manually code something that is sequential? Date displays with sprites This tutorial explains how to achieve an original date display using CSS sprites. Pure CSS Timeline A great tutorial for creating a clean-looking timeline for your site using straightforward CSS and HTML markup. A CSS-based Timeline Another tutorial for creating a timeline with CSS. 2. iPhone CSS Techniques 3. 4. 5. CSS image replacement with… images! 6.

10 Usability Tips Based on Research Studies We hear plenty usability tips and techniques from an incalculable number of sources. Many of the ones we take seriously have sound logic, but it’s even more validating when we find actual data and reports to back up their theories and conjectures. This article discusses usability findings of research results such as eye-tracking studies, reports, analytics, and usability surveys pertaining to website usability and improvements. You’ll discover that many of these usability tips will be common sense but are further supported with numbers; however, some might surprise you and change your outlook on your current design processes. 1. Forget the "Three-Click Rule" The idea that users will get frustrated if they have to click more than three times to find a piece of content on your website has been around for ages. Logically, it makes sense. But why the arbitrary three-click limit? In fact, most users won’t give up just because they’ve hit some magical number. Source: User Interface Engineering

9 Common Usability Mistakes In Web Design Advertisement 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. 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 the same interface element, the comments link, but this time with a much larger clickable area: Newspond comments link. Why would we want a larger clickable area? <a href=" style="padding: 5px;">Example Site<a> You can read more about padded link targets for better mousing in a 37signals article on padded link targets. 2. Pagination refers to splitting up content onto several pages. 3. 4. The Basecamp landing page. 5.

25-point Website Usability Checklist I've been thinking a lot lately about my process. Experience is a powerful thing, but it's rare that we really sit down and try to map out what we know. A while back, as part of my 5-point Website Clinic, I developed a 25-point website usability checklist - a way to create some method out of my madness and make sure that I don't forget anything critical when I'm working with a new client. Even though it's part of one of my paid offerings, I've decided to share this checklist. Basic Overview The list is split into 4 roughly equal sections, (I) Accessibility, (II) Identity, (III) Navigation, and (IV) Content. Section I. This section contains not only traditional accessibility issues, but anything that might keep a visitor from being able to access the information on a website. 1. 2. 3. 4. 5. 6. Section II. A key question when someone first comes to your site is "Who are you?" 7. 8. 9. 10. 11. Section III. 12. 13. 14. 15. 16. 17. Section IV. You've heard it before - Content is king. 18.

Microsoft shares code for Kinect game gadget 12 March 2013Last updated at 06:06 ET The Kinect works by flooding a room with infra-red light Microsoft has opened up access to some of the code for its Kinect for Windows motion-sensing device. The device, first built for the Xbox, lets people play games by moving their body instead of using a controller. Before now anyone wanting to use the Kinect had to work via an official software toolkit that hid the underlying code. Microsoft said it had opened the code up to make the Kinect easier to use and get feedback about how to improve it. Soon after the Kinect's 2010 release, hardware hackers wrote code that let them control the device so they could use it for their own projects. Later on, Microsoft aided these "home-brew" efforts with the release of a software development kit and a program that allowed the Kinect to be controlled via Windows. However, both these programs hid the core code of the device, limiting what developers and others could do with the gadget.

Guide to CSS Font Stacks: Techniques and Resources - Smashing Coding Advertisement CSS Font stacks are one of those things that elude a lot of designers. Many stick to the basic stacks Dreamweaver auto-recommends or go even more basic by just specifying a single web-safe font. But doing either of those things means you’re missing out on some great typography options. Creating Your Own Font Stacks There are a huge variety of font stacks recommended. First of all, make sure you always include a generic font family at the end of your font stacks. Third, make sure you pay attention to the scale of the fonts in your stack. Common Font Stacks A lot of designers out there have taken a crack at creating ideal font stacks. Better CSS Font Stacks Unit Interactive published an article last summer with a collection of “better” CSS font stacks. Here are some listed for body text: For headlines: Georgia, Times, ‘Times New Roman’, serifPalatino, ‘Palatino Linotype’, ‘Hoefler Text’, Times, ‘Times New Roman’, serifTahoma, Verdana, GenevaTrebuchet, Tahoma, Arial, sans-serif

113 Design Guidelines for Homepage Usability (Nielsen Norman Group) Topics Author Recent Articles Popular Articles Subscribe to: While many of these guidelines can apply to web design in general, they are especially critical to follow when designing your homepage, because the stakes are so high. Even small changes to homepages can have drastic effects. While we encourage you to use these guidelines as a checklist when designing your homepage, recognize that they are written in an abbreviated manner here. All said, these are just guidelines, not axioms. What's Not in These Guidelines In an effort to limit the focus specifically to homepage guidelines, there are several important issues we do not address. Determining Homepage Content One of the most important design decisions for any homepage is determining what content merits homepage coverage. There are several usability methods that can identify and prioritize users' needs based on real data and observation. General Web Design Vertical Industry Segments We cannot provide a set of generic vertical guidelines.

Media Queries Abstract HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Status of This Document This section describes the status of this document at the time of its publication. A W3C Recommendation is a mature document that has been widely reviewed and has been shown to be implementable. This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. Please see the Working Group's implementation report and the Media Queries Test Suite. Also see the Disposition of comments and a list of changes relative to the previous Proposed Recommendation. Table of Contents 1. (This section is not normative.) As are these: 3. 5.

Key Tips for Better Website Usability Ron Jones | October 3, 2011 | 1 Comment inShare30 How you can fortify your website and fix usability issues. So you have a great website that is loaded with great content but is it not converting and most of your visitors leave your site within the first 60 seconds. Website usability is a common concept among web designers. It is generally known that people visit your website with a specific task in mind. Use Keyword Phrases That Your Audience Is Searching On One of the first things site visitors look for are some visual clues that help them feel they have landed on a site that will help them solve their problem. Armed with your researched and targeted keywords, you should make sure they are prominently placed on the landing page. Consistent and Intuitive Site Navigation People are impatient and hate learning new things. I remember a few years ago renting a car and as I pulled up to the gate to check out, I couldn't find the button to roll down the window. Menus. Optimized Content Strategy

Related: