January, 2008

I'm flying out to Vancouver tomorrow to attend the Web Direction North 2008. The workshop portion of the conference has already started today. I'm really looking forward to meeting more web designers and developers at the conference and listening to great sessions like:

• What Makes a Design Seem Intuitive? by Jared Spool
• Developing with AIR and Silverlight by Andre Charland and Walter Smith
• Innovation is Overrated by Indi Young
• Information Visualization as a Medium by Eric Rodenbeck
• The Why and How: UI Case Studies by Daniel Burka
• Where’s Your Web At? Designing for the Web Beyond the Desktop by John Allsopp and Dave Shea

The good folks at Non~Linear Creations informed me of this fantastic opportunity to learn how to integrate Silverlight into MOSS 2007.  If you're going to be in the Greater Toronto Area on March 1, 2008 and have some spare time, you should think about registering for the Toronto Code Camp and attend their session. 

Below are the details of the session:

MOSS 2007 and Silverlight Integration

March 1, 2008 04:00 PM - 05:15 PM Room: E

Andy Nogueira, Nonlinear creations Inc.

In this session we'll explore different scenarios for integrating SharePoint and Silverlight. SharePoint 2007 is an amazing framework that has an incredible set of built-in features such as Web Parts, Collaboration, Workflow, Security, LOB integration, Search, etc. In this session we'll demonstrate how to leverage some of these features to create a real Rich Internet Application (RIA) using SharePoint and Silverlight together.

http://www.torontocodecamp.net/Sessions/tabid/55/CodecampId/1/SessionId/23/Default.aspx

If you do wish to attend, please register soon as I expect the spots to fill up quickly.  This is one of many interesting sessions that will be held that day, and it is completely free - all you need to do is register.

The address for the code camp is as follows:

Manulife Financial Corporation
200 Bloor Street East
Toronto, Ontario
M4W 1E5

With the new and improved features of SharePoint 2007, it is becoming a very powerful platform to build Web 2.0 portals both internally and externally.  Likewise, Silverlight is an exciting new technology for building rich interaction with users on the web.  Putting the two together makes a very interesting mashup of interaction that may bring a great user experience to the people using your application.  As a result, a session like this is definitely worth seeing.

It's less than 6 weeks till MIX08. Here is some cool happening:

Hear ye, hear ye!  MIX08 to debut the first ever MIX UX Track which is 3 days of solid content dedicated to creatives / designers.  Lou Carbone, David Armano, Dan Roam, Kim Lenox and others will speak.  In conjunction with Adaptive Path, the User Experience track is just one of the many great reasons for all types of designers and creative professionals to attend MIX this year. http://visitmix.com/2008/mixux.aspx

The deadline for this year’s CSS contest, RESTYLE, has been extended.  Folks can still restyle the MIX08 Homepage and win a pass to MIX08, 3 nights at the Venetian, $$ and more, more, more! http://visitmix.com/2008/restyle/

Have you been listening to The Signal?  Each week a new episode debuts featuring a speaker or MIX crew member talking about some of the upcoming coolness happening at MIX08.  Listen to their interviews with Molly Holzschlag, Kip Kniskern, Jonathan Snook and others as we countdown to Vegas.  Got a question for the show?  Email signalm@microsoft.com or leave a voice-mail message at (425) 703-4650. http://visitmix.com/blogs/TheSignal/

Perhaps you remembered last year’s MIX, in which we featured Flotzam, a WPF screensaver mash-up that showed MIX07 feeds from Facebook, Flickr, Twitter and blogs. Well, we are doing it again this year with a twist: we are running a contest and will feature community created skins of the application on the big screen and on the screensavers of the computers available to attendees at the show.  The best skin will win an XBOX 360. Entering the contest is easy: everything you need to know can be found here http://www.visitmix.com/blogs/News/403/ including links to screencasts and instructions that show how easy it is to do the restyle.

Last Thursday I went to the Waterloo User Experience Group monthly meeting on Eye-Tracking technology used in usability practice. It was my first time observing eye-tracking technology in action - quite interesting! The hardware setup for eye-tracking was non-obtrusive and much more elegant than I imagined: no cameras in your face nor a head mounted display. The system semi-automatically calibrates to a participate's eyes, and it's ready to go. The software (e.g. Tobii Studio) that comes with the eye-tracking is quite advanced. It provides different visualizations of the eye-tracking data such as heat maps and gazeplot visualizations, video playback, mouse click detections, qualitative analysis and much more to help people who conduct the test to use the data more effectively. However, there are some fundamental questions we need to ask before relying on these rich data.

