What Should You Do When A Web Design Trend Becomes Too Popular?

Suzanne Scacca

2020-03-31T11:30:00+00:002020-03-31T11:35:23+00:00

I read an interesting article on Forbes recently about language saturation. Here’s the problem:

Consumers don’t always understand the technicalities of what businesses do or the solutions they’ve created for them. So, copywriters use jargon that translates something like “Internet-connected devices with computing capabilities” into “smartphones”, “smart watches” and “smart speakers”.

Some of these buzzwords spread like wildfire and it soon becomes impossible to find a brand or website that doesn’t use them. When that happens, the words — and the associated product or service — become meaningless in the minds of consumers because everyone is saying the same thing.

The same thing happens when design trends become too popular. This is something Vitaly Friedman talked about last year with regards to cookie consent notices and banner blindness.

But what choice do you have? Are you supposed to hop on the design bandwagon anyway so your website doesn’t get left behind? Today, we’re going to look at what your options are.

What Should You Do with Too-Popular Design Trends?

To be clear, I’m not suggesting that you ignore any and all rising design trends.

There are certain trends that we absolutely need to adopt across the board. Like minimalism and mobile-first design. When there’s substantial, quantifiable proof that a design technique is needed, please don’t ignore it.

What I’m talking about are design trends that aren’t aimed at strengthening the web. Instead, they’re solely about driving up engagement on websites.

Brutalism. Facebook Messenger pop-ups. Home page hero sliders. The second that popular websites begin to adopt these trends and once writers and designers start including them in design trend roundups, it’s only a matter of months before consumers are inundated with them. And this is when banner blindness kicks in.

So, what are your options when you learn about a new design trend that promises big results?

Option 1: Ignore It and Stick with What Works

There are a few reasons you should consider going with this option:

You work on short-term website projects.

For those of you who build websites, hand them over to clients and then wish them luck as you move onto the next, it’s probably not a good idea to play around with fad-like design trends.

You know how quickly design trends change, so why put your client in a position where they have a website with an outdated design? One of three things is going to happen:

1. They’ll leave the outdated feature as is and have no idea that it’s costing them conversions.
2. They’ll ask you for help in removing the feature not too long after launch and won’t be happy about needing a rework so soon.
3. They’ll ask another designer for help because they’re upset you put them in this less than ideal position.

Unless your client has a very good reason why they need to exploit a passing design trend, try to dissuade them from it. If they understand the fleeting nature of some of these trends, as well as how banner blindness develops from oversaturation, they should be onboard with you sticking to what works.

You’re designing (or redesigning) a site for a very well-established company.

When building a website for a company that has a long-standing reputation with its audience as well as a tried-and-true formula for success, adopting a passing trend could be risky.

Take Zillow, for example.

The homepage for Zillow on mobile (Image source: Zillow) (Large preview)

This is the mobile homepage as it stands today. It’s simple, sleek and intuitive by nature.

Can you imagine what would happen if the designer decided to add a video background to the hero banner? Or to interrupt the property browsing experience with a pop-up advertising a free ebook download?

You have to really think about what disruptions to the expected design would do to the flow of things. So, when building something for a brand that’s known for its consistency and convenience, it’s best to ignore passing trends.

This doesn’t mean that a website like this shouldn’t be redesigned. Like I said before, lasting design “trends” can’t be ignored as they enable us to move websites in the right direction (like responsive design). For example, this was Zillow in 2017:

The mobile homepage for the Zillow website in 2017 (Image source: Zillow) (Large preview)

See how far we’ve come in terms of making websites mobile responsive and mobile-first in just a few years? These are the kinds of popular changes that don’t require debating.

The company’s goal is to build relationships; not to increase sales.

I realize that every website needs conversions in order to survive. However, many business models can’t sustain with just one-off sales. It costs too much money to constantly market to new customers, which is why some businesses focus on building long-term relationships with their customer base.

And that’s why you need to steer clear of conversion-boosting design trends on these kinds of websites.

Take, for instance, Gary Vaynerchuk’s website:

The mobile website for Gary Vaynerchuk is free of passing design trends and elements. (Source: Gary Vaynerchuk) (Large preview)

Remember when every website seemed to have a pop-up containing two buttons — one of which would be super-positive like “Yes, I want to change my life!” and the other which was meant to shame the visitor with something like “No, I like living in squalor.”

How do you think Vaynerchuk’s always-growing loyal following would feel if the site displayed one of those pop-ups? Not only would they be annoyed by the disruption keeping them from the content, but they’d probably be upset that he’d use such a shameless ploy to bully them into signing up.

