Overview of the mobile application "Ostrovok" for the Android platform
We have prepared a regular review of the Android application, which contains practical recommendations for improving the design, architecture and ergonomics of the interface. Today we talk about the application "Ostrovok". We have already reviewed the “@to Music” , “auto.ru” , “Pronto” and “Railway Tickets” applications. Reviews prepared in collaboration with UsabilityLab .
Ostrovok - application for searching and booking hotels. With it, you can select and book a suitable hotel by entering your bank card details. Distinctive features of the application: search for hotels located next to the user, and booking a hotel for the next night in Moscow, St. Petersburg and Kiev at a discount of 60%.
The overall rating of the application on Google Play is estimated by 231 users to be quite high - 4.3. A greater number of users rated its functionality at 5 stars.
')
Judging by the reviews, users would like to see more options in the application, there are also comments on the interface:
When you first start the screen displays information about the new function "Hotel for the next night." However, it is difficult to notice, the user's attention will most likely be drawn by three pictures with recognizable views of cities.
Imagine that the user had a task to book a hotel in St. Petersburg for the night of September 21-22. Most likely he will click on the picture "St. Petersburg". The absence of any interface reaction will force the user to click on the picture several times. And only finally making sure that the picture is not clickable, it will close the pop-up screen.
The developer guide for Android describes in detail the standards for Navigation Drawer . But not all interaction patterns provided by the manual work in the application.
Navigation through the application is organized using the Navigation Menu, which leaves on the left. The interaction with the menu is standard: by clicking the icon in the upper left corner or swipe gesture across the screen. But when you click on the phone button "Return" the application closes. Such a scenario will come as a surprise to the user, because he assumes that this action will return him to the current screen of the application.
Navigation Menu. In this case, we are on the "Hotel Search" screen, which is prudently marked in the menu. And again there is a flaw - if the user clicks on the Navigation menu icon again to get back to the hotel search screen, nothing will happen. This pattern works great in such popular applications as Facebook and Vkontakte. Users have become accustomed to this action, and it will be very difficult to retrain them.
By default, the most frequent parameters are preset in the search form - this is the nearest date and the number of guests at “Adults: 2”. At the same time, the user is not able to specify how many rooms are needed for 2 adults: depending on the circumstances, this can be one or two rooms.
By clicking on the "Select Direction" field appears to enter the city and country. The keyboard appears only when you click on the input field - the only one on the screen. Users usually do not want to perform unnecessary actions, so it is better to immediately show the keyboard. When you enter in the "Choice of direction" field of the country "Russia", several cities appear in the list. Choose "St. Petersburg".
Clicking on the date field opens a calendar. When the user selects a date, the next number is automatically highlighted in the calendar. It's comfortable. But if a user is looking for a hotel for a few days, he needs to use the “hold and drag” gesture (Swipe) . The user will need time before he guesses it.
When the "City" or "Calendar" fields are "slammed" on the screen, the "Find" button is not visible: it is there, but it is located outside the screen. To get to the button, you have to scroll down the screen or close the calendar.
Tabs (tabs) “All hotels” and “For this night” are in place of the action bar menu , because of which the user does not see the name of the application. This is not a critical disadvantage in terms of usability, but it is better that the name of the application with which the user works is always visible.
Compare the tabs in the Ostrovok app and in the guide for the Android platform. In the screenshot we see the correct location of the Action Bar, the action menu (1) and Tabs, the tabs (2).
After all the parameters are selected and the “Find” button is pressed, in about 1.5-2 seconds the application finds the hotels in St. Petersburg that match the query. At first glance, the principle of sorting hotels is not clear: not by price, not by rating and not by name. Hotels are sorted randomly.
Visually impaired users may have problems reading the hotel address and hotel rating when viewing the list of hotels, because the color of the fonts merges with the background.
Imagine a user who is interested in the most budget hotels. Naturally, he would prefer to sort the hotels by price, in order to see the options he needs at the beginning of the search results. By clicking on the Settings icon, a window appears with filters and sorting.
The screen contains a list of filters for the search, but the tabs “Filters” and “Sort” hide the name of the application. The name of the application should always be visible: in terms of user convenience, and also following the style guide for the Android platform, tabs should be located under the action bar . The screenshot shows a comparison of the screen of the Ostrovok application and Google Play, where the tab bar is located under the Action bar element.
The "Filters" tab contains a set of settings. If the fields “Enter the name of the hotel” and “Cost (in rubles)” are understandable to the user, then the parameter “Distance to the hotel (in meters)” is completely useless if gps is not currently enabled. The user has no starting point to apply this parameter.
Having set up “Filters”, the user starts searching for a button to apply the parameters. But this button in the application is not provided. The process of processing the settings in the "Filters" starts by pressing the phone button "Return". And this, again, is absolutely not an obvious action.
Go to the tab "Sort". The list of possible sorts is accompanied by radio buttons. After selecting the desired characteristics, the user expects the application to return to the sorted list of hotels, but this does not happen automatically. Here again, the "Return" button is needed. Additional inconvenience is also caused by the fact that the system does not remember the sorting type selected by the user. The application does not give the user a choice: remember the sorting type or reset it.
Imagine that a user is looking for accommodation for two people in a cheap hostel. He is quite satisfied with a bed in a dormitory for 8-10 people, he does not need a whole room. However, it is impossible to find hostels with this location, although they are in the system. And all because in the search in the field "Number of guests" was introduced 2 people. In this case, only some persistent users will be able to find hostels, having guessed to enter “1 guest” in the search.
On the hotel’s page, the user is primarily interested in the location, number of stars, reviews, prices and types of rooms, food information, wi-fi, safe, etc. This information should be presented in a brief and convenient form for the text or symbols to be understood .
The application has a number of problems with the display of hotel information. First, it’s not obvious to the user that the hotel’s photos can be flipped through: the usual click on the photo doesn’t start viewing the photos.
Judging by the feedback from users on Google Play, the application does not have enough reviews about hotels.
In addition, the hotel’s rating is indicated without any explanation as to what parameters it is assigned to.
The description of the hotel is presented in the form of a long text, although the most effective and simple solution would be to move from solid text to easily readable lists.
Information about the rooms is located at the very bottom of the screen with a description of the hotel, it is likely that the user will never see it.
On the page with the numbers there is only general information, but there are not enough details to help understand the differences between the proposed options. Under the icon "info" there is only information about the possibility of cancellation. The lack of information about the rooms and their differences sometimes leads to such incidents: according to the description, the numbers are the same, and the prices differ significantly.
When a user clicks on one of the rooms, he most likely expects to see more detailed information about the room, but gets on the booking form.
On the first screen, the user enters information about himself and contact information, on the second screen - the details of a bank card.
For the experiment, a card number and a CVV consisting of only zeros were entered, but the system did not generate any error. This means that it does not check the correctness of entering the card number. The system will not notify the user of the error and it will decide that the booking was successful. Thus, the main and most important task of the application - to book a hotel - is not performed.
In fact, some features of the application are worthy of praise.
Thus, this application has all the chances to become an indispensable assistant to travelers, when developers eliminate all current usability problems.
Most of the problems found in the app are not so critical as to discourage hotel reservations. But some problems significantly reduce the functionality of the application. You need to start with the most serious problem with a bank card.
Developers Relations Team, Google Russia
About the application
Ostrovok - application for searching and booking hotels. With it, you can select and book a suitable hotel by entering your bank card details. Distinctive features of the application: search for hotels located next to the user, and booking a hotel for the next night in Moscow, St. Petersburg and Kiev at a discount of 60%.
The overall rating of the application on Google Play is estimated by 231 users to be quite high - 4.3. A greater number of users rated its functionality at 5 stars.
')
Judging by the reviews, users would like to see more options in the application, there are also comments on the interface:
“The program has too small a font. There is no possibility to increase the number of photos. Would not prevent reviews of hotel visitors. ”
Application launch
When you first start the screen displays information about the new function "Hotel for the next night." However, it is difficult to notice, the user's attention will most likely be drawn by three pictures with recognizable views of cities.
Imagine that the user had a task to book a hotel in St. Petersburg for the night of September 21-22. Most likely he will click on the picture "St. Petersburg". The absence of any interface reaction will force the user to click on the picture several times. And only finally making sure that the picture is not clickable, it will close the pop-up screen.
Information for developers
Problem | Criticality | Recommendation |
| In the pop-up window “New function: Hotel for this night!” The pictures are not clickable. |  | Click on a photo of the city should translate into a hotel search form in the selected city. |
Navigation
The developer guide for Android describes in detail the standards for Navigation Drawer . But not all interaction patterns provided by the manual work in the application.
Navigation through the application is organized using the Navigation Menu, which leaves on the left. The interaction with the menu is standard: by clicking the icon in the upper left corner or swipe gesture across the screen. But when you click on the phone button "Return" the application closes. Such a scenario will come as a surprise to the user, because he assumes that this action will return him to the current screen of the application.
Navigation Menu. In this case, we are on the "Hotel Search" screen, which is prudently marked in the menu. And again there is a flaw - if the user clicks on the Navigation menu icon again to get back to the hotel search screen, nothing will happen. This pattern works great in such popular applications as Facebook and Vkontakte. Users have become accustomed to this action, and it will be very difficult to retrain them.
Information for developers
Problem | Criticality | Recommendation |
| The navigation menu Navigation Drawer is not closed with the help of the “Return” button of the phone, instead, a full exit from the application occurs. |  | By clicking on the “Return” button, the Navigation Drawer should close and return to the current application screen. |
| When you click on the highlighted item in the Navigation Menu, nothing happens. | | By clicking on the highlighted menu item should return to the active screen of the application. |
Hotel search
By default, the most frequent parameters are preset in the search form - this is the nearest date and the number of guests at “Adults: 2”. At the same time, the user is not able to specify how many rooms are needed for 2 adults: depending on the circumstances, this can be one or two rooms.
By clicking on the "Select Direction" field appears to enter the city and country. The keyboard appears only when you click on the input field - the only one on the screen. Users usually do not want to perform unnecessary actions, so it is better to immediately show the keyboard. When you enter in the "Choice of direction" field of the country "Russia", several cities appear in the list. Choose "St. Petersburg".
Clicking on the date field opens a calendar. When the user selects a date, the next number is automatically highlighted in the calendar. It's comfortable. But if a user is looking for a hotel for a few days, he needs to use the “hold and drag” gesture (Swipe) . The user will need time before he guesses it.
When the "City" or "Calendar" fields are "slammed" on the screen, the "Find" button is not visible: it is there, but it is located outside the screen. To get to the button, you have to scroll down the screen or close the calendar.
Tabs (tabs) “All hotels” and “For this night” are in place of the action bar menu , because of which the user does not see the name of the application. This is not a critical disadvantage in terms of usability, but it is better that the name of the application with which the user works is always visible.
Compare the tabs in the Ostrovok app and in the guide for the Android platform. In the screenshot we see the correct location of the Action Bar, the action menu (1) and Tabs, the tabs (2).
Information for developers
Problem | Criticality | Recommendation |
| Tabs (tabs) “All hotels” and “For this night” are located on the site of the action bar of the application. | | Place tabs (tabs) below, under the action menu (action tabs). See the style guide . |
| When the "Direction selection" field expands, the keyboard does not automatically appear. | | Show the keyboard as soon as the user enters this field. |
| To select several days in the calendar, you need to use the “hold and drag” (swipe) gesture. | | Support a simple touch gesture (touch) so that the user can select dates with two clicks. |
searching results
After all the parameters are selected and the “Find” button is pressed, in about 1.5-2 seconds the application finds the hotels in St. Petersburg that match the query. At first glance, the principle of sorting hotels is not clear: not by price, not by rating and not by name. Hotels are sorted randomly.
Visually impaired users may have problems reading the hotel address and hotel rating when viewing the list of hotels, because the color of the fonts merges with the background.
Imagine a user who is interested in the most budget hotels. Naturally, he would prefer to sort the hotels by price, in order to see the options he needs at the beginning of the search results. By clicking on the Settings icon, a window appears with filters and sorting.
The screen contains a list of filters for the search, but the tabs “Filters” and “Sort” hide the name of the application. The name of the application should always be visible: in terms of user convenience, and also following the style guide for the Android platform, tabs should be located under the action bar . The screenshot shows a comparison of the screen of the Ostrovok application and Google Play, where the tab bar is located under the Action bar element.
The "Filters" tab contains a set of settings. If the fields “Enter the name of the hotel” and “Cost (in rubles)” are understandable to the user, then the parameter “Distance to the hotel (in meters)” is completely useless if gps is not currently enabled. The user has no starting point to apply this parameter.
Having set up “Filters”, the user starts searching for a button to apply the parameters. But this button in the application is not provided. The process of processing the settings in the "Filters" starts by pressing the phone button "Return". And this, again, is absolutely not an obvious action.
Go to the tab "Sort". The list of possible sorts is accompanied by radio buttons. After selecting the desired characteristics, the user expects the application to return to the sorted list of hotels, but this does not happen automatically. Here again, the "Return" button is needed. Additional inconvenience is also caused by the fact that the system does not remember the sorting type selected by the user. The application does not give the user a choice: remember the sorting type or reset it.
Imagine that a user is looking for accommodation for two people in a cheap hostel. He is quite satisfied with a bed in a dormitory for 8-10 people, he does not need a whole room. However, it is impossible to find hostels with this location, although they are in the system. And all because in the search in the field "Number of guests" was introduced 2 people. In this case, only some persistent users will be able to find hostels, having guessed to enter “1 guest” in the search.
Information for developers
Problem | Criticality | Recommendation |
| It is impossible to find a cheap hostel if the user is looking for accommodation for two or more people. |  | Show in the search results accommodation options in hostels where people are accommodated in dormitory rooms. |
| In the search results, the font is too small and not enough contrast. | | Make texts more contrast. |
| The tabs “Filters” and “Sorting” are on the place of the action bar and close the name of the application. | | Place tabs (tabs) below, under the action menu (action tabs). See the style guide . |
| On the screen with filters there is no button for applying filters. | | Add a button to apply filters and return to the list of hotels. This can be the “Apply Filters” or “Filter” button. |
| The application does not remember the sorting that the user installed last time. | | The user must have the choice to remember the sort or reset. |
| After clicking on the sorting type, the application does not take the user to the sorted list of hotels, but remains on the same screen. | | By clicking on any sort of sorting, move the user to a sorted list of hotels. |
| Sorting is a function that is often used, but to get to it you need to make 2 clicks. | | It is recommended to put a direct link to the search results sorting in the action bar . |
| In the field “Distance to the hotel (in meters)” it is not indicated what distance is meant. | | Mark the starting point of the distance. |
Hotel Information
On the hotel’s page, the user is primarily interested in the location, number of stars, reviews, prices and types of rooms, food information, wi-fi, safe, etc. This information should be presented in a brief and convenient form for the text or symbols to be understood .
The application has a number of problems with the display of hotel information. First, it’s not obvious to the user that the hotel’s photos can be flipped through: the usual click on the photo doesn’t start viewing the photos.
Judging by the feedback from users on Google Play, the application does not have enough reviews about hotels.
In addition, the hotel’s rating is indicated without any explanation as to what parameters it is assigned to.
The description of the hotel is presented in the form of a long text, although the most effective and simple solution would be to move from solid text to easily readable lists.
Information about the rooms is located at the very bottom of the screen with a description of the hotel, it is likely that the user will never see it.
On the page with the numbers there is only general information, but there are not enough details to help understand the differences between the proposed options. Under the icon "info" there is only information about the possibility of cancellation. The lack of information about the rooms and their differences sometimes leads to such incidents: according to the description, the numbers are the same, and the prices differ significantly.
When a user clicks on one of the rooms, he most likely expects to see more detailed information about the room, but gets on the booking form.
Information for developers
Problem | Criticality | Recommendation |
| The user does not understand how to view photos of the hotel. | | By clicking on the photos of the hotel go to viewing photos. You can also show fragments of other photos on the left and right of the photo so that the user understands that they can be scrolled through. |
| The application is not possible to read reviews. | | Add to the app the ability to read hotel reviews. |
| Hotel information is presented in one solid text that is difficult to read. | | Visually break the text into blocks and make it more readable. |
| There is no opportunity to read detailed information about the rooms. | | Add more information about the numbers by clicking on the number. |
Booking
On the first screen, the user enters information about himself and contact information, on the second screen - the details of a bank card.
For the experiment, a card number and a CVV consisting of only zeros were entered, but the system did not generate any error. This means that it does not check the correctness of entering the card number. The system will not notify the user of the error and it will decide that the booking was successful. Thus, the main and most important task of the application - to book a hotel - is not performed.
Information for developers
Problem | Criticality | Recommendation |
| If you enter a non-existent or incorrect card number, CVV or other incorrect data, the application does not inform the user about the error, but rather says that everything is fine. | | This problem can lead to the fact that the user, having made an error during data entry, will lose the "reserved" number. Therefore, it is important that the application verifies the card data before reporting the result of the reservation. |
Little about good
In fact, some features of the application are worthy of praise.
- Hotels can be added to favorites.
- It is possible to find a hotel for the next night, which is very popular with users, judging by the reviews on Google Play.
- With gps enabled, the user can see the list of nearby hotels.
Thus, this application has all the chances to become an indispensable assistant to travelers, when developers eliminate all current usability problems.
Summarize
Most of the problems found in the app are not so critical as to discourage hotel reservations. But some problems significantly reduce the functionality of the application. You need to start with the most serious problem with a bank card.
Summary for developers on the scale of the criticality of all problems found:
Problem | Criticality | Recommendation |
| If you enter a non-existent or incorrect card number, CVV or other incorrect data, the application does not inform the user about the error, but rather says that everything is fine. | | This problem can lead to the fact that the user, having made a mistake while entering data, can lose, as it seems to him, the "reserved" number. Therefore, it is important that the application verifies the card data before reporting the result of the reservation. |
| It is impossible to find a cheap hostel if the user is looking for accommodation for two or more people. | | Show in the search results accommodation options in hostels where people are accommodated in dormitory rooms. |
| Tabs (tabs) “All hotels” and “For this night” are located on the site of the action bar of the application. | | Place tabs (tabs) below, under the action menu (action tabs). See the style guide . |
| Users may not understand how to view photos of the hotel. | | By clicking on the photos of the hotel go to viewing photos. You can also show fragments of other photos on the left and right of the photo so that the user understands that they can be scrolled through. |
| The application is not possible to read reviews. | | Add to the app the ability to read hotel reviews. |
| Hotel information is presented in one solid text that is difficult to read. | | Visually break the text into blocks and make it more readable. |
| There is no opportunity to read detailed information about the rooms. | | Add more information about the numbers by clicking on the number. |
| The navigation menu Navigation Drawer is not closed using the phone's Return button, instead, there is a complete exit from the application. | | By clicking on the button “Return” the phone should just close Navigation Drawer and return to the current application screen. |
| In the search results, the font is too small and not enough contrast. | | Make texts more contrast. For pale gray you need to write a darker color, for example, black. |
| The tabs “Filters” and “Sorting” are located on the site of the action bar of the application. | | Place tabs (tabs) below, under the action menu (action tabs). See the style guide . |
| On the screen with filters there is no button for applying filters. | | Add a button to apply filters and return to the list of hotels. This can be the “Apply Filters” or “Filter” button. |
| The application does not remember the sorting that the user installed last time. | | The application must remember the sorting that the user has set. |
| After clicking on the sorting type, the application does not take the user to the sorted list of hotels, but remains on the same screen. | | By clicking on any sort of sorting, transfer the user to a sorted list of hotels. |
| When the "Direction selection" field expands, the keyboard does not automatically appear. | | When expanding this field, immediately open the keyboard. |
| To select several days in the calendar, you need to use the “hold and drag” (swipe) gesture. | | Support also a simple touch gesture (touch) , when the user can select the start and end dates with two clicks. |
| When you click on the highlighted item of the navigation menu, nothing happens. | | By clicking on the highlighted menu item should return to the active screen of the application. |
| In the message about the new function "Hotel for this night" photos of cities are not clickable. | | A click on a photo of the city should translate to the search form in which the selected city should be installed. |
| Sorting is a function that users use often, but in order to get to it you need to make 2 clicks. | | It is recommended to put a direct link to the search results sorting in the action bar . |
| In the field “Distance to the hotel (in meters)” it is not indicated what distance is meant. | | Clarify what distance is meant. At the moment, this can only be guessed. |
Developers Relations Team, Google Russia
Source: https://habr.com/ru/post/203846/
All Articles