Note: If you look at some actual reference panel content on the app you'll see they frequently contain links and other markup. Often they need to scroll vertically. (We need to use a WKWebView to display them).

Also, the existing reference panel lets you scroll side to side between adjacent references, which is nice because you don't have to hit their tiny touch target - i.e. if you tap on "[2]" in "[1][2][3][4]" you can go to "[1]" by swiping left or "[3]" or "[4]" by swiping right.

If the reference mock could be updated to reflect more real-world reference content it would be helpful.

@RHo ^

Ah yes, this ticket should be link to the following related tickets:

• T141741: Article citations / references on iPad should appear in a popover
• T138965: Redesign the citation pop-up to recemble the mobile web

https://github.com/wikimedia/wikipedia-ios/pull/913

This is looking great, but for iPhone we should keep a sheet rather than the popover to present the references. This also allows us to retain the swipe action on a smaller screen to navigate through multiple references.

Mocks

M187 Reference on iOS

50

See Zeplin for specific redlines here: https://zpl.io/Z21KiN7

@RHo

This is looking great, but for iPhone we should keep a sheet rather than the popover to present the references. This also allows us to retain the swipe action on a smaller screen to navigate through multiple references.

I recommend going with popovers on non-tablets for a few reasons:

• Most references aren't in groups. Not sure what the percentage is, but looking at lots of pages is seems to be less than 50%. So swipe doesn't even come into play for most refs since it only let you swipe if they were adjacent.
• I was able to increase the touch targets on the reference links so tapping them isn't as hard, so swipe is of less comparative utility
• The tooltip is much easier to read as it more often can more completely display large refs (I was even able to make it scroll if needed for huge refs)
• Uses the iOS paradigm and built-in facilities so more maintainable
• No double maintenance of 2 systems
• Panel system would need much more work to bring up to date
• Consistency
• Little evidence anyone used the swipe on the old panel (it was something I added for fun)

hi @Mhurd

Just want to clarify my earlier post – keeping the sheet on iPhone is not to accommodate keeping the swipe action for references that are grouped together, but it was merely an additional consideration. The main reason is that per the Apple HIG, popovers are used on larger screens, whilst on smaller screens we use a sheet so that focus is maintained until dismissed and allows users to clearly view what they have selected.

This is a consistent paradigm across iOS (sheet iPhone, on popover in iPad), for example when users select the Share icon in apps, or in Maps when a place is triggered.

I've just updated the iPhone mocks with a more iOS10 standard way to show the reference sheet which also makes it easier to scroll longer references.

Using the full width sheet on iPhone provides better readability since we are able to utilize full line-lengths than the popovers, esp. when it comes to longer references viewed in larger texts.

Example screenshots below showing the variability of popovers in iPhone.

Per our meeting:
@Mhurd please update with a full width popover as a potential compromise between the "sheet on phone" and the current "popovers-a-poppin" implementation.

Either way we'll still need to do some visual changes, but lets setting the basic UX before we get into those details.

@RHo @JMinor

I updated the PR with the tweaks we talked about:

• Widen to screen width with margins. Side note: This portrait width is the max width. i.e. on landscape or tablet I use that same portrait width. See the last image below*.
• Only pop above or below, not to sides.
• I also added the header. The close button isn't actually hooked up yet, and "[X]" doesn't yet change to reflect the number of the tapped ref.

Animation: (tap the image to see it play)

Stills of how the exact (or close to it) popovers that @RHo attached above now look:

Before

Before

Before

Also, landscape uses width from portrait:

hi @Mhurd – this is looking good! One minor tech glitch though is the close button on the top LHS isn't working in my Simulator.

A second UI tweak is whether we can update the presentation of the references within the text from the current blue superscript square bracketed links to how they look on the mocks with the larger size 'button' like treatment.

@JMinor - Besides that I think this could be a good workaround to having the sheet on iPhone, but strongly recommend conducting usability testing since we are changing the interaction and removing the (albeit minor) feature to swipe between references.

@RHo

Not sure if you noticed this part from my comment above...

... The close button isn't actually hooked up yet, and "[X]" doesn't yet change to reflect the number of the tapped ref.

I was waiting to hook those bits up so I could get you the updated visuals faster :)

@RHo

Oh can u give me the asset for the close button you would like to use? We have one that's similar to the one in your mock but it is too tiny.

@Mhurd - sure attached icon below, and it's actually in the assets tab of the Zeplin as well.

And cool, I missed reading the first part of your comment about the close not being hooked up. Would be good if we can get the reference style in the article updated though:

