Blogger Rich Text Editor

The new Blogger Draft text editor shares some of the behaviors of the rich text editor in Gmail, and as commenter points out, uses the same icons used in Google Pages. Blogger and Pages use beveled buttons rather than using the more minimalist style of the borderless icons in Gmail. One might argue that these controls are actually more usable because the states of toggles and the affordances supplied by buttons and dropped down menus should be obvious. The interface controls are simple and easy to use.

1. Font face selection is triggered via a drop down menu.
2. Font size is shown as relative values.
3. Font color selection.
4. Link creation dialog.
5. Selected text shown as link. When links are selected controls are displayed in the editor to modify the link.
6. Inserting an image via upload.
7. Inserting an image via URL.
8. Inserted image is shown with controls to modify the image.
9. Bulleted list format. Control is shown toggled on.
10. Tagging and post options.
11. Previewing content.
12. Text editor in context of the page.

http://blogger.com

Gmail Rich Text Editor

Google have been doing some work getting some of their interfaces to be consistent with each other. GMail and Blogger now provide similar interface behaviors and controls, with slight differences. Other applications like Google Sites and Docs continue to have different controls.

Gmail and Blogger are among the simplest of these text editor interfaces, for good reason. In blogs and email, rich text formatting should be bare bones and out of the way as much as possible. Google is successful in understanding the differentiation in these use cases from text editing in wiki/site and word processing. The controls are intuitive and usable.

1. Font face selection is triggered via an icon rather than displaying all font faces. Default font face is indicated as "Normal."
2. Relative font sizes are used rather than numerical.
3. Color selection control for font color and background/highlight color.
4. Link creation dialog.
5. Selected text shown as link. When links are selected controls are displayed in the editor to modify the link.
6. List controls are displayed, toggled on when active.
7. Running spell check highlights misspelled words.
8. Composition form displayed in context of page.

http://gmail.com

Yahoo! Mail Rich Text Editor

Yahoo! Mail's rich text editor in the composition form is clean and provides the core set of formatting options you'd need. The implementation is simple and intuitive. A few things they do differently include: rolling some commonly visible controls into drop down menus, e.g. text alignment and list style blocks.

1. Font face selection and font size are in HTML form selects.
2. Font color selection. Highlight or background color uses the same color selection control. There seems to be a bug here, where Italics is shown toggled on when the selected text is not italicized.
3. I guess Yahoo! users like emoticons. :)
4. Link creation is handled via a JavaScript dialog.
5. Text alignment is rolled into a single drop down.
6. List style in a single drop down.
7. The message composition form in the context of the full page.

http://mail.yahoo.com

Performancing Metrics Data Filtering

Performancing Metrics is a web analytics product that is focussed on Blog Systems. Their reporting views provide an highly scalable solution for data filtering that takes up very little screen real estate, yet provides a powerful mechanism for adding criteria to do granular reports. This example shows an ad-hoc filtering of the Visitors data on their demo server.

This solution, showing an inline set of filter criteria on a single row contrasts with several typical filtering techniques that can be used. From best to worst I've seen the following: search results filtering with faceted navigation, table-based filtering of data in column as is done in spreadsheets, rules-based with complex rule-generation forms. The alternative used here for filter selection is a take on filtering that I view as efficient when dealing with too many facets or columns/fields of a table than can be displayed. The removal of filters is a little more familiar, using a design pattern that is common on search results.

1. Default view.
2. Clicking "Add a Filter" control. Selecting filter type, "Country."
3. After selecting type, the possible values for Country are shown. "United Kingdom" is selected. There is also an input to enter a value, but this doesn't offer auto-completion, so correct exact values must be entered.
4. FIlter has been added.
5. Adding a second filter, now selecting "Browser."
6. Values for Browser are show. "Internet Explorer" is selected.
7. Now filter shows "United KIngdom" and "Internet Explorer." User is now viewing options for modifying the "United Kingdom" filter.
8. User removed the "United Kingdom" filter.

http://pmetrics.performancing.com/stats/visitors?site_id=1

The Filter Embedding Media in Comments

The Wall feature of user profiles in The Filter allows users to create entries with recommendations as embedded content. Users enter their comment and search for anything from an artist to a track to find content to recommend. The selected content is embedded in the comment to be played in the media player.

The interface is similar to those provided in the MTV recommendations app on Facebook and the Video embedding control in Gawker Media comments.

1. Creating a "Wall" message. Searching for media to recommend.
2. Auto-complete suggestions under "Music > Artists."
3. Inserting the recommendation embedded into the comment form.
4. The entry is posted to the wall with the embedded link to the song being recommended.

http://thefilter.com/

The Filter Rating

The rating controls in The Filter provide a slider control with a 10 point scale. Each rating is accompanied by an English language equivalent, e.g. 0% on the negative side is "Never show me this again!" and 100% on the positive side is "A new kind of awesome." Middling ratings are "Not for me", "Average", and "This is good."

1. Ratings slider control.
2. The Ratings module in the video player. More related items in carousel below.
3. Ratings module in user's music ratings page.

http://thefilter.com/

Last.fm Feedback

The feedback and bug reporting interface that Last.fm is using during its beta for the redesigned site provides a simple way to report problems and tell the company what you like. During the beta, a temporary, persistent yellow navigation bar is placed at the top of the page with links to info about the beta program, notices for known issues, and an option to leave feedback. Clicking leave feedback expands the yellow bar to show feedback options.

1. The beta program navigation bar.
2. Clicking "Leave Feedback" link expands bar to show positive and negative feedback or bug reporting options.
3. Clicking "I Like This Page" allows users to enter a positive comment with their message.
4. Clicking "I Don't Like This Page" allows users to enter a negative comment with their message.
5. Clicking "Bug/Other Feedback" allows users to descibe bug or leave other feedback.

http://beta.last.fm/home

Last.fm Top Content Charts Module

Last.fm's top artists and top songs content module appears on user profiles. The module shows a list of top content, with options in tabs to change time slice. The content module also provides options to modify settings and embed the content on an external blog or social network site.

1. Default tab, showing last 7 days of top artists with Last.fm's signature bar chart for number of plays.
2. Last 6 months tab.
3. Clicking the gear icon in the upper right shows drop down menu to modify settings or embed content widget.
4. Modifying chart settings.
5. Embedding.
6. Embed settings page.

http://www.last.fm/dashboard/

OfficeMax A-Z Index

OfficeMax displays an a-z index of the store directory in the global navigation. When users hover over any of the letters, a page-wide flyout menu appears to display entries. Clicking on one of the letters, displays the same listing of entries in full page view.

1. A-Z index displayed in global navigation. Hovering over letter shows wide flyout menu of directory entries.
2. Directory display for B's.

http://www.officemax.com/