Maximize useful information above the fold in app detail pages

[ryanprior]

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":

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 Reconsider calls to action on app detail pages #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! We accept bounties via Bountysource.

[bradleytaunt]

After reading through @ryanprior's detailed write-up, I decided to play around with the concept of displaying more information "above the fold" on both desktop and mobile.

Below you can find some rough concepts of a possible redesigned app page for the Spice-Up elementary app. The page now shows the user:

• App Icon
• App Name
• App description (tagline)
• Author name
• Price
• Install / Download CTA
• Screenshot slider

Desktop

Mobile

This rough idea is more of a jumping-off point for others interested in tackling this issue.

[ryanprior]

Cool! Great visual continuity with the current design. Big ups @bradleytaunt for putting that concept together.