ALL ARTICLES

6 Web Design Trends We’d Be Stoked to See More of in 2017

As we enter the year 2017, we here at UpTrending are looking forward to embracing some of the latest and most effective trends in web design that are pushing new boundaries in the area of user experience.

While there are a few web design trends we have no problem turning our back on, there are so many more that represent everything that makes us excited to do what we do. The great thing about working in an industry such as this one is that there’s always someone pushing the envelope and something new to look forward to. 2017 is right around the corner and with a new year comes a new motivation to create, an optimism in what’s possible, and an excitement to be a part of it all.

Here are just a few of the emerging trends we are looking forward to seeing more of in the coming year. While they aren’t necessarily new, they are proving to be the future of web design.

Web design trend #1: Long scrolling single page design

Multi-page hierarchical website architecture makes a lot of sense to our organization-obsessed brains. Like an Ikea closet system, everything has its place, and as long as the hierarchy makes logical sense, the pages on sites designed this way are relatively easy to navigate. But this is a website people, not a book or newspaper. Why are we even talking about pages at all? This ain’t print!

The future of sales and persuasion is storytelling. As new platforms and devices emerge, new methods of presenting information emerge and methods like long scrolling single page sites open up new ways of telling visual stories on the web. When you’re presenting information in a sequential format, it is essential that your users make it to the end where the story they’ve been told comes together and they are compelled to act. Clicking from page to page can be tiresome and boring causing many users to drop off before they’ve gotten the full story, but long scrolling provides opportunities to encourage continued engagement with the story through subtle animations Look no further than The Boat for a devastatingly amazing use of single page storytelling, ripe with rich animation that will keep you scrolling just to see what happens next!

SEO nerds can put your hands down, we all recognize the inherent problems that single page design has with search rankings. Shame on you for assuming we haven’t thought of that and come across solutions and workarounds. We are professionals after all!

Some will even decry the user experience of a single-pager based on navigability. Again, puh-leese! Look no further than this beautifully designed page for a prime example of how to do something as simple as anchoring stops along the way to allow users to quickly access information anywhere on the site.

“But wait!” You cry. Remember this post where you denounced scroll jacking? Yes. However, the thoughtful and intentional structure of this site is worth calling out. While scroll jacking can be inherently annoying, this site’s workarounds are impressive. For example, clicking on any of the section titles in the top navigation renders an immediate response. The site also keeps the footer navigation at the bottom of every section, as opposed to just the bottom of the last section.

Granted, the single page approach doesn’t work in every instance but if nothing else, a long scrolling approach to storytelling can be implemented even into multi-page sites with great effect.

Web design trend #2: Animation-rich microinteractions

They say the devil is in the details. This idiom particularly holds true when it comes to user experience. Sure we put a lot of stock on driving that one, or those few, big interactions that lead to conversions, but lately a great deal of emphasis has been placed on microinteractions, the everyday ways that users engage with a site or app.

Web design microinteraction example
Source: www.dribbble.com/leozakour

Actions like saving, syncing, liking, swiping or even just clicking a button qualify as microinteractions and they happen a lot. But let’s not forget that these experiences are taking place within a digital (read non-physical) world and as tactile creatures we require feedback from our environment. Interacting with digital elements without some visual or audible signal that our input has been received can be vexing and many cases, capable of ruining user experience.

Simple yet rich animations can go a long way in providing the necessary feedback that satisfies a user’s need for validation. It can even prevent problems. Think of payment processing situations in eCommerce over a slow or interrupted internet connection. Especially in situations where a monetary transaction is taking place, users want to feel secure that they’ve “done it right.” Clever or cute microinteractions can even delight users when they aren’t expecting it. Why concern yourself with delighting someone over something so trivial? Because it turns an otherwise boring activity into something exciting and perhaps fun, something they might consider doing again. That sounds like a win to us!

Web design trend #3: Card-based design

Web design Pinterest card based design
Source: www.pinterest.com

