☰ The right client for Twitter, App.net, Tent.io – A draft

It’s easy to find a wide variety of clients in any App Store out there. Some are mighty like Tweetbot, some are kind of unknown, like Weet. Then there is the official app by Twitter and a lot more – and I don’t love any of them.

Times changed. Tweetie was nice when it was released some years ago. Nowadays it wouldn’t be good enough, it would feel cheap. Back then, everyone liked that it looked and behaved like iOS in every way. Today that would just feel wrong. Not even the iOS standard apps do that anymore.

Those times felt like a gold rush for app developers and designers. Everyone built a client for Twitter. That changed some weeks ago, when Twitter announced a lot of new rules which basically render the development of a third party Twitter client useless.

Just a quick look on the five clients for Twitter that I consider worth testing:

  • The official Twitter app: It’s nice, looks good, feels okay, but somehow it’s cluttered with what Twitter thinks its needs to become a better brand. All those discover and connect things aren’t anything I want and need in an app that’s basically meant to communicate with others.
  • Good old Twitterrific: I never liked it. It was (one of) the first native apps for Twitter and it sure is not a bad client, but I don’t like the unified timeline approach and the look of it. It’s too cute, far too many colors, sweet little birdy patterns and so on. Also it lacks some of the basic functions like pull to refresh.
  • Twittelator Neue: Beautiful. It looks and feels unique. It has many nice ideas, the display of embedded images, for example, but somehow I never grew used to it. It felt far too designed and the font is too thin for my taste. (One of the best things is the little pop up animation when you tap on a picture.)
  • New to the game is Flurry: Beautiful and fast, it’s basically a Tweetie for 2012. It lacks some basic functionality but I think it’s on a good way.
  • Tweetbot: My go to client at the moment. I don’t really like how it looks or feels, but it delivers an all round experience. You can do nearly anything you want and its mostly without bugs and therefore reliable

What’s the problem?

There really is no problem. I like many of the clients on the market, but I love none of them. Also I’m a designer, so I figured I could try to build something that would fit my needs and my understanding of mobile design in 2012.

Disclaimer: This is nothing that’s really meant to get built, consider it something someone threw together in Photoshop to keep his mind occupied with something else than the stuff he does at work.

The main idea

I don’t really like how the screen space is used in apps like Tweetbot. A few days ago I watched the keynote Steve Jobs held to announce the iPhone (yeah, again). He describes how a touchscreen is better than hardware buttons because we’re able to change the keys to fit every situation.

So I looked at my Twitter client of choice – Tweetbot – and asked myself: ”Which are the things I don’t like?”

I want something that shows as much content as possible. Ana pp whose main aspects (the tweets, posts, whatever) are not squeezed between two dark bars, one that feels fast and adapts to the situation at hand.

What I came up with

I really like how Path introduced the button that hovers above the content. I saw it and realized how much potential there is. We can add as many fancy gestures as we want, they’ll never feel quite right, because we don’t do anything with gestures in real life. Try pinching a piece of paper. Good luck. My point is: I like the idea that there can be more options hidden behind something classic as a button.

So my whole approach relies on these kind of interactions. First of all: No bars. The whole screen is filled with posts. It’s a list of content, with three buttons hovering above it. Not more, not less. The button in the bottom right posts something new. Let it be a new post when you’re on one of the timelines or a direct message or reply when you’re on a profile of the user.

The button in the bottom left is the menu. It just shows where you are. When you tap it, it shows all the areas you’re used to. Timeline, Replies, Direct Messages, Search, Profile. Most of the time you stay in your timeline, so no need to display a dark bar at the bottom of the screen to remind you of what also could be used.

One problem that has to be solved is that you want to know when something has happened in of of the other areas. That’s especially important in something like a client for Twitter. As long as you’re not one of the people loving unified timelines, you have a list of posts by people you follow and a list of posts that are mentioning you. So what if someone replies to you and you’re in your following timeline?

