Skip to Content
Main Content

Hiker looking out over the mountains

5 Minute Read | January 30, 2023

The Fundamentals of UI and UX Design

The essential book on web usability, Don’t Make Me Think: A Common Sense Approach to Usability authored by Steve Krug, was published more than 20 years ago. But designers and developers still rely on it today as a guide to make their websites user friendly.

How has this book stood the test of time when the Internet has evolved so much? Users still use the Internet in many of the same ways as they did in the early 2000s. (An updated version of Steve Krug’s original book was published in 2013 to address mobile design but the original fundamentals didn’t change.) So, while design is ever-changing and constantly evolving, the fundamentals of usability are still critical and applicable today.  

When It Comes to Web Usability, Go Back to the Basics

While the following usability best practices may seem simple, they can be surprisingly difficult in practice. Guided by the principles in Don’t Make Me Think, here are four main fundamentals that every designer and developer should keep in mind.

1. Clearly Explain Who You Are and What You Do

This one seems obvious, but companies sometimes think they need to build their website only to meet their current customers’ needs; in reality, it’s important to build a site so that someone who’s never heard of your brand will understand quickly who you are, what you do, and what a user can accomplish on your site.

An image of the Novus Home Mortgage website home page featuring easy-to-read text that clearly explains who they are, what they do and how they help their site visitors.

The example above is from a website we designed for Novus Home Mortgage. Visitors to the home page are greeted with clear indications of who Novus is (a home mortgage company), what they do (connect you with a loan officer), and what a user can do on their site (find a loan officer).

Key Takeaway: Users’ attention spans are short. Make it easy for your site visitors to quickly understand what you do, who you serve, and how you help them accomplish their goals.

2. Use Clear Navigation

Think of the navigation as road signs – you should always know where you are and where you can go. Your main navigation should be simple, uncluttered, and offer clear direction. Think of page titles as street names. Here’s an example:

An image from the Powerbrace website that shows clear, simple and uncluttered navigation.

When you land on one of Powerbrace’s website pages, you quickly see from the main navigation that you’re in the products section, and within products you’re viewing the Hinges page. This is easy to see because those indicators are above the fold and designed purposefully so the user knows where they are without needing to scroll to find out. Remember, don’t make them think!

Key Takeaway: Not all site visitors will enter your site through the home page. Help them immediately understand where they are in your site structure through the use of specific design cues, navigational elements, and layout.

3. Keep Content Short

This one is difficult for many marketers and the companies they work for. Why? Because we have so much valuable information we want our customers and site visitors to know! But the more text you include on a page, the more likely people will give up before they find the information they need.

People scan. Krug says you need to think of websites like billboards – you only have a few seconds to get your message across. Most people won’t stick around to read big blocks of text. In fact, many of you probably skipped right down to the example below and may not even be reading this now. That doesn’t mean you need to leave out important information – it just means that you need to organize it to be scannable.

An image from the Boyle Fredrickson home page that shows the use of visual icons with brief text to help a user quickly understand what they do and to drive them deeper into the site for additional information.

(Did you notice that I mentioned above that many of you would skip down to the example without reading the full paragraph? No? That proves my point!)

People scan website pages for the information they want, but that doesn’t mean you need to omit all critical content to make it user friendly. In the example above from the Boyle Fredrickson website, a visitor can easily see what areas of the law the firm specializes in. By incorporating visual icons, the content is organized perfectly so that a quick scan gives visitors practice titles, a brief description of each, and a link to another page to learn more.

Key Takeaway: Reduce text, and then reduce it some more. In general, text-heavy websites are difficult for users to scan, which reduces comprehension and decreases engagement. Use design and text elements to provide content hierarchy and visual cues that give users the information they need to keep them engaged and moving through your site.

4. Make Clickable Items Clear

This is another usability best practice that seems obvious, but with website design becoming more creative, clickable website elements have expanded past buttons to blocks, images, icons, and more.

Users don’t want to have to guess what they can click on, so make clickable elements clear by changing the color, or using underlines, backgrounds, or borders.

An image from the Office Furniture Resources website that shows the use of clear clickable page elements.

In this example from the Office Furniture Resources website, as a user hovers their mouse over various elements in this section, the background of clickable elements turns red, and the pictures pulse. While not a typical looking button, these purposefully created design enhancements make it clear to the visitor that they can click on the accessories box, for example, and be brought to a page with more detail.

Key Takeaway: Make it easy for a user to understand what elements of your webpages are clickable. For many users, it’s not always easy to tell – especially if your site visitors have visual impairments or other disabilities that make navigating websites difficult.

Final Thoughts

