UX Teardown of Twitter.com

This is an assignment for Viking Code School’s Web design class. I am spending quite a lot of time on this course because web design is challenging and scary for me and they’ve done a great job demystifying the subject. I’d recommend checking it out if you’re interested in web design.

  1. Who is the key user?
  2. Key User: A (likely younger than 60) person looking for new and interesting information and communication channels.

  3. What is that user’s number one critical goal when using the site?
  4. See and interact with interesting, powerful, and funny content on a topic that they connect with. Secondarily: Save particularly good feeds for later viewing and reference.

  5. What is likely to make that user’s experience particularly positive
  6. Easy access to large amounts of interesting information that appeals to many diverse interests combined with easy interaction and communication around that information.

  7. What is the approximate information architecture of the site?
  8. TwitterUXArchitecture

  9. What is the flow through that architecture for the user who is accomplishing the critical goal you identified above?
  10. TwitterUXFlow

  11. What style(s) of navigation is/are used? Do they answer the two key questions (Where am I and how did I get here? Where should I go next and how do I get there?)?
  12. The primary navigation is a top bar with the twitter bird as a home button in the top left. Much like Amazon.com there is a left hand “refine” menu with lots of categories that appears in some situations.

    This is a site where the flat nature (not many layers of options) means that it’s easy to know where you are. Users/feeds have their own pages, home button is always there and you’re looking at either a category or a twitter feed. To know where to go next is not so easy. It’s not always immediately obvious what the “Next step” is to subscribe to a feed.

  13. What key interactions does the user have? Are they clear and usable?
  14. It’s very easy for a user to view information, very easy and everything leads to it. This is the thing that twitter.com does best: Show you the feeds. Another key interaction is saving information for later viewing (subscribing to feeds), very easy in some places, not obvious in others (category listings).

  15. What did the site do well to allow the user to accomplish his goal effectively, efficiently and with good satisfaction?
  16. The twitter bird is always on the left side of the navigation bar and returns you to the home page no matter where it’s clicked. Very powerful for making a user feel in control, easy to “Just get me back to the beginning!” It is easy to discover new information (feeds, users, posts, etc) in relevant categories as well and find specific feeds you may already know about.

  17. What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and with good satisfaction?
  18. Posts are always displayed in the center column and look very similar, but sometimes you can “follow” and sometimes you can’t. It requires knowledge of how twitter works to figure out why that is. It’s not possible to follow aggregate feeds.

    It is not always obvious what you’re looking at, extra clicks sometimes are necessary to save content. No way “back” once you’re looking at a single feed.

One Reply to “UX Teardown of Twitter.com”

  1. My first time doing the teardown. This has given me great feedback and improved understanding. Clearly one needs to get very familiar with a web site before doing a thorough teardown.

Leave a Reply

Your email address will not be published. Required fields are marked *