Sharing of thoughts and information is what blogging is all about. This way we can learn from each other. Post A Comment!These postings are provided "AS IS" with no warranties, and confers no rights. You assume all risk for your use.
Resident Bloggers
Paul LabergeWeb Platform AdvisorMicrosoft Canada
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:
In addition to the key principles, I found some of the small tips Bill offered during his presentation to be particularly insightful.
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
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:
<SilverlightApp><version>1.0</version><loadFunction>StartWithParent</loadFunction><jsOrder><js>MicrosoftAjax.js</js><js>BasePlayer.js</js><js>PlayerStrings.js</js><js>player.js</js><js>StartPlayer.js</js></jsOrder></SilverlightApp>
iframe object code:
<iframe src=http://silverlight.services.live.com/invoke/AccountID/AppName/iframe.html 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.
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:
Trend Map 2007 Three Views
Enjoy, Qixing
Cross posted at http://davidcrow.ca/article/1644/canadians-win-design-awards
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.
“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.
Cross posted at http://davidcrow.ca/article/1637/silverlight-resources
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?
What does my team need?
Designer Tools
Developer Tools
What training and resources are available?
Training
Silverlight Resources
Related Microsoft Tools
Related Blogs
The momentum for Silverlight is building both internally and externally.
Qixing
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!
Paul
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:
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.
Paul and Qixing
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.
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:
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.
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:
http://connect.microsoft.com/ExpressionWeb/Survey/Survey.aspx?SurveyID=4181
[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.