If the brand you’re building a website for is on a similar mission — to build long-lasting and meaningful relationships — you don’t want to sully that with bad design decisions.

Option 2: Adopt the Trend But Keep an Eye on Market Saturation

Patrick Ward, the author of the Forbes article mentioned above, explained that many writers in the fintech space have had to pivot towards a simpler style of writing:

“At first, new startups used jargon and buzzwords to highlight their brand new tech and give themselves a competitive edge.”

I think this is a good lesson for designers as well. It’s not always a bad thing to hop on a design trend’s bandwagon — especially if it’s proven to work and it’s still in the very early stages of public awareness.

So, while there are clear cases where it makes sense to avoid design fads, I think there are times when it makes sense to take advantage of them. The only thing is, you can’t just implement the design and then leave it be.

For instance, this is the 15 Finches website on desktop:

A walk-through of the animation on the 15 Finches website on desktop. (Source: 15 Finches) (Large preview)

Now let’s compare this same animated experience to what users get on their mobile devices:

A walk-through of the 15 Finches website on mobile with layering errors and no animation. (Source: 15 Finches)(Large preview)

There are a number of design choices made on this mobile site that should’ve been long phased out.

1. The vertical typography in the background should go. It might add texture to the desktop site, but it’s just a confusing distraction on mobile.
2. The animation on the desktop site doesn’t translate to mobile. To present visitors with a consistent experience, the designer should commit to mobile-first design.
3. There are also layering errors all over the mobile site, with text often covering other bits of text as well as missing call-to-action buttons.

As I said, there are some sites where it’s okay to adopt short-term design trends. Just keep an eye on them.

For example, the Hubspot site design is always changing, but any design trends it adopts never seem to overstay their welcome. Hubspot tends to cut out just before they become too much. And that’s a key thing to remember.

Hubspot’s mobile site continues to use a chatbot widget to guide prospective customers in the right direction. (Image ource: Hubspot) (Large preview)

As you can see, the mobile site still uses a chatbot widget. For a business that sells sales and marketing software, it’s an important element to retain even if other sites have since ditched theirs.

That said, I’m positive that Hubspot keeps close tabs on its user data so it probably has confirmation that the element continues to work well. This is just one of the things you should be mindful of when monitoring a trend.

If you want to utilize popular design trends, you need to be in it for the long haul with your clients. That way, the second you start to notice:

• Oversaturation in the market,
• The trend has gone completely stale,
• Or your users aren’t responding positively to it.

You can immediately move the website to safer ground.

Option 3: Go in a Similar But Different Direction

When a design technique or element immediately and universally becomes popular, there’s more value to it than just its ability to increase conversions or create a prettier design.

Take a look at why it’s caught on the way it has. If you understand what’s driving the popularity of the fad, you can leverage the strongest parts of it, make it your own and have something with real staying power.

Do you remember the New York Times’ Snow Fall article in 2012? This was shortly after parallax scrolling started to pick up speed in web design. And despite some websites utilizing the trend, it was the way the NYT creatively integrated it along with interactive and animated images that really blew people away — so much so that it won a number of journalism awards for it.

Notice that the NYT didn’t try to redesign its website with parallax scrolling or interactivity. It took the basic principles gaining in popularity and applied it to one groundbreaking story. By considering how the trend could be best used for maximum impact, the NYT turned a short-term fad into something that would make its story memorable.

If you understand what’s driving the popularity of the fad, you can leverage the strongest parts of it, make it your own and have something with real staying power.

“

Let’s take a look at a more recent example of a site using this approach.

You’re all familiar with the trend of split-screen design, right? It worked really well on desktop, both in its static form as well as when one half of the screen would remain put while the other moved. But on mobile? It wasn’t so great.

While we’ve seen a lot of split screen designs get phased out, EngineThemes has made the trend its own:

EngineThemes has put a playful twist on the once-trendy split screen design. (Source: EngineThemes) (Large preview)

Upon entering the site, it’s a look we’re familiar with as consumers. But it doesn’t take long to realize that this is going to be a different experience.

For starters, the bobbing bird and red double-headed arrow are something you don’t see much of, if at all, on other sites. I can’t imagine many visitors scroll past this banner without engaging with it.

Secondly, there are no words in this banner on mobile. (There are on the desktop website.)

One of the reasons why this design trend doesn’t work anymore is because it can’t be used on mobile sites — there just isn’t enough space to split the screen and fit enough words in there. Or is there?

EngineThemes has hidden a message in its animated, split screen graphic. (Image source: EngineThemes) (Large preview)

