Category Archives: Design

Twitter Display Guidelines

A wonderful boquet of flowers.In the wake of the new Twitter 1.1 API changes announcement I thought I’d focus my attention on the Twitter Developer Display Guidelines so I can understand the changes I’ll see to my favorite Twitter client; Twitterrific.

The guidelines will make our Twitter experience more consistent, boy howdy. Basically every Twitter client will look pretty much the same or it won’t be allowed to use the Twitter API, and a client that can’t use the API is useless.

Please note, if you’re using a Twitter provided client, these rules don’t apply, so you have nothing to worry about.

How do the various clients display Tweets in the Timeline? See the Timelines section in Display Guidelines.

Twitterrific

Twitterrific is my favorite client because it’s darned simple, great UX and UI design. Twitterrific is unique amongst the three clients we’ll examine because it shows a reply icon in every tweet. Note the arrow in the lower right corner of the image. Tapping on that icon will display a menu of choices that includes Reply, Direct Message, Retweet, and Retweet with Comment. Not even Twitter’s native iOS client provides this functionality.

Twitterrific: What needs fixing?

I use the term fixing loosely. Here is a list of the rules Twitterrific breaks, according to the Display Guidelines.

  1. Tweet Author
    • The user’s name and @username should be displayed on one line, with the name first.
  2. Retweets
    • If the Tweet being displayed is a Retweet, the name of the user who Retweeted it and the Retweet icon must be displayed under the Tweet text. e.g. “Retweeted by Josh Brewer”. The name should link to the the Retweeting user’s profile [1].

The @username doesn’t appear in the tweet and the retweeted by text doesn’t show below the tweet. It’s not seen here, but the retweet text displays to the right of the users name. One of the great things about Twitterrific is how it displays tweets in different colors depending on the context of the tweet. I’m not sure how Twitter will feel about that, but the guideline doesn’t call it out.

That’s not so bad, but it does mean Iconfactory will need to fix some things.

Tweetbot

Tweetbot: What needs fixing?

  1. Tweet Author
    • The user’s name and @username should be displayed on one line, with the name first.
    • The avatar must be positioned to the left of the name, @username, and Tweet text.
  2. Timestamps
    • Tweet timestamp should be displayed in the top right corner.
  3. Retweets
    • If the Tweet being displayed is a Retweet, the name of the user who Retweeted it and the Retweet icon must be displayed under the Tweet text. e.g. “Retweeted by Josh Brewer”. The name should link to the the Retweeting user’s profile [1].

Tapbots has a bit of work. In most cases the users avatar is displayed in the proper position, unless its your tweet, then it’s on the right. That’s an easy fix for them. Once that is fixed the timestamp will move to the proper position in the upper right corner. The Retweets item is interesting. The rule states it should display the name of the user who retweeted it. Tweetbot does that, sort of. If the retweet was by you it displays “Retweeted by You”, which doesn’t fit the rule to the letter.

Twitter

Twitter: What needs fixing?

  1. Retweets
    • If the Tweet being displayed is a Retweet, the name of the user who Retweeted it and the Retweet icon must be displayed under the Tweet text. e.g. “Retweeted by Josh Brewer”. The name should link to the the Retweeting user’s profile [1].

Not surprisingly Twitter does the best job of following the rules, but they do break this one. In the Twitter iOS client a retweet icon is display in the upper right hand corner of the tweet and the user’s name isn’t displayed.

Random Note

In the Individual Tweet section under the Branding bullet point this is listed.

The Twitter logo or Follow button for the Tweet author must always be displayed in the top right corner.

Emphasis on the word Tweet is mine. Twitter didn’t coin the term “Tweet”, the fine folks at Iconfactory did.

EOL

What He Said

Dave Winer: “Working with computers isn’t conducive to a whirlwind approach. You really can’t do writing, design or development work inbetween crazy-busy-life tasks. Computers don’t lend themselves to that kind of thought. You often don’t find the problem till you have a chance to quietly and dispassionately go through the situation, asking all kinds of questions along the way. It’s been observed many times that the problem often turns out to be something dumb that you overlooked. That’s exactly the kind of thing you can’t see when you’re whirling around. “

When it comes to coding I tend to stare at the screen for a long time before writing a line of code. Often I create experiments and throw them away before doing the real version. It’s not always like that, I usually do that when I’m trying something new, but work like that takes uninterrupted time.

