PortlandWiki:GUI: Difference between revisions

Latest revision as of 16:09, 19 June 2011

PortlandWiki needs a new user interface! Help us build it. This page is a central dumping ground for ideas, wireframes, graphics, color schemes, and anything else related to improving our "look-and-feel"!

Competitive Assessment

Part of thinking about a new design is to see if we can look at other wikis out there. To see how other sites have evolved, and to deduce why they reached to that conclusion. Unless someone among us were part of the design, I can only analyze based on the conclusion. Sometimes this is called heuristics. We methodically look at other sites with similar purposes or similar technologies. We methodically note what we like.

View Full Analysis

Brainstorming

Within the effort of the redesign, some initial work has been done in an effort to learn more about the user experience, and to get a sense for the needs and the goals.

View Early Design Concepts

Top Messaging Area

The Top Messaging Area is a content object located at the top of the content area of a set of pages. The TMA, tends to exist for all pages, and provides global, emergency, and account messages. In the current design the TMA appears below the page title, but one view is that the TMA should be positioned at the very top, perhaps between the logo and the top navigation.

View Top Messaging Area Analysis

Widgets

Sometimes called components. These are distinct content items that are finite, and are often positioned separately from the text area of the text. Widgets are often stacked together in a separate column of a page, serving to present the pages content in a different way. Widgets are often used as a jumping off point to other pages.

View Widget Analysis

Inline Objects

Content that is flow-based and is anchored to how text is displayed. Inline objects will change in location according to how text is is forced to flow. The most common form of content within the wiki format.

Types of Inline Objects

text
links
external links
Images
Galleries
Table of Contents

Publishing Tools

PortlandWiki:GUI Publishing

MediaWiki Skin

Within the mediawiki platform (what Piki) is built on. UI is controlled largely by the skin. The skin is integrated with the php file used for generating a page.

MediaWiki Help pages

User Styles

User Generated Skins

Family site by Dan Flores

@@ Line 1: / Line 1: @@
+{{RightTOC}}
 PortlandWiki needs a new user interface! Help us build it. This page is a central dumping ground for ideas, wireframes, graphics, color schemes, and anything else related to improving our "look-and-feel"!
@@ Line 5: / Line 6: @@
 Part of thinking about a new design is to see if we can look at other wikis out there. To see how other sites have evolved, and to deduce why they reached to that conclusion. Unless someone among us were part of the design, I can only analyze based on the conclusion. Sometimes this is called heuristics. We methodically look at other sites with similar purposes or similar technologies. We methodically note what we like.
