elementary / elementary/appcenter-web

Maximize useful information above the fold in app detail pages

Open
#44 2 comments 0 reactions 0 assignees View on GitHub
Needs Design Priority: Wishlist Status: Confirmed
Dominant language
HTML
Stars
46
Forks
11
PR merge metrics
No merged PRs in 30d

Description

Here's the top of an app detail page. On many wide screens this is about all you'll see without scrolling, "above the fold":

>![top region](https://user-images.githubusercontent.com/4389854/61102224-a0868000-a432-11e9-90ea-5e3e3604017a.png)

To list, in order of most-visually-prominent to least:
1) a (part of a) screenshot of the app
2) a call to action asking me to install Elementary OS (see #43 for my separate criticism of this CTA)
3) the application's name, author, and icon

Everybody's probably got their own wishlist of what they think the most important information is when they're visiting an app detail page, but the bottom line is that the current page doesn't give you much info at all above the fold, and the visual hierarchy of that info isn't very helpful either.

As an example, here's my own personal wishlist of what I want to know most when I visit an app detail page, roughly in order of most important to least:

1. what is this app called?
2. who is the author of the app?
3. what does the app do?
4. is it compatible with my computer?
5. what does it look like?
6. what does it cost?

I don't think it would be unreasonable to put all these things above the fold. For this particular app, the answers are all short and punchy:

1. Spice-Up
2. Felipe Escoto
3. presentation slide editor
4. yes (I'm on Elementary Juno)
5. screenshot
6. it's free

Of those six things, only two are definitively answered, while two more have half-answers (a partial screenshot and whatever I can infer from that about the intended use of the app.)

A little table with that data could fit comfortably within a single screen, even on mobile. For comparison, an app detail page in the Android Play Store contains this info above the fold, without looking cramped:

* Large, visually prominent app icon and title
* Author
* App description or category
* "Install" CTA
* Whether or not the application contains ads or accepts micropayments
* The star rating (don't introduce star ratings imo! but that's a different discussion)
* How many downloads
* Intended audience (everyone/mature/etc)
* As many as 4 entire non-truncated screenshots

I'm certainly not suggesting we should copy or take cues from Google's play store design- the context is totally different, the audience is different, etc. But the comparison shows it's possible to put enough information on the first screen you see of an application's detail page that you can assess what's on offer without excessive visual clutter.

---
Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/76835990-maximize-useful-information-above-the-fold-in-app-detail-pages?utm_campaign=plugin&utm_content=tracker%2F40703315&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F40703315&utm_medium=issues&utm_source=github).

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.