Ruby Video | How to Make Your Website Not Ugly

Talks

How to Make Your Website Not Ugly - Basic UX for Programmers

Hilary Stohs-Krause

#front-end-development

#accessibility-a11y

#ui-design

#ruby-on-rails

How to Make Your Website Not Ugly - Basic UX for Programmers

by Hilary Stohs-Krause

In the talk titled "How to Make Your Website Not Ugly - Basic UX for Programmers", speaker Hilary Stohs-Krause, a VP and Senior Software Developer at 10 Forward Consulting, addresses programmers who may feel out of their depth in design. The session focuses on practical strategies to improve the aesthetics and usability of a website without needing extensive design knowledge. Stohs-Krause emphasizes that improving a website’s appearance is simpler than expected and provides a structured framework with actionable advice.

Key Points Discussed:

Usability, Credibility, and Design:
- Usability informs functionality—an attractive design impacts how users navigate and interact with a site.
- Credibility is strongly tied to visual design; 46% of users prioritize design over functionality in establishing trust.
Text Presentation:
- Readability: Text should be structured for ease of reading, maintaining an optimal length of 50 to 100 characters with sufficient line spacing (1.4 line height recommended).
- Legibility: Use high-contrast colors to enhance readability, and attention should be given to font sizes that accommodate aging users.
- Organization: Effective content facilitation through headers, bullet points, and limited distractions helps maintain reader interest.
Image Usage:
- Icons: Ensure icons are intuitive and accompanied by labels to clarify their meaning.
- Graphics: Avoid generic stock photos; instead, use images that are contextually relevant to the content and enhance engagement.
- Spacing: Use effective spacing around images to promote better user perception and reduce bias in design.
Progressive Disclosure:
- Simplify content delivery to prevent overwhelming users, tailored content placement should adhere to the F-shaped reading pattern.
White Space Management:
- Proper utilization of white space is crucial; instead of cluttering pages, leave strategic areas empty to draw attention to essential components.
Consistency in Design:
- A cohesive and predictable design helps users navigate a site easily and promotes a positive user experience.

Conclusions and Takeaways:

Hilary Stohs-Krause's presentation reinforces the importance of considering text as visual elements, establishing a structure designed for usability, prioritizing accessibility, and using images judiciously. Proper design not only enhances visual appeal but also supports functionality, ultimately leading to a better user experience. By following these guidelines, programmers can effectively bridge the gap between design and functionality and create more user-friendly websites.

Overall, the session provides valuable insights for programmers seeking to enhance the aesthetic and practical aspects of web development, emphasizing that successful design does not have to be complex.

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!

RubyConf AU 2023