Better User Experience With Storytelling – Part One

Stories have defined our world. They have been with us since the dawn of communication, from cave walls to the tall tales recounted around fires. They have continued to evolve with their purpose remaining the same; To entertain, to share common experiences, to teach, and to pass on traditions.

Today we communicate a bit differently. Our information is fragmented across various mass-media channels and delivered through ever-changing technology. It has become watered down, cloned, and is churned out quickly in 140-character blurbs. We’ve lost that personal touch where we find an emotional connection that makes us care.

Using storytelling, however, we can pull these fragments together into a common thread. We can connect as real people, not just computers. In this article we’ll explore how user experience professionals and designers are using storytelling to create compelling experiences that build human connections.

It Begins with a Story

In 1977, a simple story set the film industry on its side. The special effects technology used to create this story had not been created or used in filmmaking at the time of its writing. The author disregarded what was popular and marketable at the time (apocalyptic and disaster movies) to create his own vision. The film starred unknown actors and the genre had mainly been seen in 1930s serial movies. It was turned down by many film studios and at one point was almost shelved.

Image credit: Wired (Courtesy of Ballantine Books)

The movie, if you haven’t guessed, was Star Wars. The author was George Lucas. Star Wars went on to become one of the most successful films of all time and turned into a pop culture phenomenon. It gave birth to the blockbuster and the trilogy, and completely changed the way movies with special effects were made. Many of today’s most influential film companies were spawned from the success of these movies: LucasFilm, THX, Industrial Light & Magic (ILM), and Pixar.

Star Wars wasn’t a new story though. It drew from mythic archetypes of stories told over thousands of years.

Revealing the Design in Stories

The creation of a story is often viewed as an almost magical or random process. The author sits in front of their canvas, the blank word processor, and begins to type whatever inspires them at the moment. Great stories, though, don’t just happen randomly; they are designed. There is a pattern at work here. In order to be entertaining, have the right dramatic cues, and tap deep into our collective psyche, a specific method is used to build the story. A story that fails to pull the audience emotionally and keep their attention may not have used enough of these patterns as a guide, as shown in the typical story arc below.

The story arc is widely used in screenwriting and novels.

The structure of the story has been around since long before screenwriting was taught. There was a point that it remained simply an unnoticed rhythm in the background of every story. Some aspects of this structure — like the hero’s journey and comparative mythology — were first popularized by Joseph Campbell. He wrote about his discovery in the book The Hero with a Thousand Faces. Campbell was a student of Swiss Psychiatrist Carl Jung, who believed that we are all born with a subconscious idea of what a “hero”, a “mentor”, and a “quest” should be.

Campbell studied the structure of religion and myths across many cultures. What he discovered is that, consciously or not, every story (or myth) told had been created with the same basic formula. This is why great stories transcend even language barriers. It was this conclusion made by Campbell through his research that created large ripples in the waters of myth and religion.

We find the blueprint for “The Hero’s Journey” in films like Star Wars and The Matrix (via Star Wars Origins, Unofficial Site)

The stories we have seen on the silver screen or read about in novels have been able to captivate us by continuing to use these patterns. We talk about dialogue and certain scenes at the water cooler as if they had happened to a mutual friend, rather than some fictional character. All because we became emotionally invested in the characters and the story.

This type of emotional investment is something that brands strive for every day. Starbucks doesn’t want to just sell us a cup of coffee; they want customers to become invested in their story — the ambience, the aromas, the community. The goal is to become the “third place” for people (work, home, and Starbucks). They say, for them, “It’s really about human connection.”

The Power of Emotion

When speaking about stories, we describe the experience in a certain way. It tends to be more of an emotional experience, sometimes affecting us more on a personal level in how we relate to the story. This is much different from the way we traditionally describe the experience with products like websites or applications. Those are seen as more utilitarian and task-oriented.

If we are able to accomplish what we came to do, say transfer some money in a banking application, then it has been a good user experience. In order to achieve our goals, the interface should be usable and function the way we expect. This view is preached by many usability experts including Donald Norman, a professor of cognitive science and usability consultant for the Nielsen Norman Group.

After hearing that if people followed his rules “everything would be ugly,” Norman decided to explore people’s relationship to design. The result was the book Emotional Design. Through his research, Norman found that design affects how people experience products, which happens at three different levels, and translates into three types of design:

