The Psychologist’s View of UX Design
I’ve always been constantly surprised more interaction and UX designers don’t think in these terms.
The revolution started with the iPhone.
With the launch of their breakthrough device they didn’t intend for developers to be making Apps. Apple instead believed that developers would make web apps using HTML5 and save the web app as an icon of their phone. Surprisingly open by Apple’s standards the strategy soon changed to native apps because web apps simply didn’t feel quick enough.
Web technology is getting better
However, as HTML5 becomes a standard on PCs everywhere web apps are approaching the same sophistication as native applications. The hardest step now is for developers to take the plunge and create these great new interfaces and not get stuck in the old way of thinking and just pushing out another blog.
One of my favorite designers, Dustin Curtis, is leading the way with this new UI element on his site; the Kudos button.
It looks great. It’s fun to use and it’s a really simple way to add some life to a site. It doesn’t work on touch interfaces for obvious reasons. Sadly Dustin hasn’t made the code available yet, but most programmers could probably copy the concept. It’s that easy. We just have to make sure we starting thinking less about static web and more about user interaction.
Whenever likeminded creative people try to innovate trends emerge. Ideas give birth to ideas. As ideas keep combining in the heads of creative people everywhere some ideas become more sticky than others. I’ll document some of the trends in user experience design I predict will become the norm in 2012. You can find my first post on the subject here.
Another example from a 2011 app is the amazing full screen representation in Wren.
White space apps
When I first saw Wren I was amazed. It was focused and minimalist. Therefore I was shocked to see the full-screen button in the top right corner of the app, “Wouldn’t that completely wreck the experience” was my knee-jerk reaction. Then I tried it and another trend was obvious, apps that scale without bloating their feature sets, or White space apps.
Why are White space apps different? Mobile.
The mobile revolution has some interaction and UI designers scratching their heads or pulling their hair trying to fit all the usual information. The current computing paradigm has relied on massive amounts of text and information tags for a long long time. Even programs that have really tried to rid themselves of rarely used functions or unnecessary amounts of help information have sometimes been stuck in contextual help hell due to the modus operandi of desktop interface design.
No more. Mobile has rid us of all these things. And some designers are provocative enough to realize that less really is more and simply scale their apps without adding more information or complexity.
Is this good or bad?
Only time will tell. But the dominance of mobile design today tells us a lot about what people like. I think it is less about the iPhone being a must-have product and a lot more about really smart and beautiful apps that are just complex piles of engineering on other platforms.
Simple is better. And using white space to focus the users attention on a sparingly chosen set of functions beautifully designed makes this clear. I believe these minimal products will in the future continue to trump the feature behemoths of yesteryear.
Whenever likeminded creative people try to innovate trends emerge. Ideas give birth to ideas. As ideas keep combining in the heads of creative people everywhere some ideas become more sticky than others. I’ll document some of the trends in user experience design I predict will become the norm in 2012.
An example trend from previous years is the scroll down to refresh design. Created by Loren Brichter for his famous Tweetie iphone app it has since become the standard for refreshing feeds and lists in apps everywhere.
Example from mobile webKit build
Related function Panels
You’ve seen them already. Open your Facebook app and look at the button in the top left corner. Tapping the button or swiping the interface from left to right opens the menu:
This background panel is always there. Neatly integrated in iOS navigation panel.
The iOS navigation panel? At the top of all iOS apps with many views is a bar that usually has two buttons on it. This bar is called the navigation bar in the iOS SDK and intended to be used like this:
- the left side button steps you back in the app. Just like the back button in your browser.
- the right side button steps you forward. Showing the next step or function in the app.
Why is this different from a menu
Is this good or bad
Quality was what set the good craftsmen apart form the bad ones. It was why some brands became more revered than others. The illusive idea is why Apple sells so well, why some artists are better than others. But what the hell is quality? Does it change from artist to artist? Does it mean something different for cars than for software? No. I don’t think so. I think there’s a common feature for all types of good quality.
Using Cognitive Psychology to reveal quality
In academic circles scholars of cognitive psychology have been debating and hacking the human perception for a very long time. One of my favorite tidbits of knowledge from my student days is that negatives are worth twice as much as positives. That means if I give you $100 and then take it back, you’ll feel as if you’ve lost more money than you felt you gained in at first. Put another way: if you spend $50 and earn $100 dollars you’ll feel you made about even. Losing something is negative, and is therefore twice as important to you perception.
This gives us valuable clue to Quality. Let’s see how far that can bring us.
If negative values, and negative experiences, create stronger reactions in users we should look at minimizing these as much as possible. If we get close to no negative values we’ll have a really solid product experience regardless of the products positive values.
For example, if you create an app where every action gives clear feedback it will feel great. Even if the UX design isn’t all that great from the start.
Getting the values right
But wait, let’s back up a bit. What is a negative value? And what is a positive value? We’re talking about products here! What is a negative in a web app?
Happily, another branch of cognitive psychology has dealt with what value is. This is the theory: there is no “real” value. Only subjective, or perceived, value. That is to say: water to a man dying of thirst has a lot of value, while water to a man at a cocktail bar in NY is worth very little. This sounds really basic right? But if all value is relative to experience that also means that we determine reasonable prices from prices around us. We distinguish beauty not by their own beauty but by how much less beautiful the other people around us are. Dan Ariely has some great examples of this in his book Predictably Irrational.
The good part starts 12 minutes in.
So all value is interpreted relative to similar experiences by each individual. How does that help us? That means every experience is valued compared to other, similar, experiences.
Well if people experience negative values much stronger than positive ones, we need to focus harder on making our apps perform at least as well as other apps the users are using instead of trying to one-up our competitors. This will make out UX more positive than focusing on making the positive experiences better. Most Human Computer Interaction studies are actually based on this. They’re often studies to define how consistency works. And consistency is exactly what I’m talking about here. But not internal consistency, while that to is extremely important, but experience consistance for the user. No matter what that use might look like, spanning over machines, apps, platforms and use cases.
A principle of quality, a rule of thumb that works for all products and services, is not making something really well. It’s minimizing the negative impact of shortcomings.
So how do we use this principle?
- Don’t show the user experiences that aren’t finished. Release early release often as much as you want, but don’t release half baked.
- Polish one feature instead of making two features.
- Make sure other apps aren’t making your experience feel broken by creating an experience gap that will feel negative for example the pull-down-to-refresh UI of iPhone apps.
- Look at the platform. Look at the most popular uses. Look at the environment it will be used in. Then try to be consistent.
- Make your marketing consistant with your experience, or you might end up making your product feel worse than it is
The perfect example of not understanding quality is the Nokia N97, enjoy!
Another great example of achieving quality, not by adding features, but by managing your negatives is the iPhone and iPad operating system. Just compare these transition effects from iOS to the Android counter parts:
I recently was asked to check out Quora again. This time from a UX standpoint. I found a lot of strange design decisions and an almost crazy implementation of “Gamification” so I thought I had to share it:
What does this do? Quora is a mess of questions. That’s a good thing. But it’s also a mess of features. There is no real overview to how the service is supposed to be used nor how the features fit together to create a whole. It feel like a mess of somewhat related features that have been randomly added to a wiki.
User feedback loops
All services and products intended to be used more than once work because their is a loop in user interaction. After we’ve done what we came for we’re back at the start and can do it again.
Feedback loops is a way to look at how feedback is introduced in the loop to keep users going forward and using the product. Quora does this really strangely.
There are two ways to understand what happens in a loop, one is to look at emotional impact or internal steps in the process from the point of view of the user. This is called the intrinsic loop. The other is to look at the service’s constructed steps from the point of the user. This is called the extrinsic loop.
The value in looking at both of these is to see where they meet and reinforce each other. So how does the intrinsic loop look?
answer questions -> gain social proof in form of replies, votes and followers -> answer ranks higher on lists of answers -> return
This loop works well. Interacting with the site gives you a sense of communicating with other users. Though notifications are bad and it’s hard to really understand what is happening, there is a definite sense of activity spawned from other users interacting with your content.
So how does the extrinsic feedback loop look?
Add information (unidentified) -> earn points -> use points to request answers -> no return
Basically it adds points but not to obvious steps in the loop. In fact, Quora only seems to add points for adding information. But Quora doesn’t tell us why, how much or for what we earn these points.
This is an extrinsic loop set up to give users rewards for interacting that doesn’t reward user for interacting. What went wrong here? Quora is giving out points for interacting with Quora, but not with other users.
The problem is humans don’t think of services as independent entities and don’t expect to interact with services, humans expect to interact through services. Another problem is that these rewards aren’t reinforcing the intrinsic loop but instead starts rewarding an entirely different behavior. And last but not least, there is no clear end or way to start again from when you receive rewards. Rewards are doled out in the middle of the intrinsic feedback loop.
Gamification or What Bumblebees feel about Bicycles
Points. Just add points and it’s a game. Just add points and the weird statistical exercise has miraculously turned into “fun”! Right? No. That’s not how it works, you can read all about how to add the fun here. But Quora doesn’t care about that, you get points for adding content but aren’t told when or how much. There doesn’t seem to be a differentiation between how you add content, you simply receive an arbitrary amount of points.
There’s only one way to use points. You can pay others to answer questions. That’s it. You can’t even compare your points to another users.
Quora is awesome. What makes it awesome is the high level of interest from other users. The problem is, Quora does little of anything to enhance this. More often it gets in the way.
The service quickly became famous for supplying answers from high level CEOs and business savvy high performers. Sadly though, it took me hours to find any such answer. It took me hours just to find some interesting questions.
The random points thrown in just increases perception of randomness. Quora is a great idea, close to a good product. Over designed and under thought. It’s confusing as hell and weird to use. But if you’re lucky you can at least get some answers. Just don’t expect the question to be the same one you had in mind from the start…
Some time ago Facebook launched it’s cross platform messaging app: Facebook Messenger; the mobile stand alone app that fully integrates Facebook messaging with your cell phone. Sounds awesome right? Sadly, it’s badly broken.
I recently tweeted a designer at Facebook to ask why the UX of the app is so bad, in turn he asked me to describe what’s wrong so they can fix it. So are you listening Facebook? Great. Here’s what’s wrong with the iOS version:
Starting the app
Takes time. A lot of time. Why? There is no large graphics in use. Why does it start slower than some third party messaging or twitter apps? Short messaging on mobile devices is supposed to be fast. Loading the app for over a full second is bad user experience.
If I’d have to guess what’s wrong I’d say Facebook Messenger is loading the entire message database at startup when all the user really needs is something like the last 5 messages.
Loading and responsiveness
So the app is now loaded. Let’s start messaging! No? Unresponsive?! But why? Why is there a second load time?
This second load becomes even weirder when I start the app from a notification. The app should be loading the message I was notified about but instead it seems to load for several full seconds. Even on WiFi.
If I’d have to guess what’s wrong I’d say you’re syncing ALL the messaging data with the server…
Don’t, do, that. Ever.
Always smart load, download only the essential information to start using the app. Then download the rest in the background while the user is happily messaging away. This is critical on mobile devices.
If even Apple, that clearly doesn’t get social at all, get’s the importance of user feedback in short messaging. And the Facebook web interface clearly shows when the other party is writing something to you… Why do you not show this information in the Messenger app? If someone starts typing, send that information. Show an indication of this in the app.
And please, don’t make my phone vibrate with every new messages when the thread is open on the screen.
Notifications on iOS are a bit strange. They don’t sync between iPhone and iPad and the app can’t receive any data from the notification. So some odd behavior is simply inescapable. However, most of the odd behavior with notifications from Facebook’s Messenger app have nothing to do with that.
The main problem is that notifications aren’t consistent between mobile app and web. As a matter of fact I haven’t even been able to understand what triggers mobile notifications. In my tests some messenges have triggered notifications on both web and mobile while other, identical tests, have triggered only one of them. Once I even received a mobile notification while typing a response in that very thread on the web.
Notifications are hard. Really hard. But a few simple basics should at least get you of out this mess:
- If the thread open on web and the page is active (focused some time the last minute or so) – don’t send a notification at all.
- If the thread not open and the page is not active – send a notification.
- If the thread minimized in the web browser but the page is active – send only a web notification.
Do I realize that these features are more complex than I have described them here? Yes. But they’re not very complex for a product team such as the one behind Facebook.
Do I realize that Facebook usually releases features and then iterates on them to improve the user experience? Yes. But this is a web strategy. A mobile app is often, like in this case, just a good interface on top of a web service. If the interface is bad, the service is bad.
Iterate all you want on the service. But “release early, release often” is not a viable strategy for a mobile interface.
So why am I taking time to
complain write all this? Because Facebook Messages, and Facebook Messenger, is a great product. It will help me organize my communication even better and have faster communications with my friends. No longer will discussions be spread through WhatsApp, iMessages, SMS, Email etc etc.
And the reason I can’t do that today is the Facebook Messenger interface. With
god damn enourmous amounts of some luck this post might help Facebook create a really good Messenger app faster. Fingers crossed. Also, I’m available for hire.
Ben from the Facebook Messenger team replies with some information about the upcoming version 1.5 of the app. Early the next morning I had it and started using it. And I must say it’s a big improvement. I’ll write a follow up shortly about this new version.
Orginially posted on the official SIME blog
SIME is a Swedish Conference on web, tech and startups. Where great speakers entertain for two days and investors and entrepreneurs mingle over coffee and champagne.
SIME 2011 was a flurry of great speaker on a wide area of subjects. While the set theme for SIME was “Passion Wins” another theme running through the conference was going mobile. Gamification was subtly introduced to the SIME audience in a panel on Gamification and marketing. Possibly to set the stage for a larger presence next year.
But what exactly is Gamification and how does it tie in with SIME 2011?
Gamification is the process of using game mechanics in non-game products and services. I am not talking about 3D characters or scoring points here however. Games have matured in relative obscurity thought the years to become one of the worlds largest entertainment forms, aimed mostly at adults. The foundations ofwhat makes a good game are similar and equally complex as what makes a great brand. The psychology or rewards have been used in training and products over the years, but only games have really delved deep and explored the territory. Pacing and storytelling in a product where there is no story is also only really explored in the games industry. Science and design based on concepts like these are migrating from games into “normal” products.
This is Gamification. And oddly, ties in excellently to SIMEs central theme.
The Passion of Gamification
Passion Wins. That theme was presented by Ola in his welcoming speech and it was central to almost all the talks at SIME. From presentations from promising startups, among them iZettle – the mobile payment solution, to using brain scans for better marketing there was not a presenter on stage that lacked passion. But how do we reach passion in our users or customers? While every panel spoke of the importance to engage users and inspire passion there was only one that talked about how thats done.
Panel on Gamificiation
A panel consisting of Elísabet Grétarsdóttir, Eve Online, Johan Sjöberg, founder Starstable, and Robin Teigland, Stockholm School of Economics, joined Ola on stage to discuss the most popular buzzword of the day.
The panel wasn’t that impressed with the term Gamification for starters. Elisabet described it as working with motivation in marketing to engage the audience, hopefully getting them to participate. Johan joined in saying that the term might be a misnomer, that the term Playification might be more appropriate. Since the focus is on engagement but not at all games.
“we are playful creatures” – Elísabet Grétarsdóttir, SIME 2011
The panel was in agreement that playfulness was important for humans, adding fun to anything should be possible. The panel highlighted experiments with gamification in education and Elisabet even made a pitch to add creative interaction in the fashion industry.
If we are playful creatures, play should be a great way to engage our users. Right?
Going mobile with gamification
As I mentioned earlier another trend runnings through the entire conference was going mobile. Google spoke of being a mobile first company, Ericsson spoke about communicating in a world where every device is interconnected. But what does this have to do with gamification?
Throughout SIME we heard speakers talk about new paradigms and the web/app divide. Essentially mobile web is taking over and has a different set or boundaries than the desktop web. So how to we make sure our mobile interfaces are good enough and engaging users? You know where I’m going with this aren’t you?
Mobile interfaces is a perfect place to start adding the fun.
Summing up gamification at SIME 2011
The passion at SIME was amazing. The energy was great. The game we played at the conference, bad. Basically we’re all looking into how to engage and interact with people through digital mediums. The only industry that has really done it is the games industry. Moving their knowledge to the rest of the web is gamification. Elisabet doesn’t think it’s through external motivation. Ola thinks it might have something to do with horses.
The only thing we know is: however it’s done, it’s going mobile.
Added a short explanation of what SIME is, thanks to @kenneth_aa for making me realize it was needed.
Twitter, the micro blogging service, has taken the world by storm. While there are only a few hundred million users compared to Facebook’s massive near Billion, the service has become the place to share real time updates and is often used to gauge peoples reactions by news and analytic firms because the platform is open.
But Twitter is about to face it’s doom
While Google struggle to reproduce the viral effect of micro blogging services Facebook’s grab for the real time feed was hampered by the need to privacy. Twitter has already gained wide acceptance and was never intended for private information in the first place. But a series of ominous events are slowly hollowing out the foundations of Twitter.
Twitter is being killed by…
Twitter has never been the most stable of tech startups. The service used to be plagued by downtime which became so frequent the Fail Whale error page became as famous as the service. The company itself is also changing management again, and again. Not a great trend this early in a one product company. The lack of leadership is clear to see.
Twitter (the company) is constantly changing and evolving it’s product. Which is a great way to organically fit the needs of their users. But Twitter (the company) is doing this in a somewhat odd way. It started when Retweeting (passing on another users tweet as a sign of encouragement while marking it with their name and RT) was made a part of the product, after it’s wide adoption by users, Twitter (the company) decided to implement it differently than the usual Retweets. This lead to better statistics, but also a fractured UX as apps now had to implement both ways to RT because users didn’t like the new one. Eventually Twitter (the company) incorporated the old style Retweets but called the function Quote Tweet instead. And the problems were just getting started.
Twitter app insanity
Twitter apps were almost a category on their own in the beginning of the Appstore. Twitter has become so important to mobile phone manufacturers they always showcase a twitter app with their new flagship phones. But Twitter wanted to control the experience, like Apple. Maybe a good idea. But really bad execution. They bought Atebits, the developers behind the most popular Twitter apps for iOS and Mac. Have you ever pulled down a list to refresh? Atebits invented that. So why was this a problem? Sounds great, right?
After being purchased by Twitter (the company), the newly renamed Twitter for Mac and Twitter for iPhone started being updated less frequently… Let me make that clear, having the developer of the apps work closer with the Twitter development team made them update the apps less often.
Then shit really hit the fan. Twitter (the company) redesigned all their interfaces to be similar across platforms. Starting with a roll out on iPad, then web then the rest, Twitter (the company) streamlined their interface development.. in theory.
What really happened? The interfaces now looked the same, but they didn’t work the same. In fact, certain features only exist on certain platforms even though the interfaces look the same. Which makes it really hard as a user to remember what you can do where.
Later on the developers behind Atebits have left Twitter (the company), possibly in raging despair. And Twitter (the service) is fracturing into a mess. Not just between interfaces but functions as well. For example with the roll out of the activity tab you can follow some of the things people are doing through Twitter, following, unfollowing, making lists and so on. These features, which btw totally contradict the extreme simplicity of the core product, are weirdly integrated into the web interface as the afterthought they are. And it’s only available on the web.
Twitter (the company) is destroying Twitter (the services) with some sort of odd design-by-committee culture. No matter if you like or dislike these new features, the case is clear that teams behind Twitter (the service) definitely aren’t working towards the same goal.
This is sad. Because I love Twitter (the service). And I don’t like that it’s being killed by Twitter (the company). Please RT this if you agree.
Apparently the sentiment is echoed by people leaving Twitter (the company).
In December 2011 Twitter updated their entire line of interfaces. The design changes were clearly aimed at making Twitter a lot more interesting for new users.
Twitter divided itself into different parts, seemingly with different uses:
Sounds great right? What could possibly be the problem!
Twitter didn’t actually change. And Twitter (the service) does not actually have these different areas of interest. So any user checking them out will quickly get confounded. What is the difference between “Home” and “Me”? I have no idea. But to make this obvious, Twitter (the company) has removed Me and Tweet from the web interface which basically means they have these left: Home (My feed), Connect (replies, RTs and follows) and Discover (search damnit, it’s just search!).
To make things
better worse, the UI is even more fragmented. Twitter no longer has updated clients for iPad and Mac. Apparently the job previously done by one single guy is just to much for an organization of 300 or so.
But it get’s even
better worse. The UI of the web and iPhone version, while both being updated simultaneously for this new paradigm, still do not follow the same UI standards and are structured differently. Don’t ask about Android. Twitter (the company) must really, really, hate Android.
Anyone want to build a Twitter killer, possibly built upon the API of Twitter to simplify the transfer of users? I’m available right now.