Fit and Finish: Insight from the Ironworks User Experience Group

User Scan-ability

Those of us who work on web strategy and design talk a lot about how pages should be constructed to make it easy for users to scan a page.  Indeed, page hierarchy, limited menus, bullet-ed lists, and informative headlines are among the things that make it easier for website visitors to assess what may be of interest on a given page.

However, do we also recognize that there are great differences among users in their ability to scan web pages?  Having observed a lot of participants while conducting usability tests over the years, I have noticed that individuals vary widely in their ability to look a page and make quick decisions regarding their options.

Some people are able to quickly take in the whole page (even if they have to scroll down) and are able to answer questions about almost anything on that page.  Others can look at the page for ten minutes and still not know that a specific option exists.  It can be right there in front them (they can even roll their mouse right over it) and they still don't see it.

Although basic intelligence and web skills are factors, I have observed that something more fundamental is also going on here.  It may have more to do with the way each of us perceives the world around us and the way that we each of us learn.  Some of us are simultaneous learners and are adept at skimming a book and grasping the big picture; others are sequential learners who need to understand the various plot twists to appreciate the story.  Simultaneous learners prefer maps; sequential learners do better with directions.

Relative to the user experience on a website, we need to take this into account when designing for user experience, knowing that each user will perceive the site differently.  Simultaneous users will appreciate site maps, mega-menus and search.  Sequential learners will likely opt for clear and logical navigation as they step through the site.

Bottom line:  Just as people learn differently, your site visitors will engage with your website in different ways.  Keep this in mind and provide options for both simultaneous and sequential learners.

Footnote:  Much has been written in the education field about learning styles.  Here are a few resources that may be helpful for those who want to learn more.

• http://en.wikipedia.org/wiki/Learning_styles
• http://www.mathpower.com/brain.htm
• Teaching and Learning Styles in Second Life

Using jQuery to Wrap Web Parts and Achieve the Unachievable: The Packaged Solution

Introduction

During the course of a customization and branding effort in SharePoint you are likely to find that you want to style web parts to look different from (Dare I say better than?) the stylistic treatment default to SharePoint.

In my quest for finding a way to improve the look of web parts, I discovered Microsoft’s markup for web parts does not allow for much web part style manipulation, as there are not enough CSS hooks.  Nor could I modify the HTML inside a web part zone in order to wrap web parts with <div> tags for styling purposes—you can’t edit the contents of web part zone directly.  So I had to settle with wrapping <div> tags with classes around web part zones, which got me where I wanted to go somewhat, but it failed to allow me to apply treatments like background colors, borders, rounded corners, and drop shadows to individual web parts—I could only apply them to the wrapper around the web part zone.

So I wrote some jQuery to inject into the DOM <div> tags and classes for web parts that I could then use as hooks in my CSS.

On March 17, 2010, EndUserSharePoint.com published a post I wrote about wrapping web parts with jQuery that included the necessary JavaScript function, but not much else.  I apologize my post did not include the other assets needed, like the CSS and images.  Moreover, with that post I had taken the approach of creating a custom master page from which my function would be called (my usual approach for SharePoint customization efforts).  Several commenters noted they were looking for an encapsulated solution they could drop on the page via a Content Editor Web Part rather than a solution that would require them to modify master pages or page layouts.  While I advocate referencing the solution from the master page or page layout, I understand that is not possible in all situations and that EndUserSharePoint.com leans towards solutions easily implemented by content contributors and site administrators.

The following is that solution, all packaged up, ready for you to plug-and-play.