Wikipedia:WikiProject Usability/Color Tabs

This page is currently inactive and is retained for historical reference.
Either the page is no longer relevant or consensus on its purpose has become unclear. To revive discussion, seek broader input via a forum such as the village pump.

Proposal[edit]

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.

Specifics[edit]

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

Gallery of examples in paper[edit]

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.

Proposed color schemes[edit]

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

Picking a scheme[edit]

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

Version 1[edit]

**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)

Version 2[edit]

**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:

Tab examples[edit]

Tab example with text

Culture

Art

Tab examples with text and icons

Culture

Art

or

Culture

Art

or icon before caption

Culture

Art

Vertical tab example[edit]

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