WordPress Prototype 1 - bueltge.de · WordPress Prototype 1.1 Test Blog Name View Site Search...

WordPress Prototype 1.1

WordPress PrototypeInformation Architecture Concepts 1.1: Jun 12, 2008

Modified: Thu Jun 12 2008 | /24


Contents

Table of ContentsGlobal Structure

Dashboard, 3-columnDashboard, 2-column

Comments, All

Notes Dashboard/Comments

Alternative 01Write New PostWrite New Post (with notes)Write New Post / Full ScreenWrite New Post / Edit ViewEdit View (with notes)

Alternative 02Write New PostWrite New Post / SettingsWrite New Post / Full Screen

Add Media FlowMedia LibraryMedia Library (with notes)

03

0405

06

07

080910-1112-1314-15

16171819-20

21222324

WP My Account My Dashboard New Post Comments (6) Help Howdy, User Name! | Log Out < Browse WP Blogs >

Dashboard

CONTENT Posts Comments Media Library Links Pages

TEMPLATES Themes Widgets Edit CSS

UTILITIES Inbox Stats Tags Categories Users Settings


Global Structure

Notes


Test Blog Name SearchView Site

WordPress Footer

Write New PostDashboard

Content Area

1.0

2.0

The following describes the overall structure of the navigation for the admin prototype.

1.0The global admin bar will take the place of some of the more common shortcuts—New Post, Comments, and Account settings.

2.0Search will become global, being accessible at the top level throughout the admin. On specific screen types (e.g., Posts, Comments), users will have the option to search all or scope their search to that section.

3.0This prototype assumes that the user has one blog only, not multiple blog.s

4.0The navigation has been flattened and simplified, moving all sub-options (e.g., Create New) to the screens themselves. Users can collapse and expand options, but by default, all options will be dispayed.

5.0The wireframes are to scale: the blue dotted line indicates an approximate 800x600 viewable area, while the larger aspect of the page indicates the 1024x768 area. Throughout, all key funtionality is included within these primary areas.

6.0Each appropriate screen will have an "add" button" in the same location—"write new post," "add link," and "add media" are just some examples.

3.0

4.0

5.0

5.0

6.0


Dashboard





Dashboard, 3-column Alternative

Notes



WordPress Footer

Searches

Developer's Blog6/12/08 4:34pm Lorem ipsum dolor sit amet consecteteur...

6/12/08 3:54pm Lorem ipsum dolor sit amet consecteteur...


Blog Surfer6/12/08 4:34pm Lorem ipsum dolor sit amet consecteteur...



Tag Surfer6/12/08 4:34pm Lorem ipsum dolor sit amet consecteteur...



Popular BlogsA hot blog's name goes here

This Is A Blog Name

Blog Name Goes Here

This Is A Blog Name

Referrers Top Posts

Views Today: 374Total Views: 96,433Busiest Day: March 12, 2008 (938)

TotalsPosts: 12,941Comments: 28,198Tags: 47Categories: 18Media Uploads: 112Pages: 6Drafts: 19Day | Week | Month

Overview

Title

Post

Tags

Recent Drafts:Post Name, Post Name, Post Name, Post Name

QuickPress

PublishSave

Inbox

View All View All Drafts

Statistics

View All Statistics

WordPress Community

View All Community Feeds

Your take on the evolution of Dr. Who is ridiculous. The fact that the actors are getting younger has nothing to do with Gallifrey lore, and everything to do with celebrity culture. more...-l. monroe, 4:19pm 6/9/08

Announcement: WordPress introduces new features for mobile blogging.

Great review. You left out a few things, but maybe you were trying to avoid spoilers? Will check back later in week. -matt, 2:46pm 6/9/08

nice picture!-caped crusader, 3:17pm 6/8/08

Archive


Change SettingsDashboard

The dashboard is intended to provide users with a more useful and actionable set of modules within the viewable area. This option shows a 3-column layout.

See page 7 for notes.


Dashboard





Dashboard, 2-column Alternative

Notes



WordPress Footer

Title

Post

Recent drafts:Post Name, Post Name, Post Name, Post Name | View All

Inbox Statistics

QuickPress

WordPress Community

Change SettingsDashboard

View All

View All

View All

PublishSave

This option shows the same functionality in a 2-column layout.


Dashboard





Comments, All

Notes



WordPress Footer

Showing 1-10 of 123 Page 1 2 3 ... 12 | Next

