Jump to content

MobileFrontend/Wikipedia navigation

From mediawiki.org

Wikipedia Navigation UI aka Glaucus is a UX design that will be deployed on multiple mobile platforms, including mobile web browsers, WAP browsers, iOS apps, Android apps, and others. There will be differences across platforms and the most comprehensive version will be for mobile web browsers, where all functions not included in basic browser functions must be accommodated in the UI that accompanies Wikipedia.

A related design is known as Athena, which is focused on making the main Wikipedia site mobile-friendly. This design is focused on optimizing the reading experience as well as accommodating contributory functions as they are developed, leading eventually to more complex editing functions. In a sense, Athena is a sort of "destination" for the evolution of this design.

See the Glaucus mock-ups here.

Design goals

[edit]

The main goals of this design are as follows:

  • A rational, easy-to-understand framework for the placement of functions related to Wikipedia
  • Simple, obvious access to these functions in a way that conserves screen real estate
  • Flexibility to add more functions over time in different categories - i.e., extensible without becoming cluttered or non-intuitive
  • Compatibility with different mobile platforms and form factors - the minimum versions of this design should include:
    • web browser on iPhone
    • web browser on iPad
    • web browser on Android smartphone
    • web browser on Android tablet
    • WAP browser on typical Series 40 device
    • iPhone app
    • iPad app
    • Android phone app
    • Android tablet app

(tablet versions can be developed later)

Initial menu

[edit]

For reading functions and most users, a menu of basic features can be included under the W icon. A mock-up of this is here.

Here are the functions to include initially:

  • Inter-wiki links
  • Home
  • Random
  • Contact us
  • Beta opt-in/opt-out
  • Disable images
  • Save pages
  • Articles nearby
  • Login

"Articles nearby" and "Save pages" are not yet implemented on the mobile site. Also Login will not be needed initially.

If a user logs in, then other functions become available. "Disable images" could be a setting in preferences, so when "Login" is included and "Preferences" is implemented, "Disable images" can be removed.

Functional categories

[edit]

The main categories of functions that will be included in the UI are as follows:

  • Article-specific, such as inter-wiki language versions, related images
  • General to Wikipedia, such as notifications, featured content
  • Account-related, such as login, watchlists
  • Contributory, such as photo uploads, article feedback
  • Editing, such as photo patrolling, proofreading edits, visual editor, new page triage

Examples of these categories are listed below:

Article-specifc

[edit]
  • Inter-wiki links
  • Articles near this article
  • Related pictures
  • History
  • Discussion
  • What links here

General

[edit]
  • Home
  • Random
  • Contact us
  • Beta opt-in/opt-out
  • Disable images (site and app)
  • Save pages (app and site)
  • Articles nearby (app and site)
  • Recent changes
[edit]
  • Login
  • Watchlists
  • Notifications
  • Talk page
  • Contributions
  • Preferences

Contributory

[edit]
  • Photo upload basic
  • Photo upload "articles nearby"
  • Article feedback

Editing

[edit]
  • Photo upload patrol
  • Proofreading edits

Sample timeline

[edit]

Here is a rough breakdown of what features could appear when in cumulative fashion:

Feb 12 (current UI) Mar 12 (new UI) Apr 12 May 12 Jun 12 Jul 12 Aug 12

Article-specific

  • Inter-wiki links

General

  • Home
  • Random
  • Contact us
  • Beta opt-in/opt-out
  • Disable images (site only)
  • Save pages (app only)
  • Articles nearby (app only)
  • Disable images (site only)

Article-specific

  • Inter-wiki links

General

  • Home
  • Random
  • Contact us
  • Beta opt-in/opt-out
  • Disable images (site and app)
  • Save pages (app and site)
  • Articles nearby (app and site)

Account-related

  • Login

Contributory

  • Photo upload basic

Article-specific

  • Inter-wiki links

General

  • Home
  • Random
  • Contact us
  • Beta opt-in/opt-out
  • Disable images (site and app)
  • Save pages (app and site)
  • Articles nearby (app and site)

Account-related

  • Login
  • Watchlists

Contributory

  • Photo upload basic
  • Photo upload "articles nearby"

Editing

  • Photo upload patrol

Article-specific

  • Inter-wiki links
  • Articles near this article

General

  • Home
  • Random
  • Contact us
  • Beta opt-in/opt-out
  • Disable images (site and app)
  • Save pages (app and site)
  • Articles nearby (app and site)

Account-related

  • Login
  • Watchlists
  • Notifications

Contributory

  • Photo upload basic
  • Photo upload "articles nearby"
  • Article feedback

Editing

  • Photo upload patrol

Article-specific

  • Inter-wiki links
  • Articles near this article
  • Related pictures

General

  • Home
  • Random
  • Contact us
  • Beta opt-in/opt-out
  • Disable images (site and app)
  • Save pages (app and site)
  • Articles nearby (app and site)

Account-related

  • Login
  • Watchlists
  • Notifications

Contributory

  • Photo upload basic
  • Photo upload "articles nearby"
  • Article feedback

Editing

  • Photo upload patrol

Article-specific

  • Inter-wiki links
  • Articles near this article
  • Related pictures

General

  • Home
  • Random
  • Contact us
  • Beta opt-in/opt-out
  • Disable images (site and app)
  • Save pages (app and site)
  • Articles nearby (app and site)

Account-related

  • Login
  • Watchlists
  • Notifications

Contributory

  • Photo upload basic
  • Photo upload "articles nearby"
  • Article feedback

Editing

  • Photo upload patrol

Article-specific

  • Inter-wiki links
  • Articles near this article
  • Related pictures

General

  • Home
  • Random
  • Contact us
  • Beta opt-in/opt-out
  • Disable images (site and app)
  • Save pages (app and site)
  • Articles nearby (app and site)

Account-related

  • Login
  • Watchlists
  • Notifications

Contributory

  • Photo upload basic
  • Photo upload "articles nearby"
  • Article feedback

Editing

  • Photo upload patrol
  • Proofreading edits