Flaws in our Stars – June 2021 Round-up

This month we discussed the UI elements and UX issues of a game center screen, an e-commerce screen, and a reminder app screen!

Scroll and read our take and what our audience thought this time!

Yellowchalk Insights

Our answer: Option B

Our reasons:

• The presence of rating and genre is essential for the user as it gives them the opportunity to look for games according to their interest.
• Option B has well-spaced UI elements with more breathing room and defined borders for each game unlike a box constricting each box in option A and taking up extra space.
• The “Play” CTA is in the correct position, which is closer to the thumb, unlike option A.
• The card gets elevated whenever you hover over a certain game, allowing users to read the details more closely.
• The overall hierarchy is maintained better in option B.

Audience Insights

Audience answer: Mostly option B but also option A

Audience reasons:

• Option B is better as it has the ratings and the genre.
• The placement of the CTA on the right is handy to the majority of right-handed users.
• Some people considered option A for the header and the UI element of tile design as the header describes the screen accurately but preferred option B for the button placement.

Summary

We concede with the main counterpoint that option A conveys better messaging due to the header. With the hierarchy, breathing room, and CTA placement of option B and the header of option A, we are onto a winner!

Yellowchalk Insights

Our answer: A

Our reasons:

• The understated “Favorite” icon does not pull attention to itself.
• The splitting up of the brand and product name into two different lines improves hierarchy and reinforces the messaging correctly.
• The sizes are accurate and universal which allows the user to select their exact size.
• The size option in A saves the user a click as compared to B where they have to click a drop-down menu to select their size.
• The screen looks easily comprehensible due to the UI elements being well-spaced.

Audience Insights

Audience answer: Mostly A but also option B

Audience reasons:

• The white space in between headings adds to the visual hierarchy.
• The “Pick your Size” looks underlined, making it seem clickable when it’s not.
• Sizes like ‘S, M, L’ etc are subjective to countries while numerical values provide consistency.
• The numerical values in option A can create confusion as T-shirts and jerseys for men are usually marked with’ M, XL’.

Summary

A lot of people in the audience picked option B because conventionally, T-shirts are sold with sizes like ‘S, M, L’.. While we do think this is a major factor for considering option B, option A provides a much better hierarchy and usability. A good option would be to swap the numerical values with the suggested size guide.

Yellowchalk Insights

Our answer: A

Our reasons:

• The muted nature of the header does not pull attention from more important things on the screen.
• The active status of tabs in option A are preferable to the ones in option B.
• Option A has an ‘Edit’ icon inside the card, clearly conveying that it is the card that is editable unlike the confusing position of the icon in option B.
• The retractable nature of the card due to the presence of the small arrow makes it more accessible.

Audience Insights

Audience answer: Mostly A but also B

Audience reasons:

• It’s easier to understand the “Take BP pills” section as it alerts the user about the medicine and has a notification bell icon.
• The clean color usage in option A makes it easier to scan through.
• The “Edit” icon within the card makes it easier for users to understand that it belongs to one section only.
• The audience conveyed that we can take out the “Take BP Pill” card from Design A and place it in Design B for a better approach.
• Some people wanted the task lists in option A to be in grey as they felt that the blue color makes them all look activated.

Summary

A majority of the audience agreed with our perspective for the correct design. We resonated with the approach to change the color of the unselected lists to a softer blue in the same color palette to convey the difference in the active/inactive state.