To help you understand the perception of the user, I will introduce some design principles which I think are the most important, and also provide common examples of these principles in practice. Let’s start with the Von Restorff effect:

Von Restorff effect

The Von Restorff effect (also known as the isolation effect) predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered!

Does this ring any bells?

This is the main reason why all call-to-actions (CTAs) look different from the rest of the action buttons on a site or application!

Von Restorff Effect Example

We want users to be able to differentiate between a simple action button and a CTA, in order for them to have a clear understanding what the CTA does, whilst also remembering it throughout their use of the application or site.

“When multiple similar objects are present, the one that differs from the rest is most likely to be remembered!”

Serial position effect

The Serial Position Effect is the propensity of a user to best remember the first and last items in a series.

From left to right, Twitter, Medium, ProductHunt

This is why most applications nowadays ditch the hamburger menu and go for a bottom or top bar navigation, placing the most important user actions to the right or left. In the image above, you can see some examples from popular iOS applications. Each put the “Home” and “Profile” items all the way to the left and right, with serial position effect in mind.

Cognitive load

Cognitive load refers to the total amount of mental effort being used in a person’s working memory. To put it simply, it is the amount of thought you need to exercise in order to complete a specific task.

“Cognitive load is the amount of thought you need to exercise in order to complete a specific task.”

Cognitive load theory can be differentiated into three types:

1. Intrinsic cognitive load
2. Extraneous cognitive load
3. Germane cognitive load

I will touch upon the Intrinsic and Germane types as I think that these are the most applicable to UX design.

Intrinsic Cognitive Load

Intrinsic cognitive load is the difficulty associated with a specific instructional topic. It’s the main reason micro-copy and copy play a huge role in a good user experience.

For example most of the time on applications’ empty states, we prompt users to complete a task. Here, the copy needs to be short, simple and with the appropriate words in order for the user to be able to easily follow the instructions.

From left to right, Stayful, Serist, Lucidchart

Germane Cognitive Load

Germane cognitive load is the cognitive load devoted to processing information and construction of schemas. The schemas describe a pattern of thought that organises categories of information and any relationships among them.

One of the reasons we use design patterns is because they’re something we’re programmed to do by default – so it’s easier for the users to recognise and learn something new if they can discern it into a pattern from something they already understand.

“It’s easier for users to learn something new if they can discern it to a pattern from something they understand”

Hick’s Law

Hick’s Law is the most popular principle, along with the Gestalt Laws.

It’s also very simple to understand and practice. Hick’s Law describes that the time it takes for a person to make a decision depends on the choices available to him or her. So if the number of choices increases, the time to make a decision increases logarithmically.

A very nice example of Hick’s Law that applies to user experience design are lists:

Hick’s Law Example

Law of Proximity

Law of proximity is part of the Gestalt Laws of Perceptual Organization, and it states that objects that are near, or proximate to each other, tend to be grouped together. To put it in simpler terms, our brain can easily associate objects close to each other, better than it does objects that are spaced far apart. This clustering occurs because humans have a natural tendency to organise and group things together.

Law of Proximity Example

“The Law of Proximity states that objects that are near, or proximate to each other, tend to be grouped together”

In the example above, there are 72 circles. We recognise the circles in groups, based on the distance between them. Categorically, we also perceive that there’s a group of 36 circles on the left side of the image, and 3 groups of 12 circles on the right side of the image.

I believe this example makes it clear that there is a need to group things together when designing a UI, as well as the importance of being careful when putting things together since users may naturally think they are associated with each other.

Written by: Thanasis Rigopoulos (via Marvel)
Posted by: Situated Research

The post The Psychology Principles Every UI/UX Designer Needs to Know appeared first on Situated Research.

REWIND: Let’s look at WHY each one of these situations happen and how they relate to poor user experience design. The traffic accident caused by a man who had to take his eyes off the road to lower the radio’s volume. The radio had a poorly designed knob layout and was confusing to our driver. The line at the gas station was so long because the cashier had to use a complex and confusing system to charge clients. The fact that he had to stand in line at all was because the gas pump didn’t offer any instructions on how to properly insert your card. The coffeemaker didn’t work because he had to push the button all the way down but there was nothing to let him know it was turned on or not – no lights, sounds, no feedback. And everything started when his cat stepped on the alarm clock, resetting it without notification.

Can you relate?

I’m pretty sure we’ve all had experiences like this. Our technology and appliances aren’t always very clear in their use. However, we ALL are forced to interact with these failing user interfaces on a daily basis. It’s the TV remote, the pay kiosk at the parking ramp, and especially the custom Excel spreadsheet you use to track expense reports. In order to get what we want from these interfaces, we have to successfully interact with them and that can be difficult.

That said, we have seen a huge increase in good (read: not great) user experiences over the past decade. As we become more and more reliant upon different inputs, we’re bound to learn what works and what doesn’t and that directly affects the development interfaces we use today and in the future.

Assessing the User’s Needs

In 1943, Abraham Maslow introduced Maslow’s hierarchy of needs. In it, he described what we need as humans to fully operate. From physiological (air, water, food) to safety (personal security, financial security, health), love (friends, family, sex), esteem (self-respect, self-esteem), and finally self-actuallization (reaching your full potential).

How does this relate to UX Design in the digital and physical world? Maslow gives us the method to understanding the needs of our users. Take online banking for an example:

1. Make the interface functional. It would mean the user being able to login, pay bills, and view an account summary.
2. Make it feel safe for the user to use. I don’t need to tell you how crucial that is for the banking industry and a user will refuse to use something that even APPEARS to be unsafe.
3. Make it usable. It needs to be easy to navigate between pages and it all the functions exactly as the user expects.
   Note: This is where 99% of all services end, but great UX design goes further.
4. Make it pleasurable. I know what you’re thinking – a pleasurable online banking experience? Crazy! It may seem laughable, but it’s only crazy until someone actually makes one. Then the whole industry will scramble to catch up.

