[Android] More mobile friendly interface concept.

[Yona-TYT]

Well I'm not an expert on interfaces or anything like that, I still want to try to give some inspiration about it. Well we know how important thumbs are for gameplay on small screens, so the location of the menus and panels is essential to achieve a better gaming experience.

My idea then is to take the concept of the classic old Runescape on mobile devices:

   
• At the top we see the information messages: the equivalent in simutrans would be: News bar and pop-up windows.

   
• On the vertical sides you can see menu icons and a panel: the equivalent in simutrans would be the toolbars and menu icons, it is important to highlight that this panel is not duplicated, for example if I press another icon, it closes and opens again, this makes things more practical when playing on mobile phones.

In short, the tools will be displayed in that panel, so the player will not have to deal with a lot of toolbars open simultaneously.

Edit.
Fun fact: my character is called Simutrans, it is a small tribute from me to the project. 

[prissi]

There is a wide way of option to have simutrans appear like that. The only thing missing would be the limit on on open toolbar. The toolbars themselves could have a fixed width, and hence appear like that.

So this boils down to:
Option to have only a single toolbar open.
Option to have said single toolbar always pinnend to right (or top left or ... )

[Yona-TYT]

I was thinking of dividing the menus, for example the minimap icons, settings, messages, lists... in the left vertical part ... while the road icons, trains, airplanes, terrain edition, special tools ... put them on the right vertical side.


What do you think?.

[Yona-TYT]

There is a wide way of option to have simutrans appear like that. The only thing missing would be the limit on on open toolbar. The toolbars themselves could have a fixed width, and hence appear like that.

The behavior of the panel is fixed as long as it is an icon on the same side (in the image it is the right vertical part) ... but if you choose a menu icon on the left side, the panel closes and reappears on the left side.

[Roboron]

I agree that having more than one toolbar open at the same time is mostly inconvenient on mobile, as they take a lot of space, so currently it makes sense to only have one at a time.



However, there are more things we can do to improve toolbars. For example, toolbars are opened in horizontal position, but all elements are displayed so it usually spawns over multiple vertical lines, taking both more vertical and horizontal space than it should. That's... not good. Solutions to this are:

1) Instead of showing all the elements, make the toolbars scrollable to show the elements that don't fit in a single line.
2) Further divide construction toolbars into sub-toolbars (i.e.: ways, stations, special tools...).

A game that does both things is Cities: Skylines.

Option to have only a single toolbar open.
Option to have said single toolbar always pinnend to right (or top left or ... )

I think having it pinned just next to the main toolbar is okay. One more thing that comes to my mind after reading this is that the opened toolbar could open itself in the same layout that the main toolbar (i.e.: horizontally if the main toolbar is displayed in horizontal or vertically if the main toolbar is displayed in vertical). But that also involves dealing with the toolbar title and buttons so better I discard this idea.

I was thinking of dividing the menus, for example the minimap icons, settings, messages, lists... in the left vertical part ... while the road icons, trains, airplanes, terrain edition, special tools ... put them on the right vertical side.

Having building tools at the left and map/time tools at the right would be convenient as you don't need to scroll so much to use essential tools and you can use both hands. But I'm a little bit concerned this can make the interface look more cluttered...

[prissi]

If you confine toolbars to one row or one column, they become scrollable. That I borrowed for scrolling the main menu. It is already all in the code ...

[Yona-TYT]

Having building tools at the left and map/time tools at the right would be convenient as you don't need to scroll so much to use essential tools and you can use both hands. But I'm a little bit concerned this can make the interface look more cluttered...

The issue of disorder did not take it into account, however using two hands exactly my intention with this, since simutrans is a game with a lot of tools, it would be very tedious to control everything with just one hand.

[krosk]

For reference & inspiration only, here are some principles of the mobile user interface found in RollerCoaster Tycoon Classic. It is in my opinion, one of the best top down isometric management game that has managed to make a proper user interface conversion from PC to mobile. It has good ideas.