Eagle-eyed visitors will notice that there’s a message carefully hidden in the bird graphic when the arrow is moved to the right. Granted, the text should be bigger, but mobile visitors can zoom in if they’re struggling to read it.

It’s a string of code that reads:

"EngineThemes provides effective business solutions with simple and powerful WordPress app themes."

But do you see what I mean? When a design trend suddenly becomes popular — for a short or long while, too — it doesn’t necessarily mean you need to use the same exact version of it like everyone else. This is why oversaturation quickly turns once great-looking websites stale.

By taking what’s so innovative about a design trend and making it your own, though, you can give the trend real staying power while making your site a standout in the process.

Wrapping Up

When we overdo it by leveraging the same design trends as everyone else, we put our websites at risk of becoming redundant or, worse, invisible. So, how do we establish a cutting edge if we can’t make use of design “jargon”?

The truth is, there’s no one clear-cut answer. You need to be able to read the room, so to speak, and figure out which approach is best for you. You could leave the passing trend alone, you could adopt it temporarily or you could make it your own.

Further Reading on SmashingMag:

• What Does A Foldable Web Actually Mean?
• Table Design Patterns On The Web
• Designing The Perfect Slider
• Bottom Navigation Pattern On Mobile Web Pages: A Better Alternative?

(ra, il)

from Tumblr https://ift.tt/2UPh66b

Visual Design Language: The Building Blocks Of Design

Gleb Kuznetsov

2020-03-30T13:00:00+00:002020-03-30T13:09:03+00:00

“Design is not just what it looks like and feels like. Design is how it works.”

— Steve Jobs

Like written words are to language, fonts, colors, shapes and icons are to visual design. An effective visual design language not only acts as a communication framework for all stakeholders on a product development team, but unites a brand and its customers to ensure that a company’s brand identity matches a customer’s brand perception.

We use language as a tool for communication with other people. Writers use words to communicate with their readers, while designers use visual language to communicate with their users. Fonts, colors, shapes, visual elements such as icons — those are elements of design language. Effective design language streamlines communication.

While working at Fantasy in 2016, my team was tasked with designing the interface for Huawei’s mobile OS (EMUI 5 interface). I personally was responsible for the visual design language for this OS. Surprisingly, the company didn’t have its own language at initiation; instead, they relied on a customized version of Android that was plagued by inconsistency and lacked a coherent vision. This was largely due to the existence of multiple teams and multiple functional roles with different skillsets and perspectives all grasping at straws to invent a way to communicate. UX designers, interaction designers, visual designers and graphic designers had all worked on the OS in the past, all using their own best efforts to communicate.

Without a uniform system of communication, not only was the user experience jumbled and confusing, it was extremely difficult to integrate changes into a final design. It was a true Tower of Babel.

Writers use words to communicate with their readers, while designers use visual language to communicate with their users.

“

What Does Design Language Provide?

By unifying the project teams under one shared language, a project can move forward with clarity, cohesion and speed.

Consistency

Digital design has few physical constraints compared to industrial disciplines. This gives designers a lot of power to experiment and propose a variety of solutions to any given challenge. However, this can easily lead to disjointed user experiences.

To achieve consistency in design, it’s vital to define reusable and cross-platform components and styling options. Consistent design makes it much easier to ship products on a multitude of platforms and devices, which is especially crucial for companies like Huawei.

Brand Recall

When they interact with a product that has a strong visual language, users tend to remember it better. Unfortunately, a majority of products available on the market have generic designs. It is too easy to confuse one product with another when they share the same visual styles.

Creating a strong visual identity is a goal that design teams should state when working on visual design. This is the personality of a digital product! The colors, typefaces, photos, illustrations, animations are all part of a brand, and they should be designed in a way that helps people remember the product. When an authentic design language is followed consistently, it creates recognizability for the brand.

Clarity

We put a strong focus on clarity — we wanted to make our GUI clean, not cluttered. By following a minimalist approach, we minimized the number of elements that users have on every screen and created a highly-focused experience.

Minimalist design helps to focus user attention on important elements of your design. EMUI 5.0 Concept by Fantasy (Design concept of EMUI 5 interface) (Large preview)

A Way To Innovate

With so much competition in the phone market, companies invest significant resources to make people try their products. Companies invest in innovation and try to break new ground to attract users and peak their interest. Visual design is often the fastest and cheapest way for a product to innovate.

How Do We Create A Design Language?

For me and my teams, the process of creating a design language, we follow the same rubric we would create any complete consumer product: research-ideate-design-validate- implement. This is how we ensure that the language will work for our target audience.

Research

