DrupalCon 2019 Recap
I attended so many great sessions at DrupalCon 2019 in Seattle. Here are some highlights from my favorites:
Get with the pattern: a path to better content architecture
Jay Callicott, VP of Technical Operations at Mediacurrent
Justin Rent, UI/UX Designer at Mediacurrent
Jay and Justin’s presentation covered some of the common Drupal pitfalls of content architecture and provided suggestions for how to structure and organize content more effectively.
RECAP: Some of the most common problems in Drupal content architecture include having too many content types and taxonomies, too many similar entity structures (nodes, custom blocks, paragraphs), and poorly named or redundant fields. To rectify this, the presenters recommended adopting ‘atomic design’ methodologies to guide content patterns. By working from atoms up to pages, we are able to isolate and workshop various elements before joining them to create an organized page of content.
Design Strategies: Our Process for Building User-Centered Websites
Valerie Neumark Mickela, Board Member at Full Circle Funds
Andrew Goldsworthy, Co-Founder at Rootid
Valerie and Andrew explored how we can ensure we are building websites with users in mind. They underlined the importance of the research discovery process when reviewing your target audience. Questions to ask include: Who does your audience trust? Where do they get their information from generally? What do they care about? What do you want from them? What type of conversion do you seek? Once you’ve answered these questions, you can begin grouping like-minded audience members together and identify themes and motivations for your users. The presenters recommended working backwards from your website conversions, using Google Analytics segments to learn about user behavior and trends, analyzing data by marketing channels, and really focusing in on audience motivations. Creating personas is a useful step in building user-centered websites as you can more readily identify pain points and rank what is most important to each type of persona. These steps all help to inform decisions for formatting your site structure.
What’s for Dinner? Using Predictive UX to Help Users Decide
Lauren Motl, Senior UX Designer at Elevated Third
Gurwinder Antal, Drupal Developer at Elevated Third
Lauren and Gurwinder tackled the super cool topic of predictive UX and how that will change (and is changing) the web design landscape. They see UX design moving toward augmented personalization that use patterns to anticipate user needs and wants.
RECAP: Predictive UX can reduce the amount of choices a person has to make, thereby improving their overall experience. Machine learning, the science of getting computers to learn, and improve without being explicitly programmed to do so, is the engine that powers this movement. Platforms like Netflix, Hulu, and Amazon are already utilizing this technology to tailor experiences to the user. There are two main types of recommendation systems in use: content-based recommendations (recognizes the characteristics --ex: genre-- of an item and recommends similar items); and collaborative filtering (based on preferences of users with similar tastes – the characteristics of items are not important). It’s quite common to have hybrid recommender systems that use both content-based and collaborative filtering to offer the best experience for a user. To build effective predictive UX experiences, the presenters recommend minimal interfaces with just enough content and design elements. This reduces the overall cognitive load for users and allows them to only focus on the relevant things. It’s important to note that predictive doesn’t equal control. Users still need to feel ‘in control’ of things – so having the option of customizing the level automation they want to have is important.
Improving the User Journey: UX Toolkit for Front-End Development
Suzanne Dergacheva, Co-Founder and Front-End Developer at Evolving Web
Another great UX session was led by Suzanne Dergacheva. Suzanne presented on a multi-faceted approach to UX and outlined some effective methods for designing an effective interface.
RECAP: The goal isn’t to make users happy but to find the intersection between what users want and what the business wants to achieve. It’s important to define who we are building this experience for and to identify what we already know about our users. What do we want them to do? Surveys are one easy way to collect data on users and usually require minimal time and resources to execute. Key questions to ask include:
· What tasks do you perform on the website?
· What do you like about using it?
· What is challenging about using it?
· What do you think can be improved?
Suzanne recommends doing user testing with other existing interfaces first to see what works well for your ‘competitors’ or peer institutions, what doesn’t work, and what to avoid. It’s also important to learn how different types of users interact with your website and where the ‘most important’ ones go. These journeys help inform the sitemap, information architecture, navigation, and visual weights. Users judge their digital experiences through:
· Timing – how long do things take to load? Do I have to wait?
· Predictability – do I get what I expected?
· Simplicity – how many steps does it take to get what I need?
· Tone – what’s the tone of voice, ambiance, and language?
· Empathy – do I feel a connection or allegiance
· Success/Failure – do I achieve my goal?
Prototyping: Invision, Figma, Axure
General: Google Forms, Google Analytics
Online testing: usertesting.com, usabilityhub.com, optimalworkshop.com, Optimizely.com, lookback.io
Making Your Website Faster by Saving Images Correctly
Jessica Tate, Art Director at ThinkShout
Jessica’s presentation on saving images for the web was incredibly useful and something I can apply right away to help site speed and performance.
RECAP: Approximately 60% of the internet is weighed down with images, which is why it’s important to optimize your images for speedier load times. Main types of image files are JPG, PNG, GIF, SVG.
JP(E)G – Joint Photographic Experts Group; best used for full color photography (will compress best); lossy compression happens with jpgs but it isn’t usually visible on a website
PNG – Portal Network Graphic; for use when there aren’t a lot of colors on an image (3-4); supports transparency, though this can make an image more weighty; lossless compression
GIF – Graphic Interchange Format; usually only used when you need to animate something; sometimes used with simple graphics
SVG – Scalable Vector Graphics; creates crisp and clean icons/logos; supports interactivity and animation; can be edited with CSS
The goal is to get your image as small as possible without losing quality. Don’t go beyond a certain size (max 2000px, for instance); don’t try to squeeze a high res picture into a small space; use pixels to crop your images; DPI is only related to print images (you only need to care about height and width on the web); max 100-200kb for image saves