Page MenuHomePhabricator

Unified iOS and Android article footer design
Open, NormalPublic2 Story Points

Description

Why are we doing this?

For mobile-html, it would be ideal to have a single article footer design for use across both platforms. This ticket encompasses the design work of unifying these designs if possible into one design to use with mobile-html.

NOTE: for Android this just involves adding Read More to TOC
Current iOSCurrent Android

Proposed designs

Assets for icons are available in Zeplin

Design details

  • View on map is not shown on iOS
  • Add Read More section to TOC

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 19 2019, 11:37 AM

Hey @JoeWalsh, thanks for pinging this. Added it as a discussion point to @cmadeo’s and my agenda next Tuesday. Please expect a response/proposal by the end of next week.

@schoenbaechler @cmadeo sounds good! I should also clarify, this doesn't necessarily have to stay within the article content area, it could live somewhere else as a native panel on both platforms if you'd prefer. If it stays in the article content area, native views are problematic so should be avoided, an implementation in the content area should be HTML/CSS. This PR has an image and a gif of the initial rough draft footer implementation utilizing a modified version of the existing iOS app HTML/CSS approach. Mobile-html pages are available using the existing endpoint if it'd be helpful to mock up in situ.

Charlotte raised the priority of this task from Normal to High.Jul 8 2019, 10:30 PM

Hey all! Quick update that I worked on some visual suggestions that we can discuss in our 1:1 tomorrow @JoeWalsh & @cmadeo:

@cmadeo in case you want to experiment here are all the design files:

https://www.dropbox.com/sh/s7nmg7vz9suhp3u/AADHn7jprKA6ApxzNYCWZIrxa?dl=0

Have fun!

Hi @schoenbaechler, thanks for these mocks!
I've been thinking about potentially trying to remove the 'About this article' section, here is a little diagram I've been working with.

schoenbaechler added a subscriber: Dbrant.EditedJul 23 2019, 12:49 PM

Thanks @cmadeo, looks good at first sight! Just as a general note; I assume that 02) 03) 04) and 05) result in a decent amount of design/dev work, at least on Android. Mainly because the proposed solutions are not existing yet. Shouldn’t be a blocker though, just so we’re aware. Additional comments below.

01) Available in 8 other languages: Available in toolbar, can be removed

Agreed 👍

02) View on map: Available in Share menu, can be removed

It’s not displayed on Android currently. Do we have influence on what’s displayed in the share menu @Dbrant? This is about adding a “View on (Google) Maps” shortcut.

03) View edit history: Consider moving up page in a tabbed format

04) View talk page: Consider moving up page in a tabbed format

I’m intrigued, how do you envision this “tabbed format” exactly?

05) Page issues: To be expanded and moved to top of page

I assume that this has to do with the mocks you recently posted on Slack?

Not sure if there are any plans to pursue it on Android. Would love to hear more about the rationale behind the change.

06) Read more: To remain in footer with updated style

07) Empty space should be minimized

Agreed 👍

Do we have influence on what’s displayed in the share menu

No, not for this purpose. If we want to add an option for viewing on a map, then the current footer link is a good way to do it.

@Dbrant and @schoenbaechler, ah sorry to clarify that link leads to the article in Places / Nearby, so I don't think that there's much utility in having it in the footer for Android.

@schoenbaechler

Not sure if there are any plans to pursue it on Android. Would love to hear more about the rationale behind the change.

We can definitely keep this duplicated in the footer if needed for now on iOS if Android isn't able to work on page issues quite yet, but the rationale is that a page issue is of optimal utility for readers and editors at the top of the page. Specifically, when the page issue is related to content quality and ditto for disambiguation. Eg. It's best to know that the article is biased before reading it, rather than looking to see if there is an issue with the article in the footer.

I’m intrigued, how do you envision this “tabbed format” exactly?

I still need to work this out on iOS, but most likely something similar to mobile web. That being said, this change will most likely take a while on iOS and there isn't as strong of a need for it on Android (eg. we're interested in promoting these two links as we've been working on these pages on iOS, but the same is not true for Android currently). So it probably makes sense to just keep 'Talk' and 'History' in the 'About this article' section.

