v0.8.9 (Bugfixes + translations) released to Google Play!

Useful links
Source code of the game - Contribution guide - ATCS Editor - Translate the game on Weblate - Example walkthrough - Andor's Trail Directory - Join the Discord
Get the game (v0.8.9) from Google, F-Droid, our server, or itch.io

UI Design

Unstructured ideas, requests and suggestions for the development of the game.
Post Reply
Soullessktty
Posts: 217
Joined: Sun Nov 10, 2019 3:05 am
android_version: 11 - Android 11

UI Design

Post by Soullessktty »

This is probably a top that has been discussed in this forum, as well as among the dev team. However, I am offering my suggestion as an alternative.

One of the issue I have with the current design is that our heroes's hp is placed at the bottom of the screen, thus when using D-pad (I know not all use it), my finger practically prevents me from seeing HP, especially during combat. Moreover, usually a lot of game's UI place our heroes's hp on the top for easy viewing.

So I propose a different placement for 2 situation: (a) walking/adventuring, (b) in combat/fighting.

(a)
Proposed Out-Combat.jpg
(b)
Proposed In-Combat.jpg
I am keeping the hero icon and setting icon at the bottom corner of the screen for easy access. Adjust the height of the map as needed, probably above those icons.

As for the actor's conditions, in (a), just below heroes hp near the left edge of the screen. In (b) for heroes similar to (a) with enemy's near the right edge of the screen.
You do not have the required permissions to view the files attached to this post.
User avatar
rijackson741
Posts: 4451
Joined: Tue Aug 20, 2013 2:04 am
android_version: 10 - Android 10
Location: Somewhere in Dhayavar
Contact:

Re: UI Design

Post by rijackson741 »

The problem is small phone screens. Moving information from one place to another does not help. You can already move the dpad.
Level:71, XP:6493739, PV:608, FQ:84
HP:210, AC:212, AD:58-77, AP:4, ECC:16%, CM:1.5, BC:188, DR:3
Gold: 237559 | RoLS:1, RoL:1, GoW:1, VSH:1, RoFLS:1, WoB:1
HH:1, WA:1, CS:2, Cl:1, IF:4, Ev:3, Re:2, WP:DA:1, WP:1S:1, WP:B:1, AP:L:1, FS:DW:2, S:DW:1
User avatar
Antison
Posts: 5254
Joined: Mon Mar 28, 2011 11:33 pm
android_version: 14 - Android 14
Location: A home without a beagle is just a house

Re: UI Design

Post by Antison »

What about the quick slots and actor conditions?
"A home without a beagle is just a house"
Soullessktty
Posts: 217
Joined: Sun Nov 10, 2019 3:05 am
android_version: 11 - Android 11

Re: UI Design

Post by Soullessktty »

Wouldnt what I suggest actually create more area for playable area?
User avatar
Nut
Posts: 1499
Joined: Mon Oct 27, 2014 12:14 pm
android_version: 8.0
Location: Glade

Re: UI Design

Post by Nut »

We are discussing it internally. I think your approach is promising.
Do you also have an idea for landscape mode?
Nut
Soullessktty
Posts: 217
Joined: Sun Nov 10, 2019 3:05 am
android_version: 11 - Android 11

Re: UI Design

Post by Soullessktty »

Nut wrote: Fri Mar 24, 2023 1:44 pm We are discussing it internally. I think your approach is promising.
Do you also have an idea for landscape mode?
It could be similar I think. The problem with landscape on a phone with current UI is a narrow playable area. Let me think about it and see if I can come up with an alternative.
User avatar
Antison
Posts: 5254
Joined: Mon Mar 28, 2011 11:33 pm
android_version: 14 - Android 14
Location: A home without a beagle is just a house

Re: UI Design

Post by Antison »

Screenshot_20230324-185745.png
How can you stand situations like this? The Fact that you have that d-pad where you have it, to me seems to be the worst place to put it and not being able to see the HP is the lesser of the two problems.
You do not have the required permissions to view the files attached to this post.
"A home without a beagle is just a house"
Soullessktty
Posts: 217
Joined: Sun Nov 10, 2019 3:05 am
android_version: 11 - Android 11

Re: UI Design

Post by Soullessktty »

Antison wrote: Fri Mar 24, 2023 10:59 pm Screenshot_20230324-185745.png

How can you stand situations like this? The Fact that you have that d-pad where you have it, to me seems to be the worst place to put it and not being able to see the HP is the lesser of the two problems.
Now that's a d-pad placement preference. I do that because it just feels right for my hand. Even if I put my d-pad on the right bottom corner (I am right-handed), it still overlap with my hero's actor conditions. Initially I also have quickslot setup like yours, however, I learn to live with it stacked vertically on the left bottom corner. AT gives choices for d-pad and quickslot, so we all live with what we feel comfortable with.

Regardless, I believe most d-pad users will choose the bottom (left,center, right) for its placement even though AT gives other choices (center of the map or upper side of the phone... really?). It just happens that I choose center for my d-pad because that's where my thumb generally is. In any case, in the current situation, I just wish d-pad is not so close to the edge, give it 1-icon gap to the edge, it won't overlap with anything else. If the hero and setting icons don't feel right in the bottom, then move them up to the top.

However, my proposed solution is meant to put hero's HP on the top, where it is always visible regardless of d-pad placement. This is one crucial information that needs to be visible all the time. Even if I don't use d-pad (which I did this in my early playing), having my HP at the bottom still not visually accessible right away. This is why a lot of RPGs place HP on the top because (a) it is not distracted by our hands holding phone/tablet position, and (b) your eyes naturally see empty spaces looking for things. If I remember what I learn in college, the best UI is the one follow's human natural responses/movements.
User avatar
Antison
Posts: 5254
Joined: Mon Mar 28, 2011 11:33 pm
android_version: 14 - Android 14
Location: A home without a beagle is just a house

Re: UI Design

Post by Antison »

Well, your solution doesn't really solve the problem without causing issues for others. For those that want the d-pad at bottom right, it would cover the chest.
"A home without a beagle is just a house"
Soullessktty
Posts: 217
Joined: Sun Nov 10, 2019 3:05 am
android_version: 11 - Android 11

Re: UI Design

Post by Soullessktty »

Then, let's figure out a solution. At the current situation, wherever d-pad is place at any place at the bottom, it will cover something, quickslot (if placed at the bottom) and actor conditions. For me, even worse is as our hand movement always at the bottom part of the screen (phone user), crucial info is blocked by our own fingers regardless of using d-pad or not.

One of my question, is customization, such as option where to put quickslot and d-pad, actually crucial? A lot of games don't allow much UI customization, but players adapt and get used to the UI design. Let's look around other similar games and see how they do it.
Post Reply