Wikipedia:WikiProject Usability/Color Tabs

From Wikipedia, the free encyclopedia

Contents

[edit] Proposal

As it currently stands, Wikipedia puts tabs to good use along the top of the page. A reader/editor can quickly access talk pages, edit/move/delete/view history etc.

But there is no easy access to browse around. A reader can visit Wikipedia:Browse and move from there, but has no way to return to a Category other than the back arrow. And has no way at all to move between categories if there is no link on the currently viewed page. Relationships between parent and child categories are also not fully understood by most reader/editors.

I propose a line of color-coded tabs be placed along the left or right edge of the page. This will take up little space, and add much in the way of usability to Wikipedia.

[edit] Specifics

  • Tabs will be available for each main category.
    • Subcategories are hues of the parent category color.
  • Tabs move when selected, unselected move down, selected move to top, subcats arrive
  • Tabs may have text or Icons
  • Category pages have color highlights to enforce the color coding:
    • Line under PAGENAME will be color coded and background will be hued.
  • Other tabs can be available:
    • A-Z

[edit] Gallery of examples in paper

Most prominent example I've seen is inThe Firefly Five Language Visual Dictionary. It has different colors for each subject area, and a legend on the back cover. The exaple pictures on this site show a light blue tab on the side of the page.

[edit] Proposed color schemes

The following are examples only, and no particulare one should be thought of as the final version.

[edit] Picking a scheme

Things to keep in mind when deciding on a Color scheme:

  • Color theory - a set of basic rules for mixing color to achieve a desired result. In this case the desired result is to have each category relate logically to the color (but given a long enough time people will adjust to any scheme) and have the colors pleasing to the eye.
  • Color psychology - a field of study devoted to analyzing the effect of color on human behavior and feeling

[edit] Version 1

Vary Pale (almost white)
Color Category
Category:Culture
Category:Geography
Category:History
Category:Math
Category:People
Category:Science
  • Pros- easy on the eyes
  • Cons - less variety (more main categories than colors)

[edit] Version 2

Pale and darker hue
Color Category Color Example Subcategory name
  Category:Culture   Category:Art
  Category:Geography   Category:North America
  Category:History   Category:History by period
  Category:Math   Category:Algebra
  Category:People   Category:Lists of people by name
  Category:Science   Category:Astronomy
  Category:Nature   Category:Life
  Category:Society   Category:Sociology
  Category:Technology   Category:Internet
  Category:Wikipedia   Category:Wikipedia 1.0
  Category:Reference   Category:Abbreviations
  A-Z   A

Pale, pleasant colors for categories, a darker hue of same color color for subcategories, for visual continuity that will assist in developing a navigational idiom.

If tabs will feature text, black text can be used for categories and white text for subcategories, for legibility:

[edit] Tab examples

  • Tab example with text
  Culture      Art   
  • Tab examples with text and icons
  Culture      Art   

or

  Culture      Art   

or icon before caption

  Culture      Art   

[edit] Vertical tab example

Sample of a vertical tab, that is displayed at the left of the page.

Some place eholder text follows so the effect can be appreciated.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, conse

[edit] Other schemes?

If these don't work perhaps a pre-arranged palette can be chosen from Colorlovers.com

[edit] Proposed Icons

These are just a sample. The rest are at commons:Category:Icons. For an example in use see: fr:Portail:GĂ©ographie. Or Wikipedia:Good_articles.

[edit] To Do

  • Write a semi-coherent proposal
  • Post at Wikipedia:Wikiproject Usability for comments.
  • Enlist help (developers, writers).
  • Post at other appropriate spots.

[edit] Related lnks

[edit] External links

Some pages relating to CSS and tabs: