Store Membership Toggles Submission #1 - Research and Design Studies

samgawaran commented 2 years ago

Summary

Researched popular platforms and gaming subscriptions and found out different styles on how we could approach the Membership Toggles far better than what is suggested in https://github.com/colonistio/design/issues/92

Details

Usable Implementations

Good Implementation

Toggle - Majority of websites use toggles for their memberships or other main options like in Food Del. Apps and software services Radio Buttons - Mostly used as a secondary option if the website has a toggle (Mega) but if websites offer a lot of options they usually use this approach No Annual Option - Xbox and Patreon use this to minimize the options the users would pick. All options are billed Monthly

Bad Implementations / Not Applicable

Bad Implementation

Checkbox - Toggles are far superior in terms of UI. Checkboxes works if we offer more than 3 options like in our payment methods Single Tier - Not applicable if we are offering tiered memberships Hover State - Doesn't work well for Mobile Viewing

Implementation

I recommend using toggles, @JuanRoman77 and I talked about this in detail via DMs and we both agree that toggles are better than the other options.

If anything else, we can also remove the annual option to reduce the number of choices the players need to make.

here's a sample animation if we would use toggles

Related Submissions

https://github.com/colonistio/design/issues/92

Submission Checklist

[ ] I did not leave out anything that has already been implemented
[x] I considered mobile (table & phone) devices
[x] I considered horizontal & vertical mobile devices
[x] I considered small & large screen desktop devices
[x] I considered all possible use-cases of the design, including disconnects, page refreshes, scrolling, changing tab, hovering etc.
[x] I considered all related screens this feature might effect. (Landing page, Lobby, Room, Game, Store, Community, Press-kit etc..)
[ ] I checked out data on Google Analytics, Indicative and Metabase to make the right decision.
[ ] I considered C&K, SF, large maps and other possible future modes and maps
[ ] I considered 2nd order effects
[x] I looked at examples of other products
[ ] All designs I submitted are final and for implementation purposes

samgawaran commented 2 years ago

for review: @demiculus @JuanRoman77 @goktugyil

Juan, I modified the toggles a bit, removed the white stroke, and make the width much smaller to reduce the size

JuanRoman77 commented 2 years ago

Yeah I noticed. Looks good. But I think it might look better if both sides of the toggle should have the same width. No strong feelings tho.

samgawaran commented 2 years ago

But I think it might look better if both sides of the toggle should have the same width

Based on research, all of the website's toggle width I checked follows the dimension of each word separately and not the longest word. Though I get your point of making it all the same width for consistency, I think it's safer to follow the standard for this one

Esqarrouth commented 2 years ago

Toggle looks good

colonistio / design