ŷ������

Good UIs take care of usability, but great ones tell a story. Visual storytelling is one of the most effective ways to create an emotional connection with your user, and the website is a perfect medium for this �� the problem is that most designers aren’t trained in storytelling. The newest edition to our free

The post appeared first on .

Good UIs take care of usability, but great ones tell a story. Visual storytelling is one of the most effective ways to create an emotional connection with your user, and the website is a perfect medium for this �� the problem is that most designers aren’t trained in storytelling.

The newest edition to changes that. explains the art of visual storytelling specifically for web design.

��

��

Illustrating its points with screenshots from 29 companies �� including Tesla, Squarespace, Fitbit, Microsoft, Foursquare, and more �� this covers such topics as:

How the right visuals can improve the way information is processed and retained


Turning your user into a character to immerse them in your story


How and when to apply the three types of imagery �� iconic, symbolic, and indexical �� to UI design


The different approaches to visual storytelling, and when to use each


Guidelines to nurturing your own personal visual style


How to take advantage of the interactive elements of storytelling available only to web designers


Tips for creating your “visual game plan�� before you start

Few user flows happen the way a designer intends. No matter how well flows are designed, some users will find ways around the carefully laid-out path from A to B to CTA —��if nothing else, they’ll use their browser’s back button, or get distracted halfway through and close the tab.

Today we’re going to look at a user flow that suggests a path with forgiving design: a UI that provides many chances for users to proceed along a natural course.

Let’s start with a goal: we want people to buy a product. In this case it’s a shiny toaster but the principle applies to most any goods.

Now, a prototype doesn’t have a real cart. There are no variables, just page flow and animations, so we pre-populate the “what’s in your cart�� page with a few products to give stakeholders an idea of what it will look like. Likewise, all form fields are optional �� most prototypes don’t process any information.

Given all that, we can still apply some best practices to the user experience.

Give users freedom to skip around

One way to get around the problem of losing users�� attention is to create a space for them to go �� one that eventually leads back to the path you want them to take. Here we deliberately let them browse for more toasters with a discrete “keep shopping�� link strategically placed next to the “checkout�� call to action.

A primary call to action—��one that stands out on the page �� cuts down on confusion about where users should go next, but a secondary action gives their short attention spans the chance to use the cart as a tool to compare combinations of prices.

For example, a user may want to compare the price of toaster A to toaster B plus a pair of tongs. Also, using bold images of the product helps prevent shoppers from leaving their cart before they’re ready to purchase. Letting them treat the site as an app encourages them to explore further.

Does a secondary CTA drive people away from the goal? Sort of. But it keeps them on the site.

Offer options along the way

This shopping experience has a twist. Users can either checkout with a discount or without, giving them a sense of control while keeping them along the path to checkout.

It’s also an extra step in the prototype. While it requires additional pages —��in this toaster example, three extras �� trying different scenarios is what prototypes are all about. It also raises important questions about where people get coupons and how the site will react to a special store-wide sale.

One thing to note: provide different options to pay, as well displaying security logos. It’s another way to keep shoppers from abandoning their cart, which is something you’ll certainly want to consider in this type of flow.

Animate, animate, animate

It’s subtle, but it’s there. This prototype has a few interactive features that �� pardon the cliché �� surprise and delight users with motion.

Specifically, thumbnails on the browse become more distinct on hover, and the detail page’s “info�� icon causes more product information to scroll into view. These little bits of engagement will hold users�� attention. The more they find to control, the less likely they are to leave.

Going forward

If our goal is to have users buy a product, we have to understand their fickle nature. We can counter distractions with interactions that hold their attention and give the sense of control. We let them follow any path you want, so long as it’s one that leads them to our goal.

, then give it a spin in your UXPin projects .

has spared no expense. It’s a UI playground, especially on large screens. The ideas behind its navigation has many applications. On company team pages, for example, descriptive text can appear over people’s photos. Color-coded product pages can reveal details and clearer photos of their wares. And individual photos in a gallery can grab attention.

So you could say that there’s a lot of delightful interactions going on the snare users, much like a velociraptor hiding in the bushes. Well, except without the bloodshed.