One of the more exciting trends we are seeing across the web is card-based design or card layouts. Humans have used cards to encapsulate and disseminate information for hundreds of years. From playing cards to business cards to baseball cards, these rectangular objects have appeared in every culture and time period from here to Ming Dynasty China. In short, cards are a recognizable and familiar concept and when it comes to web design, familiar means intuitive, and intuitive makes for a great user experience.

Web design Kenny powers card based design
Source: www.cardboardconnection.com

Cards are incredibly useful for content-heavy sites because they provide neat little containers to hold and display information just as they do a pitcher’s stats on the back of a baseball card. In fact, they actually work much in the same way as baseball cards do. On the front you have a great image with some context like a name or a title, and on the back, a lot of really granular information, statistics, maybe even a story. In this way, the card layout is more than just a neat-looking design element, it represents an entire framework for how digital products can (and should) be structured. In this way, they are ripe for aggregating content from basically anywhere and capable of displaying it in a consistent fashion.

Perhaps one of the most endearing qualities of cards is how well they lend themselves to responsiveness. Pick up your phone. Remind you of anything? Kinda has the same shape a card doesn’t it? Cards stack with ease and can be expanded to reveal more information. That’s the beauty of them! And while we’re on the topic of mobile applications, can we briefly talk about how brilliantly they work with gestures? Since they’re based on physical, real-world objects, they practically beg to be flipped, tapped, and swiped with little to no instruction required.

Web design trend #4: Authentic imagery and illustrations

“Cool stock photo bro!” Said nobody EVER. As concepts mature, so do their users and mature internet users are hip to lazy tactics like using stock photos to fill space. People gravitate towards stock photos because they are easy but since when did taking the easy route result in something extraordinary? The whole idea of a web page is to communicate value and it’s really hard to do that when you are designing around stock photos that don’t really say much of anything or represent your product or brand.

Web design UpTrending custom designs for shiphawk.com
Source: www.shiphawk.com

If you want to stand out, you’ll need to use authentic imagery that speaks to your brand. Granted that does mean adding photography to your budget and good photographers certainly aren’t cheap but why would you spend money on great web design only to fill it with cheesy photos of suits pointing at charts or random college kids laughing about nothing?

When high quality photographs are out of the budget or simply not all that relevant, look to illustrations as an effective tool to get your point across. Even simple illustrations can make a world of difference in communicating more authentically when they are on-brand and part of a larger, unified system of related illustrations.

Web design trend #5: Vibrant colors

Web design Vibrant colors at Mossterstudio.com
Source: www.mossterstudio.com

Color conveys so much more than we probably realize. There’s a whole psychology to it that is endlessly fascinating, all the more so because it works on such a primal, subconscious level. Computer screens are capable of displaying literally millions of different colors and as of late, designers have gotten pretty bold with their choices.

Perhaps as the designs themselves become more minimal, designers look to color palettes for expression. Compare a more recently built website to those from several years ago and observe soft blues and bright whites give way to vibrant, powerful colors that make bold statements. These fierce, impactful colors allow even the most minimal design to scream.

Designers talk a lot about whitespace but that space doesn’t have to actually be white, does it? Brightly colored backgrounds can have the same effect of drawing attention towards important elements like calls to action while also setting a tone or conveying emotion.

Web design Spotify vibrant colors
Source: www.spotify.com

Vibrancy doesn’t have to be loud and abrasive though. In fact, if anything it requires even more restraint and thoughtfulness to really nail it. Spotify’s tendency towards the duotone effect is a prime example of how to use vibrant colors in a subtle and impactful way without being garish or flamboyant.

Web design Pantone color of the year
Source: www.pantone.com

Oh and by the way, Pantone’s 2017 Color of the Year is Greenery which takes its cues from nature. It’s pretty vibrant.

Web design trend #6: Serif typography

Don’t call it a comeback! Despite years of a sans-serif dominated web, those quaint little tails are popping up more and more as some designers blend classic styles into their contemporary designs.

Web design Typography example
source: www.typewolf.com