Often, the VDL is the most important, cornerstone product we create. And like every product you design, research should always be the first. When we started this Huawei project, it was important to understand the opportunities for our design. Jeshua Nanthakumar, a lead UX designer on this project, and his UX research team analyzed all mobile OS available on the market and identified the full range of challenges typically faced by users.

The UI Audit

As I’ve mentioned above, achieving consistency was one of the goals of creating a shared design language. It’s essential to standardize the visual design. That’s why even before starting work on a visual language, we decided to conduct a UI audit. Our goal was to understand the anatomy of the Android OS.

We broke down the whole mobile OS into atomic elements—colors, shapes, shadows, lines, transitions. By decomposing the design, our team was able to see how individual pieces work together and form a greater whole. At the end of UI audit, we had all the elements that make up the digital product (buttons, navigation bars, icons, etc.) grouped into distinct categories.

Understand How Users Perceive The Brand

When working on visual language, it’s essential to have a clear understanding of who you’re designing for and how they perceive your brand. Ideally, brand identity (the way the brand wants to be perceived by users) should match with the brand image (the way users actually perceive the brand). Designers have a direct impact on brand identity. Aesthetic styles, language & tone, iconography, and illustrations — all these are elements of brand identity.

Our goal was to create an innovative design language that feels customized for its audience. To understand how your users perceive the Huawei brand, our team invested in user research. We knew that design language should successfully meet the needs of both Eastern and Western design sensibilities, so we categorized large groups of users and created summaries based on the available information about our target groups. Every summary about our audience had the following information blocks — demographics, what they care about, and their expectations. Here is an example of the summary of the group of North American customers:

• Huawei’s core audience lives both Urban and Suburban environments;
• They are driven by business, social status, and personal organization;
• Age range 30-64;
• Average income: USD $75.000 per annum
• They care about:
  • Being organized and ordered
  • Efficiency and productivity to enable them to enjoy their own time
• Their expectations
  • Contributing to something bigger than themselves
  • Maximizing life and living for happiness

With the idea that design should match the audience’s lifestyle and be extremely refined, we evaluated every design decision in accordance with the needs of our target segments. This understanding will give you a reason for your visual direction.

Analyze Major Competitors

To identify strategic design opportunities, our team conducted the competitors’ analysis. We’ve identified four major competitors who had strong design languages and focussed on identifying their strengths and weaknesses. For example, when we evaluated Apple iOS, we’ve mentioned the following strengths of the language — scalable across devices, great focus on standardization, unique identity — and the following weakness — inconsistency with iconography, overuse of blur effects.

Four major competitors of Huawei at the time of our analysis. Every brand represented a large part of the market and had its own robust visual language. (Large preview)

This analysis helped us to identify four major directions that brands followed when they create products:

1. Empathetic to me (design tailored for the needs of the target audience; design that demonstrates real empathy with the human and truly reflects the audience)
2. Novel design (design that uses innovative visual styles and interaction patterns)
3. Commonplace design (design that utilizes conservative style elements)
4. Standardized for all (heavy standardized design)

We put every brand on the plot with those four directions.

Identifying opportunities for Huawei visual language (Large preview)

This process helped us to identify the opportunities for Huawei language:

• Scalable Design Language
  The language should scale across devices and across third-party developer apps as well.
• Unique Design DNA
  The language should be unique and distinct from the major competitors.
• Be Bold Yet Timeless
  The language should be long-lasting.

Define Requirements For Visual Hierarchy

When UX researchers analyzed typical user complaints, they found that the location of key interactive elements was one of the most common problems that many mobile users mentioned. In 2016 mobile screens become larger and larger, but the location of key functional elements in Android remained the same — the top area of the screen. As a result, users had to stretch their fingers or change their grip in order to interact with the elements.

Thumb Zone: how easy it is for our thumbs to tap areas on a phone’s screen. (Image credit: Luke W) (Large preview)

Today a bottom-area navigation is an industry-standard, but back in 2016, the situation was a bit different. We’ve reached the Huawei engineering team with this insight and asked about the technical feasibility of moving controls to the bottom area of the screen — this area is more comfortable for user interaction. The engineering team confirmed that it was possible to move the elements, and we helped define the new default location for functional elements.

Functional controls are located at the bottom of the screen — in the easy-to-reach area. (Design concept of EMUI 5 interface by Fantasy) (Large preview)

Ideation: Defining A Design Vision

Creating A Philosophy Of Design

