Capstone Blog: UX Design Improvements | Progress Report #2

Posted on Fri, 10/02/2015 - 19:49

Most recently, I've been hashing out a plan for some sort of guided walk-through tour of the Open Eggheads website, as one simple, yet effective, means of improving the user experience (UX) design of the site.

Many modern sites have a JavaScript-based walk-through tour that can be triggered by the user when they are still new to the site. See for an example. These tours provide a front-line form of documentation immediately available to a user upon entering a site. The tour quickly and concisely guides the user through the site's most important features and capabilities.

Sites that implement such walk-through tours often have more in-depth documentation available elsewhere on the site, either contextually and/or in a centralized "Help" section. However, the walk-through tour provides a much-needed defense against users who may be initially unclear on how to use certain features, but who don't yet want/need to delve into a more verbose "Help" section on the site.

For the Open Eggheads site, users will make heavy use of the easy-to-use, yet potentially initially unclear, Panels in-place editor (IPE) that comes bundled with the Panopoly base distribution upon which Open Eggheads is being built. This IPE is first and foremost visible via its primary toolbar that appears on the bottom of any given page.

IPE toolbar, as it appears on the Open Eggheads site

To implement the walk-through tour mentioned above, while also leveraging the high visibility of the IPE toolbar, I plan on placing a Help button within the toolbar that, when clicked, will trigger the JavaScript walk-through tour.

To create the tour itself, I will be using the Bootstrap Tour JavaScript library. This is an open source JavaScript library that provides a standardized walk-through tour format, using CSS components defined in the Bootstrap front end CSS framework. Because the Open Eggheads site already employs a Bootstrap-based theming/presentation layer, the Bootstrap Tour JavaScript library is ideal for maintaining a consistent look and feel. Furthermore, Bootstrap Tour is relatively simple to implement in terms of its underlying code, and so more time can be devoted to integrating it with the Drupal site, as opposed to spending time on creating a custom JavaScript application to implement the walk-through tour functionality.