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.
Paul LabergeWeb Platform AdvisorMicrosoft Canada
There are a lot of creative students in Canada who are doing innovative work to improve people's life through interactive, visual, informational, and other aspects of User Experience Design. I invited them to introduce who they are and share their work with you. To nominate a Design Student of the Month, email us. The Design Student of the Month for April 2008 is Don McKenzie! Congratulations!! Let's hear from Don.
I am a student at the University of Waterloo in the Arts and Business program, specializing in Digital Arts Communications and majoring in economics. The digital arts communications specialization at Waterloo is a relatively new program that teaches students how to design, develop, and test media for a wide variety of businesses ranging from the high-tech sector, to corporate communications, to the creative industries. I am in the co-op program at Waterloo and it is a great opportunity to work on real-world projects for real employers.
What cool stuff is Don doing?
With Waterloo being a co-op focused school, I have had the chance to apply my studies directly to a number of commercial projects. Most recently, I have spent my last two co-op terms working at Research In Motion (designers and manufactures of the BlackBerry). Currently I am part of the industrial design team at RIM, designing graphics which get applied to production and next generation BlackBerry smartphones. It has been an immensely satisfying experience to see the work I create actually get produced on such a large scale.
During my upcoming school term as part of a fourth year project, I am planning on designing and developing a database driven website to fulfill a niche market of a classifieds website for sail boats. I am looking forward to applying a number of front-end web design techniques leveraging ajax, progressive enhancement and gradual engagement to create a seamless user experience.
An assortment of school and commercial work I done prior to my most recent co-op terms is include below.
What are Don’s plans after graduation?
I have been into the idea of doing either industrial graphic design as I am doing now, or front-end web application design (I really enjoy coding css and js). Within the broad umbrella of design that I have had the chance to explore, these are the areas that I have found to be most exciting and rewarding.[optional]
Want to learn more about Don?
My current portfolio is available at www.donmckenzie.ca, where I can also be contacted.
Similar to Live Labs, Office Labs is another home for prototypes and proofs-of-concept with focus on productivity, which will allow community to test drive our new ideas and provide feedback. From their own words:
"We're a group of designers and developers that collect ideas from all over Microsoft (but mostly from Office and other products related to 'getting stuff done' - what we call 'productivity'). We build working prototypes of the most promising of these ideas to see if they work as well as we hope they might."
There is a list of interesting projects going on at Office Labs:
Following my post on Silverlight 2 resource, here's a list of Silverlight 2 "How-Do-I" videos that have been added to Silverlight.net.
1: Using the Silverlight 2 Canvas (35 minutes, 42 seconds)
2: Using Silverlight 2 Grids and Stack Panels
(19 minutes, 50 seconds)
3: Silverlight 2 Carousel Implementation (3 minutes, 39 seconds)
During MIX08, I had the chance to experience a variety of surface demo applications and record them. In the video gallery below, you can see 5 different surface usage scenarios: viewing photos, dining, concierge, painting, and water simulation. Photo viewing demo is great to show the collaboration aspect of Surface table. Dining is my favourite demo which takes people's dining experience to a whole new level. Concierge demo opens more opportunities to explore the possibility of how public displays can be more interactive and connected with personal devices. Painting is a simple demo but illustrates the four key Surface Computing attributes: direct touch, multi-touch, multi-user, and object sensing. Water simulation is powerful demo to teach people how to interact with surface - interacting by what feels natural.
With Surface deploying at At&T stores in the US now, you can see Surface help AT&T retail store customers.
FYI. The video gallery below was created in Expression Encoder 2. I'll post a mini-tutorial on how to create and customize your Silverlight video gallery soon. Stay tuned!
Woodgroove Financial online demonstrator has been gaining quite a bit popularity within the financial industry to show what future rich interactive web banking applications could be like. I decided to talk to the architects behind the inspirational demo: Chris Ching (Lead Developer, Infusion Development Toronto Office) and Douglas Gregory (Lead Designer, Frozen North Productions Waterloo) about their experience of working together on the application. You can see a short demo of the app below and get the source code of the demo here.
1. What is your role at work? What are the technology and tools that you use at work currently?
Chris: I am a consultant and lead Silverlight developer in the UX practice at Infusion Development. We build solutions in WPF, Silverlight, and ASP.NET among other technologies and we work with other groups at Infusion to meet their user experience needs. We use many of the tools in the Microsoft Development platform including Visual Studio Team System and Expression Studio.
Douglas: I'm lead designer at Frozen North Productions, an Infusion Angels company (Infusion Development sister company), as well as a User Experience designer for Infusion Development. My work includes game designs, concept illustrations, and user interface graphics. I use pencil-and-paper, graphics software like Portalgraphics openCanvas and Adobe Photoshop, and word processing software like Microsoft Word and Adobe InDesign. I also put together game and technology prototypes using tools like Adobe Flash, AMD/ATI RenderMonkey, and console-specific developer tools.
2. Give a brief description of what the Financial Demonstrator Application is about? What technology and tools did you use for developing the application?
The Woodgrove Financial application is composed of numerous financial scenarios that the customers of a bank would use. The goal for creating something like this is two-fold. First, it showcases innovative UI experiences/visualizations for existing and completely new financial scenarios and second, it demonstrates the capabilities of Silverlight.
Chris: As for technology and tools, the developers used Visual Studio 2008 and the Silverlight tools for Visual Studio.
Douglas: The designers used a combination of Adobe Illustrator and Flash, Microsoft XAMLPad, Expression Design, and Expression Blend.
3. Have you worked on Silverlight project prior to this? How did you divide work for this project (e.g. Designer vs. Developer)?
Chris: Silverlight development was very easy to pick up since we were able to use C# and work in Visual Studio. We divided the work logically between designers and developers. The designers created the UI in Blend and the developers wrote the business logic and hooked up the interactions for the UI elements. Given the XAML from the designers, the developers broke out the common UI elements into reuseable controls and re-constructed the layout.
Douglas: The visual side of this project was handled by three designers: one graphic designer to create the base style palette, myself to translate his work into XAML and produce additional graphics, and another designer and I working together to lay-out the graphics into screens and animation timelines. All interaction was then handled by the developer team, with only minor changes to the screen layouts needed. In my previous experience with WPF, I had been able to take on some of the low-level interaction like button states and data presentation myself, allowing the developers to focus exclusively on the more complex interactions. Before that I had only developed in Macromedia/Adobe Flash, where I generally took ownership of almost all the graphic and interaction requirements, making it difficult for another developer to contribute.
4. During Chris’ .NET user group meeting, he mentioned that through XAML, designer and developer can now have a streamlined collaboration process. What was your designer-developer workflow like during the Woodgrove Financial development?
Chris: Our designer-developer iteration was per scenario so there was a designer to developer hand off for each scenario in the Woodgrove Financial application. The designer-developer workflow is most efficient when there is no overlap and the designers/developers do not have to spend time in each others’ environment.
From a development perspective, it is more efficient to have tighter designer/developer iterations by breaking down UI layouts into logical smaller pieces because this would have to be done later by the developer anyways. This minimizes harvesting of particular pieces of XAML from a larger XAML file. Another improvement is to have the designer and developer agree on the names of UI elements before the design as this also minimizes the need for the developer to look into the XAML.
Douglas: Our workflow started with the developers meeting with clients and doing research to develop requirements for the application, then scripting-out a set of interaction scenarios. Afterwards we would meet and refine the scenarios into interface designs. We could then go our separate ways, the other designer and I laying-out the screens while the developers could work on other tasks. As the screens came together we would pass off updated XAML files for the developers to plug into.I liked that we could work asynchronously, even from different offices the most recent XAML file alone was usually enough to keep us in-synch.
Some lessons learnt were updates to the XAML couldn't simply be copied over indiscriminately, but had to be carefully worked-in to avoid breaking changes made by the developers. Designer and developers should also agree on instance names together to make developers' job easier when hooking up the UI instances with application logic.
5. Financial services applications have quite plain and serious look and feel. However, Woodgrove Financial is really fun to play with non-traditional graphics design and rich interactions. How has it been received in the financial industry? Can people appreciate rich UX for online Line of Business Applications?
Chris: The reaction from the financial industry has been extremely positive. From a retail point of view, the rich UX provides a compelling and intuitive experience for customers. The end result is increased loyalty and customer satisfaction. Even for non-retail operations, the rich interactive graphs and innovative data visualizations have presented new ways of interpreting data.
Douglas: I would say that when rich UX is done in a way that makes interactions more intuitive, clear, easy, and efficient, it's hard not to appreciate them.
6. From your experience of working with Silverlight 2, how does it different from Silverlight 1? What are some improvements in Silverlight 2?
Chris: Silverlight 2 is vastly different from Silverlight 1 and brings about many enhancements. The Woodgrove Financial application was initially built in Silverlight 1. Many of the controls we needed such as buttons, datagrids, dropdowns and layout controls were not available at the time so we had to build them. When Silverlight 2 came around, it improved the development experience by introducing a new series of controls, styles and templates, databinding and increased networking support. Silverlight 2 also automatically generates references to the XAML elements allowing the developer to refer to them by name from the code. Those are just a few of the features that make Silverlight much more friendly to work with.
Douglas: Silverlight 2 has many more of the features I got used to using in WPF, like sophisticated layout controls, skinnable components, and shared resources. It makes creating complex interfaces much easier, and means I can set things up in a way that requires less extra work on the developers' end to turn into working UI. Iterative modifications to an interface are much easier now, as shared resources and skins can be updated and layout containers adjusted without having to tweak every instance and sub-element to keep consistency.
7. What was your experience of learning the new technology (i.e. Silverlight) and tools (Expression Studio and Visual Studio)? Can your previous knowledge easily be transferred?
Chris: We were able to leverage our existing experience in C# and Visual Studio to begin development with Silverlight. I had not worked with XAML before this project but it was also very easy to pick up from the QuickStarts on Silverlight.net. Expression Blend was a great tool to fill in what I didn’t know how to do in XAML because it allowed me to use the designer interface to generate XAML which I could then analyze. Overall, it was a very intuitive transition to Silverlight.
Douglas: As I mentioned in the previous question, building Silverlight 1 in Blend was quite a shock after building WPF applications in Blend, but Silverlight 2 has reduced the gap between them and made knowledge transfer much easier.
8. What are the things we can improve to the designer or developer tools to further support the workflow?
Chris: I understand this feature is coming but I would still like to mention it. It would be great to make the design view in Visual Studio interactive because sometimes the developer needs to identify certain pieces of XAML from a larger file. Much like in Blend, it would be useful if the user can click something in Visual Studio design view and have the corresponding piece of XAML highlighted.
Douglas: Ideally, it would be nice to have all of Expression Design's functionality in Blend, so that I never have to leave the program to tweak a graphic, only to re-import it and have to wrestle it back into its original context - recreating data bindings and the like.
February this year, UPA (Usability Professionals Association) release their 2007 salary survey results. For some of you who are not familiar with UPA:
The Usability Professionals’ Association supports usability specialists, people from all aspects of human-centered design, and the broad family of disciplines that create the user experience in promoting the design and development of usable products.
The Usability Professionals’ Association supports usability specialists, people from all aspects of human-centered design, and the broad family of disciplines that create the user experience in promoting the design and development of usable products.
The survey has some interesting results from both the type of work UX professionals do in their daily job and how well they are compensated over time, across country and by gender. For example, in the graph below, the top 5 activities most UX Pro do are expert review, informal usability testing, user research, interface/interaction design, and prototyping. It's a good indication for someone who wants to get into the UX field, showing experience in these core skill areas is very important.
Canadian UX pros seem to be somewhat under paid compared to the people working in the US by looking at the graph below, especially since our currency and cost of living are similar.
However, if you look at salary change over time by country, UX professionals in Canada has the most average salary increase (> $15,000) among countries with sufficient survey sample size.
The survey also indicates that “gender gap” - the difference in average and median salaries between men and women – has narrowed. The average salary for men increased $2,878 from late 2005 to late 2007; women’s average salary rose more than twice this amount, or $6,384. (Median salary for men increased $5,000; for women, $7,000.) This is a healthy tread I'm pleased to see.
DevTeach 2008 is coming to Toronto.
One of the first and most common questions I get about Silverlight is "how does Silverlight compare to Adobe Flash and AiR?" Although I wrote a post last year talked about Flash vs. Silverlight, with Silverlight 2 Beta release last month and all the announcements at MIX08, it's time to revisit some of these popular questions people have been asking about.
If you haven't already, I highly recommend you to read or listen to the interview that Knowledge@Wharton conducted with Scott Guthrie, our developer division corporate vice president. In the interview, Scott answered questions regarding Silverlight's business model, commitment for cross platform, comparison to Flash, Silverlight on mobile devices, and other RIA platform questions that on top of people's mind. I selected a few to include in this post.
Knowledge@Wharton: Many people have observed that a Silverlight 2 application is very similar in the look and feel you get with Adobe's Flash. How do you differentiate yourself from Flash? Why is Silverlight something that we need? Why not just use Flash if you're building an interactive web app?
Guthrie: In the [MIX08] keynote we were careful in showing specific examples that you can't build with Flash. You couldn't do the Olympics [Silverlight-based website] with Flash. It doesn't have the media capabilities; it doesn't have the adaptive streaming capabilities to host that type of experience. The kind of performance that was shown with the AOL mail reader as you...scrolled up and down -- the Flash Player would not be able to handle that many million emails inside an Inbox without choking. If you look at the Hard Rock example of zooming in and out with the Deep Zoom technology -- you can't do that with Flash. If you look at the Aston Martin experience, where they were showing both the Deep Zoom, where you can see the stitches in the [car's leather interior], but also the 3D rotation of the car inside the browser -- Flash today doesn't have the graphics power to do that on typical hardware. Are there types of experiences in terms of rich interactive, or Internet, experiences inside the browser that you can do with Flash? Absolutely. We were there with Silverlight 1 in terms of video support, but with Silverlight 2 we're now there not just with video but also with a host of non-video scenarios. If you compare [what] Silverlight [can do] versus what you can do with Flash, the Silverlight experience is much richer.
Knowledge@Wharton: How committed are you to cross platform? Will the Mac and other platforms have the same feature set and the same performance that we'll see in the Windows environment with Silverlight 2 and 3 and 4?
Guthrie: That's certainly our plan. From a feature-set perspective, all of the features that are on the Silverlight 2 that we're shipping this week -- all of the features are equivalent on all platforms and all browsers. We very explicitly designed our feature set to make sure that that's the case. For example, in a previous alpha last year we did not have East Asian font support, we didn't have a text box, and people would say "How hard is it to add that?" Well, it turns out that if you want to add it in a cross platform, a cross browser way, it's actually really hard. We now have those in the Silverlight beta that we shipped this week. We could have added it in the alpha to work on Windows first and then caught up with the Mac. But we explicitly said no, we are going to wait until we have the features everywhere because we want to make sure that there's no ambiguity about the importance of having a consistent API and a consistent set of features that run in all places.
Knowledge@Wharton: Adobe just launched version 1.0 of its AIR platform. Although, in some ways, Silverlight has similarities to Flash, Microsoft really doesn't have anything in the space that AIR is targeting.
Guthrie: You know, Adobe has sort of said that [but] Microsoft has been in the desktop applications business actually for quite a while.... We've been building desktop applications with Visual Studio for, I think, 27 years. A lot of people are [saying], "Wow, now you can build desktop applications." We do that with the .NET framework today -- we have a very, very rich desktop application model and a very rich offline story -- where we have full sync replication across machines, across protocols. We have rich integration where you can build desktop applications that integrate with Office, can do interchange with Office, that do 3D hardware acceleration. You can't do that sync, replication, graphics or Office integration with AIR.
Knowledge@Wharton: A key difference is that AIR is running at an abstraction layer above the operating system and that once you develop an AIR app, you have an app that instantly runs Mac, Windows, and, soon, Linux -- which is different than your architecture.
Over the past several months, I went to many colleges and universities to talk about user experience related topics from Microsoft. After each presentation, students asked me to share my presentation online. I've been using Skydrive to share my large files such as ppt, audio, and video files with the public. Although Skydrive is very convenient, users still need to download the entire presentation and then open it in pdf or Office PowerPoint to just get a quick interview or look at couple of slides in the presentation. As I was playing around to create my first Deep Zoom demo, I had an idea - why not creating a presentation visualization that allows users to view the presentation right here: on a web page or a blog post. I know many people use SlideShare to show PowerPoint Presentations online, but I'm thinking about a new way to view ppt slides. With the power of Deep Zoom, I'm able to embed my entire presentation in small space (500x400 pixels).
You view it in action here. Make sure you have Silverlight 2 Beta installed to view the Deep Zoom demo. The major steps I went through to create this online experience are:
<UserControl x:Class="DeepZoom.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="500" Height="400"> <Grid x:Name="LayoutRoot" Background="White"> <MultiScaleImage Source="presentationdeepzoom/info.bin" x:Name="deepZoom" /> </Grid> </UserControl>
For you designers out there, you can quickly tested out the Deep Zoom idea by skipping step 4 and 5. All you need to do is, download my project source code, open it in Visual Studio 2008, and change two things. One is updating the "Source" in <MultiScaleImage Source="presentationdeepzoom/info.bin" x:Name="deepZoom" /> with your export folder name. The other thing is to replace the "presentationdeepzoom" folder in ClientBin with your export folder.
Congratulations! Now you have your presentation in Deep Zoom live and ready to impress your friends. :)
October last year, I went to the first education fair focusing on design here at Toronto Convention Center. The conference is called Explore Design, and indeed I saw so many aspiring future designers exploring exciting opportunities in Design field. There were about 4000 high school students attended the event, and many colleges and universities with design programs showcased at the event. Here's a blog post on the event with pictures and videos on CanUX last year. So, what does it take to organize such a high energy and inspiring conference? I had the pleasure of inviting the Chief Experience Officer of the conference, Shauna Levy, to answer couple of key questions I have in mind regarding organizing such large design conference for youth.
What’s your goal of organizing the Explore Design conference? Why focus on youth?
We have been working in the design world for over 10 years now and have seen the industry grow. Not too long ago we learned that 75,000 people are employed in Toronto in the design sector. And in fact, Toronto has the 3rd largest design workforce in North America after New York and Boston. With the growth of its importance and the workforce, we realized that there was also a need for educated people within these disciplines and quickly learned that there were many schools offering design programs. At the same time, we also learned that there are many high school students out there who are creative or artistic and don’t often know that they can pursue a lucrative career that also allows them to take advantage of their talent (and in most cases, passion). And so, we came up with EXPLORE DESIGN – a design education fair for senior high school students. Here, students can learn about their post-secondary design education options in areas such as interior design, fashion design, architecture, graphic design, video/film, digital, furniture, industrial and automotive design and many more…
The display floor of last year’s conference is very impressive with lots of creative space designs. What are some design considerations/inspirations for you and your team to create an experience, which attracts middle and high school students?
It was important for us to create an experience that high school students could relate to. There are other university or college fairs out there but it was really important for us to create an intimate environment that really communicated with students – in particular, students who are creative or art-minded. For example, there was an on-site student lounge featuring a DJ, bean bag chairs and low tables; there was a “pod” on the show floor that held the “design for the greater good” seminar series, a “drop-in” series that addressed sustainable design and design with conscience.
What are some feedback you got from students and presenters who attended last year’s conference?
Students’ responses were overwhelmingly positive. About 93% of attending students were already interested in studying one of the design disciplines. Presenters and keynote speakers were overwhelmed by the students’ enthusiasm and knowledge of design. For Explore Design 2008 that’s coming up in October, the number of participating design schools will also be at least double of that of last year. We have some super exciting keynote speakers and seminars planned that will be announced in May.
You are quite experienced organizing large design related shows. For example, you organized the Interior Design Show 2008 at the Direct Energy Center recently. What’s the hardest part in organizing events involved thousands of people?
Details. Our events are never simple, but that’s what makes them so exciting for the visitor. The higher the experience, usually, the more the details. But that never scares me away from an idea. If the idea is good, we’ll figure out how to make it happen…beautifully and magically.