Seeing vs. Understanding. Although eye-tracking accurately records what your eyes are looking at on an interface, it can't detect whether you understand what you are looking at. A couple of UX practitioners at the meeting mentioned from their experience that subjects may stare at element A on the interface during the usability test and later didn't recall they even looked at A. On the other hand, professor, Blair Nonnecke, from the University of Guelph pointed out that we rely a lot on our peripheral vision, so we may not need to look at something in order to confirm it's there. For example, it's enough to use our peripheral vision to realize there's a big tag cloud on the right of this blog. Because of this, we can't really say eye-tracking is "visualizing the human mind"

How to use eye-tracking? This was the most discussed topic at the meeting. Almost everyone agreed that eye-tracking cannot be used alone as a usability test method but should be complementary to the traditional usability test methods. For example, a participate mentioned it was hard for her to find "Sign In" function on the homepage. Eye-tracking does an excellent job of recording where exactly the user looked before finally finding the "Sign In" feature. This could give designers great insights on where does the user expect the "Sign In function to be.

A good resource to read on eye-tracking research, please see Jakob Nielsen's article on F-Shaped Pattern For Reading Web Content.

In 37 days we’re having the Canadian kickoff of the 2008 Launch Wave. This is the launch of Windows Server, 2008, Visual Studio 2008 and SQL Server 2008. This will be the largest IT Pro and Developer outreach in the history of Microsoft and as such we are celebrating the Developers and IT Pro’s who are the unsung heroes using Microsoft software to empower people to do great things. One of the things we’re doing is telling these heroes stories in unique ways and what better way to do this than to have a comic series dedicated to them! 

I found it is a refreshing way to highlight success stories compared to publishing case studies. When I think about heroes, I think about super heroes and associate them with comic books. However, there are many real life heroes among us working in the IT field but never got the recognitions they deserve.  "Heroes Happen Here" is a great opportunity to highlight IT heroes and their stories. In the form of web comic, we can tell hero stories visually like the super heroes in comic books and having fun at the same time.  Tell your story (it can be funny, heroic or just plain interesting) by submitting it to http://www.itdevcomics.com/.

My team is leading the overall experience and content of the launch events in Canada. You can see what are the launch activities in Canada on IT Pro Connection blog.

Update: Due to popular demand, the MIX08 early-bird registration has been extended two weeks. If you register by 11:59 PM, Thursday, January 31st you will save $200 off the Full Conference Registration $1295.  

Today (January 15, 2008) is the last day to register for the Early-Bird discount at MIX08. David and I are both going to MIX for the second year in a row. If you register by the end of today, it’s $200 less than the regular price.  There's also a MIX countdown gadget you can download here.

Here is a series of short podcasts on using Expression Media for digital asset management created by an Australian company called Gekko Images. There is also a list of Expression Media case studies you can check out on the site.

Thanks for Ben's comment to my last post and a reality check! :) The new download center with Silverlight is in its beta, there are a number of usability issues we need to improve on especially that there are no accessibility features in the current version. With that said, the comment got me thinking about the real value of Silverlight from a user experience perspective. I'd like to give my 2 cents and keep the discussion flowing.

I totally agree with Ben that we shouldn't do something just because we can. In the case of Microsoft Download Center,  can we improve users' experience when they visit the center with Silverlight? First we need to understand user needs.

There are three main types of users come to use the download center:

• Searcher: know exactly what they want to download and want to find it as fast as possible
• Browser: know the general category or partial name and want to have a way to browse through and find it quickly
• Surfer: no particular target in mind and just want to find out what's new

For all three types of users, it's important to be efficient. The site needs to present the options clearly, so users know how to take the initial actions and find what they need quickly. For example, Searchers will go directly to search. With that in mind, I compared the Silverlight version (SV) with the original version (OV) of the download center to investigate what has improved and how Silverlight is and could be used.

Microsoft Download Center Silverlight Version		Microsoft Download Center Original
	VS.

Less is more - efficient navigation and better use of screen real estate with smart Silverlight widgets

• The OV has quite bit of wasted screen space such as the gray area in the image above. There's a lot of information squeezed into the narrow content column. Since the page is static, many product links are forced to be present on the page and visible all the time, making the homepage became very long. For example, a user wants to browse the products in Windows category. In OV, the user has to leave the current page and go to a new page that has the complete list of Windows products (3857 in total!) to find what they want. In SV, the user can simply click on the "Browse Download" button on the homepage. A Silverlight overlay panel will appear for the user to choose either browsing  alphabetically or browsing by categories. They can further narrow down the products they want in the category list and get a much more manageable list without leaving the homepage. See the figure below on the left.