@RHo

Thanks for the icon!

Are you and @JMinor sure you want to change the reference styles? I ask because the "[Citation needed]" style brackets are pretty strongly associated with the Wikipedia "style" and I suspect we will get some pretty strong feedback. Could be wrong. Just wanted to check.

@RHo To be clear I'm totally open to changing the ref link style, but we may want to consider separating it to its own ticket.

@RHo One other quick note: doing the full darkening as opposed to the built-in shadow that popover provides looks a bit more complicated than I'd hoped. Recommend for now going with the built-in shadowing.

On the darkening: lets use the built in for now. Once we have it on devices we can look at whether custom development is worth it.

On the link style: lets carve that into a separate ticket. The square bracket reference link styling is pretty classic, and I'd want to talk to @Nirzar and android team to at least decide if this will be done consistently.

@RHo @JMinor

Updated to hook up close button and make the title show the link text from the tapped reference:
(tap for animation)

@JMinor – Spoke with Nirzar and I will create a separate ticket on the citation / reference styling in the article.

The popover shadow doesn't look great, looking too esp. severe without darker background overlay, and would consider this a blocker on top of the fact that the sheet with swipe pagination is still ultimately the more apt solution for iPhone.

The popover shadow doesn't look great

That's apples built in shadowing for doing popovers. I think making the rest of the page, which needs to remain interactive, black, is more severe.

Also, are we going to use a panel when the phone is in landscape? The 6 Plus in landscape?

By that I meant popover shadow doesn't look great on iPhone, since this large popover on the smaller screen size is not the intended use by Apple's guidelines.

@RHo I edited my comment above

@RHo Please consider using it on device for a bit before deciding.

The optimal solution using the sheet involves making the rest of the screen not interactive as focus is in the content, so both sheet and popover would utilise the semi-transparent black background.

And yes, on iPhone 6S plus it would work as a centred sheet like the Share sheet in Safari.

Hey lets go ahead and merge the existing PR into internal so I and other can see first hand.

Once its code reviewed, please put in Needs Acceptance until I can catch up on the discussion and try existing UX on device.

After using the implementation and discussion with @RHo and @Mhurd, please:

• Use these changes for the iPad
• Revert the iPhone to the 5.2 behavior or implement the sheet design specified by @RHo, whichever can be completed for regression testing on Monday next week.

Work in progress:
https://github.com/wikimedia/wikipedia-ios/pull/968

Testing criteria

Hi @Nicholas.tsg. The testing criteria has changed a bit for references. We now use a slightly different presentation for iPhone vs. iPad. Details below. Could you update the test script to reflect the changes? Thanks! :)

iPhone

• Load "enwiki > Mathematics" article.
• Tap on the first blue "[2]" link.
• The tapped link should become highlighted with a white box around it and should scroll up so as to not be covered by the white panel which should appear at the bottom of the screen.
• The white panel at the bottom of the screen should show the reference details.
• Now tap somewhere outside of the white panel to dismiss the panel.
• Now tap on the "[5]" reference link in the "[4] [5] [6]" reference "group".
• A white panel should appear at the bottom of the screen again, but beneath it you should see 3 dots - the center dot should be white.
• Now swipe side to side to ensure you can swipe between the "[4]", "[5]" and "[6]" references.
• As you swipe side to side the white dot at the bottom of the screen should change to reflect the reference you swiped to.
• As you swipe side to side the highlighted "[4] [5] [6]" reference group should change making the number for the reference you swiped to black.

Tap for animation:

iPad

• It should (still) show just a single popover for the tapped reference.

Tap for animation:

Visually this looks good on iPhone + iPad.

I'm not sure if this is a known issue but it appears as though ISBN number links are throwing up an error instead of bringing users to the Book source page associated with the tapped on ISBN number.

Steps to reproduce
Tap on the 8th citation in the 'Mathematics' entry.
Tap on the ISBN number in the citation.

Expected results
Book sources page (https://en.wikipedia.org/wiki/Special:BookSources/3-0348-0229-3) associated with that ISBN number is opened.

Actual results
App shows an error stating "The page you requested doesn't exist"

If this is a known bug or something that should be moved to a separate ticket please let me know and I'll update/move stuff over.

@cmadeo nice catch! checking...

@cmadeo looks like the ISBN issue is known and separate issue ( https://phabricator.wikimedia.org/T103914 ), but I did fix the reference dismissal issue your screenshot brought to my attention: https://github.com/wikimedia/wikipedia-ios/pull/1015