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:

Principles Not Included in Design Journal #1

Accessibility:
Remember the Milk has been designed for above average web usesr; tech-savy individuals who are comfortable with a range of cutting edge products. Thus, I would argue that RTM was not designed with accessibility in mind. It was designed to meet needs of a niche market, not “to be usable, without modification, by as many people as possible”.

Advance Organizer:
In the RTM application, all of the information it displays has been provided by the user. There is no new information for the users to learn and as such, the advance organizer principle does not apply.

Attractiveness Bias:
There are no people (just a cow) anywhere in the Remember the Milk application. As such the attractiveness bias principle does not apply.

Closure:
I could not find an obvious example of closure anywhere in the Remember the Milk application. It seems that the RTM designers were explicit in ensuring that the tool's features could easily be perceived as "multiple, individual elements".

Cognitive Dissonance:
RTM is, essentially, the digital equivalent of a pen and paper to do list. For this reason, there is limited need for users to "seek consistency among [their] attitudes, thoughts and beliefs" about their "to dos" - they just write them down and cross them off as they are completed. Thus, the principle of "cognitive dissonance" does not apply.

Common Fate:
Generally speaking, there is very limited "motion" in the Remember the Milk tool. Users can "move" tasks in the sense that they can individually move them up and down by changing their priority. but this provides limited, if any, for grouping by common fate. Thus, the principle would not apply.

Comparison

The screenshots above show the main portion of the Remember the Milk interface, one showing outstanding tasks for "Today" and another showing outstanding tasks"Tomorrow". Clicking on either Today, tomorrow or overdue reveals the tasks due on that particular day during that time frame.

This interface displays task data in a "single context" so that users can compare task data for each day and "notice the subtle differences and patterns in the data...".

Confirmation

The above screenshot shows an example of confirmation. When a user deletes a task, the bar shown below appears across the top of the screen until the user performs another function in the tool.



Though the bar is not the blatant example of confirmation typically seen in software - IE: "Are you sure you want to delete the task?" - I would argue that the bar represents a superior form of it.

Executing the confirmation in this manner requires less interaction from the user. It assumes that the user has performed the correct function and immediately allows the user to "unconfirm" the action if he or she has made the wrong choice.

Essentially, this feature of RTM assumes that users are smart - and they are - a factor often overlooked in typical software design.

Colour

In the above screen shot, you can see small, gray and coloured boxes to the right of the listed tasks. You'll notice that the top 3 tasks have different colours than the rest (red, navy blue, light blue).

In this case, the colour is used to "attract attention, group elements...[and] indicate meaning"as the coloured boxes indicate the priority of task it sits beside.

The RTM colour legend is as follows:

Priority 0 (No Priority) - Grey
Priority 1 - Red
Priority 2 - Navy Blue
Priority 3 - Light Blue

Archetypes & Baby-Face Bias:

The Remember the Milk logo is comprised of an image and text that both appear to be hand-drawn, almost as if they were created by a child. The logo uses the baby face bias (the cow head) combined with the hand-written text to appeal to the archetype of child made drawings.

In practice, these principles make users of Remember the Milk perceive the RTM brand as being honest and innocent. In turn, these perceptions would impact the way the users feel about the functions of tool the itself - IE: they might be forgiving about small application glitches and bugs.

Chunking

In the above screen shot, you can see that the tasks are grouped under categories according to their due dates. The categories in this example (Today, Tomorrow and Never) are separated by a small, faint gray line and the tasks themselves are indented under the category names .

The gray lines and bolded category names separate the information - the tasks due on a particular day - into chunks and make the information "easier to process and remember" for the user.

Alignment

The screen shot above shows the primary interface of the Remember the Milk application. You can see that the various types of information (individual tasks, tasks overview, inbox, key) are placed and aligned to different horizontal and vertical areas of the screen.

For example, the main task information is aligned along the left side of the screen whereas, the task overview information is aligned along the right side of the screen. These alignments separate the information and allow users to differentiate between the types of data communicated on the page.

Affordance & Classical Conditioning

As shown in the screen shot above the Remember the Milk iGoogle gadget displays tasks in a vertical list sorted by the completion date inputted by the user. Beside each of the tasks is a small arrow that when clicked, launches a drop down menu of options for that particular task.

These arrows afford clicking. The downward arrow informs the user that there is more information contained "underneath" or "below" it and as a result, he or she clicks it to access to the new information.

The arrows are also an example of classical conditioning. A drop down menu indicated by a downward arrow is very common in computer software and as such users " just know"
that it is necessary to click the arrow order to access the information it contains.

Aesthetic-Usability Effect

RTM is a good lookin’ web app! It has a clean, uncluttered interface, just the right amount of colour and a cute, ‘reminds me of when I was young’ type cow head logo in the upper-left corner of the main display. Though these features don’t directly impact the tool’s primary functions –it would work just fine without them – they make RTM look more appealing and easy to use.

For example, the first screenshot below shows the applications main interface in its original form. The second shows the same interface without the style-sheet enabled. Not surprisingly, the second, no style- sheet version of RTM looks unappealing, confusing and even difficult to use. This is a perfect example of the Aesthetic-Usability Effect.

First Screenshot (CSS Style-sheet Enabled):


Second Screenshot (CSS Style-sheet Disabled):

The 80/20 Rule

Remember the Milk has a number of very cool options, sleek web 2.0’ish features that go above and beyond your typical task manager. However, only a fraction of these features are available through the tool’s iGoogle gadget, the interface I use almost exclusively to access my RTM tasks.

This isn’t a problem though as the few features that are in the gadget happen to be the ones I use most. I don’t think this is a coincidence. The RTM iGoogle gadget is a classic example of the 80/20 rule at work. It allows access to the 20% of RTM’s features that will be accessed 80% of the time by users.

Off to the Races: Design Journal #1 Introduction

For Design Journal #1, I opted to review Remember the Milk, a web-based task management tool designed to help people get more organized. It offers a few key advantages over traditional computerized to-do lists, all of which revolve around the idea of being able to access your tasks from any digital device or application.

Having formerly been a compulsive Outlook user (and admittedly, somewhat of a nerd), I made the transition to Remember the Milk this fall with nervous hesitation. After all, the fate of my school projects, errands and general musings depended on it. To my surprise, the change came with relative ease; Remember the Milk is a simple but extremely well-designed and intuitive application. It works almost perfectly for me and I am uber-stoked to be moving away from software made by 'the soft' (Note: The software is still in beta so the almost is to be expected).

Over the next ten or so posts, I'll be reviewing what it is, specifically, that makes Remember the Milk such a great design. I'll also take a stab at addressing some of its shortcomings; features of the design that I suspect (read: hope) that the company will revise in future iterations of the software. Stay tuned.