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.

Additional Design Journal #2 Principles

Control

The control principle is used effectively in the Itunes store. As shown in the screen shot below, users can choose between “Buy and download using 1-Click” or “Buy using a Shopping Cart”. They can control the level of confirmation required on their part to complete a successful transaction. This provides both beginner and advanced users with an Itunes shopping experience that meets their needs.

Entry Point

The “New Releases” section of the Itunes store acts as a clear entry point into the store portion of the application. As shown in the screen shot below, it uses progressive lures – a headline, images and colour – to attract people to the newly released albums.

Expectation Effect

The home screen of the Itunes store displays music and movie files available for purchase under the headings of “Top TV Episodes”, "Top Movie Rentals", “Top Songs”, and “What’s Hot?”. These headings are an example of the expectation effect. When users access the store, they expect the featured songs and movies to be of some quality because they are popular among other users.

Exposure Effect

In the screen shot of the Itunes store shown below, music by Beyonce is featured in 4 different sections of the application. This is an example of the exposure effect. The Itunes staff (and presumably, Beyonce’s record label) aim to increase the likability and potential purchase of her music by increasing the number of times users view her name and/or picture in the store.

Fitt’s Law

The scroll-bar along the right side of the Itunes Music Library uses Fitt’s Law to generate a realistic scrolling movement based on the size of the user’s music collection. For example, if the user’s collection is large, and he or she wishes to view their whole collection, the user must scroll for a longer period of time or at a quicker rate than would be required if the collection were smaller.

Forgiveness

When purchasing items in the Itunes store, the application forgives accidental clicks made by the user. For example, when a user clicks “Buy Song”, the application displays the dialog box shown below. This confirms the intent of the click and forgives any actions he or she may have made unintentionally.

Flexibility-Usability Tradeoff

The core Itunes application provides users with the flexibility to view their music collection in one of three ways:

1) In a text-based list

2) In a grid of album covers

3) By album cover in “Cover Flow” mode

Though this flexibility provides a range of options for users, it also reduces the usability of the design. It increases the number of options available to the user and as a result, requires that he or she make a greater number of decisions while interacting with the application. Thus, it increases the complexity of the application which in turn, increases the chance of user error.

Five Hat Racks

The five hat racks principle is very evident in the design of the Itunes music library. In fact, the library demonstrates an almost literal translation of the five hat racks principle into a design concept.

As shown in the screen shot below, the application displays numerous pieces of information about the media files contained in the users library. The information includes but is not limited to:

• Genre (“Category” in the text)
• Time, Last Played or Year (“Time” in the text)
• Album (“Location” in the text)
• Rating (“Continum” in the text)

These categories (and more) are displayed as headings across the top of the music library. When a user clicks on a heading, the application reorganizes the music files according to that heading in either ascending or descending order.

Errors

The Itunes design includes provisions for slip errors made by the user. Specifically, the design addresses errors of action that could occur when a user is navigating through their library. For example, if a user presses the “delete” key or right-clicks on an item and then selects delete, he or she is presented with the dialog box shown below.

This dialog box confirms that the action requested by the user – deleting a file – is intended and as a result, it minimizes the chance of an action-type error being made by the user.

Cost-Benefit

Itunes allows users to share their media libraries over a local network with other Itunes users. This sharing feature provides users with the ability to play the music and video files from another without any sort of cable connection.

It is important to note that the sharing feature is disabled by default, presumably for security reasons. As shown in the screenshot below, users must navigate through the Itunes menu if they wish to enable sharing.

This is a perfect example of the cost-benefit principle. The Itunes designers knew that those wishing to share their libraries would perceive the benefit of a having a shared library as outweighing the cost of navigating through a series of menus.

Constraint

Though the constraint principle is used throughout the Itunes design, the most obvious application is in the navigation of the Itunes library. When a user is viewing his or her music collection in “list view”, a scroll bar appears along the right side of application as shown in the screenshot below.

Using the scroll bar, the user can view the contents of his or her library by dragging the scroll bar up and down the right side of the application. The scroll bar stops when the user has reached the beginning or the end of the library.

The stop of the scroll bar is a physical constraint. It limits the range of actions a user can take by using a vertical, linear path to represent the size of the user’s library.

Consistency

The consistency principle is used effectively in the design of the Itunes store and library. As shown in the screenshots below, the appearance and navigation of both features are very similar.

The store and library utilize a design that is consistent terms of both aesthetics and functionality. This consistency provides users with a uniform experience across both features of the application and ultimately, allows them to feel comfortable when engaged in either activity.

The Library:

The Store: