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:
The screen is supposed to serve four core functions and several secondary functions.
- Allow users to search the system using basic text search
- Allow users to view review saved searches
- Allow users to search by geo-location
- 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:
- 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 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.
- 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.