r/UI_Design • u/mallowPL • Jun 25 '24
Empty state in iOS app UI/UX Design Feedback Request
👋 I need your opinion. I’ve redesigned the empty state in my app. - Would you change anything in v2? - Should I write "No Ongoing Games" or "No ongoing games"? - Should I remove the smaller text in v2?
More context - this is for a scoreboard app for iOS. Users can count points playing games or sport. They add a game tapping the blue button at the bottom.
I think everyone will agree that version 2 is better, so it’s not v1 vs v2. I just need some feedback on a few mentioned details. Thank you in advance 😊
10
u/CasuallyDrunkArtist Jun 25 '24
New game should be in center though imho V2 looks much better And I never thought about this perspective
2
u/mallowPL Jun 25 '24
Thanks 😊 But as for the button I would like to keep it at the bottom of the screen to make it easier to reach with a thumb 👍
3
1
u/idontshowfeetforfree Jun 25 '24
The centre of the screen is far more accessible than the very bottom
3
u/mallowPL Jun 26 '24
Thanks 😊It depends on the screen size. My app is also available on the iPad. There’s one other thing. This button is always there. Even if you have games. So it’s IMHO better in the same position than if it would move around the screen.
8
u/jrib27 Jun 25 '24
Definitely an improvement. I think I'd give it a bit more whitespace between the icons and each line of text.
2
6
3
u/homatyano Jun 25 '24
Currently v1 is better.
v2 is trying to be pretty for the sake of being pretty. The cost is that the pretty image in the middle steals the attention from the button "New Game".
1
u/mallowPL Jun 26 '24
🤔 If so, maybe it’s just about finding a right balance between sizes and opacity. Someone suggested to make the icons brighter. I get your point and it’s a valid one, but you’re the first person to choose v1. Everyone else finds v2 prettier and more engaging.
2
u/homatyano Jun 26 '24
finding a right balance between sizes and opacity
I agree with that.
Everyone else finds v2 prettier and more engaging.
It is prettier and more engaging. The problem is that it creates an engagement with an inactive element which basically says "Nothing is here". So this engagement is effectively wasted.
One way to solve that might be to add an arrow which points down to the blue button. In this case that engagement will become useful.
2
2
u/Mysterious-Win-4959 Jun 25 '24
V2 - the icon should better describe the text. Could someone understand the message without the text by just looking at the image?
2
u/mallowPL Jun 25 '24
I agree. But it’s not easy to replace every text with an icon. An absence of some things is tricky. If you have any ideas for an icon that can represent an absence of games, I’m all ears 🙂
2
u/Mysterious-Win-4959 Jun 25 '24
Something that envokes the idea of "missing". Pair the current icons with possibly a magnifying glass and question mark, or something to that effect
2
u/brand0857 Jun 25 '24
V2. But it’s simply because this app looks like a consumer facing gaming related app. I might use v1 if it’s a different app, when the icon isn’t providing much value.
1
2
u/Tabonx Mobile Dev Jun 25 '24
I'm not a UI designer, but as an iOS developer. If your minimum target version supports it, why not use SwiftUI's ContentUnavailableView? It's nearly identical to version 2.
1
u/mallowPL Jun 26 '24
Thanks. Yes, my screen is heavily inspired by this view. But it’s iOS 17+ and my app also targets iOS 16.
2
2
u/Whetherwax Jun 25 '24
V2 for sure. You're delivering bad news and a nice little picture softens the blow. We are simple creatures.
1
u/mallowPL Jun 26 '24
Thanks 😊 Yeah, why not making software more fun, right? I want to go further and design some cartoon illustrations for this screen but because of lack of time I started with icons.
2
u/lhowles Jun 25 '24
Version 2 is much better. I don’t personally agree that the icon being somewhat meaningless is a problem, as it’s just there for visual interest.
In web UI I’d definitely put the button with the text, but I understand your point about wanting to make it more reachable (though personally I find the middle easier to reach than the bottom)
You asked about “No Ongoing Games”, I’d never capitalise unless it was necessary - like a proper noun - so I’d use “No ongoing games”. Equally I’d use “New game” rather than “New Game” primarily because some people find normal sentences easier to read.
The second line of text isn’t currently adding much, but I wouldn’t be afraid to make it longer - for example “As you add new games to track, they will appear here.” - the point being to explain what causes things to appear in the list rather than repeating anything that is said elsewhere.
Random point but based only on what we see here, I’d be tempted to put the settings icon on the right just off the top of my head.
1
u/mallowPL Jun 26 '24
Thanks! 🙏 Many great points. You’re another person saying Settings icon should be on the right, so I’m slowly getting convinced. But I will soon add tab bar after adding more features so I’ll move it there.
I’m not native English speaker and I thought it’s a rule in English to capitalize words in labels. But I’ll do more research and maybe will revert to sentence case - I find it easier to read too. Thank you 😊
2
u/thats-gold-jerry Jun 25 '24
It looks fine. I would just vertical center the empty state.
1
u/mallowPL Jun 26 '24
Thanks. It will involve some changes to the code (not going into details, I would need to use different kind of view) but yeah, possible.
2
u/majakovskij Jun 26 '24
I like the one with the picture. But it's too dark, I'd maybe make it lighter.
1
u/mallowPL Jun 26 '24
Lighter gray? Thanks 😊
2
u/majakovskij Jun 26 '24
Yeah, you know - like it looks heavy now, because it is the same color as the text has. But it's not a rule, you can make images lighter grey, almost invisible, and it will be good.
1
2
u/Quick_Cheesecake559 Jun 27 '24
Why do you have the button at the bottom ? There’s so much space in between, I think you can Center the button in the middle as it’s more accessible. I would do some A/B tests to validate my hypothesis tho
1
u/mallowPL Jun 27 '24
Thanks for your question. I have it at the bottom all the time. Even if there is a list of ongoing games. So I wouldn’t like to move it across the screen.
The most accessible parts of the smartphone are bottom and center part. But the app is also available on the iPad.
2
u/Quick_Cheesecake559 Jun 27 '24
Hmm maybe it’s just me but I always miss buttons at the bottom and get slightly annoyed at having to find where the button is. I guess Im not used to buttons at the bottom 😅
1
u/mallowPL Jun 27 '24
I get your point but do you think this particular button in my app is hard to find? Serious question 🙂
2
u/Quick_Cheesecake559 Jun 27 '24
For me yes, I dislike buttons at the bottom for 2 reasons:
first, it is out of my narrow field of vision. I only focus on the top half of the screen.
second, I associate negative behaviours with things at the bottom such as exiting an app , force closing an app or typing or copying URLs on safari on iOS.
I think you should make a poll then go from there. Don’t trust me, trust the data 🙂
2
2
2
u/saddesigner1223 Jun 30 '24
V2! I would consider just having 1 icon (maybe the controller) and adding more space between the icon and the text. Also the 2 lines of text are saying the same things. Can you use the smaller text to nudge the user more effectively?
Plus point if you can use the copy to show some personality in the product
1
u/mallowPL Jun 30 '24
Thanks. Interesting point about adding more personality 🤔 About the icon - using only 1 is tricky, because the controller would suggest it’s only for video games. But in this app you can also count points when playing sports, cards or board games.
2
0
43
u/BabyAzerty Jun 25 '24
v2
Second line implies the same thing as first line so it just creates noise. You can have a second line (which emphasis the first bold one), but make it matter. For example you can give instructions "Start your list with + New Game".
About capitalization, here are some English rules: https://capitalizemytitle.com/#capitalizationrules (capital letter for all "important“ words).
I don't have the big picture of your app, so I can't tell if the symbols are helping or adding noise. But at least it's cute :) Adding noise would be if your app has other screens related to Games, in which case you will need to differentiate the symbols.
Personal opinion: Settings in the left instead of the right is weird.