Elements UI/UX ideas

[anon68150607]

After using Elements for a few days there’s a few changes to the UI that I think could greatly help the overall UX. One thing I found is that I was often wanting the Components/Elements panel open at the same time as the structure. Having the structure panel grouped with pages, resources, and components feels awkward as pages, resources, and components all largely concern the site as a while, while the structure/node view is specific to the page.

I found myself often wanting to drop resources or components directly into the node view (which is currently impossible) but would have to drop them into the page, and then switch to node view and move them where I had intended - then switch back to the component panel and repeat the process. Being able to hide/show the node list while editing a page would also be really help - probably through some sort of toggle or edge drag. Also, placing the structure view beside the inspector panel increases the relation between the two, and makes it easier to quickly explore your page structure.

I also replaced the pages, resources, components icons (which are a little cryptic on their own) with a toggle select and took some liberties when shortening the names. FWIW I like the fact that the word Elements is now clearly in the UI, and is directly associated with the components, custom components, and global components (all the magic stuff) that users will use to create their site.

I also noticed that there was a fair amount of UI taken up by things that could better be placed elsewhere:

• license (should probably be in settings or the Elements menu)
• theme selection (should probably be beside the theme studio toggle)
• the device selection and dark/light mode could be moved to the main toolbar.
• a contextual toolbar could be placed between the app toolbar at the top and the page (in this example, text editing/styling tools (copy/pasted from Scrivener for illustration purposes only) when editing paragraph/text elements.

[anon68150607]

In looking at it I also wondered if it were possible to move the site and publish settings to the same panel as the pages, assets, and elements - which are all concerned with the site as a whole.

I then moved the theme selection and theme studio into the top of the inspector panel - which keeps all of the styling information together.

The left panel where I added the Elements title, icon, and url along with the gear, publish icon definitely needs some refinement (and proper spacing), but I just wanted to see how it would look/feel.

I’m also wondering if it would be possible to add back/next arrow buttons (better designed that what I threw in) to the left of the ‘Example Page’ label to allow users to quickly navigate between documents they’ve had open as there doesn’t appear to be support for tabs yet. I imagine them working much like they do in Safari (back and next) and long-pressing on them would display a little of all pages in the respective stack.

That would make the top toolbar essentially a browser toolbar with navigation, screen size modifiers, a dark/light mode toggle, and the option to preview the current page in Safari.

[dan (Dan C.)]

Hi @anon68150607,

First of all, thank you for taking the time to give all this feedback, it’s awesome!

Also, good news, we already support tabbed documents, go to the “Window” menu and choose “Merge All Windows”. If you have multiple documents open they will all be merged into a tabbed document

It’s come up a few times internally about allowing more customization of the panels, the ability to show two at a time would be handy. One idea was to have the option to pop the node tree out into its own column, like this in the screenshot. It’s sitting next to the components list so it would be quick to drag them into the right part of the node tree. I think the key is that we need to make it flexible so people can work they way they want!

I’m also not 100% sure what side the node tree should go (if we allowed this), as with most things we’d need to implement it to find out how it feels.

We have talked about adding components directly while you’re in the Editor view, so maybe a favorites shelf or a little “+” button in the editor that when clicked would give you a list of your most used components…

We know the layout and workflow can be improved greatly (I currently get annoyed by having to switch the Resources view to drag in things from the finder), but sometimes when you’re developing an app you need to get it to a good enough stage that you can focus on making it all work. We’ll definitely start to polish and move some of the UI around once we’ve got all the beta feedback bugs fixed up.

There’s lots to digest in your feedback on this UI, I’ll have a chat with the others during the week and hopefully make a bit more of a plan on some of these changes that we think might work!

I’m keen to hear what other Beta users think of these changes, or what they find annoying with the layout. Hopefully we can end up with something that everyone loves

[Bruno (Bruno Le Penven)]

Have you thought about the possibility of detaching panels (like in Photoshop for example, even if many here prefer Affinity ) and being able to take advantage of a multiple screen configuration (I know I’m a bit selfish because it’s mainly for me that I’m asking)?

[anon68150607]

@dan

Also, good news, we already support tabbed documents, go to the “Window” menu and choose “Merge All Windows”. If you have multiple documents open they will all be merged into a tabbed document

Ah, I hadn’t noticed that. Nice. Only thing I find is that if you have two different projects open it’s not exactly clear which file is with which project. Having something akin to the site info/settings (with the site icon) and Publish button always on the left (see mock-up #2) would help as ideally that info would change with the tab (if necessary).

@dan

I’m also not 100% sure what side the node tree should go (if we allowed this), as with most things we’d need to implement it to find out how it feels.

Interestingly, I had started with it on the left and then moved it to the right when I realized that I was most likely going to be going between the structure panel and the properties panel most often, and that having them side by side would greatly improve that workflow and experience. I think that being able to drag components from the components list on the left both directly into the page/viewport (with somewhat less precise placement of elements within the page structure) and the structure panel (if visible, for a much greater degree of precision) is a really compelling way to work. It would also be really helpful to see any changes in both the viewport and the structure at the same time.

That said, the placement of the structure/node view to the left or right of the page/viewport could even be set by the user in a preference, no?

I also think a great place for the structure panel toggle would be up in the main toolbar before/beside the external (Safari) browser button - sort of like a user friendly ‘Inspect element…/devtools’ view. I also noticed that there is an ‘inspect element’ menu item in the viewport. If you’re keeping the web inspector, popping a button to toggle it on/off up with the structure panel toggle and the Safari preview button would make alot of sense.

[klap (Ken LaPlante)]

This is wonderful Bryan! Great suggestions! I was digging around and found this Show Catalog dialog box. With this open I was able to drag a component to the editor. Notice on the left that the structure panel is grayed out. Also the Show Catalog panel does not stay on top. Seems like your suggestions would be very helpful! For now a partial work around.

[anon68150607]

Thanks @klap! I didn’t know I could drag from the catalog, as I was expecting something more like a checkbox or something to enable/disable the various component packs.

Yeah, I ran into the Catalog as well, hoping I could disable the ‘Sections’ components, and just keep the core ones. I could see the Catalog as a nice way to add and remove (aka. manage) Realmac and 3rd party (paid?) component packs within each project/site individually.

It could go along way to helping to keep the component list tidy and focused, as I’m already finding it cluttered.

[dan (Dan C.)]

You can also drag from the editor into the node tree and visa-versa. It’s pretty cool…

[anon68150607]

So I decided to take a couple of hours today and begin to work through the Component Inspector UI/UX. I used the Paragraph component as it’s one of the more complex ones and I wanted to see if I could get something that feels more ‘Elements like’.

I stole liberally from Pages, including the segmented control - style, layout, and more.

With some parameters I imagine the UI changing for when different settings are used. For instance the Color property. If Gradient is selected you’ll have two (or more colours to choose from) as well as what position each colour is placed in the gradient. I also imagined a style picker much like in Pages where you have predefined styles (body, header, etc) in the them that can quickly be selected from a drop down at the top. The font family, weight, etc would all be populated based on the theme style. If you decide to override these you would also have the option to update the theme style directly from the property inspector. All of the settings here would apply to the paragraph as a whole, not necessarily to individual sections of text.

The layout section is quite complicated, especially in terms of setting margins and padding. I was thinking that it would be nice to allow folks to select preset margin and padding settings contained with their theme - much like how the spacing section of the theme lists all sorts of different space values, the margins and padding values would contain preset collections of spacing values to indicate top, right, bottom and left values.

I also added a specific background section in layout which includes the ability to set more than one background. For instance a colour or a gradient, as well as an image (which is possible in CSS and Tailwind).

More only contains notes for now, but I could image other values being set here. Style and layout will largely be the main sections for the core components. It would be nice as a developer to be able to group similar properties under a section heading (ie: style , layout, etc), as well as being able to define your own when necessary (ie: behaviour, external, etc)

Anyway, I’ve included the (very messy) Sketch file below if anybody is interested.

Putting it in the Elements UI would look something like this. I’ve also added blue dots to items within the node/structure view to indicate which elements/components have overrides. It would be nice to be able to filter/search the node view for just those nodes/elements that have overrides.

https://files.bryanrieger.com/elements.zip

Note: I’ve updated the screenshot with a few cosmetic fixes, as well as the elements.zip download.

[Flash]

I like where you’re headed. It needs polishing. Not liking three columns, but I understand why.

[anon68150607]

Yeah, the three columns is a little busy visually, but ideally you should only have it shown when you need to use it. I’ve come to look at the structure/node view as a very simple, Elements focused ‘devtools’. It enables you to look under the hood a little, and fiddle with things that would often be more awkward to do within the viewport itself. Having it beside the properties panel makes that fiddling a little bit quick/easier/intuitive IMO.

I’ve been wondering if the structure/node view would work better as a semi-transparent overlay on the viewport itself (rather than squishing it) reinforcing that it is an alternative view of the page/viewport itself? That probably wouldn’t work on small (mobile) viewport sizes, so probably not a great idea.

[dan (Dan C.)]

Hey @anon68150607 wow, that’s a lot to look over and process, nice work, I like it

I’m not sure about adopting this lock, stock, and barrel… BUT! there are a lot of nice ideas here that I think could easily be moved into the Elements UI and it would improve it greatly.

I’ve created a ticket here for these UI ideas, and will chat it through with the others. I don’t want to get too sidetracked right now overhauling the UI as it takes away from bug fixing, the changes we make will probably be smaller in the short term. We can do some of the bigger changes once we’re a little more stable!

Thanks again, and do keep it coming if you have other ideas on the UI - love this stuff

[scottsteven]

I think if panels can popout of the UI then I can move them to second screen it gives me more screen real estate on the laptop. I travel with a portable extra screen so this makes sense to me. Fix the core bugs then this is something that can be addressed at a later time. Traveling office with portable Screen and iPad for email WhatsApp and what ever communications apps I need to keep them out of my way while coding

so if I could do this Screen 1 and Screen 2

[anon68150607]

@dan

I’ve created a ticket here for these UI ideas, and will chat it through with the others. I don’t want to get too sidetracked right now overhauling the UI as it takes away from bug fixing, the changes we make will probably be smaller in the short term. We can do some of the bigger changes once we’re a little more stable!

Thanks @dan. These were only meant to provide some additional ideas from a beta user POV. Bug fixing and stability are definitely the priority, but I’ve found it’s often userful to have many ideas earlier in the process as it provides you additional time to reflect on which one(s) are likely to solve the problems best. By the time you’re ready to put the ideas into code, you’ll likely be much more confident that what you implement is the right design (and one that feels much more cohesive in relation to the whole).

[upssjw (Steve W)]

still would like pop editor fro second screen, copy and paste too much effort, I know I have mentioned before, also suggested before not sure if possible, when you hover over an item in the tree, if a pop coup happen showing preview of that layout and the code. Inspect element is great, checking the right number or whatever is showing when you use custom components, if there was a way to see in a pop out, user enabled

[anon68150607]

The more I think about it I can see lots of benefit to having both the left (site pages, assets, elements, and structure) inspector and (to a lesser extent) the right context-sensitive inspector both be detachable from the main window to enable custom user workflows.

Also being able to move individual tabs/sections (ie: structure, assets, etc) from the parent panel into their own window would allow for even more user customization.

[trinube (Kim)]

After a couple of days I’m definitely in agreement with being able to access both the node browser and components/elements at the same time. With a large monitor I’d much prefer docked items but for smaller screens or multiple displays I can understand tear off palettes being attractive.

I’m spending a lot of time in the node browser arranging, stacking, duplicating and selecting items. My personal preference would be to have them on the same side (efficiency of dragging) with properties/inspector on the other side

I’m not overly bothered by the resources needing to be opened as I’d use that far fewer times than the components/elements. I’d be happy for them to be in a seperate window - similar to how the original Final Cut Pro used to work.

I’ll throw in the page browser here as well. While we can’t copy and paste (and duplicated pages don’t work properly) it’s seemingly impossible to copy an entire page as a starting point for a new page.

[dan (Dan C.)]

@trinube

While we can’t copy and paste (and duplicated pages don’t work properly) it’s seemingly impossible to copy an entire page as a starting point for a new page.

Page duplication is fixed for the next beta due on Tuesday 6th August

[handshaper (Robin Mair)]

I have to agree that it is imperative to be able to have both the component and node browsers visible.

I find myself spending a lot of time in the node browser and find it to be incredibly useful. But not always having access to it is a major distraction.

I’m more than willing to sacrifice screen real estate in order be able to optionally have it always be visible.

[trinube (Kim)]

@handshaper

I find myself spending a lot of time in the node browser and find it to be incredibly useful. But not always having access to it is a major distraction.

Definitely. Until I started using the beta I had no idea how much I’d be using the node browser.