PixelPushing: Twitter

The twitter iPhone user-interface is, for the most-part, slick however there’s one screen that has a large number of interface complexities and design issues. For me the search screen sticks out. The twitter business model has shifted toward “trending” and “promoted” tweets while the UI has traditionally lacked a focus in theses area. As a result compromises have been thrust on users in the form of the #DickBar. This could have all been avoided if the search interface had properly incorporated trending and promoting terms as part of the core design.

Here’s the current version:

Original Twitter Search UI

 

The screen is supposed to serve four core functions and several secondary functions.

  1. Allow users to search the system using basic text search
  2. Allow users to view review saved searches
  3. Allow users to search by geo-location
  4. Allow users to see currently trending and promoted content

In looking at the screen there are a number of problems and unusual UI patterns.

  • It’s unusual to have a down-facing chevron to expand content in-place as in the Saved Search UI. Typically sections don’t accordion in-place, they navigate to a full-screen interface. Full-screen navigations allow more affordances and design patterns for editing, adding, deleting, etc.
  • The promoted quotes section with tweets are clipped with an elipsis.  The font is tiny, there’s only 140 characters and it’s clipped? This makes the content hard to read and use. Additionally it’s not clear if these are popular, trending, promoted or random.
  • Users are only able to see the first three trending topics.  Assuming the content is important to the business model this is a serious compromise. More on this later.
  • It’s not obvious that additional searching affordances are available for searching user profiles or geo-location. These additional interface elements show themselves later. This isn’t like in mail when you get to change the filters of searching for email this is actually very different types of searches.
  • The chrome of the twitter frame (both the top navigation bar) and the lower tab-bar take up important space from the search interface. While the buttons to switch accounts and compose a tweet make sense from a consistency standpoint I feel they are less useful from the context of performing a search.

Proposed design:

Search tweets core

 

  • The page is focused on searching. The top-area allows you to scope your search while the rest of the page provides space for results.
  • Searching tweets/people/Local is an explicit choice.  While some apps like email put the segmented control bellow the search bar I think from an information hierarchy standpoint this is not correct. Having the search context above the search bar allows you to adapt the search content area as needed based on context.
  • I’ve used the bookmark pattern found in the built-in maps app to allow users to get to saved searches directly from the search bar.  Like the maps app it would present a modal view to allow you to navigate to a search results page.
  • It could be argued that trending has no value for end-users. While this is likely true for end-users it obviously has large value to the twitter business.  As their model shifts toward controlling the client and channeling advertisements it’s critical that this is done in a non-invasive way.  Giving good exposure to promoted tweets along the main navigation tabs will alleviate the need for the more offensive solutions.
  • Placing the promoted icon in it’s own column makes the text easier to read for both columns.

Searching for People

  • Searching for people is the second core function. In exploring the twitter app there are two distinct people search features. First the app will search locally on the device for users that you follow, however as soon as you hit search it will talk to the twitter service to return the server results.  In the above design I’ve made this simpler and more unified. The iPhone list pattern allows for grouped results. I’m showing local results for two accounts. A third grouping (bellow the scrollview) would present the results returned from the server.  Since search can be cross accounts on your phone it’s actually a good reason to have no specific account context for performing the search.
  • The search interface could similarly display recommended users before the user starts typing. While this isn’t illustrated this type of approach can provide user utility and promoted profiles while not interfering with the core user experience. Good for users and for the business.

Searching twitter for local content

  • Lastly the local search allows you to quickly find both the tweets that are local to your geo-location as well as allowing you to search for specific phrases.
  • The map/list icon next to the search field would allow you to toggle/flip the view from a list to a map.
  • Promoted tweets with geo-location could be presented here as well. Since the content appears to be sparse minimal promoted content could be useful, especially if it’s free stuff near you. Starbucks and other retails could drive traffic, while giving followers free stuff. Win. Win.

The specifics of how search works within the twitter app are subtle and there are many nuances that are not listed here such as how results are pushed into the view or how search results are saved, displayed or edited. The key point I’m illustrating is that even complex interfaces can be made simpler and clearer while simultaneously improving the business value.

Post to Twitter

Power Favorites for Twitter Pros

Favorites on the popular twitter service have limited use. After being on the service for over a year I had managed to favorite only a few stories and checking with some others online it seemed that few people were making use of the feature as the feature was originally intended.

I’ve found a better way to use favorites.  When reading from a mobile device I will ‘favorite’ a story that I want to read later. I then have an RSS subscription to my own favorites list. This means that I can ‘skim’ while mobile and read when I’m in front of a larger screen when I have more time.  There are dedicated services for this idea such as ‘instapaper’ however favorites and RSS works great across all clients and don’t require any special tools.