Imagine that you need to design a language that will be integrated into products that will be used by people all over the world. The natural language we use in interpersonal communications cannot be separated from a culture because it has a close relation to the attitude or behavior of speakers of the languages. The digital language is absolutely the same — it should look natural for customers in the Americas, Europe, Asia, Africa, and Oceania.

The success of any visual design highly relates to how people perceive it. Many factors are influencing human perception, and the significant part goes to psychology. To create a sophisticated design, you need to consider the meaning of shapes and the impact which they have on users’ minds.

Creating a philosophy of design is extremely challenging, and you cannot do it alone. That’s why I worked with Abigail Brody, a former Apple creative director who joined Huawei in September 2015 as Chief UX design and VP of Huawei Devices. At Apple, Abigail was responsible for iOS design. She was the one who described the methodology of visual language to me.

Together we spend a lot of time trying to find the direction for visual design, and we’ve decided to use the philosophy of organic design as a foundation for our design language. Organic design is centered around using nature as the biggest inspiration.

Organic Design was pioneered by Frank Lloyd Wright who believed in creating harmony between people and nature. (Image credit: museiitaliani) (Large preview)

According to this philosophy, design should help to achieve harmony between people and nature. When we worked on our visual language, we focused on incorporating natural forms (smooth curves and organic forms) in our visual design. As a result, all visual elements, such as buttons, icons, and shapes, had an organic design aesthetic.

Round shapes are one of the things that make organic objects different from non-organic. (Large preview)

Using Motion Design To Create A Distinct Visual Identity

There is no doubt about the importance of the role that motion plays in mobile design. For many product motion serves a purely-functional role—it provides feedback for user action and connects different states of the mobile app together. The well-crafted motion also makes things more attractive, and as we know, attractive things work better (the aesthetic-usability effect says that people are more tolerant of minor usability issues when they find an interface visually appealing).

Our team put high stakes on the motion. Our ultimate goal was to use motion to breathe life into our products — make the interface feel alive and dynamic. We wrote a motion design manifesto with solid design principles. Every animated effect and transition that we wanted to introduce in our design was measured in accordance with the functional and emotional benefits it delivers to end-users.

We know that early impressions of a product design are especially important. And for that very reason our key focus was on creating magical moments — surprise and delight users while they interact with the OS.

This video demonstrates the visual effects we used in EMUI.

Design And Testing: Build, Test, Iterate

Baking Meaning Into Every Design Element/Design Decision

Just like we have rules for using words in sentences in a natural language, we should have rules for using visual elements in visual language. Strong semantics is what makes visual communication efficient.

When a team works on a visual language, it should take two rules into account:

• There are no random visual elements in a visual language. Every element serves a purpose.
• There should be no isolated units in visual language. Every unit in a visual language should be a part of a greater whole.

The animated effect behind the user avatar is used to convey a sense of active call. The animation is both meaningful and pleasurable. (Design concept of EMUI 5 interface) (Large preview)

Experimentation And Design Review

It’s impossible to create a great design from the first attempt. Design is an iterative process, and whenever our team created a new visual solution, they evaluated it by comparing it with previous solutions. The comparison was visual—the screens were laid side by side on a board, so everyone could see the parts that require additional polishing. Team members gather together on informal design reviews where they discuss the pros and cons of individual solutions.

Design review in progress at Fantasy Interactive (Large preview)

Pattern Libraries, Style Guides And Design Principles

Pattern libraries (reusable building blocks such as UI bars), style guides, and design principles (principles that allow developers to propagate design language in their own apps) are essential elements of design language. They are the foundation of the design system — a shared resource that teams use when they create interfaces. The fact that we’ve conducted a UI audit during the research phase helped us to categorize the visual design elements. We’ve established a toolbox for everyone who worked on the project. So, when a new member joins a team, all they need is the toolbox, and they are set to maintain consistency.

There are no random visual elements in a visual language. Every element serves a purpose.

“

Test Early, Test Often

The Huawei EMUI project was an extremely important project for the Huawei Corporation. It was essential to ensure that the language we’ve defined work for the users. And the only way to get this understanding is to test our design as soon as possible.

We’ve followed a simple but effective technique — build, measure, learn. By following this approach, the design team didn’t postpone the testing design until the release. We’ve incorporated visual language into functional prototypes and tested them both inside our group (dogfooding) and outside (with real users). The feedback collected during the testing allowed us to understand what worked/doesn’t work for users.

Sharing the results of testing with product teams at Fantasy Interactive (Large preview)

Implementation

If you have had a chance to use the Huawei EMUI 5 interface, you are probably thinking to yourself, “Um, that doesn’t look exactly like Gleb said!” And that’s true.