The earliest typefaces had serifs as they imitated brushstrokes and allowed those carving the characters into stone to neaten up the ends of letterforms. In the early days of print, they proved more readable in body copy having something to do with typesetting but they proved less so with the advent of the computer screen. Low resolution made it difficult to display the tinier details especially as the letters scale down, but as screen definition improves and technology and trend push web design further towards an image and animation-driven medium, serifs make for great contrast in titles and headlines that stand out from body copy. Sans-serif fonts may work great for comprehension but serifs have impact!

If nothing else, serifs speak to a retro aesthetic and a throwback to print. In that way, they certainly stand out as a relic or an artifact from a simpler time, nostalgic and not to be forgotten. Here are some pretty cool ones.

Again, these trends aren’t all new and they aren’t the standard… yet. They all however, represent the evolution of user-focused design to this point in time while being informed by popular trends and the movement towards mobile computing. Choosing one or some combination of these elements certainly won’t guarantee results; that requires strategy. That being said, we hope to see more of this in the coming year but at the end of the day, we’re just happy to make great websites for great clients.

ALL ARTICLES

Rapid Prototyping for Outside the Box Web Design

Prototyping has been used in engineering and industrial design to validate concepts and build better products for decades. Today’s web designers are using prototypes to create better user experiences and it’s pushing the envelope of how we use the internet in exciting new ways.

Whenever we set out to create something, we tend to have a pretty specific idea of what that thing is going to look like, how it’s going to work and how it will be used. If you’re designing a chair for example, you can rely on some basic assumptions as to the general form it should take and how someone is going to sit in it. While this approach works well for established conventions like furniture, it doesn’t always work out as neatly in the digital realm. Intuitive as it may seem, rarely does our own, personal perspective do a very thorough job of considering how others will instinctively interact with such a product.

Anytime you design something for others to use, your decisions along the way are likely based off of certain assumptions you make about how your users will interact with it. These assumptions aren’t bad or wrong but they can be based on limited information and in some cases, personal bias. The natural tendency is to think about how a product will be used based primarily on the way you, yourself would use it. It’s not wrong, it’s just not necessarily right for everyone.

What’s missing here is the user. Who else can better speak to how they will interact than the very one doing the interacting? This idea isn’t new. We as designers have always sought feedback on how to improve and optimize what we create and often go to great lengths to do just that. It’s just that before, we weren’t seeking that feedback until after we’d finished building. Conceive, analyze, design, construct, test, maintain – this was the way things were done for a long, looooooong time.

Anyone can see that this approach is slow, frustrating, and expensive. Valuable time and money are spent in the laborious pursuit of incrementally improving upon completed products that are difficult to evolve. If the key to improving on the conventional wisdom is faster access to feedback, how then can one tap into those powerful insights earlier in the process? The answer is prototyping and it’s changing the way designers and developers alike approach building digital products.

The better way.

Prototyping allows new features and elements to be quickly validated or abandoned by creating simulated versions that can be put in front of users before they are completely developed. This iterative process ultimately shortens the feedback loop, allowing products to evolve faster and be more refined.

Prototyping allows you to test the assumptions you make about your users by putting low fidelity versions of your product in front of those very users to observe their behavior and elicit feedback. The prevailing wisdom is to do so early and often, building prototypes that merely resemble what you ultimately hope to release and discovering how users actually interact with it. What results is a continual loop of design, user testing and refining until something very near perfection is reached.

In rapid prototyping this process is performed quickly with little concern for the level of detail involved. The faster an idea can be tested and either proven or disproven, the faster the ideal version will be revealed. Anything from simple HTML mock-ups to downright prehistoric paper models will suffice as long as it is testable. At UpTrending, we use programs like InVision and UXPin to create fully interactive, high fidelity prototypes that give us early insight into how users are interacting with our sites and apps.

UXPin menu prototyping example
Source: UXPin.com

The bennies.

So why go through all the trouble of creating simulations of a final product only to throw them out at the end of the day? So glad you asked.

1. Prototyping is efficient.

