00:00:00.299
The next speaker is Hilary Stohs-Krause, all the way from Madison, Wisconsin, USA.
00:00:05.759
Hilary is a VP and Senior Software Developer at 10 Forward Consulting. She's passionate about the intersection of technology, entrepreneurship, and social justice, and spends a lot of free time volunteering with various community organizations.
00:00:15.299
And the words on everyone's lips are: does she pair program? Do you know what she does? The tech ghost thing? In her company, 10 Forward Consulting, they have a form of instant mob programming where if someone has a problem, they call tech ghosts, and others join to help sort out the issue.
00:00:33.360
Hilary Stohs-Krause will be talking about how to make your websites not ugly: basic UX for programmers. Let's take it away!
00:01:04.339
Thank you! One thing I want to emphasize at the very beginning is that I was deliberate with the title of this talk. It's not about how to build beautiful websites because that would take more time than I have today. Instead, we’re going to focus on making websites not ugly, which is a lot easier than it might seem.
00:01:29.920
As mentioned earlier, I’m Hillary, a VP and Senior Software Developer at 10 Forward Consulting. Who here picked up a hobby during the pandemic? I feel like many of us did—mine was plants. I got really into plants and now, between work and home, I care for 124 houseplants.
00:01:41.400
Yes, I use an app because I could not keep track of them all at once! People often say they can just feel when a plant needs water, but I need something to tell me the exact measurement of how much water to give. That’s how my plants stay alive.
00:02:03.479
First, we are going to take a look at a real website from 1996. This isn’t just any website; this was an American Congressional website, which represented the best we could do at that time. Who thinks that this is a well-designed, good-looking website?
00:02:20.060
When I show this, some might say it’s kind of nostalgic, but I'm glad that that trend seems to have ended. The reason I show this example is that you may not be able to articulate what isn’t great about it or what could be better, but you know intuitively that it can be improved. Even if you don’t consider yourself creative or lack design experience, you likely know more than you think.
00:02:51.540
But why do we even care about design? Why does it matter? If the website or web application works, isn’t that the most important thing? There are three main reasons to prioritize design.
00:03:09.599
First, usability: design informs functionality. It’s crucial to ask: what’s important? How does it work? How do I navigate or change something? It doesn’t matter if everything works perfectly if users can’t figure out how to navigate it. Second is credibility. 46% of people in a Stanford study said that visual design was the most important factor in establishing credibility when visiting a new website for the first time. In contrast, only 8% ranked functionality as important. We have a limited window to capture people’s interest, so design, being the first thing people notice, plays a crucial role in keeping them engaged.
00:04:39.479
Quick disclaimer: there are always exceptions. The ten items I’ll discuss are broad guidelines. They might not apply in every situation based on your target audience and the purpose of your site or application. It’s important to note that while design trends change—like we saw with the 1996 example—human behavior does not. According to the Nielsen Norman Group, research shows that behavior patterns change slowly over time.
00:05:04.620
Today, we will discuss three main areas: how to make text visually appealing, the appropriate use of images, and approaching design from a logical perspective. First, let’s focus on letting our text breathe. Studies found that on average, we consume about 20 to 25% of the content on a webpage. That means 75% goes unnoticed.
00:06:06.240
To ensure people focus on important parts, we must structure text carefully. Studies show we prefer a text length of 50 to 60 characters, reading fastest at around 100 characters. Aim for 60 to 100 characters to optimize readability. Additionally, ensure sufficient space between lines (1.4 line height is standard) and adequate padding around sentences to prevent confusion when reading.
00:07:05.759
Here’s an example of what to avoid: text that is too squished together without margins can overwhelm readers, making it harder to continue reading all the way to the end of a sentence. In contrast, this example from The New York Times maintains about 75 characters per line and utilizes white space effectively.
00:08:16.560
Now let’s talk about text legibility. Don’t put yellow text on a white background! I've seen many issues with clients regarding color choices. For instance, one client in the fitness industry insisted on using their branding colors, which included green— a color that often poses visibility challenges for colorblind users. To check color combinations, I use a tool from WebAIM, which ensures compliance with accessibility standards.
00:09:04.260
Consider font size as well. The default for most browsers is 16 pixels for a reason. It's essential to consider that, as our population ages, more people may require larger texts to read comfortably. Going below the browser default can limit accessibility without any significant justification.
00:09:57.480
We want to make visiting our websites a smooth experience for all users. Creating scannable text helps because people typically read only a quarter of the content on a page. Highlighting key content, using semantic HTML, assortment in text size, and bulleted lists can help guide readers through the material effectively.
00:10:54.240
I’ve observed that mixing lowercase and uppercase letters enhances our scanning efficiency— even if just by milliseconds. Many sites, especially social media, maximize the usefulness of bulleted lists for easy reading. Too many visual distractions can deter readers immediately.
00:11:52.680
The presentation should maintain a sense of organization. For instance, if I encountered a wall of text without visible dividers or headers, I would likely lose interest immediately. Effective content facilitates scanning, thanks to clear headers and sections.
00:12:47.280
Lastly, decoration must be minimal. Startups often exhibit a lot of enthusiasm which can lead to unnecessary clutter in design. It's vital to limit the number of typefaces and colors to avoid distractions. A good rule of thumb is to use one for body text and another for headings, keeping variations to an acceptable limit.
00:13:38.640
Many designs fall into the trap of inconsistency. For example, if a site has multiple header colors or typeface sizes, it can confuse users. Patterns should be clear. Familiarize yourself with existing sites to work efficiently.
00:14:29.760
Now let's discuss images and their appropriate use. Icons can often be misleading and challenging to interpret. Research shows that many users cannot identify what certain icons represent. Ensure that labels accompany all icons for clarification.
00:15:23.520
Graphic choices matter significantly. For effective design, avoid clichés like stock photos that come across as unoriginal. Tailor images to their context and make them relevant to the content. We are naturally drawn to faces; incorporating them responsibly holds user interest.
00:16:18.899
Additionally, employing spacing can help user perception of images. Effective content placement can reduce biases associated with advertising. Use images strategically to enhance content, keeping them related and meaningful.
00:17:10.340
To recap, think about how text functions visually. Icons should be tailored to navigation, must be labeled, and images used sparingly, ensuring they are informative and visually associated with content.
00:17:55.640
A cohesive design perspective is essential. Design isn't merely about aesthetics but sound structures and patterns. Predictable sites allow users enjoyment without confusion.
00:18:42.420
Let's touch on Progressive Disclosure. This technique simplifies content delivery to users, thereby avoiding overwhelming them. Key principles include employing the F-shaped reading pattern to control content placements and ensuring major touchpoints are clear.
00:19:32.940
Familiarize yourself with standard web layouts to optimize user experience. Ad placement should never impede important content locations. Above-the-fold engagement captures attention, while consistent navigation reinforces user familiarity.
00:20:38.280
Manage white space effectively. Many clients underestimate its importance. Instead of trying to fill in every area, utilize it effectively to draw attention to critical components. Consistency in buttons, links, and formatting is vital for user recognition.
00:21:45.360
Finally, ensure the functionality of design complements visual appeal. Allocate sufficient thought toward testing and validation to avoid breakdowns in usability.
00:22:42.340
In conclusion, we want to consider our text as visual elements first, structure them for readability, prioritize accessible design, and be cautious in our use of images and colors. Maintain usability and functionality to create cohesive websites.
00:23:32.640
Here are the citations for this presentation.
00:24:53.460
Thank you!