• The site navigation on the homepage is another example of using Silverlight to hide information and reduce complexity to help users navigate more efficiently. In OV, the top and secondary navigation are listed together in the left navigation panel and people may spend more time deciding whether they want to choose from "Product Family" or "Product Categories." The two terms have minimally different, and it's confusing to me to have them in the same navigation panel. More importantly, there's no easy to way to go to other parts of Microsoft.com site from the download center. Typically, users have to leave the Download Center and then either go to Microsoft.com homepage  or go to the site map as their starting point to navigate from there. In SV, navigation options are all located at the top right Silverlight navigation panel (see top right image). Users can choose whether they want to navigate all Microsoft sites or just within the Download Center. Since the panel is collapsible, it didn't take more screen real estate to have the extra navigation options. Also, this panel exists in all parts of Microsoft.com sub sites, there's a consistent experience. Although one would argue that the overlay or collapsible panels can all be implemented in AJAX. The differences are how easy to create these elements and how reusable they are.

• With Silverlight, it's easy to create dynamic banners. Instead of having several static images of new downloads in the top banner like in the OV, we can reduce the visual clutter by using animated banners. The current SV implementation uses a slideshow view. Another option is to use carousel display to focus on one item at a time while having other items in the background.

• The overall layout in SV is much simpler and more attractive than OV. For instance, the Search option is more dominant. Since Search is probably the most important feature for the download center, it needs to be obvious. In the old design, Search is above the top banner, which is very hard to spot if you are not familiar with the site. This may have less to do with Silverlight but more to do with layout design, however, because the nature of XAML for UI mark-up. The canvas layout element allows very flexible placement for elements within. It's very easy to add and relocate elements to support updates for the site.

Take it even further - desktop like rich experience

In order for users to truly benefit from Silverlight's rich experience, we need to take the design even further than the current beta site into areas that are even harder to produce with traditional web technologies. I thought of couple of scenarios to illustrate my point:

•  Wizard guide for downloading. For users that have trouble finding what they need or don't know where to start, a on-demand wizard type of help can guide users to narrow down their choices according to what they want. There could be video tutorials as well showing how to use the site most efficiently or the download procedures. Instead of reading the "Read Me" file, they can now simply watch/listen a one-minute video.
• Support organic growth and scalability of the site. As more and more products are available for download, Silverlight could be really used for creating effective visualization to help users find what they need. For example, in the browsing Windows products example I mentioned earlier, right now the navigation list is embedded in a scrolling panel which is not efficient for navigation. Some sort of visualization techniques implemented in Silverlight such as fisheye view could help users to navigate more efficiently.

Besides the business reasons, I do see the value of using Silverlight in Microsoft Download Center from a user experience perspective.The key is to use Silverlight's rich capabilities to serve user needs not for the sake of using new technology.

A number of exciting news are coming that I'd like to share with you.

• Zune is coming to Canada this Spring!  This is one of the biggest announcements we made at CES 2008. For people that don't know about Zune, Zune is our music and entertainment brand that provides an integrated digital entertainment experience. The Zune platform includes a line of portable digital media players, the Zune Marketplace online store and Zune Social, created to help people discover music. I've been using Zune 1 to listen to music, radio and watch videos but not able to use the social features and download music from marketplace. With Zune now entering into Canadian market, people now have more choices to enjoy richer entertainment experience. 
• Another big news coming out of CES is that Silverlight will be used on the website for the 2008 Olympics to be held later this year in Beijing. NBC Universal, who owns the sole rights to the Olympics in the US, will team up with Microsoft and deliver enhanced video for the Beijing Olympics using the Silverlight platform. See detailed news here. Check out Microsoft at CES.
• Preview the Silverlight version of Microsoft Download Center. The beta version of the site has rich experience such as slide show banners on the top, animated transitions, and more importantly making the whole site much more simpler by revealing information as needed.  For example, use of rich tooltips to provide more information about particular products when a user hovers over the product name.

• Design Inspiration: Smashing Magazine captures a list of Innovative Designs and Devices. My favorite designs are the Sony's Apple Remote Control and Toast Messenger.  Richard Banks' Trend Blog is another great places to stay updated within the field of HCI and device design.

Last month I did a webcast on Vista Sidebar Gadgets and how you can use them to extend the reach of your software solutions, either by augmenting a desktop or web-based solution or to act as an innovative way to advertise your product or solution in a viral or word-of-mouth manner.

I'll admit that I'm late in writing this post, but as the saying goes, "better late than never!".  In any case, the webcast seemed to generate a lot of interest in pursuing some of the ideas I presented in the webcast, so consider this post as a follow-up to those comments and questions.

First off, there were some requests for good guidance on how to create great gadgets that link into services on the web.  Some fellow Microsoft colleagues by the name of Tim Heuer (in the US) and Mike Ormond (in the UK) have some great posts on how to create web-connected gadgets.  Definitely worth the read:

• Tim Heuer's Gadget Posts
  • Developing a Vista Sidebar Gadget, Part 1
  • Developing a Vista Sidebar Gadget, Part 2
  • Don't like JavaScript?  Try Script# to build gadgets (Script# converts C# to JS).  Here is a great example.  And here is the follow-up post on some fixes Tim made to it.