• Visceral Design This design is from a subconscious and biologically pre-wired programmed level of thinking. We might automatically dislike certain things (spiders, rotten smells, etc.) and automatically like others (”attractive” people, symmetrical objects, etc). This is our initial reaction to the appearance.
• Behavioral Design This is how the product/application functions, the look and feel, the usability, our total experience with using the product/application.
• Reflective Design This is how it makes us feel after the initial impact and interacting with the product/application, where we associate products with our broader life experience and associate meaning and value to them.

Image credit: D. Alan Harris Photography

There is a lot more to emotion than can be covered here, but understanding those basic levels of processing gives us some insight into why storytelling is so powerful. Consider how the levels of thinking play off each other in an amusement park: People pay to be scared. At the Visceral Level we have a fear of heights and danger. At the Reflective Level we trust that it is safe to go on the ride, and we seek that emotionally charged rush and sense of accomplishment (overcoming that fear of heights) after the ride is finished. Knowing that emotion is so vital to how we think makes it more important to create not just a functional and usable experience, but to seek and make a meaningful connection.

The Basics of Storytelling for User Experience

At a basic level, storytelling and user experience have common elements — like planning, research, and content creation — that can be utilized for effectively developing an experience. Storytelling offers a way for the team to really understand what they are building and the audience that they are creating it for. Stories allow for the most complex of ideas to be effectively conveyed to a variety of people. This designed product/experience can then offer meaning and emotion for its users. The professionals that are currently using the power of narrative in their projects are doing it in vastly different ways. The following sections attempt to outline some of the current usage and benefits of modern storytelling.

Bring Teams Together

User experience professionals typically have to work with people from many different backgrounds. Depending on the type of experience, it might require the effort of everyone from an engineer to a user interface designer. Also, in many cases, the approach in creating websites or applications is to consider the technology, or limitations of that technology, first. Finally, to make matters more complex, larger teams tend be split with concerns regarding their domain. For example, the marketing person is going to focus on their directives and motivations based on their initiatives. This is not always in the end-user’s best interest and results in a diluted and poor experience.

The Disciplines of User Experience by Dan Saffer

The infographic above depicts the many different fields that make up the disciplines of user experience. The user experience team selected to create an iPhone application for the masses would be quite different from one that is developing a medical device used by doctors. As described earlier, the individuals that have been involved in crafting stories have been successful in tapping into a way of communicating that has been around for thousands of years. Utilizing storytelling, user experience teams can also inject emotion and value into the end product for users.

User-Centered Goal

In reading through the storytelling approach, it might seem that the story is just another way of saying “strategy.” With storytelling, though, tied to the story the interactions should communicate is a more user-centered goal. Companies like Apple have used similar methods in their design process to really define what they are building.

Cindy Chastain refers to it as an Experience Theme. She says this theme is “the core value of the experience” being created. Christian Saylor refers to it as finding the Lead Character. Without this user-centered goal, he states, we are just “designing for the sake of designing.”

By centering around a specific theme, or character, the uncoordinated elements of an experience all have a clear goal and purpose. With storytelling, a diverse team creating a website or application can collectively link together the tangible elements and create something that is a meaningful experience and is more than just bits and bytes.

Defining the User

There is a lot of discussion and articles about usability and functionality of websites and applications. Functionality, of course, is important. For example, what good is an airplane if the engine isn’t powerful enough to get it off the ground? If you take a step back though, the more important question should be: How far does the user need to go? If it’s only a few miles down the road, then it really doesn’t matter if the plane is functional, it’s the wrong solution altogether. So, discovering what we really need to build is a key in the initial phase of building the user experience.

Image source: Mishka

When research is finished, we typically move on to create personas as a way of understanding the user and can be looked at as part of creating the story. By building a fictional representation of the user that is based on real research and observation, we are able to empathize with them and really understand their needs. Using the created personas and then creating stories about them, we are able to cast a more meaningful vision of the project.

Persona Sample by Fuzzy Math

