@schoenbaechler Couple things:

1. 
   
   
   I assume we need to keep the reading tab icon... just confirming..

2. Did we decide on a shorter label for 'Suggested Edits' tab ? :-)
   

3. No more Multilingual teaser task?

Is there a zeplin mock up for this... It is ok if we don't, I was able to guess most measurements ... and we can fix the styles during review.

Hey @Sharvaniharan, good questions!

1. I assume we need to keep the reading tab icon... just confirming..

I advocate for not having reading tabs available in Suggested edits, as it’s specifically about editing Wikipedia, not reading.

2. Did we decide on a shorter label for 'Suggested Edits' tab ?

We didn’t, latest discussion was happening in the V3 slide deck. Here’s my take on not shortening it to just “Edit":

Though edits through “Suggested edits” should be as valuable as other contributions, I’m still a bit hesitant to change its label to just “Edit”. It’s not ”fully featured” editing (yet) and that should be communicated to users. Also, I’m not a fan of having different labels in the tab vs app bar, as it’s just weak communication. It could lead to more confusion about the question of what’s a “real“ edit or not.

I could imagine that the label “Edit” works better in the tab bar if the feature’s name would be changed to “Edit suggestions”. Starting with the same terminology could help to orient and it could be established as a kind of a short form for ”Edit suggestions”. But this is probably not going to work in all other languages (already identified some issues in French).

TL;DR: Keep “Suggested edits” for now and try to make it work, maybe on two lines if needed. With Roboto 10sp it should work on 1 line for most languages. @Charlotte, how does that sound?

3. No more Multilingual teaser task?

Good catch, I’ll explore that by the end of the week and will post updates about it here.

@Sharvaniharan

Is there a zeplin mock up for this... It is ok if we don't, I was able to guess most measurements ... and we can fix the styles during review.

Yes, all designs for V3 are on Zeplin, even designs for the different themes and tablet views:

https://app.zeplin.io/project/57a120b91998d8977642a238/dashboard?seid=5d6fe67df555509eede8dbe9

In T231445#5506530, @schoenbaechler wrote:

Hey @Sharvaniharan, good questions!

1. I assume we need to keep the reading tab icon... just confirming..

I advocate for not having reading tabs available in Suggested edits, as it’s specifically about editing Wikipedia, not reading.

Agreed - in principle. But then is it clear enough to users how they then get back out of the SE feature?

2. Did we decide on a shorter label for 'Suggested Edits' tab ?

We didn’t, latest discussion was happening in the V3 slide deck. Here’s my take on not shortening it to just “Edit":

[...]
TL;DR: Keep “Suggested edits” for now and try to make it work, maybe on two lines if needed. With Roboto 10sp it should work on 1 line for most languages. @Charlotte, how does that sound?

I think it makes the best of a sub-optimal situation for now, so let's go with it, but I will try to think of something better.

I did think of just going with the word "Suggestions", and perhaps the user would get the idea of editing from the icon - but I think that is too much of a logical leap for users to make, so I would not recommend that.

3. No more Multilingual teaser task?

Good catch, I’ll explore that by the end of the week and will post updates about it here.

Of course I liked my own idea from our call earlier of having a greyed-out translate button that then led users into a set languages flow, but I look forward to seeing how much better a thing you can come up with. 😄

Hey @Sharvaniharan, thanks again for the good catch about the Multilingual teaser. Yes, we’re moving it in V3 and going with another, more integrated flow. Added a section to the task’s description that describes the new flow for teasing languages:

Single language set	Single language set after tapping “Translate”	Multiple languages set
Zeplin	Zeplin	Zeplin

• Language handling
  • Single language set --> “Translate” CTA is shown in color_group_28 and leads to language dropdown
  • Multiple languages set --> “Translate” CTA is shown in color_group_1 and leads to translate article description / image caption UI

Let me know if you have any questions! (CC: @Charlotte)

Thank you @schoenbaechler! Will do this.

