User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm designing a flow that will reduce the likelihood of users getting zero results when they search for a flight. When looking at examples of how other airline apps do this, I came across the following example (scoot airlines app).
The black airplane icon indicates flights in operation. I find it's not very intuitive if you miss their notification telling what it means.
What would be a better design approach to execute this solution?
Icons without labels are prone to mean whatever the user thinks they mean. Aside from a handful of established icons, the rest should be labeled. In this case, a simple [popular] tag would suffice.
IMO the black flight icon is not very informative. Assuming they are showing airports which are frequently used, we can push them as the top result in each alphabet, with a "fire" icon showing it's hot and popular, along with a tag to make it obvious. A better visual representation will help.
Also since you are designing to reduce the likelihood of users getting zero results, I suggest you show airports that are closer to the airports searched by the user - we should also call out that "no airports found based on the search" in a friendly voice and tone. A distance indicator tag along with each flight can help the user can take an informed decision.
I agree, the icons are not intuitive. I couldn't correctly interpret them from just looking at the UI. Before reading your description, I thought the airplane icon means this flight is operating or active. And wondered why do they show flights that are not operating? It was eventually clear, after reading the description. Your question is now serving as instruction on how to read this UI. If a user has to think what a signifier means, or needs instructions on how to read a signifier, that's a design failure.
Placing the frequent flight routes in a separate section at the top of the list eliminates the need for icons of any kind. You can also decide to show only frequent flights at first, the rest of the result will be exposed when user taps/clicks on a button labelled "more". The list can be collapsed also by clicking on "less". See (1) and (2) in the sketch. Added benefit, the non frequent flights can be lazy loaded. The first call to your backend returns only the frequent flights instead of the entire list of matching flights. These can also be cached to respond faster.
If you must use icons, I recommend using an icon that stronger associated with a product being in high demand. Concepts like favourites, popular, most viewed etc. in other product listings have similar meaning as frequent in this case. Favourites or populars are often signified with a star. I think that icon has more universal meaning than airplanes.
Another option is to use a badge instead. You get to keep the aesthetics of a small visual signifier aligned to the right edge while eliminating chances of misunderstanding. I'm using "frequent" in the example, but you can chose whatever works for you.