Errors or usability issues can be detected far earlier in the process saving time and money in the long run. Why wait until you’ve finished building something to see if users respond the way you expect them to when you can find out sooner and make adjustments along the way? Rejecting false assumptions and eliminating features that don’t work earlier in the process minimizes waste.

2. Prototyping improves user experience.

When the end product is designed for (and in some ways, by) users with their direct input rather than expecting them to conform to a designer or developer’s idea of how things should work, a more intuitive experience arises organically. Since it focuses primarily on the user, guess what? The user experience is just plain better! You are, after all, building this almost exclusively for them, so why not let them tell you how best to get them to do what you want them to do?

UX illustratration
Source: Shutterstock.com
3. Prototyping is the future.

Rapid prototyping allows designers to take risks they might not otherwise take if doing so means committing time and resources to building something out completely. Because prototypes are merely simulations, their cost is low but the reward can be significant. What results may be quite different from that which you initially sought to create, but it could be all the better for it. By throwing out personal bias and preconception, we can design outside the box to create better digital products that achieve their intended goals.

Yay, prototyping!

Many traditional approaches to web design fail to give due consideration to the most important element in the design process – the end user. But as you can see, there is a better way. Through prototyping, designers are able to glean valuable insights directly from users which they can then use to adapt and evolve products into their most fully realized selves. And through rapid prototyping, we can shed the conventions and traditions that hold us back to discover new and better ways to improve user experience.

ALL ARTICLES

5 Web Design Trends We’d Like to Say Buh-bye to in 2017

Web design trends come and go. Flash, anyone? As technology improves, the web goes ever more mobile and user experience becomes the focus, these trends are evolving a heck of a lot faster these days. While we can all agree that page counters, scrolling marquees and pop-up windows are dead and done, there are quite a few modern web trends that have already outlived their usefulness.

You yourself may very well be attached to a dying trend. But as hard as it is to let them go, it’s time to say buh-bye to the following web design trends as we approach another new year.

Trend #1: Sliders & carousels

There are a host of reasons why auto-forwarding carousels or sliders are a bad, if not downright bloodless, design move, but chief among them within the realm of B2B web design are usability and conversion.

Auto-forwarding sliders are actually perhaps one of the worst elements you could possibly incorporate into a website from a user experience perspective.

Think about it…

If a user isn’t interested in what’s in front of them, they’re going to scroll away, not sit and wait to find out if the next slide is as droll and irrelevant as the first. Or what if they were interested and you just took it away like a playground bully. Did you expect them go look for it again? Why would you want to tease your users like that? Didn’t you put a lot of time and effort into building this site exclusively for them? Why are you being so mean?!

Then of course there’s that whole thing about the purpose of your site in the first place – driving conversions. Unless you’re some giant brand looking to create a unique digital experience to build brand equity, your site’s users are probably not interested in just hanging out and poking around. Chances are they have a problem and they want to solve it as quickly as possible because then they don’t have a problem anymore and can get on with more satisfying things like watching baby goat videos. In B2B, a conversion-focused approach should do very little beyond encouraging the specific action you want the user to take. Anything and everything on your site should be there for the sole purpose of convincing your user to take the action you want them to. Expecting them to voluntarily sit through a parade of marketing materials is just plain presumptuous. Just get to the point!

And if the theory doesn’t do it for you, how about some data? Guess how many people out there actually click on slider images? The answer is 1%. And 84% of that ridiculously small number ever get past the first one. Are you feeling me yet?

Ok, one more. They’re also bad for SEO. Now what?!

So what should you do instead? Well, that depends now doesn’t it? As sick as you no doubt are of hearing that answer, it’s the truth and you know it. There is no other way to determine what the best method of driving conversions on your site is besides testing and iteration.

Again, we could go on and on about how badly carousels need to go (and perhaps we will), but for now we’ll just say…

buy-bye gif
Source: giphy.com

Trend #2: Flat design

Way back when in the early twenty-teens, flat design was welcomed with open arms, invited to sit at the table and given the biggest helping of mashed potatoes. “It’s so simple,” they said. “So beautiful. So… sophisticated!” But is it really?