Using Maslow’s hierarchy of needs to create great user experiences

The Extra Effort goes a Long Way

Great user experiences are the result of putting in the extra effort. When usable just isn’t enough. Maslow states that when a person is fully self-actualized, they find contentment as their needs have been all fulfilled. A user finds that same sense of contentment using a product that invested in creating a great user experience. That fully contented user is happier to be a returning customer and brand advocate.

Written by: Anton Sten
Posted by: Situated Research

The post The Extra Effort for Great UX appeared first on Situated Research.

Have you ever experienced a user interface that feels lifeless? Have you created a UI that just seems to be missing…something? 

If that’s the case, you’ve probably experienced a case of Awkward UI.

Awkward UI is a missing a loading indicator. It’s forgetting to tell your customer where something went wrong. Bonus points for doing so with a scary error message. It’s a graph that looks weird with only a few data points. It’s a linear snap into place when introducing a new piece of data.

Still not clear about what Awkward UI is? Here’s a simple real world example: I use Apple TV. A lot. (In fact, I have the latest episode ofStar Wars: Rebels playing in the background as I write this). Whenever I pull up my Purchased movies, I see this screen:

For a second, I get scared. Every time. And I use this screen often. Why am I scared? I don’t see any loading indicator. There’s no indication of activity. In the span of seconds, scary questions race through my head. Where are my movies? Are they lost? Deleted? Hijacked?

Then, after my heart stops racing, the movies I own suddenly and unceremoniously pop into place.

Man, that’s jarring.

Contrast this with playing a movie. After clicking “play” on the Apple remote, I see a nice indicator that Back to the Future is getting ready to play.

Notice the experiential difference?

Creating interfaces that are easily understood by humans puts us product designers right up against the sad fact that computers are lazy. They don’t care about helping people understand what’s new, what to do next, or how to react when something goes wrong.

In a computer’s ideal world, all they’d have to do is throw obscure error codes and scary-sounding alerts when something unexpected happens. Or, better yet, they’d just talk with you in binary.

But we don’t speak binary. We think in flows, and we’re used to the physical world. When a door opens, it swings on an arc. When something travels, you can see it move. When something falls, you can see it bounce.

Awkward UI is when a product designer doesn’t take these things into account. That means that somewhere along the line, some rules have been broken.

But which rules?

The rules of the UI Stack. Let’s talk about that now.

THE UI STACK

Every screen you interact with in a digital product has multiple personalities.

Five, to be exact.

Depending on the context, these personalities are revealed to your customer. In designer-speak, we call these states. And you should consider these states for every screen you make.

That’s because following the rules of the UI Stack and the five states helps you create a cohesive interface that’s forgiving, helpful, and human.

Be honest with yourself. When’s the last time you created a screen that had only one state? Even if you’re creating weather apps (cue Dribbble joke), one state won’t cut it.

The reality is that the world in which we live isn’t perfect, and things go wrong. Servers take time to respond. And your customers won’t always use your product the way in which you intended.

So, as a product designer, you’ve got to take these realities into account.

That’s why every screen you’ll design for your product can have up to five states (click on any to skip to the section):

• Ideal State
• Empty State
• Error State
• Partial State
• Loading State

As your customer moves through your product’s flows, they’re also going to move seamlessly between between each state within those flows.

A real-life UI Stack for a messaging app. Each screen transitions seamlessly between each other.

Want to see the UI Stack in action? You can skip there now if you want.

Skip to the UI Stack prototypes

Surprise! It’s time for a brief interlude in Internet history. Back in 2004, Basecamp, the company-formerly-known-as-37signals, wrote, for me, a groundbreaking piece entitled “The Three State Solution.” (And no, this isn’t a plan to end the Israeli-Palestinian conflict). They outlined that every screen should consider three possible states: “regular, blank, and error.” This blew my mind. And changed how I thought about design for the web forever.

But things change on the Internet. First, there was the AJAX revolution, second, there came mobile apps. Third came the mass consumerization of technology. Demands and expectations for UIs changed. This is my adaptation of that decade+ idea.

With that noted, let’s talk about the Ideal State.

IDEAL STATE

This is the first state I create, since it’s what you want people to see most often. Aptly named, it embodies the zenith of your product’s potential — when your product is providing maximum value and is full of useful, actionable content. It’ll serve as the foundation for every other state you’ll create for this screen. Think of this as the quintessential marketing page or mobile app store screenshot.

Let this state set the tone of each of the other states. Because as you iterate on your core interface, this UI could change completely over time. That’s both the beauty and the risk of iteration.

And this has vast consequences for all of the other states.

All UI states lead to the Ideal State. So start with this first, and let all of the other states fall into place as your designs get closer to solving your customer’s problem.

Still not sure what I mean by the Ideal State? Let’s take a look at some examples to clarify.

Ah, how picturesque. So data. Much photos.

Tinder has one of the best ideal states on the market.

EMPTY STATE

An empty state really is bigger than just one screen. It’s about providing your customer an incredible first impression as you introduce them to your product — to spur them to action, keep them interested, and remind them of the value your product’s going to provide.

There are three broad versions of the empty state. The first is what’s seen by your customer the first time they use your product. The second is what’s seen when your customer voluntarily clears existing data from the screen, like when you attain the exalted “Inbox Zero,” for example. And the third is what happens when there isn’t anything to show, say, for a search result.

Broadly speaking, the risk with empty states is that it’s easy to tack them on as an afterthought. Most of the time, doing this either creates an overwhelming experience or a cold, impersonal one.

As George Takei would say: “Oh, my…”

Coach marks — or instructional overlays — are, in my opinion, the best examples of an under-thought first-time experience. They place the burden of learning on the customer that includes more interface, more memorization, all done with a pretty big mental interruption. What a buzzkill.

Let’s explore the first-time use state more in depth below.

FIRST-TIME USE / ONBOARDING