Of course I liked my own idea from our call earlier of having a greyed-out translate button that then led users into a set languages flow, but I look forward to seeing how much better a thing you can come up with. 😄

No better idea needed @Charlotte! 👏 I love this “less but better” approach!

In T231445#5511837, @schoenbaechler wrote:

Of course I liked my own idea from our call earlier of having a greyed-out translate button that then led users into a set languages flow, but I look forward to seeing how much better a thing you can come up with. 😄

No better idea needed @Charlotte! 👏 I love this “less but better” approach!

😂 👏

@schoenbaechler thank you for all the clarifications above. One more :-)
I did not find a color group for the inner circle background for Edit quality stats icon:

Also while we are at it... need a few confirmations:
All text color is material_theme_secondary_color [color_group_30]?
The all-caps headings are material_theme_primary_color [color_group_40]?
Stats icons size is 32 x 32?
Task icon is 48 x 48 background circle, and image 24 x 24 ?

@Sharvaniharan

I did not find a color group for the inner circle background for Edit quality stats icon:

Yes exactly, it’s green90 (#d5fdf4) from the WMF’s style guide

All text color is material_theme_secondary_color [color_group_30]?

Yes, except for the onboarding text, task titles, profile stat titles and blocked screen copy, they’re using color_group_40.

The all-caps headings are material_theme_primary_color [color_group_40]?

Yes, exactly!

Stats icons size is 32 x 32?

Yup! On tablets 48 x 48

Task icon is 48 x 48 background circle, and image 24 x 24 ?

Task image icons are 20x20 on smartphone and 40x40 on tablets.

Thanks for checking back Sharvani!

@schoenbaechler thank you for the above clarifications. Couple more
1.is this tool tip text finalized?:
https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5d6fe67366c07d187b8ac732

2. Could I please get an image for 'Article descriptions' task icon? I couldn't find the same in the material design icons available on studio.

Hey @Sharvaniharan,

1. Is this tool tip text finalized? https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5d6fe67366c07d187b8ac732

Good point. I created a separate task (T233918) where all the copy is reviewed by Charlotte and Johan. I’ll keep you posted!

2. Could I please get an image for 'Article descriptions' task icon? I couldn't find the same in the material design icons available on studio.

I updated Zeplin with the SVG’s that were missing (also the onboarding header image).

Thank you @schoenbaechler

@schoenbaechler for completion sake can we add green90 to our palette and have a group.. even if it is just the same color for all themes?

2. The disabled states images are not rendering properly

Thank you :-)

Good morning @Sharvaniharan 👋

Illustrations for disabled state should work now. I also added color_group_41 with green90 to the theme guidelines page.

Let me know if you need anything else.

@schoenbaechler thank you for all the updated icons :-)

Couple more things:
1 color_group_41 still reflects old colors.. may be a caching problem?
2 For the icon illustration colors for edit quality on this task:
https://phabricator.wikimedia.org/T231449

The icon/illustration will adapt its colors (green, orange, red) and appearance based on quality value:
✅ Green: ≥ 60%
⚠️ Orange: ≥ 30%
⛔️ Red: < 30%

I thought unless it is green, we will not even be showing stats screen? They will be seeing either the paused https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5d7900fda92d66193a68f88c or disabled https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5d7900fde83ac45f044e3cd2 screen.

Hey @Sharvaniharan

1 color_group_41 still reflects old colors.. may be a caching problem?

It’s updated now! More of a MediaWiki n00b problem rather than caching 🤦‍♂️.

2 For the icon illustration colors for edit quality on this task: T231449

The icon/illustration will adapt its colors (green, orange, red) and appearance based on quality value:
✅ Green: ≥ 60%
⚠️ Orange: ≥ 30%
⛔️ Red: < 30%
I thought unless it is green, we will not even be showing stats screen? They will be seeing either the paused https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5d7900fda92d66193a68f88c or disabled https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5d7900fde83ac45f044e3cd2 screen.

