Bug 385973 - Top 1/4 of app window is wasted space on Home, Browse, and Search Results screens
Summary: Top 1/4 of app window is wasted space on Home, Browse, and Search Results scr...
Alias: None
Product: Discover
Classification: Applications
Component: discover (show other bugs)
Version: 5.11.1
Platform: Neon Linux
: NOR normal
Target Milestone: ---
Assignee: Aleix Pol
Keywords: usability
: 389798 (view as bug list)
Depends on:
Reported: 2017-10-20 03:02 UTC by Nate Graham
Modified: 2018-02-15 00:10 UTC (History)
8 users (show)

See Also:
Latest Commit:
Version Fixed In:

Current design with wasted of space (366.86 KB, image/png)
2017-10-20 03:02 UTC, Nate Graham
Mockup of proposed new design (111.75 KB, image/png)
2017-10-20 03:02 UTC, Nate Graham
Apple App store main page (3.10 MB, image/png)
2017-10-27 21:55 UTC, Nate Graham
Apple Mac app store Top Charts page (765.78 KB, image/png)
2017-10-27 21:56 UTC, Nate Graham
Apple Mac app store Categories page (913.41 KB, image/png)
2017-10-27 22:01 UTC, Nate Graham
Discover Overview page with two column (746.80 KB, image/png)
2018-01-09 10:41 UTC, andreas

Note You need to log in before you can comment on or make changes to this bug.
Description Nate Graham 2017-10-20 03:02:19 UTC
Created attachment 108466 [details]
Current design with wasted of space

The top one quarter of Discover's main window is a huge header that seems to serve no real purpose, and mostly contains stock photography.

We could easily save all of that space by replacing it with a permanently-visible toolbar that holds a search field on the left, with the right side having a header or else app-specific widgets (like what we have now).

Mockup attached.
Comment 1 Nate Graham 2017-10-20 03:02:47 UTC
Created attachment 108467 [details]
Mockup of proposed new design
Comment 2 fire f. 2017-10-20 06:16:36 UTC
True! Discovery wastes enormous amounts of screen space and has very slow feedback about what the program is doing or whether it has crashed again.
Comment 3 fire f. 2017-10-20 06:26:12 UTC
Comment on attachment 108467 [details]
Mockup of proposed new design

This still is a terrible waste of screen space?

Why is that? It is indicative of very low software quality.
Comment 4 Nate Graham 2017-10-20 12:59:52 UTC
Fire F, this is a volunteer community making software for free. We always accept constructive criticism and patches that improve things, but please try to simply insulting people's work. It can be discouraging.
Comment 5 Nate Graham 2017-10-20 15:14:58 UTC
Heh, *please try to AVOID simply insulting people's work. :)
Comment 6 Diego Gangl 2017-10-23 17:17:38 UTC
+1 The image and the large search header don't add anything relevant and could be removed. Also, the large space around the search box is incosistent with the small search box in system settings.

The only thing I'd change in your mockup is aligning the title "Home" to the left, and making it a breadcrumb when entering a subcategory. Font size might have to adjusted for deep subcategories though.
Comment 7 Nate Graham 2017-10-27 21:55:32 UTC
Created attachment 108595 [details]
Apple App store main page
Comment 8 Nate Graham 2017-10-27 21:56:28 UTC
Created attachment 108596 [details]
Apple Mac app store Top Charts page
Comment 9 Nate Graham 2017-10-27 22:01:19 UTC
Created attachment 108597 [details]
Apple Mac app store Categories page

The usefulness of the banners came up in the Telegram room recently, so I wanted to attach some screenshots from the Mac app store as that was brought up as an example.

In fact there is only a banner on the main page, and 90% of it is just an ad for Apple's own software! None of the other pages have banners; they just have just lists of apps. GNOME Software is similar, with a banner only on the main page. And Linux Mint's mintinstall app store, which targets the same user group, doesn't have banners at all. Discover is the only major App Store type program I know of that maintains banners on the category page.
Comment 10 andreas 2018-01-09 10:41:46 UTC
Created attachment 109752 [details]
Discover Overview page with two column

In general I suggest to don't change any style decission from the existing style cause it's clean, clear and well discussed.

you can use discover on small laptop screens quite good but on desktop 24'' screens it wouldn't be bad to use the page size better. So my suggestion is that the ui switch from 1 to 2 (3) columns depanding on the window wide. The minimum wide I would choose the wide when you have the default discover window size.
Comment 11 riaasm 2018-02-11 10:03:09 UTC
I agree that the top header seems unnecessary, considering its size. However, it does collapse to a more reasonable size once you start scrolling down (which can be seen in the screenshots from andreas). This seems pretty much the same size as in the mockup of the proposed new design. 

It seems to me that the problem here is caused by the initial size of the header. But this is only considered a problem because the header seems to serve no purpose that requires this large size. For identifying the category, the smaller header (as shown when scrolling down) might suffice. 

So a solution here might be to make this large header more useful. I am not a UX designer but from what I understand these headers/banners are usually considered useful for promoting content, as it's the first thing that users see. In this case, we could promote the content of the category being visited.

My main point is that we could consider making this header more useful, given how visible it is to each user, instead of removing or resizing it.
Comment 12 Nate Graham 2018-02-13 00:05:19 UTC
*** Bug 389798 has been marked as a duplicate of this bug. ***
Comment 13 Nate Graham 2018-02-13 16:44:07 UTC
We are proceeding with this work! It involves adopting the upstream Kirigami toolbar header, which is more compact and looks more appropriate on the desktop in particular. As a part of this work, we are submitting patches and changing the Kirigami toolbar header to better suit users' and developers' needs. Because that is a large effort, we are now tracking this work in https://phabricator.kde.org/T7958
Comment 14 Aleix Pol 2018-02-15 00:10:52 UTC
Git commit d435e886d56d1c95ce4b3ac0b0f0a153f94ae021 by Aleix Pol.
Committed on 15/02/2018 at 00:10.
Pushed by apol into branch 'master'.

Use Kirgami.ToolBarApplicationHeader instead of the view headers

Use the standard Kirigami component as header for Discover. Will need
some polishing on the kirigami component but will pay off in the long
Supports {T7958}

Reviewers: ngraham

Subscribers: plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D10471

M  +13   -50   discover/qml/ApplicationPage.qml
M  +1    -8    discover/qml/ApplicationsListPage.qml
M  +0    -5    discover/qml/BrowsingPage.qml
M  +7    -2    discover/qml/DiscoverWindow.qml
M  +1    -1    discover/qml/InstallApplicationButton.qml
M  +0    -9    discover/qml/InstalledPage.qml
C  +15   -28   discover/qml/KirigamiActionBridge.qml [from: discover/qml/SearchPage.qml - 067% similarity]
M  +4    -1    discover/qml/SearchPage.qml
M  +6    -33   discover/qml/SourcesPage.qml
M  +1    -0    discover/resources.qrc