If a customer is using your product for the first time, this state is your one shot to describe what your customer will see when data exists. It’s your opportunity to encourage action, to help them understand the value they’re going to get out of this screen. First impressions only happen once, and this is your chance to make a great one.

I liken this state partially to what’s known in the literary world as the “Hero’s Journey.” Introduced by Joseph Campbell in his amazing work Hero With a Thousand Faces, it’s the foundation of mythological stories found throughout the world from The Odysseyto Star Wars. Here’s the basic premise:

“A hero ventures forth from the world of common day into a region of supernatural wonder: fabulous forces are there encountered and a decisive victory is won: the hero comes back from this mysterious adventure with the power to bestow boons on his fellow man.”  Propel your customer down the hero’s journey with the Empty State. Call them to adventure, take them through known challenges and the temptations of the abyss, and transform them into a more powerful individual.

But how? Some ideas:

• Lead a horse to water. Be encouraging and uplifting in your copywriting, and speak plainly about what to do. For example, saying things like “Nothing to see here” really says nothing about what your customer should expect, and it’s a bit depressing that this would be the first thing you’d see. Instead, telling your customer the exact button to press and why they should press it is a much more helpful prospect.
• Use your product’s content to instruct your customer about what to do. For example, if you’re building a messaging product, your first-time experience might automatically include a message in the customer’s inbox. The subject line could say “tap to open me,” while the text within the message discusses more about how to manipulate and reply to a message.
• Offer an example screenshot of what the screen will look like in the ideal state. It brings a bit of hope to your customer that they’ll achieve something similar while showing off how potentially useful your product can be.
• Monitor your customer’s progress and respond accordingly. If they pause too long on a certain screen, for example, you could message them with a live chat asking if they need help.

Here are a few first-time use empty states that I love.  

Hipchat comes right out and tells you what to do while hinting at some fun, extra functionality that’s hidden beneath the surface.

Facebook Paper gradually introduces you to its functionality while teaching you key gestures. 

Basecamp has no content to show you — but instead of filling the screen with nothing, it places stand-in content for you to visualize the product’s potential. The completionist in me wants to create projects so I can see this screen full of utopian productivity.

Tapping into Airbnb’s Wish List for the first time gives you this stylishly simple empty state. What I love about this design is that it doesn’t try too hard (fitting with Airbnb’s design language), but also has a very clear call-to-action to get you to start gathering data.

The subject of on boarding and first-time states is a topic big enough for another book. And it just so happens that one exists. If you want to jump into the user on boarding pool, I highly recommend Samuel Hulick’s excellent The Elements of User Onboarding.

USER-CLEARED DATA

The second type of empty state is the case where your customer has voluntarily removed data from the screen. An example of this would be if your customer completed all of the items on their to-do list, read all of their notifications, archived all of their emails, or finished downloading all of their music.

These types of empty states are great opportunities to reward your customers or to spur further action. Achieved “Inbox Zero?” Great! View this amazing photo. Downloaded all of your music? Good, now go listen to it. Sifted through all of your notifications? Here’s something else you might want to read.

A customer clearing data is a customer who’s engaged with your product. Keep them in the flows your product has in place by doing the work for them. Don’t put the onus on your customer to make the next leap.



A vintage screenshot from iOS 6, yes, but one that still illustrates the slight dopamine drip that comes with achieving Inbox Zero. Your reward is a hand-selected Instagram scene from somebody’s coffee shop or sunset — and you can share it out onto the Interwebz, where you’ll celebrate your Inbox Zero and also advertise for Mailbox. Triple win!

NO RESULTS

In cases where your customers are browsing or searching for a piece of data in your product, there’s a chance that they won’t find what they’re looking for. These scenarios are amazing opportunities to infer what your customer intended to find and to make intelligent suggestions.

Amazon employs one of the best examples I’ve seen of this technique. Accounting for misspellings and similar searches, Amazon’s search rarely gives you an empty result. Instead, it’ll give you the closest matching result while showing which terms it didn’t match.

The example where I finally reveal my love for metal. Oh, well, it had to come out sometime.  As for Pinterest, well, not quite the same results as Amazon, but this is Pinterest, after all. Based upon how their search parsed my query, it should be relatively easy for a customer to adjust their search terms to get what they want.

The lesson: don’t just drive your customer off a wall in this state. Give them something they might be able to work with or suggest an alternate path.

ERROR STATE

The screen when things go wrong. Typically, this is more complex than just one screen, since errors can occur in surprising combinations. Error states can include anything from form data that’s missing or invalid; an inability for your app to connect to the server; trying to move forward to the next step without finishing an upload, leaving a page without text submitted, and more.

Error states should also be comforting in the sense that your product keeps all user input safe. Your product shouldn’t undo, destroy, or delete anything entered or uploaded by your customer in the event of an error.

It’s apt to paraphrase Jef Raskin, creator of the original Macintosh and author of The Humane Interface. He writes: “The system should treat all user input as sacred and — to paraphrase Asimov’s first law of robotics, ‘A robot shall not harm a human, or, through inaction, allow a human to come to harm.’ The first law of interface design should be: A computer shall not harm your work or, through inaction, allow your work to come to harm.”

This advice could be well-heeded by some particularly vile offenders of this rule: airline websites. Missing a tiny form field for a credit card security code, for example, frequently results in a page reload that blows away all of your meticulously-entered details while highlighting the missed field with an offensive red hue.


So long, and thanks for all the fish. 

NO! YES! MAYBE? 

Ah, finally, a contextual error message we can follow. Bonus: we get a little sense of humor to humanize it.

Ideal error states occur dynamically without destroying any data input by the user. If a page reload must occur to detect an error, please do everyone a favor and save whatever data — however flawed — was input into your product. Typically, though, page reloads to detect an error is a sign of laziness. For the sake of your customers, ensure you and your developers go the extra mile to handle errors in graceful and accommodating ways.

