July, 2008

  • Canadian UX Blog

    Expression Resource


    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.

  • Canadian UX Blog

    Design Student of the Month - Hannah Johnston


    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.

  • Canadian UX Blog

    Canada Wins!


    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!

  • Canadian UX Blog

    Microsofties in Residence Silverlight Training - Day 2


    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

    1. have subtle awareness of each other
    2. have a shared space together to make them feel they are close to each other
    3. something to help them enhance emotional connection with each other
    4. 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:

    1. Jack and Judy send gifts to each other through surface tables.
    2. Jack and Judy hold hands together virtually.
    3. 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.


  • Canadian UX Blog

    Microsofties in Residence Silverlight Training - Day 1


    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!


  • Canadian UX Blog

    Microsofties in Residence Silverlight Training - Day 3


    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.

    originalLACT image

     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.

  • Canadian UX Blog

    Microsofties in Residence Silverlight Training - Day 5


    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:

    Technorati Tags: ,,
  • Canadian UX Blog

    Imagine Cup Finals in Paris


    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!"

    Technorati Tags: ,
  • Canadian UX Blog

    DesignCamp Waterloo Makes Great Impact


    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.


    Technorati Tags:

  • Canadian UX Blog

    Microsofties in Residence Silverlight Training - Day 4


    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
Page 1 of 1 (10 items)