FreeSO on iOS: My UI Concept

Alessandro Needs A Server

Alessandro Needs A Server

Well-Known Member
UPS I DID IT AGAIN!
Yes, i tried once more to make a UI concept, this time for the mobile version of our game since it's an actual thing now! (see Here)

What's it about: tried to make a UI that fits in a small screen making sure every button is acutally touchable with no problems. My only test screen is the gorgeous Galaxy S5 FullHD screen, 5.1 inches big which is the most common screen size nowadays, even in apple devices. Keeping the blue look of The Sims 1/Online, it still has that touch of modern*.
*The icons used in Build/buy are from The Sims 4 and totally temporary/concept purpouse

Live mode, motives tab:
aIoaBTz.png

Everything is there, nothing is missing. Added a useful "hide menu" button to let the user play at full screen with no UI. Top placed Ui can't be hidden as it contains basic info. The budget window button was merged with the money count box.

Live mode, Sims in lot tab:
C6hiMdu.png

This tab shows all the sims that are in lot. Look, a Hillary Benson army!

Live mode, My stats tab:
jrsMEeh.png

This tab gives the access to the basic info and status of the sim you are using, including a shortcut to the inventory. Friends web is now a bigger button instead of the original tiny one.

Live mode, chat UI:
cq6N1nQ.png

Chat UI is easier to access and to read. Messages are bigger and brigher, chat box is wider and easy to tap. Easy to open and close back with the Show/Hide button.

Live mode, options menu:
RY0dCDS.png

Here you'll find all the options already available in the three dots menu in FreeSO on desktop and a new button, a shortcut to Leave Lot that will automatically generate "leave lot" action on Lot's phone.

Live mode, camera controls:
i2qtTC8.png

Camera controls are pretty easy to understand:
- First line is zoom slider, easy to grab due to it's wideness;
- Second line is rotation, the buttons are big and the center icon shows with the arrow the actual rotation status;
- Last line is Floor up/down and walls type with big buttons to touch.

Build mode:
LPQjhTB.png

What's new in this mode? of course the Tool options menu! Every tool available in freeso will have it's little Tool Options menu with all the Keyboard/mouse buttons combinations you can't get on a mobile phone.

Build mode, wall tool options:
KrHT7al.png

You can see better how Tool Options would work better here: the wall tool options that need a Keyboard/mouse buttons combination are all there, switchable one at a time. Single wall placement is default option but you can use Room tool and Delete wall mode;

Buy mode:
lvN9Dqm.png

Just the Buy Mode with new icons and the hands tool options, i don't know what those Plus buttons might be, maybe a space to add an easy2access menu you like a lot? i don't know they are just placeholders actually;

UI Sample, Dialog:
LUsXhVk.png

New dialog UI is pretty simple and clean.
Hope this is nice for you, if it's not, tell me what do you think i should change to make it more appealing below :)
 
Last edited:
The basic Sims1 UI was never especially good - it has a bulky plastick-y weird feel to it that doesn't match the grid-based, matte-finished game itself. So I, personally, don't see anything terribly wrong with the FreeSo's various UI being updated. The cartoony icons are a bit out of place though, especially as buy/build mode category icons. The switch from those to the thumbnails of actual objects might be a touch jarring?
 
The Sims has a very specific visual language for live/buy/build, so changing those icons is out of the picture. I don't think the Live Buy Build icons should be so big, as changing mode is not something people will do often. More taps are likely to be spent within modes.

We have a large problem with full UI changes like this, specifically that there is a very specific system in place for plugin objects to utilise to provide custom UI. It might take a lot of work to extend them into something customisable, and in this case, these buttons could really not be any smaller (ui is designed with desktop in mind)
eyJ1cmwiOiJodHRwczovL2Rpc2NvcmQuc3RvcmFnZS5nb29nbGVhcGlzLmNvbS9hdHRhY2htZW50cy8xOTMxODE3Njc1ODUzNjYwMTcvMjE3Mjk2MTU2ODc3NjUxOTY5L0lNR18zNTI4LlBORyJ9.eAng-DyVf6trHhRcd39g04FB61E.PNG


