Visuals
👉 Zeplin
👉 Prototype
Design principles / general
- Avoid cards in cards
- Separate content from features
- Eliminate redundancy (e.g. repetition of dates)
- Experiment with this: Keep dates sticky (e.g. On this day) when scrolling to provide orientation (titles) and avoid repetition (dates
- Use alternation in presentation of content, after bigger elements show smaller ones
- Less icons (e.g. for sections like In the news)
- Apply pinch to zoom gesture whenever possible
- As little truncation as possible (for text and horizontal content)
- Allow for more easy scanning (more visuals, better teasers)
- Remember the user‘s scroll position when possible, e.g. when
- ...revisiting the feed at a later point in time
- ...transitioning to a detail screen
- Reduce amount of font styles, bases on overhauled baseline grid (4sp) and typographical system
- font-size: 14sp;
- line-height: 21sp (Featured/random article)
- font-size: 16sp;
- line-height: 24sp (Picture of the day, Because you read, In the news, On this day, Recent deaths)
- line-height: 28sp; (Featured/random article)
- font-size: 20sp;
- line-height: 24sp; (Subtitles)
- line-height: 28sp; (Longer text in bold)
- font-size: 24sp;
- line-height: 32sp; (Titles)
- Exception: Droid Serif (Article titles)
- font-size: 14sp;
- Show language indicator in cards only when multiple languages are set in the app
- Show Edit card languages in cards only when multiple languages are set in the app
Featured article
- Output the first sentence completely
- Image format → 2:1
Top read
- Formerly trending → rename to “Top read”
- Rank uses a transparent fill and gradient on border
- Brainstorming: is there a source we can use to indicate why it’s trending (instead of showing the article description) ?
Picture of the day
- Image format → keep original image format from Commons
- Tapping the image leads to the new image detail page
Because you read
- Lead item uses blurred/upscaled version of thumbnail image and applies it as a background color with a white overlay to make text legible
In the news
- Prioritize articles with images for first item
- Horizontal swipe allows users to check out other items
- New interface element: dots to indicate to users that there’s more content
- Image format → 2:1
On this day
- New design
- Card teases one article from the featured on this day event
- When tapping the year (1988), users should be scrolled to the corresponding event on the detail page
- Image format → 2:1
Random article
- Uses the same design as “Featured article
Today on Wikipedia
- Item can be removed, a Today on Wikipedia → link has been below Featured article
Suggested edits
- Outputs 3 suggestions per day (1 per edit type)
- Article description image format → 2:1
- File image format → keep original image format from Commons
Todos / Feedback processing
- Move “More X (...)” → arrow to the right side? (Matthew)
- 👍 Moved it to the right side. Feels more natural.
- Perhaps it might be helpful to make the header (card header) sticky in some way? As the cards can be quite long right now? Carolyn
- 👍 Added this the conceptual descriptions, we’re going to experiment with it.
- Redesign without obfuscate thumbnails for Top read and Recent deaths (Carolyn, Matthew, Alex, Prateek)
- Dates not bold to add more contrast? (Matthew)
- 👎 To keep it consistent with other areas of the app, we’ll use bold. Contrast is provided through different type sizing: 16sp for the date and 24sp for the titles
- Consider a card group for “Top read”, “Because you read” and “Recent deaths” (Alex)
- 👍 Great idea → applied it in the latest designs.
- Make the feed more visual, like the iOS app store feed (Alex)
- 👍 Tweaked this here and there (Top read, On this day). But the “bread and butter” of Wikipedia is text, so I’d say the recipe is a mix of both.
- Square icons for language? Are they understood? (Prateek)
- 👍 This feedback will be considered at a later stage as this affects many other areas of the app.
- Consider not showing the article description in cards on Explore, as they’re redundant in most of the cases (Alex)
- 👎 You definitely have a point here, but since we want to raise awareness for article description editing in the feed as well (Suggested edits), we should keep them so users learn that they exist.
- Infinite scrolling or should we think about “an end” of the feed. E.g. a pattern from newspaper articles → after scrolling to the end the next article is teased (Alex)
- 👍 We’re going to consider adding sticky dates so users will know when they’re scrolling content from another date. In regards to the “scroll lock” (end of feed):
- I mentioned this to Android team yesterday and the tone is that users should have choice when to scroll further and wenn to stop.
- From an engineering standpoint, this is also quite a hack on Android.
- 👍 We’re going to consider adding sticky dates so users will know when they’re scrolling content from another date. In regards to the “scroll lock” (end of feed):
- Apple Photos uses large elements in the beginning and then gradually reduces the sizes of the elements the more users scroll. At the end, there’s just a list.
- 👎 We’re going to stick with the current concept of alternation, mainly because this is a visual design refresh rather than a functional one.
- On this day:
- Perhaps the article cards could just be shown on click through? (Carolyn)
- 👍 This makes sense, rather than allowing users to scroll vertically, we’re going to only tease one card w/o the possibility to scroll. Check out the latest designs.
- Carousel dots also look a little confusing to me in relationship to the date dots on this card, maybe differentiating color here could help? (Carolyn)
- 👍 Possibility to scroll horizontally in “On this day” has been removed.
- Curious how the transitions might help to make the transition from the article card to the article view nice a seamless? (Carolyn)
- 👍 Transitions will be explored during development. Currently there’s lots of room for improvement in “On this day“.
- Perhaps the article cards could just be shown on click through? (Carolyn)
- Rename to “Trending” to “Top read”, according to discussion with Carolyn
- Process Sudhanshu’s feedback
- Tablet designs (Cooltey)
- Created a separate task for it → T261878
- How are we displaying content when multiple languages are set? (@Charlotte)
- In the same manner we do it currently.
- Fill in analytics questions, usage before and after (@Charlotte @schoenbaechler)