search

colonistio / design

https://colonist.io
3 stars 0 forks source link

Mobile App: what we have so far (Finalized List) #264

Closed samgawaran closed 1 year ago

samgawaran commented 1 year ago

Goals

Submit all decisions agreed upon on Mobile

Needs

High Priority pages:

Decisions

Header

image

Benefits:

Tapping on:

Potential Risks:

Footer Navigation

image

Benefits:

Potential Risks:

Home

Matchmaking

image

Benefits:

Potential Risks:

Lobby

image

Benefits:

Potential Risks:

Create Room

waiting for feedback before decision

Menu

image

Benefits:

Potential Risks:

Reviewers

@demiculus @JuanRoman77 @woodifred @5econds

Esqarrouth commented 1 year ago

Please use any other username than that in your future designs

Esqarrouth commented 1 year ago

Potential Risks: Membership status are not shown.

That's not a risk and not a critical info

Esqarrouth commented 1 year ago

Long button names (ex. Leaderboards) needs to be renamed to fit which needs to be adjusted on the desktop version too

Agreed on this. But we should still use the work Leaderboards in our SEO stuff and some part in the web page as well

Esqarrouth commented 1 year ago

Matchmaking Not interactive enough. Further revamp is needed to make it up-to-standard with other matchmaking screens of top games

I'd like this to be iterated a bit more. I don't like the final result

Esqarrouth commented 1 year ago

Footer Navigation

I think the order should be: Store Rankings Home Lobby Profile from my past experiences with games. However I don't have a strong opinion or solid data to back this up

SimonH321 commented 1 year ago

Matchmaking Comment: Not clear to me how to toggle between ranked and unranked. It looks like I should swipe right or left, but that will change game mode. If we're expecting them to press it then we should change how the ranked/unranked buttons look

JuanRoman77 commented 1 year ago

Remove the Coins in the header. Coins are useless and it clogs the UI.

demiculus commented 1 year ago

Goal Submit all decisions agreed upon on Mobile make it easy to implement as much as possible decisions are optimized for mobile portrait

Thats your goal not the submissions goal. Each of these parts should be a different submission having their own goals.

Needs High Priority pages: Home Lobby Create Room Menu Matchmaking Footer Navigation Header

Those are your needs not the users needs.

Header:

Membership status are not shown.

Then show it on top of the icon. We already have that in our website.

The rest is good. Can move forward.

Footer Navigation:

Home should be "Play"

Menu:

Make it full screen all the way to the bottom.

Create a separate submission for all of these. Make sure to write the right goals so you'll know the right stuff to do.

samgawaran commented 1 year ago

Added homepage submission here: https://github.com/colonistio/design/issues/269

Some few things:

Please use any other username than that in your future designs

  • I'll change the name once we finalize all of the pages here. A good rule of thumb in UX design is designing with the longest name possible so we can make sure edge cases are always considered.

Remove the Coins in the header. Coins are useless and it clogs the UI.

  • I disagree, coins provide potential revenue opportunities. Also almost all mobile games have a in-game currency topup in their header somewhere. Maybe it looks clogged due to the username? it will look like this if the name is not long: image we can also remove that additional stat info to further clean up the header part.

Menu: Make it full screen all the way to the bottom.

  • I disagree, James and I considered that making it all the way to the bottom will leave a lot of empty spaces in the menu. Only thing that it would make sense is if making it all the way to the bottom is easier to implement

Matchmaking Flow optimization

  • next in my prio list. Will add it here after I'm done.
demiculus commented 1 year ago

Only thing that it would make sense is if making it all the way to the bottom is easier to implement

It is, its also less bug prone. We develop according to best UX. and menu will not effect any metric

woodifred commented 1 year ago

To clarify, I expected the menu to function like a standard slide-in menu drawer when I was looking at it in Figma.

Like this: https://m2.material.io/components/navigation-drawer

(From the left or the right is ok)

woodifred commented 1 year ago

In terms of simplifying the header, do you need the green + button on mobile?

I'd expect players to know to tap on the coin number (32550) to see their wallet and/or buy more, etc?

image

If possible, try not to cram too many tap targets into a small area on mobile. Can be tricky to hit the right spot with your thumb.

JuanRoman77 commented 1 year ago

Would tapping on the user name trigger another view/modal?

Yes, these image

Do the green + and the coin # currently take you to two different views?

No, text, coin icon, and + all lead to the coins section of the store https://colonist.io/store#coins

I'd expect players to know to tap on the coin number (32550) to see their wallet and/or buy more, etc?

Are plain texts enough indicator of a tap target? Shouldn't they have some sort of arrow, or background, etc.?

woodifred commented 1 year ago

This is great context thanks @JuanRoman77

I think that, in terms of tap targets and affordances that imply something is interactive, we have more flexibility on mobile than desktop.

There's certainly no harm in adding visual cues - but take avatars and user names in social apps, or a like count, these don't have any obvious affordances they're interactive but are a learned behaviour. I think there's the same learned behaviours in games.

I would only do it for elements that are common place across similar user experiences.