Additional Design Journal #3 Principles

Iteration

Like any piece of software, Wordpress has gone through a number of different design iterations. The screen shots below show the changes that have been made to the Wordpress administration panel between versions 2.3 and the 2.6.





Legibility

The Wordpress designers used the legibility principle throughout the design of the application. In all cases, text is displayed in a manner that is clear and easy for users to read.

Mimicry

The Wordpress text editor very closely mimics the design of the Wordpad text editor in terms of both aesthetics and functionality. This is an example of both surface and functional mimicry that allows for increases in user-familiarity and usability.

Wordpress Text Editor:


Wordpad Text Editor:



Ockham's Razor

Looking back at images provided for the Iteration principle, it is clear that the first screen shot - the more recent version of Wordpress - has a simpler interface. This is an example of the Ockham's Razor principle. In later versions, the Wordpress designers chose to simplify the appearance of the administration panel while simultaneously, retaining the same functionality.

Rule of Thirds

As shown in the screen shot below, the primary elements of the Wordpress administration panel can be divided into thirds, a design feature that makes the interface more aesthetically pleasing for users.




Self-Similarity

By their nature, web applications like Wordpress are self-similar. Because of the way web designs are laid out and styled - using CSS style tags and classes - it is only practical that design elements appear similar to one another.

Redundancy

Wordpress provides access to it's main feature, writing posts, in multiple aways. As shown in the screen shot below, users can access the "Write Post" function on the Wordpress dashboard page by clicking "Write" or by clicking "Write a New Post".

This is an example of "redundancy". The design provides users with access to the write post function in two different ways so that they can still access the feature if one of the links fails.

Iconic Representation

The Wordpress post editor uses iconic representation to showcase the various functions available to users as they compose the content for their blog posts.

As shown in the screen shots below, icons are used to represent the typical functions available in most text editors (bold, italics, etc.) as well as the functionality for inserting different types of media.

The icons provide users with a familiar, easily recallable interface for accessing the features of the Wordpress post editor.

Highlighting

Wordpress tells users to update their software when a new version of the code has been released. It does this by displaying an update message across the top of the Wordpress administration panel.

As shown in the screen shot below, the update message is highlighted using a background colour that is different from those used in the surrounding elements. This allows users to clearly distinguish between the update message and other administration panel features.

Hierarchy

Wordpress provides users with the ability to group their blog posts according to categories or subcategories. As shown in the screen shot below, the categories are displayed to users in a hierarchy of the categories available on the blog.

Specifically, the categories are displayed in a stair hierarchy. The child or sub categories are stacked below and to the right of the the parent categories. This provides users with the ability to quickly navigate the available categories while simultaneously, understanding the relationships that exist between parent and subcategories.

Gutenberg Diagram

In the Wordpress administration panel, the software displays the title of the active blog in the top-left corner of the screen. For example, in the screen shot shown below, the title of the blog, "Canadian Baseball Hall of Fame and Museum" is displayed in large typeface in the top-left corner of the interface. This is an application of the Gutenberg diagram principle.

The blog title is placed in the primary optical area of the display, ensuring that users immediately understand "where" they are when first presented with the admin interface.

Good Continuation

For Design Journal #3, I have chosen to review Wordpress, an open source blog publishing platform that is used commonly by bloggers across the web.

The Wordpress Administrative panel uses good continuation to group the features of the software according to their function. As shown in the screen shot below, the Wordpress dashboard displays the "Write", "Manage", "Design" and "Comments" links along one straight line while displaying the "Logout", "Help", "Forums" and "Turbo" links along another.

This design separates the sets of links for users and tells them that there is some degree of interrelatedness between their functions.