Apps Redesign: Discovery

[dszidi]

Apps Redesign

The next part of the UI we're tackling is the apps section in SCALE. We'll be breaking this into three separate discussion topics.

1. Discovery
2. Installation Form
3. Installed Apps

Navigation

The first departure from the current design is to not try and do everything on the same page. Instead of the current "tabs on a single page" approach, we're going to break things up into separate pages. Clicking the Apps item in the main navigation will produce a sub menu with navigation to our various pages.

Discovery

As both official and community driven catalogs have grown at a rapid pace, we felt we needed to level up the discovery process.
The first page "Apps Available" is the place users can visit to find the apps they're interested in. On this page we will provide a small sample of apps that are organized into the following sections.

• Recommended
• New & Updated
• Catalog Categories

Sections

Recommended

This section will filter for apps from iXsystems and/or it's partners

New & Updated

This section will filter for apps that are either new to the catalogs or have recently been updated

Catalog Categories

The rest of the sections will filter for apps in a particular category. Categories are determined by the catalog maintainers.

Each section will show a small sample of apps from that section and will also provide a link to a full page with just that filter applied

Search Filters & Inventory

Search

Under the page header, you can see two areas; search and inventory. The search area contains an input field and an expandable section that will expose additional filters.

Inventory

The inventory area contains some relevant stats and links to other areas where users can manage the settings that affect the data shown.

Global Items

In the page header, users will find buttons for Custom App and Settings.
The "Custom App" button is effectively the same as the current "Launch Docker Image"
and the "Settings" button will take the user to a page where users can manage things like Kubernetes settings and the pool that the apps use. (There is no mockup for the page currently)

App Cards

The apps will still be represented by cards, but the content has been improved. The card will present to the user at a glance

• name
• version
• catalog
• train
• updated date
• installed status
• short description

The entire card will be clickable. Clicking the card will take the user to a full page view with more information about the app.

App Page

Once the user has clicked on an app card, they will be taken to a full page view of that application's relevant information.
This page will expand on what the app card provides. Additional information will include the following:

• longer description
• screenshots
• system resources
• appinfo
• helm chart info
• similar apps
• install button

Summary

To summarize, these new designs represent the following changes to the Apps UI

• The apps section is no longer a single page
• Apps Available page allows for a better browsing experience
• Search and filters make it easier for users to find what they are looking for
• Better App Cards with immediately visible description
• Dedicated App pages with more information and screenshots

Please feel free to leave feedback in this discussion thread.
Stay tuned for discussions thread about Installation and managing installed apps.

[MaverickD650]

Looks amazing, great work, it's a massive improvement on the current offering. Looking forward to seeing what comes next.

[geodose]

Any chance for a "restart" button on the App Cards?

[dszidi]

These cards will only be used for browsing apps you want to install. Managing installed apps will be via a separate page. That page will not use apps cards and will instead have a layout similar to the datasets page (Table + details cards). I'll have a discussion thread with mockups for that posted early next week after the holidays.

[geodose]

Looking forward to all of the above!

[dszidi]

FYI, the other designs have been posted. Links are at the top of this thread

[Testpoint96]

The App Page is fantastic. Looking forward to this.

[theneofusion]

Which page do you land on when clicking "Apps" on the left side menu?

[undsoft]

You'll get to Installed Apps page.

[dszidi]

After some discussion, we've decided to revert to our original plan of having a submenu. I've updated the original post with information about navigation

[theneofusion]

Thanks for the follow-up reply.

When I first read this preview I was concerned that you might make the App Discovery section the landing page.
That would have become annoying quickly.

While the usage of a submenu means that it will take two clicks to get anywhere, it's an alright compromise since the clicks are in close proximity.

[Emalton]

Looks great! Well done! Perhaps a potential enhancement could be to allow filtering by train? I think that would be useful.

[Tuckie]

I love the look of the new pages! Install on the same page as the description is great!

From a navigation standpoint: Personally, I really prefer the one click menu to installed apps. Exploring new apps is not something I do frequently.

Truthfully, I'm not really satisfied with the sub-menu design in general. I don't like how it wastes a lot of space on the bottom half of the screen while simultaneously covering up the active page. Perhaps an inline dropdown rather than a pop-over?

[w01230]

Looks awesome, but seems all the new re-designs include "storage" and "dataset" and button both not include radius(round rectangle).
Maybe the it is better to use the same style for all the truenas scale webui specially for the radius.

[indivisionjoe]

I think that the Available page layout and install pages are great. But, the top level navigation is confusing.

It looks like we will need to use the side navigation to bring up the 4 page options? (Available, Catalogs, etc.)
Or, are those pages later available under different names/buttons? ("Manage Catalogs" really just goes to the Catalogs page, etc.)

Either way, it's not good to have to change sections via a sub-menu of the side nav. And it's not good UX semantics to use one name for a page in one menu and then leave the only way to get there in the future via an activity link (ie. "Manage xyz").

I don't believe that the total counts in the upper right are necessary. Instead, I would replace that with a simple navigation bar and remove the sub-menu coming out of the side nav. (Essentially closer to the top-nav we already have).

Also, unless some kind of performance improvement is in the works, I would not make the Available section the default "page 1" of this section. That page currently loads very slow and would be annoying to have to get through that first in order to reach other pages. I think Installed apps is the better choice for page 1 of the section.

[indivisionjoe]

PS: There is a design inconsistency between the install page and the other pages.

In the install page, the left and right content margins are consistent all the way down.

In the other pages, various elements adhere to a staggered grid.

I believe that the margin rules for elements and content between pages should be consistent.

[ray73864]

Personally I dislike the idea of 'Recommended'.

It's an extremely subjective thing and will end up showing crap that not everyone is going to want.

If it must be there, then have it be based on usage type, eg: Streaming Server, Collaboration Server, etc...

[ghost]

I like it, and it's something I've been wishing for. It'll be great for new users too I think. Making it customizable/toggleable is probably the better idea.

[gravelfreeman]

1. Don't bloat the app page with crap like recommended apps or anything that feels like I don't have control over my server.
2. Implement list view with ability to sort by columns. By the way this isn't just for apps, It's a missing feature everywhere in the OS. Why can't I sort my shares in alphabetical order? This is basic UI functions that should be added asap.
3. Add custom tags, categories or both. I have over 30 apps and counting. It became a complete mess to find my apps and work in this page. Every good app has this. Basically the user can assign tags and categories to their apps and chose at the top of the page if they want to sort with default, filter or category. Steam, qbittorrent and much more apps has this and it's very convenient.
4. Set custom app icons. When creating a custom app they all share the same icon which is inconvenient since it makes it hard to distinguish one app from another.