Embracing the two-dimensional screens we view websites on for what they are, flat design finally stopped trying to imitate the real world the way Apple did with their skeuomorphic bevels and drop shadows. The minimalistic approach allowed us to minimize by stripping things down and focusing on usability rather than attempting to simulate familiar experiences we may be more accustomed to. Not to mention that websites with flat design look cool as hell and boy are they fast! However, cool as it may be, flat design isn’t without its own usability problems. Remember the Windows 8 Metro UI? Waaaaaaay too flat! It ignored the signals and context we need to interact intuitively with the web.

Then Google came along and figured out a way to put the third dimension and a little motion back onto the screen with Material Design, a framework complete with tools and guidelines that essentially requires its practitioners to drink the Google-Aid. An impressive albeit very Google-looking way of doing things, Material Design is certainly effective and naturally intuitive, but it’s also rigid and restrictive to silly little things like creativity and expression that we designers kind of pride ourselves in.

So what’s next? Well for now, hybridization seems to make sense as a natural starting point. There were things that worked in material design and flat design has certainly proven its effectiveness, so why not go with the best of both worlds? Flat Design 2.0 is here and it combines the user-friendly, mobile-centric, layered approach of Material Design with Flat Design’s super-speedy page load speeds and modern aesthetics. You can see it demonstrated beautifully in this seasonally appropriate example from none other than Google herself. It’s gorgeous and flat but layered and complex at the same time. What more could you ask for?

Trend #3: Complicated or distracting animations

Animation is hot right now and for good reason. It can be a powerful tool that reinforces design concepts and enhances the usability of a website in a number of significant and appropriate ways. If we’re calling this thoughtful and purposeful use of motion “functional animation,” it’s antithesis can only be referred to as dysfunctional animation and ohhhhhh, how it sucks.

New trends are abused, it happens. We were all kids once (some of us still are) and we’re all guilty of falling for the shiniest new toys. We may have grown up, but we’re still susceptible to losing our minds over the latest innovation and allowing our enthusiasm to take over until what once had potential loses all purpose. Animation has purpose though. Unfortunately we forget that sometimes, possibly because the word itself conjures images of our favorite childhood cartoons or the medium’s potential to be limitlessly expressive. But when we do forget this, it just gets in the way and instead of reinforcing design concepts, it distracts, it confuses, and it frustrates. And the last thing we want to do is frustrate our users. Right?

In the future, let’s all agree to validate any and all motion on our sites. You should be able to defend the function of every animation for its purpose in providing context or encouraging action. If you can’t, get rid of it. If you disagree, maybe you should be working for Pixar?

Trend #4: Scroll jacking

Remember the last time you found yourself in a situation you couldn’t control and thought to yourself, “Gee, this is great! I love the restrictive way I’m being forced to experience this!” Having some trouble? I thought so. That’s because you are a human being with free will and a brain capable of making inferences and decisions on your own, not a host on Westworld doomed to repeat the same behavioral loops over and over again. You don’t need anyone to tell you how to use something that should be intuitive in the first place.

Westworld gif
Source: giphy.com

Scroll jacking is like an overbearing mother or a micromanaging supervisor always over your shoulder. It’s annoying and honestly a little bit patronizing. You’ve probably been a victim of scroll jacking if you’ve ever done any research on a new Apple product and been forced to suffer through slide of explanation on why you need their latest device, OS or app. If you’re like me, you’ve at least experience that “Get me out of here!” moment of helplessness and frustration, but beyond the simple annoyance of it all, there are gigantic accessibility and usability issues that only prevent users from interacting with your site.

Websites and digital products should be intuitive. They should not require the guiding hand of “the Builder,” but rather be open to exploration by the user, capable of being experienced in the most appropriate way for that individual or persona. The most important information should be accessible but not force-fed. Visitors should have the freedom of choice to explore that which is relevant to them in the most logical way. Do the tiniest amount of user testing and you’ll find that different personas are likely to interact with the same product in completely different ways. Sometimes people need to be left alone to learn and discover things on their own in order to make a confident and informed decision. Scroll jacking flies in the face of this concept and is just plain arrogant in its assumption that there is a one-size-fits-all best way to experience a site.

