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 18: / Line 18: @@
 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.''
+[[PortlandWiki:Top Messaging Area|View Top Messaging Area Analysis]]
-'''Welcome TMA'''
-* MSG: ''Welcome to PortlandWiki. The community-powered knowledge commons for Portland, Oregon''
-* [[PortlandWiki:About|Overview]]
-* [[Help:Editing|Editing]]
-* [[Special:Search|Searching]]
-* [[Help:Contents|Help]] links
-'''Hangout TMA'''
-* MSG:'' Come hang out with PortlandWiki! and join other contributors at our weekly meetups each Monday and Wednesday evening.''
-* [[PortlandWiki:Meetups]]
-* [[PortlandWiki:Monday Meets]]
-* Keep-Portland-Wiki.png
-* [http://twitter.com/#!/portlandwiki/ Twitter Page]
-* [http://www.facebook.com/pages/PortlandWiki-A-City-Wiki-for-Portland-Oregon/153946741284141 Facebook Page]
-* [[PortlandWiki:Administrators|Email contact]]
-'''Searchbar Widget''' -- In the current design there is an opportunity to create a concise graphical TMA that can serve to highlight searches, meetups and contact info. One version can be seen on the [[PortlandWiki(Test1)]].
 ==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.
-{{News2ColGeneric|
+[[PortlandWiki:GUI Widget Design|View Widget Analysis]]
-|Border= 0px solid #ffffff
-|HeadingColor= #ddddf0
-|BackgroundColor= #ffffff
-| Heading = Heading here
-| NewsLeft =
-'''Global Widgets'''
-widgets that appear in order to represent global content
-* Peer Categories
-* Parent Category
-* News
-* Events
-* Photos
-* Recent pages
-* Popular pages
-* Most changed
-* Account
-* Messaging
-| NewsRight =
-'''Page Widgets'''
-widgets that have content related to the specific page it is on
-* Times viewed
-* Shared Categories
-* Contributors
-* Created/Modified
-* Links Used
-* External links Usd
-* References
-* Status (stump, debated)
-* Publishing
-}}
-[[File:Map wikipage-elements 04-13-2011.png|thumb|Mind Map of Page Element Ideas]]
-'''Types of Widget Formatting'''
-* Image widget - used to display an image with a caption
-* Text widget - used to display a specific set of text
-* Video widget - used to embed an ogg video player
-* Article Widget - represents a separate page by showing a title, excerpt and an image if available
-* Link widget - lists a series of links. Most cases it presents a digest of links within the current page.
-* External Link widget - lists a series of external links. Used to present a set of links related to a spotlighted topic.
-* RSS Widget - used to display content obtained from an RSS feed.
-It's important to nail down what elements can be accessed by a widget.
 ==Inline Objects==
@@ Line 103: / Line 36: @@
 * Table of Contents
+==Publishing Tools==
-==Change Tools==
+[[PortlandWiki:GUI Publishing]]
-The Change tools are actions used to activate the editor for a page or a specific page.
-'''Types of Change Tools'''
-* Edit Page (seen in the upper right tab)
-* Edit Section (seen as an Edit link within each heading 2 section
-Though Wikipedia has continued to have the Edit Page tool as a tab in the upper right, their commercial division, Wikia has started using a button located by the page title to do the same thing.
-==Property Tools==
-Tools used to identify properties of a page that is tracked by the wiki system.
-Types of Property tools include
-* What Links here
-* Related changes
-* View History
-==Editor (OUT OF SCOPE)==
-''The Editor as of April 2011, is out of scope for the redesign, but is listed here anyways.''
-Seems pretty close to Wikipedia's [http://en.wikipedia.org/wiki/Help:Editing Editor]
-The editor is an embedded content submission area that is used to add, update, or change existing content. The editor provides text that is integrated with wiki markup. A graphic button toolbar is provided that will insert wikimarkup to text. An advanced form of the toolbar is available. There has been some discussion for using a different Editor.
-{{News2ColGeneric|
-|Border= 0px solid #ffffff
-|HeadingColor= #ddddf0
-|BackgroundColor= #ffffff
-| Heading = Heading here
-| NewsLeft =
-'''Basic formatting'''
-* Bold
-* Italic
-* Link
-* External Link
-* Image
-* Reference
-* Sign
+==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.
-'''Advanced formatting'''
-* Heading 1-5
-* Bullet List
-* Number List
-* Indent
-* No-Formatting
-* Line Break
-* Font size increase
-* Font sized Decrease
-* Superscript
-* Subscript
-| NewsRight =
+'''MediaWiki Help pages'''
-'''Advanced Insert'''
-* Insert Preset Gallery
-* Insert Preset Table
-* Insert Redirect
+[http://www.mediawiki.org/wiki/Manual:Gallery_of_user_styles User Styles]
-'''Special Characters (with font mapping)'''
+'''User Generated Skins'''
-* Latin
-* Latin Extended
-* IPA
-* Symbols
-* Greek
-* Cryillic
-* Arabic
-* Hebrew
-* Bangla
-* Telugu
-* Sinhala
-* Gujarati
-}}
+[http://www.memorydeleted.com/ Family site by Dan Flores]