Concept : I made Construct 3 more userfriendly for mobile

As a user of Construct 3 both on desktop and mobile, I was baffled by the fact that the tool was so usable in mobile. With this tool we can litteraly create a game on our phone! How fantastic is that?

But if the UX on desktop is pretty great, the mobile version is a bit harsh.

My main complain is resumed in this video : the access to the Properties and Project pannels is hard as hell, and even more since my phone use a swipe gesture to go back

: https://photos.app.goo.gl/h3PBHP1rY33voekP9

But there are other complains that can be made, such as the tabs placement and the general UI which could be modernized.

(Yes, the screens are in french, don't mind it :D)

So in my lunch time today (I'm a product designer, so it's my daily job), I made this concept of a modern mobile UI for Construct 3.

My take is : properties and project pannels should be tabs along side an "editor" tab (which is the current center of the UI), and tabs to switch between scenes should be as the bottom of the screen for a better access.

So I made this :

Here is a version with all the modifications made :

You can see a video of the final prototype here : https://photos.app.goo.gl/cfkdR4Pz1ybm4iAz5

Or play with the Figma prototype directly : https://www.figma.com/proto/AbxGZNvsaDUAnRJyZj2kLX/Untitled?node-id=1%3A487&scaling=scale-down

With these edits, I think Construct 3 would become so much more pleasant to use in mobile. I hope the team will think about us, mobile users, in the future :)

Thank you for your time, and feedbacks appreciated!

Agathe

I didn't mentionned it, but some tabs are inaccessible in mobile (or very difficult to find...) my proposition is to make them accessible, and put them in the tab bar.

Consider adding this to our suggestions platform https://construct3.ideas.aha.io.

I know it looks like we don't pay attention to it, but we do, it's just that the amount of ideas in there is huge and we can't keep up. If something gains enough traction though, it is more likely that something will be done about it in the future.

On Chrome for Android swiping from the side never tries to navigate forward or back for me. If it does it might be a bug. What browser/device are you using?

I like the look of the mockup, but the main reason for the UI limitations on mobile is we're a small team with limited resources, and UI work is extremely time consuming to design, develop, implement and debug. To get UI to "just work" and smoothly do what you always expect it to requires a huge amount of work; any cutting corners and it ends up clunky and awkward. Therefore the mobile version is designed to work as closely as possible to the desktop version, involving the fewest changes. Similarly proposals that involve a small series of simpler and quicker changes to move things in the right direction are much more likely to actually be done than a complete overhaul.

Ashley > This is how my phone works since I'm on Android 10 (One Plus 6T). theverge.com/2019/5/7/18531133/google-android-q-side-swipe-back-button-io-2019

Thank you for your feedback :) Yeah, I know UI is very time consuming dealing myself with a small team in my job, and that incremental change is easier to put in a roadmap :) And I totally understand the stake to maintain only one UI, therefore, having desktop et mobile working exactly the same.

But well, my mockup was more like a prospective work !

Oh dear, if the swipe is a system level action, normally that means it can't be overridden 🙁

I think you can change the swipe gestures in the system settings though?

We have similar trouble on iOS, since Safari seems to handle side swipes as unavoidable back/forward navigation gestures. It's difficult to handle this, I was aiming for a similar pattern to the Wikipedia app where you can swipe in the contents from the right, but it seems hard to do this in a web app.

Yeah, in fact most apps are stopping to use swipes from edges to open side pannels. Now you need to click on the burger icon on Gmail (and other Google apps) to open the side pannel.

On my phone (also Android 10) - it's under Settings - System - Gestures - System navigation - where there's three options gesture navigation, 2-button navigation or 3-button navigation. Using gesture navigation and Construct, I need to hold my finger for a moment before swiping which opens the Construct panels instead of doing the back action, eventually it becomes muscle memory. It is easier to work with the 2 or 3 button navigation, but you lose a little screen real estate to have the buttons there.

As someone who is using it a lot on mobile, I hope you don't mind if I offer some constructive feedback on your design:

- I agree with the multiple lines of tabs taking up too much space, the scrolling horizontal list looks elegant, but might be hard to navigate in large projects with many Event Sheets. For usability I would prefer a single button for Event Sheets, clicking the button would show a drop down list of all the Event Sheets (bonus points for a search field). Likewise for Layouts.

- Really like the hamburger button for Project Bar. Even a second one on the other side for Properties Bar could be nice.

- For the other bars (Layers, Z-order etc.) I'm not a huge fan of the row of buttons for a couple of reasons:

a) You are losing the screen space you just gained from consolidating the tabs.

b) Some bars you want to open without losing sight of the editor, e.g. changing properties and seeing the changes live in the layout. If I'm interpreting your design correctly, you would have to jump back and forth from Editor to Properties.

If this was mostly to address the swiping problems on some phones, what another small button up top, which would give a drop down list of bars - basically a short cut to Menu -> View -> Bars in the desktop version? The downside being it would be 2 clicks instead of 1 to open a bar.