In this tutorial, we’ll create an interface that uses surprise and delight to encourages users to explore an application.

Delight Users Into Exploring

As we outlined in the free e-book , usability sometimes isn’t enough. But that’s not to say that you should sacrifice usable interactions for a bit of polish. Good interactions and usability should complement any delight you place atop them. One shouldn’t drown out the other. Like a designer and developer, things work out better for the end user if both work in concert not against each other.

Surprising users with an unexpected interaction can create an emotional bond between your app and the users. They’ll want to use your app more and more, going deeper into it.

What we want to accomplish in this tutorial isn’t solely about capturing the attention of users. It’s using that attention. It’s about allowing them to find the information they’re looking for while at the same time having a memorable experience.

Here’s what we’ll create:

(Don’t worry, mobile users: the prototype is perfectly functional. A quick tap will activate the animation, and adding links will simply take users to the appropriate page.)

So fire up UXPin (or ) and follow along. ��

1. Create the UI.

We used nature images from , resized to fit within a 320-pixel-wide mobile-friendly interface. This demo organizes the interface into three sections measuring:

320 x 300 pixels
160 x 200 pixels
160 x 200 pixels

2. Add icons, centered in each section.

UXPin offers many different icon elements. We resized several to be more like illustrations than buttons, then colored them white. Be sure to name them for easy reference later.

3. Overlay colored screens, 50��70% opacity.

Drag boxes into the canvas and resize them to cover the photos. We used contrasting colors for clarity, but you should choose yours to suit. Then turn down the opacity to about 50%, depending on what looks best for the colors you choose.

Next we’ll give each screen three hover animations to:

Change the screens�� opacity
Resize the icons
Move the icons
Toggle the text

4. Hide the color screens

Choose each screen and add an action: on hover, set its opacity to 10%. We stay just above 0% to avoid harsh transitions and maintain a hint of the tint.

��

5. Enlarge the icons

Choose each screen and add an action: on hover, set its underlying icon to grow an extra 40px, 40px. In this case we grow from 95 pixels square to 135 x 135.

6. Move the icons up and left

Elements in UXPin grow from their upper left corners. As they grow down and to the right, to keep them centered we’ll simultaneously move them up and to the left. Choose each screen and add an action: on hover, set its underlying icon to move by ��20px, ��20px.

Then test the project. If all works out, then you’re ready to go!

Check out to see other applications of this pattern.

Conclusion

With this project the goal isn’t just creating a visual spectacle, it’s about guiding users to find more information about our “Nature Park.�� We’re doing that with a visceral experience, one that’s unforgettable without sacrificing usability to do so.

You can take what you learned today and build your own delightful interaction with . ��

��

Moving a user from one place to another in your app shouldn’t be like an afternoon stroll with no particular destination in mind. There is a goal for both you and your users. And you’re trying to move them as effortlessly through your app as possible.

With that, you’ve likely mapped out as many potential flows for your users. You’ve likely even mocked them up visually in Photoshop. But it’s not enough to create a series of static screens to illustrate a flow �� say filling out a contact form �� then expect them to work.

You’ll want to see it in action. In this post, we’ll show you how to create an interactive user flow so you can give it a test drive.

The Importance of User Flows

Before we get into the nitty gritty of animating your static comps, let’s chat a second about user flows. As we discuss in the free e-book , a flow can make or break your app �� especially if it’s mobile, where the experience is broken down into several pages.

Creating an effective flow always starts with your users. We suggest that you create user personas for your potential audience. This will help you understand your users motivations and needs. At the same time, it’ll help you shape how you’ll design your flow. We share more tips and tricks on creating user personas in .

So you’ve created personas, you figured out the flow and you’ve even comped out what they are visually in Photoshop. Let’s say you’ve created a flow to have someone contact the business for more information. Now you’ve got to see if it all fits together.

We’ll dive into taking your comps to animated prototype.

