C3 UX Feedback

This post will be focused on UI elements and design, as well as user experience as a whole. It goes without saying that significant portions of this will be personal preference and opinion, although I will try to remain as objective as possible.

Based on what I've read from other user comments, there may be a bug regarding toolbars not showing up at all upon loading C3. I have experienced one time myself where after switching back to the C3 tab, my properties bar was empty. Going back to the layout view fixed it, but it was odd. I was unable to reproduce the issue.

While accidentally closing a toolbar is really relatively easy to do, bringing them back seems be more difficult/hidden than it needs to be. I don't think there needs to be so many submenus to get to them (Menu -> View -> Bars). I'm also not sure what the Addon manager is doing in "View", it could probably go straight under Menu. Then "View" would just be Start Screen and Bars, which probably no longer need their own sublist. It would also be nice to make it a little harder to close a bar on accident - traditionally one way around this is to have a confirmation dialogue when clicking the x ("Are you sure you want to close?"), but I detest those. A better solution might be to have a little temporary "Undo" button show up after closing one, that fades away shortly. Personally I think the "X" to close should be simply be removed, and leave right clicking (long press?) the only way to close or undock the bars.

On a positive note, the design for bar placement and docking is absolutely fantastic!

I like how the free edition limitations are communicated, and it is intuitive to get to them. What isn't clearly communicated is that you can get more maximum events for logging in or verifying your e-mail. It is also unclear that the email can be or needs to be verified at all. Worse, even though I know this, I was unable to actually figure out how to verify my email. Going to my profile shows that it is unverified, but offers no method to remedy the situation. Edit: A reverify link has appeared! But FYI the email got sent to spam for gmail, with the reason that construct.net is known for sending spam. Perhaps you may want to contact the gmail team regarding your acquisition of the domain.

The save button only shows options for cloud saving. I imagine a new user might find it difficult to realize local saving is an option at all, as it is once again buried under submenus. It would be great if the interface for cloud/localstorage/download save were unified.

I have a lot of complaints about the event sheet/layouts tab system (also an issue in C2), but I will leave that for a followup post.

Visual comparison between C2 and C3

I'm glad the Microsoft Office style toolbars at the top are gone, I wont miss them at all! I also really like the change to the bottom status bar - the information provided is more immediately noticeable/accessible. It is only really relevant on the layout view anyway, so it doesn't always need to be on the bottom as it was before.

I hope a dark theme will be available in C3, it is much easier on the eyes for people who spend significant time in front of the monitor.

I have mixed feelings regarding the spacing/size of the text in the properties bar. While white space looks very nice, in this case I think I prefer the utility of having a more compact spacing. The bigger complaint I have is the behavior of line breaking. In C2, if the width of the property bar shrunk and there wasn't enough space for the text, the text would get truncated with ellipsis. In C3, they wrap to the next line, which leaves some properties with one line spacing and some with two, which looks really bad in my opinion. This was actually one of the first things I did, as the property bar in C3 is significantly wider than in C2, I sized it down a bit.

The next one was an issue I had with C2 as well. It is a small thing, but I found it strange that when nothing is selected the layout properties are shown by default. I always felt it would make more sense to show the project properties by default, especially as you can have multiple layouts and they can be selected in the project bar.

Sorry for the long post about first impressions! I have additional feedback for the image editor interface as well as the tab system I mentioned earlier, to be provided in the near future.

Edit: Followup on the toolbars - I found the reset layout in settings, but it asks you to restart C3 for changes to take effect. Is that really necessary? And I'm assuming by restarting C3 it means refresh the page, and when refreshing the page there is a dialogue warning that things might not be saved, but no direct way to save from there. This could probably use some work to make it friendlier.

The visual UI complaints are largely fixable with a handful of CSS changes, you can get a reasonable dark theme going in a few minutes:

Elliott - woah....how did you edit the CSS to change the theme? I need this !

I'm well aware that it is possible, but I was making suggestions from the point of view of the general public or new user, who may not be familiar with css and/or how to edit the css.

Also from your screenshot I'm also reminded that it would be nice to be able to make comments in-line in the conditions or action sections. But I would put that at a significantly lower priority.

