August, 2007

  • Canadian UX Blog

    MIX07 Session Recap #2: Designing with AJAX: Yahoo! Pattern Library



    Bill Scott's presentation on Designing with AJAX: Yahoo! Pattern Library was one of my favorite sessions from MIX07. It was really nice to hear from someone that has so much experience in UI design pattern space. The presentation was filled with tons of examples from Web2.0 websites illustrating the design principles for Rich Internet Applications (RIA). It's a great overview of the Yahoo! Design Pattern Library for designing rich UX on the web and how they tie into design principles.

    So, what do we really mean by "Rich" when we talk about Rich Internet Applications? Bill suggested Interaction + Feedback + Information = Richness. The key principles for each aspect of richness are:

    • Interaction: prefer direct, lightweight, and in-page interaction
    • Feedback: provide invitations beforehand, transitions during, and feedback after interaction
    • Information: think in objects and tie information to interactivity

    In addition to the key principles, I found some of the small tips Bill offered during his presentation to be particularly insightful.

    • When visual presentation is created for showing off technology rather than solving problems, you know it'll be a poor use of design. He gave the simple example of an online rating system. One design is to let users drag items into a particular ranking. It's fancy interaction but quite heavyweight and not very efficient. The lightweight design is to just use star rating (i.e. checking from 1 to 5 stars to indicate how you like something).
    • Rethink the user's mental model, not the page model. Every page jump is a mental speed bump. Thus, when displaying a search results, the scrolling model (i.e. users scroll down the page to see all the search results) does better than page model (i.e. search results are distributed into multiple pages, and users go from one page to another to view all the results) because users don't need to go through the delay of page loads. However, scrolling model suffers from architecture scalability problem because all the search results have to be loaded on one page. Live Search Web used to use a scrolling model but was replaced by a page model due to scalability problem. However, Live Search Image still uses scrolling model, and users can use a slider bar to control the size of image display (like a zoom feature).
    • Showing transitions for user interactions helps users to understand the results of their interactions. The catch is that you only need to hint the transition and users can fill in the blank. For example, after deleting a photo, the photo fades away. The visual cue only needs to indicate the initial fading. Then, even if the the photo suddenly disappears, it's enough for users to understand what happened. This way, designers can design more efficient visual feedback.

    With the early adoption of Silverlight, I think it's important that we take lessons from these well thought design patterns from web and desktop. Silverlight enables Zoom and Pan, but it doesn't mean we should use it whenever we can. "Great power comes with great responsibilities." Let's start to use it with caution and think about what design patterns we can create for Silverlight.

    Useful Links

    Bill's Blog: Looks Good Works Well

    Yahoo! UI Blog

    Yahoo! Design Pattern Library

  • Canadian UX Blog

    Posting Podcasts/Screencasts using Silverlight 1.0 RC


    Sorry, it has been a little quite on the blog. I was on vacation last week and training down in Redmond the week before. As a bonus, I've included a good UX design example from my travel last week at the end of the post.

    Quite a few people asked me about how to post screencasts/podcasts using Silverlight 1.0 RC on their blogs and streaming the digital content using Silverlight Streaming. There are great posts from Catherine Heller and Morten on how to post Silverlight content, but I thought a Silverlight screencast to answer the very question should be very effective. Please see below screencast: a walkthrough tutorial on posting a podcast using Silverlight 1.0 RC.

    Major Steps

    Step 1: record the screencast (e.g. Camtasia)

    Step 2: encode the screencast media file in Expression Media Encoder (EME)

    Step 3: output Silverlight project (i.e. screencast player) from EME and compress appropriate project files

    Step 4: upload compressed project files to Silverlight Streaming

    Step 5: embed screencast/podcast in a blog post

    Useful Code Fragments

    manifest.xml file has the following code:


    iframe object code:

    <iframe src= scrolling="no" frameborder="0" width="500" height="400"></iframe>

    Replace the AccountID with your Silverlight Streaming account ID and replace the AppName with your application name. In my case, it's "PostingPodcast."

    Now the bonus...

    I passed a nice little town called "Picton" on my way traveling to Sandbanks last week. There is gourmet hot dog restaurant called "The Budda Dog" (see their logo below). Isn't it cute and clearly expresses what it is! :) In the restaurant, they have an efficient way of taking orders. All types of hot dog sauces and toppings have barcodes associated with them, so the waitresses just need to screen the menus to take orders. The orders are shown on the computer right away. Interesting solution, both cheap to implement and flexible to change.

    Budda Dog  an efficient way to take orders

  • Canadian UX Blog

    Inspiration for Information Visualization


    Earlier this month, Smaching Magzine posted a great list on modern approaches to Data Visualization. More strictly speaking, these are the approaches for information visualization (InfoViz). There's a slight difference between the two. Here are the definitions from Wikipedia:

  • Scientific (or data) visualization deals with data that has a natural geometric structure (e.g. MRI data or wind flows).
  • Information visualization handles more abstract data structures, such as trees or graphs.
  • From user experience perspective, good InfoViz is such an important part to improve people's productivity and satisfaction. Couple of things stood out to me from the post:

    • Clever use of animation to indicate data trends, which brings static data charts to live and viewer can appreciate the change more. Check out Hans Rosling TED Talk.


    • Very few visualization techniques use 3D visualization.  It probably makes more sense to use 3D visualization to view scientific (or data) visualization such as analyzing a cancer cell. However, for more abstract data structures, often times 2D are sufficient and more effective. I especially like the following visualization examples.
    Trend Map 2007 Three Views
    image image


    Enjoy, Qixing

    Technorati Tags:
  • Canadian UX Blog

    Silverlight Resources


    Cross posted at

    I’m about to start building my first Silverlight project. Qixing and I have started compiling a list of publicly available Silverlight materials. I have a couple of hurdles get over in building this application. I find the Microsoft deployment environments significantly different than my traditional Unix background. My guess is that I’m probably building a Silverlight 1.1 alpha application just because I’m going to want to consume a set of web services. Here is the list of resources we put together:

    What is possible with Silverlight and Expression?

    What do users need?

    • Microsoft Silverlight 1.0 Release Candidate Mac or Windows
    • Microsoft Silverlight 1.1 Alpha Refresh Mac or Windows

    What does my team need?

    Designer Tools

    • Microsoft Expression Studio
    • Expression Blend 2 (download the most recent preview version) Design tool to create user interaction for Silverlight
    • Expression Design Vector-based illustration and design tool
    • Expression Media - digital asset management tool
    • Expression Media Encoder Allows users to create and enhance Silverlight enabled videos

    Developer Tools

    What training and resources are available?


    Silverlight Resources

    Related Microsoft Tools

    • Microsoft Design a central place to communicate about Microsoft's design culture, mission, experiences, people, and much more.
    • a new community site for WPF and Windows Forms, which provides a common place for the community to understand a unified .NET/Windows client offering.
    • WPF Hands-on Labs including "Using Data Binding in WPF," Creating Rich 2D and 3D content in WPF," and much more.

    Related Blogs

  • Canadian UX Blog

    Silverlight Momentum


    The momentum for Silverlight is building both internally and externally.

    • You probably heard by now that integrated Silverlight on their site to bring a more interactive and enticing media experience to baseball fans around the world. Users can go to the video gallery to browse and view different game videos and share with their friends by email directly from the media player (see the left image below). In addition, the new media player can be integrated with existing written content (e.g. articles) so that users can get a better experience of reading the article and watching the matching video together (see the right image below).
      image image
    • The Podium ’08 on MSN is Live! The latest edition to MSN’s Election 2008 coverage is the first of many innovations MSN will deliver on Silverlight. MSN integrated Silverlight into its publishing system and thus can create template driven applications like this one. Users can experience an engaging presentation of information about the US presidential candidates, their views on issues and lots of related articles and information.  Pick a candidate, select an issue and view the results, which are supplied by Live Search.


    • Tafiti is a demonstration of Silverlight capabilities. Tafiti is essentially a mashup that uses the resources of Windows Live Search driven by a Silverlight top layer.  Although there are a number of usability issues, the experience of visualizing search results is very refreshing. Users can search results in newspapers, books, images, RSS feeds, and web. Moreover, they can filter their search results multiple times using any additional keyword. You can view a video walkthrough of the application here.
      search newspaper search images search RSS feeds
      image image image
    • - I also came across this media news site powered by Silverlight. More ideas about how to deliver media content using Silverlight. More importantly, how to design navigation for these rich experience site? There's no conventional left/right navigation panel any more. It seems you can interact with every object on the site (i.e. they all look clickable), so there's a lot of discovery work for a user.




  • Canadian UX Blog

    Canadians win design awards


    Cross posted at

    Zeed+ by Kenneth W.K. Wu

    A Toronto-based designer placed 3rd in a Microsoft sponsored design competition. Kenneth W.K. Wu, creative director for Dymaxium, won third place out of 349 submissions for his Zeed+ for the Future.

    “The overall design concept is inspired by “Ikebana”, the Japanese traditional art of formal flower arrangement devoted to balance, harmony, and form. With the Zeed+ PC, each stem-shaped hardware unit has its own height, shape and character to reflect its function and they sit in a base that resembles a flower vase. Users simply touch the vase base to operate the computer, play movies or music, surf the Internet and check personal emails. The computer, which resembles a stylized floral arrangement, can be placed in either a workstation or family room to provide both aesthetic enjoyment and powerful computing functionality.”

    Carleton University Industrial Design professor Jim Budd had 5, that’s right five, student projects included in the 34 finalists. Almost 15% of the finalists in the competition were from a Canadian school. Carleton has a strong reputation in design and human-computer interation. The HOTLab is home to Gitte Lindgaard who wrote a usability testing books I used, Usability Testing and System Evaluation: A Guide for Designing Useful Computing Systems, which covered a lot of rigorous, systematic usability testing methods. It is a great book.

    blok by Carleton University students

    “Of the 15 teams from Budd’s class that created a design for the competition, 10 went on to submit their designs, five of the teams were among the 34 finalists, and two were selected among the eight finalists. The first-place Judges Award went to three of Budd’s students for their design blok.”

    I’m going to have to head to Ottawa at some point and meet Jim and his class. Yay, these are additional examples of Canadians doing innovative design.

  • Canadian UX Blog

    A discussion on user experience in software


    In mid-June of this year, I had the privilege to participate in a great discussion on the role of user experience in software today.  The discussion was a podcast for the Canadian IT Managers blog with my colleague Ruth Morton and Danny Riddell, President of San Francisco-based Metaliq.

    The podcast can be downloaded from Ruth's blog post on the subject.  Overall, it was a great discussion on designing software from a user's perspective and how pervasive the discipline of user experience design is becoming in building software solutions.

    One of the things we are hoping to do is provide more multimedia experiences on this blog, including podcasts, screencasts like the preceding post by Qixing and video interviews.  If you have an idea for a conversation on User Experience you would like to see posted on this blog, please leave a comment here and we'll try to incorporate it into this continuing online discussion!


  • Canadian UX Blog

    Sidebar Gadgets Design Guidelines


    Gadgets are becoming more and more popular now. They are on your desktop display (figure 1), personal webpages, blogs, shopping sites, ...Everywhere! One of the new additions to Vista UI is the sidebar gadgets panel.

    Figure 1 Figure 2
    image image

    While these little gadgets are useful, careful design considerations are need to ensure they are non-obtrusive and usable. For example, since gadgets are small in size, they are designed for highly specialized tasks.  More importantly, one gadget should be only designed for one simple task such as keeping track of time or weather condition. Therefore, if you want to create a gadget for flight booking, you may want to break down the complex task into several manageable smaller tasks. For example, you may want to create a flight viewing gadget sitting on your desktop to show you the next available flights and their prices to a preset destination. There may be a link on the gadget to direct the users to buy tickets on airline websites. However, this gadget seems to be useful only for frequent travelers.  Well defined task is just one of the design concepts we need to be careful when designing gadgets. The Windows UX team concluded a list of design concepts and guidelines on sidebar gadget design. Some key concepts are:

    • Perform a single, well-defined task very well (see figure 2 for a bad example, non of the functionality performs well)
    • Provide functionality that is useful all the time
    • Make sure the gadget works well in the periphery by being quickly accessible while not being distracting
    • Use a visually attractive theme that indicates the gadget's singular task
    •  Make your gadget unique through its functionality and visualization, but use standard interactions.

    Check out the guidelines and let us know what you think. If you have a well-designed gadget and would like to share, please send it my way.


    Technorati Tags: ,
  • Canadian UX Blog

    Help improve Expression Web


    Expression Web icons 

    The Expression Web team is conducting a survey on hosting and publishing to learn more about how web professionals publish and host websites. The survey is anonymous and does not collect any personal information.

    All feedback is used to help improve future versions of Expression Web.

    The survey is located on Microsoft Connect:

    [UPDATE by Paul Laberge, 26/09/2007]

    Thanks to Laurent Duveau who noticed the above link no longer works.  You can now provide feedback on the entire Expression Studio suite of products (not just Expression Web) here.  If you have an opinion on how features of the product work (both negative and positive), please let us know.  Your feedback is taken seriously and the intent of providing you the opportunity to speak your mind about the products is to truly improve your experience with future versions.

  • Canadian UX Blog

    Where's my CanUX blog?

    Technorati Tags: ,

    If you frequently visit this blog, you may have already noticed some not-so-subtle changes to the look and feel we made.  It's not a mistake - we've been deliberating the overhaul of the experience you have on this blog over the past little while.

    There were a lot of little and not-so-little things that bugged us (and a number of the readers of this blog!) about the experience of reading this online journal.  Personally, my biggest pet peeve was the size of the text column in the blog itself.  Way too narrow.

    Well, we made the changes we hope you like them.  Among the big changes that you will notice are:

    • A dynamic page width feature that will better suit both 4:3 and 16:9 screen aspect ratios
    • A faster page load experience
    • Links to the other community blogs we provide (i.e.:  CdnDevs, CanITPro, CdnITManagers)

    We hope you like the changes.  This is an iterative process and as suggestions are given to us and ideas pop into our heads, we'll make more changes to make your experience on this blog even better.  On that note, if you have ideas for us or comments on the changes we've made, we'd love to hear about them - send us a comment on this post and we'll gather the feedback!

    Here is a before and after look comparison. Thanks to our intern, Mark Zielinski, working hard to give a fresh look to our blog.

    image image
    Before After

    Paul and Qixing

Page 1 of 1 (10 items)