Restore previous look&feel for system settings in 16.04

[Flohack74]

The list-style for system settings in 16.04 is maybe functional, but looks a bit bland in contrast to the old one. We should restore the old look.

[PhoenixLandPirate]

Thats an opinion that I think we would have to have a talk about.

I'm not against either, I've only used 16.04 a little bit, and I can see where you're coming from, but the way we're doing it on 15.04 is limiting in certain ways, such as, we don't have many settings we're dealing with as android, but as we continue to develop, eventually we will have a similar amount, which requires more options.

It also makes our settings more like how other linux systems are going, and makes it better or more familiar in converged mode.

[nfsprodriver]

My opinion: 16.04 is a big change we should be able to see. I didn't like the old partly fuzzy looking icon order. You must scroll anyway. We also shouldn't move away from yunit optics. Agreeing to @ChloeWolfieGirl talking about convergence we should have same structure.

[sverzegnassi]

Adding a bit of context: System Settings has been designed in order to follow GNOME System Settings specifications. https://wiki.ubuntu.com/SystemSettings

The new list design has been introduced when GNOME started their effort on the new design. In these terms, aligning to the new style in Ubuntu 17.10 would make sense, since it's what our users might reasonably run on their desktop - alongside the convergence argument.

Another point might be represented by users that migrate from an Android platform. Providing the plugins in form of list - and redesigning the plugins themselves - might be desirable.

Without forcing a decision rather than another, these are further arguments that might be evaluated.

By the way, would it make sense to add an "ux" label to this report, in order to track all the questions that affects the user experience? It would be easier for us, and our users, to follow relevant (and less technical) discussions.

[NeoTheThird]

I see why this decision has been made, but i agree with Flo that the old layout was more usable on the phone. Imho it was faster to use, because the icons were bigger...

[Flohack74]

The nice icons! I like them :) - the other thing looks like a beginners item list in QML.... Honestly, I dont understand why now, in 2017, everything looks like its made 20 years ago. We got the CPU and GPU power to render stuff, and then Microsoft came with Windows 10 style, and others too. Everything is blocks of solid colors, no depth nothing :)

[NeoTheThird]

@Flohack74 is right! This is what we're lacking these days.

[PhoenixLandPirate]

@NeoTheThird I'll make a bug to integrate clippy into the Ubuntu OS.

[dobey]

@Flohack74 Depth is for people, not for rectangles on screens. Maybe everything doesn't need to be flat and grey, but we don't want to end up with all the crazy "3D" assistant style interfaces that PC OEMs were shipping on top of Win 3.1 and 95 in the 90s, like Microsoft Bob and such.

[Flohack74]

@dobey Nobody is talking about 3D. What I am saying is that there is a reason for using icons over text, and that is that you are able to recognize them faster in your brain (as a human being). So basically any textual list, especially when it is sorted alphabetically, will be slower to navigate, and will make it easier to overlook what you want, making the system settings very inefficient. I cannot understand why anyone these days wants to go back to a textual list.

I stilla gree with the design of those icons, the color gradient is maybe a bit too light, for a white background, but basically OK.

[NeoTheThird]

Yeah, no 3-d or anything, just not the boring list-view that is shipped with 16.04/devel at the moment. The old icon-view was a lot more user-friendly! I don't know if we need to have color (depending on if we have to have someone create new icons for it maybe not a good idea right now), but i really like the layout mockup @sverzegnassi posted. Convergence should not mean to make the UI worse on one platform to make it better on the other! Lists suck!

[Flohack74]

can we link the mockup to here? I lost track of that...

[NeoTheThird]

See stefanos comment from october 30th: https://wiki.ubuntu.com/SystemSettings

[sverzegnassi]

There's also https://www.behance.net/gallery/9167057/Ubuntu-System-Settings-Desktop-View which features both views (even if slightly ambiguous). I don't have an opinion of which is better, although lists seems more common than grids in this scenario.

My feeling thought is that we'd need to prioritize a11y issues (currently we have small labels with low contrast), rather than discussing about personal preferences. While that's surely legit, we need to strive for clarity and efficiency. Current categorization in system-settings is not the most effective for a list-based UI and might need re-organization.

[NeoTheThird]

Why don't we just go back to the icon-based layout from before and be done with it? That shouldn't be too difficult and it would fix the a11y issue for now. The layout that's used at the moment needs to be touched anyways, so we might as well apply the easiest fix available, and that should be going back to when it worked.

