Name: Beginner Usability
Author: John Rhea

There are things coding books can’t tell you. Things that fall between code and design. Sites can use perfect code and perfect design, but still allow zombies to take over the world. These things are all about how someone uses a website. It’s  how a user will expect your site to behave.

Beginner Usability

All SitePoint web design and UX books plus short videos and online courses on how to design a better web

Design & UX

UX, short for User Experience, is the discipline in charge of understanding how people interact with computer systems or digital products

Beginner Usability: A Novice's Guide to Zombie Proofing Your Website

Preface

You can't put the kibosh on zombies as a web developer without knowing some code, but you also have to understand how a user will approach your website. We’re so used to looking at websites that we often take for granted the little things that make them easy to navigate and smack zombies around with. And, just like your mom, you have a blind spot for your work. You know what you intended, and so you know whether a link or menu or piece of content is significant or ignorable. You know how to get from page A of the website to page B to page Q without even thinking about it. Unfortunately for us (and fortunately for you), no one shares your brain. No one thinks exactly the same way as you do—unless you're part of a zombie horde.

Useful Zombies

Users have a set of expectations for your site. Most of these are unconscious. Years of brainwashing by the sites they've used before have created patterns for how they expect your site to work. For instance, they expect that when they click/tap on a link or click/tap a button, something will happen. Often doing that will take them to a new page or set a process or animation in motion. If nothing seems to happen when they click on a link or button, they'll think the site is broken, slow, or improperly built.

Zombied Expectations

Even if the users don’t immediately run for the hills, there's something I like to call the frustration index when a website isn’t as usable as expected. On one end of the index, you have happy users who flit happily from one piece of content to the next, happily enjoying themselves and being happy. On the other end, you have apocalyptic horrors with hordes of zombies running down users and gnawing on their brains till they run to your competitors’ websites. Which end of that spectrum do you want to be on? ...No. It's not the brain gnawing side.

The Frustration Index

Color choices are important for both usability and accessibility, how usable a site is for those with disabilities (e.g., those who use screen readers or have color blindness or only use a keyboard, etc.). If you use a color for text that's too close to the background color, it can be hard for users to read, and especially so if they have any form of color blindness or visual degradation. If the user can't read your site, the zombies win, so make sure you use dark text on a light background or light text on a dark background. 

Frustration 1: Color by Zombie

You’ll also want to think about how to make headings and links stand out from the text. Color is a great assistant in this process, but it can never carry the zombie fighting weapons on its own. It always needs help. With headings, size is often the differentiator, carrying the majority of the load, and color’s there to ensure that you and any other user can pick it out easily from the horde of letters. Links, by default, use an underline and blue text to differentiate themselves from other text. Nearly every user will assume that anything underlined will be a link. If you underline anything that's not a link, you'll cause 95 percent of users to click on it needlessly.

Frustration 2: Standing out from the Horde

Make everything that a user thinks should be clickable, clickable. For instance, you might have a list of articles or blog posts with a title, a photo, a paragraph of text, and a “read more” link. Where will users click? Only a small minority will click on the actual “read more” link. Most will click on the title or the image to read more of the article or blog post. There may even be some who’ll click on the paragraph of text, but making that a link is probably overkill. As long as the text doesn't look like it should be a link, you can get away with linking three of the four.

Frustration 3: Click the Zombie

While it's tempting to say something like, “To kill zombies, click here ,” because you are giving users an explicit instruction the “click here” doesn't provide any information about what happens once users have clicked there. This is particularly annoying for people using screen readers, as they might skim through links audibly, just as sighted users skim through links visually. If the only information you have are the words “click here” and, worse yet, there are twelve links on the page labeled in the exact same way, it would be really hard to figure out which one would get you to what you were looking for. Search engines also take link text into account when developing their algorithms, so a “click here” link won't get you any link juice.

Frustration 4: Kill the Click Here

Most people don't read deeply on the web. Skimming is much more common. Long, dense paragraphs form walls of text. Walls turn people away, and, unless they're zombies, you want them to come on in and join the resistance. Thus any way you can help people skim enough to get interested in the article is a good idea. Breaking your content into paragraphs, adding lists, using headings and subheadings, or otherwise breaking up content so that it can be easily skimmed will help keep your users happy.

Frustration 5: Scaling the Undead Walls (of Text)

Text size is another important piece of the zombie-proofing puzzle. Websites default to 12pt (16px) font, which is a good baseline for reading content without becoming a zombie. Some designers will drop it down to 8pt (about 10px) for aesthetic reasons. While I like aesthetics, I’d rather have recruits able to read their training materials than be aesthetically pleased by the page. In general, I’d recommend never going below 12pt (16px), and, for long passages or for sites where reading is a focus, use an even larger font size on your body copy.

Frustration 6: Contagion is Too Small to See

Keep text left-aligned unless you have a good reason to change it. (This is assuming your language is read left to right. If your language is read right to left, then default to right-aligned.) With a straight left edge, it's much easier for users to jump back to the beginning of the next line than if they have to search for the left end of the next line of text.

Frustration 7: Improper Apocalyptic Alignment

Space between lines, sometimes called leading, is super important for readability. If the space is too small, it can make it harder for readers to follow the line properly. If there's too much space, a reader's eye can wander away from the text altogether.

Frustration 8: Suffocated Text Shouldn't Live on