I think Dave really nailed it.

Illustrator Joey Ellis on Dribbble

Dribbble Blog: “My tools are my red and black Polychromos pencils, Illustrator, Photoshop—all the usual suspects. My studio is in a room above the garage. It’s not cool or glamourous and is filled with crap. It’s kinda like an episode of Hoarders, but there aren’t any dead animals in here yet. I have my iMac and an old Wacom along with a few iPads for iOS stuff. I have tons of toys and half-filled coffee cups strewn about.”

I love reading stuff like this. It’s interesting to see the process others use and how they structure their work environments.

One of these days, when I grow up, I want an actual desk with a big display, or two. Some day. Until then, it’s the couch.

They have a design team?

Inc.: “They’re not the only ones. Unsurprisingly, Facebook (where Cox started her career as a product design lead) has been running its design team in the same way for years. Unlike most software companies where day-to-day and detailed product decisions are made by product managers with business backgrounds, Mark Zuckerberg’s design team is his imperial guard. They work closer to him than any other discipline in the company.”

Based on the giant disaster that is the Facebook UI I thought it was all engineering driven. I’m really surprised to find they have a “design team.”

Maybe this is why they’ve gone on a buying spree. They’re trying to get design talent through acquisition.

Lighting & Realism In Interface Design

Design then CodeDesign then Code, by Mike Rundle (@flyosity): “Lighting & Realism In Interface Design is an introduction to designing beautiful, realistic interfaces in Photoshop. It explains the physics of real world lighting, how gradients, shadows and highlights are created, and how to use Layer Styles to design buttons, panels and more. Finally, it steps through how to design interface elements from Twitter for Mac and Calcbot for iPhone.”

Mike continues to kick butt in his Design then Code series. This is a must buy for me.

Is Microsoft the new DEC?

MSDN: “Apple sold 15 million iPads in the first nine months, while the Microsoft tablet has flailed around for a decade. Why? Because Apple realizes what Microsoft does not: the true laptop form factor is an entirely different device, not a smaller PC. It requires a completely different design approach, much closer to a phone than to a PC. I’m watching my 8-year-old daughter play with my father’s iPad as I write these words. She loves it, far more than her PC at home. I wouldn’t write a novel on one, but my daughter prefers it for kaleidoscope art and pony races. “Toys,” sneered one current Microsoft employee. That’s exactly what Ken Olsen used to say about PCs.”

Sneer all you want at that “Toy” iPad, it’s taken you to the woodshed and laid a whoopin’ on you.

Microsoft will recover, don’t write them off. There once was a company called Apple that lost its way, now look where they are.

A problem with the web

AHHHHHH!Scripting News: “I just want to read the news, not be impressed by your programming prowess, or compliance with the latest Silicon Valley fad.”

This is one of the things that bugs me most about web user interfaces. There is zero consistency. Something we all talk about on platforms is consistency; Mac OSX apps should look and feel like Mac apps, Windows apps should look and feel like Windows apps. What about the web? On the web it’s “trend of the moment” thrown together in some stylish way.

At best the web is inconsistent. At worst it’s a complete UI/UX mess.

Strange isn’t it? You work for years to make sure your desktop apps remain consistent with the platform and now it’s a no holds barred race to the bottom.

Of course most people will disagree with me because they’re doing websites and that’s fine. This is just one curmudgeon’s opinion.

Fresno Co-Working; @Hashtag_Fresno

HASHTAG Fresno: “A new collaborative co-work, hackerspace in the crazy Tower District. Caffeine, internet, and people like you. 24 hour access. Pizza across the street. Coffee next door.”

Makes me wish I were an Indie Developer! For $29.00/month you get a space to work with other creative people. Absolutely brilliant idea! Sure, I know it’s not new, but it’s needed in Fresno. There are a lot of creatives and developers there, they’re just hiding. Hopefully this brings them out into the open.

I know I’ve called Fresno a Technology Black Hole, but that one post made me realize Fresno has a large collective of great designers and developers, and probably generated more great reader commentary than any other post on my weblog.

I ♥ HASHTAG Fresno, just for taking the leap of faith and giving this a go.

Be sure to follow them on Twitter and Facebook, and don’t miss the 59 Days of Code kickoff tonight, 10PM at HASHTAG Fresno.