[sverzegnassi]

@NeoTheThird Both solutions require manpower and I wouldn't underestimate the necessary time for a backport of the old UI. I don't get why reverting to the grid layout should be considered a fix though.

Canonical UX team has decided to adopt the same layout used in all the major mobile platforms. What I see in 16.04 is rather an incomplete implementation of the new design. The lack of "depth", or boringness, could generically apply to all the UT apps (being a problem of the default theme).

[Flohack74]

I can live with a list as long as it has icons xD ... But be prepared to have to sell it to end users, they maybe don't like the move also. Habits, habits...

[dobey]

I would not go with that Behance design. It feels too much like Google Chrome.

Going back to the old design for the list shouldn't be too difficult. You don't need to redesign all the plug-ins too, with it.

[cibersheep]

I'm late to the party. Probably this is not an issue anymore? I think the list view is a better implementation and it can grow with less problems than the icon grid. Also, feels more ordered in the tablet, so I think it works better for desktop.

[hummlbach]

Ah I didn't know this bug exists, thanks for bringing it up again @cibersheep. I don't like the list at all. As @flohack said everything is a bit small and theres soooo much empty space and you have to scroll and scroll. For me its much harder to find what I'm looking for. Lets get rid of all the empty space, no matter if the list implementation is the easier one, imho the ux is worse and boring for such a long list.

[mariogrip]

The current system settings is built for convergence we should not remove that, we should improve the current design instead of revering back to a non convergence standard.

closing this as wont fix, since we wont go back to the old design.

[dobey]

The current system settings is built for convergence we should not remove that, we should improve the current design instead of revering back to a non convergence standard.

closing this as wont fix, since we wont go back to the old design.

Really, there's no reason we can't have both designs work, by having icon grid for smaller screens and list + side panel for larger ones. But honestly, the new design does not feel so great on windowed mode either (nor does the newer GNOME control center which is similar).

Or maybe, neither of these two options is the best way forward, and we need a new design for convergence. Just because the Canonical design team did something a certain way doesn't mean it is necessarily the best way. So, I don't think we should just dismiss the design concern outright, even if we don't end up with an icon grid as the result.

[hummlbach]

😭😢

[mariogrip]

Sorry about the little random close message, I was not really clear on why i closed it. The issue was about going back to the old design, aka a git revert, and that's what i answers on, since we cant waste all the work canonical did to make it convergence just because it does not look good. what i meant is that we can improve the current design as in we could make it look the same (or completely new), but based on the current convergence ideas/design. I'm all up for discussing new design improvements, but please make a forum post or new issue :)'

[Flohack74]

Yeah leave this closed, the thread is already too long. We can make a new one for enhancements of system settings @hummlbach

[mardy]

Just in case someone is not familiar with the old look, here's a couple of screenshots for comparison.

Current System Settings:

Old System Settings (restored with https://github.com/ubports/system-settings/pull/198):

Both screenshots taken from the same device. To me this is a no-brainer :-)

[cibersheep]

I would say: don't go back. Settings as a list are more clear to use and fits better with the over all system look

[UniversalSuperBox]

How does the new (what is old is new again) look work if the window is wide enough for 2 panes to show?

[mardy]

How does the new (what is old is new again) look work if the window is wide enough for 2 panes to show?

No changes in that case: the left pane transitions (with a simple opacity animation) to the current list of items.

[cibersheep]

So, What's the benefit of going back to the old design? What's the benefit of keeping the current one?

[UniversalSuperBox]

I think that's been well-discussed in this thread. Without A/B testing or being able to view people using the interface to analyze their performance... it's a matter of taste.

If we could evaluate this empirically, we'd want to know if people gain faster comprehension from the icons or the list, and if they are able to navigate the interface faster for their desired settings.

[mardy]

What's the benefit of going back to the old design? What's the benefit of keeping the current one?

As @UniversalSuperBox writes, it's mostly a matter of taste. And I guess, of getting accustomed to a certain UI. I can say that the reason why I've decided to spend my time on this issue is that even after trying to use the new interface for many months, I still couldn't force myself to like it. :-)

The big-icon interface is how the feature was designed by Canonical; the change to a list was never passed through the UI designers, and was a quick solution to port the System Settings to a two-column layout.