• Mike Ormond's Gadget Posts
  • So You Want to Build a Vista Sidebar Gadget?
  • Take Our Gadget, Give it a Design
  • Make Our Gadget Do Something Useful
  • Screencasts for Mike's posts:  http://www.microsoft.com/uk/msdn/screencasts/search-results.aspx?q=sidebar

Also, if you're looking for the deck from the webcast with more resources, you can download it here.  It's in PowerPoint 2007 format, so if you're using a previous version of Office, you can download the Office 2007 Compatibility Pack to view it.

Finally, if you were interested in the Weather Network gadget, you can get the English version here and the French version here.  If you're interested in the Astrographer gadget I had created and dissected in the webcast, you can get it here (and a previous version of the gadget can be downloaded here).

Paul

<UPDATED January 11, 2008:  Corrected the fact Mike Ormond is from the UK, not the US, and added the screencast links to his blog posts on gadgets./>

If you haven't already, check out the new Microsoft College Recruiting site called "Hey Genius." I like the black and white color scheme and the noodely animation. It has a very refreshing and relaxed style for a recruiting site. For example, in the Lounge section, a series of funny animations on "pi" and "circle" to help you take a break on job hunting and enjoy the fun in the process. Besides basic job opportunity information, the site also provide lists of upcoming tech talks and some genius challenges.

Although the site is quite heavily targeting on technical students, I was very happy to see on the College Career full-time job opportunity page, there is a major section on User Experience jobs. I included two job titles and their qualifications below:

User Experience Designer

Innovate and improve some of the most popular software products in the world. As a User Experience Designer you’ll be responsible for driving cross-team collaboration with the world’s best user experience researchers, program managers, product planners and developers from the early stages of planning through implementation. You’ll need to think strategically, be creative and negotiate design solutions in relation to business goals. Using your abilities to identify new opportunities and generate innovative ideas, you will influence the design direction and make our already popular product even more successful.

Qualifications:

• Pursuing a BA/BS, MS or Phd degree in Computer Science, HCI, Human Factors or related field
• 1-2 years of collaborative work or related classroom experience preferred
• 1-2 years of practical work experience in JavaScript, Lingo, and ActionScript knowledge preferred
• Excellent communication and presentation skills as well as self confidence
• Strong problem solving with balanced interaction and visual design skills

User Experience Researcher

Are you interested in turning software products into world class experiences for end users? If so, Microsoft’s UX Research group needs you! Our mission is to think end-to-end about the user experience both broadly and deeply. Giving end users an experience without problems isn't good enough; we want the experience to be an immersive, pleasurable experience that is appropriate for each and every customer. We need to know our users inside out, by understanding their perceptions, desires, needs, frustrations, environments, and problems related to the Windows PC & services experience and beyond.
We are looking for someone to join the team who has passion around holding user experience decision makers accountable to users, prioritized through understanding users and the business strategy. The ideal candidate will be excited at the prospect of finding creative ways to evangelize the rich research data we have to both internal and external audiences and drive the results of those communications into the final experience.

Qualifications:

• Pursuing a BA/BS, MS or Phd degree in Computer Science, HCI, Human Factors or related field
• 1-2 years experience in academic or industrial research preferred
• The ability to find creative ways to evangelize rich research data to both internal and external audiences
• Strong communication skills, both oral and written

Happy New Year everyone! Hope everyone had a relaxed and enjoyable holiday. The peacock family I met during my trip to Dominican Republic certainly did. :)

There are a number of blog posts talked about how to optimize Silverlight installation experience. See Scott Guthrie and Tim Sneath's posts. This is particularly important from an user experience perspective when you plan to add Silverlight content to your site. Many people will need to download the plug-in in order to view the rich Silverlight content for the first time. The design goal is to make the whole experience very seamless: fast and straight forward. If it seems troublesome, then users (including me) won't download it and just navigate away, which is also the major concern of Silverlight early adopters.

Tim offers a few very useful tips to enhance the installation experience in his post.

• Use the inplaceInstallPrompt:true parameter in CreateSilverlight.js to present the Silverlight installer directly from the current home page rather than redirecting the end-user to the Silverlight site for the installer.
• Use the <div> tag into which Silverlight content is presented to create pre-install content (e.g. a static image that provides a glimpse of the final site experience when the user installs Silverlight) and present the Silverlight installer button as an overlay over that image;
• Use the Silverlight.ua.Browser property to provide guidance to the user (for example, warning them that they may not be able to install Silverlight if they are using Netscape 4.0 as their browser).
• Use a timeout delegate to see if the installation is complete, and, if so, refresh the browser automatically so the end-user doesn't have to manually hit F5 to reload the content.

A handy download package with detailed guides on how to optimize Silverlight installation experience and sample codes are available in the MSDN download center.