Additionally, error states shouldn’t be dramatic, nor should they be vague. Remember the “Blue Screen of Death?” The Mac’s “Kernel Panic?” Or — for those computing veterans — “Abort, Retry, Fail?” Each of these error states, by necessity, mark a significant system error requiring a computer reboot or retry. But to this day, each of these error states are well-remembered because of the shock, fear, and confusion each of them conveyed to the end user.


Microsoft’s Blue Screen of Death became so infamous because it simply freaked people out. The blue screen — while better than a red one — was out of context, abrupt, and filled with scary-sounding jargon, even if it was useful in debugging the problem.

That’s because error states must incorporate concise, friendly, and instructive copy as to what to do next. Vague error codes, hexadecimal numbers and confusing advancement options are only going to scare and frustrate the people who experience these errors.

Of course, your product’s audience might consist of rocket scientists or computer engineers. Then these highly-technical error messages may be well-suited to your customer. But as most of the world adopts software in their everyday lives, these types of error messages become less and less appropriate.

It’s simple. Make error messages human, not technical, and suited to your audience. What would you want to be told when something goes wrong?

The error state is such a widespread occurrence, and one of the least-desirable states for which to design. But I promise that if you put as much care into this state as you do into the previous two states, your product will be infinitely more joyful to use — and, more helpful, as you’ll have thought through common customer pitfalls and solved them in advance.

PARTIAL STATE

The difference between an error state and an ideal state is like night and day. But how does the screen look when there’s only one row of data? A few photos? A half-completed profile?

The partial state is the screen someone will see when the page is no longer empty and sparsely populated. Your job here is to prevent people from getting discouraged and giving up on your product.

This is a great opportunity to design micro interactions to guide people towards the full glory of the Ideal State. It’s a journey on which you take your customers to help them realize the true value of your product. This implies an accomplishment — that your customer has spent some time in your product to see a glimpse of its potential. Keep them hooked.

Some game design principles can be useful here. I’m not referring to the scourge-like practice of making your customers gather crystals to advance a la Clash of Clans, but instead building what is called acceleration into this state of your product.

It’s a game design term that helps a player visualize how they’ll be more powerful in the future, guiding them along a predefined series of tasks to complete to achieve this vision. The trick is to make the player not realize they’re performing what could be perceived as tedium in order to extract the maximum value from your product.

“Players entering an acceleration phase aren’t thinking about the tedious repetitions they have to perform in order to level up, they’re just doing them, and enjoying the accelerating rate of the results…Rather, those players are caught up in a future in which their character(s) will be powerful in a way they can’t even understand yet. To put it more technically, they’re inferring an exponentially increasing power structure that vanishes beyond their player prediction horizon. It’s not exactly the same as traditional flow, but the exhilaration of the players is subjectively very similar.”

Here are some great examples of the Partial State in the wild…


LinkedIn’s famous “Profile Completeness” bar, encouraging you to perform exact tasks to achieve 100%. Completionists cheer.


Dropbox shows you how close you are to achieving some extra storage space, which is a major attractor for most Dropbox customers, I’m sure. Not only does Dropbox show you how many steps you have left to complete, but these steps also have the side effect of making customers more valuable through education and activation.

LOADING STATE

It’s easy to overlook this state, and many product designers insert it as an afterthought. But there’s a very real burden that comes with setting expectations. When your app is loading data, waiting for an Internet connection, or transitioning to another screen, you must take great care to be mindful of how you represent situations where you’re fetching data. This can consist of an entire page takeover, lazy loading of content panes, or inline loading, potentially used when one might look up username availability from a form field.

And the perception of loading is equally as important. Too often designers simply fill their screens with whitespace and spinners, placing a massive burden of responsibility on the content that isn’t there. This, in turn, encourages your customers to figuratively watch the clock — putting the focus on the indication of progress versus actual loading progress being made.

Such is the belief of Luke Wroblewski, a product design expert that’s led design teams from eBay to Yahoo! to Google, where he now resides after selling his mobile polling startup Polar.

Wroblewski and his team discovered that after implementing a series of loading spinners for each poll, Polar customers began complaining that the app seemed slower, saying things like “There seems to be an excessive amount of waiting around for pages to refresh and load — it doesn’t seem as quick as the previous version.”

Wroblewski realized that:

“With the introduction of these progress indicators, we had made people watch the clock,” he said. “As a result, time went slower and so did our app. We focused on the indicator and not the progress, that is making it clear you are advancing toward your goal not just waiting around.”

SKELETON SCREENS

This realization directly resulted in the creation of what he calls “Skeleton Screens.” It’s a technique now being used by Pinterest and Facebook in both their web and mobile versions.

Skeleton Screens are an innovative take on the loading state — it places the focus on the content as it loads versus the fact that the content is loading. This is accomplished by displaying the basic structure of the page and gradually filling in the missing pieces as they download. The beautiful thing about this technique is that it can eliminate spinners completely. And it can increase the perceived performance of your product.


Luke Wroblewski’s app, Polar, and its skeleton loading screens.

Pinterest, while employing the use of the Skeleton Screen loading state concept, put a unique twist on its implementation: deriving the “average color” of the pin’s image and using that color to fill in the pin’s background. So before the pin’s image loads, you feel like you get a preview of what the pin will be. 

Facebook invented a similar technique used in their mobile app Paper and later implemented it into their web version. Combined with what they call the “shimmer effect,” the Facebook experience will display a stylized Skeleton Screen with shapes resembling content. And to communicate that the content is loading, the shapes will pulse with a shimmering effect.

ASSUMING SUCCESS WITH OPTIMISTIC ACTIONS

“Nobody wants to wait while they wait,” said Instagram co-founder Mike Krieger in 2011 as he described how his engineering efforts achieved the app’s perceived speed.

Krieger, in fact, pioneered the notion that actions should be performed “optimistically” by a product. By assuming an action’s success, actions appear to take place much faster.