Not quite, maybe the table below helps?

	Reverts
First 100 edits (absolute scale)	0	1	2	3	4	5	> 5 (paused)	6	≥ 7 (disabled)
After 100 edits (relative scale)	0%	≤ 1.0%	≤ 2.0%	≤ 3.0%	≤ 4.0%	≤ 5.0%	> 5% (paused)	≤ 7.0%	≥ 7% (disabled)
Label	Perfect	Excellent	Very good	Good	Okay	Sufficient	–	Poor	–
Screen

Let me know if it makes it more clear to you! 🤔

@schoenbaechler Everything should now match the designs precisely. Also, if you keep refreshing the screen (by swiping down), it will cycle through the different states of edit quality (perfect, excellent, good, etc), so you can see what they look like. At our next check-in, let's briefly discuss additional design considerations for tablets.

Hey @Dbrant, I had an initial look the feature on the phone. Whoa, haven’t expected it to be so advanced already. Really appreciated the links to switch different states!

I thought I’ll quickly jot down the things I noticed in the current version, see notes below. Hopefully I can review it in more detail by the end of the week.

Room for improvement

• Larger phones / landscape designs
  • I added a design for larger phone screens to Zeplin before my vacation and discussed it with Sharvani. The idea is to set a max width on the stats wrapper so the left and right column is not stretched entirely to the left and right
• Icons
  • Image caption and article description icons have been updated. Please also consider the 70% opacity of the icons (Zeplin).
  • Check icon in the edit quality is too thin, can we use the ones from the designs on Zeplin?
  • Use icon for “Poor” and “Bad” from designs on Zeplin
• Tasks
  • The whole task should be tappable (same as tapping the “Add” target)
  • Background (where the “paused, disabled ipblocked onboarding” links are displayed) should use the same background color as the task items
• Tooltips
  • Tapping anywhere on the screen besides the tooltip itself should close it. Do not auto close it after several seconds.
  • The interface/screen currently “jumps” when tapping the two bottom tooltips, can we avoid that? (position: absolute;)
  • Tooltip triangle seems to have a darker stroke than the border of the tooltip.
  • I will deliver tooltips designs for different themes,
• Tap targets
  • Show ripple effect when tapping an item in profile stats (as it would be a button)
  • Increase all tap target sizes to at least 48dp (Add/Translate CTA)
• Suggested edits label
  • Use sentence case: “Suggested edits” instead of “Suggested Edits”
• Tab bar label
  • Looks cramped currently, can we optimize it? Suggestions: Increase width, Move icons a tad to the top so we have more space at the bottom, Font-size: I’m using 10sp and width of 90dp in the designs

Image caption and article description icons have been updated. Please also consider the 70% opacity of the icons (Zeplin).

@schoenbaechler Where can I find the assets for these icons? I'm not seeing them in Zeplin.

@schoenbaechler A few more notes:

Tasks
Background (where the “paused, disabled ipblocked onboarding” links are displayed) should use the same background color as the task items

This seems to be inconsistent with other designs: in all other instances where we have a list of items, the background of the items is paper_color, and the background outside the list is window_color. Compare with the History list in the app (when there are just one or two history items).

Tooltips
Tapping anywhere on the screen besides the tooltip itself should close it. Do not auto close it after several seconds.
The interface/screen currently “jumps” when tapping the two bottom tooltips, can we avoid that? (position: absolute;)
Tooltip triangle seems to have a darker stroke than the border of the tooltip.
I will deliver tooltips designs for different themes,

If we need this level of richness and detail in our tooltips, we will need to shop around for a third-party tooltip library that we can import. None of this is standard behavior in the Android ecosystem, and implementing it ourselves will take a prohibitive amount of effort.
Weren't we originally going to use the standard Material tooltip (i.e. Toast) that simply pops up and disappears?