A second button is displayed which shows where something new has happened and how many posts are waiting for you. Tap it to switch to the area of interest. If nothing happens, nothing is displayed. I know that this means you have to do one more tap every time you want to switch to an area that has nothing new (like search) but you’re not going to do that as often as you want to see your timeline.

Same goes for the button to the right of the menu. It shows which account is active, if anything happens in one of the other accounts and you decided to activate notifications for it, the relevant button pops up, shows you how many new posts there are, you tap it and it switches to the right area.

One of the big problems is to find a place for all those small actions you can do with a post. Reply, view conversation, mark it as favorite, view the profile. Tweetie let you swipe over the post to reveal the hidden options or you could just tap it to switch to a second screen that showed the options directly as buttons. Flurry does it the same way. Tweetbot uses one tap to display a menu that slides from under the post, and a double tap to show the single view and you can also use a triple tap for something. Kind of confusing.

I figured it would be nice to solve this without gestures, without a second layer and without switching to another screen: Tap the tweet, the options present themselves as small buttons around the profile pic of the person. Done.

I know that all this is nothing new. I just threw together some good ideas and got what would be the ideal client for my needs. And I don’t care if this is something for Twitter, App.net or Tent.io. It’s just something I would like to use to post my daily thoughts to some kind of social network.

Also: If anyone has the time and desire to build this thing: I’m happy to hear from you. It’s not going to be my new favorite project, but I’m sure willing to provide layouts and more thoughts on this. I’m going to finish this thing and show it here, no matter if someone is going to build it or not.

I’m looking forward to hear what you think of this approach. I’m sure I missed something. <3