Take the case of “liking” a photo or leaving a comment. In both cases, the action is registered as completed instantly from the perspective of the customer. And in the background, the product is making server requests to actually complete the action. 

Optimistic actions can also greatly help to reduce the perceived speed of uploading media. Instead of uploading when a user taps “Done” at the end of the photo upload flow, Instagram starts uploading the photo immediately after a filter is selected. While it’s not an optimal engineering solution — and data might get thrown out if your customer backtracks — it makes uploads appear to happen very quickly. Following the “move bits when no one’s watching” mantra can help make your product’s speed one of your assets.

You’ve seen a number of examples of the UI Stack and its five states in isolation. But how would they work together? How does the UI account for the transitions between each state?

That’s the power of the UI Stack. These states don’t exist in vacuums. They exist on a vertical axis that can be called at any time by the product. It’s your job not only to account for each of these states, but to dictate how the screen moves between each state.

I’ve created a hypothetical messaging app to illustrate these ideas.

Why a messaging app? Because it’s not an immediately obvious example of these states at play. But I think it’s a great example of how even temporal UIs like messaging interfaces follow the rules of the UI Stack. And, even further, it’s an illustration of how immense our responsibility is to ensure that each screen’s states flow smoothly from one to another.

So what do we have to deal with in a messaging app?

We have to account for when there’s no messages. This is our blank state.

Our partial state is when only one party has sent a message.

Then, there’s receiving a message — the typing indicator. This, in other words, is our loading state.

But wait. There’s another series of loading states — when we send a message out. And then there’s the delivery confirmation.

An error can happen along the line, too. That’s when our message fails to send.

And you can’t forget the mechanism by which we recover from an error, and attempt to send again. There’s another version of the loading state.

Finally, we reach our ideal state: when messages turn into a conversation.

A HYPOTHETICAL EXAMPLE

Let’s say Marty and Doc just exchange numbers and Marty wants to message Doc about what he’s just seen at Twin Pines Mall.

Since there are no messages, we have an opportunity to exploit the empty state and encourage the customer into acting how we want them to act — in this case, that’s sending a message.

But what happens to this state when a message is sent? We need to gracefully wash away the empty state and shift it into a partial state: in this case, that’s when Marty sends only one message.

Let’s fast forward to when Doc has responded. He’s sent one message — but he’s not done yet! Hence the typing indicator, another form of a loading state.

Once the typing is done and the message is sent, we transition out of the typing indicator and bring in the new message, pushing the others out of the way.

But what about when Marty wants to reply back? First, we have to show some state awareness when there is text in the field — notice how the “Send” button turns from grey (a disabled state) to blue (an enabled state). Then, once we send the message, another loading state occurs for our send process. We keep the message dimmed during this time because there’s not a successful delivery yet — until the “delivered” stamp tells the customer that all is well.

But what happens if the message isn’t successfully delivered? Here comes our error state. The red marker replaces the loading spinner, and we’re left with a message in the “undelivered” dimmed state. Tapping (or, in this case, clicking into the Quartz Composer prototype) on the undelivered message retries the send. We’re in luck this time, and the message fills in after the angry red “!” disappears and we can register a delivered indicator.

HERE, IN THE REAL WORLD…

And that, my friends, is the UI Stack in action. It’s the five screen states and the seamless transitions between them. Without these transitionary elements, we risk confusing or surprising our customers as new states appear and disappear. Making people uncomfortable and confused isn’t exactly in our job description, now, is it?

In the end, the implementation of these states requires an intense collaboration between design and development. Invest time in each of them — they all work together to create the best, most holistic experience for your customer.

(If you liked anything in this post, I’d be grateful if you shared. Just one click to Tweet (can edit before you send).)

A PLOT SUMMARY OF THE THRILLING TALE YOU JUST READ

• Don’t get stuck designing only for your Ideal State and tacking on the other states. Your product solves a problem. How can each screen’s state handhold your customer to that goal?
• Read Samuel Hulick’s The Elements of User Onboarding.
• Make your loading states a part of your prototyping efforts. They’re a part of your product’s experience and shouldn’t be tacked on last. Huddle with engineering to figure out ways to make perceived — and, if possible actual — performance better.
• Spend time thinking through edge cases that can trigger errors. How will you handle them? What’s the friendliest response you can give your customer? There is a cost / benefit tradeoff here, but at least cover the most painful errors and go to great efforts to preserve your customers’ data.

Written by: Scott Hurff
Posted by: Situated Research

The post How to Fix a Bad User Interface appeared first on Situated Research.

The scarcity principle is a well-documented social-psychology phenomenon that causes people to assign high value to things they perceive as being less available. In real life, Black Friday is a good example of scarcity: a sale that occurs on only one day of the year (the day after Thanksgiving in the United States) and consists of a limited number of products offered at discounted prices. In the case of Black Friday, the mobs of eager customers are most often a good thing for retailers…until the mob turns violent.

Scarcity Interface Pattern Examples

Limited Time and Quantity

Limited Inclusion

Limited Information

Background of the Scarcity Principle

The Scarcity Principle is 1 of 6 influencing principles coined by Dr. Robert Cialdini, a professor at Arizona State University famous for his 1984 book “Influence: The Psychology of Persuasion.” Cialdini’s book is a study of the psychology of compliance. As a psychology professor, he and his students conducted numerous research studies to identify and prove the 6 influencing principles discussed in his book.

Scarcity is largely effective because of a cognitive bias known as loss aversion, first demonstrated in research conducted by Daniel Kahneman and Amos Tversky. Kahneman and Tversky determined that people put more subjective value on loss than on gain and thus strongly prefer to avoid losses instead of acquiring gains. In other words, the pain of losing $100 is perceived as bigger (in fact, twice as big according to Kahneman and Tversky) than the satisfaction of gaining $100.

