Å·±¦ÓéÀÖ

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 . Ìý

Ìý