The Anatomy of a Widget

Widgets are kind of like the unicorns of the web world. It’s this mythical thing “doing something” on your website. We know we’ve seen something like it on that one website that one time, and it was really, really cool.

Web widgets can be confused with plugins, modules, sprockets, flashy thingies, or any number of cool things we can do with technology. (My clients have called them all of those things, and I love them for it. Technology doesn’t have to be complicated. I know what they mean.) Some people know widgets as the clocks or calendars or other small apps frequently kept on their desktop computer.

Since things notoriously change on the web, I’ll tell you what a widget is to me, and then we’ll let the trolls on the interwebz yell at me in the comments.

Widgets are technically small applications that can be run on a web page by an end user. Most commonly, they call for a bit of information or data from somewhere else to produce a customized display.

Why do you care about what a widget is or does? Well, it’s one of the simplest and most frequently requested features on a website – that mythical thing performing both a useful purpose and increasing the interactivity (ooh pretty buttons I can click and grab!) and engagement of the end user (the people you want to buy your stuff!).

For Upper Valley Career Center, attracting high school students to choose their own vocational path instead of a traditional high school experience is a key goal. Students who are used to the whiz-bang of video games need something with a cool factor to pique their interests.

We created this explorer widget, sharing all the major programs at the school. Mouse over the program name, and it reveals a photo of an actual student experiencing their education in a real-life setting. Click, and you’re taken to the page about that program.

Heavy Metal Widget

For Allied Mineral, the vast offerings of services paired with applications for specific products or minerals meant confusing site architecture?even after many user interface sessions. To make it quicker and more interactive, we created a glorified table (a.k.a. Solution Center) where users could change the tabs on the top and sides to filter this info down to their particular usage. It’s dry material and for a B2B audience – I always hear those clients lament “my stuff isn’t pretty pictures and sexy content” – but it’s still engaging and purposeful.

Help Me Widget

Another client had a complicated process to get customers through a series of web forms based on a variety of inputs. Depending on both the type of request (tech support or repair/warranty) and the location, former company name or actual product, the form needing filled out changes simultaneously.

We pulled it all down into one very simple, clear widget that lives on all Support pages. It cranks out the right form and guides you to the right person and workflow for servicing a customer’s specific request.

Even better, our client reports lower call volume of people wanting to make a request – because users can now find the form themselves in three clicks or less.

So, what does it take to pull a widget off on your website? It really isn’t magic.

1. Normalized Data

Web widgets live on data. It feeds off it and displays something useful. But it must be normalized – meaning it has to be somewhat organized and “apples to apples,”?otherwise the results generated can’t be logical or reliably produce a useful output.

The easiest way to think of it is to determine if you have or could produce the data needed in a spreadsheet. Can you have one set of column headers working for all the types of data displayed? If you got a new product, would it logically fit in one of those headings? What if you added a new variable – could it easily be appended on to the information? If the answer to these is yes, you have a great bit of data to turn into a useful widget.

This is the hardest part, however, and usually requires the help of subject matter experts (the product guys, the engineers, the analysts) in our clients’ companies to help produce this kind of info. Marketers work hand in hand with these folks to get us this kind of stuff, and when it works, it’s awesome.

2. Data in a Usable Format

Beyond just having the data, is it somewhere we can access and use? Is there a gateway to your internal systems like an XML feed or an API so the website can pull from an ever-changing data set? Or what if you have the data, but it’s (gasp!) on paper?

This really happened. We had the idea for a beer finder widget for a distributor client.  The widget focused on a user being able to search the distributor’s website to find where their favorite seasonal pumpkin beer, for example, is carried locally. Amazing, right? My husband is still mad we didn’t pull it off.

The reason it didn’t launch is simply that while the client has all the info – after all, they get the kegs to their clients effectively – it’s stored on clipboards, notebooks and files carried in the trucks and via the facilities of beer producers.

Don’t worry. We at least took their social media outlet content and streamed it onto a beer coaster. Widgets don’t have to be that complicated.

3. A Design or a Result That Solves Problems

Whether it’s through simply making unsexy data look cool, repurposing social content to create a new experience or just getting people where they need to be, solving a problem is what creates user engagement. If it does nothing, your widget sucks. This is more common than you think.

Maybe your idea was great, and you gave people a customized answer based on their inputs – but it fell apart because the answer didn't help people explore further into your website by bypassing traditional navigation. The user interface is another reason widgets commonly fail. If it’s not intuitive to use through great micro interactions (clues like step 2 graying out if you can’t use it until you complete the first step), people will abandon the widget.

Make sure you really know what problem you are solving, and test like crazy. Tools web dev’s use like wireframes, sample data sets in Excel or beta versions all help make sure the experience of using the widget is easy and useful.

And it’s magical.

Just like a unicorn.