UX / User Experience:

User Experience is the experience a user has when interacting with a “system.”
The “system” is often a software product, but can also include a physical product, business process, and even your branding and marketing campaign.

UXD / User Experience Design:

User Experience Design is the process of managing a user’s experience with your system.
User Experience designers strive to make interactive systems more engaging, easy to use, and generally better at what they were designed to do.

System + ☺ + Utility = UX

A brief history of UX

How long has UX been around? One could argue that user centered design has been around longer than many people would believe. Judging by the look of this prehistoric hand ax…Possibly even before 1970.

Introducing the iAx. "It just works."

Way back in the 20th century, before the term UX came into fashion, marketers and filmmakers focused on creating highly emotional experiences for targeted audiences designed to generate specific business outcomes. Disney even coined names for such professionals that created user experiences: “Imagineers.”

The application of the term “user experience” as applied to software user interfaces and other business processes, is generally credited to Dr. Donald Norman, a cognitive science researcher and former Apple employee.

With the recent success of companies like Apple, who have historically focused on good UX, an increasing number of businesses looking for a competitive edge are taking an interest in UX design. (Cough…Microsoft…cough)

UX in Action

User Experience Design overlaps in some ways with disciplines including:

• Human Computer Interaction,
• Gestalt Psychology,
• Ergonomics,
• Communication Design,
• Marketing,
• User Centered Design,
• Usability Testing,
• Information Architecture,
• Product Design and
• Human Computer Interaction.

So what is UX in practice? Depending on your intended business outcomes, user experience design decisions can vary greatly. So UX designers use tools like personas, user journeys, and task based design to help refine and focus their design decisions.

While a description of these processes is outside the scope of this article, the overall goal of the processes is to align your technology with utility and emotion, in order to increase value for the user.

System + ☺ + Utility = UX

How Can UX Help You?

There is increasing evidence that the better a product’s UX, the more you can sell it for.

• Apple was able to sell computers for %40+ than the competition
• The original iPhone sold out at $600 per unit
• Starbucks can sell coffee for $5 per cup
• Dyson products sell briskly for 5 times as much as competing devices.

What is UX ?

So what is UX? In spite of all the technical “jarg-o,” the main takeaway at the end of the day is that from a business perspective, UX = Value

UX = Value

How does it work? Well, when you really break it down, entertainment of any sort ultimately boils down to two things: emotion and suspense. Either something makes you feel an emotion, or you’re waiting in suspense for what you will feel next. For example, a beautiful sunset or a joke might make your feel an emotion, and when a character cuts a wire from a time bomb she’s hoping to diffuse, you might feel suspense. Either way, you’re entertained.

It’s only in the absence of emotion or suspense that the viewer feels bored. That’s precisely where Dramatic Rhythm can come to the rescue. What is Dramatic Rhythm? One way to think of it is like a game of emotional ping pong between your character and an outside force, often something in the environment or another character. This back and forth emotional ping pong usually escalates into an in-scene climax.

Example

Take for example,  a character in a tool shed organizing her gardening supplies.  She nicks herself on some pruning shears, and steps back into a rake. The rake flips up and  konks her on the back of the head. Recoiling from the pain,  she lunges forward and falls face first into her bag of  gardening soil. She gets up with a face full of dirt. Her dog stares at her, confused.

Breaking that down, you can see the Dramatic Rhythm moving back and forth between the character and the environment in an escalating pattern of action-reaction.

1. Environment action: Pruning shears nick character’s finger.
2. Character reaction: Lunges back in pain, stepping on rake.
3. Environment action: Rake konks her in the back of the head.
4. Character reaction: Lunges forward from the impact.
5. Environment action: Trips her on something.
6. Character reaction : Falls face first.
7. Environment action: Catches her face with the gardening soil.
8. Character reaction: Gets up with face full of dirt. Dog confused.

A scene like this, done in flashback, might be a fun way to convey the origin story of a wealthy woman who invented cosmetic mud masks. But I digress…

If Dramatic Rhythm is the back and forth energy in a scene between two opposing forces, how does it play out in dialogue scenes? After all, human interaction is more nuanced than the slapstick comedy described above. How would you use Dramatic Rhythm to increase the entertainment value of a scene between two people?

A Sample Scene

Well, it just so happens that Noah G., a talented writer friend of mine currently studying film at USC sent me this short script for some feedback. Here’s the first page:

The Rewrite

My approach to rewriting for Dramatic Rhythm involved roughly three steps.

1. Look for places where the emotional ping pong feels off rhythm. In this scene, Caroline’s reactions seemed like a good place to start.
2. Take entertaining moments that are currently described in a more literary way, and try to increase emotional impact by physicalizing and visualizing them.
3. Look for setup and payoff opportunities.

Here is the first page, rewritten with Dramatic Rhythm in mind.

What Changed?

Here’s a blow by blow.

First we added this visual to the description…

Both the ring, and her worried body language help clarify their relationship, and create a setup we can pay off later. (See below.)

Carol’s reaction to Michael action of seeming to acknowledge the problem in their relationship looks like a candidate for enhancement.

We do that by having her reach out to him.

