Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
I've played around with the current alpha of Umbraco V8 and I must say that it looks really good, love the progress!
One thing that me an my co-workers have been trying to "settle" with is the new way of presenting "Tabs" in the Content-section. Here's a node with two tabs "Grid Content" and "Content":
The "Tabs" are now stacked in one long page, I've heard that one of the reasons for this is an upcoming "side by side"-editing feature to be able to edit two variants side by side. That makes sense.
But I'm still not 100% sold on this UI design so I would just like to open a discussion around this. Would someone argue that a doc type has to many properties if it has 4-5 tabs? How do you guys work with tabs? Are we the only ones that would miss the them?
I'm also thinking that the layout could be configurable? Maybe with some switch on the document type? (Render with Tabs: True/False)?
thanks for raising this point and I also have some serious doubts how this will work on our websites. We sometimes just have some doc-types with a lot of tabs and properties, and I think it can become a mess/unclear quite fast.
But I didn't attempt to spin up v8 really serious and I don't know in which phase the design implementation is currently... So I don't want to bring in my thoughts too early on things that haven't been published yet.
I am also not completely sold on the accordion idea over tabs. My issue is that if on first load of a content node you only see the first open accordion you dont get a quick over view of all the tabs you are going to be working with, i.e SEO, Settings, Content etc.
With the accordion layout you wont see all of the sections you will be working with so dont get a quick overview or insight into everything that is involved in setting the content node up.
Good topic for discussing! I've not used v8 enough in anger or with clients to get a feel for what is going to work best, but I can see a few pros and cons already:
Couple of thoughts:
Maybe if all the Accordion panels where collapsed by default this would solve the "overview" problem (but at the expense of more clicks required to start editing).
Maybe we could have links that mimicked the tabs at the top, but anchors down to the Accordion item (which would open it)?
I know people hate change and then once they get used to the change its all good again. I just feel that tabs work, why change to accordions...
The interesting thing to consider here is the role of Content Apps...
And the different journeys that editors take when they interact with content
eg Creating Content vs Editing Content vs Comparing Content etc etc
If a standard content page might have on average 5 tabs? (yeah I've seen more...)
Then think how many of those properties on those tabs, are regularly updated for the content item, and how many of them are there for 'niche' functionalities...
So I pretty much always have a 'Page Settings' tab. that contains all the usual umbracoUrlName, umbracoInternalRedirect etc properties, at least 95% of the time these are ignored for a content item, but they are there, because every now and then its really useful on a node to be able to redirect or rename the slug, I provide them to the editor without really thinking... but come V8 I'm thinking these kind of properties are more suitable to a content app... or at least that is my understanding of what content apps might provide...
The SEO tab.... again all those SEO settings are they part of the content?
When I think about the regularly updates properties, for me they are usually spread across two tabs 'Main Content' and 'Related Content' usually picked - and the order of the properties reflecting how they fit into the editors mental model of the page, is the key.
Recently I've taken a more atomic approach, to organise smaller clumps of properties, across doc types, with compositions, eg no property is ever set on a document type directly, only on a composition, it's made me think alot more about when and where properties are combined... I think it's meant a less cluttered editing experience, although I'm not sure exactly why.
so I'm interested to see if V8 and content apps, will enable us to move of the 'meta' properties into more obvious content app sections, leaving the content properties with a better flow for creation, and comparison...
... however for 'editing' existing content 'journeys', the tabs probably get you to your place of update more quickly, I don't like trying to find things on accordions (remembering the old document type editor) ... but interesting to see how they are presented on first load, (eg all closed up) or whether there would be 'jump links'
I suspect in some journeys, for some content, the accordion single page of properties will win over the tabs, and for other types of content and updates, the tabs will feel better...
I would also argue that the new menu based solution for sections demands expensive real estate. About 90% of our clients use laptops in their daily work. About none of them has their Taskbar on the left, as Shannon had on his CG18 presentation ;). That said, their 16:9 or 19:10 resolutions are wider, and freeing up height over width is crucial!
Personally I don't care if it are tabs or accordions. It's just a way of grouping properties in the UI.
And I don't think editors will care as well. They just want to their job... edit content
What is more important is that you as a developer group this properties logically.
What we tend to do is group properties in a tab according to their functionality (eg. Content, SEO settings, Navigation Settings)
And then order the tabs on the editing frequency...So navigation settings and seo settings often are the last tabs.)
The first tab contains only the properties that are changed frequently eg. page title, content (grid or rte), ...
So in that way an editor can start editing immediatly when they open a item without changing tabs.
It would be nice in V8 to mark a tab as "Content App" for the properties that are not edited frequently. Like Marc already suggested as well.
But if I understand correctly the purpose of content apps is to have easy integration of third party data.
My knee jerk reaction would be to agree that accordions doesn't feel as user friendly as the tabs. That said, it would be good to get some HQ input if possible to know / understand the challenges that led to this decision.
Without knowing that, I don't think we can suggest viable alternatives as we just don't have all the information.
Perhaps some kind of accordion navigation could be added to let editors jump directly to the desired section for editing? I dunno, just thinking out loud here. My main concern would definitively be editors getting lost on a mile long page of properties.
Sitecore had accordion style editing last time I checked (maybe still has, it's been a while) and that quickly became a bit of a nightmare to navigate. And yes, I know it's not fair to compare the two. Just saying :)
I've got to admit, when I first saw that tabs had gone in v8, my gut reaction was people ain't gonna be happy about this! Like others are saying on here, let's wait & see what HQ say, to justify the rational.
After reading the first few replies on this thread, I took a look at some of our own recent Umbraco implementations, to see how we are currently using tabs ... and it turns out to be pretty much as Marc outlines above.
Of course, there are variations for specific page types, but overall, we've got a definite divide between "content" that is specific to a page/doctype ... and configuration/settings of that page/URL.
e.g. the actual thing and then things about the actual thing.
... and this is where I see Content Apps fitting in. Of course, we know very little about them at the moment... and can't wait to hear more!
I guess that some of our solutions might "over use" the tabs but we try to put all the content and settings that's related to a page on that content node. Ie generic "push/list"-texts, CRM-settings for leadforms, SEO-information, menu-overrides etc.
This is how one of our sites look, each tab have everything from 3 to 10 different properties.
A possible solution would be to combine the tab navigation from V7 with the accordion from v8, as Kenn Jacobsen proposed.
The accordion would still exist, but we would get an overview of the contents with the tabs on top and could scroll to each section easily by clicking a tab item.
The problem here is that it wouldn't play too nice with the Content/Info tabs...
Great points - high five for all the input. There's reasoning behind the madness - whether it's great and whether we hit a home run is too early to say.
First, a bit of background. Over the last couple of years we've seen two trends:
Managing websites is beyond just editing content. We've seen various hacks to accommodate this via either adding menu items to the Actions menu, creating property editors that don't edit content at all but acts as placeholders for other functionality, dashboards and custom sections. We wanted a solution that made managing beyond editing as friendly as editing content. That's why we're introducing "Content Apps" with v8.
Pages become more complex. Combined with how v7 allowed more flexible property editors, this has opened up a lot of new editing experiences that required fewer properties but more space and clearer navigation of what you're editing. That's why we've been working on "Infinite Editing" for v8 (which requires more horizontal screen real estate - we need further testing, but could potentially compensate for this by minimizing/collapsing the top navigation).
Both of these concepts means that we needed to completely re-think the overall grid system of the Umbraco back office (as in navigation, panels, headers, etc).
We've tried what Tobias Klika did in the screenshot above (high five for the great example, btw), but it steals too much screen real estate and it also becomes unclear what the priorities in the UX (tabs and "content apps" compete for focus).
In the end, we've concluded that tabs in the back office are slightly overrated. When implemented well, they definitely help giving an overview but they can also give a false promise when done less well (especially in larger projects and when compositions are overused).
When you've used v8 for a while, it's also surprisingly nice that you just scroll down the content tab and in the end, save or publish - no jumping back and forward between tabs that scream with validation errors.
The biggest UX issue right now with the tabs being removed is to ensure fast navigation between the field groups and an overview of the groups. We'll have a couple of ideas to test including local navigation when clicking a group header as well as navigation to the different groups when you click "Content" at the top.
Hope this brings more insight. Tabs definitely has its place and was a great navigation pattern when sites were more simple and it was all about editing content. And no doubt that for some cases this will be a step back. However, I'm strongly convinced that for the majority of sites now and even more going forward, this is a small tax for an otherwise huge step forward.
Thanks for the insights...one question remains unanswered for me.
Can we have properties of a doctype in a content app ? eg..all SEO related stuff, navigation settings etc...
Than the content editing area is really focused on managing content instead of settings.
And I also think it's important for UX consistency that it's clear where you edit content and where you manage content.
In 2018 what is "SEO" anyway?
I could see parts of navigation go into a more dedicated area, though (and also be less of magic strings and a more consistent way to handle urls, navigation, etc). But too early to change too many things and we need to learn more about how what we've done so far works in the wild.
Sorry if this is a stupid question but are content apps designed purely for displaying information or can they be used as an area to manage specific types of content.
With SEO the example would be meta titles and descriptions. Could this live in a content app or is this regarded as content as well?
Content Apps are not for editing content and is not a placeholder for content properties.
Okay cool, I really like the idea of Content Apps, maybe the name needs a rethink though as I think the name is causing confusion.
Thanks for sharing the progress around this Niels! It's always interesting to get insight in to why stuff are built in a certain way.
As far as I understand "Content Apps" might be used for something like an integrated Google Analytics-view for showing stats for just this page, a view that render some external SEO-audit or what ever. But it will not be a place to edit content right? The aim here being to not to be forced to implement a "Property Editors" just to render a "content aware" angular-view.
While I do agree with your points about error messages on multiple tabs and love the idea of "Infinite Editing" I still think that it's really important to find a way to navigate fast to a "Tab"/"Field Group". Ie if you have a Grid in the first Field Group and then some page-specific settings further down, you don't want the editor to scroll forever to come down to these settings.
If the solution is good old tabs or something else is really secondary. I also raised the idea of Tabs being a configuration-option on the Content Type - that would give us as implementors of the website the option to choose what fits best in different scenarios.
I guess I'm just scared =D I've seen some Wordpress implementations with lots of different controls and inputs in a long accordion and for me the Tabs in Umbraco is a lot better, more structured approach and provide a way to focus on "parts" of the content that I'm editing.
Correct, that "Content Apps" (name still working title) is not for editing content.
The most important thing in UX is consistency, thus a toggle for whether to show tabs or not something to strive for - it would be a symptom that what we have doesn't work.
I have started to look at V8 this evening and this is also the one area that has surprised me the most about the chance of UI.
The built in support for multi-lingual sites in v8 looks great, definitely #hi5yr for building this into the core.
Over the last 20 years I have built a LOT of website, however the number of multi-lingual sites is probably around 10, as it happens, I am currently building a bilingual site for a client.
The site I am currently building has a complex design for its homepage, it can logically be broken down into 8 sections ( this excludes the navigation & footer that are defined elsewhere )
The page also has 3 additional tabs for:
So in this current scenario, with logical groupings as far as the editor is concerned, we will end up with 11 tabs. It might seem a lot, however the page is reasonably complex and requires a lot of editable settings.
Before anyone suggests it, the site design is as far from a "grid" as you could get so using the Grid editor would not work for us.
My gut feeling is if the Accordion is now the way forward for Umbraco, there will need to be some way to allow editors to quickly see and navigate between the sections.
On pages like the one I just described, I think it's not going to be a great UX with a lot of vertical scrolling to find the content you need to edit, but for smaller pages I can see it could work well.
Like a couple of others have mentioned, it would be good to somehow separate the "page content" from the "page configuration", even if that was just some kind of visual difference in the accordion.
On the majority of sites, I would guess most pages will have properties that once set are never changed, so maybe being able to set the accordion default for each section ( i.e. open or close ) could work quite nicely?
Definitely something to discuss more and to test with some real world complex configurations.
Just some thoughts, I look forward to seeing how this pans out.
Great feedback, Chris. This is exactly the type of information we need.
Any chance you could e-mail me more information about how the homepage is setup so we can use this in our work (and get a better understanding of more "real world" projects)?
I would second that.
We need to figure out a way of hiding editable settings from editable content. On our sites we usually build recursive properties, a page gets its property values from the closest set value in the structure. Especially awesome when working with huge themed structural sites - I would say that's Umbracos big USP compared to other CMS'es. That said, we do need to put page specific settings somewhere. Not necessarily in tabs, but i would say not in an accordion.
This is really interesting and much more interesting than a focus on tabs vs accordions (which quickly ends up in a cheese is being moved / bikeshed discussion).
Ie. why (thus leading to what) is there a need to categorize and could Umbraco help with that, thus also adding more guidance and consistency ootb.
I know content apps are for 3rd party integration. But for me personally it would be a perfect fit to have content properties that control page settings in there. You could have for example a "Theming" content app that let's you manage all related properties to theming. I see info "tab" is also moved there.
Hmmm...seems the Last reply from me and Niels are gone...so posting again.
I know Content Apps are for 3rd party data integration. But for me it would be the best place to manage doctype properties for page specific settings. Eg...you could have "Theming" content app that let's you control all doctype properties related to that...I can thinkg of many scenario's that would fit in there.
I might be misunderstanding you, but to me, it sounds like they would just be tabs with an icon.
This is exactly the information/feedback we need, ie. a conversation about what people are using tabs for and why there could be a stronger need to group information (instead of tabs vs accordion which ends up in a moving cheese/bikeshed discussion).
Right now we have Content and Info. It could make sense to look into if other default categories could be needed. This would also help with guidance and consistency.
Yep...but in the same place where content apps will be placed..I see the Info "Tab" has been moved there as well.
Like others have mentioned most of the time you group your properties logically by functionality on a tab. Especially when you are using compositions.
We usually end up with 7 to 8 tabs (excluding the info one). But some times more, some times less. All depends on the requirements.
This would mean a lot of scrolling for editors to find the content..or collapsing accordeon and opening another one.
Hmm...something strange is going on....2nd time I posted a reply and that it's gone after refreshing
Yep you are correct that it will be a "Tab" with a icon, placed where the content apps go.
So you can free up the accordeon for properties that change regularly.
We often end up with at least 7 or 8 tabs because we group properties by functionality. Like the screen shot below
But SEO and opengraph are almost never changed by editors. It would be nice not having them in the accordeon, so that area is only focussed on changing page content.
I do understand the importance of, and appreciate, consistency in the product. And I would argue that the removal of noise for the editor should be of primary concern.
What about the possibility to label a property as an editable content or a page specific setting? Each of em having their static position in the UI? The content properties would be of primary importance, but the page specific settings would still be in reach for the user?
Yes, there seems to be a bug (caching) when you post to a signalr loaded comment (I'll create an issue and we'll look into it next week).
Maybe I should have posted a different screenshot because this an overview with a customized list view.
But on "detail" pages the first tab would be the "Page Blocks" tab where they manage the grid content for this website. All others tabs are sorted by editing frequency.
So with this kind of separation in properties this would mean a lot of scrolling using the accordeon.
Maybe a toggable quick navigation for the accordeon would be nice as well. So you would only enable it on doctypes with a lot of "tabs".
Like I mentioned before I don't care if are tabs or accordeons..it's just moving the cheese. But what I do want is a good editor experience.
I will check will my client and get back to you, I am sure it will be fine. Ideally I will be able to just share access to the Umbraco Cloud dev site :)
I'll get back to you ( probably on Monday )
I would echo some of the points made here:
In real life sites it is often necessary to have many tabs to logically divide content up. I get the impression the Core team think we should have less tabs, but this just results in a single tab containing unrelated content all thrown together. I think it's much better to have a single tab contain logically related content than have fewer tabs containing more content. This applies equally for accordions, if not more so.
The use of compositions actually makes it more likely you will have more tabs. In most cases it makes most sense to have a composition have it's own tab - this is partly because trying to merge tab content together (when two compositions have the same tab name and order) can result in random results. Plus it just seems neater to have one tab apply to one set of related content and not mix this up.
Also, sites evolve over time - you might initially start with a few tabs but then the client requests something new and it grows.
Also, as mentioned, a lot of sites will contain various "settings" that are required but less frequently accessed. This can be stuff like SEO settings, navigation settings (hide page, prevent deletion checkbox) and also, on the home page, site level settings. We tend to use the home page for any site level settings because this allows easy recursive access to them and also it works better when you have a multi-site set-up (ie. a multilingual site with four home pages).
I do fear that simple swapping tabs for an accordion is going to create a real usability problem for editors. Currently tabs are "sticky" so you always can quickly swap between them. This isn't the case in an accordion, where if you want to access the last tab you have to scroll down.
Late back to the game on this one, but just catching up on things.
I can't tell if we are saying tabs are inherently bad from a usability perspective? or, if we are simply loosing them to a) gain vertical real estate (seemingly because the sections nav has moved to the top to enable more horizontal space for infinite editing?) and b) because content apps now compete for focus?
It feels like it's mostly the later, which if that's the case, I do think the example from Tobias could be made to work better. How about we knock the tabs back so that they are clearly less significant than the content app?
From a vertical real estate perspective, the reality is we are talking 55 pixels difference from v7 so is this really a huge deal? I mean, it's not wasted space.
Also, when you consider the number of interactions accordions will create vs tabs ie, say you want to get to the meta data section, with accordions, this is either collapsing all accordions before this section, each being a click + mouse movement to the next collapse button in-between, or scrollwheeling multiple times to get there combined with the fatigue of attempting to identify the correct accordion as it scrolls past vs a positive single click action to get to a specific meta data tab.
Is this worth the compromise of 55 pixels? I think so. Especially when we are suggesting a lot of content will end up being edited in infinite editor windows anyway, in which case the vertical space is irrelevant because the modal opens over the top of all of this.
Just a few thoughts.
Ps, just to add to this, you already have the concept of knocked back (pseudo) "tabs" within the main editing area present in the doc type editor. Maybe this could be standardized as a pattern?
I think there needs to be some kind of quick way to get to the bottom accordions.
The grid is a perfect example of why accordions can be bad. I have a lot of pages, where the height of the grid editor (including content of course) is more than 5000 pixels.
Also the navigation between accordions is going to be a painful experience of random scrolling up and down.
The knocked back pseudo tabs showed by Matt could be one way of solving it, but also a dropdown nav from the Content tab (I'll see if I can make some mockups), or a floating flyout nav, or a minimap in the right side could work.
I think what will be essential is that this feature needs full end user testing with content editors. This would need to be with some real content that is representative of what a modern Umbraco site might contain.
A good way of doing this might be to convert an existing U7 site to U8 and then give a cross-section of editors time to use both and report back which they find easiest to use (alongside any other feedback).
We also need to consider that, initially at least, a lot of U8 editors will be people with U7 experience and the transition to U8 has to be as smooth as possible for them.
The primary goal of a user interface is simplicity. Always has been because it has to be for safety, in engineering terms. You should be able to sit an editor down in front of this thing and be able to follow their nose. The maxim "Don't make me think" still stands. So it's really important that the editor gets an easily accessible overview of the page estate and they can get to each bit with as little effort as possible. Try this thing out with a huge site, say editing 50 news items and see how your wrist is.
Just my 2 pen'th ;) (I haven't even opened V8 yet but common principles apply. KISS ;) ).
At the UK Umbraco Festival it was mentioned that there would be user testing around the tabs vs. accordion debate and that the accordion ui may not end up being the final look for the content editor after all.
I was just wondering now that V8 has a launch date (end of Q1 2019), has this user testing taken place? If so, what was the outcome of it? I would be very interested in learning more about what users outside of the community thought about the accordion editor view. Would be great to hear from HQ on these results :-)
If this testing has yet to take place then I think it would be a great idea to engage with various developers within the community to create a range of content editing scenarios (from the basic to more complex) that they have created in real-world client projects. Then presenting the test users with the tabbed V7 version versus the accordion V8 version. Rather than testing against perhaps a simple text field in one accordion, a rich text editor in the next, an image in another etc (I only mention those as from the videos shared from HQ this tends to be what is presented). This way you will be able to gauge the true affect of tabs vs. accordions.
In addition, it is mentioned above that "Content Apps" is still a working title - I do personally think it is confusing having Apps and Content Apps. The average content editor probably wouldn't understand the difference and this could cause confusion when engaging with their developers. Therefore, my question on that for HQ would be, has there been any further thought around a final name for "Content Apps"?
Thanks in advance :-)
I'd just like to bring this list of recent UI/UX disasters to people's attention so that we don't make similar assumptions that caused these to happen:-
In an ideal world UI/UX experts wouldn't just be graphic designers but also have some MMI / psychology training ;)
Will try to get a V8 instance up this weekend :)
Have had a quick look at the new interface and played around with the DocType editor etc.
Accordions are not the way IMHO. There's too much mouse movement required compared to tabs and scrolling makes no sense (most aren't editing on a touch screen). Would be far worse on a track pad.
If accordions are final then they need to be all closed on page load (or optionally set the top one open).
New tabs could be displayed like they are in the new Settings section, i.e. minimally with a green underline and allowed to wrap if there are too many for a small screen width.
In the Settings section, I'd have DocTypes, DataTypes then Macros. In 9 years I don't think I've ever changed a Media Type but maybe that's just me. But I'm always in the DateTypes and often in Macros.
I'm editing on a 32" 4K screen and there's acres and acres of empty space. Had a go with with infinite editing and while I like the concept there's still masses of empty space so not too sure why the insistance on the menu going to the top. It's actually handier were it was in V7 as well as in the eye-line. I appreciate I may not be typical in the hardware dept.
Are we redesigning the interface for mobile first because that doesn't make sense to me unless someone can show clients/users are definitely heading in that direction in a major way.
Is there anywhere where comments are collated centrally?
Do accordions in v8 provide a more friendly content editing experience than the tab solution in v7?
I'm worried about the content editors experience. Has Umbraco HQ done any user testing and research about this change? Maybe the results showed content editors liked accordions?
At first glance - I don't like them.
I think it's important to craft and provide a focused editing experience. Content editors are asked to do a lot. Sometimes they are managing a simple landing page with only a few basic properties (I've included a screenshot of 1 such example below) and other times they can be managing a product in an e-commerce catalog, it's variants, marketing messages for social networks AND the resulting web page.
If by any chance this was designed without any consideration or input from the users effected by the change, I'd recommend (1) producing interactive prototypes, (2) working with partners or clients HQ has a direct relationship with to conduct user tests. The data will either validate your decision or lead you to producing a better product. It's much easier to fail fast and iterate in a design program like Adobe XD then it is to prototype everything out by code.
Can I share a few screenshots with you?
I apologize I can't give this my full attention, but I wanted to show our simplest web page, how it would translate to v8, and two (2) recommendations off the top of my head.
that is a really nice mock-up and I definitely like slide 3!
Thanks for sharing your slides! Number 3 is a great idea and it echos the layout of the "Info" section already present in the Content Apps part of the node in V8. So it's just expanding on the UI that is already present in the CMS.
It's a must for a content editor to get an instant overview of the content that will need to be edited within a node.
Great set of options, thanks for putting this together as a discussion piece. I added my comments to the demo but as everyone else seems to have put them here, here's mine :-
"Slide 4 would get my vote. A "User" interface has to give great weight to human factors. Eye-tracking, wrist/hand movements and all other usability factors. It's not good enough to sacrifice this to shoe-horn in a developer's clever idea. It has to stack up on all counts. Love the idea of infinite editing but if that's at the cost of the simple overview of content areas (i.e. tabs) then I'd rather not have it. I can hear editors' comments now. They'd have more difficulty finding stuff that should be in front of their face but have a facility available they might never use. Tabs in simple form for me :)"
These are great mock ups, thanks for putting them out there Mark.
Personally I'd vote for slide 4 as in my experience with this very problem, accordions are not the right tool versus tabs for this problem and it usually always comes down to a slow down in navigation reported by the end user.
However, if a compromise was required I think that slide 3 would be the only way accordions could be used in a way that allows content editors quick navigation between sections. Otherwise the first complaint I reckon we will all hear from our clients is that their content editors can't work as fast as they used to because it now takes them longer to navigate around on content that has a significant number of accordion sections. Then they will ask if there is any way we can bring back the old tab layout.
New to Umbraco but not to CMSes and UI and can't understand the move to accordions, it won't be user friendly, will lead to lots of scrolling, annoyed opening and closing and it doesn't give that quick visual overview of the content groupings as the current tabs does, even with all accordions collapsed.
Great set of slides Mark, screen 4 for me with maybe a slightly different background on the tab strip (eg light gray) to help the distinction but even the current tabs would be fine. The solution proposed by Matt further up would also work in my view. Screen 3 would be an option but takes up too much horizontal real estate where we'll lose a big chunk of editing space. My last choice would be the current accordions.
Your third slide hits the sweet spot for me.
Benefit of stacking the menu is space is virtually unlimited - won't need to hide options in a dropdown, can simply keep stacking. There's also an excess of horizontal space that could comfortably be sacrificed to make room for the menu/list.
Really nice work, concepts are great.
I'm definitely late to the party here... but I've not seen anyone talk about the potential of adding additional "groupings - tab groups". That would allow those of us who create by both inheritance and composition to place the common "globally" desired properties in their own grouping with their own set of tabs.
In one case, we heavily use compositions, where there would be a lot on unrelated content on a single tab or two if the practice were to limit the number of tabs, or go a different route;
I personally don't accordions, they seem to add a lot of scrolling to get to where you want to go. but that is just personal preferences.
One of the sites we built heavily uses child documents to add blocks of functionality, simply because the amount of inter-related content and properties on a single page was getting too unwieldy; that site has lots of mostly static content for a large variety of services offered by outdoor service providers (like fishing guides, etc). that approach allowed us to really group all of the inter-related content and also allowed pages to look at the child pages to determine what to display for the summary page.
How about calling 'Content Apps'... 'Context Apps'?
because they are contextual to the item currently being displayed/edited on the dashboard
(and it sounds a 'bit like' Content apps so no one will really notice it's been changed.)
makes sense for media items too, where it's a bit of a misnomer to have a 'content app' for a media item, you sort of want to call it a media app - the 'content app' name really gives no clue as to what it is, whereas 'Context App' has a nod towards the contextual nature.
All the cool kids are calling them 'Context Apps'.
Is there anywhere we can see what the design justification is/was for accordions, as from where I sit, it's a no-brainer bad idea? The editor experience is what drives my selling of Umbraco, nothing else. If it's damaged then so is my business. No one wants to have to move their eyes and mouse
and think more than necessary (think repetitive strain injury). And before people start shouting "you just don't like change", this is something that's testable. Has there been any "proper" comparative user testing with experienced and inexperienced editors on a large test site in the two versions? Let's make stuff better, not difficult.
I love how involved everyone is on this subject. Just goes to show how the Umbraco community is so special.
Now... I'm not writing this to root for either accordions or tabs. I just want to mention a few things that needs to be part of this discussion and ultimately handled in a final proposal. Consider it food for thought.
I think we can all agree that the current model where validation errors are hidden behind tabs isn't exactly ideal. While the accordions don't mend this just yet, I can't stop wondering if the accordions or other "one-page" editing experiences would be able to handle validation errors better than tabs.
Split view editing
For editors working in split view on a standard laptop or on a tablet, tabs are bound to start overflowing or wrapping when there are more than just a few. Accordions obviously won't do that, since they stack vertically.
One concern I have with tabs is the Grid preview loading time.
If an editor moves to a field under a grid element, once the grid preview loads they will have to scroll down to continue working.
I have my concerns but until I actually try working with it am trying to be neutral :)
I've setup a testing environment here with how a 'normal' homepage usually looks for us: https://umbraco8preview.perplex.eu/umbraco/#/content/content/edit/1071. You can login in with firstname.lastname@example.org and perplexrocks.
I think that some styling already could make a difference, but will ask my UX'ers to give it some TLC next week.
Great example. Illustrates the problem very well, and it's a big one! Why should I have to scroll to get an overview of the editing options? Tabs solved that nicely. Accordions are a backward step in usability in my view. After all, this is a workbench, not a an art installation. Make nicer looking tabs if you have to ;)
I spun up V8 to test this out before I jumped in with assumptions. My thoughts:
1) I like the property grouping capability. It's actually something I've wanted to see for some time. It helps to visually separate properties within a page for editors where it makes sense to do so.
2) I still think tabs (or pseudo-tabs as Matt likened them to) are still useful/needed.
Having all the properties on one page separated in accordions is (dare I say it) very WordPressey. That is how it is done in WP & I don't enjoy that experience. There are likely going to be properties that are edited/used less frequently than others and there is utility in being able to move them out of the main/initial view.
The UX of validation of properties that are in different tabs I believe is solvable and on the whole the tradeoff for an overall better experience I believe is worth it.
Just a thought I had when reading this, and I have no idea if it's possible... but the comment about properties that are used more often than others is something that stuck out to me.
What could be really nice is if you can specify 2 different structures... 1 for creation of new document, and 1 for general editing.
The reason being is when you create a new document you might want to work in a specific order, e.g. name, meta details, primary content, tags, filters etc etc etc.
But later, you might want primary content first as this is what you are going to be editing all the time where as name, meta, filters might not change very often.
If you could do this then it could be a nicer editing experience. Just a thought from a non-editor :-)
Fantastic feedback, everyone. We appreciate all the replies and love the passion for this topic.
We're aware that the current iterations of v8 have shortcomings, in particular around navigation and overview of property groups - remember that v8 is still work in progress. We've added two tasks to the next sprint that aims to solve this:
We're also aware that in some cases, the tabs in v7 will work better than the single page of v8 (especially for solutions with many properties on one page or the cases where people uses tabs for different types of users). Remember that v7 is still here in those cases where you feel it's a showstopper for you.
In the upcoming releases of v8 we'll continue to solve the root causes of these (that is also not solved in v7 with tabs) such as permissions on property groups.
thanks for the reply. Appreciated!
Have a great weekend,
Just gonna leave these here:
A couple of good articles there. However, the use case is slightly different here as the back office is a work place requiring repetitive tasks rather than just consuming content. Always like Jakob Nielsen's stuff. It's a good starting point. His "Prioritizing Web Usability" is a good read ;)
Do you guys use regions while coding? No? IMHO same scenario applies to accordions.
That said, I tried to be open minded about it, but I believe that removing tabs from the doc types is going to be a huge mistake. Please make them optional!
I'm reminded of something that Marc Goodson said on Twitter about how a natural divide exists between content that is displayed directly on a page and content that is metadata and configuration. For instance, the page heading and "body text" are content, but things like SEO parameters or "hide from navigation" are metadata/configuration. The latter are needed, but are viewed by Editors in a different light to pure "content".
With that in mind, could there be another main section at the top of the page? Currently we have "Content" and "Info" as the fixed tabs, but what if this was "Content", "Info", "Settings" or something similar? Then we could move all the SEO and configuration properties to this section, making the "Content" tab a lot shorter?
It seems like a natural divide that would work well and help reduce some of the problems the accordion brings. However, I still think some tab like overview is needed. I don't really find Neils suggestion that if you don't like it then stick to 7 really constructive. There's clearly an issue here for a lot of people so let's solve it to make 8 the choice for everyone.
I don't really find Neils suggestion that if you don't like it then stick to 7 really constructive
I don't really find Neils suggestion that if you don't like it then stick to 7 really constructive
Let's stay classy, please. I said "Remember that v7 is still here in those cases where you feel it's [missing tabs is] a showstopper for you." and "In the upcoming releases of v8 we'll continue to solve the root causes of these (that is also not solved in v7 with tabs) such as permissions on property groups".
You can never make everybody happy and it's also important to set expectations. V8 is being released very soon and there won't be any dramatic changes before 8.0, but as I wrote above we'll continue to improve v8 and in the meantime, v7 will continue to exist and be maintained.
All the best
Let's stay classy, please
Let's stay classy, please
Like a lot of people who care for the product we want to help improve it and provide feedback. I suggested one way to do this that Marc originated (who has done a lot of editor training). Other people have made some other great suggestions. None of these require any dramatic change, but could make a big difference to editors.
We want v8 to be a success, but it's going to be a hard sell to clients if the editor experience is worse when it comes to quickly accessing and overseeing their content. Nobody wants to have to fallback to 7 for something that could be resolved.
You once said v8 would only be released when ready. But it seems there is now business reasons why it must be released this quarter. I understand that. I also understand that a product can be iterated and improved over time - like V7 was. But the editor experience is at the heart of the product and I really believe it needs to be gotten right from the start if you want people to adopt the product.
I was referring to putting words in my mouth, Dan.
V8 is ready. It's not the same as it's perfect. Nor that everyone will appreciate what's coming.
It was the same when we released v7.0. At that time there were also people who didn't felt the changes were for the better and also people who used both v6 and v7 during a transition period.
Like with v7 we'll continue to improve v8 many times as we work towards our mission of making Umbraco simpler.
V8 is ready. It's not the same as it's perfect.
V8 is ready. It's not the same as it's perfect.
Perfect means never get's done.
I agree to a extend the "accordions" are maybe not the best experience for editors.
But the same is true for tabs when you a lot of them.
It's important that you as developer structure your doctypes wisely.
V8 is by no means ready. There are some massive architectural issues currently being discussed which are causing a headache for developers trying to extend the CMS.
This accordions/tabs conversation screams of "we know better". You don't.
The pushback to the change here stems from real-world experience by developers well-versed in delivering comprehensive, editor friendly experiences for content editors. You'd be well advised to listen to them.
Ok, as the topic is still hot and I've spent some more time in the skin of the editor in v8 this weekend, I wanted to share some of my thoughts and ideas about current and further state. We've heard about the fact that the goal is not to be perfect from the 1st second, but in becoming better, so that's why I'm sharing it - maybe it'll open some creative minds to evolve or take even small parts from this brainstorming...
Disclaimer: it's not a request or demand or critique. I'm looking forward to see how the new approach will be welcomed and used, I'm also not a UX specialist (and designer as you will see). Those are just my thoughts - feedback more than welcome!!!
1. Space under the content tree.
I rarely have seen editors having more content elements opened to migrate stuff between nodes etc. Most of them were doing it in multiple tabs in the browser (maybe because of the bad UX already?), so why won't do anything with this space? In my mind I refer to something like "Properties" window in Visual Studio, which is attached in the bottom, top tree is scrollable and all is fine / navigable etc.
My vision: https://cl.ly/71e0c1d3534a
I would like to also notice the slight change of "content" header into "Search" input as I believe it's something what might improve UX by xxx % as if this is why editors should use the tree - why not to follow user experience from listviews etc? The issue starts when we're thinking about variants as the dropdown is there, but stil.. food for thoughts.
2. Tabs (and general?) inconsistency
I noticed the inconsistency of the tabs/"new tabs" and all the voices in my head said - hey, we have tabs still in the Content Section (and Settings section) at the beginning! Why it can't be used as same as there??
I've gone 1 step further in my ideas, and in reference to Kentico Cloud for example, why not make a title inline or inside of the fancy input which is not the full-width box editable when clicked on the top of it and move the content apps to the tabs bar below it?
Beginning of the prototype: https://cl.ly/d80dbdde8718
And still look on all this white space on the left...
3. Outlook-like look?
I don't know why, but I'm a big fan of 3 column designs and tailoring my experience from left to right. This is what I've sketched - purely for fun, but.. who knows..
So, no matter from the approach - we need to get used to and learn how to do stuff the new way - without affecting, but possibly with improvement of editors life.
Things which are still left / outstanding:
Can't wait to see it in action. Thanks for any feedback / other interesting ideas.
There seems to be a massive resistance to just putting the tabs back without any justification, that I've seen, for why there were removed in the first place.
The last iteration of the main editing pane I saw (last Thursday at the London Meetup [thanks Lottie]) was the nightmare of one massive bookmarked pane. You had to click on a Content App called "Content" to see a list of the bookmarks and then navigate. But first, you had to know it was there. Tabs gives you an instant full overview and one-click navigation to reveal the section you need. We shouldn't be going backwards in UX as that's the MAIN selling point of the CMS.
There's a hell of a lot to like about V8 but the core of the CMS is it's editor experience, i.e. the simplicity of getting to what you need to and making changes. The "making changes" bit has been improved (infinite editing, variants, etc.), the "getting to what you need" bit has gone backwards, unnecessarily in my view. It's the editors first touch point so it needs to be super simple.
In a business, Umbraco is given to employees to work on, so there are health and safety issues at play with the UI as well. Imagine editing 50 existing news articles with 100 extra clicks and many more scrolls just to find the bit you want to change. Good practice helps all round, (probably why it's called "good practice") ;)
I still don't understand why, on what are generally wide and short screens the main nav has been put to the top. Vertical space is at much more of a premium than horizontal space these days.
It'll be very interesting to see how the new basic editing pane functionality changes are received once it's out in the wild later this week. Let's hope it doesn't cause too much adverse publicity.
Just clearing a few facts:
You had to click on a Content App called "Content" to see a list of the bookmarks and then navigate.
You had to click on a Content App called "Content" to see a list of the bookmarks and then navigate.
No, "Content" is always there (no need to click) and the group navigator opens on hover. Yes, you need to know it's there, but it's an app not a website. An identical issue with the context menu, that's been in use since v2.
Imagine editing 50 existing news articles with 100 extra clicks and many more scrolls just to find the bit you want to change
Imagine editing 50 existing news articles with 100 extra clicks and many more scrolls just to find the bit you want to change
Thus, editing 50 existing news articles would require as many clicks as today. But in return, you get the many advantages that v8 brings. Also, if any of the articles had validation errors you'd even get fewer clicks.
Thanks for the comments. I was working from memory as couldn't find a link to install from yesterday. I'll clear up the details on Tuesday when it will be easier to find and install from the usual places. I'm fairly sure I'm right in what I meant but it may not have come across well. The jist of it being the content sub-menu should be visible, i.e. not hidden, (what the old Tabs did for you, but doesn't have to be Tabs), and reducing mouse movements, clicks/taps and scrolling to a minimum. V7 did a reasonable job of the latter, context switching excepted, (hurrah for infinite editing).
My first impression of this is that it might be a bit overwhelming for the content editors.
Instead of the word "Content" we could show the doctype name and icon (Page in screenshot).
The tabs could be shown like this, without loosing any vertical space.
That looks great. I've been working away today on an upgraded V7 site (still in V7) and had to split a docType into new tabs for the simple reason that some of the tabs contained so much it was a chore to scroll. I was thinking how much worse it would be in V8 plus having to do something before you see the overview. What you have there is simple and clear and just looks "right". I hope V8 ends up like this soon.
Just like Craig, I'm really hoping that the design Linus made is implemented in the next versions of Umbraco! Beautifull clean design and very intuitive!
I like Linus' example, but I think we need to consider variants. Try adding a second language to your v8 website and try editing with the content side by side.
I think it would be good to put some thought into how this might work with the tabs, my thought is it would be best to see the two columns underneath the tabs, but it would be great if someone who has a little time could create a visual example for us to view / discuss.
Having played around with V8 more I still feel that removing the tabs have made for a less intuitive editor experience. I do appreciate though that with the inclusion of variants the side-by-side editor view might make including tabs as they were in V7 a little more difficult.
So this morning I had a quick mess around in Photoshop with a possible solution to integrating tabs back into the editor experience.
Without variant side-by-side editing
With variant side-by-side editing
Works for me! Much easier to see an overview of the content now.
I also think more vertical screen real-estate could be freed up by moving the top section links (Content, Media etc) back to the side where they were before. For most editors they will just see Content and Media and there's a whole load of wasted space. Generally vertical space is more of a premium than horizontal on most displays, so this would make total sense.
And if the top menu was ever to wrap you'd lose even more vital vertical space. Totally agree. We seem to be making good progress. Just hope these suggestions make it in ;)
Apologies if I've missed it, but has expanding and collapsing the accordions been removed?
Also I'd like to voice my vote for bringing back tabs as well - we've had a lot of negative feedback about this in terms of usability. Kicking off 2 new projects and when shown both demos it was decided to go with v7.
I too would like to vote in favor of bringing back tabs. Our users have also provided negative feedback and we are hesitant to upgrade to V8 based on that feedback.
So, to ask the dumb question... why can this not be a presentation mode that users can select, depending on their own requirements and preference, and which programmers can default to depending on the device ?
Users are already adept with the concept of switching presentation mode to match current requirement (e.g. grid vs table layouts) so why not tab vs accordion, and then make it easy for the dev to adjust and style that to their needs and preferences.
I also feel that the common-place expand-all/collapse-all toggle would enhance the usability of accordion on a small device - something I haven't noticed yet.
I personally use quite a lot of tabs in v7 to group items logically, and while this is my preferred presentation on a desktop/laptop that most admins use, I have to admit that this does get quite unwieldy on a 4" hand-held and can see where accordions could be useful at times.
I agree with your idea for it being a presentation mode choice, but the accordions have gone already (or they had last week!) ;) For now I've decided not to offer V8 to clients till tabs or something that's in the eye-line like tabs (i.e. tabs) have returned. The current position is just too much of a backward step in the editor's user experience IMHO and seems so unnecessary.
Bring back the Tabs or something smarter.
I would also vote for some kind of configuration option (maybe on doctype level) either for the developers setting up the site or a switch for the editor would also be nice good.
Great idea MB!
I can see why having a second language option would cause problems for other tabs.
I've included a screenshot from one of our test sites which shows English and Welsh shown in tabs (on Umbraco 7.5.14).
However, not all fields in the doctype would need to be translated, so maybe the problem with the language option is overrated.
I do like some of the other options mentioned here
- an option to switch tabs on / off
- an option to switch accordions on / off
There is a bit more real estate now that the left hand menu is gone, so maybe this area could be repurposed.
Personally, I love the UI changes for V8 – including the use of accordions and I think it’s a big step forwards in terms of improving user experience for both developers and editors.
A lot of clients that I’ve worked with like to edit on the go on their laptops or tablets and the new design changes really lend themselves to this.
I know a lot of this comes down to personal preference and there’s bound to be conflicting views on what’s the “best practice” here, but I don’t see the issue of tabs VS accordions as a huge deal-breaker on whether or not to use V8.
Would it be nice to have the option of using tabs or accordions? Sure! If Umbraco HQ agree and think it’s worth their time investing in this, then great! But is it necessary? I personally don’t think so.
There’s really no more scrolling on the page using accordions than there was when using tabs, since you can quickly navigate to the appropriate section using the little “Content” group navigator and arguably, even if there was, we’re all pretty much accustomed to doing that already in daily life (e.g – scrolling through Twitter or Facebook, or our very own Umbraco Forum!)
I can 100% understand that for some people, tabs are the way to go, but realistically, how many tabs/properties are really necessary for a document type to have? If you’re using 12 tabs, with 10 properties on each, perhaps there’s a more efficient way of gathering that data than what’s currently in place? Maybe a custom section is what you’re after! Then again, maybe not? That’s the great thing about Umbraco – you have the flexibility to extend things however you want! And if there’s not a way to do it, you can always make a pull request and do it yourself 😊
Just my 2 cents on this!
is working on a reply...
Write your reply to:
Image will be uploaded when post is submitted