Settings Design Idea

[Perseusdehond]

Hey there, in this redesign I wanted to take a look at the settings page. This because I don’t really like the design we have currently and there already has been a settings rework by ferferga (that won’t be implemented the way it is). That is why I wanted to create a design that addresses the comments made by MrTimscampi as he made imo some good criticism. So lets take a look.

What I liked about ferferga’s design:

• Quick access and switching between settings pages.

• The design of the menu as it differentiates the settings a normal user would use and the settings that administrators would use with one tab bottom left to open all those option most people don’t need to access all the time.

• Access to the home page and other pages. I also understood this would be a bit crowded because you’d have 2 navigation menu’s so that is why I just put a home button top left when you enter the settings. So you could go back immediately if you’re done editing the settings as the back button remembers the other menu’s.

I wanted to make a design that would fit on multiple kinds of displays and tried to do something different instead of the usual: just put everything underneath each other. Such a design isn’t wrong in any way but I wanted to explore something a little more different.

Why cards?

I went for a card like design. So what this entails is that settings content is grouped in a card for more visibility but also for more useful screen placement. By making the cards ‘phone-like’ or designed for phones it is easily used on the phone by placing the cards underneath each other. This card design would also prevent the use of very wide buttons or input spaces as the width of a card isn’t that wide. Then If you have a wider display like a tablet, laptop or ultrawide screen you can just display more cards next to each other. (For phones, you could disable the card display entirely or leave it in there, but the cards would fill the width of the screen but it would still separate the content in sections).

I could understand that not everyone would like such cards all next to each other so that is why I would make an option somewhere to set the maximum amount of cards next to each other. So e.g. setting this to 1 would make it look just like any other settings page in other apps.

Dashboard page:

So when you would go to the settings you would come at the dashboard tab (new). This would essentially show you some information JF web also does in a card-like display. But to not have the problem of only having the server info and logo to show I would like to see some statistics about the current user. This would be in a way like the Playback Reporting plugin but simplified as it is just a general overview of how much you use JF. So you can see a diagram that shows you how long you’ve watched something in a certain week or 7 day period and would highlight today. This would create a really nice looking diagram imo. Then I would also add some more statistics about the usage of the server like is shown in the bottom left. I think this would be cool and easy for users to look at their account and I certainly like having such stats shown visually.

Then the dashboard would also show the other cards like in JF web like the client and server version and easy access to scanning the library or restarting the server (if you have the permission). Then it could show some notifications and the currently playing devices which I would sort based on the user for visibility.
The content and placements of these cards could be different if other deem quick access to other content more important.

Playback page:

Then I also wanted to make an example page of how ‘real’ settings would look. Continuing with this card design I made three example groups of settings that could belong here. These are the video, audio and subtitle settings. This would separate them like I said and put some of the underneath each other or on a wider screen it could even show all three cards next to each other for fast access to these settings.

I didn’t want to use sliders that much as it would result in selectors, on/off switches and sliders and this would make it quite ugly to look at. Even though it sometimes gives you easier visual cues of what a setting is. Now I mostly used the selectors like used on an item page. These settings in the cards itself could be different too, but I mostly just took them straight out of JF web.
At last I added the help icons to explain a little more about a section and a reset button. This would easily reset that content group to their standard settings.

I think this was most of what I had to say about my design idea. So I made a different design that is used most of the time to look at other options and I think a card design would look really good and give you fast and easy access to settings while being scalable for many different devices.

I myself would like a revision of the settings page and this could be a direction we could go in. I hope you like it ;)