Tab bar label
Looks cramped currently, can we optimize it? Suggestions: Increase width, Move icons a tad to the top so we have more space at the bottom, Font-size: I’m using 10sp and width of 90dp in the designs

This is a standard system component, and cannot be customized beyond what we have already done.

In T231445#5619118, @Dbrant wrote:

If we need this level of richness and detail in our tooltips, we will need to shop around for a third-party tooltip library that we can import. None of this is standard behavior in the Android ecosystem, and implementing it ourselves will take a prohibitive amount of effort.
Weren't we originally going to use the standard Material tooltip (i.e. Toast) that simply pops up and disappears?

@schoenbaechler - Let's consider whether there's anything we really *need* that the Toast doesn't give us. What's the user need for creating a custom component or importing a library?

@Dbrant & @Charlotte

If we need this level of richness and detail in our tooltips, we will need to shop around for a third-party tooltip library that we can import. None of this is standard behavior in the Android ecosystem, and implementing it ourselves will take a prohibitive amount of effort.
Weren't we originally going to use the standard Material tooltip (i.e. Toast) that simply pops up and disappears?

@schoenbaechler - Let's consider whether there's anything we really *need* that the Toast doesn't give us. What's the user need for creating a custom component or importing a library?

Agreed and yes I also prefer the standard component for tooltips since it wouldn’t interfere with the rest of the interface.

@Dbrant

@ Where can I find the assets for these icons? I'm not seeing them in Zeplin.

Assets are now uploaded to Zeplin! Sorry for that...

@Dbrant

Tab bar label
Looks cramped currently, can we optimize it? Suggestions: Increase width, Move icons a tad to the top so we have more space at the bottom, Font-size: I’m using > 10sp and width of 90dp in the designs

This is a standard system component, and cannot be customized beyond what we have already done.

To recap, this is the current situation (font-size: 11sp)

I had a look at font-sizes in the tab bar for different Google apps (Drive, Maps, Photos, Play, YouTube, YouTube Music). Maps, YouTube and YouTube Music use a smaller font-size (10sp) as the one we’re using (11sp):

Maps	YouTube	YouTube Music (damn, Kanye is everywhere ;)

Their approach is bit different though as they are always showing the label. In theory, 10sp should also work in our case. I think we should try to make it possible , as it’s crucial for the initial presentation / communication of the feature:

If our current nav approach (showing the label only when it’s active) is the blocker/problem here and it would work perfectly fine with a basic nav, I suggest to go with a basic nav and 10sp:

CC @Charlotte

@schoenbaechler How does this look:

@Dbrant

• Treatment of the stats at the top on this wider phone is ideal
• Tab bar nav looks good, is it working in smaller viewports as well?
• Only the background (paper_color) left
• Haven’t seen the tooltips yet & “attention icon" yet ;)

Let's hope we're not shipping the Titanic @schoenbaechler ! 😃

Hey @Dbrant, I had a detailed look at it this morning (also on tablets). Everything we discussed so far is greatly optimized, thanks for that.

The remaining things are listed below.

01)

Use color_group_30 / material_theme_secondary_color for this.

02)

Tooltips, are inconsistent (see video above). Use the one with transparent white background color everywhere.

Different style on tablets as well (because of Samsung?):

03)

Apply color_group_53 as the background color for the circle (new color group on theme guidelines page)

04)
bold text

Reduce the bottom padding of the profile stats section (left) to around 3dp so the height is aligned with the onboarding screen. Currently, the interface "jumps" after edits have been made.

05)

Probably the case because the API’s aren’t ready yet? Last edited should output my last edited date not “Never".

06)

I like how you center aligned the text here, works better. Can you confirm that the left and right margin here is 16dp?

07)

Try to decrease this space on tablets, e.g. by moving the left column to the left and the right column to the right.

08)

Pencil icon looks huge on tablets. Apply the same technique as on smartphones. The icon itself should be 38dp within a 48dp wrapper to align it visually with the other icons.

09)