"5.1 inches big which is the most common screen size nowadays, even in apple devices."
This is a misstep - the smallest possible option is the best here.

Full UI reskins likely will not be supported due to all the interdependancies. The zoom-style desktop UI will be available from the start.
 
It's perfectly clear, that for mobile version, UI would have to be completely reorganized (which would probably be a technical challenge, as Rhys stated). Anyway.

Having to deal with much less screen estate than on desktop (where you could probably put most of the things on the screen and end up with tons of space remaining, also buttons don't need to be big cause nobody is going to be touching those), you need to take quite a few things under consideration.

What features users are going to use the most?
What things you could just hide in menus and separate views?
How to make things like buy/build mode NOT PAINFUL?
What can I do to avoid putting too much information on the main view?
What gestures I could use and how to make them intuitive?
How can I avoid having my interface taking half of the screen?

Let's ask ourselves an important question (different from the one above I guess):

How people usually play the game and how differently would people play it on mobile devices?
What I noticed is that while building things is fun, people mostly do these 3 things:
1. Chatting with other players.
2. Interacting with objects/themselves for roleplay purposes
3. Taking care of their Sim/avatars needs (cause it's essential).
While designing an interface, you could possibly just focus on these three things and shove everything else into menus. If people really changed modes that much, having a mode switcher on the right side of the screen that you can operate with your thumb just like in Lumia Camera app on Windows Phone (the best example of that I could think of, don't kill me Android fanboys) seems cool. But it's pointless, cause people don't do that often.
So first, we need a quick way to access the chat (at least the text field). Having it always on seems pointless, but what if you could access it by swiping? Assuming you're holding a phone in two hands (if it's not a damn frying-pan-sized bullshit thing), that could be convenient. I don't think full-sized wide bars+text are really that needed when you have to save space on the screen. What about icons? (so you could at least see those all the time) Icon+color as an indicator? You could come up with tons of clever ideas here. Oh, and interactions. The more of the lot you can see on screen, the better (I mean UI not taking that much of the screen space of course). Also, keep in mind you need to put action queue somewhere.
These things should be like max 2 taps away I guess, these are essential.
 
Swipe to activate chat makes a lot of sense. I found myself quickly losing what was going on though because the monogame iOS keyboard covered the whole screen with an opaque background. Android's isn't much better, it shows a dialog covering dead center in the screen. Need it to play into the game UI a bit nicer, moving the chat bubble bounds to allow for the software keyboard to have some space.

Build/buy will have phone specific controls tailored towards imprecise input that is constantly obscuring vision. There will be a fixed cursor in the screen center - you will scroll the screen to move the cursor. Rotation, multi-place etc need to be moved to contextual buttons at the top right of the screen likely. Pie menus will probably be tab + drag, like the optional way of doing it in TS1 except in our engine.

Two finger drag is stupid. Will replace with one finger drag, maybe pinch zoom but it might lag too much for phones to handle.
 
My idea-
Left swipe and you open a chat panel, looks similar to whatsapp/imessage whatever. Right swipe once to get your needs, then another right swipe to get your friends. These panels would be separate from the actual game (so the game is still there, you just can't see it since the chat/needs/friends fills up the whole screen. Then, to go into buy/build mod, you triple tap and you could have a similar UI/control set to the sims 3/freeplay app if you ever played it. When you select something, instead of the options popping up around it, it'd be easier to have bigger buttons slide down from the top so it's easier to click. Then when you turn pages (in buy mode or CAS), you should be able to swipe them.

That would be a complete redesign of HUD so idk if it's possible but I think you'll need to make a lot of changes in order for the game to play comfortably.
Also, will you be able to play the game portrait and landscape?
 
You must log in or register to reply here.
Back
Top