The added affection of her reaction increases the contract of Michael’s next action, which reveals he’s not even listening.

Adding a physicalization also helps bring that beat out.

Notice how the original reveal that Michael’s actually been talking on the phone the whole time…

Is made more visually explicit by revealing the bluetooth headset.

This gives us a cleaner dramatic window for Caroline’s reaction. Notice how Caroline’s next beat here is being emphasized not by changing changing her reaction, but rather by changing the writing AROUND it.

Two more beats I thought could use some emphasis are Caroline’s satisfaction when she thinks Michael is actually listening, and the reversal when she realizes he’s STILL just talking on the phone. Here’s the original…

In the rewrite, I expanded her beat by adding a line, and Michael’s beat by adding a dismissive gesture like so:

Now the rhythm feels cleaner, and it’s Caroline’s turn to react and move the scene forward.

As a last touch at the end, we payed off the Engagement ring we set up in the description at the beginning.

Because the rewrite explicitly set up the engagement ring at the beginning of the scene, the image of the abandoned ring has more dramatic significance now.

As a reaction, having phone obsessed Michael finally putting his phone down seems like a fitting way to convey the emotional weight of his situation is sinking in.

Summary

So in sum, to enhance the Dramatic Rhythm of the scene:

1. Follow the emotional ping pong back and forth so as to detect and fix disturbances in the rhythm.
2. When adding reactions/actions to smooth out the rhythm, look for ways to physicalize or visualize the dramatic beats.
3. Look for setups and payoff opportunities, which can give the scene a little more structure.

That’s about it. Hope you enjoyed this sneak peek into how the “sausage gets made,” and how Dramatic Rhythm can take scenes that could use a boost, and enhance their emotion and entertainment value.

Enjoy.

As an interface designer, I’m always looking to future proof my designs.

Because devices are getting smaller and smaller, and resolutions higher and higher, my goal when designing Rolandus was to create a resolution independent interface future-proofed against high resolution screens.

It’s built entirely from vectors within photoshop. So you can size it to whatever resolution you like.

Resolution Independent Interface Design

See the live code demo below.

http://jsfiddle.net/FrancoB411/Q77VZ/

UX design case study: rethink autism

The Story

The company that is the subject of this UX design case study, rethink autism, is an online ABA based autism treatment platform. The rethink autism pricing calculator is the interface individuals use to select options for their subscription to the rethink autism service. Pricing calculators are an interesting challenge because as interfaces, they are located at the point in the funnel where customers are most likely to abandon the purchase process.

My core focus was presenting customers with the information they needed to choose the service that best fits their needs while keeping the user experience simple and engaging as possible.

The Specs

The Pricing Calculcator would allow the customer to choose from 18 different pricing tiers. These included different combinations of children, payment schedules and options.

18 different pricing options

Additionally, the pricing calculator’s look and feel should match the overall design of the site, and make choosing a plan as simple as possible.

Design Process

Initially, I considered using a pricing table design pattern like this one.

Pricing tables can present a lot of information in a clear and simple format. And if you download and customize one of the many  templates available online, you can also sometimes save development costs.

Unfortunately, pricing tables with more than three or four pricing options can quickly become confusing. The rethink autism pricing calculator has 18.

Another consideration is the potential customer. While quick and easy decisions can be a benefit for a business person wanting to save time, a parent choosing a treatment program for their child may have different needs.

Initial Sketch

My mom says I'm a great illustrator

Instead, of a pricing table, I opted for a short form with 3 short, simple, personalized questions. How many children to you with to enroll? Would you like extra support? And how would you like to pay?

With three clicks, a visitor can compare the cost of different plans without having to make any commitments. An “Annual savings:” display at the bottom update interactively, showing potential customers the amount of money they will save by paying more up front.

To reduce cart abandonment, the design includes space for a promotional banner offering additional discounts for action within a given time window. The idea of being up front about costs, and offering additional discounts for parents seeking treatment options for their children is something I can get behind.

To minimize clicks, the pricing calculator  interface uses only radio buttons instead of text fields or pull-downs,

The entire pricing process can be filled out in three clicks.

Finished Product

live demo

rethink autism won a 2011 codie award for “Best Instructional Solution for Special Needs Students.”

Congrats to the whole team!

I’m grateful to have had a chance to contribute to rethink autism’s mission of bringing simple, affordable, and effective research based autism treatment tools to organizations and families with special needs children. It’s a great company. If you know anyone with a child on the spectrum, please let them know about rethink autism.

memofire is an accelerated learning system.

You create flashcards about topics you want to learn. memofire then magically re-orders the questions so you only study the ones you were about to forget.

Learning in this way is proven to let you keep more knowledge in your brain longer, with less study. It’s called Spaced Repetition and has dozens of papers supporting its effectiveness.

Most space repetition programs require the user to “rate” the question’s difficulty. Memofire uses a predictive algorithm to automate that process.

memofire helps you take what you want to learn, and remember it forever.

Mockup for memofire Mobile UX windows phone.

I’ll be posting more about memofire’s mobile UX design, an the issues we had to deal with soon.

Stay tuned!