Country page: UI/UX Review

[ramyaragupathy]

From #557 - Capturing @katia-utochkina's review on country page:

• Path to the “Country” page requires a lot of clicks
• Inconsistency between the tab label (“Country Contact” ) and the content behind it.
• Some sentences are much longer than they need to be. This makes the tab panel viewing and scanning hard.
• There’s no quick way to unselect multiple filters at once.
• Insufficient visual feedback for users interacting with filters
• Map legend missing an item

---

Path to the “Country” page requires a lot of clicks

It would be good to change the way users are provided access to the “Country” page. At the moment, it’s not gained easily. And visitors have to make a lot of clicks to get to the destination. For those who’re unfamiliar with the interface, it would probably take at least 6 clicks to get to the “Country“ page. Making users perform so many clicks is an experience that could introduce a lot of frustration

“Our work” --> “Countries We Work In” ---> “Locations mapped” --> “[ ]” --> Regions ---> Countries

Inconsistency between the tab label (“Country Contact” ) and the content behind it.

The section uses a left/right pane design. On the left hand side, we’ve got a map. On the right — a tab panel with 2 options : “Country Contact” and “Campaign Filters”.

As a user, I would expect tab labels to succinctly describe the content they represent. That is not the case with the “Country Contact” tab at the moment. Currently, its content isn’t tailored to the label. And apart from contact details, it has an overview of mapping campaigns, too. This is confusing.

It would probably make sense to take what appears under the “Country Contact” tab and reorganize the information so that all info is where it belongs.

Some sentences are much longer than they need to be. This makes the tab panel viewing and scanning hard.

It would be good to reduce the mental effort required for processing tabs’ data. The more we can edit their content down, the more likely it is that users will eyeball/read it.

There’s no quick way to unselect multiple filters at once.

Not having an option like that makes for a frustrating experience.

Insufficient visual feedback for users interacting with filters

a) Users should be aware at any time which filters have been applied. That’s not obvious enough at the moment. For example, when interacting with the “status” filters, I felt unsure about which filters I toggled on and which ones I toggled off.

b) Also, at the moment, filters are applied as soon are they are clicked. Not everyone may notice instant visual changes and realize the results have been updated. A little bit of testing would go a long way here, I guess. It’d be good to see what users say about the filter implementation.

Map legend missing an item

Very few symbols/icons can be universally recognized by users. It would probably be good to include in the legend and indicate that it represents Mapping Campaigns (and remove “sized by edits” ). Doing so would reduce ambiguity and help visitors find meaning in map data quicker and with greater ease.

[SiddharthSimharaju]

Hello @ramyaragupathy, I have gone through the country page and there were some of the things which I felt could be improved.

1)This icon doesn't justify what it does. A location icon or something more relatable will be better.

2. Can't zoom out of this scene when we are in a specific country page. In some cases, zoomout will be needed.

3. The zoom in and zoom out the need to have buttons rather than scroll in and out triggers. Also an option to zap to the selected country. The option below can be used somewhere on the map

4. Not quite able to understand what this does but if the options on the right are checkboxes, then maybe a tick would suffice than coloring the whole button. And clicking on options don't show any change in some countries. Providing a null/error message will help users understand better.

4. This seems like a bug. but again, working on checkboxes will help and the red text causes eyes to strain on the right tab. Can try using brighter or white text.

5. Tooltips aren't perfectly aligned. They are overlapping the text.

These are some of the issues I found that could be improved. And you have mentioned many already. Hope this helps.