I have been wrestling with this problem for a couple of days. I have hundreds of sports teams broken down by leagues and geographic locations.

For example:

    English Premier League: Manchester United, Liverpool, Arsenal .....(total 20)
    Italian Serie A: Juventus, AC Milan, Roma... (total 20)
    Around 20 other leagues
    In addition to national teams broken down by continent.

Users are supposed to choose their favorite team on a mobile app.

How would you go about this?

Here are some options I thought about:

  1. Search + Autocomplete

    • Pros: Straightforward, users understand this approach
    • Cons: Requires typing, visually boring
  2. An upper pane, once a league/continent is chosen, a bottom pane appears with corresponding teams in the main category

    • Pros: 2 taps only
    • Cons: Small icons on a small screen can be confusing
  3. Expandable menus of the leagues. Tapping expands more teams

    • Pros: 2 Taps
    • Cons: Could require a lot of scrolling

Ideally I would like an option that is both visually appealing and innovative + requires two taps only. Any takers?

  • I think setting favorite isn't primary activity, it's rather integrated into browsing and viewing activities. However, both search+autocomplete and browsing across leagues/countries are required functionality. Commented Jan 29, 2014 at 17:13

4 Answers 4


You are blessed with a knowledgeable user who knows the information they are trying to find. Seriously consider the Auto-complete / auto suggestion option as it's likely to offer the right team in a short list after 3 - 4 letters have been typed.

Consider finding my home town in Google maps. Should I find "UK" from a list of countries, then find "Hampshire" in a list of counties, then scan down for "Southampton" from a list of towns? That's how a lot of old sat-navs used to work and, from personal experience, it's cumbersome. Google provides me with the ability to type "southa" into a box and find "Southampton" immediately.

Essentially, I don't agree that typing is inherently a 'con', or that visually boring is a consideration that comes above ease of use and immediacy for a user.

Is Google's home page search box visually boring? Maybe. Is it useful? yes :o)

Saying that, if you really want to know which is best, build an HTML prototype of each and ask people to try them out - see which is easiest. Then you'll know for sure and can stop stressing :o)

You could use twitter typeahead for your first suggestion: https://blog.twitter.com/2013/twitter-typeaheadjs-you-autocomplete-me

And a few link-filled HTML pages would do for each of 2 and 3, or knock some up using twitter Boostrap's "Collapse" feature http://getbootstrap.com/javascript/#collapse

I'd suggest using Bootstrap as you can quickly mock something up that can be viewed on a phone viewport.


Type and find is the best way. If you want to make it visually appealing, displaying the team logos as you type might help. I think if I have a fav team, I would identify it by the logo asap.

So if I type 'Man', I would see the logos of Manchester city and Manchester United making it easy to select.


Tap count is not really a determining factor in UI efficiency, but the UI described below is efficient in the (likely?) case that multiple teams of interest are from same the country and same league. If a UI is fun, efficient enough, and not used very often then tap count is somewhat irrelevant See full argument here

The continent / country filter can be done via image of a map (i.e. an outline of world map with clear hotspots). One click to zoom a continent (or FIFA region) and another to select the the country.

  • When in a Continent / FIFA Region is selected can list the National Teams.

  • When a country is selected can list it's leagues + teams in that country in a sectioned scrolling list (also it's national team)

This should give nice balance of visual attractiveness and efficiency.


The best and most efficient way of displaying this information would be displaying a list of leagues that include there logos then from there on they can choose their team. Also a search bar with auto complete to accompany that.

An example > (Very rough drawing)

Rough Drawing

The user can either search for leagues or teams and the box/table automatically changes with the auto-complete function, they can then choose a league or choose a team to add.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.