Lecture: How to Make Your Website Not Ugly

Introduction

• Lecturer: Hilary Sos-Crazzi from Red Canary, cybersecurity company.
• Focus on making websites "not ugly" rather than beautiful.
• Importance of usability, credibility, and interest in UI/UX design.

Importance of UI/UX Design

• Usability: Design informs functionality and user interaction.
• Credibility: Stanford study shows 46% judge credibility by visual design.
• Interest: Capturing interest is crucial; studies show 10s to 50ms to engage users.

General Principles

• High-level best practices for different demographics and purposes.
• Human behavior in engaging with websites remains relatively consistent over time.

Key Focus Areas

Words/Text Content

• Treat text as a visual element.
• Line Length: Ideal 50-100 characters for readability.
  • Example: New York Times has 74-character line length.
  • Use of ch unit in CSS for defining character width.
• Line Height: Suggested 1.4 to improve readability.
  • Helps with reading comprehension, especially for those with dyslexia.
• Padding: Importance of spacing in columns to guide reading flow.
• Legibility: Ensure good color contrast and avoid light colors like yellow on white.
  • Use contrast checkers like WebAIM.
• Text Size: Use browser defaults (16px) or larger.
• Scannability: Highlight key content using subheads, bulleted lists, and the first two words rule (first 11 characters).
• Consistency in Styling: Limit typefaces to 2-3 and colors to avoid the appearance of ads.

Images and Icons

• Use images only when they add value; integrate with content.
• Icons: Should always have labels.
  • Testing shows low accuracy in recognizing icons without labels.
• Avoid conflicting icons meanings.
• Photos and Graphics: Avoid banner blindness by integrating images within content.

Design Logic and Patterns

• Use predictable patterns.
• Progressive Disclosure: Present information progressively to avoid overwhelming users.
• F-shaped Reading Pattern: Default pattern for consuming content.
  • Place important content above the fold.

Consistency

• Consistent design across elements like links, buttons, and alerts.
• Teach patterns to users and maintain consistency for ease of navigation.

Functionality

• Bugs matter as much as aesthetics.
• Backend decisions can impact frontend design.

Final Recap

• Words: Treat text as visual, legible, scannable, simple.
• Images: Use appropriately, label icons, integrate photos with content.
• Design: Logical approach, progressive disclosure, consistency, and ensure functionality.

Questions and Interaction

• Guidelines for layouts: Keep it simple, use a grid-based approach.
• Interactivity: Keep it intuitive, guide users on how to interact with elements like tables.

Closing Remarks

• Emphasized the importance of making websites that are usable and "not ugly."