The strong tendency to avoid losses explains why scarcity is so effective: we feel that if we don’t act upon the scarce product or information, we lose it. For example, if a person is shopping for airline tickets and finds a flight that meets her criteria, but the description indicates this is the last ticket at that price, the person might buy the ticket for fear of losing out even if she wasn’t quite ready to book yet. (The agony of losing the current $100 discount will only be overcome if the user could save $200 on some future deal, and that’s sufficiently unlikely to happen that many users prefer to act to lock in the savings.)

Scarcity is a particularly effective persuasion tool because what, specifically, is scarce can take several forms: quantity, time, or information. Knishinsky ran an experiment that proved the additive effects of these factors upon persuasion. In his study, salesmen were able to double order sizes when they told wholesale beef buyers that the supply would be scarce in upcoming months. The most incredible finding of this study is that they were able to increase order sizes 6 times when they altered their pitch to not only indicate scarcity of supply, but that this information was a secret and only being divulged to the buyer. The double-scarcity pitch (low supply, secret information) was 3 times more compelling than the single-scarcity pitch (low supply)!

When to Use the Technique on the Web

Expediting Desirable Actions: If you find that most people who convert on your site visit your site more times than you think should be necessary before converting, you might try using scarcity to reduce that time lag

Increasing Perceived Value: Indicating that an item has low availability or using photographs that show limited quantity can impact end-users valuation of the object. For example, in fine dining, small portions on large plates can imply that the ingredients are rare and, therefore, should be more expensive.

Testing Scarcity

The most significant risk with using scarcity is decreased trust and credibility. If your users suspect that the presented scarcity isn’t real, they could go elsewhere. That’s why it’s important to test scarcity as a motivational device before fully embracing it. Here are some questions that you should aim to answer, together with techniques that you can use to do so:

Conclusion

Scarcity, used in moderation and with true information, can encourage users to move more swiftly toward converting on your site. However, the technique has been adopted by so many sites, that its impact may be decreasing. Therefore, we do encourage design teams to test pages and flows with and without scarcity-based elements to determine how the technique impacts conversions, perceptions, and long-term business goals.

References

Robert B. Cialdini, Influence: Science and Practice. Pearson Education Inc., 2009.

Amos Tversky and Daniel Kahneman. Loss Aversion in Riskless Choice: A Reference-Dependent Model. The Quarterly Journal of Economics. Vol. 106, No. 4 (Nov., 1991), pp. 1039-1061.

Knishinsky, A. The effects of scarcity of material and exclusivity of information on industrial buyer perceived risk in provoking a purchase decision. Unpublished doctoral dissertation, Arizona State University, Tempe, 1982.

Daniel Kahneman, Thinking, Fast and Slow. Farrar, Straus and Giroux, New York, 2011.

Written by: Jennifer Cardello, Nielsen-Norman Group
Posted by: Situated Research

The post Scarcity Principle: Making Users Click RIGHT NOW or Lose Out appeared first on Situated Research.

This Place, an agency that specializes in creating user interfaces and experiences for programs used in the medical industry, developed a software called MindRDR that allows Google Glass to connect with the Neurosky MindWave Mobile EEG biosensor, a head-mounted device that can detect a person’s brain waves. 

EEG stands for electroencephalography, which is the measurement and recording of electrical activity in the brain. EEG biosensors have been around for decades, but until recently they were very expensive. Neurosky is a Silicon Valley company that sells EEG biosensors, some for as little as $79.99 from Amazon.com.

The system works by pairing the EEG biosensor with Google’s $1,500 Glass device using Bluetooth. Once the connection has been made, the user fires up MindRDR, which takes what the EEG biosensor detects and converts it into commands that Glass can process.

After turning on the app, users will see a camera interface on the screen of their Google Glass. They can then pick a subject, aim their head in its direction, and concentrate on it while Glass displays a meter showing the level of their brain waves. The more intently a user focuses, the higher the meter climbs until it reaches the top, triggering Glass’ camera. By repeating the process, users can direct MindRDR to upload the photo to one of their social networks.

For now MindRDR can only be used to snap pictures, but This Place Chief Executive Dusan Hamlin said he hoped the agency would continue developing the software so that it could eventually help users overcome mobility limitations. Specifically, Hamlin said he would like MindRDR to help people who suffer from locked-in syndrome, in which a patient has lost motor control but remains aware and alert, as well as quadriplegia.

“The ability to be able to use their mind to make outputs to a device could be a huge thing for them,” Hamlin told the Los Angeles Times in a Skype interview.

But the possibilities for MindRDR extend beyond the medical field. Hamlin said he sees MindRDR as the launching point for a world where people can interact with their digital devices by simply thinking about what they want. To that end, This Place has uploaded the code for its software onto GitHub, a popular website used by developers to share code they create with others for free.

“What we’ve done is just scratch the surface, and we hope that we’ve inspired people to build on what we’ve started,” Hamlin said.

Written by: Salvador Rodriguez, the Los Angeles Times (via Presence); more information is available from This Place and an article in BBC News
Posted by: Situated Research

The post London Firm Creates Mind-Controlled Commands for Google Glass appeared first on Situated Research.

In comparison, the research found there was “little difference” in levels of aggression when the games themselves depicted violence. Overwhelmingly, the deciding factor was “how the volunteers were able to master the electronic game after 20 minutes of play”. 

The study was conducted by research teams from University of Oxford in the UK and the University of Rochester in the US, with the findings published in the Journal of Personality and Social Psychology.

The experiment is believed to be the first study of its kind and consisted of six controlled lab tests involving university students. The candidates played a simple puzzle game the researchers were able to manipulate, increasing its difficultly or making the control scheme less intuitive or responsive.

“To date, researchers have tended to explore passive aspects of gaming, such as whether looking at violent material in electronic games desensitises or aggravates players,” says Dr Andrew Przybylski, co-author of the study, from the Oxford Internet Institute. “We focused on the motives of people who play electronic games and found players have a psychological need to come out on top when playing. If players feel thwarted by the controls or the design of the game, they can wind up feeling aggressive. This need to master the game was far more significant than whether the game contained violent material. Players on games without any violent content were still feeling pretty aggressive if they hadn’t been able to master the controls or progress through the levels at the end of the session.”

