First of all, thank you to all the Axureworld 2011 attendedees who joined Ari Feldman and I for our Wonderful World of Widgets presentation. We had a blast! As promised, here are the detailed notes about the Axure Widget Library Best Practices we discussed on November 11, 2011 at Axureworld.
In case you don’t have the time to read all of Ari’s wonderful notes, we’ve provided a one-page guide you can tape on your wall next to your favorite monitor.
Axure does not provide a way to group different widgets together across visual or functional categories.
In addition, widgets actually appear within a Widget Library according to the order they were added – not according to their name. If you are not careful, this can make accessing the widgets contained in a Widget Library frustratingly difficult. To ensure that your Widget Libraries are optimally structured, we suggest that you:
Always place related items (e.g. headers, forms, buttons) together within your Widget Library.
Always place widgets that are important and/or likely to be frequently accessed at the top of a Widget Library. This will ensure that they are always the first widgets displayed when the Widget Library is loaded.
Widget Naming Conventions
The names you give your widgets will directly affect how easily users will be able to access them either when browsing the Widget Library or searching for specific widgets. Axure only displays two lines for each widget displayed in the Widget Library pane:
Line 1 is limited to 11 characters.
Line 2 is limited to 9 characters and truncated with ellipses.
Therefore, we strongly suggest using a standardized naming scheme such as the one described below to get around these limitations while ensuring that the widget’s name is both functional and clear to the user:
<object_name>:<dimensions><version_num> where:<object_name> is the widget’s name – e.g. Dialog, Text Field or Window (up to 9 characters)<dimensions> is the size of the widget in pixels – e.g. 300×250 (up to 7 characters)<version_num> is an optional version number or reference ID -e.g. (up to 3 characters)
NOTE: If you choose to omit the optional ID or reference number, you can reclaim up to three characters to lengthen the descriptive <object_name>.
NOTE: If your Widget Library is part of a standardized UI library, you should name your widgets to match any CSS styles used and ignore these recommendations.
Widget Library Naming Conventions
Unlike individual widgets, Widget Libraries can have names limited only by your host operating system, which means they can usually be over 200 characters long and include any legal filename character allowed by your computer’s OS. That being said, Axure’s Widgets pane used to switch between your various Widget Libraries will only display the first 12 characters from the Widgets Selection menu. Please keep this in mind and try to keep your Widget Library names under 12 characters to avoid problems.
Testing and Debugging Widgets
Create a disposable project in Axure just for testing the basic functionality of your widgets. Doing this allows you to see how the widget behaves with other page elements and identifies glaring functional issues or anomalies.
Test each widget you create in at least two different browsers that your target users are likely to have – e.g. Chrome and Firefox or Safari and IE. If your widget behaves correctly on both, chances are it will function correctly on other browsers. Of course, how thoroughly you test your widgets depends on your specific requirements and user base.
Clear your browser caches each time you change and test your widgets to ensure that they are functioning correctly.
Widget Library Size
There is no hard limit to the number of widgets you can include in a Widget Library. You can create a Widget Library with hundreds of widgets if you want to. However, due to some issues with how Axure handles widgets, we recommend limiting each Widget Library to ~120 widgets.
Going above 120 widgets quickly becomes increasingly unwieldy due to the lack of proper widget grouping.
Axure will automatically generate a small thumbnail for every widget you add to a Widget Library. These thumbnails appear above each widget’s name when accessed. Unfortunately, these thumbnails are rarely attractive and can make it hard for users to distinguish between different widgets.
To help get around this issue, Axure offers an Important Icon feature in the Widget Properties dialog that allows you to add your custom images to each of your widgets. When adding icons, we suggest the following:
Always use metaphorically correct images for your icons – e.g. a form widget should have an icon that looks like an input box, etc. Doing this helps users understand the function and/or purpose of the widget.
Limit the size of images used for your icons between 28×28, otherwise, Axure will re-size them with potentially unattractive results.
Try to use icons with a consistent visual style. Doing this not only enhances the appearance of your widgets but make them easier to recognize and use.
Avoid photo-realistic images for your icons as there is simply too little detail available. Instead, use simple designs with sharp lines and edges. These tend to work best for rendering small objects.
Use high contrast colors for your icons. This will help users distinguish between many different widgets when working with a large Widget Library.
Documenting the widgets found in your Widget Libraries helps users understand what each widget does, how they work and makes users aware of any potential caveats or restrictions. We recommend the following when it comes time to document your widgets:
Axure provides a Widget Notes panel within the Widget Library Editor for just this purpose. Use it.
Use 1-5 lines in the Widget Notes panel to describe/summarize the purpose of each widget. Format this text in bold and/or with a distinctive colors to help this information stand out since this area only supports one font size and style.
Use a single line summary for the ToolTip that is defined in the Widget Properties dialog.
Document all Global and/or Local variables used by the widget. This is especially important since fully cross-browser Axure projects are limited to 25 global variables.
Variables should be distinctively styled in the Widget Notes panel using underlined or colored text to help this information to stand out from other text since this area only supports one font size and style.
Whenever possible, reference “real world” examples of a given widget by including a URL of a website or UI pattern that inspired it. This will aid users in understanding not only how the widget might work but how it should/could be applied.
Use NOTE: blocks to call the user’s attention to special issues such as constraints, limitations of the interaction, differences from real-world behavior, reliance on OnPageLoad events, etc.
Use TIP: blocks to call the user’s attention and provide suggestions for how to use or maximize the use of a given widget.
Widgets can be easily (and seamlessly) shared with other Axure users as long as you keep the following in mind:
Always distribute Widget Libraries in ZIP archives since both Mac and Windows users can easily access this file format.
Always include instructions on how to install the Widget Library. Widget Libraries can be installed by placing them in either the My DocumentsMy Axure RP Libraries folder on Windows systems or in your Documents/Axure/Libraries folder on OS X systems.
Be sure to include simple widget reference file – e.g. readme.txt in the ZIP archive with a basic list and description of the widgets included in the library.
Be sure to include any licenses in the ZIP archive if the Widget Library is under any Open Source license – e.g. GNU, MIT, etc. If the Widget Library is commercial, we suggest you include your copyright information and commercial license information.
Include a sample file that demonstrates the different widgets included in your Widget Library. This is particularly useful for showing off the potential uses for any highly interactive widgets.