In my merge request I've implemented the "rollback" according to @dobey 's suggestion, that is: big icons for single-column view, list for two columns view. I've also recorded a video where you can see the change by yourself (though you can also try the packages from the MR and see how it works on your device): https://youtu.be/6Q5TYOyFVCs

Getting back to your questions, the advantages of the old (big-icons) design are:

• bigger finger area to press: user is less likely to press on the wrong item accidentally
• better use of real estate on devices where the 1-column layout is being used (phones), since more items fit into the screen
• big icons lead the user to find the desired item more quickly

If we have an unsolvable disagreement, I'd propose to run this through our community, and get them to vote.

[Flohack74]

I meanwhile accomodated to the new design, so contrary to what I said earlier, I would keep it now :)

[UniversalSuperBox]

There is something to be said about too much change too quickly in this release... For people who have joined on since OTA-4, this release is already going to be pretty jarring. Maybe we instead target it for OTA-13 to pace ourselves?

[cibersheep]

What's the benefit of keeping the current one?

• System Settings always look the same
• They don't look unordered
• They keep the look and feel of the whole system
• Better keyboard navigation

Tip: On the tablet in desktop mode you can tap with three fingers inside a window to show window handler ;)

[mardy]

* Better keyboard navigation

I think this is the only tangible benefit for the current design. I don't have a keyboard, so I couldn't test this on the big-icon layout. What is missing, there?

Tip: On the tablet in desktop mode you can tap with three fingers inside a window to show window handler ;)

Oh, now I love unity8 even more! :-)

[cibersheep]

You can press tab and navigate through list elements without using a mouse

[mardy]

You can press tab and navigate through list elements without using a mouse

Yes but I wrote that I don't have a keyboard :-)

[Danfro]

Oh, very nice!

I do admit I am a list-liker. On windows I always changed that back in system settings. But I do like this here and I can see some benefits from the icons layout:

1. does take up much less space on screen
2. with 1. requires less scrolling/swiping (no keyboard needed ;-) )
3. may load slightly quicker? (didn't measure, just feels like it)

A few things for even further improvement:

1. colors (@cibersheep that one is for you ;-) ) "header" (system, network, ...) and icons are grey, description text is black/white That looks a bit weird, because it does emphasise the description. I would suggest header black/white and description the same grey as the icon. Maybe the header even bold?

2. icon/description I think the margin between the two could be increased a bit. Icon and text look a bit cramped together.

3. divider In weather app's redesign I took out the dividers and I believe for good. May I suggest doing the same here? This could look like this:

4. reorder and drop content I do not understand why rotation lock needs to be here. We do have this in the indicator. I would drop this entirely. The other options could/should be integrated into the other categories. Info and reset go into system, flight mode goes into network. This could look like this:

[mardy]

Thanks @Danfro for your suggestions. I will address point 2 of your list in my branch, and also the first point, unless no one raises objections (I actually like the grey icons :-) ).

About the third point, I admit that the application looks just as good without all those separators, but I'd address it in a separate branch.

Same for the fourth point; though I don't agree with all of it :-) I agree that the rotation lock should be removed, but the flight mode makes sense as a separate item, as it affects wireless, cellular and bluetooth, and the user might not be sure under which item it is found. Given its importance, I'd keep it separate. Same for the About, Reset and Updates items, but I admit I don't have a strong reasoning for that, apart from a personal preference. :-)

[mardy]

OK, I've updated the branch to add some spacing between the icon and the text.

[Danfro]

That looks better with the bigger margin. :+1:

Looking at your last screenshot, I did miss the pending updates on my drafts. :thinking: That should stay separate at the very top, I think.

As for flight mode and rotation lock, well during my 4 years with UT, I did not one single time use those from system settings, because that takes far too long to load. Both are available from the indicators - and much much quicker to access there.

Flight mode is kept separate in my draft. I made it an icon under network. Same with Info and Reset. I did only move them, not drop them. Sorry, that was maybe not that obvious with all the icons. :smirk:

I think that will free even more space so most settings will fit on the first page. There should be almost no scrolling needed. But, that is just a suggestion anyway. It would be good so get some more opinions on that...

[rocket2nfinity]

I like this a lot better than the text menu. But, the top hat is ambiguous - It gives me no idea as to what function it is for. If it's the "about" function, why not just use the UT robot for that?

On Thu, Feb 6, 2020 at 9:40 AM, Alberto Mardegannotifications@github.com wrote:
OK, I've updated the branch to add some spacing between the icon and the text.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[Danfro]

