1

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?

enter image description here

3
  • 1
    You mean you want to show regular route in flight list? or are there more info to be displayed?
    – Moksh
    Commented Sep 10, 2020 at 9:34
  • Just whatever you do, don't copy the yellow background! It sends my eyes funny
    – musefan
    Commented Sep 10, 2020 at 12:27
  • Is the implication that 'common' flight routes offer better prices or better times? What is driving the pick list behavior, and what helps the business here? If the user knows where they are going, would they try to find something near to a 'common' airport (assuming they understood the icon)?
    – Mike M
    Commented Sep 10, 2020 at 13:44

3 Answers 3

2

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.

1

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.

2
  • 2
    Would be careful associating a fire icon with anything related to airplanes and airports.
    – Nicolas
    Commented Sep 13, 2020 at 2:16
  • True, its better to add a tag along with it to make it obvious. Or best to use a start which is usually understood without confusion Commented Sep 14, 2020 at 3:10
0

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.enter image description here

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.enter image description here

2
  • Wouldn't the star icon also cause the same misunderstanding as the problem I'm facing currently
    – Blue Ocean
    Commented Sep 14, 2020 at 3:22
  • Same misunderstanding yes, but less likely to occur. Due to familiarity with this symbolism from other websites. My guess is that likelihood will be less by about 10%. Guess is not backed by data.
    – Raiyan
    Commented Sep 14, 2020 at 3:38

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.