Trend #5: Sidebars

This entry may be better suited for a similarly themed post with 2014 in the title. Enough already! It’s time to put purposeless sidebars to pasture.

This is the age of minimalism whether you like it or not. And not just in web design. Flat, Material, Flat 2.0… these are the design trends moving forward and they work because they’ve stripped out unnecessary and gratuitous conventions like the sidebar. You see them all the time on News sites which makes absolutely zero sense because their objective should be to get you to focus on the content, not bouncing from story to story like a caffeine-addled spider monkey. While it’s safe to say these sites likely have ulterior motives for emphasizing page views over time on page or driving a specific action, that should not be what informs the page design of a B2B site with a clear conversion strategy.

Let me ask you something. What do you need a sidebar for? Navigation? What’s wrong with your primary navigation? Well, fix it, don’t just make it redundant. Redundant or irrelevant sidebar content does nothing but distract attention from whatever it is you are supposed to be communicating to the user on that particular page.

When conversions are the name of the game, you should be taking every possible step to maximize them through testing different CTAs and their placement on the page. Convinced that the sidebar is the most appropriate place for that button or form? Doubt it. This company removed their cluttered sidebar, moved their CTAs in line with the content itself and saw a 71% increase in conversions. Remember, it’s all about experience. If a blog post is written with the intent of compelling a user to act, it makes for a far more natural experience after all when the CTA is presented at the exact point at which the user is compelled.

Sidebars are almost always nothing more than a distraction and in this age of minimalism, distractions should be the first things to go!

Bring on 2017

You may very well notice some of these conventions on what are otherwise highly effective sites. In fact, we may have used some of them in our own work in the past. But the past is exactly where we intend to leave these and other tired conventions, replacing them with innovative new experiences that are backed by experimentation and testing. So don’t think of this as the Burn Book from Mean Girls so much as lighthearted constructive criticism intended to make your website better and the internet in general a tidier, less annoying place.

Suffice it to say that we are looking forward to a new year and the web design trends that follow, but no matter how shiny and hyped they may be, we’ll always rely on that which is backed by data and results. Check back soon to see what new web design trends we hope to see take the spotlight in 2017!

ALL ARTICLES

How to Infuse UX with Delightful Microinteractions

When designers think about user experience, we often think of the end product. We ask ourselves: What is a customer’s overall experience with our platforms, websites, and mobile apps? How seamless are their interactions? The best UX happens when the big picture view and the little details work together. Little details should be considered with every single project. It matters where the user clicks. It matters what happens when they do.

So, how can you ensure you’re taking care of all the details? Many designers are zoning in on microinteractions, the small moments that happen inside and around the overall experience.

Today, we’re going to unpack the concept of microinteractions and talk about how UX can be improved by using them.

Microinteractions, UX’s new frontier

We’re constantly interacting with technology. But what defines our experience? How do we get feedback from the platforms and apps that we spend our time with?

The concept of microinteractions was introduced in Microinteractions, a book by Dan Saffer. Saffer believes it’s the little things that turn a good digital product into a great one, and that microinteractions can help revolutionize a product and a brand.

Here’s how Saffer defines microinteractions:

“Microinteractions are contained product moments that revolve around a single use case—they have one main task. Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favorite or “like” something, you are engaging with a microinteraction.”

These microinteractions have a purpose– to provide an update on the status of an action. They’re a tiny bit of communication to let the user know that their action had a result.

For example, if you like a photo on Instagram by tapping twice, a large heart will appear in the center of the photo, and the heart underneath the photo will turn red.

Here are a few other examples of microinteractions:

  • Showpad – When users click the “Filter by Industry” button, it  reverses the direction of the arrow to show the action being taken.
Nov-16-2016 14-18-06
Source: www.showpad.com/case-studies/

 

  • Chartboost – When clicking  on the “Get Started” CTA in the hero area, an animated spinning gear is displayed while the form loads.
