All my sister blogs (IT Manager, CanDev, and CanITPro) have shared the great news that Live Mesh is now available as Technology Preview in Canada without a sign-up wait list. So, you don't have to wait to try out the cool software-plus-service technology. Here's the official description of Live Mesh:
Live Mesh is a “software-plus-services” platform and experience that enables PCs and other devices to “come alive” by making them aware of each other through the Internet, enabling individuals and organizations to manage, access, and share their files and applications seamlessly on the Web and across their world of devices.
I can't wait to try it when I'm back in Canada from vacation. To see what the Live Mesh platform is capable of, check out the Channel 9 videos.
What I'm excited about Live Mesh from an user experience perspective is that we are hiding the complex solutions for file synchronization and sharing, data and device management, efficient collaboration between people by provide users a very simple interface to interact with and administrate their digital life. Everyone is facing more and more problems with information overload, handling different types of data from Internet, mobile devices (camera, cell phone, PDA, etc.), to computers (laptops and desktops) at work and home. I like how Windows Live Mail can bring in all my emails to one place, how Windows Live Photo Gallery can publish to both my flickr and Windows Live accounts to share my photos, and how Facebook keeps me updated with my friends status. If a solution can bring all these specialized solutions together, it'll make my life much easier. I love the fact that I can access and synchronize my information anytime and anywhere. Note: it's more than anywhere on the web but potential on any web connected devices as well. Live Mesh shows me the promise with its platform capabilities. Lastly, I like how the description on the Live Mesh homepage puts users at the centre. It's also how the fundamental platform architecture is designed according to this white paper. Good example of user-centred software-plus-service platform.
Although Live Mesh is still in its early Tech Preview stage and the earlier adopter will probably be tech savvy individuals who owns multiple computing devices, I'm looking forward to designers and developers innovating on the platform so that average computer users can really benefit the technology and make their everyday life easier.
Qixing
By now many people have seen the capabilities of Microsoft Surface. If you haven’t, you can check it out here.
While it has generated a great deal of buzz for being innovative and compelling, most of the press around it has been focused on the consumer aspect of the platform (for example, being used in select Sheraton Hotel bars as a way to order drinks without a waiter or as a new kind of kiosk). There hasn’t been much press about Microsoft Surface being an innovative way to deliver line of business applications, but those types of applications are coming out of the woodwork now.
Guy Barrette found this amazing video of a great application built in WPF (Windows Presentation Foundation) for the Microsoft Surface platform. In a nutshell, it is an application that allows a doctor to view a patient’s anatomical information (stored in the cloud in Microsoft’s Health Vault) as well as powerful visualization of the data.
It's the best time to be in China right now and I'm so happy to spend my summer vacation here with my family and friends. Hope you enjoyed the opening ceremony. The picture on the left is the front page of my hometown(Suzhou) newspaper saying "this is a historical moment, which fulfill our dream for 100 years." Being Chinese, it's a truly moving moment for me.
From the experience design point of view, I really liked the story telling techniques throughout the show. In particular, the opening video showed traditional paper making and brush work. What's brilliant is at the end of the video, we saw a scroll of paper, which then transferred to the huge physical paper scroll that was the main platform of all the performance followed. The experience was very continuous for viewers as it moved from a look at traditional Chinese culture to the modern China. Of course, during the show, we got to leverage the fact that we have 1.3 billion people. :-) The 2008 drummers countdown at the beginning to the 2008 people forming a peace dove at the end, show China's love of harmony and unity.
Enjoy the games! - cheers, Qixing
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 August 2008 is Benjamin Coe! Congratulations!! Let's hear from Ben.
Who's Ben?
I grew up in Fergus, Ontario, a small town close to Guelph. I attended the University of Guelph and completed a Bachelor of Computing Honours degree in 2007. I am currently pursuing my Master's degree in Computer Science at the same University.
I am interested in Natural Language Processing, Philosophy, Human Computer Interaction, and Cognitive Science, and I look forward to applying my research in these fields to User Experience Design. I would like to develop deceptively simple interfaces that leverage an ability to understand language and to 'think' beyond the capabilities of current systems.
What cool stuff is Ben doing?
My research primarily involves computational linguistics, cognitive science, and artificial intelligence. I'm very interested in applying cognitive theory, AI and web-ontologies to a field that currently uses mainly statistical approaches to information processing. I'm interested in showing how this technology could be practically applied to web applications, creating intelligent systems that the average Internet user can help build, train, and maintain -- at the same time benefiting from their capabilities.
In my spare time I have been developing a massively multi-player online game, which has been a very interesting (if not yet profitable) experience. Hack Wars, which has 5,000 registered users, has been a valuable learning experience, teaching me about managing online communities, developing complex parallel applications, security, and other user-centred issues directly applicable to my field. Hack Wars is a virtual hacking game which incorporates aspects of programming and web-design, essentially giving players access to a pseudo operating system.
Please see my list of work in the video below.
What are Ben's plans after graduation?
I have been considering continuing my education at the doctoral level, but I would also be very interested in running my own company offering high-performance computing solutions for research and industry, having learned a lot from courses on the subject as well as from running Hack Wars. Having friends with a similar ambition has also made me interested in moving in this possible direction.
Want to learn more about Ben?
My Online Game at http://www.hackwars.net.
One of our great partners out of Quebec, RunAtServer Consulting, has just created a great, three-day course on Silverlight 2 and they will be conducting it in various cities in Quebec. The details of the course can be found here and here, but it is a very in-depth course for those of you interested in building really solid and compelling RIAs (Rich Internet Applications) with Silverlight 2.
The dates and locations of when and where they will be conducting the course are below for your reference:
- September 3-5, 2008 (Montreal)
- November 5-7, 2008 (Quebec)
- November 19-21, 2008 (Montreal)
- January 26-28, 2008 (Montreal)
I've worked with one of the principals of RunAtServer Consulting (Laurent Duveau; his blog is here) and their knowledge of Silverlight is very deep.
This is it! Day 5 was the last day of our training, and we were scheduled to present our project at 3:30 in the afternoon. The atmosphere in the training room was very intense, and nobody felt there was enough time. From the design side, I needed to restyle the main UI, adding a logo component for our application and a DeepZoom component to indicate the distance between two individuals who are sharing the virtual table. From the development side, John needed to attached drag-n-drop interactions to all the objects on the table and hopefully to work out the detection component so that we can fire intense glow animation when two people's hands are touching each other.
Here's a screenshot of our final application.
Want to see it in action? Check out the video below:
Day 4 involves a lot of hard work (9 am - 12 am). It feels like the crunch time before final projects back in grad school. At the start of the day, we reviewed each other's progress and decided the underlying messaging framework for two Silverlight applications to communicate with each other was too time consuming to implement. Our priority should be integrating XAML with backend code logic and demo the use cases locally by creating two surface tables on one page.
Things we learnt today from our designer-developer workflow:
- Since Blend doesn't integrate with source control services like Visual Studio and we have a very short timeline, we used Office Groove to be our source control (see the image below). We keep track of version by attaching time stamp with the names.
- Our integration workflow works like this: I first uploaded my version of LACT project. The project folder includes all the XAML, images, user control files. John then worked with this version of the project as the base to wire the states and animation of user controls with user interaction events in Visual Studio. From this point on, the John controls the latest version of the project. I only send him updated XAML files for him to replace the existing ones. This workflow worked very well. We were both very happy about how easy it is to update pieces of UI with new XAML files and everything still works. The key is to keep object names consistent.
- By using Live Meeting and sharing our desktops, I was able to guide John on what user interactions to implement next and making sure he accessed the right objects, visual states I created in Blend. One thing which is difficult with remote collaboration using LM is that we can't share both of our desktops at the same time. There's quite a bit of time spending on switching sharing either my or John's desktop, which slows our work.
- One major challenge I found in Blend is that some XAML components, which are supported in Silverlight 2, can't render in Blend design time. For example, I added "tooltips" controls in XAML because there's no UI option for me to add tooltips to a button for example in Blend. Once I added the tooltip XAML code, my design can't render in Blend anymore, and I get an "Invalid XAML" error. What I have to do is temporarily comment out the tooltip XAML code and make it available when I run the project.
At the end of the day, we were able to complete
- adding a gift box onto the table, sparks gift box opening animation
- choosing flower from the gift box and add to the table, the other table receives the flower, which is shown as the glow state
- once the receiver accepts the flower, flower starts to grow
- placing (e.g. adding) the hand tool onto the table, sparks the hand tool animation
- placing a single hand onto the table and sends out vibration animation, the other table notifies the the hand.
On Day 5 (our last day), we'd like to accomplish
- user can move objects on the table to anywhere, and the other table will mirror the movements
- when two hands are placed together, the intense vibration should occur
- restyle the main UI (page.xaml) so that we have: logo, different look of the two tables, visual cue for whose hand it is in the hand touching scenario
- add a deepzoom component to indicate the distance between the two individuals sharing their tables virtually
John and I started parallel working in Day 3 and chatted back and forth on each other's progress using Office Communicator.
On the Design side, I first focused on creating graphical elements in Expression Design. For each of our application scenario: sending gift, touching hands, and playing games, I created graphics for three different states: the normal states, the mouseover state when a user enters the tool/object, and a disable state when a user starts to drag the object onto the surface table.
The second part of my work is to create controls and animation using these graphics in Blend. The left image below is the initial wireframe, and the image on the right is after editing XAML and important XAML from Design. Creating a button with different interaction states is quite easy in Blend using visual state manager. Basically, I created a button template with three graphics as its content and then depending on the state to set the proper graphics to fade in and the current graphics to fade out.
On the development side, here's from John's own words.
Today, I focused two aspects of the LACT(Live Apart but Connect Together) application. First, I wrote a quick implementation of drag & drop functionality that our users will experience as they interact with the application. It was important for me to implement this feature early on in the development lifecycle since a visual element like this is critically important to a positive user experience. Second, I began working on the underlying implementation of the messaging framework that will be used for the LACT application. In retrospect, I should have probably thought a little more about its possible implementation. As I walked through the design of the architecture, I began to realize just how complex it was! For the LACT application, we’ll be looking at using some of the new HTTP duplex mechanisms now supported in Silverlight 2 Beta 2. I’m glad that this feature was added recently. Otherwise, I’d be stuck coding sockets. Yuck.
Here’s a screenshot (below left) of the drag & drop implementation I built earlier today:
The black background for each element has been designated our non-hittable area. This space is reserved for navigation items (i.e. close icon) and allows us to support non-rectangular objects in a 2-D space. Note: The black will be made fully-translucent once we get closer to our “RTM”. This white ellipse represents our objects. These could be anything, really. They support a drag & drop functionality that will elevate them to the top of the z-index when they are selected. This is a common implementation for more 2-D surfaces you see in the industry today.
I also made sure that the implementation can scale. Here’s a screenshot with 500 objects. (see above right) I wasn’t able to see any flickering with this many objects on the surface. Hooray!
Day 4, we'll start integrating XAML with code so that instead of dragging dummy objects above, users will be able to drag objects I created above to the table and see animation occur. Let's wish the best luck for John to make breakthrough in implementing the underlying messaging framework so that two instances of the application can communicate with each other.
Another day of collaborating virtually with John. This morning we learnt about creating handoff animations and editing control templates in Blend for designers.
Handoff animation is something Frame-based animation model can't do. Handoff animation means an animation timeline can interject another timeline of an object, no matter where the object is.
The rest of morning was focused more on Silverlight development such as creating event handlers and databinding in Visual Studio 2008. The first milestone we accomplished today is on our project idea and scope.
The project we are going to build is a simulation to explore a future Surface Computing usage. Imagine using Surface tables as virtual shared spaces for long distance love ones. For example, Judy lives in Vancouver and has a surface table as her coffee table. Judy's boyfriend, Jack, lives in Toronto and also has a surface table as his coffee table. The two tables can communicate with each other. It's important for long distance love ones to
- have subtle awareness of each other
- have a shared space together to make them feel they are close to each other
- something to help them enhance emotional connection with each other
- and be more involved in each other's live
We'll use Silverlight to simulate two surface tables communicating with each other in three scenarios:
- Jack and Judy send gifts to each other through surface tables.
- Jack and Judy hold hands together virtually.
- Jack and Judy can play games together on the tables.
Here are my storyboards for the above scenarios.
John and I collaborated on Live Meeting using the whiteboard tool (see below) to decide the design and development priorities for the project, the initial wireframes, and naming conventions for major UI components. The next stop I'll focus on creating graphics comps using Expression Design and creating user controls and animations using Blend. He'll test out the communication strategy between two silverlight applications and drag and drop interactions. Stay tuned for Day 3.
This week my teammate John Bristowe and I are participating in the Microsofties in Residence Training (MiR). It's a five-day Silverlight training for Microsoft internal designers and developers. A designer is paired with a developer, so in our case I'm the designer and John is the developer. First a day and half is instructor led training, and the rest is hands-on project time. The goal is to finish a project at the end of Day 5. It's a quite intense training considering we need to finish a project from concept to completion in just 5 days.
John and I have an extra challenge because he injured his foot during our offsite last week and wasn't able to come to Redmond for training in person. We are collaborating remotely. See the picture above, I'm in Microsoft headquarter at Redmond, and John is working from his home at Calgary. This is actually a real-world situation that many designers and developers face when collaborating on projects. We used Live Meeting for John to participate in the class virtually (see below). He can see through my web camera on what's going on in the room and talk through the audio conference bridge, which was connected with the Live Meeting. As we going forward, we'll use more Live Meeting's sharing capabilities. I want to share our training experience as it progresses this week. I hope you find our learning from the training useful as well.
Day 1 Training agenda and notes:
- Different than either designer-centric and developer-centric linear style workflow, the workflow for building Silverlight Rich Internet Applications (RIA) is parallel. This means after conceptual design, there are two things a designer and a developer need to agree on, then they can work in parallel. First thing is a wireframe(more explanation in the next bullet) in Expression Blend, and the second is a naming convention document.
- Wireframing in Blend is quite different than wireframe is used in other context. For example, it's very different than sketching. When you do wireframes in Blend, you are focusing on the layout of the UI components, the organization of the components (i.e.how they are grouped), and what UI controls to use to create the desired behaviour or experience.
- "Naming Convention Document" is another important strategy for successful designer-developer working flow. Making sure all the UI controls, animation storyboards, and events have proper names reduce a lot of error and save time. For example, use "stb_something" type of name to indicate it's a storyboard. Similarly, use "evt_" before events' names.
- creating a customized control and set its states using State View Manager.
- The workflow between Expression Design and Blend. If you apply effects to vector art in Design, it'll export as images (i.e.pngs) to Blend. Also, Silverlight doesn't support "gif."
That's it for today. See you tomorrow!
Qixing
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 July 2008 is Hannah Johnston! Congratulations!! Let's hear from Hannah.
Who’s Hannah?
I recently completed my Bachelor's degree in Information Technology - Interactive Multimedia and Design at Carleton University in Ottawa. I think it’s a great time to be designing technology as ubiquitous computing is taking off and technological interfaces are going far beyond the limitations of standard computer inputs. I'm primarily interested in using technology to design interactive media and games that are both entertaining and practical.
What cool stuff is Hannah doing?
I’m currently researching the use of inertial sensors for video game input in order to change the way people play. With accelerometers strapped to the body, we’re able to detect different body poses as well as some basic gestures, such as running and jumping. The system, Sensor Network for Active Play (SNAP ), aims to enforce more rigorous movement on the part of the player and encourages active involvement in the games.
One of the games we’ve developed is called Posemania. It is essentially a full-body version of Dance Dance Revolution, where players replicate full-body poses instead of pushing buttons with their feet. Track Heroes is a track and field based game where players can compete in the 100m dash and hurdles events, while running and jumping on the spot.
What are Hannah’s plans after graduation?
In September, I’ll be starting a Master’s in Information Systems Science at Carleton University. After that, I might continue with Doctoral studies towards becoming a Professor. Alternatively, I’d like to find employment designing and creating interactive experiences that engage users and have a positive impact on society.
Want to learn more about Hannah?
Please visit hannahj.ca to contact me or to find out more about me and my projects.
I really enjoyed the speech given by University of Waterloo Dean's Arts, Ken Coates, at last DesignCamp Waterloo back in March. It took me a while to get the video clip for speech, but it's a great one to share. He only spoke for 10 mins. However, it was short and powerful. First he highlighted the impact of student-run events like DesignCamp Waterloo, which the university leadership team used as examples to describe the spirit of Waterloo. Second, Ken talked about the serious problem of "Innovation stickiness" Canada is facing and the 21 century economy is about digital media, digital design, digital enabled technologies.
Check it out.
Congratulations to GreenNet from Simon Fraser University, on winning the 2nd place in the Imagine Cup 2008 Interface Design competition!
Congratulations to RoboTree from Fanshawe College and the University of Western Ontario on winning the 3rd place in the Imagine Cup 2008 Short Film competition!
Below is an impressive shot of all the global finalists.
Imagine Cup 2009 website is already up. Check it out! More details on individual competition will be available in August. Stay tuned!
Lately, I received several requests from both designers and UX professors about training on Expression Studio, which can help them jump start with the tools. There are so many different online training out there, so it's hard to figure out where to get started. I've looked through the training focusing on Expression and created the training list below ordered by learning progress. Hope you find them useful!
Before learning about the tools, you may want to watch the following webcast, which captures the essence of Expression Studio - the seamless design workflow and the strong support for designer-developer collaboration.
"Designing Windows Experiences by Robby Ingebretsen (Identity Mine) and Beau Ambur (Metaliq) Join two top designers as they show how they created next generation experiences using Expression Blend and Expression Design. Learn best practices for creating experiences that are anything but lowest-common-denominator. View this webcast"
Expression Quick start Guides: http://expression.microsoft.com/en-us/cc184877.aspx
It includes information on installation and other basic initial steps to set up the tools.
Lynda.com Training. There are very good training videos to give you an overview of the tools and very easy to follow. Although the trainings are on the first version of Expression, but they still apply. After you finish watching the videos, you should be able to build prototypes using the tools.
HOT! Expression Hands-on labs. These hands-on labs you can follow step by step. They were used the MIX08 conference this year. If you are teaching a course that uses Expression, these materials can be used for students to learn about the tools in a lab setting.
A Note about Expression Blend 2.5 Preview: use Expression Blend 2.5 to create and modify managed Silverlight 2-based applications. Expression Blend 2.5 for Silverlight 2 includes all of the features in Expression Blend 2 but has not reached the quality level of Expression Blend 2 for WPF or Silverlight 1 development. Check out the new features in Blend 2.5 that can increase your work productivity.
Expression training videos and tutorials by topic:
http://expression.microsoft.com/en-us/cc136535.aspx , http://expression.microsoft.com/en-us/cc136536.aspx
This is a list of video by topics. It's good to view these videos after you get an overall understanding of the tools. You can then pick a topic and learn in more detail.
My teammate Jean-Luc David is now in Paris with the Canadian finalists: Team RoboTree (short film) and Team GreenNet (Interface Design). Check out how our Canadian teams are doing on CanDev blog and JL's personal Flickr site. Let's send the best wishes to them from home!
"Imagine Cup 2008: Day 2 - Working Long Hours
Team RoboTree (Short Film)
The team is well on it's way to create a new short film for the competition. The students were thrown a curveball as the theme and the guidelines for the finals are the same for the second round. Essentially, the goal is to "share a perspective on how technology enables a sustainable environment". The team worked into the wee hours of the morning, took a break and then kick started this morning. Media, Drake and Ryan have been travelling all over the city by rented bicycle and using the Métro. The deadline for the film is 2:00 AM tomorrow morning, then a presentation at the Digital Theatre on Monday.
Team GreeNet (Interface Design)
Jin and Kevin are furiously working on their interface. As I type this, it's the final hour of the competition for them - then well deserved sleep as they have been awake working for the past 24hrs. The goal for the finals is to innovate and envision revolutionary interfaces for a mobile devices, a Web application and Web portal based on the theme "Imagine a world where technology enables a sustainable environment". After today, the team gets to relax a bit and wait for the judging results.
You can view more photos here. Best of luck to both Robotree and GreeNet. Go Canada!"
