I recently was discussing behavioural patterns on Social Media and made a mention of the Twitter app, Klout. Klout helps users understand how they are received within their community by analysing the way others interact with them.

In so far as internet behaviours can see some users almost compulsively trying to engineer perceptions, Klout offers an interesting insight into how others engage with a Twitter account. Those I follow are always names and numbers to me, and yet for a managed Twitter account the opportunity to provide a client with feedback on how well their brand is being perceived or how engaged with a celebrity the public are must surely be an opportunity marketing agencies cannot ignore?

Shortly after I published my post, people started retweeting it and Joey Fernandez, Klout’s founder got in touch. Joe asked that I help him get an insight into how I think Klout could be improved after one of my contacts, Bryn Morgan, who’d sparked this whole exchange, complained his Klout score hadn’t changed in months. I asked Bryn if he’d noticed the refresh score button and his answer explained a lot…

Let’s look at Klout’s current UI. To give you an idea of screen space, I’ll be using FireFox with all add-on toolbars disabled. My screen is set to a generous 1280x1024px. I’ll trim the chrome in my screenshots so you can’t see all my shortcuts to my secrets! When I’m logged in, Klout looks like this for me:

Klout BETA screenshot

Klout BETA screenshot

Wow, get a load of it, it’s all about ME!!!

OK, let’s put vanity aside and give Joe some beans he can stick in his burrito. First the global navigation need reiteration. Unless I probe into the About section, I might never realise there are commercial versions of Klout. We’ll need to make that apparent. We’re also in a situation where the brand is fighting with Follow us and lists. Follow us is just a glorified Web2.0 Contact Us button so we’ll add that into the common links area. And lastly do you find as a left-to-right reader that your eyes get distracted by that Feedback button? Man, does it bug me! It should be in the area that we’d call the margin if we were using a print layout. It doesn’t need to be the world’s most powerful full stop!

Jigging just the header together we’ll get something like this:

My Klout BETA navigation improvements

My Klout BETA navigation improvements

Suddenly I feel like the app is already much more gentile on my eyes, don’t you? We’ve freed up the orange “Top 10 lists” button to become an advert space for whatever feature we may want to promote in the future – that’ll be useful for help Joe commercially exploit all his hard work. We’ve started plugging those features with the “Get Klout Professional” link, just so all those marketing bods who need to check their influence daily know where to go.

I also dropped the Home link. I think it an understood convention (nay, an unwritten rule!) that a company’s logo always links to their home page. Why duplicate and make my brain have to work harder to understand an interface?

There is a question as to why log in requires registration rather than OAuth, especially since log in breaks after searching for topics and refreshing. I’ll dismiss that as a small technical challenge them team haven’t yet put time into though it does make the app seem more “homespun” than the type of thing you’d want to use commercially. Get OAuth up and running before moving from BETA – it helps your perception.

Next up, I’d like to question why a Twitter app doesn’t use Twitter’s design conventions? I specifically stated earlier that I was on a slightly bigger than average screen. Why? Because Klout takes an enormous chunk of vertical real estate in it’s layout which actually makes seeing what you’d use much harder. It’s also notable that the way you put columns together makes it harder for us to see what’s going on. Brainstorming gives me:

  1. The search box’s friendly size is overpowering. It’s an important part of the tool, yet the most important part are the results. Visual size should be relative to this.
  2. My Twitter profile information is a given. I already know it. Why does that take up so much space telling me what I already know?
  3. Why is it that on several screens (like stats) words are changed when I click links, and yet this text is so far down the page I can’t see it unless I scroll down? There’s a below the fold issue

These are the bigger UI issues. Let’s mock something so you can understand that visually.

My redesign of Klout BETA's UI

My redesign of Klout BETA's UI

What’s notable here is that I haven’t resized the image or removed any features, I’ve simply placed them respective of their native positions a Twitter user would be used to. This switch to column based layout immediately gives me a large chunk of whitespace at the bottom of the screen that will allow us to see all those annotations and descriptions we need to know about the graphs and charts.

Following through we can see that minxymoggy is a persona and when minxymoggy speaks people listen!

Complete Klout UI

Complete Klout UI

Joe, I hope that helps put some beans into your burrito. My UI redesign helps you market yourself commercially and give users familiarity by echoing (rather than copying) Twitter’s UI. There’s a whole world of stuff I could go into about linguistics used and about the features I’d like to see in a professional version but that’s a conversation that for your benefit, we’d be better off continuing via email. Let me know what you think.

Advertisements