Wikipedia:User interface ideas

Older material can be found at Feature requests/Interface

2002 2 25 I really like the idea of having different colors for all the user pages, talk pages and wikipedia pages. However, could a better color scheme be used? Really, lime green for the wiki pages, and salmon pink for the user pages (I do hate pink) are just horrid choices! And the blue of the talk pages makes it difficult to tell where hyperlinks are when your settings are set to not underline them. But the concept is real cool and will be most useful. I will play around with some colors and report back in a day a two. maveric149

I hate the idea of colors. The web is busy enough as it is, and wikipedia is a major busyness offender. Colors are just one more layer of not very interesting information between us and the TEXT. I'm here for the text, people. The interface can go play somewhere else. Metawikipedia? MichaelTinkler

I'm a relatively new contributor, but as a design student and extensive user of online encyclopedia's, I have to say that almost any implementation of color and/or graphical features is going to make this place more desirable for those looking for a professional resource. Right now, the design is geared almost 100% toward the editing end and very little toward the user end. Personally, if I were designing it, I would make the top frame thinner with a more horizontal orientation of the logo and give both it and the side menu some type of cohesive color scheme (blue with a compliment perhaps). I would also suggest making the default font the verdana, arial, helvetica family because it's much cleaner and easier to read than the seriffed times new roman. Jazzoctopus

I'd be quite annoyed to get Helvetica after choosing the very readable Lucida Bright in my browser. I agree with you about the size of the top section though; I had the UseMod Wiki set up to have only the title and logo at the top, with everything else down the bottom out of the way. --Carey Evans

• I would suggest that the colors be made considerably paler - they do interfere with the hyperlinks - and that the main article pages should be backed by plain white. Being able to read the pages is, after all, the most important aspect, with all else secondary to that. -- April

How about leaving the main text area of all pages white, and only have different color schemes for the top, side and bottom menubars? The more I think about, the more I am being convinced that having any color other than white for the main text area is a bad thing. I do alot of work in :Talk pages with tables with their own color schemes before I place the tables in the article. Now with the different background colors, the eye is tricked, and anything you work on that has color on a :Talk page will look very different when you place it in the article. maveric149

How about a setting in preferences so I can turn off these colors altogether? The current scheme is truly awful, but no matter what it's replaced with it's going to look bad for someone. Really, do we need to be hit over the head like this about what sort of namespace any given article is in? Bryan Derksen

An alternative would be just a coloured bar down one side, which looks quite neat, IMHO of course. Something like "html { border-left: thick solid green; }" in the CSS stylesheet for this page, for example. --Carey Evans

What I'd love to see is for the people who'd like to see something specifically different in the interface to take a page from the wiki, save the HTML, modify it to their heart's content, and post it for everyone to see. Then if people publicly admit to liking it (as opposed to every change to the live code which is met only with scattered complaints), we foolish blind programmers will have something concrete and pre-approved to put into the code! --Brion VIBBER 2002/02/25

I agree that the main text area should have a white background, but the sides and top should have some interesting color to create a contrast. The problem with leaving it plain and making the user edit it to their choice is that a casual user won't do that and just think it's a plain, boring looking website. And I still think that most web designers agree that the arial family of fonts is clearer and more professional for websites. Jazzoctopus

Alternate designs

Fair enough, Brion. I've put together a few pages, which are living at http://home.clear.net.nz/pages/c.evans/wp/ for now. The most useful link there is the Talk link at the bottom of the page, that explains it a bit. I haven't tested it in IE, and I know it won't look as good in Netscape 4. --Carey Evans, 2002-02-27

I looks nice with IE as well. But, even though the top part in this wiki might be too large, the one in yours seems too small. No edit/Main Page/Recent Changes link (try that on a very long page!), no info about how you're logged in, no search box, and you'd definitely want to have some kind of horizontal line there to divide the header from the rest of the page. The "think colored line" thing is very nice, though. I agree to change the background color of the text back to white on all pages. Either we let the header/footer/QuickBar change the color, or we use the "thick colored line" thing. --Magnus Manske

On every Wiki I know, I can hit the "End" key to get all the page functions. Wikipedia, and Usemod wikis before I turn it off, are the only Wikis I can think of off-hand that put so much info between the title and the content. With just title, byline, content, I don't see why a horizontal line is necessary, although it's nice with a whole control panel at the top. --Carey

Thanks, Carey! It looks great (I, too, love the line along the edge), but I have to agree with Magnus that *some* info at the top is darn useful. When I use the non-English wikipedias which are still on the old code, I go mad looking for the edit link at the top... (Also, the edit links seem to be broken.) This situation might be improved upon with a decent sidebar; one that's a little cleaner looking and only takes up space at the top (ie, float:right). Perhaps the sidebar might be a chunk which includes the logo? Just a thought. --Brion VIBBER