Production version of the Huawei EMUI 5 interface. (Image credit: androidauthority) (Large preview)

It is a sad reality that almost no design team is responsible for the implementation of this solution. Unfortunately, a lot of solutions we proposed to the engineering team weren’t implemented properly, or at all. As a result, the design language we’ve created and the design language the end-user saw in Huawei products end up as two different animals. But this is purely my opinion. In 2018, Huawei surpassed Apple in smartphone sales. The UI was a critical element to user confidence.

Based on my experience, the challenge of implementation is common for large-scale corporations. When designers who created the language aren’t invited into the process of implementing this language into the product, the final results will always be compromised. What usually happens is the engineering team follows a path of least resistance — they adjust the design solutions to the technical constraints they face when they start.

Every company needs a top-manager who cares about design and is ready to fight for it. It’s a well-known fact that when the original minimize animation in macOS that was proposed by the Apple motion design team, the engineering team said that it was impossible to implement that. At that time, Steve Jobs insisted that this animation is a must-have for MacOS. As a result, this animation became not only the most memorable transition for first-time users but also one of the things that contribute to good UX in MacOS.

The instantly memorable window animation of the Mac OS (Large preview)

A Robust Visual Design Language Is The Heart Of Good UX

Visual language can have a dramatic impact on user experience. It’s able not only to reduce friction by making UI more predictable but also to create delight. By pairing great form with excellent function, we will have an excellent user experience.

Visual language is a by-product of product design, and it requires a similar design process. It’s iterative and requires validation at every step along the way. When you build a visual language, you establish a new ecosystem for designers, and this ecosystem creates harmony between different teams involved in product development.

(cc, ra, il)

from Tumblr https://ift.tt/2xxwPyM

Smart Interface Design Patterns Checklists PDF

Rachel Andrew

2020-03-30T09:30:00+00:002020-03-30T09:45:31+00:00

Sharing the things we have learned is at the heart of everything we do at Smashing. That goes for the team as well as our authors, and Vitaly has been working on a set of checklists to accompany his workshop, [Smart Interface Design Patterns](https://ift.tt/2QSV4yo). The resulting PDF is 152 pages packed with useful information to help you create better interfaces. And, we’re offering it to you free of charge.

These checklists are based on the work Vitaly has been doing for many years, exploring and examining examples of desktop and mobile interfaces. Learning what works and what doesn’t in usability tests and user interviews.

The cover of the PDF deck on “Smart Interface Design Patterns”, curated by Vitaly Friedman. You can get the entire deck (150 pages) by subscribing to our lovely email newsletter.

In the PDF is a collection of over 150 questions to ask yourself when designing and building almost anything — accordions, drop-downs, carousels, timelines, tables, sliders, advanced configurators, maps, seating selection, and onboarding. They can act as a jumping-off point for discussion, as designers and developers sit together to plan a component, or work through a particular design problem.

An example: Hamburger Design Checklist, with questions to discuss when designing and building a good navigation.

They can help to bring to mind all the fine details that go into interface design. How large should a hamburger icon be to avoid rage clicks? Should sections in an accordion collapse automatically when moving from one to another? Can users tap on the same spot to undo actions when zooming or filtering?

These aren’t golden rules, but rather starting points to help you consider all angles when working alone, or in a team. These checklists have been created after years of work on real projects with real users. Your projects can benefit from all of that existing knowledge, rather than needing to discover these issues for yourself or wait for your visitors to tell you about the problems they are having.

The PDF deck features some examples of design patterns as well. A quick peek at some navigation design patterns without hamburger navigation. Large preview)

Subscribe To Newletter and Get The PDF

To download, we ask for one thing: your real email address. In return, you’ll get the checklist and also our Smashing bi-monthly email newsletter and occasional emails when we have a new book or event that might be of interest. We don’t spam, nor do we pass on your email address to anyone outside of Smashing.

1. Subscribe to our lovely email newsletter.
   Please use your actual email — it’s no fun to land in spam.
2. Verify your email.
   Please check your inbox and click on a button in the confirmation email.
3. Download the checklist PDF.
   Voilà! We hope you’ll find the PDF useful for your work.

Smashing Newsletter

Every second Tuesday, we send a newsletter on front-end and UX. Subscribe and get “Smart Interface Design Checklists” in your inbox.

Your (smashing) email

Front-end, design and UX. Sent 2× a month.
You can always unsubscribe with just one click.

After subscribing, you’ll get a link to the PDF via email. If you are already subscribed, look out for the link in the upcoming newsletter issue coming this Tuesday, March 31. And please, ask your friends and colleagues to subscribe rather than simply forwarding the link on.