In addition to the lab tests, researchers conducted a survey of over 300 players, focussing the three games they had played most in the last month. Players were asked which they had enjoyed the most, and why. Again, the research demonstrated that some players experienced aggression when they didn’t feel good at the game. Furthermore, these feelings of aggression had even spoiled their level of enjoyment.

“The study is not saying that violent content doesn’t affect gamers,” says co-author Richard M Ryan, from the University of Rochester. “But our research suggests that people are not drawn to playing violent games in order to feel aggressive. Rather, the aggression stems from feeling not in control or incompetent while playing. If the structure of a game or the design of the controls thwarts enjoyment, it is this, not the violent content, that seems to drive feelings of aggression.”

Written by: Daniel Krupa, IGN UK
Posted by: Situated Research

The post Study Reveals Real Reason Behind Gaming Aggression appeared first on Situated Research.

In the future, horror games will know when you’re scared. And then they’ll get scarier.

Proof: the currently-in-development horror-adventure game Nevermind, which just launched a Kickstarter campaign last week. The game pairs classic first-person exploration with biofeedback data from a heart rate monitor in order to tell when you’re scared and turn up the horror.

“In Nevermind, you get scared, you get stressed, and the world will punish you for giving in to those feelings,” says creative director Erin Reynolds, “But it rewards you for calming down by becoming easier.”

While biofeedback seems like a perfect fit for the horror genre, Reynolds believes that the technology is key to moving the video game medium forward as a whole, allowing for an entirely new level of immersion.

“I think it really speaks to the potential of games being able to know more about you than you know about yourself, and having this intimate response to your internal reactions,” Reynolds says.

That internal response surprised her during playtesting, as it illuminated “just how personal one’s sense of horror is. It made for some design challenges, because it means you need to have something for everything so that everyone’s buttons get pushed.”

But those challenges also served as the ultimate affirmation for Reynolds: She was scaring people.

That’s a good indication that Nevermind may be a successful game and not just a neat tech demo. Reynolds has ambitious goals for the game and hopes that it will move the medium forward as a proof of concept in both biofeedback integration and as an example of a positive game that reinforces stress management skills that have real-world applications.

Because achieving those goals with a video game is all for naught if the game is not fun, states game developer Lat Ware in a feature on Gamasutra:

“The best practice in making biofeedback games is also the best practice for game development in general: Make it fun,” he adds. “Fun is the only thing that matters in a game. Fun is what makes people love your game. Fun is what makes people come back to play again. Fun is what makes people buy your next game without asking questions.”

“That’s why I’m really excited about Nevermind,” says Reynolds. “It creates this experience that is fun but can also empower the player.”

Written by: By Joshua Rivera, Fast Company’s Co.LABS (via Presence)
Posted by: Situated Research

The post This Video Game Knows When You’re Scared–And Gets Scarier appeared first on Situated Research.

For those unfamiliar with Grand Theft Auto Five (GTA V), players engage in criminal activity, completing missions to perform robberies, steal cars, engage gangs, and other ‘questionable’ activities all while painting a satirical view of the Millennial generation in post-economic-crisis America. Players can steal cars and cruise around a huge map, completing missions in the game or having fun interacting with the environment.

Grand Theft Auto V Official Gameplay Trailer

While the game map appears overwhelming at first, the use of multiple characters with different skillsets helps to provide flow to the game. Each of the three playable characters in the game have different identities (personality and skills), and vaguely correspond to portions of the map where they complete missions and interact with each other. For example, one character is at home in the inner-city, and has the personality to match – and many missions correspond to that particular lifestyle.

While playing the game, one can switch between the three characters to add variety to the gameplay. Players can customize appearance, buy / customize cars and weapons, and further invest identity into the three characters in the game.

Narrative Design and Gameplay

A recent article celebrating the 20 year anniversary of Myst, celebrated for its unique place in game narrative design, highlights Myst’s contribution to dynamic storylines in games. For years, the ludology vs. narratology debates have framed game design: debating whether games are primarily focused on gameplay and game mechanics, or unfolding stories (branching narratives) that are similar to other storytelling media. As discussed in the article, Myst achieved a cult following without players using guns, weapons, or other types of hand-eye coordination required in most games. Players in Myst explored a serene world armed with a sense of curiosity; uncovering bits of a huge story that engaged players in a way not done in games before (as argued by ludologists, who see games primarily through rules and gameplay, as exemplified by almost any classic Atari game).

While Myst supposedly changed gaming, the dynamic narrative presented in the game has never been duplicated. The cult following of the game seemed to die off, and the game industry moved on. Years later, Will Wright (creator of SimCity, The Sims, and Spore) again revolutionized game narratives for Spore by allowing players to design their own narratives in the game.

In theory, Spore was going to change gaming, allowing players to continually build and evolve game narrative (through the game’s Internet-based multiplayer crowdsourcing of content). However, the lack of constraint often led to player boredom, as engagement dropped off from too simple of a gameplay.

Rockstar has further perfected the balance of gameplay and narrative, building on previous games in the GTA series and titles such as Red Dead Redemption (read our review). Player engagement appears to be maximized in the continuum between too-linear of a narrative, where players focus on gameplay, and too-dynamic of a narrative, as found in Spore, where players’ open-ended exploration can lead to boredom. However, a simple and linear narrative that focuses more on gameplay (such as Nintendo’s Super Mario Bros., or many first-person shooters like the Call of Duty series where players cannot deviate much from the storyline as the game progresses) can limit the investment of identity by players into the game. Some player customization and choices in the storyline can go a long way, while too much can detract from gameplay and goal achievement.

