Is your web presence … meh? Don’t have the funds to hire a designer to make a new layout for your homepage? Was your site created more than 10 years ago? Then it’s time to do it yourself! Use these tested-by-fire tips to learn how to do basic user experience to streamline your website for a great new look and functionality.
I’m a corporate librarian at an engineering firm with more 12,000 employees across the world. My first task when I started here in 2014 was to renovate the library’s homepage on the company intranet, making it intuitive and usable for engineers in various countries who had any number of specializations. To meet that goal, I had to learn user experi ence (UX) very quickly. UX is about making processes streamlined, clear, and easy. In physical spaces, it applies to things like signage and layout of materials and displays, but this ar ticle looks at its application to websites. First, I’ll give some advice on how to plan your renovation, then I’ll discuss how to implement your plan. To wrap up, I’ll give you some general pointers and pro tips.
1. Think big, then small.
Ask big questions about who comes to your website and why. From there, use card sorting to list out all the reasons people visit you and the resources you have available.
Card sorting can take a lot of different forms, but for me, it was writing a lot of Post-its to represent the various sorts of content we owned and resources we provided access to. Seriously, a lot of Post-its. Some people prefer to use typed columns or organizing on PowerPoint slides. Whatever works for you will get the job done.
2. Dedicate time to the hierarchy—the site hierarchy.
This is like Card Sorting: Part Two (The Revenge!). Take all your Post-its or slides and form them into mind maps or some kind of visual layout so you can see how your content and your users’ needs fit together. I had columns like Staying Informed that listed our ejournals and how to set news alerts and such. Another column was Browsing Our Resources, which listed our subscriptions, in-house compilations, library catalog, and things like that.
3. It’s OK to connect (some) things in more than one place.
The reason I prefer mind maps over straight columns is that some of your resources fit more than one bill. For example, EBSCO is on my Resources list, but you can also set news alerts on there, so it qualifies for the Stay Informed page.
You also want to provide different pathways to get to your resources. Remember, these aren’t books that can only occupy one spot on a shelf. These are more like airline routes. There’s more than one way to get anywhere.
4. Keep to a three-click max.
A person should be able to get from your library homepage to any of your resources in three clicks or less. This prevents users from losing interest and keeps you from burying your content in hard-to-reach places. It may sound tough, but remember—it’s six degrees to Kevin Bacon, and you’re connecting to closer things than him.
5. Have a backup file.
The Guinness breweries can restart its entire operation in mere hours if a catastrophe, such as water contamination, occurs because it has secured backups to rebuild from. Can’t you do as well as Guinness? I use Word docs for text (including formatting) and PowerPoint for images.
6. Make several drafts first so you can compare and get feedback before moving too far forward.
Creative people (which you are, if you’re doing web design) often get stymied by making sure that every line is perfect and the next line and the next. Making several drafts frees you from having to be perfect. Plus, different formats/layouts are suited to different kinds of content and users, which enables you to try several things and see what best serves your users. I usually keep a separate Word file for notes about changes to make and things to try.
Of course, if you greatly prefer a particular draft, you can make the comparison drafts duller so your boss can see how your main candidate sparkles.
7. Keep your homepage simple.
A homepage isn’t supposed to store content. It’s where you point to everything, where you have doors to everything. Think of it like the front door to your home. You don’t sleep or cook or bathe in the doorway (I hope!), but you go through the doorway to get to those places.
If you can’t close your eyes and name everything on your homepage, it’s too busy. Think “Inbox Zero” but with parts of your website.
8. Use prime real estate.
When people view websites, their eyes usually go from the top left to the center and (eventually) to the bottom right. The area of the page that users can see without scrolling is called “above the fold,” like in newspapers. On PC screens, users often don’t scroll down, so it’s vital to keep important content toward the top of the screen. In short, lay out the most important content from the top left to the bottom right, trying to keep everything above the fold. If you have to point or give directions for how to find something on your homepage, it’s too busy.
If you have money for it, you can pay someone to make a heatmap of your homepage (or other pages). Heatmaps visually track where people look or click on your screen, which is very helpful for determining what people access and if they are missing out on a feature that is just badly placed on the page.
9. Be consistent.
Find your company’s branding and use it. Use the same colors, fonts, and layouts on every page.
10. Get it right once, then use that over and over.
Copy and paste whenever possible, including content. If you have a header and text, copy and paste it onto a new page, then you can modify the header and replace the text in a way that keeps all the formatting the same. This saves you a lot of time and prevents transcription errors.
11. Use buttons by the handful.
If you use buttons, limit yourself to five, maybe six. More than that, and you don’t want buttons. You want a list. The point of buttons is to use visual simplicity. Visuals are not the best way to scan lots of options.
12. Ignore “We need a button for … .”
I guarantee that people will come to you insisting that you need to add a button to the homepage. You don’t. The person usually means that this new feature is very helpful and people need to know about it, but that doesn’t mean a button is the required solution. Instead, try a social media post or an intranet announcement or (if your company allows) a brief informative email. This situation is why you have a hierarchy—to determine what content fits where in a consistent, orderly manner.
13. Use action words.
People come to your site to do things, so give them things to do. When naming a list/button/page or whatever, don’t say what it is, say what it does. My buttons use words such as “find,” “view,” “explore,” “browse,” “research,” and” access.” Using action words also helps you reduce library jargon.
14. People don’t read. Keep words to a minimum.
Plan your words well, but be prepared for users to ignore every word on your page, especially if it’s in a paragraph. This is why visual design is as important as verbal design. Don’t be surprised to find yourself saying, “How could they not see it? I wrote it on the page right there.” I feel your pain. It’s the pain of web design.
15. Cater to yourself.
The site is a doorway with users on one side and you and all your content on the other. You are part of the equation. It’s like if you invited people over for coffee, you’d put a trash can next to the coffee for sweetener wrappers and stirrers, right? That’s for your convenience (so you don’t have to pick up trash from all over the place) as well as theirs, and that’s OK.
When making forms and workflows, build them around what info you want and how you want to receive it. Don’t want to be contacted by phone? Don’t list your phone number! (Or, put it in the bottom right corner like we talked about earlier, right?)