+[[PortlandWiki:GUI CA|View Full Analysis]]
-===WikiHow===
+==Brainstorming==
-[[File:Screenshot wikihow.jpg|thumb|WikiHow]]
+Within the effort of the redesign, some initial work has been done in an effort to learn more about the user experience, and to get a sense for the needs and the goals.
-WikiHow is a question and answers style Wiki.  This wiki does a pretty good job feeling warm and friendly and yet still reserved enough to not feel bloggy.
+[[PortlandWiki:GUI Design Concepts|View Early Design Concepts]]
-The top nav is great, though I would still contend taht the search block is more important than the Articles, Community & Profile items.
-The 'Three-Step' is great looking. Lear, Write, Wiki -- Gorgeous!
-===Beer Wiki===
+==Top Messaging Area==
-[[File:Screenshot wikia-beerwiki.jpg|thumb|Wikia's Beer Wiki]]
+The Top Messaging Area is a content object located at the top of the content area of a set of pages. The TMA, tends to exist for all pages, and provides global, emergency, and account messages.  In the current design the TMA appears below the page title, ''but one view is that the TMA should be positioned at the very top, perhaps between the logo and the top navigation.''
-This is a fun colorful wiki. Though it follows the Wikia template, which means the top navigation is actually a meta navigation between other wikis.
+[[PortlandWiki:Top Messaging Area|View Top Messaging Area Analysis]]
-The google ads are lame, and create a confusing cloud of noise just above the brand.
+==Widgets==
+Sometimes called components. These are distinct content items that are finite, and are often positioned separately from the text area of the text. Widgets are often stacked together in a separate column of a page, serving to present the pages content in a different way. Widgets are often used as a jumping off point to other pages.
-What I like most about Beer Wiki is the fun graphic content. That's what I would want to bring to Piki are templates for placing images in a way that is fun and interesting.
+[[PortlandWiki:GUI Widget Design|View Widget Analysis]]
+==Inline Objects==
+Content that is flow-based and is anchored to how text is displayed. Inline objects will change in location according to how text is is forced to flow. The most common form of content within the wiki format.
-===Diary of a Wimpy Kid Wiki===
+'''Types of Inline Objects'''
-[[File:Screenshot wikia-wimpykid.jpg|thumb|Wikia's Diary of a Wimpy Kid Wiki]]
+* text
+* links
+* external links
+* Images
+* Galleries
+* Table of Contents
-Another Wikia template so the problems that Beer Wiki are also in here. Otherwise the content is great! Love the big pictures here, I really like when a wiki can rely on images over text.
+==Publishing Tools==
+[[PortlandWiki:GUI Publishing]]
+==MediaWiki Skin==
+Within the mediawiki platform (what Piki) is built on. UI is controlled largely by the skin. The skin is integrated with the php file used for generating a page.
-===Fashion Wiki===
-[[File:Screenshot wikia-fashion.jpg|thumb|Wikia's Fashion Wiki]]
-A part from looking like a consumer clothing retailer, Wikifashion is very very nice. Spacious and appealing. Though the layout is a bit complicated, I like the over all tone of the wiki. It uses subtle colors that make it feel warm and inviting.
+'''MediaWiki Help pages'''
+[http://www.mediawiki.org/wiki/Manual:Gallery_of_user_styles User Styles]
-===Wetpaint===
+'''User Generated Skins'''
-[[File:Screenshot wetpaint.jpg|thumb|Wetpaint Wiki]]
+[http://www.memorydeleted.com/ Family site by Dan Flores]
-===AOL===
-[[File:Screenshot aol.jpg|thumb|AOL Portal]]
-===MSN===
-[[File:Screenshot msn.jpg|thumb|MSN Portal]]
-===Meetup===
-[[File:Screenshot meetup.jpg|thumb|Meetup Portal]]
-==Top Navigation & 'C' wrap==
-Sometimes called the 'wrapper' it is the part of the site that presents brand and top level navigation as well as development related tasks and actions. The current 2010 design has fairly large amount of screen real estate devoted to top navigation.
-[[File:Screenshot_cwrap.jpg|thumb|Screenshot of page. Red highlights the current cwrap]]
-[[File:Screenshot_cwrap-1.jpg|thumb|Screenshot of a standard page, Green highlights the key elements. Logo, Search, Account info]]
-[[File:Cwrap-new-04-06-2011.jpg|thumb|New wireframe for the top part of the cwrap]]
-[[File:Cwrap-top-04-06-2011.gif|thumb|Design for the top part of the cwrap]]
-Piki (portlandwiki) has a layout similar to Wikipedia and countless other wikis that use Wikimedia's software. That's not to say that this is a good or necessarily bad. It is important to think about priorities. What we see in the red below, is also the most important part of the screen. And what do we fill it with? Besides the main and events, we have publishing and editing related items.
-By placing these items in the most valuable area, we are saying that '''publishing''' knowledge is more important than '''gaining''' knowledge. I contend the opposite. That the gaining and use of the knowledge is the most important. It is the learners and readers I think the UI has to cater more to.
-The creators (or writers) are 'power' users. Visit a lot, and they have an understanding of how wiki's work. Some of them even know how to code html. I don't have to worry about them. What ever limitation exists for the UI, they will over come them.
-There are a couple items in the wrapper that deserve attention.
-# the logo
-# the search
-# account related links
-The tricky part will be to highlight these areas while streamlining the other areas of the cwrapper
-With this particular design all the c-wrap elements have been put at the top, items that are in the side nav now could be in a pull-down (not shown)