User:Marian

A UI design proposal for Wikipedia

As you can read below I feel that it is possible to make Wikipedia an even better experience for it's users. A great part could be done through a new UI design.

To be as constructive as I possibly can, I made an initial design proposal to throw it in the circle and gather some thoughts from you all who care.

[Click here (http://www.ds.fh-koeln.de/~marian/wikipedia/redesign_article_1.png)] for full size image (PNG format).

What you can see on the screen is a mockup of a short article page (Genome) that shows the overall look and feel of the site.

Here are some thoughts:

• The appearance could be considered very calm, quiet, friendly, subtle, bright.
• The visual design opts for ease of use, speed, compatibility. (Call it a Googleish design, if you want.)
• Ease of use means: Newbies and experts find their way and get the work done quickly.
• Speed means: The HTML would be lightweight as it is right now.
• Compatibility means: The template would of course technically support all browsers, but also optically support the huge range of content styles in the articles. Thats the reason why color is very reduced and the use of type is subtle.
• The appearance is not designed towards originality or web design awards.
• The logo... I consider the current logo good, but too detailed for use on all pages. That's why I would propose to use a simplified version on all pages. A "text ball" version could be used on the main page, though. (and for merchandise... ;-)
• My preferred type order for text would be "Verdana, sans-serif". Verdana is the most legible type for the screen. As Wikipedia is 99,9% text, we should care about this.
• The article headline is not Verdana, because Verdana doesn't look nice in larger sizes. It's Helvetice here, so in terms of CSS just call it "sans-serif".
• Probably the most important thoughts are in the organization of the page items. As you can see. In detail:
  • The search input (titled "Find", because "Find" is more optimistic than "Search" ;-)), probably the most important interface to Wikipedia, has a central position.
  • Distinguished from the Find input are the "Browse" links to the content. I sorted by what I guess could be most important to the majority of users.
  • General Editing (File Upload) and Personalized links to personalized specials are below.
  • important site-wide links are in the blue bar at the top right
  • the article, of course, goes to the middle
  • and functions and information related to the article is positioned right hand side from the article.
• The page scales t a 100% browser width,just as the current template does.
• The template would need either one or two images, not more.

What I am going to do now is finish a school exam of mine and then subscribe to the mailing lists and try to convince you guys that it would be nice and giving to go further, discuss this, do more mockups of other special pages, iterate, test, implement. Of course I would hand-write the HTML for you. I would even help you code it in PHP if you let me.

But, first things first.

Please, untill then, post any comments on my Talk page. Thanks!

Marian

Marian Steinbach

Student of design at Cologne, Germany. Web and user interface designer. Also interested in information design, typography, free climbing, programming (PHP, Perl, ...). See www.ds.fh-koeln.de/~marian (http://www.ds.fh-koeln.de/~marian/) and www.sendung.de (http://www.sendung.de/) for more about/from me.

I am very interested in bringing some more useful UI design to wikipedia! (No, I am not advocating eye candy). Wikipedia is about making information accessible to people. User Interface design is about making systems useable and pleasant that allow access to information. Sounds like a good match, doesn't it?

Notes to self

• What an awesome idea this site is!
• Convince Wikipedians of need for user interface design
• Maybe initiate Wikipedie design project at school?
• Have to find out more about Wikipedia: Style guidelines, formatting rules, policies
• Have some usability issues. It took me quote a while to actually click the help link. I'd rather not hide important content behind a word like "help".
• It would be fun to see wikipedias link structure in a visualisation. :) THis could be a fine project of its own.
• The tarfiles page could use a little more information about what the files offered are. The point was already made in the meta wiki.
• Not yet sure what the status of the software development is and how the PHP script and the current viki correlate...
• some more statistics, especially showing development over time, would be nice!
• Could find an overview on the available formats for article structuring yet...
• wonder how graphics are used in Wiki. What are the preferred file formats? How large should they be? Should there be a preview and a full size version?
• Homepage doesn't seem to adapt to personlaisation. As a consequence, one tries to log in although one is already logged in.

Special styles in Wikipedia

• Year in Review - attempt to bring temporal navigation and context into year reviews.

Article ToDos

• Map - add mentioning of a more conceptual understanding of "map" (like web site maps). The article seems to be too narrow on geographical maps. Maybe get some viewpoints together from literature. Genome uses the term "map" in the wider way already, but cannot usefully be linked in the current way.
• Typography needs some basic content.

Meta Bookmarks

naming conventions, Rules to consider, The perfect article, The perfect stub article, Wikipetiquette, Editing policy