Building your own UI widget library for wireframing
Your own UI widget library represents a powerful tool in the modern UX field. A properly designed library can:
- Reduce the amount of rework necessary for creating common objects that reappear frequently across an organization’s digital assets.
- Provide a basis for maintaining a consistent sense of interaction design standards.
- Make the construction of new prototypes quicker and more convenient. Ideally this means that prototyping becomes a more frequent exercise because the barriers to doing so or so low.
Perhaps obvious by its omission, one benefit that a widget library does not confer is the creation of standards for an organization to follow. The widget library is merely the manifestation of standards that have been developed through a collaborative process.
Here’s one – awful – way to create a set of “standardized “widgets: sit yourself down, build them, and then announce, “here they are! ”
That approach will virtually guarantee that your widgets are, at best, ignored. At worst, people will start calling you names – possibly, but not necessarily, behind your back – and referring to you as “that guy with the templates.”
Rather, as with any great experience, collaboration is the key: use those skills you built in our last two articles on Collaborative Wireframing and get meta. It’s time to collaboratively wireframe some wireframing widgets!
Here are a few important questions as you work with your team to create reusable, flexible widgets for your library:
- Does this element get used (in prototyping, and by actual users) frequently and consistently?
One of the main purposes of widget creation should be reducing the amount of time you spend prototyping, so start first by cataloging the interface elements that are most prevalent in your prototyping: login widgets, add-to-cart elements, specific buttons and action items, and navigation are good places to start. Search fields, list views of specific kinds of data (like products, or pages within your content-rich site) are also good candidates.
From that list, focus on those elements that are most commonly encountered and used by your audience. Navigation items are often a good primary candidate; action-enabling elements like buttons, links, and sliders, are also good places to standardize your interaction models.
- Should we be creating a new “standard”?
Given the large number of standard widgets and interaction design patterns already available, make sure you’re focusing on creating something which brings new value to your prototyping process. Is the interaction model you’re working on fundamentally different from what existing interaction design patterns support? Would it be easier, and just as effective, to incorporate an existing standard into your prototyping library? This can be the case when you are utilizing a somewhat non-standard interaction design widget which is still in fairly wide use – swipeable list views in a smartphone app, for example.
It’s well worth remembering the golden rule for standards: break them only when it makes sense.
- How varied are the contexts of use for the widget?
Headers and footers often don’t change as you’re building new websites, but navigational elements in complex web apps or smartphone apps might change across a variety of contexts. Building a widget which reflects that potential complexity might be a daunting challenge – make sure you’re investing resources in widget building where it makes sense – if a widget could have 12 different “states” depending on its context, you might be just as well served by drawing a box labeled “Complex Widget Goes Here”, and working with a developer to build a live model of the actual interaction elements.
As you begin the process of developing your widget library, involve designers, developers and other key stakeholders on your team to improve the quality of your widgets. Where prototypes will be used in usability or concept testing, enhance them with high fidelity visual design to help pinpoint usability and findability issues. Where widgets need to represent complex interactions that may not be explicitly enabled (i.e. multitouch), include developers who may have specific input on how to represent these interactions clearly for future reference. And when designing widgets that represent unique functionality for your organization, work closely with business and brand stakeholders to make sure that the experiential essence of those interactions are fully captured.
When creating a widget library, make sure to:
- Focus on creating widgets that reduce rework, help to enforce interaction design patterns that you want to standardize, and help to make prototyping easier and more likely to occur.
- Approach widget creation as you would any other collaborative wireframing exercise, to ensure that the widgets represent standards that your whole organization can support.
- Focus on creating widgets that represent frequently used, unique, moderately complex functionality.
Don’t recreate the wheel, and don’t attempt to create a wireframing widget that’s more complex to build and maintain than the actual code which will eventually get built.
HotGloo fully supports custom widget libraries which can be enabled by leveraging the Shared Masters functionality:
The Shared Master Library is a collection of all your previously uploaded and shared masters. Upload your own master elements and share them across your account.
All you need to do is copy and paste elements you want to share into a master and upload it to the master library. Choose whether you want to share the uploaded master across your account or publicly with other users.
1. Copy & paste elements or element groups into a master.
2. Once finished click the upload master button.
3. Name your master and click “Upload”.
4. The uploaded master appears now in the Shared Master Library. Reuse it in other projects via the Shared Master Library by clicking the Shared Master Library icon in the sidebar. In the Shared Master Library window you can then preview and import shared master components that have been uploaded from any project across your account.
– You can’t upload a master that contains another master.
– Only include images that have been uploaded recently.
– States are not working with a shared master.
How to use and import stencils / components / widgets from the Widget library?
1. Open the Widget Library by clicking the Widget Library icon in the sidebar.
2. Click the import button on the widget you want to import.
3. The imported element will be automatically added to the master list of your project.
4. Click on edit and copy and paste the component to any page or use it like a master element.
Ben Levin is a UX writer and content strategist at HotGloo. He’s been building and leading UX and Design teams for the last 15 years – including 2 long stints at interactive agencies.
You can find Ben on Twitter.