Filed under UX …

Jan 12 2012
Leave a comment
Design, Interaction design, Mobile, UX, Web

UX trend predictions of 2012 B:

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.

Wren app for Mac

 

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.

Due for iPad

Due for iPad

Tagged , , , , , , ,
Jan 08 2012
Leave a comment
Marketing, UX

Don’t translate your catch phrase

From time to time I see big brands betting heavily on a phrase or a named function. The Windows Start button, the Facebook Like button etc.

But time and time again I see these same big brands translating the phrase… Somewhere, some person at these companies missed a fundamental part of branding: don’t change names all the time!

It doesn’t matter if these phrases are verbs such as in the “Like” button. It’s a part of your brand. If you translate your brand, you’re starting a new brand.

Awesome button

 

(image via Techcrunch) 

Tagged , , , ,
Jan 05 2012
Leave a comment
Design, UX, Web

UX trend predictions of 2012 A:

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:

Facebook iPhone app

Facebook iPhone app 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.
Related function panels will become a trend become complex apps need menus, and no one wants to start the app in a menu. Instead starting the app smack in the middle of activity giving the user an option of accessing the menu by “stepping back”.

Why is this different from a menu

But the reason I call the panels related function and not menu panels is that when a menu is that as soon as we have this paradigm, panels on either side that are “behind” our current view in chronological order. We can show the user all sorts of related information and functions, regardless of the apps functions.
Take for instance Path 2.0, a beautiful example of UI design. It too uses the left side menu, but to the right it shows your friends list. In the Facebook app this right side button opens sorting options and not a panel at all. This doesn’t matter. As long as the paradigm is in place, panels will start showing up with the most important related functions in apps of all sorts.

Is this good or bad

The design works great in the Facebook app, in the Gmail app and in Path 2.0. But if it will work when lots of apps join the trend? We can’t know beforehand.
The design is solid from a perception and usability perspective. It also looks great. So I’m hoping to see some innovative use of it shortly!
Gmail appGmail app

 

 

 

 

 

 

 

 

 

Path 2.0 appPath 2.0 app

Tagged , , , , , , , ,
Dec 13 2011
Leave a comment
Design, Developers, Game development, UX, Web

Defining A Principle of Quality that works

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.

So?

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.

Summing up

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:


Tagged ,
Dec 08 2011
Leave a comment
Design, Gamification, UX, Web

Quora – win or fail? A User Experience study

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:

Quora logo

First Impression

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.

Intrinsic

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.

Extrinsic

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 app icon

Summing up

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…

Tagged , , , , , ,
Dec 06 2011
2 Comments
Developers, UX, Web

Facebook Messenger for iPhone and poor user experience

facebook messenger logoSome 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.

Feedback
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 
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.
Facebook Messenger

photo from iphoneguiden.se

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.

Thanks to @MagnusEngdal and Sara Öhman for helping me with the testing.

Update:
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.

Tagged , , , , , ,
Nov 30 2011
2 Comments
UX

Path 2.0 UX review

Path was a weird app when it launched about a year ago. It was a photo sharing app with checkins, directly competing with Instagram and Foursquare but without the simplicity. It also had the really weird USP that you could “only share with 50 of your closest friends!”… Now, most people don’t have more close friends than that. Hell, most people don’t come close to that. But the early adopter crowd that usually takes these new apps for a spin were appalled. But Path was beautiful.

Path 1.0

It didn’t work.

But Path is back! Path 2.0 is better, faster, turbo, everything you could possibly want. But is it good enough?

Path first impressions

Path is incredibly beautiful. No other mobile experience comes close. Seriously, it’s not just pretty graphics, all the animations and interactions, the structure of information, the loading bars and even the damned typing experience is just plain better than in other apps. It’s amazing.

Path 2.0

So what is Path?

Path is a digital diary for your life. Everyone on Path has a feed. And at any time you can add stuff to your own: where you are, a piture, who you’re with, music you’re listening to or when you go to sleep.

Using Path

Is lonely. Sure it launched today but that’s not the main issue. Path is clearly going for the same feature set as Facebook Timeline (which is tied up in court and has yet to launch) but there’s no way you’ll get all your friends to come over. I’m an early adopter. I talk to a lot of other early adopters. And I’m still lonely on Path.

Still, it’s an amazing experience. Enough to make me want to use it. Maybe that’s enought? I’ll update in a few days and let you know.

Tagged , , , , ,
Nov 24 2011
Leave a comment
Design, Developers, UX, Web

Twitter is the Twitter-killer

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 UX
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?

Tweetie and Twitter

Totally worth a years work right? Not just detail changes at all. Nope.

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.

Summery
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.

Update:

Apparently the sentiment is echoed by people leaving Twitter (the company).

