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
| 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
| 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
 Community |
 Sociology |
 Technology |
 Entertainment |
 Culture/History |
 News |
 Literature |
 Art |
 Anthropology |
 Agriculture |
 Biology |
 Chemistry |
 Computing |
 Countries |
 Culture |
 Geography |
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
- List of colors
- MediaWiki talk:Common.css
- Template talk:Prettytable
- Wikipedia:Village pump (proposals)
- Category:Wikipedia proposals
- Wikipedia:Requests for comment
- Wikipedia:Community Portal
[edit] External links
Some pages relating to CSS and tabs:
