Monthly Archives: December 2016

The newest trend in web design

It involves moving elements, but it’s not really animation.

It includes plenty of great color and physical elements, but it’s not material.

This background trend includes elements of plenty of other trends for truly engaging moving elements that draw users in and keep them on the site with great scrolling actions. This new parallax with a twist is the latest craze to fascinate website designers.

Parallax with a twist is different because it is so much more seamless than what we’ve seen with moving background trends in the past. It is identifiable by a moving background that is activated with scroll, very much like parallax scrolling effects.

The key difference is in the lack of “screens.” The scroll creates a continuous and moving dynamic flow where the background changes color, includes moving animations and elements that move with the screen and other elements move in to and out of the focus area.

It’s different from the parallax scrolling trends we’ve seen in the past because the elements move so seamlessly and smoothly that you don’t see the layers interacting. In contrast with parallax of the past, users often saw the layers of elements interacting with each other. So you might have a background that moved over a photo or a layer that “snapped” into place as the scroll came into a specific location.

Many of these parallax with a twist designs have a few common elements. In addition to scrolling effects there are a handful of other commonalities that designers are using, although these elements aren’t truly required to make the effect work.

  • One-page design: To maximize the impact of this technique, these websites often feature a one-page design. Some use the effect on a long-scrolling homepage with navigation to interior pages with a more standard format.
  • Bold typography: Big lettering with interesting typeface choices are a common factor. Designers are mixing thick stroke serifs with novelty typeface options for maximum impact and ease of readability.
  • Bright color: Colors from flat and material design are a common factor. Big, bright, bold options are common. The palettes are pretty simple, but often include more color options that you would commonly see to facilitate background hue changes.
  • Changing content types: The content on the page often changes with the scroll, so that the user might first get a hero image, then a “page” of text, then more images and then a form or call to action. This moving content pairs well with the interactivity of the movement in the scroll and with the background.
  • Continuous story: While the content types may change throughout the design, a single story is the element that ties it all together. This continuous story is a two-fold design element. The content story must have a flow from chapter (page) to chapter (page). But the visual story must include a common thread as well. With so many changing visuals, it is important that they feel like they belong together.
  • Big images: Whether designers use illustrations or photos, the images – particularly on the home page – are oversized and impactful. Most of these websites start with a hero header-style image with a cue to scroll.
  • Scroll instructions: With anything new, users often need a cue as to how to proceed or interact with the design, and these sites do just that. Most have a simple instruction to scroll or icon (often with a simple animation to grab the attention of the user) that tells users what to do and how to engage.
  • Simple language: Because the framework behind this moving background is complex, everything around it tends to be simple, including the language on the site itself. This contrast is complexity and simplicity keeps the site easy for the user to understand and interesting enough to encourage engagement.

Conduct a Card Sorting Study

Opinions differ just like tastes. That is why when making important design decisions we need to consider what users think. We may argue whether contact information should go in the “about us” section or in the footer or elsewhere and each team member may be right in a sense, but the only opinion that matters is that of the user.

But how can you incorporate users’ ideas into the information architecture of a product?

I suggest card sorting. It’s simple, easy to conduct and analyze and it’s an informative UX design process.

Card sorting is a user study where participants organize content pieces into groups based on topic similarity. The group labels may be predefined (closed card sorting) if you already have some kind of information architecture and navigation. However, it’s even more informative to leave group labeling to the participants (open card sorting), especially if you are unsure about the category naming. This way you will get an understanding of how your users “speak” about the same topic.

 

Choose Your Methods

Depending on your project goals you can choose to conduct either an open or closed card sorting study. While closed card sorting results may be easier to analyze, open card sorting provides more insights into user mindsets.

Another thing to consider is the medium of the card sorting research: web/remote or traditional paper based studies. There are plenty of online services that give you every single tool you need for a remote card sorting study. Just like remote usability testing, this type of research method comes with pros and cons.

On one hand it’s easier than ever to create cards, send the test to a bunch of users and let the system analyze gathered data and give you a final category tree. On the other hand during a moderated, real life card sorting session the researcher can observe and take notes of discussions, behavior, ideas and questions, which brings a somewhat emotional touch to the raw data.

How Cards Dominate Design

Practical as they are visually attractive, card interfaces are more than just a trend.

With 2014 marking the first time mobile internet usage exceeded desktop, web design is now favoring the small screen as responsive design becomes mandatory. The result: simple interface styles like the new flat design, minimalism, and especially cards are more popular than ever.

The usefulness of the card UI pattern goes beyond loading times and translating across different screen sizes. Bite-sized content matches the attention span of most web users (especially on mobile devices). Nurtured by Pinterest and then popularized by social media sites like Facebook and Twitter, card UIs can now be found across websites of all industries.

In this article, we’ll explore the rise of the card UI pattern: why they’re useful, how they fit into responsive and material design, and what to expect from them in the future.

 

What’s Container-style Design?

To understand this pattern, you must first understand the card itself.

Cards are basically small containers of each information, with each card representing its own singular thought. A card can hold all types of content — visuals, text, links, etc. — but all fall under a single unified theme.

Filling the screen with such independent containers of information is what the Guardian calls the “container model.” This provides a mucher cleaner and instantly comprehensible interface, attuned to quick browsing so the user can go straight to what they’re looking for. (On top of that, this method lends itself to gesture controls, which we’ll explain below.)

Trello lets users create any card they want. Anyone can create “to-do” cards and categorize them as needed.

Not only does this illustrate the card’s flexibility, it also demonstrates its organizational power. Trello succeeds because their card format feels simpler than traditional list-style task managers.

 

UI Cards in Mobile and Responsive Design

As mentioned above, cards offer excellent compatibility with responsive frameworks, causing some like Des Traynor of Intercom to call it “the future of the web.” The pattern translates well to mobile devices for a variety of reasons, which we’ll explain now.