Well all of this is probably low priority as far as the Construct team is concerned. They're most likely focused on bugs and crashes at this point. I just had general feedback on first impressions, and this seemed like the most appropriate place to present it.

Excellent post, and be assured it will be looked at by the rest of the team.

Personally I think the "X" to close should be simply be removed, and leave right clicking (long press?) the only way to close or undock the bars.

I like having the Xs myself, but it's kind of annoying how hard to see they are with that gray color over a dark blue bar.

The save button only shows options for cloud saving. I imagine a new user might find it difficult to realize local saving is an option at all, as it is once again buried under submenus. It would be great if the interface for cloud/localstorage/download save were unified.

I agree.

Regarding the tabs - There may have been a specific reason it was made like this that I overlooked, but I really dislike this tab system (no disrespect meant to the original designer). I also know this could be an impactful workflow change, and some people might not welcome any changes.

It isn't really scaleable when more layouts and sheets are added. I know you can close them and find them again in the project bar, but it is clunky. The frustration is further compounded when opening multiple projects - there is no real way to tell which "Layout 1" belongs to which project, and they can get mixed up. Furthermore, closing the tabs for a certain project doesn't actually close that project, and then you have to find it in the project bar, which has the additional challenge of identifying the correct one in the event that they are all named "New Project" with "Layout 1".

I always made an effort to open separate projects in separate windows in C2, and was hoping this could be default behavior. I suppose in C3 each project would be its own browser tab instead. Alternatively, maybe separate projects could have their own tabs in the C3 interface rather than each layout and event sheet.

My proposal for solving the clutter would be to have dropdown list boxes for layouts and events instead. An example from a CAD software here:

As each layout is by default tied to an event sheet, when a layout/sheet is selected in their respective list, the other box could change to the relevant layout or sheet as well. This would hopefully also reduce confusion about which layout is tied to which sheet.

I'm going to assume this particular suggestion will be a bit contentious as it involves workflow changes and more than a little bit of work on the backend, but do hope it will be considered. Also I'm sure I missed some positive aspects from a different point of view, so maybe some other users can chime in regarding that.

EDIT - I played around with the interface a bit more and I think I understand a little better now, that event sheets and layout tabs can be docked anywhere on the interface just like toolbars (This was somewhat possible in C2 in a much more limited manner. I never realized it could be done until just now, after 5 years of use though...). I guess if that is something that people will take advantage of I can see why they are tabs. I will still say that it isn't immediately clear that this is possible - even where the toolbars are stacked and have tabs they are on the bottom, rather than the top, so I don't immediately make the connection that they are treated the same way.

I do also want to second the mention that the rounded tabs look really out of place with the rest of the overall look and design.

Animation Editor!

I find it a little frustrating that the toolbar to the left switches between Animation Properties and the Color Palette depending on what tool is selected. Particularly when real estate is mostly available as there really are not too many animation properties. I'd like to suggest the Animations Properties be docked on the right either above or below the Animations List. Makes sense to me, especially as they are related. Then the left toolbar can always have the Color Palette open.

This leaves us with the Image Points dialogue. I feel like this is a huge feature that is hidden behind a tiny button. I think something should be done to make it a bit more prominent, maybe having it's toolbar always open as well, docked below the Color Palette. But then it might start getting too cluttered... Also related to the image points, is that a fairly common problem is when someone moves the origin point for one animation frame and not the others. Maybe there could be some way to present the "Apply to whole/all animations" more prominently as well. By the way, thanks a ton for the new quick assign option!!

Additionally, I think it would be nice to have the option to show all imagepoints at once, maybe as a toggle. They can be differentiated by color or shape, like how the origin looks different from imagepoints currently.

