Detail pages for apps

[claell]

Reading #2533 I'd like to suggest the implementation of detail pages for apps.

Currently the approach of the apps page is to show everything on a single page with an expendable description.
This results in several problems:

• App icon is not displayed to be able to show a screenshot
• Screenshot size has to be small to fit the grid of apps
• The description is hard to read and it "crashes" the grid when expanded
• Additional links like the projects' site have to be inserted into the description
• Ratings are not possible from within the overview and comments are not shown

When looking at https://apps.nextcloud.com/ which has nice looking detail pages for every app I am wondering why this is not implemented in the server version of "apps".

Example would be a simple grid or a list like @eppfel suggested (#2533 (comment))
and a detail page like

However I also think that the detail page from the screenshot could be improved, but it would be an improvement to the current situation.

[eppfel]

I currently work on this. I already reworked the "Installed apps" into a list (will push today).

But for the "app store" apps I would first rework the overview grid with larger previews and links to the store detail pages.
Integrating the pages into nextcloud could be done in a later step. Although I don't think we need it. The overview is important to manage the apps, but for more information, I feel it is enough to direct to the store.

@nextcloud/appstore @nextcloud/designers ?

[eppfel]

BTW @claell your analysis of the problems is splendid 👍

[claell]

@eppfel Talking of the grid I'd personally prefer something like Wordpress uses for Plugins: https://wordpress.org/plugins/

I think it offers much information without using much space (there might be better approaches, but this is the direction I prefer, at least for a grid).

This is how it looks integrated into the interface then:

Details:

Also I'd prefer to have the detail pages integrated into Nextcloud, at least it would be useful to be able to install an app right from the details page.

[eppfel]

Thanks for the ideas.

I like the meta being in a separate bar. I think, because we have screenshots we will have to distribute the content more and I would limit it even to more essential info.

Also I'd prefer to have the detail pages integrated into Nextcloud, at least it would be useful to be able to install an app right from the details page.

I am not against it. Just low priority. Of course an install button from the details page would be nice.

[claell]

But for the "app store" apps I would first rework the overview grid with larger previews and links to the store detail pages.

With https://wordpress.org/plugins/ I also wanted to point out that large previews (I assume you mean screenshots) in the grid like on https://apps.nextcloud.com/ are not my preferred way to go.

Just compare

with

The big screenshots are consuming to much space in my opinion. Also I don't see a good reason to display a screenshot in a list of apps. I don't know another app store that does it in this way.

I think the screenshots should be displayed only on the details page, while for the grid the app icon should be used.

[BernhardPosselt]

As for Wordpress and different app stores:

• Wordpress plugins are mainly backend, so screenshots are not that important I think
• Mobile app stores don't have a lot of screen space so you cant really show screenshots that well, however once you hit a detail page, there are videos and screenshots all over the place

If you check http://www.apple.com/itunes/charts/free-apps/ and https://play.google.com/store/apps?hl=en it's mostly icons of different, very well known brands. I'm unsure if a typical Nextcloud developer invests that much time and effort into these things.

Since we dont really deal with mobile nor have a lot of designers but mostly developers I think it's very important to transport the basic idea what an app really does. The best way to do this is to use an image or small video/gif that shows the main selling points and interactions. So I think keeping the screenshot as thumbnail approach is a very important thing. However I'm completely open to any layout/design/coloring changes in that area :)

PS: the current app store was created in a few weeks and the API was the main priority so I personally think that the design and UX can be improved by a lot.

[BernhardPosselt]

TL;DR: IMHO the main reason the comparison looks so bad is that the current design sucks :D

[claell]

• Wordpress plugins are mainly backend, so screenshots are not that important I think
• Mobile app stores don't have a lot of screen space so you cant really show screenshots that well, however once you hit a detail page, there are videos and screenshots all over the place

The points are mostly true, although I think that almost every Wordpress plugin also has an UI for the admin, but this could be considered as backend.

I can't think of many stores which offer similar things (maybe the Windows Store or Ubuntu/Gnome Software, which both use app icons). Still I personally probably prefer icons.
But as you stated the icons might not be polished / distinct (especially since they are monochrome) enough.

Since we dont really deal with mobile nor have a lot of designers but mostly developers I think it's very important to transport the basic idea what an app really does.

This could also be achieved by the app name + short description.

The best way to do this is to use an image or small video/gif that shows the main selling points and interactions.

This is true, but I don't think that it is a good option for a grid. Screenshots can be very different and have much content in it. To transport the message the screenshot has to be rather big, but all that leads to a more confusing grid.

[BernhardPosselt]

Icon is probably even trickier for developers to create than a screenshot :)

Either way there needs to be a quick way to see what an app looks like without opening the detail page. One could even go so far as to embed the screenshot gallery or let people launch it from the app thumbnail.

[BernhardPosselt]

@jancborchardt what do you think? What's the pure minimum that needs be available when scanning through a list of apps?

[jancborchardt]

Most important is:

1. Name of the app
2. Icon and even better with a screenshot/image
3. If you have it installed or not

The rest (version, author, etc) is not essential.

Btw, an idea was to put the app details in the #app-sidebar (where the file details are shown in the Files app too) as talked about in #2138

[jancborchardt]

We need to drive forward a solution since for example we have the issue that the app description is not shown for local apps anymore #4827.

Hence I’m closing this in favor of the more specific Show app details in apps management via right sidebar #2138