Application interface: our mistakes and 16 tips for not repeating them

Published on May 13, 2014

Application interface: our mistakes and 16 tips for not repeating them

    As soon as we made the first version of the iOS application, I began to stubbornly pester people on football fields and basketball courts with a request to install Topic and click it right with me.

    There is nothing more valuable than watching live how users interact with the interface. According to the results of observations, it became clear that many of the things we did not do exactly as we should. Further about our mistakes, how we corrected them, and tips on how to avoid repeating these errors.


    Image No. 1: search for games (Find a game in the application menu)

    Game feed


    The most important thing Topic is for is finding the right game. At the same time, the main criteria for the players are:
    - Location of the platform for the game
    - Game time (day of the week and time period)
    - Game level

    In the first version of the application, we tried to display all this (and some other) data in the list of games. But faced with the fact that there was too much information, it is difficult for the user to navigate straight away. Also, the method we chose to display the list of games, horizontal scrolling, was not obvious.

    Hence the conclusions:

    1. Use user-friendly UI elements

    Horizontal paging allows you to display more information, but it turned out to be unobvious. A vertical feed of news / ads / products is used in many popular applications.

    2. Try to reduce the "noise" of the interface.

    In order not to scatter the user's attention, you need to display only the most important data. Minor needs to be hidden deeper. We removed the address, level (let the player choose the range of levels in the settings), the number of free places (if there are no places, then the game is not displayed), the organizer's and sign-up avatars, buttons for creating a game and adding a site.

    3. Important controls must be made large enough, unimportant - hide deeper

    Typical behavior was switching one user between 1-3 favorite sports. Therefore, we decided that it would be better from the very beginning to ask what sports the user is interested in, save this in his profile and display the default list of games for the selected sports (see more on this below).

    In this case, the control of the choice of sport loses its importance and goes deeper into the general filtering settings. This allows you to make important buttons for navigating to the filter settings (Filter) and search on the map (Map) much more noticeable and larger.

    4. Try to output data in a format that is easier to read.

    If the price is flat, without cents / kopecks, then 00 cents should not be displayed. If the game is today or tomorrow, then you need to write like that, without forcing the user to remember what day and day of the week it is today.

    5. Do not lead the user into a dead end with a zero result.

    If nothing is found in the search for games, we display the best nearest courts where you can create a game so that the user can correct the situation


    Image No. 2: search for games, nothing was found (set all in the application filtering settings ranges from 0 to 0)

    6. Gently push the user to the actions you need: If You Don'T Ask, You Don'T Get

    We would like as many users to create games on the Topic. Therefore, at the end of the tape with games, we display the button for creating a new game.

    The problem that has not yet been solved - the list of games does not give a clear idea of ​​the location of the game on the map. But the map does not provide a visual representation of other parameters of the games, for example, date and time. Perhaps the default screen should not be a list of games with photos (List), but a map with markers (Map). I will be glad to hear your advice.


    Image No. 3: search for games (scroll to the very end of the game search stream)

    Intro Screens


    7. Use introductory screens: a minimum of text, a maximum of visibility.

    In order to quickly orient the user where he got to, what value he will receive from using the application, in the first launch we show him two introductory screens. The screens hint that we can find games for different sports and that games can be filtered according to different criteria.


    Image # 4: Intro screens when you first start the application

    8. The first user experience should be cool. Customize your content so that the experience becomes as vivid as possible

    As soon as we had more than 5 sports in one city, the conversion from the screen with the search for games to view a specific game became lower. It is highly desirable that the list of games that we show the user is relevant to their preferences. Therefore, immediately after the opening screens and requesting rights to determine the location, we suggest choosing your favorite sports, which we will write to his profile later after registration.

    Previously, we requested our favorite sports after registration. The choice before registration increases the relevance of the game stream, makes it possible to focus on other more important elements of the interface.

    If the user has not selected sports, then in the stream we show him all sports.

    9. Simplify entry and selection of options

    After our previous articleon Habré, many asked to add the most unexpected sports to Topic. At first we struggled with this and deduced only the popular ones (otherwise the choice of a sport from a huge list turned into a nightmare).

    But in the end, they gave up and decided to just add a form for filtering by name to the list. Nothing is entered - all sports are displayed, as soon as we start entering - the list is filtered.


    Image No. 5: Choosing your favorite sports (fourth introductory screen when you first start the application)

    Rights Requests


    Do not ask for all the rights the application needs in a bundle at the first start. With this approach, the user does not understand why he should give them to the application - we do not explain anything. And refusing to give rights is not so simple, you have to dig quite deep into the phone settings.

    10. Request rights only before they are needed.


    Image No. 6: Request rights to send push notifications (after the first message is sent to someone or after sending a request to participate in the game with the need to confirm the entry by the organizer)

    11. Transparently inform that the user will receive by giving rights

    12. Show the iOs dialog box only when the user clearly shows his intention to give rights. Give the user a choice

    For example, if a user refuses to pre-request location rights, we suggest that he enter the city manually + we show a button with the ability to still give rights.


    Image No. 7: Pre-request for rights to determine the user's location (third introductory screen at the first launch of the application)

    13. If the rights have not already been granted, then show a visual hint on how to issue them.


    Image No. 8: If the request for rights to send push notifications has already been rejected by the user, but the user clicked “Notify me” on the image screen No. 6.

    Use the data of the social graph or other auxiliary data in order to improve the user experience

    Going to a meeting with a stranger is a cognitively uncomfortable situation. Going to a group event is much easier, the degree of awkwardness decreases. If the sporting event is even easier. But the most comfortable thing is to go there with friends or acquaintances.

    The evidence that my three Facebook friends are going to play football next day tomorrow will greatly improve my experience using the application. Of course, data on social connections of users will not help all applications. But, for sure, there are other supporting data that you can use to make users a little happier.


    Image No. 9: An offer to find friends registered on the Topic (appears on the second day of using the application)

    15. Make more visible the data that affect the user’s performance of the desired actions.

    We noticed a steady pattern of behavior: very many, before signing up, look at the pages of those who have already signed up for the game. To make it easier for them, we increased the size of the photos being recorded. Most likely, the next step is to display other summary data for each record: what level of game, how many games have been played.


    Image No. 10: Game page (Click on any game in the Find a game section)

    Filtration


    I’m asking for advice from residents: there was a problem how to give the user the opportunity to change the list of “My activities”, which he enters when he first starts the application. If it is registered, then everything is not so bad, sports are edited in the profile. Although this is not such an obvious path as we would like.

    If unregistered, it’s still harder. Perhaps it’s worth listing a separate control for editing “My activities” in the list. If the user is not registered, then ask him to register for editing. If registered, then send to edit the profile. I will be glad to hear your advice.


    Image No. 11: Game filter (Click on the corresponding button in the Find a game section)

    16. Do not make a multifunctional harvester from the application, focus on the main functionality

    For the main part of users, creating a game and adding a platform is not so important,
    therefore, we removed these buttons from the lower bar and selected them separately in the menu.

    Perhaps later we will separate the organizer’s functionality into a separate application, as Eventbrite did.


    Image No. 12: Menu (click on the icon in the upper left corner)

    And finally, the finalized registration / authorization page:


    Image No. 13: Authorization page (click on the “Sign in” link in the menu)

    Almost all of the above improvements are still being baked, there are none yet in the version that is now in the install . I ask the Khabrovsk people to support us and advise here that we can improve the application, and in the app - note that there is already good in it;)

    For your convenience, numbered all the images so that it is convenient to refer in the comments. I registered briefly how to get on the screen in the application .