Fit and Finish: Insight from the Ironworks User Experience Group

The Magic of User Experience

I often find lots of thought-provoking material in Mark Hurst's "Good Experience" e-newsletter.  Of particular interest recently was a video from the 2009 Gel Conference featuring slight-of-hand magician, Jamy Ian Swiss (photo at left).  Jamy talks about the importance of user empathy in good design and demonstrates this on stage by revealing a magic trick that all can see except for the willing audience volunteer.  This 25-minute video is well worth watching for anyone who truly cares about the user experience.

NASDAQ's New Online Community for Investors

NASDAQ has long had a great brand and reputation within the investor community.  But the company realized last year that it was missing an opportunity to engage its constituents in new ways and help them network with one another.  NASDAQ asked Ironworks to research their users' needs, craft a social media strategy, and build an innovative investor community (community.nasdaq.com) on the new Version 8 of Ektron CMS400.net.

I recently asked Bruce Hashim, Associate VP and General Manager for Nasdaq.com, about their experience:

Bruce, what were the business objectives that drove you to create a community site for NASDAQ?

Bruce Hashim:  Engagement. We want our audience to engage around our brand, engage with one another and engage with us.  We didn’t want our audience to come to our site, get a quote and leave, we want the audience to see the depth of our site and increase loyalty.

How to Expand/Collapse Web Parts in SharePoint Using jQuery

I was recently challenged with creating a web part zone in a page layout in which for every web part added to it, that web part took on expand/collapse functionality. The idea is that on the home page for this particular SharePoint site, users can add RSS feeds. Each of the RSS feeds is a web part, and each has many individual feed items. With the number of feeds and feed items open for modification, the information architect thought it best to collapse each feed web part by default and allow the user to expand and collapse the feed web parts as they desire.

To do this I needed to understand the HTML structure of web parts in SharePoint 2010 and write jQuery and CSS that would add the functionality and look-and-feel we were looking for. Here is the result:

Below is the jQuery script I wrote for the web part expand/collapse (or accordion) functionality.

How to Create an Accordion Web Part

An accordion web part is a web part that contains a list in which a list item can be clicked to expand and show sub items to that list item.

To the left is a screenshot of one I did recently in SharePoint using jQuery. In this example, the Group 1, Group 2, and Group 3 items have sub items. Group 2 is expanded to show its sub items. I could click on the "Group 2" label and the sub items would collapse such that the Group 2 item would look like the Group 1 and Group 3 items.

Below is the jQuery script I wrote that controls the expand/collapse (or accordion) functionality.

Using jQuery to Wrap Web Parts and Achieve the Unachievable

This is a jQuery script I wrote that looks at each web part on the page and, based on each web part's chrome setting, adds containers around the web parts. I use this script to apply stylistic treatments like rounded corners to individual web parts, not just the web part zones they belong to.

Creating Custom Select Boxes

Oh grey, drab box, why do thee tire me so?

And so begins the quest to add some spice to the look of a standard select box. Check out this post: "How to Make Custom Select Boxes". I've used this jQuery script as the basis for tricking out my select boxes on a few projects to date. For my usage I've added additional functionality for onchange event handling, among other modifications.

It's great for basic functionality and is a good starting point for more complex uses. Check it out.

Anatomy of a SharePoint 2010 Web Part

If you want to change the way your SharePoint 2010 web parts look, you will need to know how web parts are structured. There are considerable structural differences between SP 2010 web parts and those of SP 2007. Use this structure to override SharePoint's styling using your own custom CSS. Below are the anatomies of all SP 2010 web parts for the three chrome options (Title and Border, Border Only, and Title Only).

Anatomy of a SharePoint 2007 Web Part

If you want to change the way your SharePoint 2007 web parts look, you will need to know how web parts are structured. Use this structure to override SharePoint's styling using your own custom CSS. Below are the anatomies of all SP 2007 web parts for the three chrome options (Title and Border, Border Only, and Title Only).

Office Space

"This is my desk. There are many like it, but this one is mine."

Designers have a stereotypical reputation for being picky about everything. Here's a secret: It's all true. So as a designer, it gives me a great excuse to be incredibly annoying about all the finer details that normal people really don't care about. Fonts, shoes, paper, coffee, beer, the little things really DO matter! So when it comes to my  workspace, the place I spend 40+ hours a week, I want it to be a place I feel comfortable and productive.