If you read our previous posting, you know all about Guided Tours, if not, take a quick read.

Today we have a demo of Guided Tours, up and running. We put this together about a year ago, but still felt it was worth sharing. Thank you to the team at Allovus for making this work possible and helping out with the walkthrough. Feel free to play around with it and send us feedback. Or, before taking a test run, you can read further along in the blog where we discuss the Guided Tour functionality. When you do go to the demo page, you'll see a disclaimer (in red text). For the demo we used Windows Azure content, however, for the most up-date-information on Windows Azure, you'll want to visit the Windows Azure Developer Center on MSDN.

The rest of this post is intended to explain the Guided Tour UI. First, a screen shot of the home page, a landing page which introduces the topic being discussed:

It includes what you'd expect to see on a landing page:

  • Persistent text describing the solution, including a headline
  • A clickable illustration in the center of the landing page
  • At the bottom-left, a set of clickable icons which highlight perspectives (or facets) of the solution for deeper, more focused investigation
  • At the top right, a click-through of a technical comic
  • At the right, a set of clickable tiles which lead to more content
  • At the botton right, links to additional resources

Below is the center image which functions as a hub and the focus area of the page. You can click on the illustrations to reveal more information about a particular component. The illustrations are animated to give the users visual cues when they navigate the illustration.Essentially, it is a clickable image of the components featured in the technology, scenario, or workload:

 

When running the demo you'll notice that:

  1. On mouse-over, the illustrations surrounding the central image will glow, indicating they are clickable
  2. Then, on click, the screen will fade out, and trigger 1 of 2 animations, either additional text to READ, or an animated flow chart to EXPLORE.

 For the READ experience, the central image resolves into a text box and a back button returns the user to the image:

For the EXPLORE experience the image transitions to an animated flow chart. The user can pause and restart that animation using the player controls. Also, an element can be clicked which will trigger content in the right-hand reading pane and pause the animation:

You can filter the center image on Innovation, Security, Performance, Cost Effectiveness, and Cloud. This feature is intended to filter the content based on user preference. For example, if users are primarily interested in the Security aspect regarding a particular technology, scenario, or workload, they select the Security perspective, as shown below:

     

After selection, several of the elements fade out. However, those that have security specific content remain in focus with a security overlay illustration. Then, the use can click those elements for security specific content.

Some of our previous posts discussed technical comics. As part of the Guided Tour functionality we've added a link to a comics associated with the solution. By clicking on the comic image (show below), the Silverlight comic viewer opens with a comic that is associated with the topic being discussed. We decided to have it open in the same window. So, to get back to the landing page, you press the back button within the viewer window.

Finally, we recongnized that we'd need a way to display larger sections of text, or the ability to link to existing content on MSDN and TechNet. Instead of links we have reusable tiles, which can be customized. When a user selects a tile, the other tiles fade out and the selected tile moves to the upper right-hand corner. Then, content will populate the reading pane. A back buton returns the user to the clickable tiles, as shown below:

      

So, that's the Guided-Tours prototype. Again if you have any ideas on how to improve them and/or potential applications you see for this type of experience that you’d like to share let us know. Do you think this type of application is a feasible enhancement to the way we currently present content on TechNet, for example?

Finally, for those of you who know Chinese, you can take a look here at a "mostly" localized version.