Header/Footer Icon usability

Question

Consider the two screenshots shown below

The context here is an "offers" mobile app with the icons serving the following functions

• Drop down "refine" results list (top left)
• Configure/Settings (top right)
• Search (bottom left)
• Offers on a map (bottom right)
• Shopping Basket (bottom right x 2 - if/when used)

The intent behind that last one is to ensure that the "basket" is accessible from the "main page" of the app with a single tap.

My own experience with using apps and websites is this

• I tend not to be attracted to apps that show too many header/footer icons (takes me too long to figure them out, to remember what they do
• It "looks" unattractive
• I make mistakes and tap on the wrong of 2 or more adjacent icons
• I tend to ignore all but one icon that appears in a group

I would like to know what take others here have on this

• Is this just a personal perception on my part?
• If not, what can be done to remedy the situation?

Answer 1

I think there is a lot to solve with this design, even more than you refer to in your question.

I tend not to be attracted to apps that show too many header/footer icons (takes me too long to figure them out, to remember what they do

In general, you are right. Visual and functional overload is something that can affect usability a lot. Unfortunately, I think this is just the case here.

Not only the icons are spread around the interface, but they are also not hundred percent self-explanatory:

• Search icon - I believe it should refer to the content as much as possible, right now I would rather think it leads to another screen.

• Settings - why would I need to access it often? It is too exposed, and probably you will also need to put "About", and some other things somewhere as well, so I would suggest having a Menu icon.

• The marker icon is not self-explanatory. I would not know what it does.

• Shopping basket - it is not a good practice to hide an icon from the interface, instead I would add an "basket empty" state to it.

• The Refine icon does not refer to the content and looks like menu icon - a filter icon would really be a better choice here.

• Icons are placed a little bit too close to each other.

• I cannot see the app purpose described anywhere.

To make it more clear, I would do something like this:

This way:

• you can clearly tell one view from another (map vs. list)
• search and filtering use the recognisable icons and are directly related to the content
• shopping basket is always visible and clearly communicates if there is something inside of it (0 or no badge if empty).
• you have a menu where you can hide settings etc.