Scale tick on tablets (increase size), it’s currently too small.

10)

Slightly increase label font-size on tablets (by 1 or 2 sp), since there is enough space.

@schoenbaechler Thanks! Please see comments below.

01)
Use color_group_30 / material_theme_secondary_color for this.

✔ Done

02)

Tooltips, are inconsistent (see video above). Use the one with transparent white background color everywhere.

✔ Done

03)
Apply color_group_53 as the background color for the circle (new color group on theme guidelines page)

⚠ Done, but I don't see color_group_53 in the list. I had to reconstruct it from the Zeplin screens.

04)
Reduce the bottom padding of the profile stats section (left) to around 3dp so the height is aligned with the onboarding screen. Currently, the interface "jumps" after edits have been made.

❌ Not sure how to do this. The interface "jumps" because the amount of text changes from 2 lines to 3, and the onboarding graphic has a different height from the stat counters. In other languages the text will take up even more/less lines. I don't think we can avoid the interface jumping in such cases.

05)
Probably the case because the API’s aren’t ready yet? Last edited should output my last edited date not “Never".

✔ Correct.

06)
I like how you center aligned the text here, works better. Can you confirm that the left and right margin here is 16dp?
07)
Try to decrease this space on tablets, e.g. by moving the left column to the left and the right column to the right.

❌ This spacing is a function of the width of the display, and all the ways in which we're trying to align and constrain the stat counters. If we make a special case for a specific display width, it will throw off the appearance on other display widths.

08)
Pencil icon looks huge on tablets. Apply the same technique as on smartphones. The icon itself should be 38dp within a 48dp wrapper to align it visually with the other icons.

❌ In that case, we will need a new icon where the edit pencil is smaller than the canvas size. I would rather not create a special case in our code for one specific icon where we have to programmatically set its padding.

09)
Scale tick on tablets (increase size), it’s currently too small.

✔ Done

10)
Slightly increase label font-size on tablets (by 1 or 2 sp), since there is enough space.

✔ Done

Alright @Dbrant! Happy about the ✔ and agree with the ❌ because of your good rationales, then. Sounds like it’s QA signoff time soon.

03)
Apply color_group_53 as the background color for the circle (new color group on theme guidelines page)

⚠ Done, but I don't see color_group_53 in the list. I had to reconstruct it from the Zeplin screens.

Sorry, forgot to hit publish, it’s there now.

Thanks!

PS: Love the use of iconography ;)

@Dbrant, one more thing I just realized; implementation on tablets for the tasks deviates from the designs.

Design	vs	Implementation
Zeplin

Center alignment for the tasks has been chosen to make the UI cleaner (more white space).

@schoenbaechler

When the tablet is in landscape mode, the screen will look something like this:

You got a point there @Dbrant – haven’t thought about landscape too much. Let’s go with the current implementation to keep this simple and consistent then.

Looks good @Dbrant, one last thing – then we can move it to QA signoff. The background circle in the illustration is customized per theme in the designs:

Light	Sepia	Dark	Black
Zeplin	Zeplin	Zeplin	Zeplin

@schoenbaechler What is the color group name for that circle? (color_group_?)

@Dbrant as just discussed, here’s the new color group for the circle: color_group_54:

Added it to theme guidelines.

@schoenbaechler One question about the Black theme:
Currently the Toolbar color in our Black theme is base14, and this is the color that's also used as the background in the onboarding illustration.
However, this is different from the mock that we see in Zeplin, which has base10 as the toolbar color.

If we keep the toolbar color as base14, it will blend together with the circle in the illustration. Can we pick a different color for the circle (e.g. base18), or are we updating the toolbar color everywhere?

Great catch @Dbrant! Let’s go with base10 for the black theme. Updated Zeplin & theme guidelines accordingly.

color_group_54:

Looks good @Dbrant, impressed by the precise and beautiful implementation. Moving it to QA signoff.

Looks good to me on 2.7.50303-beta-2019-11-19