For this, you can follow along with your UXPin account (.

1. Download the plugin

You can import files from Photoshop or Sketch directly into UXPin, complete with named layers. But to do so, you need the plugins.

Look for “Photoshop�� in the bottom left corner of your UXPin dashboard. Tap the link and your browser will prompt you to download the software. Double-click to open it, and follow the instructions. You only need to do this once.

2. Export from Photoshop

In Photoshop, go to File > Generate > UXPin Export. Save the file to your computer. That’s it.

3. Import the file

Choose a project folder in your UXPin dashboard, and drag the .uxpin file you created in Photoshop into the working area. This will upload the file and create a new prototype.

4. Add input fields

Making trendy underline input fields is easy: we just need invisible input fields. To make them, drag a regular input field into place, set its opacity to zero in the color menu, and turn off its border. Don’t forget to change its text color to white or light gray.

5. Add ghost buttons

The ghost-style submit button looks great, but could look better with a little interaction. Let’s delete the PSD version and create our own with a real UXPin button. Drag one out of the elements library. Next, set the button’s background to 0% opacity and its border to 1px light gray. Then set the text color to white, and you’re set. For details check out our .

6. Make the button interactive

Even though it’s obviously a button, users appreciate visual cues to let them know what’s tappable. To that end we’ll add an action that makes the button light up on hover (desktop browsers) or on first tap (mobile browsers). This includes:

Adding a “hover�� action.
Changing its background to white with 100% opacity.
Changing its text color to black.

7. Copy the background to a new page

The flow’s incomplete without a “thank you�� page. To make that happen, copy the background element from the Photoshop file to a new page called “thanks.�� Add an appropriate message. In this case we created one in Photoshop to make sure the text matches. You can drag any JPG, PNG or GIF from your computer into the editor’s canvas to import it.

The result: An entire prototype, complete with layers and layer groups, based on your Photoshop document.

No matter how great they look, mockups in Photoshop will only get you so far with stakeholders. To show the full experience, you need to demonstrate the entire user flow. Design should begin and end with a definite goal in mind: leading users to the calls to action, informing and educating them, or otherwise solving a problem in communication. Interactive prototypes are the best ways to get your idea across before spending valuable time coding up a static mockup.

Take what you learned today and import your Photoshop comps with a ��to make your user flows interactive.

Arguably the most popular type of mobile navigation is the type that appears on demand: Tap an icon and site-wide links appear. But just making them suddenly appear is boring. It lacks panache. Great navigation has a hint of animation that gives the links context �� they’re not just things that appear out of nowhere. They’re hidden just out of sight, ready to help users get around when the need arises.

Today we’re going to show you how to build a fading��navigation that flies in and out on mobile without writing a single line of code that’s sure to wow stakeholders.

1. Start with a plan

Before we begin prototyping, we need an idea of what we’re building. In this case we start with a quick sketch that captures the spirit of the animation.

It also helps to have the content ready �� specifically, which navigation links we need, rather than guessing a number. This demo uses five: home, appetizers, entrees, desserts, and order now.

2. Build the framework

Log in to your UXPin account (or start a ) and let’s get started.

Open the layers palette by tapping its button above the ruler. You’ll need it to select hidden elements as you go.

Then find and drag out the following elements:

iPhone bezel, black
FontAwesome “reorder�� icon
FontAwesome “remove�� icon
Page title (36pt Rock Salt)
Background image (in focus)
Background image (blurred)

We suggest you name each element as you create it �� you’ll thank yourself later. To do so, tap the “i�� icon at the top of the options menu whenever you tap an icon.

3. Create the background

This prototype uses the background images in smart elements so we can reuse them later.

Whether you choose to follow suit or not, drag in two versions of the background image: one in focus, and one blurred. Arrange them in the canvas so the in-focus image is on top of the blurred one. Finally, select the phone bezel and move it to the front.

4. Create the navigation links

Add navigation links (home, appetizers, entrees, etc). To add text to a box, double-click on its center and start typing.

Color each box and add a little padding. Change the typeface and size as you see fit �� in this demo we used 24px Maven Pro. You can make each link the same color, but in this demo we used:

#cf1000
#d82300
#e43b00
#f05301
#fa6801

5. Finish the interface

Add the title (36pt Rock Salt, in this case) and the open-navigation “hamburger�� icon.

Place the close-nav icon on top of the open-nav icon, then hide it with the layers palette.

Shrink the navigation links to fit under the phone bezel’s right edge, and use the “eye�� icons in the layers palette to hide them.

Your layers palette should look like this:

6. Create an advanced animation

Here’s where the fun begins with the .

Add an action to the navigation trigger: advanced animation.

“Step 1�� represents the state that the animation will reach upon completion. This is the point at which the navigation should be fully revealed, the background blurry, and the “hamburger�� icon changed to a “X��.

To start all that, reveal and expand the navigation.

Set each navigation link to appear 50ms after the last. For example, “Appetizers�� begins at 50ms and “Entrees�� begins at 100ms.

Now for a little switcheroo. Hide the open-nav icon and show the close-nav icon. Then hide the focused background and show the blurred background.

While you’re still in the advanced animation add another advanced animation to the close icon. Then immediately tap “save�� in the yellow navigation bar.

7. Fix the order

Finally, make sure the phone bezel is the above the navigation links, but below the open/close icons. This ensures that the navigation links only appear in the app’s working area, not over the phone itself.

Then try it out!

Advanced animations are a powerful way to give interactions a little pizzazz. To set yourself up for success, though, we suggest that you name elements as you go, pay attention to their layer orders, and don’t be afraid to experiment.

Hope you enjoyed this tutorial. Now play with on your own! The possibilities are endless.

Arguably the most popular type of mobile navigation is the type that appears on demand: Tap an icon and site-wide links appear. But just making them suddenly appear is boring. It lacks panache. Great navigation has a hint of animation that gives the links context �� they’re not just things that appear out of nowhere. They’re hidden just out of sight, ready to help users get around when the need arises.

Today we’re going to show you how to build a fly-in navigation without writing a single line of code that’s sure to wow stakeholders.

1. Start with a plan

Before we begin prototyping, we need an idea of what we’re building. In this case we start with a quick sketch that captures the spirit of the animation.

It also helps to have the content ready �� specifically, which navigation links we need, rather than guessing a number. This demo uses five: home, appetizers, entrees, desserts, and order now.

2. Build the framework

Log in to your UXPin account (or start a ) and let’s get started.

Open the layers palette by tapping its button above the ruler. You’ll need it to select hidden elements as you go.

Then find and drag out the following elements:

iPhone bezel, black
FontAwesome “reorder�� icon
FontAwesome “remove�� icon
Page title (36pt Rock Salt)
Background image (in focus)
Background image (blurred)

We suggest you name each element as you create it �� you’ll thank yourself later. To do so, tap the “i�� icon at the top of the options menu whenever you tap an icon.

3. Create the background

This prototype uses the background images in smart elements so we can reuse them later.

Whether you choose to follow suit or not, drag in two versions of the background image: one in focus, and one blurred. Arrange them in the canvas so the in-focus image is on top of the blurred one. Finally, select the phone bezel and move it to the front.

4. Create the navigation links

Add navigation links (home, appetizers, entrees, etc). To add text to a box, double-click on its center and start typing.

Color each box and add a little padding. Change the typeface and size as you see fit �� in this demo we used 24px Maven Pro. You can make each link the same color, but in this demo we used:

#cf1000
#d82300
#e43b00
#f05301
#fa6801

5. Finish the interface

Add the title (36pt Rock Salt, in this case) and the open-navigation “hamburger�� icon.

Place the close-nav icon on top of the open-nav icon, then hide it with the layers palette.

Shrink the navigation links to fit under the phone bezel’s right edge, and use the “eye�� icons in the layers palette to hide them.

Your layers palette should look like this:

6. Create an advanced animation

Here’s where the fun begins with the .

Add an action to the navigation trigger: advanced animation.

“Step 1�� represents the state that the animation will reach upon completion. This is the point at which the navigation should be fully revealed, the background blurry, and the “hamburger�� icon changed to a “X��.

To start all that, reveal and expand the navigation.

Set each navigation link to appear 50ms after the last. For example, “Appetizers�� begins at 50ms and “Entrees�� begins at 100ms.

Now for a little switcheroo. Hide the open-nav icon and show the close-nav icon. Then hide the focused background and show the blurred background.

While you’re still in the advanced animation add another advanced animation to the close icon. Then immediately tap “save�� in the yellow navigation bar.

7. Fix the order

Finally, make sure the phone bezel is the above the navigation links, but below the open/close icons. This ensures that the navigation links only appear in the app’s working area, not over the phone itself.

Then try it out!

Advanced animations are a powerful way to give interactions a little pizzazz. To set yourself up for success, though, we suggest that you name elements as you go, pay attention to their layer orders, and don’t be afraid to experiment.

Hope you enjoyed this tutorial. Now play with on your own! The possibilities are endless.

Hierarchy in mobile design is a tricky thing to master. On the one hand, we want to direct attention. On the other, we don’t want to overwhelm. Two tools will help us address these conflicting goals in a surprisingly simple way.

Let’s start by defining the problem. A hierarchy is more than type-size choices. It’s a series of signposts that guide readers along a page. The mobile world has an additional burden: to help readers decide if the page even has the information they want, of if they should look elsewhere �� and do so in a hurry.

Luckily two design principles provide the answer. You can use size and color �� specifically, value �� to make a hierarchy that works well on mobile devices.

You can follow along and give this tutorial a go in .

For this tutorial, we’ll be making a simple marketing site with the goal of enticing potential customers to get in touch with the business. So let’s get started.

1. Start with content

Whenever possible, we suggest working with real content �� or a close estimation to the content that the design must support. Sometimes that requires a dose of lorem ipsum. If so, be sure to work with a variety of amounts. You never know how many words a heading or section will require.

2. Grab the reader’s attention

Readers start with the “hero element.�� Typically the largest, topmost and highest-contrast element on a page, heroes are at the top of the visual pecking order.

There’s no doubt where to start in the example above. Its placement and size make the hero obvious. The words tell people what the content is about while the typeface, Squanda One, and size show them its serious tone. Beyond that, however, we run into trouble. Everything has the same visual weight, and even changing sections�� colors doesn’t help separate them from each other.

3. Lead the reader through the content

Because our goal is to get users to read a page, we need to direct them down the page. A hierarchy needs to provide both a starting point and the next point. The obvious solution: make the subheads smaller.

The example above does just that, setting each subhead at 24px compared to the hero’s 48px. It works well enough, but is it too small for comfort? In a mobile environment, smaller can be hard to read. That’s where color comes into play.

4. Lower contrast to balance importance

The more an element stands out from its surroundings, the quicker it grabs attention. By contrast, the more something blends in, the less important it seems.

Above, we’ve put the subheads up to 48px, same as the hero text, but toned back their contrast. The result has less impact with the same readability. But maybe it’s too much.

5. Do a little of both

When we pair contrast with type size, we can create more a hierarchy with better readability.

Both the headline and the subhead above have nearly the same type size: 36 and 32px, respectively. But when we apply a shade of gray to the subhead, we immediately play down its importance relative to the headline while making it an easy-to-scan bit of information for users on the go.

That’s the power of this one-two combo: Both size and color can imply importance, but they’re best when used together.��

Now take what you learned and create a prototype with a free account to��.

I’ll let you in on a secret: I don’t care much for the word “clean.�� Too often I’ve heard people �� and not just stakeholders �� ask for “clear�� and “clean�� without understanding what that means. Clear doesn’t just mean less stuff. Clean doesn’t mean empty. They mean removing what isn’t important on a page.

One glance at a complicated form is enough to drive away users with short attention spans. If you want to gather information, two of the fastest design methods are to remove clutter and add a grid. Today we’ll look at both ways to earn trust and improve conversions.

You can also build along with .

Identifying visual clutter

Visual clutter is anything that distracts from the purpose of the page. This can mean graphics, photos, backgrounds, headings, even content �� nothing is above suspicion when it comes to composing a more focused design. And the more focused the design, the more consistent you’ll be with it, as pointed out in the free e-book .

More than that you’ll be helping your conversions. Reducing clutter and choices . When it comes to forms, less is certainly more. It’s been shown that reducing a form down to four fields .

Take this page, for instance:

Photo Credit:

At first glance it’s not too shabby. I’d describe it as “functional yet uninspiring.�� Let’s break out what’s wrong:

A glut of lines try to organize space, but their high contrast goes too far and distracts from the form.
Each blue title creates white gaps between sections �� a redundant division of sections.
Elements are arranged willy-nilly, giving me an excuse to use that odd phrase.
Depending on the browser (and yes, we coded this up) the fieldsets don’t render properly.

Photo Credit:

Here’s the same form with fewer distractions.

Photo Credit:

A few steps to focusing your form design:

As you design each page in a website, ask yourself a simple question: What sets each page apart from the others? This is the purpose of that page �� the reason it exists.
Place that information on a page in an order that makes sense.
Apply branding that makes the site feel coherent, like common colors, iconography, typography, navigation, headers and footers. The site-wide stuff.

This is super easy when prototyping:

Start with form elements, and only form elements, then use additional visuals to suggest which fields belong together.
Start with what your users care about. Finish with anything that supports it.
You know you’ve achieved minimum clutter when removing a single element makes the page unusable.

Adding a sense of order

Now, not every design requires rigid rules. But if you want to make information easier to digest �� think forms and persuasive marketing websites �� then you must add structure without adding clutter. That’s where grids come in.

Take another look at the revised form. There’s more than generous white space going on: implied lines carry through the entire form, regardless of section, to tie everything together.

Photo Credit:

Most elements fall along the same set of lines �� implied lines, because they’re made of empty space. Using the same alignment throughout a design creates an unspoken sense of cohesion. Like they all belong together. Like they were planned. You can trust us with your $299 because we know what we’re doing.

With a grid, there’s no need to guess: the answers are spelled out in columns and rows, or vertical and horizontal rhythm.

Going forward

Eliminating clutter is simple but not always easy. Letting go of your favorite visuals �� well-crafted icons, the delicate and subtle backgrounds, and all the stuff that was fun to create �� takes a good deal of self-discipline. But as many designers will tell you, eliminating the extras will result in a stronger final product. Less is always more.

A nice way to streamline your design, of course, is to prototype them first. Feel free to practice what you’ve learned here by starting a with UXPin.

Imagine loading only the web content that users need on a smartphone. It’s not the future: mobile-savvy designers are making content appear depending on scroll. The ability to make elements load as users follow page is important in mobile design for two reasons, which we described in the free e-book :

It adds a dash of surprise and delight as elements animate in real time.
It only loads resources as users need them, potentially saving bandwidth.

Explaining this to stakeholders in a project requires more than lo-fi sketches. Luckily, with a little planning and a lot of common sense, you can make a prototype that only shows elements as users need to see them. Follow along with your or check out the demo at the end of this post.

1. Design the Elements

This technique is best viewed on long, mobile websites —��but works just as well with long single-pagers on most any screen. In this case we’re creating a marketing site’s landing page with information about their services.

2. Set Up

The first image and subhead are high enough to appear on first load, so they should load automatically. We’ll ignore it in this tutorial. The second teaser, however, is likely to only appear as users scroll down, so we’ll set it to act on scroll.

To start, we need to know exactly where the teaser is. Tap the element and you’ll see its options menu. Tap the “i�� icon and you’ll see its coordinates —��in this case 44 × 500 pixels. That 500 is important for reasons you’ll see in a moment.

3. Create a Scroll-to-Action

Next we give the element an action that occurs when the user scrolls. Best-practice UX will make the element appear as the user approaches it so they don’t scroll right past it. That’s why you need its Y value. We recommend making the element appear between 250 and 300 pixels above its actual position. Here are the specifics for this demo:

Trigger: “Window is scrolled to��
Scrolled to: 200px (500 �� 300)
Action on this element: “Show��

4. Make the Element Disappear

Of course, all this is for nothing if the teaser is always visible. Tap the “i�� icon again, then tap the visibility icon in the upper right corner to make the element disappear.

And that’s it. Preview the prototype to see it in action or we set up for you to try. You can also take what you’ve learned and use it with .��