Every year and even every few months, new design trends pop up. Personally, I love watching other creative people devise new takes on design. Today, we’ll discuss 6 up…
Every year and even every few months, new design trends pop up. Personally, I love watching other creative people devise new takes on design. Today, we’ll discuss 6 up…
(This is a sponsored article.) Designers have a strange relationship with trends. On the one hand, when designers follow a crowd, they might feel that they aren’t able to express enough creativity. On the other hand, trends can tell designers a lot about user preferences — what people love, what they hate — and ultimately help designers to create products with better adoption rates.
People are visual creatures, and visual design has a significant impact on the way we understand products. In this article, I want to focus on the most crucial web design trends and illustrate each trend using Be Theme, a responsive multipurpose WordPress theme.
Let’s get started.
Digital illustrations have become one of the most important trends in visual design. Relevant illustrations can make your design stand out from a crowd and establish a truly emotional connection with visitors. Illustrations are quite a versatile tool; product designers can use digital illustrations for various purposes: for hero sections, for feature descriptions, or even as a subtle icon in the navigation bar.
Two types of illustrations are popular among digital designers: hand-drawn flat illustrations and three-dimensional ones. Flat hand-drawn ones give an impression of fine craftsmanship, of a hand-made design; it’s relatively easy to see the personal style of the illustrator through their work. Slack, Intercom and Dropbox are just a few companies that use flat hand-drawn illustrations.
Three-dimensional illustrations are quite a new trend. Designers started using them to add more realism, blurring the boundary between the digital and physical worlds.
There is a reason why so many digital product designers strive to use vibrant colors: Vibrant colors give visual interest to a layout. User attention is a precious resource, and one of the most effective ways to grab attention is by using colors that stand out. Bright colors used for the background can capture the visitor’s attention and contribute to a truly memorable experience.
“Show, don’t tell” is a foundational principle of good product design. Imagery plays a key role in visual design because it helps the designers to deliver the main idea quickly.
For a long time, web designers have had to use static imagery to convey their main idea. But the situation has changed. High-speed connections make it much easier for web designers to turn their home pages into immersive movie-style experiences. Video engages users, and users are more willing to spend time watching clips. Video clips used in a hero section can vary from a few seconds of looped video to full-length preview clips with audio.
Split screen is a relatively simple design technique. All you need to do to create one is divide the screen into two parts (usually 50/50) and use each part to deliver a distinct message. This technique translates well on mobile; two horizontal panels of content can be collapsed into vertical content blocks on small screens. The technique works well when you need to deliver two separate messages, as shown below.
It also works well when you have to pair a text message with relevant imagery:
Designers can use geometric shapes and patterns endlessly to create beautiful ornaments. This technique works equally well for digital products. Designers can use SVG images and high-resolution PNGs with geometric patterns as backgrounds. Such backgrounds scale well, so you won’t have to worry about how they will look on small and large displays.
Gradients are the multipurpose tool that works in pretty much any type of design. Designers often use gradients to give their work a little more depth. Modern graphic design trends dictate the use of big, bold and colorful gradients, which help designers make a statement.
When it comes to gradients, designers have a lot of creative freedom. They can experiment with various colors and types, using radial gradient, linear gradients, etc. For example, this is what happens when you put a linear one-color gradient overlay on a photo:
And this is how a radial two-color gradient looks on a plain background:
The duotone effect was made popular by Spotify, the online music-streaming service. The service was searching for a bold identity for its brand and decided to use duotones in its design.
In the simplest terms, duotones are filters that replace the whites and blacks in a photo with two colors. Duotones can make almost any image match your company’s branding; simply use your brand’s primary color as the duotone filter.
Most designers know that content should always come first in the design process. A design should honor the message that the product’s creators want to deliver to their users. Bold typography helps designers to achieve that. Massive, screen-dominating text puts the written content center stage.
Bold fonts serve a functional purpose — they make it easy to read the text. Consider the following example. This template is an excellent example of how powerful a bold font can be:
“Should I follow the trends?” As a designer, you have to answer that for yourself. But if you want to see how each trend works for your project, you can do it right now. All of the Be Theme examples listed above can serve as excellent starting points for your creative journey.
(This article is sponsored by Adobe.) Design systems come in all shapes and sizes, but as Sparkbox’s design system survey noted, not all of them include guidelines for animation. Sure, some teams may have decided that motion wasn’t something their product needed guidance on, but I suspect that in some cases motion was left out because they weren’t sure what to include.
In the past few years, I’ve talked with many teams and designers who admit they think motion is something they should address, but they just aren’t sure how. If you’re in that boat, you’re in luck. This article is all about what to include in a set of motion guidelines for your design system and how to pull it off.
Animation is an important design tool for both UX and brand messaging. Just like typography and color, the animation you use says something about your product and its personality. So, when it’s not addressed in a design system, that system essentially leaves that area of UI design tooling unaccounted for. Then people following the design system either do whatever they want with animation—which can lead to a strange mish-mash of animation execution across the experience—or, they just don’t use animation at all because they don’t have time to figure out all the details themselves. Neither case is ideal.
Having a clear stance on how animation is used (or not used) in your design system can help ensure your brand is using animation consistently and effectively while also helping your team work faster. Let’s dig in to get started on a set of motion guidelines for your design system.
As Jina Anne says, “Design systems are for people.” I’ve often heard the advice that talking to the people who will be using the design system you’re creating is key to making a design system people will actually use. That holds true for the guidelines you create around animation too. The biggest thing you can gain from this is finding out what they need and what to focus on. This helps you set an appropriate scope for what you need to cover in your guidelines. No one wants to spend hours on extensive guidelines that address more than your team will ever actually need. That wouldn’t be any fun (or use).
Your team may not tell you about their animation pain points unprompted, but that doesn’t mean they don’t have any. Set up some user interviews (the users of your design system) and ask them about where they get stuck with animation. Ask them how/if they use animation, and where animation falls in their design process. Ask them about what they wish they had to help with the pain points they encounter. Most importantly, listen to how they talk about using animation in their work and what goes well or not so well.
While every team is different, the concerns and questions I’ve heard most often when doing this research are things like: “How do I know an animation is good, or fits with our brand?”, “How can I convey the animation details to our engineers effectively?”,or “Our developers always say there’s no time to implement the animations we design.”
You’ve probably guessed where I’m going with this, but all of those concerns are things you can help provide answers to in your motion guidelines. And you can use the questions and pain points that come up most often to guide and focus your motion guideline efforts.
Not every design system has to be public, but it’s great that so many of them are. They make for a helpful resource when planning your design system, and they can be useful research for your design system’s motion guidelines too. (In fact, we’ll be referencing a few them in this very article.)
Using other motion sections as reference for your own design system is very helpful, but I don’t recommend adopting another brand’s motion guidelines wholesale in place of your own. No, not even if it’s Material Design’s motion guidelines.
Material Design’s motion section is Google’s take on motion guidelines. A good one, yes, but its aim is to show you how to animate the Google way. That’s perfect if you’re making something for the Google ecosystem (or intentionally wanting to seem like you are). But it’s not a good fit when that’s not your goal. You wouldn’t use another brand’s colors or typeface on your product, so don’t just follow another brand’s motion guidelines either.
The most effective design systems contain a branded point of view unique to them—things that make their design system more specific to the product they’re for—along with common design best practices. Spend a little time researching and reading through other systems’ motion guidelines, and you start to get a feel for which parts are best practices and which parts are customized to that brand or product’s point of view. Then you can decide which best practices you might also like to include in your guidelines, as well as where to customize the guidelines for your product.
For example, using ease-ins for exits and ease-outs for entrances is a common best practice for UI animation. But the exact ease-in or ease-out curve is usually customized to a brand’s intended message and personality.
To quote Dan Mall:
“This is the kind of thing a design system should have guidelines for: perspective, point of view, extending creative direction to everyone that decides to build something with the design system. That stuff should be baked in.”
I totally agree.
There’s no specific rule out there stating that you must have these two sections, but I’ve found this breakdown to be an effective way to approach the motion guidelines I’ve worked on. And I’ve also noticed that most design systems out there that address motion have these two categories as well, so it seems to be an approach that works for others too.
The two main sections are: principles and implementation. Principles are typically high-level statements that explain how that brand uses motion. They’re the big picture point of view or design intention behind why the brand uses animation and their perspective on it. The implementation section focuses on how to carry out those principles practically in design and/or code. It serves as the building blocks of animation for the design system, and the amount of detail they cover varies based on brand needs.
The principles section is where to state your brand values around animation. They’re the high-level principles to measure design decisions against, and a place to state some specific definitions or values around animation. Principles often tend to focus on the “why” of using animation within a particular design system and the UX-driven purpose they serve. In many cases, design systems list these under the heading of Principles in their motion section. However, you can see the concept of principles present in ones that don’t include a specific section for them as well.
Your motion principles can be modeled after existing global design principles that your brand might have, extrapolated from things like voice and tone guidelines, or even be inferred from looking at your product’s existing UI animations in a motion audit.
Let’s look at some examples to get a better idea of how these play out. Microsoft’s Fluent design system lists their motion principles as being physical, functional, continuous, and contextual. They include a short description and illustration of each to explain how it applies to UI animation.
Audi doesn’t have a separate principles section, but they start off their animation section with a declaration of why they use animation, which is setting the stage for what sort of motion is to be used in the design system, just like a principle would. They state:
“We stand for dynamic premium mobility. As such, movements in the Audi look have a typically dynamic character.”
While developing the motion section for Spectrum, Adobe’s design system, we opted for a principles section to match the pattern used in other sections of the system. Within Spectrum, animation aims to be purposeful, intuitive, and seamless.
Note: Spectrum does not have a publicly available site at the time of writing.
No matter how you decide to present them, your design system’s animation principles can be used to both establish the system’s expectation around animation and to evaluate potential future UI animation for the product(s) the design system is applied to. For example, if a designer following the Fluent design system wanted to introduce a large bouncing animation into a component, there could be discussion around whether that meets the motion principles. (Does it fit the principles of functional and continuous?) Then a decision could be made as to whether or not that particular animation warranted breaking from the stated principles, or if the animation should be redesigned to fit the principles.
This helps to keep the design discussions away from the “do you like it?” or personal opinion realm and gives a structure for evaluating animation in a more pragmatic design-oriented way. That’s my favorite advantage of having declared motion principles; they make discussing animation meaningfully so much easier, even for people who don’t have a lot of animation experience.
Quick Tip: For more motion principles references, check out Photon’s motion principles, Material Design motion principles and Carbon’s motion principles. There are also others out there, but these are a good start.
Motion principles are great for some high-level guidance, but without some details on exactly how to implement them, you’ll be missing the biggest time-saving benefits of including animation in your design system. The implementation section (though rarely actually titled as such) helps to answer many of the “how” and “what” questions your team has around animation. The objective is to provide smart defaults for anyone following the design system. That way, instead of spending ages playing around with durations and easing for every animation, they can use the smart defaults you’ve provided in the guidelines and be on their way. It’s a huge timesaver that also makes your UI animation much more consistent across the board.
The implementation guidelines are where a lot of design systems diverge in their approach and coverage. The amount of detail you include and the topics you cover in these guidelines will depend on how big of a role animation plays in your design efforts and what your team needs. For example, Photon’s implementation section includes just one duration and one easing curve, while Material Design’s includes individual sections on duration and easing as well as additional pages full of implementation details.
There’s no perfect length for a motion section; it’s more about covering the details your team needs than hitting a specific number of pages or rules. Some of the animation building blocks to consider including in your motion guidelines are:
The first three in the list are the main ways we customize or style animation. Variations in the properties, durations, and easings used for animation can drastically affect how animations come across. (And the last one is a way of packing up the first three.)
Let’s dig into each in more detail, and for each of these I’ll point out some of the common best practices and where there’s room for your own customized interpretation.
Duration has to do with how long animations should be, and when we’re talking about UI animation, these values tend to be very short. It’s amazing how much information we can convey in fractions of a second! This is a key aspect of animation, so every design system with motion guidelines covers it, but they do it in a variety of ways.
Some of the best practices around duration that you’ll see addressed in most motion guidelines include:
Carbon provides a short table of ranges of duration values based on the type of animation in question. While Material Design breaks down recommendations on duration speed in categories based on the complexity of the animation, as well as by the relative area covered by the animation. Pluralsight takes a different approach and provides a set of keywords for different durations paired with cute animals.
My number one advice for easing guidelines is to create your own customized curves and don’t just use the CSS defaults. This is the most effective way to build some consistent motion association for your brand and as Sarah Drasner puts it: build “motion equity.” You’ll be on solid ground with just three curves: a custom eas-out, ease-in, and ease-in-out. And there’s always the option to add more if needed.
Quick Tip: If you’re totally stumped on where to start on easing curves, check out the Penner Easing equations on easings.net. These are designed to give you some nice looking motion and are grouped in threes for easy use. They’re much more expressive and flexible than the CSS defaults. Using a set of these in your motion guidelines can be a great place to start.
I recommend defining the three core easing curves because that will cover all your main easing needs for various animations.
With these three custom curves, you’ll have almost all your animation needs covered.
For Spectrum, we did exactly that and created three custom easing curves along with recommendations on which kinds of animation to use each for. (We came up with these curves through looking at existing animation and experimenting with some motion studies.)
Carbon and Pluralsight take a similar approach, designating three curves with suggested uses, as well as designating one as the default curve to use when in doubt. In some cases, you might only feel the need to have one custom easing curve (like Photon does) defining one curve for use across all animations.
Along with the easing curves, it’s helpful to provide some supporting information like associated design tokens, language-specific code (for CSS, JS, iOS and/or Android), or After Effects keyframe velocities depending on which tools your team uses. This adds to the ease of use and helps make following the smart defaults in your motion guidelines the path of least resistance.
A visual illustration of the curve and interactive examples of the curve are also a big plus for quickly demonstrating how the easing curves work and what they look like. Never underestimate the power of showing instead of telling. (Or showing along with telling!)
Including a hierarchy of easing is one way you can take things a little further than the three core custom curves. This can be especially useful for brands that use motion as a core method of conveying their design message. Just like with type, you may want a way to make certain animation stand out more than others. Animations that stand out more strongly can be used to emphasize a particular point or interaction. In these cases, structuring your easing curves so that you have one that is more dramatic to stand out from the others can be a useful technique.
At this point, armed with principles plus your durations and easing sections, you have a solid set of motion guidelines. That might be all you need for a version one of your motion guidelines, or for a brand that doesn’t rely heavily on motion in its design. If you’re pressed for time, establishing smart defaults for durations and easing will get far enough to see the benefits of establishing motion guidelines and save your team time.
Providing a listing of named effects or a library of animations to use can be a useful thing to have in your motion guidelines. Not all design system’s motion guidelines have these, some opt to bake the animation guidelines into their components instead (or as well), and some just don’t need this level of detail.
One word of caution on these though: more isn’t always better. It might look cool to have a huge library of animations as part of your design system, but the more effects you list, the more time and effort it will take to maintain those effects. To avoid creating a huge time sink for you and your team, I’d suggest making any collection of named effects as small as you possibly can.
There tend to be two approaches to providing a library of effects in motion guidelines. One approach is the way the Lightning design system does it, providing a library of small animation effects (molecules of animation, if you will) that can be used individually or composed together to build up more complex animations.
The other approach is to provide more comprehensive and purpose-specific effects like Audi does for its show and hide, transform, shift, and superimposing effects and Fluent does for its page transition effects. For either approach, providing the design rationale and specific code implementations for each is useful.
Quick Tip: If you’re looking for additional motion guidelines for research, Adele is a design system collection that lets you filter by topics like motion, and styleguides.io is always a great resource for finding public design systems too.
Design systems come in all shapes and sizes. And in many cases these animation guidelines are also baked into the DNA or components of your design systems. Digging into how to do that is beyond the scope of what we’re covering here, but I do want to note that can also be useful to include animation information on component-specific pages instead of in a named effects section. It all depends on what works best for your team and your design system.
Additionally, it might be useful to call out performance and accessibility considerations for animation either in those sections of your design system, in guidelines for components, or in the motion section itself. Performance and accessibility goals affect all aspects of our design work, and animation is no exception there.
I hope this article has helped to show that including motion guidelines in your design system can be incredibly useful, and helped to demystify the process of creating one. Addressing animation in your design system can be beneficial to the consistency of your product’s design and doesn’t have to be an overly time-consuming effort.
As you’re working on your motion guidelines, I encourage you to work in stages instead of waiting for your motion guidelines to be perfect. Shipping a version one with the intention of adding to it and updating it is much easier on you, the person or people authoring the guidelines, and can help you make sure you’re creating guidelines that are useful.
As hard as it can be to share something that you know is missing some detail, it can be hugely useful to ship a version one of your motion guidelines then talk to your team again to see how the first version of the guidelines has helped them and which pain points are still a factor. This iterative approach can go far towards making your guidelines cover the most relevant topics, and lets you adapt them to your team’s needs. Both are good for having a system that’s useful and avoiding unnecessary extra effort.
This article is part of the UX design series sponsored by Adobe. Adobe XD is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.
Tables are a design pattern for displaying large amounts of data in rows and columns, making them efficient for doing comparative analysis on categorical objects. Tables have been used for this purpose as early as the 2nd century and when the world started to go digital, tables came along with us.
It was inevitable that the web would support the display of data in a tabular format. HTML tables present tabular data in a semantic and structurally appropriate manner. However, the default styles on HTML tables are not exactly the most aesthetically pleasing thing you’ve ever seen. Depending on the desired visual design, some effort was required on the CSS front to prettify those tables. A decade ago, an article with the “Top 10 CSS Table Designs” was published on Smashing Magazine, and it still continues to get a lot of traffic to this day.
The web has evolved a lot over the past decade, and it’s more convenient than ever to make your site or application adapt to the viewport it is viewed in. That being said, we have to continue to make considered design choices that do not compromise on accessibility. Since tables don’t seem to be falling out of favor anytime soon, let’s see how tables can be created on the web in 2019.
We’re going to start off with a low-effort scenario. If your data fits in a table with only a few columns and lots of rows, then such a table is pretty much mobile-ready to begin with.
The issue you’d have is probably having too much room on wider screens, so it might be advisable to “cap” the maximum width of the table with a
max-width while letting it shrink as necessary on a narrow screen.
This sort of a pattern works best if your data itself isn’t lines and lines of text. If they are numeric, or short phrases, you can probably get away with not doing much.
David Bushell wrote up his technique for responsive tables back in 2012, which involved invoking overflow and allowing users to scroll to see more data. One could argue that this isn’t exactly a responsive solution, but technically, the container is responding to the width of the viewport.
Let’s look at the “basic” overflow first. Imagine me using air-quotes around basic, because the styling for the scrolling shadows is anything but. Still, in this instance, “basic” refers to the fact that the table does not transform in any way.
This technique for doing scrolling shadows comes from Roma Komarov and Lea Verou riffing off each other’s ideas to create magic. It hinges on using multiple gradients (linear and radial) as background images on the containing element, and using
background-attachment: local to position the background relative to its contents.
What’s nice about this technique is that for browsers that don’t support scrolling shadows, you can still scroll the table as per normal. It doesn’t break the layout at all.
Another scrolling option would be to flip the table headers from a row configuration to a column configuration, while applying a horizontal scroll onto the
<tbody> element’s contents. This technique leverages Flexbox behavior to transform the table’s rows into columns.
display: flex to the table, it makes the
<tbody> both flex children, which are by default laid out next to each other on the same flex line.
We also make the
<tbody> element a flex container, thus making all the
<tr> elements within it flex children laid out in a single flex line as well. Lastly, every table cell has to have their display set to
block instead of the default
The advantage of this technique is that the headers are always in view, like a fixed header effect, so users don’t lose context as they scroll through the columns of data. One thing to take note of is that this technique results in a discrepancy of the visual and source order, and this makes things slightly unintuitive.
As mentioned earlier, layout options that involving morphing the table by modifying
display values sometimes have negative implications for accessibility, which require some minor DOM manipulation to rectify.
If you’re working with a relatively simpler dataset, perhaps you would like to write your own functions for some of these features.
As far as I know of, this responsive data table technique came about from the CSS-Tricks article “Responsive Data Tables” by Chris Coyier back in 2011. It has since been adapted and expanded upon by many others.
The gist of this technique is to make use of a media query to switch the display property of the table element and its children to
block on a narrow viewport.
On a narrow screen, the table headers are visually hidden, but still exist in the accessibility tree. By applying data attributes to the table cells, we can then display labels for the data via CSS, while keeping the content of the label in the HTML. Please refer to the CodePen below for how the mark-up and styles look like:
The original method applies a width on the pseudo-element displaying the label text, but that means you’d need to know the amount of space your label needed to begin with. The above example uses a slightly different approach, whereby the label and data are each on opposite sides of their containing block.
We can achieve such an effect via auto-margins in a flex formatting context. If we set the display property for each
<td> element to flex, because pseudo-elements generate boxes as if they were immediate children of their originating element, they become flex children of the
After that, it’s a matter of setting
margin-right: auto on the pseudo-element to push the cell’s content to the far end edge of the cell.
Another approach doing the narrow viewport layout is using a combination of Grid and
display: contents. Please note that
display: contents in supporting browsers has issues with accessibility at the moment, and this method shouldn’t be used in production until those bugs are fixed.
But maybe you’re reading this after those bugs have been resolved, in that case, here’s an alternative layout option.
<tr> element is set to
display: grid, and each
<td> element is set to
display: contents. Only the immediate children of a grid container participate in a grid formatting context; in this case, it’s the
display: contents is applied to the
<td>, it gets “replaced” by its contents, in this case, the pseudo-element and the
<span> within the
<td> become the grid children instead.
What I like about this approach is the ability to use
max-content to size the column of pseudo-elements, ensuring that the column will always be the width of the longest label, without us having to manually assign a width value for it.
In future, when the sizing values of
fit-content (covered by the CSS Intrinsic & Extrinsic Sizing Module Level 3) are supported as general
height values, we’ll have even more options for laying things out.
The downside to this approach is you do need that additional
<p> around the content in your table cell if it didn’t have one already, otherwise, there’d be no way to apply styles to it.
This example shows a basic pagination implementation that was modified off this CodePen by Gjore Milevski to paginate on table rows instead of divs. It is an extension of the “style the scroll” example discussed in the previous section.
From a layout perspective, Flexbox comes in very handy for positioning the pagination elements across various viewport sizes. Different project designs will have different requirements, but the versatility of Flexbox should allow you to cater for these differences accordingly.
In this case, the pagination is centred on the page and above the table. The controls for navigating backward and forward are placed on either side of the page indicators on wider screens, but all four appear above the page indicators on narrow screens.
We can do this by levaraging the
order property. Visual reordering of content should always be done with consideration because this property does not change the source order — only how it appears on screens.
It would be useful to have some sort of indicator of which column is currently being sorted and in what order. We can do that with the addition of CSS classes which can then be styled however you want. In this case, the indicator symbols are pseudo-elements that are toggled when the target header is clicked.
This example is a basic filtering functionality that iterates through all the textual content of each table cell and applies a CSS class to hide all rows that do not match the search input field.
Such an implementation is relatively naive, and if your use case calls for it, it might make sense to search per column instead. In that scenario, it might be a good idea to have each input field as part of the table in their respective columns.
The column toggle pattern is one whereby non-essential columns are hidden on smaller screens. Normally, I’m not a fan of hiding content simply because the viewport is narrow, but this approach by Maggie Costello Wachs of Filament Group resolves that qualm of mine by providing a drop-down menu which allows users to toggle the hidden columns back into view.
The above article was published back in 2011, but Filament Group has since developed a full suite of responsive table plugins known as Tablesaw, which includes features like sorting, row selection, internationalization and so on.
The column toggle feature in TableSaw also no longer depends on jQuery, unlike the examples from the original article. Tablesaw is one of the only libraries I could find that does not have a dependency on jQuery at the moment.
There is a myriad of table design patterns out there, and which approach you pick depends heavily on the type of data you have and the target audience for that data. At the end of the day, tables are a method for the organization and presentation of data. It is important to figure out which information matters most to your users and decide on an approach that best serves their needs.
Why is Google the search behemoth it is today? Part of the reason is because of how it’s transformed our ability to search for answers.
Think about something as simple as looking up the definition of a word. 20 years ago, you would’ve had to pull your dictionary off the shelf to find an answer to your query. Now, you open your phone or turn on your computer, type or speak the word, and get an answer in no time at all and with little effort on your part.
This form of digital shortcutting doesn’t just exist on search engines like Google. Mobile apps now have self-contained search functions as well.
Is a search bar even necessary in a mobile app interface or is it overkill? Let’s take a look at why the search bar element is important for the mobile app experience. Then, we’ll look at a number of ways to design search based on the context of the query and the function of the app.
Did you know that VoiceOver makes up 11.7% of desktop screen reader users and rises to 69% of screen reader users on mobile? It’s important to know what sort of first-hand difficulties visually impaired users face and what web developers can do to help. Read article →
The search bar has been a standard part of websites for years, but statistics show that it isn’t always viewed as a necessity by users. This data from Neil Patel and Kissmetrics focuses on the perception and usage of the search bar on e-commerce websites:
As you can see, 60% of surveyed users prefer using navigation instead of search while 47% opt for filterable “search” over regular search functionality.
On a desktop website, this makes sense. When a menu is well-designed and well-labeled — no matter how extensive it may be — it’s quite easy to use. Add to that advanced filtering options, and I can see why website visitors would prefer that to search.
But mobile app users are a different breed. They go to mobile apps for different reasons than they do websites. In sum, they want a faster, concentrated, and more convenient experience. However, since smartphone screens have limited space, it’s not really feasible to include an expansive menu or set of filters to aid in the navigation of an app.
This is why mobile apps need a search bar.
You’re going to find a lot of use for search in mobile apps:
There are plenty more reasons why you’d need to use a search bar on your mobile app, but I’m going to let the examples below speak for themselves.
I’m going to break down this next section into two categories:
There are a number of points to consider when it comes to the physical presence of your app search element:
Shashank Sahay explains why there are two places where the search element appears on a mobile app:
Facebook is a good example. Although Facebook users most likely do engage with the news feed in the app, I have a sneaking suspicion that Facebook’s data indicates that the search function is more commonly engaged with — at least in terms of first steps. Hence, why it’s placed at the top of the app.
Let’s contrast Facebook against one of its sister properties: Instagram. Unlike Facebook, Instagram is a very simple social media app. Users follow other accounts and get glimpses into the content they share through full-screen story updates as well as from inside their endless-scroll news feed.
With that said, the search function does exist in the navigation bar so that users can look up other accounts to peruse through or follow.
As far as this basic breakdown goes, Sahay is right about how placement of search correlates with intention. But the designing of the search element goes beyond just where it’s placed on the app.
There will be times when a mobile app would benefit from a search function deep within the app experience.
You’ll see this sort of thing quite often in e-commerce apps like Bed Bath & Beyond:
In this example, this search function exists outside of the standard product search on the main landing page. Results for this kind of search are also displayed in a unique way which is reflective of the purpose of the search:
There are other ways you use might need to use “deep” search functions on e-commerce apps.
Think about stores that have loads of comments attached to each product. If your users want to zero in on what other consumers had to say about a product (for example, if a camping tent is waterproof), the search function would help them quickly get to reviews containing specific keywords.
You’ll also see deep searches planted within travel and entertainment apps like Hotels.com:
You’re all probably familiar with the basic search function that goes with any travel-related app. You enter the details of your trip and it pulls up the most relevant results in a list or map format. That’s what this screenshot is of.
However, see where it says “Property Name” next to the magnifying glass? This is a search function within a search function. And the only things users can search for here are actual hotel property names.
This brings me to my next design point: how to know which design element to represent the search function with.
You’ve already seen clear reasons to use a full search bar over placing a tab in the navigation bar. But how about a miniaturized magnifying glass?
Here’s an example of how this is used in the YouTube mobile app:
The way I see it, the magnifying glass is the search design element you’d use when:
In this case, YouTube needs the mini-magnifying glass because it serves two types of users:
To conserve space, links to both exist within the header of the YouTube app. If you have competing priorities within your app, consider doing the same.
One other thing to think about when designing search for mobile apps is the text inside the search box. To decide this, you have to ask yourself:
“Will my users know what sort of stuff they can look up with this search function?”
In most cases they will, but it might be best to include hint text inside the search bar just to make sure you’re not adding unnecessary friction. Here’s what I mean by that:
This is the app for Airbnb:
The search bar tells me to “Try ‘Costa de Valencia’”. It’s not necessarily an explicit suggestion. It’s more helping me figure out how I can use this search bar to research places to stay on an upcoming trip.
For users that are new to Airbnb, this would be a helpful tip. They might come to the site thinking it’s like Hotels.com that enables users to look up things like flights and car rentals. Airbnb, instead, is all about providing lodging and experiences, so this search text is a good way to guide users in the right direction and keep them from receiving a “Sorry, there are no results that match your query” response.
Figuring out where to place the search element is one point to consider. Now, you have to think about how to present the results to your mobile app users:
This is the most basic of the search functions you can offer. Users type their query into the search bar. Relevant results appear below. In other words, you leave it up to your users to know what they’re searching for and to enter it correctly.
When a relevant query is entered, you can provide results in a number of ways.
For an app like Flipboard, results are displayed as trending hashtags:
It’s not the most common way you’d see search results displayed, but it makes sense in this particular context. What users are searching for are categories of content they want to see in their feed. These hashtagged categories allow users to choose high-level topics that are the most relevant to them.
ESPN has a more traditional basic search function:
As you can see, ESPN provides a list of results that contain the keyword. There’s nothing more to it than that though. As you’ll see in the following examples, you can program your app search to more closely guide users to the results they want to see.
According to the aforementioned Kissmetrics survey, advanced filtering is a popular search method among website users. If your mobile app has a lot of content or a vast inventory of products, consider adding filters to the end of your search function to improve the experience further. Your users are already familiar with the search technique. Plus, it’ll save you the trouble of having to add advancements to the search functionality itself.
Yelp has a nice example of this:
In the search above, I originally looked for restaurants in my “Current Location”. Among the various filters displayed, I decided to add “Order Delivery” to my query. My search query then became:
Restaurants > Current Location > Delivery
This is really no different than using breadcrumbs on a website. In this case, you let users do the initial work by entering a search query. Then, you give them filters that allow them to narrow down their search further.
Again, this is another way to reduce the chances that users will encounter the “No results” response to their query. Because filters correlate to actual categories and segmentations that exist within the app, you can ensure they end up with valid search results every time.
e-Commerce websites are another good use case for filters. Here is how Wayfair does this:
Wayfair’s list of search results is fairly standard for an e-commerce marketplace. The number of items are displayed, followed by a grid of matching product images and summary details.
Here’s the thing though: Wayfair has a massive inventory. It’s the same with other online marketplaces like Amazon and Zappos. So, when you tell users that their search query produced 2,975 items, you need a way to mitigate some of the overwhelm that may come with that.
By placing the Sort and Filter buttons directly beside the search result total, you’re encouraging users to do a little more work on their search query to ensure they get the best and most relevant results.
Autocomplete is something your users are already familiar with. For apps that contain lots of content, utilizing this type of search functionality could be majorly helpful to your users.
For one, they already know how it works and so they won’t be surprised when related query suggestions appear before them. In addition, autocomplete offers a sort of personalization. As you gather more data on a user as well as the kinds of searches they conduct, autocomplete anticipates their needs and provides a shortcut to the desired content.
Pinterest is a social media app that people use to aggregate content they’re interested in and to seek out inspiration for pretty much anything they’re doing in life:
Take a look at the search results above. Can you tell what I’ve been thinking about lately? The first is how I’m going to decorate my new apartment. The second is my next tattoo. And despite only typing out the word “Small”, Pinterest immediately knew what’s been top-of-mind with me as of recent. That doesn’t necessarily mean I as a user came to the app with that specific intention today… but it’s nice to see that personalized touch as I engage with the search bar.
Another app I engage with a lot is the Apple Photos app:
In addition to using it to store all of my personal photos, I use this on a regular basis to take screenshots for work (as I did in this article). As you can imagine, I have a lot of content saved to this app and it can be difficult finding what I need just by scrolling through my folders.
In the example above, I was trying to find a photo I had taken at Niagara Falls, but I couldn’t remember if I had labeled it as such. So, I typed in “water” and received some helpful autocomplete suggestions on “water”-related words as well as photos that fit the description.
I would also put “Recent Search” results into this bucket. Here’s an example from Uber:
Before I even had a chance to type my search query in the Uber app, it displays my most recent search queries for me.
I think this would be especially useful for people who use ride-sharing services on a regular basis. Think about professionals who work in a city. Rather than own a car, they use Uber to transport to and from their office as well as client appointments. By providing a shortcut to recent trips in search results, the Uber app cuts down the time they spend booking a trip.
If you have enough data on your users and you have a way to anticipate their needs, autocomplete is a fantastic way to personalize search and improve the overall experience.
I think this time savings point is an important one to remember when designing search for mobile apps.
Unlike websites where longer times-on-page matter, that’s not always the case with mobile apps. Unless you’ve built a gaming or news app where users should spend lots of time engaging with the app on a daily basis, it’s not usually the amount of time spent inside the app that matters.
Your goal in building a mobile app is to retain users over longer periods, which means providing a meaningful experience while they’re inside it. A well-thought-out search function will greatly contribute to this as it gets users immediately to what they want to see, even if it means they leave the app just a few seconds later.
If you have an app that needs to get users in and out of it quickly, think about limiting search results as Ibotta has done:
While users certainly can enter any query they’d like, Ibotta makes it clear that the categories below are the only ones available to search from. This serves as both a reminder of what the app is capable of as well as a means for circumventing the search results that don’t matter to users.
Hotels.com also places limits on its search function:
As you can see here, users can’t just look for hotels throughout the country of Croatia. It’s just too broad of a search and one that Hotels.com shouldn’t have to provide. For one, it’s probably too taxing on the Hotels.com server to execute a query of that nature. Plus, it would provide a terrible experience for users. Imagine how many hotels would show up in that list of results.
By reining in what your users can search for and the results they can see, you can improve the overall experience while shortening the time it takes them to convert.
As you can see here, a search bar isn’t some throwaway design element. When your app promises a speedy and convenient experience to its users, a search bar can cut down on the time they have to spend inside it. It can also make the app a more valuable resource as it doesn’t require much work or effort to get to the desired content.
(This article is kindly sponsored by Adobe.) When you design the information architecture, the navigation bars of an application, or the overall layout and visual design of a product, then you are focusing on macro design. When you design (one part of a page, one form, or one single task and interaction), then you are focusing on micro-moment design.
In my experience, designers often spend a lot of time on macro design issues, and sometimes less so on critical micro-moment design issues. That might be a mistake.
Here’s an example of how critical micro-moment design can be.
I read a lot of books. We are talking over a hundred books a year. I don’t even know for sure how many books I read, and because I read so many books, I am a committed library patron. Mainly for reading fiction for fun (and even sometimes for reading non-fiction), I rely on my library to keep my Kindle full of interesting things to read.
Luckily for me, the library system in my county and in my state is pretty good in terms of having books available for my Kindle. Unluckily, this statewide library website and app need serious UX improvements.
I was thrilled when my library announced that instead of using a (poorly designed) website (that did not have a mobile responsive design), the library was rolling out a brand new mobile app, designed specifically to optimize the experience on a mobile phone. “Yay!” I thought. “This will be great!”
Perhaps I spoke too soon.
Let me walk you through the experience of signing into the app. First, I downloaded the app and then went to log in:
I didn’t have my library card with me (I was traveling), and I wasn’t sure what “Sign in with OverDrive” was about, but I figured I could select my library from the list, so I pressed on the down arrow.
“Great,” I thought. Now I can just scroll to get to my library. I know that my library is in Marathon County here in Wisconsin. In fact, I know from using the website that they call my library: “Marathon County, Edgar Branch” or something similar, since I live in a village called Edgar, so I figured that would be what I should look for especially since I could see that the list went from B (Brown County) to F (Fond du Lac Public Library) with no E for Edgar showing. So I proceeded to scroll.
I scrolled for a while, looking for M (in hope of finding Marathon).
Hmmm. I see Lone Rock, and then the next one on the list is McCoy. I know that I am in Marathon County, and that in fact, there are several Marathon County libraries. Yet, we seem to have skipped Marathon in the list.
I keep scrolling.
Uh oh. We got to the end of the list (to the W’s), but now we seem to be starting with A again. Well, then, perhaps Marathon will now appear if I keep scrolling.
You know how many libraries there are in Wisconsin and are on this list? I know because as I started to document this user experience I decided to count the number of entries on this list (only a crazy UX professional would take time to do this, I think).
There are 458 libraries on this list, and the list kept getting to the end of the alphabet and then for some reason starting over. I never did figure out why.
Finally, though, I did get to Marathon!
And then I discovered I was really in trouble since several libraries start with “Marathon County Public Library”. Since the app only shows the first 27 or so characters, I don’t know which one is mine.
You know what I did at this point?
I decided to give up. And right after I decided that, I got this screen (as “icing on the cake” so to speak):
Did you catch the “ID” that I’m supposed to reference if I contact support? Seriously?
This is a classic case of micro-moment design problems.
I can guess that by now some of you are thinking, “Well, that wouldn’t happen to (me, my team, an experienced UX person).” And you might be right. Especially this particular type of micro-moment design fail.
However, I can tell you that I see micro-moment design failures in all kinds of apps, software, digital products, websites, and from all kinds of companies and teams. I’ve seen micro-moment design failures from organizations with and without experienced UX teams, tech-savvy organizations, customer-centric organizations, large established companies and teams, and new start-ups.
Let’s pause for a moment and contrast micro-moment design with macro design.
Let’s say that you are hired to evaluate the user experience of a product. You gather data about the app, the users, the context, and then you start walking through the app. You notice a lot of issues that you want to raise with the team — some large, some small:
There are many ways to categorize user experience design factors, issues, and/or problems. Ask any UX professional and you will probably get a similar, but slightly different list. For example, UX people might think about the conceptual model, visual design, information architecture, navigation, content, typography, context of use, and more. Sometimes, though, it might be useful to think about UX factors, issues, and design in terms of just two main categories: macro design and micro-moment design.
In the example above, most of the factors on the list were macro design issues: inconsistencies in layout, color schemes, and information architecture. Some people talk about macro design issues as “high-level design” or “conceptual model design”. These are UX design elements that cross different screens and pages. These are UX design elements that give hints and cues about what the user can do with the app, and where to go next.
Macro design is critical if you want to design a product that people want to use. If the product doesn’t match the user’s mental model, if the product is not “intuitive” — these are often (not always, but often) macro design issues.
Which means, of course, that macro design is very important.
It’s not just micro-moment design problems that cause trouble. Macro design issues can result in massive UX problems, too. But macro design issues are more easily spotted by an experienced UX professional because they can be more obvious, and macro design usually gets time devoted to it relatively early in the design process.
If you want to make sure you don’t have macro design problems then do the following:
It’s been my experience, however, that teams can get caught up in designing, evaluating, or fixing macro design problems, and not spend enough time on micro-moment design.
In the example earlier, the last issue is a micro-moment design issue:
And the library example at the start of the article is also an example of micro-moment design gone awry.
Micro-moment design refers to problems with one very specific page/form/task that someone is trying to accomplish. It’s that “make-or-break” moment that decides not just whether someone wants to use the app, but whether they can even use the app at all, or whether they give up and abandon, or end up committing errors that are difficult to correct. Not being able to choose my library is a micro-moment design flaw. It means I can’t continue. I can’t use the app anymore. It’s a make-or-break moment for the app.
When we are designing a new product, we often focus on the macro design. We focus on the overall layout, information architecture, conceptual model, navigation model, and so on. That’s because we haven’t yet designed any micro-moments.
The danger is that we will forget to pay close attention to micro-moment design.
So, going back to our library example, and your possible disbelief that such a micro-moment design fail could happen on your watch. It can. Micro-moment design failures can happen for many reasons.
Here are a few common ones I’ve seen:
If you want to make sure you don’t have micro-moment design problems then do the following:
Both macro and micro-moment design are critical to the user experience success of a product. Make sure you have a process for designing both, and that you are giving equal time and resources to both.
Identify the critical make-or-break micro-design moments when they finally do get designed, and do user testing on those as soon as you can. Re-test when changes are made.
Try talking about micro-moment design and macro design with your team. You may find that this categorization of design issues makes sense to them, perhaps more than whichever categorization scheme you’ve been using.
This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.
(This article is kindly sponsored by Adobe.) You are working on a project for your client, designing the interface for a new application. There have been lots of meetings about the new product, and now it’s time for you to start working on sketching and prototyping a design.
The screens, pages, and forms you are about to create have to fit within the desires and constraints of several players — the marketing department, the developers, the business owner. Some questions start to form as you work on the interface:
“How creative should I be/am I expected to be with this design? Is my role to implement the vision that someone else has come up with? Should I be taking the ideas and constraints and creating my own vision? How much can I stray from the ideas I’ve been given?”
You speak to your main contact on the project and she says:
“Go for it, be creative. Let’s see what you come up with.”
You’re excited to be given a free hand, but now you have to figure out what does it mean to be creative with UX design and how do you go about “being creative”? Is creativity something you can just turn on? Is it a process you go do? Are some people just creative and others aren’t? And if so, which one are you?
Creativity can mean a lot of things to a lot of people. The definition I find the most useful is:
“Creativity is a process that results in outcomes that are original and of value.”
This definition has several implications:
So what is this creative process? In order to know what process would result in creativity, you first have to understand how the brain works in terms of solving problems or coming up with new ideas.
A popular idea about creativity is that creativity happens in the “right brain”. That’s actually not accurate. There is new and interesting research on what happens in the brain when people are being creative.
Both the left and right half of the brain are involved in creativity. In fact, there is no one area of the brain where creativity happens. Instead, there are three brain “networks” that are involved in creativity. A network is a collection of different parts of the brain that work together.
The Executive Attention Network refers to brain activity when you are focused on identifying and solving a problem, or deciding what you need to be creative about.
“What is the best way to design this form so that people who just want the default selections aren’t distracted, but also so that when someone needs one of the exceptions they can find what they need to fill out the form?”
When you stare at your screen and think of the above, you are using the Executive Attention Network. Once you have focused on the problem you want to solve, or the creative idea you want to work on, the next network that gets to work is called the Imagination Network.
The Imagination Network works in a mostly unconscious way. It reviews your knowledge and memories, and then runs simulations of possible ways to create what it is you set your intention to create with the executive attention network.
Lastly there is the Salience Network. This is also a largely unconscious process. The Salience Network monitors the activity in the Imagination Network, and decides what to pick out and bring to your conscious awareness. This is when you have an “Ah-ha!” moment and say to yourself, “Oh, I know, I could try…”
According to Scott Barry Kaufman, these three networks (all working together) is how our brains normally work to solve problems or create (art, music, screens, writing, and so on).
Given the way the brain works there are things you can do that help it be more creative. Here’s a list of four practical ideas that may sound like common sense, but actually go further than just common sense. They actually help you work with the three networks.
Whether it is a problem you want to solve or a creative idea you want to work on, state and/or write down exactly what you are working on. For example:
By stating clearly what you are wanting to be creative about, you effectively engage the Executive Attention Network.
You’ve clearly stated your intention and your Imagination Network is ready to go to work. The next thing you should do is take some time off from that question/issue. In fact, you should take some time off from any intense mental activity.
If your Executive Attention Network is constantly engaged then it is hard for your Imagination Network to do its work. If possible, go do something that doesn’t require much thought. Go to lunch, go for a walk, return some phone calls; anything that will free up your brain is a good idea. Ideally, you would actually take a nap or go to sleep for the night.
Your Salience Network will eventually start sending ideas to your conscious brain, and you need to be ready. Inspiration may arrive at any time, so be sure to be ready. Keep a pen and paper handy everywhere you go, or a phone near you with your voice recording app easy to access.
There is even waterproof paper and pencils that you can buy to keep in your shower (I do). When you get an idea, write it down. Don’t assume that good ideas will come around again. Capture them when they appear.
Research shows that one of the hallmarks of a creative person is their ability to zoom in and out, from the high level to the detail. I have found that to be true of UX Designers as well.
The best and most creative UX Designers that I know are able to think at a conceptual level about a design and then start sketching a detail screen level the next moment. Then they think about the high-level implication of what they just sketched, and then they swoop back down to the detail level.
If you are not used to doing this, then practice. Let’s say you are going to work on a design for an hour. Set a timer for ten minutes and start with some planning and thinking about the problem/solution at hand on a high level.
When the ten minutes are up, do some detail sketching of one detailed part of what you were thinking about. After ten more minutes, stop working on the details and pull back and think about how what you just worked on fits with the larger structure.
Go back and forth every ten minutes. If you are not used to working this way, it may be hard at first, but try it and see if you find that it actually helps your creativity.
I’ve talked to some UX designers that think that this means that they are disorganized, or that they haven’t done enough high-level work upfront. Upfront high-level work can be very important, but you need to allow yourself the freedom to zoom from high level to detail through the creative design process.
Some designers think that the “right” way to design is to go through the design process in a step-by-step way, going from the large picture (macro-design) to the micro-level. But the best designs are the ones that allow you to go back and forth between macro and micro as you need to.
Practice moving back and forth from a high-level macro view to a low-level micro view. The practice will help you to see the relationships between macro and micro and will also help you improve as a designer.
Two more ideas that to encourage a creative mindset are:
“Teams experiencing the right kinds of constraints in the right environments, and which saw opportunity in constraints, benefitted creatively from them. The results of this research challenge the assumption that constraints kill creativity, demonstrating instead that for teams able to accept and embrace them, there is freedom in constraint.”
Source: Creativity and Constraints: Exploring the Role of Constraints in the Creative Processes of Research and Development Teams (Organization Studies, 2014, Vol. 35(4) 551–585)
Of course, being too tightly constrained can stifle creativity, but most of the time the constraints we have (colors we can or can’t use, standards and guidelines we need to follow, fonts we have to use, technology considerations we have to align with, deadlines about when we have to have the prototype done) can actually help us be more creative because they engage the brain networks.
The best thing to do with constraints is to be very clear with them when you are setting your intention with the Executive Attention Network. For example, let’s say you have to come up with a prototype for an app, but you only have three days. When you set your intention with the Executive Attention Network, don’t forget to explicitly remind yourself you only have three days. Other constraints might have to do with the technology you can or can’t use, the size of the screen, the number of pages or screens, and so on.
I hope these ideas have sparked some creativity for you. The next time you start on a new project, set an intention for the next part of your project, then go for a walk, and bring a small pad of paper and a pen with you. You will be amazed at what happens next.
This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.
In the run-up to Christmas, there is a tradition across the web design and development community to produce advent calendars, typically with a new article or resource for each day of December. In this article, I have rounded up all those that I have found to be running this year, along with RSS feeds where they can be located, and Twitter accounts to make it easier to follow along.
Q: What’s 14 years old and not at all in a last minute panic?
— 24 ways (@24ways) November 27, 2018
It is a lot of work to publish an article every day — as we well know here at Smashing — and we have a whole team here to help. However, the majority of the calendars published here are true community efforts, often with the bulk of the work falling to an individual or tiny team, with no budget to pay authors and editors. So, please join us in supporting these efforts, share the articles that you enjoyed reading, and join the discussions respectfully. Whether you celebrate Christmas or not, you can certainly learn a lot of new things over the next 24 days.
Perl Advent has been running since 2000 and is the longest running web advent calendar that I know of. Now old enough to enjoy a festive sherry (in Europe at least), they are back for 2018 for 24 merry days of Perl.
I have to admit a little bias in this subject as 24 Ways is the calendar started by my husband, business partner and fellow Smashing Magazine editor, Drew McLellan. 24 Ways has been running since 2005, when Drew had the idea to post a new article each day of December until Christmas. I don’t think either of us expected that on the 30th November 2018, Drew would still be staying up until midnight to check that the first article went live!
Ever since 2009, the Performance Calendar has been helping us to speed up the web. It is up again for the 10th year in a row and is maintained by Sergey Chernyshev.
Next on my list is the French language calendar, 24 Jours De Web. Their first year of publication was 2012, and they are supporting the charity L’Auberge des Migrants, asking readers to donate to help refugees in Calais and the North of France, providing material and food aid, support and advocacy.
If you would like to brush up on your AWS skills then the AWS Advent calendar promises “a yearly exploration of AWS in 24 parts”. You’ll find a wide range of articles on security, deployment strategy and general tips and techniques to be aware of when using Amazon Web Services.
If PHP is your language of choice then you can look forward to 24 days of PHP articles over at 24 Days in December. They began publishing in 2015, when Andreas Heigl realized that he missed Web Advent who had stopped publishing in 2012.
In his wrap-up post after the initial season Andreas wrote:
“I came to realize that I missed the phpadvent/webadvent the last years. And wouldn’t it be great to have a read about something PHP-related for the first 24 Days in December? Even for those people that are not Christian, the time before Christmas has to be a special time. And if it’s only due to the commercials and ads what to present.
So I would wait and see whether someone would arrange something.
But wait! When everyone thinks someone should do something, no-one will do anything.”
I’m happy that the community effort started by Andreas, when he realized that he would need to be the person who did something, is back for another year.
The 24 Pull Requests calendar is a little different. It began in 2012 with the idea that contributors should, “Send 24 pull requests between December 1st and December 24th.” The idea being that this would be 24 gifts to the open-source community from every contributor. Since the project began, 19,859 have contributed (at the time of writing).
It’s a brilliant idea, and I really love their updated policy for 2018. Recognizing that making Pull Requests is only one way that people contribute to open source, the site has widened the scope of contributions. You can make a Pull Request as before if this is how you contribute. However, you can also complete a form to track your non-PR contribution. Perhaps you wrote a tutorial, ran a meetup, mentored someone — these things are all important contributions too. Read the updated contribution policy for 2018 and join in!
UXmas have been publishing their Advent Calendar for UX folk since 2012. I am very impressed that they already have their call for submissions for 2019 up and running. So, you can read some useful aticles this year and submit your idea for next year at the same time.
24 Accessibility are back for a second year of accessibility posts in the run-up to Christmas. The project was started by Dennis Deacon, an Accessibility Engineer with The Paciello Group, and will be well worth following this year.
If you would prefer a puzzle over an article, take a look at Advent of Code. Created by Eric Wastl, this is an Advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like.
“… we asked a bunch of Umbraco people if they had a favorite feature, a story or something else that they’d be willing to write a short article about. Then we’d post a new one here every day through December.”
The Data-Driven Advent Calendar will contain an article about data journalism each day of Advent. The project is from Journocode who are computer scientists and journalists working in newsrooms across Germany.
Posting to Medium, A Computer Of One’s Own will highlight the lives of the pioneers of the computer age. The project is by Alvaro Videla, with illustrations by Sebastian Navas.
Not a website but instead a hashtag: Sarah Drasner tweeted that she would be highlighting a person and project every day of Advent using the hastag #devAdvent. Follow along to get to know some new folks and the work they do.
Tomorrow I’m gonna start a dev advent calendar. Every day from the 1st to the 25th, I’ll highlight a new person and a project of theirs that I’m into and think people would benefit from knowing about. ❤️
— Sarah Drasner (@sarah_edo) November 30, 2018
If you know of a calendar related to web design and development that I haven’t mentioned here, post a comment. Enjoy your seasonal reading!
How much does design affect the perception of our products and the users who interact with them? To me, it’s getting clearer that design makes all the difference and that unifying designs to a standard model like the Google Material Design Kit doesn’t work well. By using it, you’ll get a decent design that works from a technical perspective, of course. But you won’t create a unique experience with it, an experience that lasts or that reaches people on a personal level.
Now think about which websites you visit and if you enjoy being there, reading or even contributing content to the service. In my opinion, that’s something that Instagram manages to do very well. Good design fits your company’s purpose and adjusts to what visitors expect, making them feel comfortable where they are and enabling them to connect with the product. Standard solutions, however, might be nice and convenient, but they’ll always have that anonymous feel to them which prevents people from really caring for your product. It’s in our hands to shape a better experience.
prefers-reduced-motionmedia query support is available now, too, Developer Tools have gotten a font editor to make playing with web typography easier, and the accessibility inspector is enabled by default. The
imgelement now supports the
decodingattribute which can get
autovalues to hint the preferred decoding timing to the browser. Flexbox got some improvements as well, now supporting
column-gap) properties. And last but not least, the Media Capabilities API, Async Clipboard API, and the
SecurityPolicyViolationEventinterface which allows us to send CSP violations have also been added. Wow, what a release!
React.lazy(), a method you can use to do code-splitting by wrapping a dynamic import in a call to
React.lazy(). A huge step for better performance. There are also a couple of other useful new things in the update.
<input type="color">support and changes the default behavior of links that have
target="_blank"to get the
rel="noopener"as implied attribute. It also includes the new
prefers-color-schememedia query which allows developers to adapt websites to the light or dark mode settings of macOS.
asyncscripts in your code.
background-clipis not super new, it hasn’t been very useful due to the lack of browser support. But as Sime Vidas shows, CSS Background Clip is now widely supported, giving us great opportunities to enhance the text styling on our websites.
To all the presenters of conferences, workshops, and meetups: I truly enjoy hearing your anecdotes and learning things from you. I like laughing at your jokes, especially the puns. Unfortunately, some people in your audience aren’t getting as much out of your session as me. They may not be able to see your slides, or hear you speak, or make out the details on the screen.
A few tweaks will make your presentation more inclusive. Here are some tips so next time you’re on stage, everyone in the crowd can laugh at your bad jokes.
The back row of your presentation room is a long way from the projector screen. It’s much further than the distance between you and your laptop screen as you create your slides.
People up the back will appreciate every extra pixel you add to your font size. People with vision impairments will appreciate the larger text too — they’ve got a better chance of being able to read it.
Go big or go home. This goes for all text, even “less important” stuff like data labels, graph axes and legends, image captions, footnotes, URLs, and references.
I love fonts; they can really set the tone of a talk. However, before you jump into the craziest corners of Google Fonts, think of your audience members with reading difficulties. Using handwriting or script fonts, particularly ones whose letters link together, makes text much harder to read. Using uppercase reduces scannability by removing ascenders and descenders, as well as being shouty.
There’s more scope to experiment with fonts on slides than web pages due to the larger text size, but here are some best practices:
(Reference: British Dyslexia Association Style Guide 2018)
Do a print preview of your slides in black and white. Does it all still make sense without the color? If you send out your slides post-talk, some people may not have access to a color printer.
There’s also a good chance that someone at your talk is color-blind. If you’ve used red text for negative items and green text for positive items mixed together in a single list, they may not be able to tell them apart. If the datasets in your graphs only use color to differentiate, think about using patterns or labels to tell each bar, line or pie segment apart.
Don’t rely on color only to tell your story — enhance color with labels, icons, or other visual markers.
Recommended reading: Getting Started In Public Speaking
Every time a new slide goes up, you lose the crowd while they scan the new content. If the slide is full of text, it’s going to take a long time for their attention to come back to what you’re saying.
People with attention deficiencies will struggle to read your slides and listen to what you’re saying at the same time. Audience members with reading difficulties may not finish reading text-heavy slides before you move on, and never mind what you said while they were concentrating on the screen.
Slides aren’t speaker notes. If you need prompts, write up some cards or use your slide program’s notes function. Use keywords and short phrases in your slides, not whole sentences or paragraphs, to share the essential ideas of your talk. Write and refer to a long-form companion piece if you want to share loads of detail that doesn’t translate well to slides.
My high-school self-loved slide transitions — the zanier, the better. Look, my slide is swirling down a plughole! It’s swinging back and forth like a leaf on the breeze! Fades, swipes, shutters, I was all for it.
I have since discovered that slide transitions are overrated. More seriously, they can make the audience feel sick. Slide transitions and other animation such as parallax scrolling can trigger nausea, headaches and dizziness in people with vestibular (inner ear) disorders.
Make your audience groan with your punny jokes, not because they feel ill.
If you’re presenting, you probably know a decent amount about your topic. You likely use specialist words and phrases and assume a minimum level of audience knowledge.
Be mindful of using jargon and acronyms, even if you think they’re well-known. Explain them, don’t assume everyone knows them. Better still, use plain language for everything.
Don’t mistake using simpler words and shorter phrases for “dumbing it down”. Slides are for clear and concise ideas, not showing off your vocabulary. Save your fancy words for your next crossword puzzle.
Animated GIFs are used in lots of presentations — usually as a killer quip or a laugh out loud punchline. They’re an easy way to add fun to dry tech talks but use with care — and I’m not talking about your bad sense of humor.
If the GIF content strobes or flashes rapidly, it may trigger seizures in people with photosensitive epilepsy. It’s happened: in 2016, disgruntled Trump supporters caused a Newsweek writer with epilepsy to have a seizure by deliberately tweeting flashing images to him.
While a GIF is looping on the screen, I’m half-listening to the presenter at best. It’s so distracting. If there’s an animation on screen while you relate an anecdote, I’m going to miss the story.
When you create an animated GIF, you can configure the number of times it loops. This is a good compromise — have some fun with your audience, then they can focus on what you’re saying without distraction.
There are recommended color contrast values for text on the web. The idea is to ensure text is visible even if you have a vision impairment or color-blindness.
Color contrast is important for slide content too. You probably won’t have much control over the environment, so it’s a good idea to use color combinations that go beyond recommended contrast ratios. I guarantee it won’t look as clear on the projector as it does on your computer.
Don’t be subtle with your color palette. Use bold colors that make your text stand out clearly from the background. Be careful about laying text over images — do it, just make sure the contrast is good. Use a color contrast checker and aim for a ratio of at least 4.5 : 1.
(Before you flame me about the big text minimum ratio being 3 : 1 for WCAG 2.0 AA, I figure it’s big up close, but it’s smaller from the audience’s perspective. They’re not likely to complain that it’s too high contrast, are they?)
If you know the setup in advance, light-colored text on a dark background is more audience-friendly in a darkened room; a white background can be dazzling. Some people have even resorted to wearing sunglasses when they were blinded by too much glare!
If you plan to share your slides or you have complementary materials, include links to these on your first slide, and mention it in your intro. This enables your audience to follow along or adapt the presentation on their own devices. People with low vision can zoom in on visual content, and blind audience members can follow along on Braille displays or with a screen reader and earbuds.
If there’s a web link in your slide, there are two reasons to keep it as short as possible:
Use a URL shortener to create short links that point to the destination. If you can, maximize readability by customizing the short link to contain related word or two rather than a random string.
Video and audio clips are a great way of presenting events, interviews, and edited content that doesn’t work in real time.
If you’re playing video, think about audience members who can’t see the screen — is the audio descriptive enough by itself? Can a blind or low-vision person get a sense of what’s going on, or who’s speaking, purely from the soundtrack? You may need to introduce or summarise the vision yourself to add context.
If your video has an audio track or you’re playing a separate sound clip, are the visuals enough for someone who is deaf or hard of hearing? You should provide captions of decent size and contrast. Given an audio clip doesn’t have a visual component, you could display equivalent text or graphics while the audio is playing.
This is more of a general usability tip. Don’t bottom-align slide text unless you know that the bottom of the screen is located well above the audience, or the audience seating is tiered. If the bottom of the projector screen is at or below the audiences’ head-height, and the floor is flat, people seated beyond the first few rows will likely not see what you wrote at the bottom of the slide.
Recommended reading: How To Transform Your Next Conference Takeaways Into Real-Life Results
It can be tempting to structure your talk towards a big reveal. This is a great device for building interest, but you run the risk of losing people with attention deficit disorders. More generally, if you find yourself running out of time, you may have to rush or cut short your final grand flourish!
Set expectations upfront. Start with a quick “Today I’ll be covering…” statement. You don’t have to give the whole game away, just tantalize the crowd with an outline. They can then decide if they want to commit their brain power to focus on your talk. Let the audience know that it’s OK for them to go if they wish.
Don’t be offended if someone chooses not to stay. They may have a limited capacity for focused thought each day, so a conference of back-to-back presentations and loud breakout spaces is challenging. They must pick and choose what is most useful to them. Hopefully, they’ll come back to your talk if it’s shared later.
Complex content like graphs with multiple datasets take time to read and understand. If your slide is a slab of text, your audience will get annoyed if you summarise it and skip onto the next topic before they’ve finished reading.
Consider how much time your audience needs to read and understand each slide, based on the amount and complexity of the content. Remember, they’re seeing it for the first time, and they don’t know as much about the topic as you. Structure your talk so complex slides stay up on the screen long enough to be read completely.
You worked hard on those slides, it’d be a shame if they weren’t appreciated!
I’ve attended events that have provided sign language interpreters or live captions to translate or transcribe what the speakers say in real time. They’re invaluable for people who are deaf or hard of hearing. International events may also provide foreign-language translation.
If you present at an event that provides these services, send your slides or speaker notes to the interpreters and captioners in advance. They can then research and practice unfamiliar terms before the day.
Many events don’t provide captioning or translation. They’re beyond the budget of most conferences, being both specialized and labor-intensive. In this case, you can potentially provide your own captions.
MS PowerPoint has a free Presentation Translator plug-in to add real-time captions and foreign language translation. I saw a demo at A11y Camp Sydney last year:
— Allison Ravenhall (@RavenAlly) September 13, 2017
Google recently added real-time captioning to its Slides product, too.
Your choice of words may be offending or excluding some of your audience, and you may not even know you’re doing it.
Not all people that work in technology are “guys.” When a speaker says “I talked to the guys about it,” I imagine a group of men. If they’d said “I talked to the developers about it,” then my imaginary group also contains women.
There’s also ableist language. Using words like retarded, insane, lame, and crazy incorrectly is degrading to those with mental and physical disorders. What’s a normal user? Are you making assumptions about gender, sexual orientation, race, family unit, technical knowledge, physical or mental abilities, or level of education?
Then there’s swearing, commonly used to get attention or add some spice. Be careful about deploying this weapon. If you’ve misjudged the room, you could put people offside. If you’re traveling, that fairly tame curse word you use at home could be deeply offensive elsewhere.
When I discussed color contrast at A11y Bytes 2017, I moaned about not being able to see my phone screen in bright sunlight. Attempting to relate, I asked “we’ve all been there, right?”, expecting a few nods and smiles.
The retort was lightning-fast: “Can’t say I’ve found it a problem!” Laughter rippled through the crowd as I realized I’d just been heckled by a blind woman. She graciously laughed off my hasty apology.
I still tell my sunlight story, but now I’m mindful that not everyone can relate to it directly. Learn from my mistake, don’t assume your audience has the same abilities and experiences as you.
My most recent presentations have been about WCAG 2.1, including the need to provide alternatives to motion-based inputs. I use three Nintendo Switch games as examples.
I don’t assume that the audience has used a Switch. I briefly explain the premise of each game and the motion input it uses before I move on to how it relates to the new success criteria. It’s a courtesy to those people who don’t share my interest in the Switch.
Similarly, much as I’d love to do a Star Wars-themed accessibility talk, I won’t because I’d be putting my own amusement ahead of informing my audience. Some people aren’t into Star Wars, just as I’m not a Trekkie or a Whovian. It’d be a shame for them to misunderstand me because they can’t translate my tenuous Star Wars associations — or worse — if they saw the themed talk title and skipped my session altogether.
Have some fun, by all means, include a pop culture reference or two, but don’t structure your entire talk around it. Make it work for someone who hasn’t watched that movie, or heard that band, or read that book, or seen that meme.
Photos, graphics and drawings all add interest to your slides. You may have screenshots of a website you’ve built, or photos of people or places you’re talking about.
When your slide imagery is part of the story, remember to describe the pictures for those in the audience that can’t see it. Try not to say “As you can see here…” because someone may not be able to see there.
If you think it’s awkward to quickly rehash a sight gag, think how awkward you’d feel if you were in a room full of people that suddenly all laughed and you didn’t know why.
You’re nervous. You’ve never presented before. You’ve got a time limit and lots to share. You haven’t practiced. Your parents, friends, children, workmates, industry idols, and managers are all in the room.
Whatever the reason, you probably talk faster than usual when you present. This puts pressure on interpreters and captioners, particularly if your talk contains tech-speak. Your audience may struggle to keep up too. Note-takers mash their laptops in vain, live-tweeters’ thumbs cramp up, and sketchnoters leave a trail of half-drawn doodles in their wake. International visitors may get lost figuring out your accent. Cognitively, everyone is thinking furiously to keep up, and it’s hard work!
Practice. Slow down. No one knows your stuff as well as you; give everyone else time to take it in.
Codes of conduct are found at most public speaking events, such as this one by UX Gatherings. They set the minimum behavior standard for speakers and attendees.
Read the code of conduct for every event you attend — they can differ broadly. Know the no-go zones and don’t go there.
If you are talking about sensitive topics that may upset some of your audience, give them plenty of notice so they can prepare or remove themselves from the discussion. A note in the event program, if possible. A mention on your lead slide, and during your opening remarks. Include contact details of support services if appropriate.
Well done if you have mastered the art of the live code demonstration. Few presenters can show off something meaningful that also works while providing a clear commentary.
You know what would take your code demo to the next level? Jacking up the font size. Your usual code editor font size is perfect when you’re sitting at your desk, but it’s not big enough for those sitting in the back row of your presentation.
Check your editor’s color settings too. A pure white background might be startlingly bright in a darkened room. Make sure your editor text colors have good contrast as well.
If there’s a microphone on offer, use it, even if it’s a small space.
Many public conference spaces have an audio induction (hearing) loop connected to their AV systems. The loop transmits the AV output directly to hearing aids and cochlear implants. People who are hard of hearing receive the target audio without background noise.
Recommended reading: Getting The Most Out Of Your Web Conference Experience
Congratulations! You’ve done your talk. There are just a couple more things that’ll round this thing out nicely.
Lots of presenters publish their slides after the talk is done. If this is you, make them accessible! Correct semantics, meaningful read order, ALT text on images, enough color contrast, video captions, limited animation looping, reasonable slide transitions, all the good stuff.
Help people that need more time to take in your talk and need more detail than what’s on your slides. Publish your speaker notes or a companion piece that covers your topic(s). If the event is recorded, ask the organizers to include captions or a transcript (but perhaps don’t rely on YouTube’s auto-captioning).
Applying these tips will make a big difference to your whole audience. Your slide content, design, and how you present can all affect how well the crowd gets your message, if at all. This is particularly true for those with physical and cognitive conditions.
Making subtle changes to what you show and your script will help all attendees, not just those with disabilities, to get the most out of your hard work.