The storytelling approach allows us to transfer this research in an anecdotal way. This has shown to have a better recall rate of information. In addition, being able to empathize with users through stories allows for better understanding of the emotional side of the experience. Films and video games deliver successful experiences that impact people on an emotional level. This is something people will begin to expect more from websites and applications that they use everyday. We can evolve the focus of creating a simple task-driven and functional website/application into a valuable human connection. We are, after all, a “global campfire” as Curt Cloninger refers to it. He goes on to say, “But the web is not a global network of connected computers. The web is a global network of connected people. And story-telling is still the most effective way to emotionally impact people.”

The Benefits

Most projects have a lot of documentation outlining their goal and strategy. These come in a set of business requirements, functional documentation, and any other pieces of supporting research/information. Using storytelling can help improve the overall product/experience:

• Puts a human face on dry data
• Can simplify complex ideas for a team
• More efficient team collaboration and purpose
• Insight into the key users
• Setting a project direction faster
• Better communication within large agencies/organizations
• Experience delivers meaning and value to users

Storytelling can help teams focus their efforts on everything from the content on the website to understanding the business problem in a new way. For example, you can define the scope of a project quickly without designing or wireframing screens. Dorelle Rabinowitz shows how The UX team for Yahoo Personals created a story around how a fictional dating couple would go through some specific scenarios. Using this, the team was able to come to a better understanding of what the website should do and the type of experience the users go through. It opened it up from very task- and strategy-based steps to the more real and emotional experience of dating. It is a powerful way to really get the team talking directly to the experience rather than creating documentation that only talks around it.

Happily Ever After: The Reality

Image source: Fallen Princesses by Dina Goldstein

There are many different opinions on what the ideal user experience process should be. Many of them stem from the fundamental approaches developed by Alan Cooper, a pioneer in building software with user-driven experiences. But as technology evolves, so do the approaches and processes to create solutions that meet users’ needs. The variety of approaches in UX are akin to the number of frameworks available for developing software. Much of the time it comes down to what is best for the type of projects a team typically works on.

Your ability to adhere to a process is dependent on many things, like timeline, budget, and business goals. In reality, it’s not always possible to do everything as specifically outlined. Storytelling is a way to connect teams quickly, and gain insight and understanding. The experiences we create communicate with those elements through the design, content, and user interaction. Storytellers have successfully been communicating for much longer than websites have been around — which makes it a valuable tool from the business side of design.

To Be Continued…

In the next part of “Better User Experience Using Storytelling” we will hear from creative professionals leading the way in this relatively new world of combining the craft of storytelling with user experience. We’ll also look at how storytelling can be applied to more than just interactive experiences — we find it in everything from packaging to architecture.

Resources

• Star Wars Origins
• Emotional Design by Donald Norman
• A Practical Guide to The Hero with a Thousand Faces by Joseph Campbell
• “Experience Themes” by Cindy Chastain
• “Storytelling – A Compelling Design Tool” by Dorelle Rabinowitz
• “The Art of Storytelling” by Christian Saylor
• “A Case for Web Storytelling” by Curt Cloninger
• Personas and How to Increase the Quality of Solutions

(ll)

© Francisco Inchauste for Smashing Magazine, 2010. | Permalink | 5 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/01/29/better-user-experience-using-storytelling-part-one/” title=”Tweet us!”>Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: usability, user experience, ux

Making dough or spam? The perplexing case of designing lead generation pages

I spend a lot of time working on large-scale site designs, redesigns, and app designs, so it’s kind of fun when the pressure is on to develop a single lead generation page.

For the purposes of this post, let’s define a lead generation as a single page that is:

• Usually discoverable when a user clicks on an ad
• A page that precedes a much larger site, or a gateway that refers the user into a larger site
• Dedicated to rapidly getting users’ email/personal information for follow-up messaging and/or a trial account
• Almost always makes an offer (discount, trial period, etc.)
• Not always connected in an obvious way to the larger app’s site (a user might struggle to find it again)

In some ways, a lead generation page, is a micro version of the app’s home page or sales flow.

Companies make substantial investments in Google AdWords (and others) to drive traffic to lead gen pages, so these single page designs have hefty expectations to deliver compelling user experience, design creativity, and form functionality

Lead gen page design is not only short, sweet, and mostly self-contained. It’s also a perplexing balancing act between designing for conversion “the dough” and employing some conventions (e.g. not hyperlinking logos back to the app’s main home page, stock photography, microcopy, offers, etc.) that feel more trickster-like “the spam.”