The edit links aren't supposed to work, I might think about the edit page and other special pages later. The logo itself is currently in a separate floating <div>, so it shouldn't be much trouble to try adding text below the image. However, I wonder how a floating div and floating table like in Beryllium will interact? --Carey

Surprisingly enough, not half as ugly (http://leuksman.com/misc/Beryllium) as I imagined. However it's less than ideal, perhaps; the table is much longer than the sidebar, so it doesn't wrap and we get a big blank space. Of course, not as big as we have now where the sidebar lasts the entire length of the page! --Brion

Netscape 6: the blue bar down the left is good, but I don't like the font: it comes across as too big, and unattractive. The latter is, of course, subjective. Vicki Rosenzweig

The font was the default sans-serif font specified in Edit → Preferences... → Appearance → Fonts → Sans-serif, which probably is big and ugly by default. I've changed it back the to default browser font for now, however. --Carey

Parts of it are certainly an improvement on the current design, but it still has a text-only, techie look. I'm working on a prospective design that I'll have up for you to all see in a day or so. I still have a fair amount of my own school designing to do. : ) Jazzoctopus

Techie web page design is what I do best. :)

In my continuing effort to get rid of the links at the top of the page, I've put a magic QuickBar on my sample pages (http://localhost/~carey/wp/). Try the button in the top right with a relatively modern browser. --Carey Evans

Alas, I don't have your pages on my local machine. :) I think you mean your sample pages (http://home.clear.net.ns/pages/c.evans/wp)... The pop-up menu is interesting and definitely a cool effect, but I suspect it would be non-obvious. As someone who isn't terribly familiar with other wikis, I find that having the various navigation & whatnot functions immediately visible is a good thing. At the bottom or hidden away in a submenu means that new users won't notice them. Brion VIBBER

Ok, all, here's the design I've come up with. [[1] (http://ecoop.uc.edu/students/daviscp/wiki/)] It retains most of the current design with a couple of graphic enhancements and a slightly different organization. It's just a sample page, so many of the links don't work. Jazzoctopus

Nice one! Might be a little confusing for newcomers, though. And, changing the logo (which looks good on the page) is not a good idea since we don't want to have totally different logos for the same site, now do we? IMHO, this should become a skin to choose on the user preferences. Accidentially, I just changed statistics so it shows how many people use a certain skin, so I'd say give the community some choices, and then we'll make the most popular one the standard (I know the current standard will have a slight advantage;). --Magnus Manske

Nice! A few comments: The title of the page is not at all obvious. I'd move it down into the white space with the rest of the content, and try to make the header take up a bit less space. Also, all the links in the right hand column are scrunched up and broken onto two lines each on the browsers I tried. The font's tiny too, on my current browser, but on others I tried the top bar was spread out and taller than the logo, which looked a bit strange. --Carey Evans

Pretty! I have to agree with Carey though, the article title needs to be more prominent, and all the text in the sidebar is wrapped. Font sizes vary from platform to platform, from browser to browser, and from user to user. Consider also the non-English wikipedias, which may have longer names for some of those functions. Brion VIBBER

Oh, and another thing, folks. Please remember we'll need room in the design for links to the other-language wikipedias. These haven't been put into many articles yet (in part because the links go to broken pages on most of the other wikis running the old software), but for an example see the article on Esperanto with links to the article in 5 other languages. In the current design they're pretty weighty; using both local and English names for the languages is probably going to be too much, I'd recommend pruning it down to just the local name -- Français, Deutsch, etc -- if people can read the language, they can recognise the local name, no? or even just language codes (fr, de, etc) perhaps with a tiny flag icon or something. (Of course, people will hate more little colored things at the top of the screen, so flags are probably a bad idea.) Brion VIBBER

(See also Marian's excellent UI redesign proposal.)

Nice and fast work on the Cologne Blue skin (the first cut at Marian's UI, I assume). Here are a few suggestions, based on my browser, IE 5.5:

• drop the font size on the "WIKIPEDIA" banner text from +4 to +3
• drop the font size on the topic headline (which looks nice in the Verdana gray) from 8 to 6
• in the second table, the one enclosing both the options bar on the left, as well as the body text, kick the cell spacing up to 5 or so, which gets the whitespace closer to Marian's
• in the options bar table, drop the cell spacing to 0, but kick the cell padding to 5, maybe, which will give you a continous bar with some spacing structure in it. ClaudeMuncey

Cologne Blue lacks two essential features:

• the ability to edit a redirect page
• the ability to go from a Talk: page to a main namespace page

Currently wikipedia is fairly COLOR-BLIND-FRIENDLY. Please keep this in mind for any future enhancements or changes to wikipedia. There are a number of websites that offer tips on having a color-blind-friendly website. As a red/green color-blind person myself, I can tell you that if the font and background are certain shades, I cannot distinguish the font from the background to read it! B