Kommentare

  1. Only thing I’m missing is the conversations. One thing I do a lot on Twitter is view conversations. How do you intend on displaying them?

  2. I really like the idea (even if it’s “just” an idea to play with until tent.io/app.net take off or twitter stops enforcing stupid policies) of the radial menus. I often found them hard to tap and missed them quite often when I used path. So you’d have to make sure menu items are big enough.
    Nevertheless this is a great idea.
    OT: Another initial thought was “oh no, not again, a blue-ish interface”. The longer I think of it the fewer alternatives to blue-ish colors seem possible, so I think I like blue. =)

  3. Nice concept although I’m not a big fan of this floating button concept, I’d like to point out, that HP/Palm’s webOS had this in their apps back in 2009. It was not intended to open a menu though.

  4. loving the idea, as well.

    but still, it misses the button i would need the most: one that does the same thing as “Pos1” does on your Laptop/PC/Mac (do Macs have that key?). Because if you use twitter on your phone only once or twice a day, you don’t always want to scroll back to the top, which you often have to do. (Actually, I would want that button in other apps, as well…)

  5. I like your ideas. But there is one confusing part: Why will be tweet actions placed around the profile icon? I would expect them around the point I tapped.

    Tap on tweet -> options for this tweet in a circle
    Tap on profile pic -> profile actions (profile, mute, …)
    Tap on URL -> URL actions (instapaper, quotefm, …)

  6. Andreas & Jakob: I don’t see where I mentioned that it has to open up around the profile pic. I had to place it somewhere and there it is. Also: It’s just a quick mockup. No need for in depth reviews of what I threw together in three hours. 😀

  7. Beautiful concept. I tried to imagine using it the way I normally use any Twitter client and it would perfectly. So please, someone code this thing, I would buy it.

  8. Its quite nice. A few weeks ago i had also made a twitter app draft. The retweet and favorite button must me under the tweet, if they were in hover-mode.

  9. I miss lists in this. Thats probably just another button in the menu, since they are also just a timeline, but maybe there come more problems with it. (Managing lists, add remove people, just pops in my mind).

    Pretty neat mock-up though would love to try it.

  10. Not sure I agree with your position on gestures. On mobile devices they are becoming more natural and intuitive, such as pulling down to refresh, pinch to zoom and swiping right to go back.

    The idea of maximizing content space by removing navigation and tab bars from the app sounds awesome and it’s something I’d like to see more of.

    Another thing to consider is scale too, like if this app was to get to a second version and some new features were introduced, how could the app accommodate the updates?

    Overall very nice. 🙂

  11. Shaun: Yeah, obviously not all of them are bad, but some of them (like the swipe to left and right and up and down and in a 45 degree angle gestures in Tweetbot are strange).

    Robert: Yeah, you should have tried to read the article. I might have written something about Path.

  12. I’m not sure what the floating buttons at the bottom buy you over a tab bar. You can’t read the tweet below them, so you always have to scroll past them first. And the buttons need to be of a minimum height to be easily tappable (by convention 44 points), but unlike a tab bar they have a margin from the bottom edge of the screen, so that means they actually take up MORE space than a tab bar would. So these give the appearance of being less occlusive than a tab bar but are actually more so, while adding cognitive load because they aren’t as easy to distinguish from the surrounding text.

    Make the buttons fade out while the scrollview is scrolling (or stopped mid-scroll with the finger still down) and maybe you have something.

  13. would buy it.

    “Make the buttons fade out while the scrollview is scrolling (or stopped mid-scroll with the finger still down) and maybe you have something.” – agree.

  14. I really like the idea of having such a simple and nice twitter app and I would like to see someone build that thing.

    Just one point to mention here: I would prefer if you’d display the notifications in a different way. The second button, which displays if you get notified, will be a bit annoying (especially if you have new mentions as well as direct messages). As far as I’m concerned I would like to avoid that and I want to see as much content as possible while checking my twitter. You could solve the problem by using the “home” button. Just let it look differently when there are notifications available than it looks when everything is read. If the user taps on the “home” button he gets to his notifications. Therefore you enable the user to only see these things if he wants to.

  15. Hey. Love the look of this. I’m in the midst of writing an App.net Android client myself and had some similar UI patterns in mind (very inspired by Path), thought somewhat more content focused (letting things like photos in a post dominate its style.)
    Anyhow, great work.

  16. but that is truly INFURIATING.
    fucking twitter-client gets this wrong,
    I have no idea why every single

    shows the tweets in chronological order.
    client then please also make sure it
    If you’re going to spec out a twitter

    That’s indeed a sweet mockup!

  17. Hey Marcel!

    Excellent article! Love the design!

    I’m off to AngelHack http://angelhack.com this November, and I was curious if I could take your design, adapt it slightly and build an App.net client with it?

    Obviously I will be crediting the original design and ideals to you (because, frankly, they’re amazing!), but I would love to attempt a full-on app in a weekend 😀

    Thanks!
    James
    @jdrydn

  18. Hi,

    die Ideen sind toll, der Look gefällt. Hoffentlich bekommt man sowas dann bald unter die Finger – für Twitter oder auch App.net. Bleib dran!

  19. Things I don’t like:

    -Still too many buttons.
    -gradients are too strong for each tweet
    -not enough natural language

    Things I like:

    -simplicity
    -focus on content
    -less interface elements

    I still see a need for some functions. But for the most part, you have a solid idea! Only thing if really push is to simplify the buttons for the menu and profile. Why not just simply have a profile image in the left, and when tapped, bring up the menu. I’m sure you’ve thought of this before the post, but to me, it’s the most natural thing for the user. Then fade the icon a bit with an x in it to close the menu and return to the content, or just keep scrolling your tweets and the menu will automatically close. Not actually sure if you wrote that or not but I might have skimmed over it (oops!). Great inspiring article! I’d love to work on this (as a designer not a developer) but I’m busy with projects of my own. I’m sure if there were more users on alternative networks besides just twitter, I’d add this idea to the list and make it an app capable of several networks. Hope somebody does this as it would be really fantastic.

    P.s- if there are typos, I apologize- keyboard on the iPhone isn’t too comfortable! Thanks again for the post!