Design concept for tabs on iOS

Onboarding tooltips for tabs T392397

• Shown tab tooltips in the same session as the Wikipedia ‘W’ tooltip. This ensures a streamlined navigation onboarding experience for users.
  • Ensure that users who have already seen the 'W' tooltip see the new tab-related tooltips too.
• ‘Open in new tab’ tooltip doesn’t have to point to a link in the article, it’s ok if it points to the article’s main content area to reduce complexity
• Use sequential tooltips (similar to ‘Add image’ to introduce tabs)

• Users must tap 'Got it' to continue interacting with the screen.
  • The current behavior is to dismiss the tooltip once users click anywhere on the screen.
  • To make sure users learn that there are tabs, we should “lock” the background, similar to the onboarding experience for ‘Add an image’.
  • If the above is not feasible, reshow the tooltip until users tap 'Got it'. Maximum: 2 times.

Add entry point to tabs to main views in navigation bar T390991

• Add tabs button to main views: Article, Explore, Places, Saved, History, Search
• Tapping the tabs button takes users to the tabs overview
  • A custom transition that Toni explored in T387473 is a #nicetohave. The closer we can get to Safari’s transition from the article view to the overview, the better.
• Long-press gesture on tabs button in the navigation bar reveals the following menu #nicetohave:
  • New tab
  • Save all tabs (triggers reading list prompt)
  • Close all tabs (triggers dialog)

Core interaction (aka the ‘Back’ behavior) T392403

• ‘Back’ button label: show the label of the previous destination next to the back button to make navigating articles easier. It has helped users immensely to navigate the prototype in usability testing (T389390) and understand what happens #nicetohave
• If the label is too long, apply truncation (ellipsis with …) #nicetohave
• ‘Back’ button takes users back to the previous item they visited.
  • Example flow for switching tabs:
    • User is on ‘Explore’ → Taps Polar bear → Opens Arctic in a new tab and switches to it → Opens Polar region → Opens Earth
    • Taps ‘Back’ on Earth → Taps ‘Back’ on Polar region → Taps ‘Back’ on Arctic [user is taken to the previous tab] → Tabs ‘Back’ on Polar bear → User is back on ‘Explore’
• Animate the tabs icon (increase then decrease its size) when users tap ‘Open in new background tab’ to emphasize that a new tab has opened. Some users didn’t realize the tab opened in the background since the interface didn’t respond (T389390) #nicetohave
• Filter out non-article detours (talk pages, article history, files)

Default open behavior for tabs T392398

Philosophy:

• We aren’t complicating things for existing users who haven’t dealt with tabs before. Tabs are here when you use them, but stay out of the way if you don’t.

General notes:

• When users long-press and select ‘Open in new tab’ or ‘Open in new background tab,’ items are always opened in a new tab (regardless of whether an item is already open).
• Keep current behavior in when navigating links in articles.

Open behavior:

• Web browser:
  • If the article is open at the top of an existing tab, switch to it [1] #nicetohave
    • If we can’t build the #nicetohave, apply the “Else” below.
  • Else, the article opens in new tab, user is taken there.
    • If the tab limit is reached (500), the article opens in the current tab.
• Search input (anywhere in the app)
  • If the article is open at the top of an existing tab, switch to it [1] #nicetohave
    • If we can’t build the #nicetohave: apply the “Else” below.
  • Else, the article opens in the current tab.
• Explore:
  • Article opens in the current tab, user is taken there.
• Places:
  • Article opens in the current tab, user is taken there.
• Saved:
  • Article opens in the current tab, user is taken there.
• History
  • Article opens in the current tab, user is taken there.
• Anywhere else:
  • Article opens in the current tab, user is taken there.

Tabs overview T390999, New tab from Overview T392167, re-accessing a tab from overview T392400, tabs limit toast T392401