General trend:


(2) The UI is window based, just like simutrans. Windows are draggable.
Inside a window view, on top of the view, it has selectable tabs as icons instead of text.
Notice that tab icons, close buttons, and other actions buttons all have a consistent height and width, giving enough room for finger touch.


(3) Tab icon description shows up via tooltip upon long touch; the tool tip disappears after some time, after the touch, to give time for reading


(6) Inside a tab view, views show information with 2 font color: one for the category, one for the value; this screen also shows other kind of info such as gauges.


(5) inside a tab view, actions icons that are specific to the viewed object are put on the side and at the bottom (right); buttons are of the same consistent size.


( Inside a tab view, checkboxes for toggles, of the same consistent size


(4) At tab level, actions icons or buttons that are specific to the tab category can fill the tab level space, of the same consistent size



(7) At tab level, views are secondarily customized (filter or display) via drop down list, of the same consistent size


(9) Below tab level, inside a tab view, views are secondarily customized (filter) via drop down list


(10) Inside a tab view, arrows/sliders are of consistent size


Building


(11) build menu is organized into tabs for different categories;
   in each category, a sliding left/right menu shows selectable building options; the first item of the list is selected by default
   the build button on bottom right is the action to validate


(11b) shows a window with a giant button of the selected building option with a prompt to click on a location; the button is disabled until a valid location is selected


(11c) the location is highlighted with a ghost, and the giant button of the selected building option is enabled. The ghost is freely movable, and the building is validated only when the button is pressed, or the ghost is pressed.


(11d) building constructed


(11e) only one building menu is opened at all times; opening a new building menu will close down other building menus


Roads building:

- 12a prompt to select a start location


- 12b when selecting a location with no existing road/no connection, a new ghost is displayed. The ghost is freely movable. The build button is displayed.


- 12c building is validated upon press of the build button, or press of the ghost.


- 12d Touching a location with an existing road shows the remove action instead. The road segment is highlighted, and the remove button is displayed. Removal is validated upon press of the button, or press of the highlighted segment.


- 12e This is an example of a road conversion instead, where the road type to build and the road type selected differs.


Roads building (alternate scheme):

- 13a The ui shows several buttons to control how to build a chain of roads. Directional buttons control where the ghost appears relative to the selected road; the road will keep extending towards the selected direction, after the current ghost is built.


- 13b Road extended towards the previously selected direction


- 13c Road extended towards the previously selected direction


- 13e Change of direction = change of the ghost position



- 13fg Delete button removes the road in the inverse direction of the directional buttons


(The rides building is a whole another beast that I will skip, but just as good)



As any UI, best is to experience it to understand.
Second best is to see it in action, so I link a youtube video to get a better feeling that just screenshots.

Some of the ideas mentioned here are reflected above (one build menu at all times, scrolling menus, ...).


I personally played it on PC for too many hours, and many years later played at least 20+ hours on mobile.
My takeaway is that the touch interface of RCT has been designed to work around the shortcomings of a mobile touch screen:
- small screen estate => be concise in how to display information, replace text by images/icons when applicable
- finger is fat compared to mouse, less precise control => oversized buttons; additional step (a button, or a second click) to validate some actions; precise construction (see roads alternate scheme) driven by static buttons to perform the intended action (easy on mobile screen, effective at any zoom level), instead of clicking on the map location (hard to do accurately, requires zoomed in view)

[Roboron]

I can see the confirmation for building being a GREAT addition.

However, I don't think building ways with buttons is a good idea. I think touch screens are good for the task, building a road pressing buttons instead would get tedious very quickly.

And of course larger buttons are welcome, but setting a larger theme already does improve it, if only partly.

[prissi]

Building by buttons is annoying unless you do bridges and roller coasters ... but would be easy to implement. Dragging works quite well on my touchscreen. One just has to remember for cancel to go back on the starting tile.

I think we need also a theme with larger window gadgets shipped with default simutrans.