The top hat is for libertine container management. All of those icons do have a description underneath, you don't have to guess.😉 That is just cut off in the screenshot.

"About" is called info and comes a bit further down (you can't scroll a screenshot though). See my mockup screenshots a bit further up.

On Fri, 7 Feb 2020 12:06:10 -0800, rocket2nfinity wrote:

I like this a lot better than the text menu. But, the top hat is ambiguous - It gives me no idea as to what function it is for. If it's the "about" function, why not just use the UT robot for that?

On Thu, Feb 6, 2020 at 9:40 AM, Alberto Mardegannotifications@github.com wrote:
OK, I've updated the branch to add some spacing between the icon and the text.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

--

[mateosalta]

How about keeping the page stack convergence of the new, but adding an icon in the top right to switch layouts, just for the first page

What does your branch look like when you have clicked on a setting, and you have enough space for two panels?

[mardy]

How about keeping the page stack convergence of the new, but adding an icon in the top right to switch layouts, just for the first page

I think that adding an option to switch the layout would be a big UX failure :-)

What does your branch look like when you have clicked on a setting, and you have enough space for two panels?

I'm not sure I understand the question: if you have enough space for two panels, the two panel layout will be shown immediately, without the need to click on anything. My branch does not change that. In case you missed it from a previous comment, you can see a demo video here: https://youtu.be/6Q5TYOyFVCs

[mateosalta]

(Oh I see, you used both layouts)

Can you fix the varying margin issue, Some of the categories have the icons centered instead of left aligned, the other problem with icons is it will reflow to where there are uneven rows - possibly a fix is making sure they move in groups somehow to avoid orphaned icons?

If there is no layout option, I believe I need to firmly support the list layout.

[mardy]

Can you fix the varying margin issue, Some of the categories have the icons centered instead of left aligned, the other problem with icons is it will reflow to where there are uneven rows - possibly a fix is making sure they move in groups somehow to avoid orphaned icons?

I restored the original look as it was in Canonical's image, but, if desired, I can work on optimizing the layout so that elements are spread across rows more evenly. However:

If there is no layout option, I believe I need to firmly support the list layout.

But if there was such an option, would you enable it? Because, I'm getting a bit frustrated by not understanding what people want: I spent a lot of my (very limited) free time to work on this, and now it turns out that even some of the people who complained about the change to the list layout, now do like it better than the original.

[mateosalta]

Yes, I do like the list better, and would keep it in list mode.

But I understand many people like the icon layout - I remember there being a similar thing going on in the windows 'control pannel' they still have two different layout options, after making a larger icon view.

[Danfro]

I would prefer the icon layout, because it takes up less space. So it is quicker to reach the lower settings like developer mode or updates.

But as usual, there are different viewpoints. ☺ Which is fine, because we are individuals.

In filecommander (as one example) you can choose between icon view and list view. Would it be very hard to implement that here too? Have two stages (or pages?), button as in filecommander. So everyone can have his favourite view.

On Sun, 1 Mar 2020 11:46:23 -0800, Alberto Mardegan wrote:

Can you fix the varying margin issue, Some of the categories have the icons centered instead of left aligned, the other problem with icons is it will reflow to where there are uneven rows - possibly a fix is making sure they move in groups somehow to avoid orphaned icons?

I restored the original look as it was in Canonical's image, but, if desired, I can work on optimizing the layout so that elements are spread across rows more evenly. However:

If there is no layout option, I believe I need to firmly support the list layout.

But if there was such an option, would you enable it? Because, I'm getting a bit frustrated by not understanding what people want: I spent a lot of my (very limited) free time to work on this, and now it turns out that even some of the people who complained about the change to the list layout, do like it better than the original.

--

[UniversalSuperBox]

I feel like we can discuss this to death, or we can do something with it.

The way I see it, most desktop operating systems are now using a grid of icons (Windows 10, macOS). Mobile ones use lists. We are aiming for a single design that seems consistent across all screen sizes and input methods.

Assuming Mardy does not do any further work, after OTA-12, I'll merge the PR to restore the grid. We will take the feedback from the room at that time.

I apologize for seeming insensitive, but I don't think an option to switch layouts will be terribly useful. I'm not sure about most of you, but I use my device every day and I use system-settings every week at most. It's not a terribly high-traffic app that I feel like most people will have strong feelings about. But that's why we try things out to see about the reaction.