With that here’s 10 of my recent favorites:

P.S.  Don’t forget to follow me here.

Post to Twitter

Make it easy to navigate

A couple months back I heard a good talk by Steven Krug. The talk was entertaining and had a simple core point.

  • Let people know where they are on your site so they don’t get lost.

Lately I’ve noticed a bad trend in web-design that sites make it very difficult to tell where you are:

Examples of poor navigation. Facebook, Flickr, LinkedIn and Twitter

Instead of using some visual indication to tell you what section of the site you’re on these sites choose to do nothing. This makes it difficult to tell where you are on the site.

It’s super easy to bold or highlight the section you’re on. Why aren’t these sites doing this? Perhaps in a ‘page view’ culture they want to confuse you and get you to click all around the site looking for the page you need. Twitter in particular highlights a tab that has nothing to do with the page that you’re on.

Well designed sites tend to have primary and secondary navigation elements and it should always be obvious where on the site you are simply by looking at the navigation area. You can bold the text, use a tab graphic, highlight the text, etc, etc. Make it obvious when you’re on a particular section of the site.

LinkedIn, Facebook and Flickr also use hover menus. In general hover menus can cause all sorts of accessibility problems. They also cause obstruction problems as you move your mouse through the screen you pass through the menu and obscure the area you’re trying to click. Lastly since these hover menus contain secondary navigation elements you can’t tell where you are on the site because typically the hover menu is closed.

There are ways to use hover menus and make your navigation clear. Staples is an example of this. The primary navigation is always obvious and althouh the secondary navigation is a hover menu the currently selected page is expanded and shown within the header area making it easy to move around the site.

Post to Twitter

Twitter Scalability – Performance is user experience

This is not another post about how bad performance is on twitter. There are planty of other people talking about that. Instead this is a post on how you can define performance expectations in terms of the user experience.

For example:

  • When I open a file that’s very large I have a different performance expectation from when I open a small file.
  • When I send a large package by mail I expect that it may take longer then a postcard or a letter (unless I pay more).
  • When I travel I expect it’ll take longer to get somewhere if it’s further away.

These expectations are defined by the task at hand. Consider how the Twitter service is trying to scale and provide performance expectations.

  • A person that is tracking 10 friends has the same user experience performance as a person that is tracking 10,000.
  • A person that is being tracked by 10 friends has the perception that their messages are delivered as quickly as a person being tracked by 10,000
  • My stream of data is updated in real time regardless of if I visit the site once a year or once an hour.

Basically the way the user experience is ‘unfair’ in it’s balance of resources.  Regular users of the site are punished by the super users. If you think of the site as a utility then each person using the site should be entitled to a somewhat equal share of the site resources.

The Twitter status blog makes no secret that they believe they should be architected as a messaging system. Each time a person posts a message it’s ‘sent’ to the followers of that person. So each time a popular users posts a message it may be sent to 20,000 ‘inboxes’ this can result in a mass ammount of back-end servrver requests to process the messages.

Consider how the performance expectations could be set through a simple user interface change:

Twitter Performance Sending

By simply telling users that updates for that user are being sent and a percentage of those updates is complete it begins to set expectations for how the performance of the service will scale.  For a user with 50-100 followers the sending performance will continue to be relativly quick but for users with tens of thousands of followers there is the expectation that it could take several minutes to get all updates out.

If you define the user experience you want to achieve you can architect your system with this in mind. The above implies that each user would have their own outgoing message queue. This is similar to an outbox in email. A collection of worker machines could then cycle through all the users and process a certain number of operations per user.

  • If the user has messages in their outbox process X messages and deliver them to the appropriate end-points, sending to the most popular people first when possible.
  • If the user has no messages in their outbox process Y people that they are following and pull messages from those peoples message queues.

The above is a fairly simple system that is similar to how a CPU kernel will perform process time-slicing allocating a consistent amount of time to each system process. Similarly each person is allocated an equal slice of the sending/fetching pie. The above process has the following nice characteristics:

  • If you follow few and few follow you you’ll have a very responsive experience.
  • If you follow few and many follow you most of your time is spent sending updates.
  • If you follow many and few follow you most of your time is spent fetching updates.
  • If you follow many and many follow you your updates don’t slow down the system they just get added to the queue. Additionally people with lots of followers are able to carry on conversations with other popular people. (The Techcrunch chatting with Scooble problem)

The systems would scale in a more linear way. Certain users would experience slow sending durring peak times but this would be more isolated and a problem that is easier to solve with more worker machines. The key thing is that by setting the user experience expectations of performance with an outbox or a sending status the users of the system can visually see the health and performance of the system.

Post to Twitter