Nov-16-2016 14-23-42
Source: www.chartboost.com

 

How to use microinteractions

You probably use a lot of microinteractions already, but are they delighting your audience? The best microinteractions provide a feeling of satisfaction, and make people feel connected.

Here’s how to improve overall UX with microinteractions:

Catalog each and every touch-point

Whether you’re designing a mobile app, website, or software platform, you can start assessing your microinteractions by cataloging each and every touch-point.  What are the actions a user can perform, and what feedback do they get when they perform these actions?

Microinteractions are used when:

  • Things are turned on and off
  • Comments are made
  • Making changes
  • Viewing messages
  • Receiving notifications
  • Liking, sharing, or posting on social media
  • Connecting to other platforms and devices (for example, software integrations and Bluetooth)
  • Sharing progress along the way

By understanding where are the touch-points are, you can figure out where microinteractions fit in. Are you already using them? Are they accomplishing your goals? How can they be improved?

Both quantitative and qualitative metrics should be considered, so be sure to understand how success will be measured. While fun microinteractions are important, they should be also well-thought out and integrated with the overall strategy to accomplish certain goals.

Decide on a brand voice + tone

Most UX designers use microinteractions to provide user feedback. However, the best experiences come when the microinteractions are designed deliberately to delight, fitting into a greater branded voice and tone.

For example: MyFitnessPal’s brand mission is to be as helpful as possible when someone is trying to track what they’re eating. To be as encouraging as possible (and to make sure they’re not annoying), MyFitnessPal automatically turns off notifications if a user doesn’t respond, and provides updates along the way.

Blog 2

Design to delight

Microinteractions are magical when they delight the user, and many companies are finding ways to upgrade their feedback loops. For example, what happens when a user has to wait while your app has to connect to a server?

Rather than letting the user get bored while they wait, provide them with an update. Uber does this by showing you where your car is located while you wait for it to arrive. Many others do this simply by adding an animated progress update.

Source: Chris Plosaj
Source: Chris Plosaj

Wrapping up

When we start a new UX project, we consider both the big picture and the micro details. After all, what happens once someone starts interacting with our designs? They need feedback to know their actions have an effect, and that feedback should delight them.

If you want to make your audience feel good about the overall experience, you should devote attention to microinteractions. These microinteractions can redefine the user experience and take it from good to great.

ALL ARTICLES

How Following the Election Can Improve Your Website UX Strategy

Influencing decision-making is all about persuasion and perhaps no one is better at the use of persuasive techniques than politicians. As we witness this election cycle’s presidential candidates frame their messaging on the campaign trail, perhaps we can learn something from them?

Strange as it may be to admit, running for political office and marketing a product or service are not that fundamentally different. They both require the use of persuasive techniques to convince a decision maker to choose between alternatives. In politics, the decision is between candidates based on their stance on important issues. On your website it may be a decision between competitors or simply to purchase at all. Borrowing a page from the politician’s playbook, creating effectively persuasive messaging that can also work within your website’s UX strategy all boils down to three things – context, framing and loss aversion.

Let’s break it down.

Context

Every decision has context. Context provides the lens through which we interpret information and evaluate decision alternatives. Our values, anticipated consequences, potential benefits, preferences and personal experience influence our decisions in powerful, though sometimes unconscious ways. Political candidates must take into consideration a voter’s race, religion, political affiliation, socio-economic status and other factors as they develop their campaign, often tailoring the message to the specific audience they’re speaking to. In web design, we often capture these contextual clues through the use of personas, a tool that allows us to paint vivid and insightful pictures of a website’s users. They enable us to create user journeys that cater to their shared needs and wants. While this helps us better understand them, the problem for decision makers is that there’s just waaaaaay too much context to consider when it comes time to actually make a decision!

Want to learn more about how personas and user journeys can enhance your website? We’ve got a guide for that!

Framing

That’s where framing comes in. A form of cognitive bias, framing is a way of influencing a decision by presenting alternatives often in terms of potential gains or losses.