There is a huge amount of work that has gone into this PDF. We hope you’ll find it useful in your work. Thank you for your trust, and we hope to release more useful tools for you soon!

(vf, il)

from Tumblr https://ift.tt/2JrDPzQ

How To Make Life Easier When Using Git

How To Increase Mobile Conversions With Category Page Design

Suzanne Scacca

2020-03-22T12:30:00+00:002020-03-26T11:54:33+00:00

For e-commerce designers, it’s easy to focus on designing the home page, individual product pages as well as the checkout experience because they’re obvious stepping stones along the mobile shoppers’ journey. Based on the following data, though, category pages also have a role to play — as the intermediary between search engines and e-commerce websites.

Jill Kocher Brown, the SEO Director of JumpFly, shared the following research at SMX West 2020:

SEO Jill Brown shares research on ecommerce category page vs. product page performance. (Source: Slideshare) (Large preview)

After evaluating the top 30 ecommerce websites, Brown found that product category pages outperform product pages in terms of ranking keywords and traffic.

Considering how many top of funnel customers use mobile search to find what they’re looking for online, we need to put a greater focus on designing ecommerce category pages for mobile.

Today, I’m going to provide you with some tips for designing mobile e-commerce category pages that will get you more visits from search (and, consequently, conversions on-site).

How To Design Ecommerce Category Pages For Mobile

Let’s jump right in:

1. Only Include Essential Elements on the Page

This is more or less what we should aim for when designing e-commerce category pages for mobile:

An example wireframe for an ecommerce category page on mobile. (Source: created with Wireframe.cc) (Large preview)

The elements we need to include above the fold are:

• The navigation bar (it can disappear upon scrolling or stick to the top of the page),
• A descriptive category page title,
• The total number of products in the category,
• Filter options,
• Sort settings,
• At least one or two matching products.

As for why these elements need to be above the fold, let me show you an example.

According to SEMrush (and Google), “kong dog toys” is a popular search term that dog toy shoppers are looking for:

SEMrush reveals that ‘kong dog toys’ has a monthly search volume of 33,100. (Source: SEMrush) (Large preview)

One of the top matching results for the search term is this category/brand page on the PetSmart website:

PetSmart’s product category page for Kong brand dog toys. (Source: PetSmart) (Large preview)

The next four swipes on the page take shoppers through informational sections, videos and subcategories like this:

PetSmart includes a bunch of information about Kong brand at the top of the category page. (Source: PetSmart) (Large preview)

Here’s the problem with this:

For visitors on the website exploring pet products, this information is great as it educates them on the very popular Kong brand. However, for visitors that went out of their way to search for “kong dog toys” in Google, they don’t need all of this information. It’s just getting in the way of the shopping experience.

While I’m not a fan of Best Buy’s inclusion of an ad above the header or a sponsored product as the first shown, the concise layout for the top of the category page is well done:

Best Buy’s category pages are concise in detail and display products right away. (Source: Best Buy) (Large preview)

What’s more, Best Buy includes additional category information (just as PetSmart did). However, it wisely places this information below search results:

Best Buy includes category information below search results. (Source: Best Buy) (Large preview)

Why does Best Buy do this and why should you?

For one, you want shoppers who are new to a product category or brand to still have this information available to them. And considering how well-trained consumers are to look below-the-fold for more information (thanks, Amazon), this works on mobile.

In addition, this is useful for SEO. Without this category description, you’d have to leave it to your meta title and description to influence the rankability of the page. With a search-optimized informational section like this, you can improve the chances of your category page getting to the top of search.

2. Show the Most Convincing Product Details

As you can see, we don’t have a lot of room on these mobile e-commerce category pages. So, when shoppers finally get to the matching product results, you want to make it as painless as possible for them to find the ones looking for.

Here are the details that should be included with each product listing:

• A crystal-clear and attractive product image,
• The product name (along with a short description if the name/brand doesn’t spell out what it is),
• The price,
• The star rating and number of reviews.

The only one of the elements above that’s optional is the rating/reviews and that’s only the case if your site is new and you don’t want a lack of reviews to turn people off.

As for adding other elements to the product listings, be careful with this. If it doesn’t add any value (in other words, it doesn’t make it easier to choose one product from another), leave it out.

Take, for instance, this “kong dog toy” category page from Chewy:

The Chewy category page and results for 'kong dog toy’. (Source: Chewy) (Large preview)

This category page design as a whole is much more concise than how competitor PetSmart handles theirs. However, there’s quite a bit of waste here. Namely, there are two repetitive strings of text that need to go:

