Visual Design Patterns

How do patterns elevate your #designsystem? During our recent #InspectAndReflect session, Jon Reidy shared insights into the role of patterns as a higher-level guide within design systems. Key highlights: 1️⃣ Patterns vs. Components: → While components focus on individual elements (e.g., action menus or action bars), patterns provide a holistic view of when and how to use those components in specific contexts. → Patterns are not tied to code but serve as usage guidelines, helping teams make informed decisions about selecting and applying components. 2️⃣ The Power of Patterns: → Patterns clarify contextual usage, such as when to use an action menu versus an action bar, reducing confusion and ensuring consistency across experiences. → They provide a higher-level definition that connects the dots between components and their practical application within a product. 💡 My Thoughts: I believe that patterns offer an incredible opportunity to involve product management expertise in #designsystems. By documenting patterns not just as part of the user experience but also alongside product metrics, you can show how certain patterns perform—like their impact on activation flows or conversions. Another exciting opportunity is to bring in QA teams. They could share their Gherkin Given-When-Then scripts, which align patterns with real-world testing scenarios. And looking to the future, imagine AI recognizing patterns at scale, suggesting new ones based on usage data and QA feedback. Exciting times ahead! ‼️ Don’t Miss It: Our next Inspect and Reflect session focuses on the IBM Carbon Design System—details in my profile. Join us! How do you approach documenting and applying patterns in your design system? Let’s share ideas in the comments!

🍰 F-Shape Pattern And How Users Read. Why the F-pattern is harmful for users and businesses, how to prevent it and what to aim for instead ↓ ✅ Users rarely read on the web: they mostly scan. ✅ Chunks of unformatted text cause F-Shape scanning. ✅ Users spend 80% of time viewing the left half of a page. ✅ They read horizontally, then skip to content below. 🤔 Often it’s highly inefficient, and bad for businesses. 🤔 Users miss large chunks of content and skip key details. 🚫 F-Pattern isn’t the only scanning pattern on the web. ✅ Good formatting reduces the impact of F-scanning. ✅ Add headings/subheadings for structured scanning. ✅ For engagement, alternate sizes, spacing, patterns. ✅ For landing pages, alternate points of interest. ✅ Visually group small chunks of related content. ✅ Front-load heading with keywords and key points. ✅ Keep headers floating in large, complex data tables. ✅ Add useful visuals to give users’ points to anchor to. 🤔 Horizontal attention leans left: favor top/left navigation. There are different scanning patterns on the web: ✤ F-Pattern Users first read horizontally, then read less and less, until they start scanning vertically. First lines of text and first words on each line receive more attention. ✤ Layer-Cake Pattern Users scan consistently across headings, with deliberate jumps into body text in-between. Most effective way to scan pages and find key content details. ✤ Love-at-First-Sight Pattern Users are often “satisficers”, searching for what’s good enough, not exhaustive enough. In search results, they often fixate on a single result, and nothing else. ✤ Lawn-Mower Pattern In tables, users start in the top left cell, move to right until the end of the row, then drop down to the next row, moving in the same pattern. ✤ Spotted Pattern Skipping big chunks of text and focusing on patterns. Often happens in search when users look for specific words, shapes, links, dates etc. ✤ Marking Pattern Eyes focus in one place as the mouse scrolls or a finger swipes. Common on mobile more than on desktop. ✤ Bypassing Pattern Users deliberately skip first words of the line when multiple lines start with the same word. ✤ Commitment Pattern Reading the entire content, word-by word. Happens when users are highly motivated and interested. Common for older adults. Prevent F-shaped scanning if you can. Think of it as user’s fallback behavior if the design doesn’t guide a user through the content well enough. At least, give users anchors to move to E-shaped scanning. At best, direct their attention to relevant sections with the Layer Cake scanning. Useful resources: How People Read Online, by Kate Moran https://lnkd.in/e2Sy82Gv Layer-Cake Pattern of Scanning, by Kara Pernice https://lnkd.in/eb6tgST8 Horizontal Attention Leans Left, by Therese Fessenden https://lnkd.in/eBA6hVBN [continues in comments]

Have you ever looked at a well-designed dashboard or data viz, and tried to explain EXACTLY what makes it so effective? It's trickier than you might think. There are the obvious things like colors, layouts, imagery and chart types, but those only tell part of the story. Ultimately what matters most is PERCEPTION. Building a dashboard is equal parts psychology and design, and requires an understanding of how humans process and interpret information. The difference between an average dashboard and a great one can be tough to pinpoint, but it often comes down to things like: 👉 Enclosure 👉 Similarity 👉 Continuity 👉 Closure 👉 Connection 👉 Proximity 👉 Symmetry These are known as Gestalt Principles, which describe how we group visual elements, recognize patterns, and simplify complex information. While they are traditionally used by graphic artists and UX designers, these principles are INCREDIBLY powerful tools for data visualization as well. Do you use Gestalt Principles for data viz? Let me know in the comments! #datavisualization #gestalt #dashboarddesign #businessintelligence #data #careers

An important dimension of learning design is communication through the elements on the slide, screen, and page—the images, text, and graphic space. The arrangement of these elements transmits a secondary message through its visual hierarchy. A visual hierarchy establishes the relative importance of each object on display. It controls where a viewer looks first, second, and third. Step back and determine what is most important for the learner or viewer to see first, second, and third. Then use one or more of these strategies to establish a visual hierarchy. 1) Use size to emphasize the most important element first. Larger sized elements draw attention. Save the smaller elements for lower levels of the hierarchy. 2) Use bright and vivid colors at the top of the visual hierarchy and more muted colors for the second and third levels. 3) Position on the screen affects hierarchy. People who read from left to right enter a screen or page at the upper left, making it prime real estate. 4) Users typically follow a Z-shaped reading pattern (for simpler layouts) or F-shaped pattern (for text-heavy pages), so place key elements along one of these paths to maximize visual impact. 5) Use high-contrast colors, shapes, or textures to grab attention and create a focal point at the top of the hierarchy. 6) Use white space to isolate and highlight important elements to create a visual hierarchy. 7) Use leading lines and arrows to guide the viewer's eye to key visual elements. Tomorrow: Establishing a Typographical Hierarchy