Tagged , , , , ,
Sep 05 2011
Leave a comment
UX, Web

The awesome new Google Mobile site – Google Mobile goes Local

When I roam around a city (which rarely happens I promise think) I often find myself wishing there was a good way to search for local services (coffee shops, bars, restaurants).

This unicorn has never appeared though. Local seemed to be impossible with current tech.

Then I was on the subway this morning. And a tweet lead me to Google Mobile, below the search bar I found something odd…

Google Mobile Start page

It said log in. And it asked for my location (sorry about the Swedish btw, I’m in Sweden so Google assumes I prefer the deprecated language over English).

Now I’ve used Google Places before and I was not impressed. There simply isn’t enough aggregated data in Stockholm for it to work. Well that’s what I thought.

I logged in and pressed the icon marked “Cafe’s”. Lo and behold! Google quickly returned Coffee shops close to my location, on a map even!

Google Mobile Local Results

Now this is impressive. But what is a lot more impressive is what happened next. I scroll down the list and instead of just finding aggregated information, which I come to expect from Google, I’m shown an impressive interface of detailed information and functions for each location.

Google Mobile Location results list 1Google Mobile Location results list 2

Not only can I call the location directly from the app, I can also find reviews directly. But this is the most impressive part: the item on top of the list is shown on the map (which stays at the top as you scroll) and an overlay button appears letting me find Directions to the location…

This post is quite probably the worst I’ve ever written, and that is because I’m completely blown away by the UX of this SERP.

Google has really understood what I want out of a local search and given me the tools I need to use the information they present me with. A level of user experience I’ve never seen from Google and would only expect from the very best Apple products.

Google, I salute you. Keep this up!

 

Tagged , , , , ,
Jul 25 2011
2 Comments
Developers, UX

How to change scrolling direction in Lion; and why you shouldn’t

Trackpad Settings from Lion

Trackpad Settings in Lion

To change back from Lion’s default natural scrolling open Settings -> Trackpad -> Scroll & Zoom and uncheck the natural scrolling checkbox. All done.

Why shouldn’t you?

It’s annoying right? Why should you have to relearn how scrolling works?

Because it makes no sense in Lion, and I’ll bet you anything it’ll make less and less sense going forward. This is the new paradigm, learn it now or later.

But why?

In the beginning of Graphic User Interfaces scrolling was done by clicking the scrollbars on the side of an application window.

Scrollbars

Old school Scrollbars

Since this wasn’t a very efficient way to do it many weird solutions for simpler scrolling popped up here and there. It soon became standard for Mice to have scroll wheels on them. Making the entire representation of scroll bars a bit redundant. They take up a lot of screen real estate just to show you where in a window you are looking at any one time. It’s not like you didn’t scroll there in the first place right?

A Mouse with a Scroll Wheel

A Mouse with a Scroll Wheel - high tech in the 90's

When touch pads started becoming standard, this design thought was transplanted over from mice and scroll bars. Nothing wrong with that, reinventing the wheel isn’t always a good thing.

Except when it is.

In this case it made no sense. The mouse and it’s scroll wheel use two different controls to achieve two different things. You move the mouse to point. And you scroll the wheel to.. eh.. scroll.

But on a touch pad you use the same control. Your poking the touchpad to move the pointer and then poking the touchpad in the opposite direction to scroll. The only reason this feels “natural” is because we, as the ingrained PC users we are, are so used to scrollbars. We know that what we’re scrolling isn’t the content but the scrollbar. Which in turn scrolls the content…

See where the design falls apart?

The metaphor is broken. The scrollbar no longer makes sense when you scroll using the pointing device to move the content, instead of the scrollbar.

Alright. That makes sense, but why relearn? Why fix what ain’t broken?

In two words: Cognitive load.

Lion’s natural scrolling (directly scrolling the content instead of the scroll bar) will become the standard, like it or not, because the average PC user doesn’t change default settings and certainly don’t understand why scrolling should be inverse to the screen. The cognitive load of thinking about how to scroll will simply become to much as more computers are delivered with touch pads and more of our PCs become touch based (as tablets become more widely spread).

To clarify; on a mouse the scrolling direction won’t change. Because the scroll wheel isn’t directly linked to the content anyway. But a touch pad is directly linked.
Update: For some reason, Apple has changed the scrolling direction on the mouse wheel for non-apple mice. This is weird. Thanks to Dan in the comments for reporting!

It takes a little time to get used to, though less than you might think, but it will be worth it. And you won’t have to relearn later on which will get increasingly frustrating.

Not convinced? Check out MG Siegler’s excellent pre-lion post The iPad Has Broken My Brain; OS X Lion Will Help Fix It.

Tagged , , , , , , ,
← Older posts