For the sake of completion, here’s the Google Doc with our discussion/next steps in this matter:

https://docs.google.com/document/d/1_9Qn1kA_wJ50V9rPWweYq2v2095q-rniOyOsdnEpspU/edit

Based on our meeting today I've mocked up a potential footer on iOS and Android respectively.
@JoeWalsh, would it be okay to use different fonts (SF UI for iOS and Roboto for Android)? And also would it be possible to have slightly different margins and padding based on the standards on each app?

AndroidiOS

Sketch file available here: https://drive.google.com/open?id=11IEZILDqi8R8OCWYUA1jTC5sL7VsoV_8

schoenbaechler added a comment.EditedJul 25 2019, 9:01 AM

Awesome improvements @cmadeo 👏 Five things I noticed/questions:

01) Where does the talk page icon come from? Is it Apple specific? There are “chat bubble” icons in Material Design as well, maybe we can use them on Android.

02) I’d vote to make the surrounding separator lines consistent (always use top and bottom line):

03) Lowercase p for consistency:

04) Add “View on Map” on Android

05) I had a shower thought this morning: should we really remove Available in 8 other languages? I’m thinking about the feedback/comments we usually receive in reviews or on OTRS in which people weren’t able to identify the language switch icon. The footer link actually provides additional information (Available in 8 other languages) and makes it clear what it is. Users learn by seeing a label – in the toolbar there’s only an icon. Plus, it also provides additional informational value, as it shows the number of available languages. I’d vote to keep it due to these reasons but I’m open to discuss it!

If these five things have been discussed and...

(...) would it be okay to use different fonts (SF UI for iOS and Roboto for Android)? And also would it be possible to have slightly different margins and padding based on the standards on each app?

... is clear too, then it’s ready to be “Zeplinized” from my end!

PS: Also happy to make the changes myself once discussed (and yes, I love red arrows... 😇)

Cheers!

01) Where does the talk page icon come from? Is it Apple specific? There are “chat bubble” icons in Material Design as well, maybe we can use them on Android.

It's the OOUI icon for 'speech bubbles' so if possible I think it'd be great to use it on both platforms for consistency: https://commons.wikimedia.org/wiki/OOUI_icons#speechBubbles. I believe this is the icon currently being used on Android. Technically we could use the 'UserTalk' OOUI icon, but it is often more closely associated with and used for 'Thanks', so I'd prefer to use the chat bubbles if you're okay with that too.

02) I’d vote to make the surrounding separator lines consistent (always use top and bottom line):
03) Lowercase p for consistency

Ah sorry, both of these were just messy mistakes on my end.

04) Add “View on Map” on Android

Sure, what icon would you like to use? https://commons.wikimedia.org/wiki/OOUI_icons#Location

05) I had a shower thought this morning: should we really remove Available in 8 other languages? I’m thinking about the feedback/comments we usually receive in reviews or on OTRS in which people weren’t able to identify the language switch icon. The footer link actually provides additional information (Available in 8 other languages) and makes it clear what it is. Users learn by seeing a label – in the toolbar there’s only an icon. Plus, it also provides additional informational value, as it shows the number of available languages. I’d vote to keep it due to these reasons but I’m open to discuss it!

As we'll be using the 'Language' icon on a few different screens in the near future (Esp. talk pages) I'd prefer to get users used to recognizing this icon. Overall, I've found in testing that very few users notice this part of the footer, esp. when looking to locate languages. That being said, we could technically support it here, I just don't believe it has a tremendous amount of utility as is.

PS: Also happy to make the changes myself once discussed (and yes, I love red arrows... 😇)

Red arrows are great!

01) Where does the talk page icon come from? Is it Apple specific? There are “chat bubble” icons in Material Design as well, maybe we can use them on Android.