I’ve divided this post into two parts, 3 tips to follow when designing a lead generation page, and a 3-part redesign of an actual lead generation page that’s currently out in the wild.

Part I. — Three Tips to Follow When Designing a Lead Generation Page

1. It’s OK to Design to Dead-end

Your lead generation page has the sole goal of conversion and should be a well-designed dead-end.

By dead-end, I mean that the submit button and legalese (TOS, Privacy Policy, accreditation statement, etc) are the only clickable elements. This means that traditional navigation items like the logo can be there, but should not be clickable. The design drives the user to complete the form without noticing she’s hit a dead-end (which can feel a lot like spam). If a user finds herself clicking about and not getting results, the page isn’t doing it’s main job.

There are plenty of ways to reduce the user’s desire to click items:

• Add a tasteful degree of “dazzle” to the submit button
• Decrease the design effects on the logo that would usually look like it was meant to take the user “home”
• Place the logo in an unusual area: midway down the page, inside the form itself, or towards the lower right corner
• Add texture and effects to the background instead of onto or within the elements like text or iconography
• Write great microcopy that answers questions before a user has time to consider navigating away

2. Go Google “Role Play Gaming” & “Online Dating” & Click on the AdWords

Right now, go Google “Role Playing Games” and “Online Dating” and click on the Google Ads. Change your searches up a little by adding your city “new york” or the word “free.”

Social/role play gaming sites like World of Warcraft feature some of the most persuasive user experiences for lead generation design and layout ideas.

Online dating sites like Match, Chemistry, and eHarmony also feature some compelling user experiences on their lead gen pages. I’ve found that they can also inform you about user response (good and bad) towards both overuse and interesting use of stock/posed model photography.

3. Build to A/B Test From Day 1

Design for a lead gen page is never “final.” These pages are among the most important of your stakeholder’s online properties. They are also among the most easily tested, because your stakeholders are sending planned traffic to them.

• Design for constant optimization
• Test designs out by geolocation, ad campaign, search query, and hundreds of other scenarios
• Determine what equals “success,” the mathematical ratio at which you commit to a split-tested change
• Outline the limits of your design, such as: photo height/width, odd image must-haves and restrictions (e.g. in the use case below we quickly learned that all photos would have elbows showing)
• Identify what is image copy v. html copy (in case your stakeholder wants to optimize the design herself)

Part II. — Use Case: Redesigning a University’s Online Degree Lead Generation Page

For this post, I wanted to concentrate on a single use case, a design for a search query around “masters degree in education online.” I’ve selected this search query for the following reasons:

• Online degrees are heavily promoted with Google Ads (a major investment for many universities)
• Online degrees are perceived as “lesser quality” degrees, so they have a somewhat spammy history
• Online degrees are gaining rapid traction and academic and professional respect
• Many top 25 universities are both entering and refining the online degree space
• I happened to be working on this very challenge

*Apologies, this is a client I’m currently working with (and who I love), so I’ve scrubbed the university’s and program’s branding. I can tell you that it is a top 25 university in the U.S. and they are doing some fantastic, extraordinary things with online learning at the university level. In spite of the strike-throughs I think you’ll see what we’ve accomplished.

It’s important note that the current page (below) has been very successful, so our first job was to not break anything that has been working.

We noticed that:

• Adding the word “prestigious” didn’t make the design feel prestigious, but we felt that the adjective was important enough to provide us with an opportunity to express prestige in a more visual but ambient way
• Aspiring Teachers and Current Teachers were both outlined in yellow, so they looked like clickable buttons, but weren’t, which could be frustrating to a user clicking on them looking for more information
• The color red felt overused and without focus on “action,” there was an added challenge because red is a major part of the university’s brand
• The blackboard made sense, but it added extra noise to the design which was already full of lots of copy competing for the user’s attention
• The design was left justified and didn’t make the best use of the full-screen experience

Design Round #1. — Maintain consistency with the original design elements

For this first revision, we were asked to stay as close as possible to the “control,” we found this challenging, but we did stick to the core elements (chalkboard, teacher, etc.), so we:

