YC Audience Opinions Roundup : May 2021

Welcome to the monthly round-up for May of Flaws in our Stars – we ask our SM audience which UI is better and why.

The thing we love best about building our community is that we get to communicate with like-minded people and hear their opinions. To do more of that, we started an activity called Flaws in our Stars to engage with our audience on all things design!

We share weekly posts where we ask you to pick the best UI UX out of two options with your opinions on why it’s correct!

So in this round-up, we discuss our opinions, the preferences of the audience, and finish it off with a summary!

We ask folks for their opinions on Yellowchalk’s social media handles. This month we shared four UI screens – flight booking, billing info, personal details, and a food add-ons page.

Yellowchalk Insight:

Our Answer:

Option A

Our Reasons:

In this UI, The user has options to choose the kind of trip they want – one way, round trip, multi-city.
The hierarchy for input fields is better as it flows from the type of trip to the location and moves on to the number of passengers(adults and children) involved.
The plus and minus buttons work much better and quicker to add/remove adults and children.
It has a better overall hierarchy and the grouping is visible.

Audience Insight

Audience Answer:

Unanimously Option A

Audience Reasons:

All main texts are properly highlighted and in bold.
More pleasing to look at. (better User Experience)
Proper hierarchy.
Well separated sections.
Complete visibility of airport names.

Summary

The audience unanimously agreed that the UI of option A provided a better user experience in regard to usability and visuals.

Yellowchalk Insight:

Our Answer:

Option A

Our Reasons:

The presence of the placeholder for the card number makes it easier for the user.
The CTA mentions the amount which is extremely helpful while making financial transactions.
The outline is highlighted for the input field in which the user is typing, providing a better hierarchy.

Audience Insight

Audience Answer:

Mostly option A but also B

Audience Reasons:

It shows the users the amount to pay, making it easier for users to cross-check and avoid errors.
It also shows the exact digits remaining in the card numbers, saving the users time.
The question mark next to the CVV provides the user with instructions as to where to find the CVV on the card.
From a UI perspective, option A has MM/YY and CVV both written in capital letters which is more appealing.
A few people considered option B to be the better one because they felt that the question mark next to the CVV in option A was unnecessary.

Summary:

Most of the audience was in tune with our pointers. While we understand that experienced users may not need an explanation for a ‘CVV’ option, it can save a lot of confusion, time, and dependability for novice users.

Yellowchalk Insight

Our Answer:

Option B

Our Reasons:

It doesn’t make any fields mandatory but rather tells the users which one of the fields are optional, hence speeding up the onboarding process.
The slot for country code makes it easier for people to select their codes.
The error message is also more prominent making it easier for users to detect and rectify it.
The language is a little less formal, making it seem friendlier to the users.

Audience Insight

Audience Answer:

Option B but also option A

Audience Reasons:

For Option B

Option B is more accurate as it helps the user fill in the information more easily.
The use of white space gives more clarity to the user.
Separating the country code and using the flag increases usability and helps users from different countries choose faster.
The mobile number field being optional is empowering as users have the choice of what private information they want to share.

For Option A

Option A works better because it is clear on the information it seeks and maintains uniformity in gathering data.
Option A has a better heading because it tells the user what to do.
It’s easier to understand the mandatory and optional fields.

Summary

A quick and easy onboarding process is one of the benchmarks and first impressions a user gets out of a new product. While both A and B have several advantages to their design, option B provides the user with the option of quickly moving from the onboarding to the usage of the product, thus saving them time. This experience is invaluable in making a good first impression, and paving the way to create user stickiness.

Yellowchalk Insight

Our Answer:

Option B

Our Reasons:

Selected options in B are not overshadowing the main CTA.
The users have the option to move on from the screen with the use of cancel or proceed without selecting add-ons.
The passive selections are placed after the active ones to avoid confusion.
The shape of the main CTA is different from the tag.
The hierarchy in option B is better regarding extra charges and opacity.
The line dividing the add-ons and CTAs reinforces grouping.

Audience Insight

Audience Answer:

Tied between Option A and Option B

Audience Reasons:

Option A

Since this UI will come after when we selected our food, the title “Extras?” makes more sense.
The extra food options are clearly differentiated with colors – selected in orange, available in light orange, and unavailable in grey.
The CTA “Add” makes more sense as we will be adding these to our meal.

Option B

The title is more appropriate, and the text hierarchy used in a much better way.
Clear color-coded differentiation between selected add-ons, unselected add-ons, and add-ons that are N/A or unavailable.
CTAs clearly separated from add-ons using a separator along with a button that is visually different from the add-on selection buttons.
More organized as the unavailable options are at the bottom so that the users will not get confused.

Summary

The verbiage was a contested point for both versions of this design. According to our insights, Add-ons is more accurate as ‘Extras’ denotes more of the same meal whereas ‘add-ons’ tells us that you can add something additional to the meal as well. Option A can only be a viable option after some changes as it does not portray the best UI or UX at the moment.

Check out Yellowchalk’s projects to see the kind of work we have done in the past. Also, do follow us on Yellowchalk Social Media below and participate in the upcoming Audience Opinion sessions.