It's the OOUI icon for 'speech bubbles' so if possible I think it'd be great to use it on both platforms for consistency: https://commons.wikimedia.org/wiki/OOUI_icons#speechBubbles. I believe this is the icon currently being used on Android. Technically we could use the 'UserTalk' OOUI icon, but it is often more closely associated with and used for 'Thanks', so I'd prefer to use the chat bubbles if you're okay with that too.

Ok, let’s go with these, then!

04) Add “View on Map” on Android

Sure, what icon would you like to use? https://commons.wikimedia.org/wiki/OOUI_icons#Location

I think the one’s already in use on Android is fine: mapPin

05) I had a shower thought this morning: should we really remove Available in 8 other languages? I’m thinking about the feedback/comments we usually receive in reviews or on OTRS in which people weren’t able to identify the language switch icon. The footer link actually provides additional information (Available in 8 other languages) and makes it clear what it is. Users learn by seeing a label – in the toolbar there’s only an icon. Plus, it also provides additional informational value, as it shows the number of available languages. I’d vote to keep it due to these reasons but I’m open to discuss it!

As we'll be using the 'Language' icon on a few different screens in the near future (Esp. talk pages) I'd prefer to get users used to recognizing this icon. Overall, I've found in testing that very few users notice this part of the footer, esp. when looking to locate languages. That being said, we could technically support it here, I just don't believe it has a tremendous amount of utility as is.

Ok, good reasons – I’m fine with that!


Thanks @cmadeo

@cmadeo different fonts and margin/padding for iOS and Android are fine

cmadeo updated the task description. (Show Details)Jul 30 2019, 4:28 PM

@JoeWalsh + @schoenbaechler I've updated the ticket with the two designs and Zeplin links. Let me know if you need anything else or if these need another review cycle.

Charlotte lowered the priority of this task from High to Normal.Aug 13 2019, 4:14 PM
Charlotte updated the task description. (Show Details)
Charlotte set the point value for this task to 2.
bearND added a subscriber: bearND.Aug 23 2019, 6:16 PM

Do we have icons for opening the native References sections?

@cmadeo and/or @schoenbaechler could you invite me to the zepelin project? I might be the one tackling T230036

username: mateusbs17
email: msantos@wikimedia.org

@MSantos sorry about that! I've invited you to both projects.

@bearND, I'm not sure what section you are referring to, would you mind elaborating?

@bearND, I'm not sure what section you are referring to, would you mind elaborating?

I think he is referring to the "About this Article" section, a.k.a Footer Menu. We have a new entry there which is "References" and currently has no icon, see T228457: pagelib: add References link to footer.

MSantos is correct

@bearND + @MSantos, thanks for the clarification. Let's use the OTRS icon 'References'

@cmadeo Should there be a different icon used for the RTL direction?

@bearND Ah yes, sorry! Here it is:

MSantos added a comment.EditedAug 26 2019, 8:44 PM

@cmadeo thanks!

Just for some context, all the icons are converted to base64 and inserted into pagelib CSS. So we probably are going to need themed versions of the icons. Also, I noticed that all the icons are in PNG, not SVG. Here is a photo from the icon in the current mobile-html footer:

I have one question: Is just the color that should change or the icons don't match?

EDIT: I can't tell since they are different from the designs

@MSantos oof, thanks for showing this in context. We should update the size and color of the references OOUI icon to match the icons used in the footer, but it also looks like the icons that you showed in the screenshot need to be updated from the iOS specific icons to the OOUI icons (Zeplin: https://zpl.io/bJWgMQK). Let me work on exporting all of them as correctly sized PNGs now.

Are we currently handling theming by having a PNG in each color or by using CSS?

@cmadeo thanks!

Are we currently handling theming by having a PNG in each color or by using CSS?

Having a PNG in each color, see https://github.com/wikimedia/wikimedia-page-library/blob/master/src/transform/FooterMenu.css#L77

@MSantos I updated both of the Zeplins to include the new reference section and icon.
Here is a zip with all of the icons in each of the three theme colors (black and dark share an icon color):

@cmadeo should the background color extend edge to edge on the iPad as it did before or should the margin be the same color as the paper background color?

@JoeWalsh, edge to edge would be great!