1. “More Choices Available” under the product images;
2. “Free 1-2 day shipping over $49 🚚” between the price and rating.

The free shipping notice could easily appear as a dismissable sticky bar at the top of the site. And “More Choices Available” doesn’t need to be here at all. By tightening up the product details, mobile shoppers can more quickly get through the search results that are available.

Here’s an example from BH Cosmetics of product listings that could stand to be trimmed back:

BH Cosmetics displays makeup brush sets on the corresponding category page. (Source: BH Cosmetics) (Large preview)

The “Add to Bag” buttons all need to go. Unless shoppers can look at a single product image and know that’s what they need, these buttons are useless on this page.

I also think the “XX% OFF” is unnecessary. There’s no reason to overcomplicate this. The scratched-out original price and new lower price in pink should be enough to call attention to the offer.

This isn’t the only way to display inventory/options on an e-commerce website, so you’ll have to evaluate each product element based on your specific case.

So you can see what I’m talking about, here’s what a search for “Santorini Greece hotels” shows on Expedia:

The search results page on Expedia for 'Santorini Greece hotels’. (Source: Expedia) (Large preview)

And on Booking.com:

The search results page on Booking.com for 'Santorini Greece hotels’. (Source: Booking.com) (Large preview)

Both include the essential details needed for each listing. However, they include additional details to help users make a decision.

However, there’s a big difference in how this extra information is displayed. On Expedia, users can see that “Breakfast included” is a top feature and that there are only two rooms left at the special price. This is useful information. On Booking.com, however, there’s a mess of details in green displayed directly below the price. It’s difficult to read and I’m not sure all of the details are necessary.

If in doubt, start with the bare minimum. Then, use A/B testing to confirm whether or not other details improve click-through and conversion rates.

3. Manage Your Mobile Category Page Sizes

There are two reasons why we need to be careful about page sizes when designing e-commerce category pages:

• With as many images and data that appears on these kinds of pages, it can severely hurt loading times.
• The more products you display at once, the more analysis paralysis your shoppers will experience.

So, the first thing to do is create a limit on how long the page can get.

While you might be tempted to use infinite scroll or an auto-load that reveals more product images as visitors scroll down the page, it’s better for performance if you use pagination links like Walmart does:

Walmart uses pagination at the end of its product category pages. (Source: Walmart) (Large preview)

Another tip you can take from Walmart is its product view setting. By default, products appear in a grid on its category pages:

By default, Walmart displays category products in a grid layout. (Source: Walmart) (Large preview)

By clicking the button to the left of “Sort & Filter”, users can change the alignment to list view:

Users can adjust Walmart’s category page to display products in a list layout. (Source: Walmart) (Large preview)

While this is more a matter of personal taste, you can see that the list layout does actually display more products at once, so users might find this choice of layout quite useful in speeding up their shopping experience.

One last thing to think about:

You can’t assume that your default sorting method is what all customers automatically prefer. For example, Sephora’s default sort is by “Bestselling”:

By default, Sephora sorts its category pages by 'Bestselling’ products. (Source: Sephora) (Large preview)

As we know, consumers have other things they’re concerned about when shopping for things online. Affordability is one of them, so sorting by “Price Low to High” might make more sense. Reviews and ratings are something else they look for, so “Top Rated” might be their preferred sorting method:

Sephora customers can change how category pages are sorted. (Source: Sephora) (Large preview)

And when it comes to filters, don’t be stingy.

Sephora, for instance, only allows customers to filter by two factors:

Sephora customers can filter category page results by Brand and Price Range. (Source: Sephora) (Large preview)

This assumes that customers are familiar with beauty brands. For those that aren’t, this can significantly impair their ability to find the products they’re looking for as it’ll take more time to consider all the options available.

Instead, what you should do is use your own product categories and tags to provide users with more comprehensive filtering options. After all, if that data helps you better organize and sell your inventory, it should do the same for your customers.

Ulta does a good job of this:

Ulta customers can filter category page results by Purpose, Type, Brand and more. (Source: Ulta) (Large preview)

This isn’t just beneficial in terms of user-friendliness either (though that’s a big part of it). By empowering shoppers to create smaller lists of products to peruse, you’re also enabling them to speed up their shopping experience as options are reduced and page loading times improve.

Wrapping Up

In sum, be mindful of how you design your mobile e-commerce category pages. Even though the research shows that these pages enjoy higher click-through rates and visits from search engines than individual product pages, bad design choices will make your website the exception to the rule.

(ra, yk, il)

from Tumblr https://ift.tt/2UQwNu3