For the Color Palette, !PLEASE! allow for the picker to be constrained to the palette and continue picking even when the mouse is not over the palette! This behavior is already implemented in the new configure grid color popup dialogue. This allows for more precise picking of colors around the edge of the palette (the ones I'm aiming for 90% of the time). I feel very strongly about this, and it is literally one of the first things I noticed when I started using C2 5 years ago. When Construct is described as a "tool for artists", it is especially noticeable.

A minor thing I think would be nice also would be to include one more row of swatches above the palette - a preset row of basic primary and secondary colors.

A huge request would be layers and transformations with tweening support, but I understand that isn't exactly easy, so I'll leave it at that. But I will add that it's something I definitely missed coming from Flash. (Shoutout to Spriter here for saving the day!)

Adding onto UI / UX, is the tabbed (pin button) ability gone? I don't see a way to tab windows to the side. Would like that feature to return.

Stylistically, I think the tabs in C3 are way out of place and are kinda ugly and don't fit in with the theme at all. They shouldn't be rounded. Actually, almost nothing should be rounded in this sort of minimalistic UI. The grey rounded borders on interfaces should probably be removed.

I'm not a fan of the new project and properties bar, it a has a lot more white space and ends up showing a lot less information in a lot more space. I have a lot of things going on and want to see as much data as possible without having to scroll around. A great solution to this would be a zoom in or zoom out.

Additionally, I think the text a lot less sharp than what we had in C2. It doesn't feel as clean. The text in event sheets and some of the other places is still good but I wish we had that same font in places like the project bar.

Kinda unrelated but I think Scirra should really consider using a service like https://www.uservoice.com/ to prioritize new features and bug fixes. Looking forward to seeing C3 grow.

One other thing, It was a good choice to italicize event sheets, but that needs to be consistent, why aren't they italicized in the tab headers?

I think that is mostly it for now, and as I continue testing if I encounter anything else that particularly bugs me I'll write about it.

I apologize for the wall of text, but to put things in perspective it could have been a hundred times longer had I been writing about C2, except most of the issues I would have griped about were already addressed. I think Construct is already an excellent product I just wanted to close out with a thank you to the Construct team for the great job done and many improvements in C3. I have had a mostly positive impression of C3 amidst the negativity that has been floating around. I hope that my suggestions may possibly be of some use to further improve Construct in the future.

The new start page is a bit painful. I'd like recent projects to be on top/open by default, but I can understand the rationale for demos/showcases to be on top.

Good - Easily accessible examples and tech demos! Thumbnails are good to have. New Templates!

Bad - Browsing through examples is a pain, due to the thumbnails. Can only see 1.5 items at a time, and there are a lot of them. Edit 2: I found this was because my screen/layout was JUST not wide enough to have the thumbnails next to the description. Instead the thumbnails get stacked vertically. Hope this gets tweaked.

All the grey buttons are important/useful, but have to scroll to see them on my monitor. Hopefully there can be a emphasis on showcases as well.

Edit: In terms of what a new user should see, I think the beginners guide (both of them, top down shooter and platformer) should be prioritized with the highest emphasis. The manual would probably be second, with a special mention towards How events work (I still have trouble navigating to/finding this page myself. I usually just search for it, but that only works because I know what I'm searching for. Considering how important it is, I think it should be more easily accessible.)

If a third beginner's guide/tutorial were to be considered, I'd like to nominate the vertical space shooter template as a good candidate for an entry level project. Or maybe just updating the end of the ghost shooter tutorial to recommend studying the vertical space shooter template on their own as the next step.

Wrapped container transformations are a nice new feature, but it might be useful to have an easier way to unwrap or select individual pieces again. If the project is of any significant size, it becomes more difficult to locate the individual sprites in the project bar to manipulate them.

When the container is "wrap" or "all" selected, the first place I look to is in the properties bar, but there is nothing of help there currently. I imagine maybe a list of objects in the container and the "Select mode" options would be welcome there, or perhaps all of the container sub properties as well.

Right clicking on most places gives proper C3 specific context menus. Right clicking on text boxes and other form elements such as in the properties bar and pop up dialogues give the default Chrome (for me, when using Chrome obviously) context menu, which is a bit jarring and disappointing. I hope something can be done about this and not just be a hard limitation of using form elements in a browser window... *insert generic anti-browser-based application spiel here*

It's by design. The browser input field context menus provide features that C3 cannot replace, such as paste, spellcheck, writing direction and extra features in other languages, which is particularly important when we get in to translating C3.

Tried C3 on mobile - Android 6.0.1 chrome beta 58.0.3029.54.

Didn't get very far - had uncontrollable urges to hit back button to go back, and that closed the browser tab without warning or saving.