• Used different stock photos and incorporated a green chalkboard v. black to add a sense of “friendliness” to the design and make the reds and yellows really pop
• Placed more emphasis on the university and program brands
• Reversed the form color from red to yellow, so that red became our action color and was more balanced by the red in the brand’s logo
• Eliminated the number of items that looked clickable to keep the user focused on the form, but added texture to the background of the page to convey dimension and depth
• Reorganized and tightened up copy
• Added inline validation (which we plan to test)
• Replaced a dropdown menu with two radio buttons and plan to default to aspiring teacher (which is the largest audience) therefore reducing more than 75% of our base user’s need to check off that step
• Added a little “dazzle” to the submit button to make feel like it just had to be clicked
• Added “We promise never to spam you” below the button to reduce fear of sharing information

Design Round #2 — Lose the blackboard and incorporate more authentic imagery

For this second revision, we were asked to try a design without the blackboard and to try to find stock photography that looked more authentic, so we applied some lessons learned around using stock imagery:

• When in doubt choosing stock photography, I recommend going with kids v. adults. Kids are cuter, and it’s easier to get away with a cute child, puppy, or panda, than with an obvious stock shot featuring an adult
• To make the stock photo work better, subtract the original background, integrating it a little more deeply into the design’s background
• Tightened up copy again (I don’t think you can do this enough, and recommend that you revisit microcopy again and again when in the design phase)
• Outlined a testing plan, and made the client aware that any photos in the photo space would need to have arms and elbows, which does limit to some extent the types of images we can test

Design Round #3. — Determine restrictions of stock imagery & develop an A/B test plan

For this third revision, we created a formal test plan and outlined restrictions for swapping out images on the page, namely we learned that this particular design will always need to have arms with pointed elbows.

Lead gen pages do a lot of heavy lifting in terms of converting users to paying members, and yet are easily able to slip into the world of spam-worthy design. I’ll report back on this page’s progress as we test it out in the coming weeks and months. Meanwhile, I’d love to hear your tips and tricks, where you go for inspiration for lead gen user experience, and any design debacles you’ve experienced in lead gen page design.

*Design by my brilliant partners at jjomedia.com

Cet article publié sur 20minutes.fr vous est recommandé par un ami :
Clearstream: pour l’UMP Lefebvre, les commanditaires n’ont pas «payé»

L’équipe 20minutes.fr

20minutes.fr sur votre mobile : m.20minutes.fr et sur votre iphone : iphone.20minutes.fr
Utilisateurs d’iphone : téléchargez l’application gratuite 20minutes.fr sur l’app store: http://itunes.com/apps/20minutes.fr

Sent from my iPhone

uxtreasuremap.pdf (255 KB)

Project SIKULI

http://delicious.com” rel=”nofollow”> Bookmark this on Delicious – Saved by to programming gui testing opensource ui scripting python script sikuli screenshots - More about this bookmark

The Colorful Showcase Of Beautiful Typography

Today, we are showing you 30+ Colorful Examples Of Beautiful Typography. I appreciate to all those talented artist who designed these excellent typography artworks with their efforts, imaginations and creativity to give us a chance to see these creative wonders from their creative eyes. This list is not long in numbers but I promise you that when you start browsing them in details it will surely refresh you. These are the wonder creations of designers who use their creativity with a different angle and approach to get the result that makes a difference.

You are welcome if you want to share more creative typography arts that our readers/viewers may like. Do you want to be the first one to know the latest happenings at  smashingApps.com just subscribe to our rss feed and you can follow us on twitter and do not forget to become our fan on facebook as well. Click on the images to go from where the images has been taken and learn more about their creators and to appreciate them.

lyric-portrait-2nd-attempt

Foundation

RendY Typography

Typographic-Illustration

Integrate the Type

Sweet Typography

Dont-Belive-the-Type

7-3D-Type-Experiments

Gold

Clouds of Design

Design
in the Shade

Rites-of-Water

Diary-Type-02

Verdana-Type Factory

Typography

Spring

eFan Sue

Glossy-letterings

londRina 2009

Colorful Peace

Typography-is-everything

E V O N E

Smoke–Type

Typoholics

Type-Illustrations-of-2009

Dream

Truncator

Grace

Meltie…

eco-environment

Clothing-and-idenitifcation

A-Tribute-to-Yulia-Brodskaya

Steampunk Typograph

Type-as-image

Brought To You By

Do you want to advertise here? Click to get more info…