Microtalk: Usability Primer in 10 Minutes Flat

In this talk we will go over usability heuristics for building better web experiences.

Help us caption & translate this video!

GoRuCo 2013

00:00:16.400 All right, so this is a usability primer in 10 minutes flat. My name is Steve Berry, and I'm the principal at Thought Merchants. I'm a user experience, user interface, and design consultant. I specialize in working with startups and emerging companies here in New York and previously in Philadelphia. Unfortunately, you might recognize me as the designer of last year's t-shirt. If you turned it upside down, it kind of looked like a gentleman's sausage, so I apologize; it was totally inadvertent. It's funny the things you get recognized for.

00:00:54.079 So back to the topic. We're talking about usability, and I'm going to discuss usability for web applications and web experiences. There’s a fidelity chart that categorizes these experiences into low fidelity and high fidelity. I like to use the acronym F.U.E.P., which stands for Functional, Usable, Emotional, and Persuasive. Functional refers to something that comes out of the box; for example, when you install Bootstrap, you have a functional web experience. The next level is Usable, which means you’ve optimized for particular tasks.

00:01:28.920 Emotional refers to experiences like Foursquare, where when you check in, you get rewarded with badges, creating an emotional attachment with the application. Then there's Persuasive design, where everyone aspires to create web experiences that change behavior; however, I don't think we're quite there yet. In usability, I break this down into two main topics: testing and heuristics. Testing involves sitting a user next to a computer, recording them, asking questions, and seeing if they accomplish their tasks. But the focus today is on heuristics.

00:02:03.040 Heuristics are experience-based techniques for problem-solving. For instance, if you walk to work every day and a homeless person starts harassing you, you might decide to take a longer route to work to avoid that situation. This is a heuristic—it's a solution based on experience. Web professionals have been building a repository of information regarding design patterns that work. The first and most important pattern is the F-pattern. This pattern suggests how to layout a web application or web form effectively.

00:02:40.879 To improve scannability, align content to the left and create a straight-down layout. This establishes a clear left-hand scan line. It is essential to put important words first in your sentences. If the first part of the sentence has 'the' or 'two,' that’s not action-oriented. Use a grid to ensure consistency in alignment rather than randomly setting margins to arbitrary pixel values. For example, create a grid of 20 pixels, and align elements as multiples of that.

00:03:21.360 Increasing scannability allows users to quickly locate the information they are looking for. The technical term for this is 'ambient findability.' When you arrange information logically, users can easily identify patterns. This makes searching for known items more straightforward. Another benefit is to decrease eye fixations, which is particularly important for applications that users interact with extensively, such as administration interfaces.

00:03:58.159 Let’s look at a real-world example: a simple sign-up form. Typically, these forms include a logo, a title, and other elements. By using the F-pattern, the elements are arranged to create a more effective scanning experience. As a user scans this form—starting at the logo across to the sign-up button—they naturally follow the F-pattern, confirming the effectiveness of the layout.

00:04:44.000 Labeling is another major topic. In UX terms, labeling refers to the text used in links and buttons. Examples include 'Home,' 'Tour,' 'Security Monitor,' or 'Get Started Free for 14 Days.' I particularly dislike vague labels like 'Read More' because they lack context, leaving users unsure of what to expect. Developers should strive to find more descriptive labels that guide user expectations better.

00:05:56.320 The rule of thumb is to position action words to the left. The English language operates best on a subject-verb-object structure, but online readers often skim content. To cater to this, eliminate the subject and focus directly on the action that interests users. Yahoo has produced a remarkable style guide to assist with this topic, which can be found at styleguide.yahoo.com.

00:06:58.080 Line length is another aspect often overlooked; the ideal length is between 12 and 17 words, which equates to 45 to 75 characters per line. Longer lines may lead to reading fatigue, while shorter lines disrupt flow. This guideline can vary slightly depending on the device type, such as mobile versus desktop, but they serve as useful benchmarks in design.

00:07:46.720 Another critical principle to consider is proximity. Users naturally infer relationships between items that are placed close together. For instance, if names are displayed in a list with poor proximity, users may not understand their relationships. By structuring an interface more thoughtfully, such as grouping names with an associated title or organization, clarity improves.

00:08:27.360 It's essential to set clear expectations in user interfaces. For example, when clicking on a navigation item labeled 'Metrics,' make sure users arrive at a page that fulfills that expectation. This consistency reassures users and encourages them to explore further. The more intuitive the experience, the more likely users will derive value from your application.

00:09:04.240 In conclusion, although the topics covered are just the beginning of a comprehensive understanding of usability, they represent fundamental elements in enhancing web experiences. Content remains king; if your content is lacking, no design heuristics will compensate for it. For further reading, I recommend visiting useit.com for insightful articles, or checking out 'Web Forms' by Luke W. from Rosenfeld Media for practical guidance.

00:09:23.760 Thank you.