The framing effect was first explored by the psychologists, Amos Tversky and Daniel Kahneman in 1981. In the experiment, participants were presented with a life-or-death scenario and given the following identical alternatives framed in either positive or negative ways.

Source: Wikipedia
Source: Wikipedia

What they discovered was that when presented with the choice between a definite gain (saving 200 lives) and a probabilistic one, participants chose the sure bet but when faced with a certain loss (400 people will die) versus a probabilistic one, the riskier choice becomes more attractive.

Loss Aversion

The framing effect experiment demonstrates what economic theorists refer to as loss aversion which states that avoiding a loss is preferable to receiving an equivalent gain. Studies show that people actually experience a loss twice as much as a gain of the exact same amount! This, my friends, is extremely significant when it comes to how you choose to frame your message. And nobody understands this better than politicians.

The framing effect in politics

No one has more at stake when it comes to influencing decision makers than a candidate running for political office. For a perfect example of framing in the political realm, we need look no further than each candidate’s campaign slogans. Each one uses the technique, but their approach couldn’t be more different. Let’s take a look.

Source: Wikipedia
Source: Wikipedia

“Make America Great Again,” Trump’s borrowed slogan implies that we as a country have lost something with even more at stake if we don’t do something about it. In effect, he has been able to convince millions that the status quo is the same as a guaranteed loss. This kind of framing makes a risky option like Trump not only more palatable to those who buy the message, but a necessity in their eyes.

Source: Twitter
Source: Twitter

Meanwhile, Clinton’s primary strategy seems to focus more on what we have to gain. Her slogan, “Stronger Together,” is forward-looking and the tone of her messaging is more optimistic. By framing her campaign in a more positive way and drawing attention to the possibility of an even greater loss at the hands of a Trump presidency, she paints herself as the politically tested safe bet in this election.

The framing effect in design

This technique is something to consider as you develop your own persuasive website UX strategy. Whether a purchaser is considering a new pair of shoes or integrating an enterprise software solution, no transaction decision is made without context. By controlling the framing of the message, UX designers can better lead site visitors towards desired actions and conversions.

Designers are able to create frames using carefully chosen images, graphics and copy that set the stage for the purchase decision. Focusing on what the customer stands to gain or lose from the decision can be a powerful persuasive tool in driving conversion.

How about an example (or two)?

Check out the homepage for Trifacta, a software company that develops productivity platforms for data analysis, management and manipulation and one of our clients here at UpTrending.

trifacta-hero-screenshot-1024x576

First off, doesn’t data wrangling sound like an arduous, complicated process? Don’t you just picture tired, weathered cowboys herding spreadsheets on horseback? If you ask me, it sounds like something I’d rather let a software service do. That idea is reinforced by the accompanying image and headline copy as well – Is Data Wrangling Taking Too Much Time? Excess time and resources spent on extraneous work equals a loss in the form of real money spent on labor. The loss averse user in this case should be quite compelled to avoid it if there’s a better, more cost-effective solution, right?

Or how about another client of ours, ShipHawk, whose SaaS shipping platform gives online retailers real-time quotes, tracking and logistics in one unified system. You can see below how a subtle change in the framing of a message can alter the way you think and ultimately act within the decision opportunity.

ShipHawk Homepage

shiphawk-home-newcopy

You’ve certainly spotted the subtle change in copy between the two homepages but can you see how framing is used to differentiate them? The first message treats the service as an add-on that creates a better experience – a gain; while the second version does the opposite, pointing out the loss in revenue you will experience without it. With these two alternatives employing both positive and negative framing, ShipHawk is able to test which version drives the most actions and make even better decisions in the future based on the results.

Now it’s your turn

Take a look at your website and see if you can find some examples of persuasive language. Evaluate the way you’ve framed your message and play around with different ways of wording it that focus on the potential gains and losses your users might experience. Then, test it. Analyze how people respond to the variations in message and if possible, see if you can identify any common characteristics among those that behave in similar ways. The truth is there may not be one approach that compels every user towards your desired action but with this technique in your toolbox, you can begin to better drive the conversions you are after.