Thanks for your feedback in the design review for revision history (Video | Figma) last week. I reviewed your feedback with the Android PM. The task’s description has been updated with items that are going to addressed! 🎯

@iamjessklein

• I know you are just joking, but seriously your design is not a “ripoff,” we are building a design system right now because it’s important for us to have consistency across components (+ ∞ CLM)
• Feedback for Barbara/Kieran - it would be good to see how the colors are used across the board for platforms doing rev. History

RS: Thanks Jess, from what I can see, there’s no immediate action for us in the points you raised, more for Kieran and Barbara.

@aminalhazwani

• From/To could be a row layout instead of a column layout to potentially display more text or we could save a line of text by removing the labels “From/To” and use a visual to represent direction, for example instead of a vertical separator a separator that resemble the “>”, I think there is a similar component in section translation too.
• Wondering if the chart needs scales :)

RS: We are going to stay consistent with the iOS designs here.

• Card layout vs row layout, we could increase the information density if we opt for the latter. The overall layout is quite airy while I assume that someone who looks at revision comparison needs to see “many” things at once.

RS: We are reusing a list pattern that has been established in several areas of the app already and keep it consistent

@cmadeo

• Really like the accessibility updates that you made!
• Cleaning up the comparison view looks great too!
• One note around the orange border – the goal was to connect the changes to the later revision (eg. who made the changes)

RS: Thanks Carolyn, we’re looking into keeping this notion of connecting changes to the later revision. Haven’t noticed at first, this is excellent.

@Pginer-WMF

• Great improvement. I think it is a good sign that what is well resolved in a platform can be transfer to others.
• Selecting more than two revisions shows a toast message to communicate it is not possible. I wonder if this could be communicated by the way the selectors work. For example, tapping on a third one could update the previous selection or the closest one (thinking along the lines of adjusting a range, like when selecting text)

RS: I like this idea and discussed it with the PM. We see value in keeping it consistent with iOS for V1 but we will add this idea to a V2 container task → T300015.

• Idea for future: To make diffs more understandable I wonder if it is possible to provide a kind of “instant preview” that allow to visually understand a change. (+1 AV)

RS: This would be the next step and a great direction. Will be added to a V2 container task → T300015.

@bmartinezcalvo

• Some colors are not contrasted enough so they are not accessible.
  • Green color is too light. Also, when green is on yellow box is even less contrasted.
  • Yellow is not contrasted enough when you use it as text.
    • RH: +1 - think this is also when Yellow30 is on Yellow90 instead of white, perhaps something to consider for future Codex colour palette improvements?
• What is the difference between using blue or yellow colors in boxes? There are too many colors in the same screen (green, blue, yellow). If we use too mant colors may be we should explain for what is each color to avoid the user getting lost. May be we need tags that say NEW or OLD. +1 (KM – I had the same question over the need for the blue/yellow colour difference)
  • PG: If I recall correctly, historically diffs were using red for deletion and green for additions, and the community updated that to orange/yellow and blue instead due to concerts about color blindness.

RS: Thanks Barbara, will look into your points and ping you here or Figma with updates.

@aishwaryavardhana

• I didn’t get to see the history/progress of this, but I really like what I see!
• When the mode changes from view mode to ‘compare mode’, what if the background changed to a light gray, to further reinforce the mode has changed?

RS: Thanks Aishwarya — due to your second comment: we’re going to put an explicit focus on the interface shift when tapping the 'Compare' button when implementing the concept:

@RHo

• Large title text - how does this truncate or wrap?

RS: Will create a screen for that!

• Vertical alignment consistency - should the icon/button always be vertically centered or top with sibling text elements? For example the Revision History + Title text and the “Watching” label, selected revision radio and time text.

RS: Will review and either decide for a consistent top or vertical center alignment. Is there are preference from your end?

• Is the spark chart meant to be interactive? If not then wonder if it needs to take up so much room. Also wondering if it is meant to showing rev changes bar rather than line chart? Could be a cool change in future to enable tapping to enable interactive Revision slider view (also consistent with web)

RS: It’s not meant to be interactive in V1, but I’ll add it to the V2 container ticket. Re: space/room -> it’s not yet sure if we can do the chart but will opt for making it a tad more compact. Will also look into bar vs. line chart.

• Change the orange of the check icon to same Yellow30

RS: That makes sense, will adapt the designs!

@Sneha

• Love the search and sticky header with filters
• It would be worthwhile to re-evaluate what we put on the screen and in what format, where we want to draw the user's eyes to. The designs are already very clean, now it’s just a matter of trying to further push it by redesigning certain elements and how much visual importance it get to further reduce visual elements on the screen.
• Noticed that anon edit means anonymous edit. Is it a commonly used short version? I wouldn’t have known if not mentioned in the meeting.

RS: Good point re: “anon” label Sneha, I’ll look into it.

@KieranMcCann

• Small design system point: Does the bright yellow highlight colour need to be added to the design system? Or is that OS native?

RS:

Are you referring to the highlight color used here? 👇

If yes, good point, Kieran. We’re using the color for highlights in “find in article” and search (notifications, talk pages, revision history). It’s using #FFFF00 from the Android theme guidelines. @cmadeo → what color are you using to highlight text on iOS, e.g. 'for find in page' in the article?

@schoenbaechler I inherited this color from Nirzar I think! #FFCC33 at Opacity 51

Update: Incorporated feedback and left comments in the Figma file:

https://www.figma.com/file/XuMaiGvAgrJKvsm2esbm75/Edit-history-T297759?node-id=1%3A6

Likely going to take this to design review one more time once a it’s been implemented. Thanks all!