Your take on the evolution of Dr. Who is ridiculous. The fact that the actors are getting younger has nothing to do with Gallifrey lore, and everything to do with celebrity culture. Lorem ipsum dolor sit amet consecteteur. l. monroe | [email protected] | 198.168.1.1

Approve | Edit | Flag for Follow-up | Mark as Spam | Delete

Great review. You left out a few things, but maybe you were trying to avoid spoilers? Will check back later in week. matt | [email protected] | 198.131.0.33


nice picture!

capedcrusader | [email protected] | 168.148.1.9


This is the text of a comment. This is the text of a comment. This is the text of a comment. This is the text of a comment. This is the text of a comment. This is the text of a comment. This is the text of a comment. This is the text of a comment.

profilelink | [email protected] | IP Address


This is the text of a comment. This is the text of a comment. This is the text of a comment. This is the text of a comment.

profilelink | [email protected] | IP Address


Actions In Response To This Post

"Doctor Who A Sign of the Times" (23)6/7/08 at 11:34am

"Original Post Title" (# comments)MM/DD/YY at HH:MMxm




Comment Submitted

6/9/08 at 4:19pm

MM/DD/YY at HH:MMxm

MM/DD/YY at HH:MMxm

MM/DD/YY at HH:MMxm

MM/DD/YY at HH:MMxm

Actions

Apply

Show All Comments | Awaiting Moderation (2) | Approved | Spam Advanced Filters

Showing 1-10 of 123 Page 1 2 3 ... 12 | NextApply

The comments screen intends to make the actions more visible, and make the comment itself more visible.

See page 7 for notes.

Comments



Dashboard/Comments (notes)

Notes on Dashboard and Comments ScreensDashboardThe Dashboard content area is comprised of modules. The intention is for the user to be able to choose the placement and content of the modules. In this illustration, a “Change Settings” link in the upper right provides access to an engine for changing layout of and items within each module. An alternate option would be to provide links within each module, such as icons to edit or to remove the module [preferred by Jane]. Drag and drop functionality would be ideal, although it would require further consideration based on the number of modules and the optimum size/shape of each. For the sake of this prototype, drag and drop should not be enabled. The Dashboard is designed to require minimal scrolling, and for the main three modules to be viewable even in an 800x600 browser window.

InboxNew to the prototype is the concept of an Inbox. The Inbox offers a quick preview of items needing attention, such as new comments (with or without moderation), system announcements, draft posts by other authors needing approval, etc. Settings for this module would include choosing which types of information to provide updates for. In addition, the option to receive Inbox alerts via RSS should be offered. Once new items have been seen, the user can check the box and click to archive the item notification, removing it from the dashboard (but not deleting the actual item being referenced). Clicking on the actual item will load the page for the appropriate action, such as the Comments screen (anchored to the particular comment). The View All link at the bottom of the module links to a screen providing access to the archive. [Add Settings link in each of these bars instead of global settings?]

QuickPressThe QuickPress module allows a rapid posting mechanism from the Dashboard. In this view, the fields shown are title, post text and tags, with the option to save as draft or publish to live site. In the settings, the user would be able to choose which fields were displayed by default in the QuickPress (with only certain fields enabled). Near the bottom of the module, a list of recent drafts is displayed. If a user saves a draft using QuickPress, the draft title will appear in the recent drafts lists immediately. The View All link at the bottom of the module goes to the Posts page, with the Drafts filter selected.

StatisticsStatistics are displayed in a tabbed module, providing users with access to more of their stats without requiring additional scrolling. The overview tab displays the usage chart that is displayed on Dashboard 2.5, as well as several overview statistics with links to appropriate pages. Other tabs display Top Posts, Referrers and Searches, though the user would be able to choose which stats to display on the remaining tabs, as well as deciding which tab should be the default view. View All goes to the main Stats page.

Information DisplayThe columnar display of comment information is somewhat different from 2.5 in that. In this prototype version, the comment text gains priority and is the first thing listed, rather than the comment author details. These details appear directly below the comment text. Both the user icon and their profile name link to their WordPress profile if one exists. Email address link generates mailto: and IP address functions as it does currently. Action links have been moved to fall directly below the comment author information. The intention is to take advantage of the natural scan pattern when a user is reviewing new comments. If possible, it would ideal for the user to be able to click on the comment text to initiate inline editing as some plug-ins allow.

The right hand columns display the date/time the comment was posted and the original post’s date/time, along with the original post title and number of comments. These two columns may be used to sort the comments being viewed (in reverse chronological order). The default sort view uses the comment’s timestamp. Clicking the post title takes user to that post’s edit screen, while clicking on the number next to the title takes the user to the comments screen that lists all comments for that post.

Acting on CommentsCheckboxes along left edge of comments table may be use in conjunctions with the Actions dropdown menu and action button to batch manage comments. Actions available in the menu correspond to the text links beneath each comment (approve, flag for follow-up, mark as spam, etc.).

WordPress CommunityThe WordPress Community module is intended to provide user-selected feeds from choices such as the WP developer’s blog, Blog Surfer, Tag Surfer, New Blogs, Most Active Blogs, Most Popular Blogs, etc. The setting for this module allow the user to identify which feeds to display as well as the number of items per feed. The format for displayed items will be determined by the individual feeds.

CommentsThe Comments page has generally the same functions and information available to users, though the format has changed somewhat. Instead of a text page header, the content area begins with the list of main filtered views available (all, awaiting moderation, approved, spam), with the default view in bold. Advanced filters, such as date range are available through the “Advanced Filters” link below these headings. [Note: what if instead, there was a single row of filter menus, no text links?] Pagination functions the same as currently. Information DisplayThe columnar display of comment information is somewhat different from 2.5 in that. In this prototype version, the comment text gains priority and is the first thing listed, rather than the comment author details. These details appear directly below the comment text. Both the user icon and their profile name link to their WordPress profile if one exists. Email address link generates mailto: and IP address functions as it does currently. Action links have been moved to fall directly below the comment author information. The intention is to take advantage of the natural scan pattern when a user is reviewing new comments. If possible, it would ideal for the user to be able to click on the comment text to initiate inline editing as some plug-ins allow.

The right hand columns display the date/time the comment was posted and the original post’s date/time, along with the original post title and number of comments. These two columns may be used to sort the comments being viewed (in reverse chronological order). The default sort view uses the comment’s timestamp. Clicking the post title takes user to that post’s edit screen, while clicking on the number next to the title takes the user to the comments screen that lists all comments for that post.

Acting on CommentsCheckboxes along left edge of comments table may be use in conjunctions with the Actions dropdown menu and action button to batch manage comments. Actions available in the menu correspond to the text links beneath each comment (approve, flag for follow-up, mark as spam, etc.).



Write New Post: Alternative 01

Posts, Alternative 01This version shows a somewhat conservative approach to the Write Post screen.


Dashboard



UTILITIES Stats Tags Categories Users Settings


Write New Post, Alternative 01

Notes


Test Blog Name All Search

View Site

WordPress Footer

The Write New Post screen has been modified to bring key functionality within the viewable area, and to allow users more control over how the screen is configured.

See the following page for notes.Dashboard

CONTENT Posts Comments Media Links Pages

TEMPLATES

UTILITIES

Title

Post

Permalink: http://sitename.com/2008/06/03/

Excerpt

Choose from tagsWYSIWYG Toolbar

Posts / Write New Post

Posts Only

Visual HTML

Excerpts are optional hand-crafted summaries of your content. You can use them in your template.

Comments on this Post

Tags

PublishSave

Add new tag Add

Separate tags with commas

Categories

Category NameCategory NameCategory NameCategory NameCategory Name

Add new category

Trackbacks & Pings

Post Author

Add Media

Posts

Timestamp: Today, June 12, 2008 (Change)

Privacy Options

Preview Post

Status/Wordcount Bar

Show Settings


Dashboard





Write New Post, Alternative 01 (with notes)

Notes



View Site

WordPress Footer

Show Settings

The Write New Post screen has been modified to bring key functionality within the viewable area, and to allow users more control over how the screen is configured.

1.0All module are draggable, allowing users to configure the screen at will.

2.0Clicking Preview Post should autosave the post or page.

3.0Trackbacks and Pings are combined, and comments on this page (with corresponding settings) have been added.

4.0Both the Add Media and the Save/Publishing options have been greatly simplified, creating a more streamlined set of options without removing functionality.

Dashboard


TEMPLATES

UTILITIES

Title

Post


Excerpt



Posts Only

Visual HTML



Tags

PublishSave

Add new tag Add


Categories


Add new category

Trackbacks & Pings

Post Author

Add Media

Posts


Privacy Options

Preview Post


1.02.0

3.04.0

4.0


Dashboard




Write New Post, Alternative 01 / Full Screen

Notes



View Site

Timestamp:

Dashboard


TEMPLATES

UTILITIES

Title

Post


Excerpt

WYSIWYG Toolbar


Posts Only

Visual HTML


PublishSave

Add Media

Posts

Users can adjust the modules to make primary entry the fields full-width.


June 12 2008 2616 Cancel, @ : OK


Allow comments on this post

Show Settings

Preview Post

Dashboard





WordPress Footer

Categories Post Author


Trackbacks & Pings Privacy Options

Categories


Dashboard




Write New Post, Alternative 01 / Edit View

Notes



View Site


Dashboard


TEMPLATES

UTILITIES

Title

Title of Post

Post

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

Permalink: http://sitename.com/2008/06/03/title-of-post (Change)

Excerpt



Posts Only

Visual HTML


Tags

Save

Add new tag Add


Categories


Add new category

Trackbacks & Pings

Post Author

Add Media

Posts

Preview Post

The Write Screen has subtle changes once a post has been published.

See the following page for notes.



SUBMITTEDCOMMENTS

Media added to this Post

amuse_20x200.jpg Remove | Edit

Kind of Blue Remove | Edit

longer-test-filename.mov Remove | Edit

Delete this Post


Show Settings

Dashboard





WordPress Footer

Post Author

Privacy Options

l. monroe | [email protected] | 198.168.1.1

Approve | Edit | Mark as Read | Mark as Spam | Delete

It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.MM/DD/YY at mm:hh AM/PM

6/9/08 at 4:19pmSUBMITTEDCOMMENTS




6/9/08 at 4:19pm




6/9/08 at 4:19pm




6/9/08 at 4:19pm




6/9/08 at 4:19pm


Dashboard




Write New Post, Alternative 01 / Edit View (with notes)

Notes



View Site


Dashboard


TEMPLATES

UTILITIES

Title

Title of Post

Post

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

Permalink: http://sitename.com/2008/06/03/title-of-post (Change)

Excerpt



Posts Only

Visual HTML


Tags

Save

Add new tag Add


Categories


Add new category

Trackbacks & Pings

Post Author

Add Media

Posts

Preview Post

The Write Screen has subtle changes once a post has been published.

1.0Media added to this post will be displayed here. Users can view, remove, or edit the details—doing so would launch the lightbox window.

2.0Delete Post link would be displayed once post is published.

3.0The comments area is populated once the user has comments on this post. Both viewing and moderation are available from this screen.



SUBMITTEDCOMMENTS

Media added to this Post

amuse_20x200.jpg Remove | Edit

Kind of Blue Remove | Edit

longer-test-filename.mov Remove | Edit

Delete this Post


Show Settings

2.0

1.0

3.0

Dashboard





WordPress Footer

Post Author

Privacy Options




6/9/08 at 4:19pmSUBMITTEDCOMMENTS




6/9/08 at 4:19pm




6/9/08 at 4:19pm




6/9/08 at 4:19pm




6/9/08 at 4:19pm



Write New Post: Alternative 02

Posts, Alternative 02This version shows a more application-style approach to the Write Post screen.



Write New Post, Alternative 02


Dashboard





View Site

Dashboard


TEMPLATES

UTILITIES

Title

Post


Excerpt

WYSIWYG Toolbar


Posts Only

Visual HTML

Add Media

Posts

Notes

This version of the Write New Post screen shows a different approach to the Save/Publish" functions.

In order to keep the primary save and publishing functions above the fold, they are contained in a bottom bounding bar that stays present all the time. (See Facebook and the Panic/Goods Store for examples.)


Show Settings

PublishSaveTimestamp: Today, June 12, 2008 (Change)Preview this Post



Write New Post, Alternative 02 / Full Screen / Showing Settings


Dashboard





View Site

Dashboard


TEMPLATES

UTILITIESTitle

Post


WYSIWYG Toolbar


Posts Only

Visual HTML

Add Media

Posts

Notes

Settings allows users to hide and show the options they have for this page. They can choose which modules appear and still have the opportunity to order and re-order the modules by dragging them.

Users who have single-author blog, for example, can choose to turn off the "Post Author" feature since they will never need the ability to choose authors per post.

Hide Settings

Privacy Options PublishSaveTimestamp: Today, June 12, 2008 (Change)Preview this Post

Show on screen:

ExcerptTags

Categories Comments Trackbacks & Pings Post Author

Privacy SettingsWidget Name

Media Added to PostWidget Name



Write New Post, Alternative 02 / Full Screen


Dashboard





View Site

Dashboard


TEMPLATES

UTILITIES

Title

Post


Excerpt

WYSIWYG Toolbar


Posts Only

Visual HTML


Add Media

Posts

Notes

If the screen is expanded to a given height, the buttons would continue to be displayed at the bottom of the screen.


Show Settings

Choose from tags

Tags

Add new tag Add


Categories

Category NameCategory Name

Dashboard






Choose from tags

Add new tag Add



Add new category

Post Author Trackbacks & Pings

Privacy Options

PublishSaveTimestamp: Today, June 12, 2008 (Change)Preview this Post



Add Media Flow

Insert into Post

LeftNone

Cumulus clouds from VeerCaption

Alignment

Alternate text (e.g., Blue skies)

Title

Save and Add Another

amuse_20x200.jpg

Centered Right

http://name.files.wordpress.com/2008/06/amuse_20x200.jpgPath

Add Media X Add Media X01: Add MediaUser has not uploaded media.

03: Add detail- Image filename displayed. Browse button still displayed.- Title field is taken from image filename.- Caption added by user.

04: Added- User chooses to add another file, and "Added" tab displayed.- User uploaded a video file type, and fields display accordingly.

Insert into Post

LeftNone

amuse_20x200.jpg

Caption

Alignment


Title


Add Media

amuse_20x200.jpg

Centered Right

X 02: Added image- User uploaded an image file.- System detects image file type, and displays appropriate fields.

Add Media X

Insert into Post

Newest film releaseCaption


Title


Hillmancurtis Films: Bridge

Size Select Size

BrowseChoose a file

Or select from your Media Library

filename.gif

filename.gif

File Name

filename.gif

filename.gif

filename.gif

filename.gif

filename.gif

Previous | 1 2 3 ... 12 | Next

Add Media | Added (1)

http://name.files.wordpress.com/2008/06/amuse_20x200.jpgPath

(Remove | Change)

amuse_20x200.jpg (Remove | Change)

hillman_curtis_bridge.mov (Remove | Change)


Dashboard





Media Library

Notes



View Site

WordPress Footer

Media LibraryAll Media | Images | Video | Audio

Dashboard


TEMPLATES

UTILITIES

Media Only

Change Settings

06/02/08Tag, Tag, Tag, Tag [Post Title], [06/02/08][Post Title], [04/14/08]


Media

Image TitlePNG | 50 x 50

Tags Appears With Actions

Edit | Get permalink

06/01/08(See All 17)

Tag, Tag, Tag, Tag [Post Title], [MM/DD/YY][Post Title], [MM/DD/YY]


[MM/DD/YY]Tag, Tag, Tag, Tag [Post Title], [MM/DD/YY][Post Title], [MM/DD/YY]












Page 1 2 3 ... 12 | Next

Select All











Date Added

Delete

The Media Library displays all media uploaded via the Pages and Posts area, as well as media uploaded directly here.

See the following page for notes.

Media Library

Add Media


Dashboard





Media Library (with notes)

Notes



View Site

WordPress Footer

Media LibraryAll Media | Images | Video | Audio

Dashboard


TEMPLATES

UTILITIES

Media Only

Change Settings

06/02/08Tag, Tag, Tag, Tag [Post Title], [06/02/08][Post Title], [04/14/08]


Media


Tags Appears With Actions


06/01/08(See All 17)

Tag, Tag, Tag, Tag [Post Title], [MM/DD/YY][Post Title], [MM/DD/YY]














Page 1 2 3 ... 12 | Next

Select All











Date Added

Delete

The Media Library displays all media uploaded via the Pages and Posts area, as well as media uploaded directly here.

1.0It merits some discussion, but we're suggesting that tags might replace "description," as tags are a functiona

2.0An edit link has been added. Depending on the layout of the Comments area, we may opt to add these "action" link directly under the image name and format.

Media Library

Add Media

1.0 2.0

WordPress Prototype 1 - bueltge.de · WordPress Prototype 1.1 Test Blog Name View Site Search...

Documents

Transcript of WordPress Prototype 1 - bueltge.de · WordPress Prototype 1.1 Test Blog Name View Site Search...