• Tab items have an aspect ration of 3:4 (portrait)
• New tabs open Wikipedia’s main page by default (possibly talk to Android engineers since this is the default)
• New tabs (via the new tab button at the top right) are inserted at the bottom of the tabs overview interface (see Mars article that has been created after the Zermatt article in the above examples).
• New tabs via long-press on a tab item are inserted next to the tab item long-pressed #nicetohave
• Tapping the overview button from the current location (Mars in the above example),
  • Tapping the new tab button (+ icon) in the tabs overview takes users to the new tab with the main page open.
• The recommended tab limit is 500 (which is equal to Safari’s tab limit on iOS). Once a user reaches the limit, a toast message is shown that the tab limit has been reached
  • Simply show a toast message without buttons with the following copy: Tab limit reached (500). Please close one or more tabs.
  • Show a dialog to close all tabs #nicetohave:
    • Title: Tab limit (500) reached, close all tabs?
    • Description: Please close a few tabs or close all tabs to create new ones.
    • Buttons: Cancel, Close all tabs
  • Save as reading list flow. Suggest to save the tabs as a reading list in the toast with a button 'Save' button. #nicetohave
    • After saving the tabs to a reading list, a confirmation toast shows up and closes all tabs except for the latest one.
    • Disclaimer: Toasts don’t have to necessarily look like in the above designs. But the functionality needs to be given
    • Only the top-most articles of a tab are saved to a reading list (not the entire history of a tab)
• Overflow menu #nicetohave:
  • The minimum amount of tabs is 1 (see how this looks here). If no article has been searched yet, the tab contains the main page.
  • Save all tabs: pops up the same view as when the limit is reached (Save as reading lists)
  • Close all tabs: shows a dialog
    • Title: Close all tabs?
    • Text: Are you sure you want to close all tabs? This action cannot be undone.
    • Buttons: Cancel, Close all tabs
    • More info: 1 tab always stays open. If the user closes all tabs, 1 tab with the main page remains.
• Long-press on tab #nicetohave (alternative if we don’t have time to build it: don’t provide a long-press feature at all in the tabs overview):
  • Duplicate tab: Duplicates the selected tab but stays in the tab overview
  • Copy link: Copies article link
  • Save article: Displays the existing toast after saving the article (within the tabs overview interface)
  • Select tabs: lets users select tabs (to be designed)
  • Close tab: closes the tab
  • Close other tabs: triggers the “Close all tabs” dialog from the main overflow menu
  • New tabs via long-press on a tab item are inserted next to the tab item long-pressed #nicetohave
• If the article doesn’t have an image, more article text is featured (see here).
• For articles without an article description, the title and the article’s text will be shown (Figma)
• Show number of open tabs
• New tab entry point (new tab flow to be built in separate task)
• Users can close individual tabs
• Allow users to have Tabs open in multiple languages
• Allow duplicate tabs of the same article
• Filter out non-article detours (talk pages, article history, files)
• When opening a tab from the overview, it should remember last scroll position

In-app survey after tabs usage T392402

• Triggered if users have used “Open in new tab” (using the plus icon in the tabs overview, via long-press on an article link or long-press on the tabs icon in the navigation bar) AND visited the tab overview page.
• Toast is shown after feedback is submitted
• Reuse components from T370308 and YiR

iPad/Landscape designs T390999

• Tabs should responsively scale based on available space.
• Type and spacing within a “tabs-card” remain the same as an iPhone (font-sizes, top and bottom paddings, etc.).
• iPad and iPhone landscape designs use the entire width and height of the screen.
• iPad Portrait should feature at least 4 tabs in a row.
• iPad and iPhone Landscape and iPhone should feature at least 5 tabs in a row.

Future

• Forward button in overflow menu
• “Select tabs” functionality
• Tabs sync across devices for logged-in users
• Support gestures to move between tabs
• Open all articles from a reading list in tabs
• Allow rearranging tabs
• Adding a link to reading history in the tabs overview more menu as it’s related
• Revisit decision not to support other namespaces in Tabs
• Collapse or close inactive tabs after a certain amount of time
• Share-able “Rabbit hole” visualization for tabs
• Allow User, Draft, and Wikipedia/Project namespace pages to be included in the tab stack
  • Show non-mainspace pages in modified version of the article view