Steve Krug’s fundamentals play just as key a role today as they did when first introduced more than 20 years ago. With today’s design changing rapidly and becoming more experimental, it’s critical to keep these four fundamental rules in mind when designing, or redesigning, your website.

Users don’t want to have to think; they just want to quickly find what they’re looking for. Make that as easy as possible in the few seconds you have to make a good impression.

If you need help with website design, Northwoods’ UX, UI and website designers have the expertise and experience to create a user-friendly, beautifully designed, and functional website that will help you achieve your goals. Reach out to us today!

Authored By

Bethany Polovitz

Bethany Polovitz

Front End Developer

hand-drawn owl

Get Expert Tips

4034811/Blog/The-Fundamentals-of-UI-and-UX-Design5
<p style="margin-bottom:11px">The essential book on web usability, <em>Don&rsquo;t Make Me Think: A Common Sense Approach to Usability</em> authored by Steve Krug, was published more than 20 years ago. But designers and developers still rely on it today as a guide to make their websites user friendly.</p> <p>How has this book stood the test of time when the Internet has evolved so much? Users still use the Internet in many of the same ways as they did in the early 2000s. (An updated version of Steve Krug&rsquo;s original book was published in 2013 to address mobile design but the original fundamentals didn&rsquo;t change.) So, while design is ever-changing and constantly evolving, the fundamentals of usability are still critical and applicable today. &nbsp;</p> <h2>When It Comes to Web Usability, Go Back to the Basics</h2> <p style="margin-bottom:11px">While the following usability best practices may seem simple, they can be surprisingly difficult in practice. Guided by the principles in <em>Don&rsquo;t Make Me Think</em>, here are four main fundamentals that every designer and developer should keep in mind.</p> <h3>1. Clearly Explain Who You Are and What You Do</h3> <p>This one seems obvious, but companies sometimes think they need to build their website only to meet their current customers&rsquo; needs; in reality, it&rsquo;s important to build a site so that someone who&rsquo;s never heard of your brand will understand quickly who you are, what you do, and what a user can accomplish on your site.</p> <p><img alt="An image of the Novus Home Mortgage website home page featuring easy-to-read text that clearly explains who they are, what they do and how they help their site visitors." loading="lazy" src="/Northwoods-2020/Blogs/UX-UI-1.jpg" /></p> <p>The example above is from a website we designed for Novus Home Mortgage. Visitors to the home page are greeted with clear indications of who Novus is (a home mortgage company), what they do (connect you with a loan officer), and what a user can do on their site (find a loan officer).</p> <p><strong>Key Takeaway:</strong> Users&rsquo; attention spans are short. Make it easy for your site visitors to quickly understand what you do, who you serve, and how you help them accomplish their goals.</p> <h3>2. Use Clear Navigation</h3> <p>Think of the navigation as road signs &ndash; you should always know where you are and where you can go. Your main navigation should be simple, uncluttered, and offer clear direction. Think of page titles as street names. Here&rsquo;s an example:</p> <p><img alt="An image from the Powerbrace website that shows clear, simple and uncluttered navigation." loading="lazy" src="/Northwoods-2020/Blogs/UX-UI-2.jpg" /></p> <p>When you land on one of Powerbrace&rsquo;s website pages, you quickly see from the main navigation that you&rsquo;re in the products section, and within products you&rsquo;re viewing the Hinges page. This is easy to see because those indicators are above the fold and designed purposefully so the user knows where they are without needing to scroll to find out. Remember, don&rsquo;t make them think!</p> <p><strong>Key Takeaway:</strong> Not all site visitors will enter your site through the home page. Help them immediately understand where they are in your site structure through the use of specific design cues, navigational elements, and layout.</p> <h3>3. Keep Content Short</h3> <p>This one is difficult for many marketers and the companies they work for. Why? Because we have so much valuable information we want our customers and site visitors to know! But the more text you include on a page, the more likely people will give up before they find the information they need.</p> <p>People scan. Krug says you need to think of websites like billboards &ndash; you only have a few seconds to get your message across. Most people won&rsquo;t stick around to read big blocks of text. In fact, many of you probably skipped right down to the example below and may not even be reading this now. That doesn&rsquo;t mean you need to leave out important information &ndash; it just means that you need to organize it to be scannable.</p> <p><img alt="An image from the Boyle Fredrickson home page that shows the use of visual icons with brief text to help a user quickly understand what they do and to drive them deeper into the site for additional information." loading="lazy" src="/Northwoods-2020/Blogs/UX-UI-3.jpg" /></p> <p>(Did you notice that I mentioned above that many of you would skip down to the example without reading the full paragraph? No? That proves my point!)</p> <p>People scan website pages for the information they want, but that doesn&rsquo;t mean you need to omit all critical content to make it user friendly. In the example above from the Boyle Fredrickson website, a visitor can easily see what areas of the law the firm specializes in. By incorporating visual icons, the content is organized perfectly so that a quick scan gives visitors practice titles, a brief description of each, and a link to another page to learn more.</p> <p><strong>Key Takeaway:</strong> Reduce text, and then reduce it some more. In general, text-heavy websites are difficult for users to scan, which reduces comprehension and decreases engagement. Use design and text elements to provide content hierarchy and visual cues that give users the information they need to keep them engaged and moving through your site.</p> <h3>4. Make Clickable Items Clear</h3> <p>This is another usability best practice that seems obvious, but with website design becoming more creative, clickable website elements have expanded past buttons to blocks, images, icons, and more.</p> <p>Users don&rsquo;t want to have to guess what they can click on, so make clickable elements clear by changing the color, or using underlines, backgrounds, or borders.</p> <p><img alt="An image from the Office Furniture Resources website that shows the use of clear clickable page elements." loading="lazy" src="/Northwoods-2020/Blogs/UX-UI-4.jpg" /></p> <p style="margin-bottom:11px">In this example from the Office Furniture Resources website, as a user hovers their mouse over various elements in this section, the background of clickable elements turns red, and the pictures pulse. While not a typical looking button, these purposefully created design enhancements make it clear to the visitor that they can click on the accessories box, for example, and be brought to a page with more detail.</p> <p><strong>Key Takeaway:</strong> Make it easy for a user to understand what elements of your webpages are clickable. For many users, it&rsquo;s not always easy to tell &ndash; especially if your site visitors have&nbsp;<a href="https://www.nwsdigital.com/Blog/ADA-Compliance-Website-Checklist" linktype="3" target="_self">visual impairments or other disabilities</a> that make navigating websites difficult.</p> <h2>Final Thoughts</h2> <p>Steve Krug&rsquo;s fundamentals play just as key a role today as they did when first introduced more than 20 years ago. With today&rsquo;s design changing rapidly and becoming more experimental, it&rsquo;s critical to keep these four fundamental rules in mind when designing, or redesigning, your website.</p> <p>Users don&rsquo;t want to have to think; they just want to quickly find what they&rsquo;re looking for. Make that as easy as possible in the few seconds you have to make a good impression.</p> <p><em>If you need help with website design, Northwoods&rsquo; UX, UI and website designers have the expertise and experience to create a user-friendly, beautifully designed, and functional website that will help you achieve your goals. <a href="/Contact-Us" linktype="2" target="_self">Reach out to us</a> today!</em></p>
/Northwoods-2020/Hero-Images/Hiker-Looking-Out-Over-Mountains.pngHiker looking out over the mountainsUsers’ attention spans are short. Make it easy for your site visitors to quickly understand what you do, who you serve, and how you help them accomplish their goals. https://nwsdigital.me/40a5POz @northwoods #ux #webusability #webdesignBethany Polovitz/Northwoods-2020/People/Bethany-Polovitz.pngWoman standing in front of a log cabin with soft, warm lightinghttps://ctt.ac/s5dz6<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script><script>hbspt.forms.create({ region: "na1", portalId: "23630176", formId: "40c5bbae-05a2-42ea-94dd-1662181fd56e" });</script>/Northwoods-2020/Blogs/Social-Media-Cards/The-Fundamentals-of-UI-and-UX-Design---Blog.jpg?LargeThe Fundamentals of UI and UX Design2023-01-30T00:00:00/Northwoods-2020/Blogs/Social-Media-Cards/The-Fundamentals-of-UI-and-UX-Design---Blog.jpgBasic UI and UX principles established more than 20 years ago still hold true today. While these best practices may seem simple, they can be surprisingly difficult in practice. And easy to forget. Here are four key usability basics to keep in mind when designing or redesigning your website.3686810/People/Bethany-PolovitzBethanyPolovitzFront End Developer<p>As a front end developer, Bethany is highly skilled in design, development, and user experience. She works directly with Northwoods clients to build websites that strike an essential balance between functionality and visual appeal. Bethany is motivated to find creative solutions for any challenge and values working collaboratively as part of a team to constantly improve and provide exceptional results. In her free time, she enjoys reading, running, and sailing.</p>Bethany Polovitz/Northwoods-2020/People/Bethany-Polovitz.pngBethany PolovitzAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesPackage Type - NWS Data ModulesPersonID - NWS Data ModulesBethany PolovitzProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data ModulesTeamAll StaffDesignersDevelopersAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesUX & Website DesignUX & Website StrategyWebsite DevelopmentPackage Type - NWS Data ModulesPersonID - NWS Data ModulesBethany PolovitzProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesNWS DigitalSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data Modules02024-02-20T11:32:15.44000