Humans are visual creatures, so incorporating imagery into your websites as much as possible further helps users skim the content and digest material quickly and easily.

Frustration 9: A Busy, Busy Horded Mess

Consistent fonts and colors and imagery help users know that all pieces of your site are working together and are pieces of a consistent whole. There are some instances where different designs on different pages can be interesting or even preferred, like in an online magazine or perhaps a museum’s website, but even then, they will have some consistency between the logo or heading or other piece of design that clearly shows they are part of something else. As with so many rules in this book, keep it sacred, until you have a reason to break it, and then break it intentionally.

Frustration 10: The Inconsistent and the Undead

Because HTML provides the structure for your page and CSS uses it to select different parts of your site, it's best to keep all content encapsulated in an element, that is within a p tag or li or whatever tag might be appropriate. This helps you in several ways.

Frustration 11: Tag, Zombie, You're It

When discussing images, there are two types of size to consider:

Frustration 12: Undead Images

Whenever possible, include alternate text on any image you add to your site. This gives screen readers and search engines a way to access the content. If the content is purely decoration, an empty alt tag would be the best choice (alt=“”). This signifies that the image element can be ignored by screen readers and search engines alike. If there is no alt attribute, the screen reader and/or search engine won't know whether that was intentional or not.

Frustration 13: A Zombie's Alternate Text

Most sites tend to have a tree structure—that is, a series of top-level pages that branch out from the home page, and often each of these has pages that branch out from it, and so on. There are often links that short-circuit these routes—such as allowing a leaf page (the last page on a branch) to link directly back to the home page or to a leaf page on a different branch—but the navigation should generally follow this tree structure.

Frustration 14: Horde Structure

Navigation should be across the top of your pages or on the left-hand side. Subnavigations can go just about anywhere, but they should be under or visually subservient to the main navigation. For example, if the subnavigation is above the main navigation, it should be much smaller and/or use a color or font that makes the main navigation stand out more.

Frustration 15: Can't Find it on the Post-Apocalyptic Map

Typically your logo is either in the center of the page or, more likely, in the upper left-hand side. You can also do the upper right, but users won't often look there. When you click/tap on the logo, it should take you back to the home page.

Frustration 16: Zombie Placement

Error 3014. Yon website has error-like conditions.

Frustration 17: Anonymous, Erroneous Zombies

You should proofread your site often. Be sure you remove spellling errrors, language that doth confuse and befuddle the cerebrum, duplicate content, duplicate content, and any zombies that have slipped in.

Frustration 18: Proofread, Proofundead, Proofread

If you're building an HTML based site—i.e., not using a server technology or a content management system—it is desperately important that you keep organized and that you start that organization from the beginning. It's easy to look at all the files in a single location when you have only one page, but the more pages you have, the more links and things you'll need to update to keep things properly organized. I recommend you put all non-HTML files in a separate, file-type-appropriate folder. So you’ll have HTML files in the base folder, and then have folders for images, CSS, and JavaScript. This helps a lot in keeping your maintenance and any link fixing easier.

Maintaining the Apocalypse

Web servers don't know by default what file is going to be the home page of your site, so they have a list of files to try. The exact list is determined by the web server software used, but, in general, it starts looking for server-side languages named “index,” and then moves on to HTML files named “index”. For instance, it would start by looking for index.php or index.aspx, and, if it couldn't find any of those, it would move on to index.html or index.htm.

The Zombie Files

Also keep all your file and folder names in lowercase. Windows servers are case insensitive, meaning index.html (lowercase i) and Index.html (uppercase I) are the same filename. But Unix and Linux servers are case-sensitive, meaning index.html (lowercase i) and Index.html (uppercase I) are different filenames, and if you reference lowercase i index.html in your files, but the file itself has an uppercase I, then the servers won't find the file. If you keep everything lowercase, you can avoid any weird errors should you ever switch server types.

Lowercase Letters and Lower Class Zombie

While special characters are great for passwords, their support in URLs and file names isn’t very good. Some have special jobs in a URL, and including them in a file or folder will confuse a browser like a zombie in quicksand. The most common special characters are:

Undead Special Characters

To ease maintenance and to help you easily find the code you want to modify or update, it's best to indent your code. You’ll generally separate it into three parts: opening tag, content, and closing tag. After the opening tag, you'll hit enter and indent the content, usually with either a tab or about four spaces. (There have been many flame wars on the Internet about which one is better, but since both kill zombies, it doesn't matter too much.) After the content, you’ll hit enter again, and align the closing tag with the opening tag like so:

(In)Denting Zombies

Crash Test Zombies

We’ve covered quite an array of topics in our short time together, from color and images to the words you use in link text and file names. There’s a lot to know about building websites, even beyond the code and design. Hopefully you’ve begun to understand the diverse skillsets required to make excellent web pages. Don’t be intimidated by that fact (or the zombies win), but know that web development (and zombie fighting, for that matter) is a team sport. Focus on the parts that really interest you, and then make friends with, hire, or get to know colleagues who excel at the other parts.

The Next Zombie Offensive

Sneak Peak of HTML5 Forms and Interactive Elements (Or How To Poke Zombies in the Eye)

Join the Undead Institute Facebook group and get answers. https://www.facebook.com/groups/490540551375786/

Beginner Usability

Details

Description

Creator

John Rhea

Content

Reviews

Frequently Asked Questions

Beginner Usability