Carrie Gilbert.png

During the course of her five years with Jive Professional Services, Carrie Gilbert has guided dozens of Jive customers through the process of defining and implementing their community strategies, drawing on her extensive professional and academic background in interaction design, technical communication, and usability. In this piece, Carrie teamed up with ajohnson1200 , a Jive Engineering VP, to provide some widget layout tips.

Whether you're creating an overview page for your community as a whole or setting up the landing page for an individual group or space, the Jive widget library provides you with a lot of flexibility to put your community's best face forward. This same flexibility could be spun as providing "just enough rope to hang oneself," so to appease the cynics in the crowd, we've provided some general widget layout guidelines. We've also included a few "what not to do"s to help you navigate around potential usability, adoption, and system performance pitfalls.


Keep it simple

Something about widgets brings out the Garbage Pail Kids collector in all of us and we find ourselves wanting to collect one (or more!) of each. A Recent Content here, a Popular Documents there... before you know it, we've assembled three columns of eight widgets a piece, some of which likely show many of the same content links. The result? A sea of blue text that doesn't help your users prioritize one block of information over another, doesn't communicate the value of the community to them, and takes a serious toll on your page load time.


In our Strategy consulting practice, we  talk to customers about the four critical components of any widget layout:

  • Purpose: Clearly and succinctly explain to new members what this place is and who it's for. This typically happens via a Formatted Text widget, which allows you to communicate your place's value statement both visually and verbally. Group Overview and Space Overview widgets are good options as well.
  • Calls to action: Identify the top 3–4 things you want members to do here and provide prominent (ideally graphical) links. This, again, is typically handled as a Formatted Text widget and can often be implemented as part of the same widget in which you are communicating the place's purpose.
  • Motivation: Members don't often dive right into participating, so help them understand how the community can help them. Answer their unspoken question, “What's in it for me?” In highly competitive communities or communities that put a high value on member reputation, leader boards (like the Top Participants widget) can be an effective mechanism here. Even better are visible signs of the value other members are already receiving: success stories, win reports, and other first-hand accounts that underscore the community's role in a key business process.
  • Example: Would-be participants may initially shy away from actively posting in your community until they feel confident they know what acceptable participation looks like. Help them learn the community's established social norms by readily surfacing other contributions via one of the many content-centric widgets. Time-based widgets like Recent Content and Recent Activity provide the added benefit of showing "signs of life" so members get a sense of relative activity levels.


Although these four elements don't necessarily play out one-to-one with individual widgets, you can typically deliver against them effectively with fewer than 10 well-selected and well-configured widgets.  For example, when catering to a diverse audience with competing motivations, the "what's in it for me" component might require a few different approaches. And the total number of widgets used in your layout has implications beyond design strategy. When doing performance profiling, we see that most widgets take anywhere from 20 to 100 milliseconds (ms) per widget to render on the server. If you assume that the rest of the page takes about 500ms constant to render, a page with 10 widgets will could take anywhere from 700ms to 1500ms to render. Bump that up to 25 widgets and you're looking at up to 3000ms (3 seconds) just to render the page on the server—and it only goes up from there once you layer in client-side considerations like HTML, CSS, and JavaScript rendering. If you're seeing poor performance on a particular page, try paring down the total number of widgets to just the bare minimum you need to effectively engage your members.


Less is more

Most Jive widgets allow you to specify the number of items you want displayed. Although the default for most content widgets is 25 items, this can prove to be overwhelming for your members who are trying to quickly scan for something of interest, and can also slow down page load times. Broadly speaking, the primary goal of a widget like Recent Activity or Popular Content is to provide visitors with visibility into the types of interactions common to a given place and the frequency with which they occur (see the "Example" bullet above), and this can be achieved with far fewer than 25 items. So if you have performance or usability concerns about pages in your community that tend toward lengthy content listings, dial your widgets' settings down to a more manageable 7–10 items.


Paint a picture (but not too many)

Over-relying on the dynamically populated widgets in Jive can result in a fairly dry layout with few indicators to members what they should do first or why. To create a more meaningful visual hierarchy, you will want to use at least one Formatted Text or HTML widget, which allow you to create a richer experience through embedded imagery, video, and custom code elements. Some common uses of these widgets include "hero shots" to help define the brand identity for a given community or place, visual calls to action to encourage members to participate, and featured members or content.


However, just like too many dynamic content widgets can result in a meaningless sea of blue text, a page full of highly visual formatted text widgets can become a similarly unusable blur of noise. Remember that you are creating a hierarchy for your members to scan: for each widget layout, define the 2 to 3 items that are most critical and ensure that those are the most visually prominent areas of the page. And consider the performance implications of rich elements as well: in addition to the increased file sizes that go along with assets like images and video, you may also run into client-side slowdowns as a result of custom CSS or JavaScript. This effect may be magnified if you have users distributed around the globe.


There are millions of widget layouts possible within Jive, and probably nearly as many design philosophies governing community managers' use of them.

What approaches have worked well for you? What other design "do"s and "don't"s have you learned along the way?