While GTA V’s satirical picture of Millennials of Americans was often amusing, the underlying truths could cause a break from the gameplay and flow (more so than the immorality of player activity in the game). However, the game maximized fun by pushing the envelope of game design to new levels in gameplay and narrative design, along with a healthy investment into music, sound and excellent graphics that push current consoles to their limits. Other great role-playing games often overwhelm players (such as The Elder Scrolls IV: Oblivion and it’s large map and story), but Rockstar manages to overcome this by carefully balancing their large storyline with engaging gameplay, creating hours of fun for players. Kudos, Rockstar.

Any thoughts on the game? Please leave your comments below.

Written by: Matthew Sharritt, Ph.D.
Posted by: Situated Research

The post From Myst to GTA V: Rockstar Nails the Branching Narrative appeared first on Situated Research.

The ability to forget that key point wasn’t just a matter of clever storytelling. New research shows that, at least in a small sample of people tested, the same neural patterns that occur when we feel empathy for a human onscreen are present in our brains when we see a robot onscreen.

A group of researchers from the University of Duisburg Essen in Germany used fMRI (functional magnetic resonance imaging) to come to the finding, tracking blood flow in the brains of 14 study participants when they were shown videos of humans, robots and inanimate objects being treated either affectionately or harshly. The researchers, who will present their findings at the June International Communication Association conference in London, found that when participants were shown videos of a robot (a product called Pleo, which resembles a dinosaur) petted, tickled and fed, areas in their limbic structures—a region of the brain believed to be involved in emotional responses—activated. When they were shown videos of a human getting a massage, the same sorts of neural activity occurred.

The same pattern also occurred when the participants were shown videos of the robots and humans being treated harshly—shaken, dropped or suffocated with a plastic bag—but with a twist. Interestingly, their fMRI results showed levels of limbic activity much greater when they saw humans treated poorly than when they saw the robots. This correlated with the responses on surveys that the participants took after watching the videos, on which they reported some empathy for the robots, but more for the humans.

The results suggest that the reason we feel empathy for robots like WALL-E is that, when we see them treated a certain manner, it triggers the same sort of neural activity as seeing a human treated that way. In a sense, our mind interprets the robot to be human-like in a way that it doesn’t for, say, a rock. On the other hand, one possible explanation for why, despite this pattern, they still arouse less empathy than humans when being treated harshly is that we interpret them as something slightly less than human—something more like a pet.

Of course, this explanation comes with an important caveat: correlation vs. causation. We don’t know for sure that these neurological patterns cause empathy, per se, just that they reliably occur at the same time. (Further, we can’t say for sure that this effect is unique to robots—stuffed animals and dolls might engender the same feelings of empathy.)

Even if the patterns only correlate with empathy, though, they could be an effective objective measure of how much empathy people feel when observing various types of robots—and research into that area has practical implications that go far beyond Hollywood. One of the main areas, the scientists say, is in the engineering of robots that engage with humans on a frequent and long-term basis.

“One goal of current robotics research is to develop robotic companions that establish a long-term relationship with a human user, because robot companions can be useful and beneficial tools. They could assist elderly people in daily tasks and enable them to live longer autonomously in their homes, help disabled people in their environments, or keep patients engaged during the rehabilitation process,”Astrid Rosenthal-von der Pütten, the study’s lead author, said in a press statement. “A common problem is that a new technology is exciting at the beginning, but this effect wears off especially when it comes to tasks like boring and repetitive exercise in rehabilitation. The development and implementation of uniquely humanlike abilities in robots like theory of mind, emotion and empathy is considered to have the potential to solve this dilemma.”

In one previous long-term study, two out of six elderly participants appeared to develop emotional attachments with a companion robot—giving it a name, speaking to it and at times even smiling at it—while the other four did not. Further exploring our empathy for robots and figuring out just which of their characteristics (whether physical, such as having a human-like face, or behavioral, such as smiling or walking on two legs) lead more people to feel for them could help engineers design robotic devices that elicit more empathy over the long-term—and devices that people can readily connect with on an emotional level might make more effective rehab coaches and home companions over the long-term.

Written by: Joseph Stromberg, the Smithsonian’s Surprising Science blog (via Presence); a short video from the experiment is available at LiveScience; Image via Flickr user Rob Boudon
Posted by: Situated Research

The post Neuroscience Explores Why Humans Feel Empathy for Robots appeared first on Situated Research.

Researchers at Goldsmiths, University of London have been using theater performers to design computer software capable of reading and replicating the way in which humans communicate with their bodies.

Dr Marco Gillies from the Department of Computing has made virtual characters more believable by enlisting actors to teach them body movement. The actors interact with members of the public through a screen, and their responses to specific body language are memorized as algorithms by the software.

“Two people can take on the roles of the video game character and the player, showing how the character should respond by acting out the movements themselves,” explained Dr Gillies. “The software enables video games characters to move in a more natural way, responding to the player’s own body language rather than mathematical rules.”

Traditionally, the creators of interactive characters are computer programmers, but Dr Gillies and his team puts this task in the hands of people with artistic rather than technical knowledge.

“Our hypothesis is that the actors’ artistic understanding of human behavior will bring an individuality, subtlety and nuance to the character that it would be difficult to create in hand authored models,” said Dr Gillies. “These are the kinds of everyday movements, that we do unconsciously, which make them hard to program in the conventional way.”

Dr Gillies and his team set up a case study in which physical theater performer Emanuele Nargi taught the software natural responses to a player’s movement.

One of the players, Goldsmiths student Max Bye, noticed that the virtual character reacted in a human manner: “When I laughed at it, it would walk away disappointed, so that worked very well.”

The research intends to help interactive media represent more nuanced social interaction, broadening its range of application. The new technique optimizes the use of the latest generation of motion detectors, and it is hoped that in future this will lead to games that are more emotionally complex and able to respond to more subtle social nuances of human behavior.

Written by: Goldsmiths, University of London (via Presence)
Posted by: Situated Research

The post Teaching Video Game Characters Natural Body Language appeared first on Situated Research.