The Best of UX Basics for Website Beginners

I spend a lot of time giving people feedback on their websites. While my main focus is usually content, I also pay attention to design and structure. When they’re in harmony with one another, these elements create a positive user experience (UX).

For first-time website builders trying to start a personal brand — like writers, artists, and other creatives — UX might not be something you’ve put a lot of thought into. It’s all about designing and organizing your content around the needs of your users.

I wanted to put together a basic introduction to website UX for those inexperienced with web design, or those putting what they do know to work for their personal websites. To do that, I asked my friend Gabby Manotoc, a New York-based product design lead, some questions based on the issues and concerns I typically see.

UX Basics

What basic user needs should people consider before they actually start building their site?

• Start with “What is the purpose of this site?” Is it to share a hobby or to find a job? Defining the purpose will help you be more intentional with the content you create. It will also help you make important choices about your site. For example, if the purpose of your website is to share your professional photography work so that you get hired for more projects, adding in a blog about your home cooking will feel out of place. Your recipes, while delicious, would probably be better placed on a separate site or social media account. 
• How much time will you dedicate to site upkeep and management? This will determine what platform to build your website on. If you plan to dedicate a lot of time to your website, using a website builder with more features will give you more freedom. On the other hand, if you don’t want to update your website except for every few months, go with something simpler and more robust. That way you don’t spend time constantly troubleshooting bugs on your site. 

Content

What if someone wants to start building their site, but doesn’t yet have content to populate it? How do you build a site around a brand that doesn’t yet have a product (like a book) to promote?

• Having a site with no content is like putting the cart before the horse. You’ll spend time and money unnecessarily before even knowing what the needs of your content and audience are. I would advise people to work smarter instead of harder in this case. 
• Consider a landing page instead. This is a single page that tells viewers about a product you’re working on but hasn’t yet been released. You can add a sneak preview of what you’re working on, your contact information, and links to other places you have a web presence.

Social Media

• Consider a social media page instead. Social media sites have a built-in audience and community you can take advantage of. You can easily search for your target demographic based on filters, tags, etc. It also allows you to focus more on content rather than the look and feel of a website. 
• Another idea is to create that landing page with your social media feed embedded. Once you actually have content you can publish, then you can start building your site.

Organization

How should creators determine the best way to organize their content for intuitive navigation? Is there any kind of basic, universal structure that would be helpful for people who would rather spend more time creating content than tweaking their website?

• An interesting way to organize information for a website is to look at the concept of the Serial Position Effect. Overall, viewers remember the beginning and the end of a list easier than the middle. Therefore, what you put at the beginning and end of your navigation is important. In header navigation, you want the first links to showcase what you do, and then the last link to be some way for people to take action.
• Fewer navigation items optimize your site for better SEO. Why? Because your homepage will have fewer links. The more links you have on a page, the more search engines will dilute your site’s authority. They’ll push you further down in search results.
• From a usability perspective, most users’ short term memory can retain up to 5-7 items of information. Having too many navigation items doesn’t just look visually overwhelming. It increases the risk that users will bypass important sections of your site.

Menus

• Avoid dropdown menus if you can. Viewers read faster than they click. When they hover over a navigation item, their intention is to click through to that page. Surprising them with an additional step/choice to make is annoying.
• If you need to use a dropdown navigation structure, try to use as few links as possible. Consider grouping links into chunks if you have more than five. This way, you’ll help users quickly scan categories and guide their decision-making.
• If you have additional links that might be necessary but not important enough to be on the header of your page, consider putting these in the footer. But remember the footer shouldn’t be a catch-all for all your “other” links because it will reduce your site optimization.

Home Page UX

Good UX on a site’s homepage is crucial to get people to stay on the site. What are some things to avoid?

• Think of the moment your home page loads as a folded up newspaper on a newsstand. You want to start with a strong headline that explains exactly what this website is about. Is it a personal portfolio? Tell the viewer who you are, what you do, and if you want them to take action (i.e. hire me!). If people are intrigued, they’ll continue to explore and scroll down the page. What often happens is a website will have a long paragraph as soon as you enter the homepage that overwhelms the viewer. On the other hand, having bland content (i.e. a huge image with no context) may cause a viewer to exit quickly.
• For the rest of the home page, arrange items from top to bottom in terms of importance. This is where you can add more color to the sections of your website by giving viewers a sneak peek of what’s to come if they continue to explore. 
• Don’t be afraid of white space. From a UX design point of view, having white space helps the eye focus more on the content that’s there. A beginner’s mistake is treating the screen like paper. Unlike paper, a screen has a lot more real estate that you can play with. Users today expect to scroll, swipe, explore and interact with a page.
• Remember to check your website on mobile devices! Too many sites today completely fall apart when viewed on a phone. Depending on your site, many of your viewers may be accessing your website on their mobile device.

Fonts and Colors

What general guidelines should people have in mind when it comes to fonts and colors that are UX-friendly, but also doesn’t look boring or like everyone else?

Colors

• As a general rule of thumb, dark text on a light background is easier to read for most users. There are many free online tools that allow you to check your website for colors for optimal contrast, such as this one. It’s good practice to check no matter what, but especially if, for branding purposes, you’d like to use light text on a dark background. 
• Keep things simple by picking one or two primary colors for your brand/website, and use these against basic grayscale colors. If you’re having a tough time selecting colors, it’s worth researching color psychology to see which colors resonate the most with what your site is trying to achieve. Another tip is to do an audit of your competitors. Identify the most common colors and deliberately select colors that are different.

Fonts

• Open-source fonts tend to load much faster. As the web continues to evolve, there are more and more open source fonts available for the public to use. Using a custom font that you upload to a website will increase page load time (slowing down your readers’ experience), or cause errors when viewed on different devices.
• From a sizing perspective, 16px is a good baseline for body text. Headings should be larger and any less important copy should be smaller. The best way to test how your font sizes feel is to view your site on multiple devices, especially a phone.
• Pay attention to line-height (the space between lines of text). You want breathing room so users can better read the content on your site. A good place to start is to set it at 1.5x the size of the font.
• Sans-serif fonts are more readable on screens, especially at smaller sizes. If you have a serif font that is used for your brand, use them for headings instead.

Videos, Images, and Other Visuals

What considerations go into the use and placement of images and videos?

Image and Video Usage

• With inclusivity UX in mind, viewers who use screen readers won’t be able to understand your content if most of it needs to be viewed as an image or a video. When adding images or videos, make sure to include alt-text.
• Images and videos should also be used intentionally and be relevant. They help tell the story and enhance the mood of a page, depending on what you’re trying to achieve.
• Videos slow down page load and require a user to spend more time than they may be willing to give on a page. The payoff needs to be worth it when adding a video. If a video is instructional, consider a simplified graphic instead since this format is easier to digest. When used correctly, a good video can enhance a user’s experience on the site.

Placement

• On static pages (like a home, about, or contact page), a common pitfall is having too many images in view at once. It distracts from where you want a viewer to focus and the images can compete with each other unnecessarily. 
• On feed-style pages (such as where your blog lives) where your images are really more like thumbnails, it’s important to create consistency. This can be achieved by using a similar color scheme, illustration style, or type of crop. 
• If an image or video is being used as the background on a website, make sure that any content on top of the video is legible and that the content isn’t distracting or irrelevant.

Do you have questions about personal branding, websites, or social media? Let me know in the comments or send me a message!