• Canadian UX Blog

    [Mini-Tutorial] Blend 3: SketchFlow Part I

    • 16 Comments

    Two years and an half ago, when I first joined Microsoft, we were getting ready to release Expression Studio 1. Expression Blend is a key product in the studio and works closely with Visual Studio. It was a great first step to support designers with visual tools to help them build rich interactive web and client. However, both Blend1 and Blend 2 were focused on supporting the final design within the production phrase. Much of the work designers do with in the ideation and early prototyping stages were not well supported.

    The figure below illustrate a typical iterative design process, and the highlighted rectangle shows the final design phrase that Blend 1 & 2 supported. Many designers I talked to have this question: Would Blend support conceptual design and interaction design in the future and would it integrate with your Office suites? The answer is YES!

    image

    Blend 3 Beta was announced at MIX this year, and the SketchFlow demo generated lots of excitement among the designer community. After MIX, I couldn’t wait to get my hands on SketchFlow, and I know a lot of you are patiently waiting the release of Blend 3 which includes SketchFlow. So, l thought to record my learning experience with Blend as mini-tutorials to show you a number of things I found very useful as a designer. Hopefully, they’ll give you a quick start.

    This is the first part of the SketchFlow tutorial includes topics on:

    • managing Blend workspace for SketchFlow
    • creating new screens in Flow Pane and link between them
    • using sketch styles and integrating your sketches
    • creating component screens that can be added to each screen

    You can also download the video here.

  • Canadian UX Blog

    UX Roundtable Comments

    • 2 Comments

    Ever since John told me about the UX Roundtable event at Redmond last month, I’ve been really curious about what designers think Microsoft can do to reach out and help support the UX community in Canada? As user experience specialists (IAS, IxDs, UI designers, web designers, etc.), we have compassion for users. Often times, in order to help the users be successful, we need to know them better than they know themselves. However, the purpose of the UX Roundtable is to explore what we as designers need to feel connected and to be successful in what we do.

    I want to share with you some the comments I gathered from the UX Roundtable discussion notes. I should mention that what I refer to "community" below, I mean all the UX professionals involved in the creative design process including IxDs, IAs, visual designers, usability analysts,...)

    • Showing the community more of the creative process behind UX projects such as the User-centered design for Office 2007. Jensen Harris' talk on Word 2007 design was very well received at the VanUE event in Vancouver. However. past MS product talks were focused too much on the technology and not on the design process.
    • Sharing Microsoft’s design processes (e.g. activities, timeline, design documents) more and creating an open/transparent reputation in the community. For example, open APIs for design patterns for others to improve and leverage.
    • Helping designers show the business value of having an elegant user experience to business decision makers (CEOs and CFOs)
    • Making an effort to connect to the academic UX community such as design schools and digital design/ HCI programs at universities
    • Hosting design events to share best practices in design
    • Improving developers’ understanding of UX and providing tools to support designer-developer workflow

    Jay Goldman from Radiant Core has a very detailed and insightful write-up of the UX Roundtable event.

     

    Qixing

  • Canadian UX Blog

    Morten's Expression Web 2 Learning Resource

    • 2 Comments

    We've introduced Morten Rand-Hendriksen couple of times in this blog and followed his amazing journey from learning Expression Web to a Expression Web expert. Recently, he published his first book titled  "Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours" and his article on "How to create a Pure CSS Drop-Down menu" appeared in November's Expression newsletter. Both the book and the article offers practical tips to web designers and developers on how to effectively create great websites using Expression Web. Check them out and congratulations Morten!

    image

    Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours

    "The book is a quick read and it gives you hour-by-hour instructions on how to create a web site from scratch with Expression Web. And once you’re done, you’ll have a fully working and standards based web site at your disposal. I wrote it as the book I wish someone had written when I started out and from the response I’ve gotten so far people are learning a lot from it. Which is what I set out to do."

    Morten has also created a Reader’s Companion site along with the book where the readers can download lesson files, dive deeper into the world of Expression Web through further reading, find relevant links and interact with other readers. The site is a custom WordPress installation with a highly customized theme designed from scratch using Expression Web 2.


    image How to create a Pure CSS Drop-Down menu

    "In this tutorial you will learn to create a Pure CSS Drop-Down Menu pretty much without writing a single line of code. This is done by harnessing the power of Expression Web’s innovative and intuitive Style dialog as well as the power of CSS as a design and layout tool. What is great about the way Expression Web handles CSS is that it lowers the threshold for learning, understanding, and authoring style code and gives people with little to no experience with this code language the ability to create solid standards-based web sites. The many integrated CSS functions--including the Apply and Manage Styles task panes, the Style dialog and the CSS Properties task pane--give beginners as well as advanced users a multitude of different ways of working with this powerful code language and make it easier than ever to create compelling and functional web sites."

  • Canadian UX Blog

    Silverlight Tutorials

    • 3 Comments

    There's a great new website out now that provides you with "snack-sized" tutorials on how to build rich web experiences and applications using Silverlight and Blend.  The website is called http://www.nibblestutorials.net/ and it's the brainchild of Celso Gomes, one of our top design engineers in Redmond (Microsoft's headquarters).

    New tutorials will be posted on a frequent basis, so make sure you check back there often.  The intent is that the tutorials be short in length so you don't have to invest a large chunk of time out of your day to go through them.  There's also a blog at http://blog.nibblestutorials.net/ for the site that is RSS-capable, which means you can keep track of new stuff put onto the site as it happens!

    Enjoy!

    -Paul

  • Canadian UX Blog

    [Mini-Tutorial] Creating a Silverlight Video Gallery

    • 9 Comments
    image

    As I promised in one of my  earlier posts to do a tutorial on how to create a Silverlight Video Gallery, here is the mini-tutorial (about 10 mins). It has two parts:

    • Use Expression Encoder 2 to create a standard Silverlight video gallery
    • Customize your video gallery in Expression Blend and save it back to Encoder as a template for future use

    To follow the mini-tutorial, you need the following software:

    Watch it streaming below or download it here.

     

  • Canadian UX Blog

    Introducing Microsoft Silverlight - Light up the web

    • 1 Comments

    Yes! Windows Presentation Foundation /Everywhere (WPF/E) now has an official name - Microsoft Sliverlight.

    "Microsoft Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of media experiences and rich interactive applications (RIAs) for the Web. Silverlight integrates with existing Web applications. Silverlight media capabilities include fast, cost-effective delivery of high-quality audio and video to all major browsers including Firefox, Safari and Internet Explorer running on the Mac or on Windows. By using Expression Studio and Visual Studio, designers and developers can collaborate more effectively using the skills they have today to light up the Web of tomorrow."

    Check out www.microsoft.com/silverlight and top 10 reasons you might want to use Silverlight.

  • Canadian UX Blog

    [Mini-Tutorial] Blend 3: SketchFlow Part II

    • 9 Comments

    Bill Buxton talks about the difference between “Sketch” and “Prototype” in this his Sketching User Experiences. (see the summary below)

    image

    I agree sketching is an important part of the design process, but often times it’s hard to share our paper and pen sketches and get feedback from others. Following Part I of the SketchFlow tutorial, this tutorial demos the SketchFlow player and different ways designers can share their design ideas.

    You can also download the video here.

  • Canadian UX Blog

    Silverlight 2 Resource

    • 6 Comments

    SilverlightLogo.jpg It has been three weeks since we annouced Silverlight 2 at MIX08. Many of you are excited to getting started with Silverlight 2, so I've done some research around and created the following list. I want to give special credits to Adam Kinney, Tim Sneath, Laurence Moroney, and Joshua Allen for creating great tutorials and resource lists for Silverlight 2.

    Tools for Building Silverlight 2 Applications

    • Silverlight 2 Beta 1 Runtime: Windows, Mac
    • Expression Studio 2 Beta: the second release of Expression Studio adds a wealth of new features including support for Microsoft’s new Silverlight technology across all the tools. Enhanced designer developer workflow makes the process of building great user experience even better! You can also just download the individual components here.
    • 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. Note: here is a clear table view to help you choose which Blend version to use for your project.
    • Visual Studio 2008 Professional Edition (Standard or above version will do)
    • Silverlight Tools Beta 1 for Visual Studio 2008: this package is an add-on to the RTM release of Visual Studio 2008 to provide tooling for Microsoft Silverlight 2 Beta 1. It provides a Silverlight project system for developing Silverlight applications using C# or Visual Basic.  The components included are:
      • Visual Basic and C# Project templates
      • Intellisense and code generators for XAML
      • Debugging of Silverlight applications
      • Web reference support
      • Integration with Expression Blend

        Note: this will also install Silverlight 2 Beta 1, Silverlight 2 SDK Beta 1, KB949325 for Visual Studio 2008.

    Tutorials

    Other resources

    Demos

    Silverlight Controls

    Hot Topics in Silverlight 2

    Please refer to Adam's blog post for more developer related topics.

    Silverlight on Mobile

    Deep Zoom

    Accessibility in Silverlight 2

    Accessibility has been something of a weak spot in Silverlight 1.0; with only very basic support for alt tags and default actions.  It hasn't been all bad, since this led developers to use Silverlight with "Plain Old Semantic HTML" in a progressive enhancement pattern -- which will continue to be useful in some scenarios going forward.  But the range of options for accessible development increases substantially with Silverlight 2.

  • Canadian UX Blog

    [Podcast] Chat with Indi Young on Mental Models

    • 0 Comments

    image  DSCN1240 Mental Models

    At WDN08, I had a chance to sit down with Indi Young, one of the founders at Adaptive Path, to chat about Mental Models. Through her talk "Innovation is Overrated," she first set the stage to understand innovation. Two of the characteristics of great innovations are that innovations come from crafting details and focusing on people. Mental Model is a great illustration of both ideas. In our conversation we chatted about what are mental models, how are they used in the design process, and different ways to collect data to form mental models. If you can’t see the audio player, it’ll prompt you to download the Silverlight plug-in once. You can also download the plug-in here.

    The following is an example of the Movie Goer Mental Model Indi showed during her keynote. Check out her presentation slides.

    image

     

    Indi Young

    Indi began her work in Web applications in 1995 as a consultant in interaction and navigation design. A founding partner of Adaptive Path in 2001, she has worked with an impressive collection of clients, including Visa, Charles Schwab, Sybase, Agilent, Dow Corning, Microsoft, and PeopleSoft. Since 1995, Indi has constructed over 30 interview-based research projects, 22 of which included mental model diagrams. She considers this methodology she has developed another good way to be a “problem solver.”

    Indi is the author of the soon-to-be-released Rosenfeld Media book Mental Models: Aligning design strategy with human behavior

  • Canadian UX Blog

    Microsoft Download Center: Silverlight or not?

    • 3 Comments

    Thanks for Ben's comment to my last post and a reality check! :) The new download center with Silverlight is in its beta, there are a number of usability issues we need to improve on especially that there are no accessibility features in the current version. With that said, the comment got me thinking about the real value of Silverlight from a user experience perspective. I'd like to give my 2 cents and keep the discussion flowing.

    I totally agree with Ben that we shouldn't do something just because we can. In the case of Microsoft Download Center,  can we improve users' experience when they visit the center with Silverlight? First we need to understand user needs.

    There are three main types of users come to use the download center:

    • Searcher: know exactly what they want to download and want to find it as fast as possible
    • Browser: know the general category or partial name and want to have a way to browse through and find it quickly
    • Surfer: no particular target in mind and just want to find out what's new

    For all three types of users, it's important to be efficient. The site needs to present the options clearly, so users know how to take the initial actions and find what they need quickly. For example, Searchers will go directly to search. With that in mind, I compared the Silverlight version (SV) with the original version (OV) of the download center to investigate what has improved and how Silverlight is and could be used.

    Microsoft Download Center Silverlight Version   Microsoft Download Center Original
    image VS. image

    Less is more - efficient navigation and better use of screen real estate with smart Silverlight widgets

    • The OV has quite bit of wasted screen space such as the gray area in the image above. There's a lot of information squeezed into the narrow content column. Since the page is static, many product links are forced to be present on the page and visible all the time, making the homepage became very long. For example, a user wants to browse the products in Windows category. In OV, the user has to leave the current page and go to a new page that has the complete list of Windows products (3857 in total!) to find what they want. In SV, the user can simply click on the "Browse Download" button on the homepage. A Silverlight overlay panel will appear for the user to choose either browsing  alphabetically or browsing by categories. They can further narrow down the products they want in the category list and get a much more manageable list without leaving the homepage. See the figure below on the left.

     image     image

    • The site navigation on the homepage is another example of using Silverlight to hide information and reduce complexity to help users navigate more efficiently. In OV, the top and secondary navigation are listed together in the left navigation panel and people may spend more time deciding whether they want to choose from "Product Family" or "Product Categories." The two terms have minimally different, and it's confusing to me to have them in the same navigation panel. More importantly, there's no easy to way to go to other parts of Microsoft.com site from the download center. Typically, users have to leave the Download Center and then either go to Microsoft.com homepage  or go to the site map as their starting point to navigate from there. In SV, navigation options are all located at the top right Silverlight navigation panel (see top right image). Users can choose whether they want to navigate all Microsoft sites or just within the Download Center. Since the panel is collapsible, it didn't take more screen real estate to have the extra navigation options. Also, this panel exists in all parts of Microsoft.com sub sites, there's a consistent experience. Although one would argue that the overlay or collapsible panels can all be implemented in AJAX. The differences are how easy to create these elements and how reusable they are.

    • With Silverlight, it's easy to create dynamic banners. Instead of having several static images of new downloads in the top banner like in the OV, we can reduce the visual clutter by using animated banners. The current SV implementation uses a slideshow view. Another option is to use carousel display to focus on one item at a time while having other items in the background.

    • The overall layout in SV is much simpler and more attractive than OV. For instance, the Search option is more dominant. Since Search is probably the most important feature for the download center, it needs to be obvious. In the old design, Search is above the top banner, which is very hard to spot if you are not familiar with the site. This may have less to do with Silverlight but more to do with layout design, however, because the nature of XAML for UI mark-up. The canvas layout element allows very flexible placement for elements within. It's very easy to add and relocate elements to support updates for the site.

    Take it even further - desktop like rich experience

    In order for users to truly benefit from Silverlight's rich experience, we need to take the design even further than the current beta site into areas that are even harder to produce with traditional web technologies. I thought of couple of scenarios to illustrate my point:

    •  Wizard guide for downloading. For users that have trouble finding what they need or don't know where to start, a on-demand wizard type of help can guide users to narrow down their choices according to what they want. There could be video tutorials as well showing how to use the site most efficiently or the download procedures. Instead of reading the "Read Me" file, they can now simply watch/listen a one-minute video.
    • Support organic growth and scalability of the site. As more and more products are available for download, Silverlight could be really used for creating effective visualization to help users find what they need. For example, in the browsing Windows products example I mentioned earlier, right now the navigation list is embedded in a scrolling panel which is not efficient for navigation. Some sort of visualization techniques implemented in Silverlight such as fisheye view could help users to navigate more efficiently.

    Besides the business reasons, I do see the value of using Silverlight in Microsoft Download Center from a user experience perspective.The key is to use Silverlight's rich capabilities to serve user needs not for the sake of using new technology.

  • Canadian UX Blog

    [Mini-Tutorial] Blend 3: Rich Interactivity with No Code

    • 10 Comments

    The idea of creating rich interactivity without code should sound very appearing to designers, because we want to turn static UI into interactive prototypes and test out our design ideas quickly. In Blend 3, “Behaviors” are packaged, re-usable building blocks of interactivity. They can be visually applied to UI components in the application using drag and drop. No more opening up Visual Studio and writing routine code like starting an animation when a button is clicked. Blend 3 will have bunch of commonly used Behaviors shipping with the tool, but they are extensible so that you or your developers can create your customized Behaviors.

    After watching Peter Blois’ MIX talk “Creating Interactivity with Microsoft Expression Blend,” I experienced the power of Behaviors myself in the tutorial below. For example, I used 3 different triggers( Mouse Click, Timer, and Mouse Gesture) to play the slideshow behavior. You can download many interesting Behaviors that the community are making at Expression Gallery page.

    You can also download the video here.

  • Canadian UX Blog

    Design Principles at Microsoft

    • 1 Comments

    Functioning Form is one of my favorite design blogs, last Friday author Luke Wroblewski summarized Design Principles from three Microsoft products: Windows 7, Office 2007, and Surface, which I reposted below. I’ve also included the MIX sessions that talk about the design thinking behind each of these products in detail.

    While Microsoft itself admits to design challenges in some of their products, the places where I saw design principles in use produced some pretty interesting product designs. In particular: Windows 7 Desktop, Office 2007, and Microsoft Surface.
    For the Windows 7 desktop design,
    Stephan Hoefnagel showed the following principles in action:

    1. Reduce concepts to increase confidence
    2. Small things matter, good and bad
    3. Solve distractions, not discoverability
    4. Time matters, build for people on the go
    5. Value the full lifecycle of the experience
    6. Be great at “look” and “do”

    image

    For the Microsoft Office 2007 redesign, Jensen Harris illustrated how these “design tenants” helped the team make effective decisions:
    1. A person’s focus should be on their content, not on the UI. Help people work without interference.
    2. Reduce the number of choices presented at any given time.
    3. Increase efficiency.
    4. Embrace consistency, but not homogeneity.
    5. Give features a permanent home. Prefer consistent-location UI over “smart” UI.
    6. Straightforward is better than clever.

    image

    For Microsoft Surface, Joseph Fletcher mentioned how a set of principles for Natural User Interfaces (NUIs) and “super principles” for Microsoft Surface helped the team design.
    Natural User Interfaces should be:
    • Evocative: Principle of Performance Aesthetics
    • Unmediated: Principle of Direct Manipulation
    • Fast Few: Principles of Scaffolding
    • Contextual: Principle of Contextual Environments
    • Intuition: Principle of Super Real
    Microsoft Surface should be:
    • Social: multiple simultaneous users
    • Seamless: digital & physical combined
    • Spatial: kinesiology

    image

  • Canadian UX Blog

    Expression Web joins MSDN subscription family

    • 0 Comments

     

    I’m very happy to tell everyone that Expression Web is now available to MSDN premium subscribers. Expression Blend will become available as well once the product ships in Q2 2007. Several people asked about this on Monday night when I was attending the TechNet chalk talk on Microsoft Application Platform. During the event, I had a chance talk to a group of IT managers about Expression Web. They seemed excited to know that Expression Web is not another version of FrontPage and that it offers advanced CSS support for building standards-based websites. However, their next question is: is it going to be available for MSDN premium subscribers? Now I’m delighted to say “Yes.”

    Here is a quick briefing on Expression Studio if you are not familiar with it. Expression Studio is designed to help creative professionals collaborate with developers to create rich user experience on the web, desktop, and beyond. It greatly supports designer-developer workflow in the development cycle with a family of four tools: Expression Web, Blend, Design, and Media.

    Although the targeted users of Expression are designers, I think it’s a great idea to let developers access and play with these tools (at least Expression Web and Expression Blend). Once developers get familiar with the tools that designers use, they have a better understanding of what can be accomplished with these design tools without backend implementation. Many developers are designers (or vice versa), and Expression tools such as Blend allows them to create compelling designs quickly which can be easily used in development. This lets them spend more time evaluating the usability of their designs. It’s a great chance to broaden the design community and encourage more developers to care about user experience.

    Other blog articles on the topic: Listening to your feedback - Expression and MSDN, Designers and Developers

  • Canadian UX Blog

    Microsoft Canada Development Center(MCDC) in Vancouver

    • 9 Comments

    Microsoft Canada and our corporate head office will be opening a software development centre in Greater Vancouver, BC. The Microsoft Canada Development Centre will open in the Fall of 2007 and will be home to software developers from around the world.

    This fantastic news was announced earlier today. I think this is such a great move for the company and for the Vancouver Hi-Tech industry. Vancouver has always been branded as one of the best places to live on earth. The living environment will definitely attract a lot of IT workers. At the same time, Vancouver is very multicultural, a true global gateway. Thus, the development center will attract international talents as well. International students can also leverage the BC Provincial Nominee program to become Canadian Permanent Resident and work and live  in Canada for long term. EA, IBM, and Nokia (see David's list for more) all have development or R&D centers in Greater Vancouver area already. I'm happy to see MCDC is one of the handful development centers outside of the States.

    Cheers, Qixing

  • Canadian UX Blog

    Logo Designs from EnergizeIT Demo Competition

    • 2 Comments

    EnergizeIT was a lot of fun and especially got the crowd energized during the demo competition after the keynote in the morning. I had the opportunity to design logos for all three demo competition teams in Expression Design 2. I've never had any graphics design training, but playing with the design ideas and drawing tools, I found myself really enjoying logo design. Although I had to keep secret about the designs before the competition, I can share my design concepts with you now and introduce my two favourite features in Design.

    Team: Connected Road Warriors

    ConnectedRoadWarrior

    Team requests for the logo:

    • looks like a military badge
    • reflects software + service (i.e.Windows Live) idea

    Design concepts:

    • warrior holds sword, replacing sword with USB cables
    • connects service (i.e. Windows Live) with software on the desktop
    • highlights software + service and places warrior with simple outline in the background
    • uses gold and blue colour and shadow to create military badge look

    Team: Shell Shocked

    image

    Team requests for the logo:

    • uses AC/DC fonts
    • incorporates Powershell logo elements
    • hard rock look

    Design concepts:

    • a burning heart that's bleeding looks hard rock and eye catching (I found the heart illustration in Office Clip Art)
    • places Powershell logo element (">-") in the middle of the heart to suggest "Powershell"
    • places AC/DC signature lighting elements on the heart to reflect the "Shocked" idea
    • vertical placement of the text is to make the look unified and unique

    Team: Code Ninja

    image

    Team requests for the logo:

    • combines the idea of "code" and "ninja
    • simple and powerful
    • uses Japanese Kanji for Ninja

    Design concepts:

    I had a few ideas for the design and the final logo went with the one on the right with white box outline. My favourite design is actually the one with single katana (one on the lower left). On the blade of the katana is a string of "1s" and "0s" to suggest "code." The one in the upper middle has an interesting placement of the two characters which represent "Ninja." I filled one of the character with "1s" and "0s" again to suggest "code."

    Throughout my designs for these logos, I really liked the "Colour Dropper" tool in Expression Design. Not only you can drop colours with existing colour swatches but I also used it heavily for capturing colours in real photographs then drop them into my drawing shapes. It's like magic. :) The second feature I found very handy is the "Selective Export" function. I was able to compose many alternative designs on one canvas and select any one or more components on the same canvas to export into different images types. No need to turn on or off layers to make sure you export the right objects.

  • Canadian UX Blog

    Great Community Direction

    • 1 Comments

    Audrey Carr took some time to give great guidance on the communities expectations for the role.   As we are investing in someone right out of school these are the people you will have to work with, show your passion and connect to!  

    Have a look at the post!

    John

    http://audreycarr.ca/?p=9

    Microsoft User Experience Advisor - Where’s the User Experience?

    In a move to embrace the Canadian UX and design community, Microsoft recently announced a job opening for a User Experience Advisor intern to promote it’s upcoming Expression software lineup.

    But here’s my problem: as far as I can tell, none of the candidates have demonstrated any knowledge of user experience or the needs of the user experience community. Wake up! It’s not about you or your resume - I want to know that you can empathize with and understand my needs as a designer, information architect, or web developer. If you want to talk to creatives, you need to understand the design process and how Microsoft’s new tools fit in to the larger picture. For a primer on innovative and creative thinking, why not learn from the best: check out what IDEO’s Tom Kelley has written about the power of design in solving tomorrow’s business problems: The Art of Innovation and The Ten Faces of Innovation, and learn what design thinking is all about.

    Where to Start?

    So, if you’re thinking of applying, check out the CANUX2006 conference blog and learn about the latest issues in our community. Also, how about conducting some preliminary user research? Send a friendly email to the UXIrregulars group and ask us about our needs. We’re more than willing to help and can’t wait to hear from you!

  • Canadian UX Blog

    [Mini-Tutorial] Working with Images in Expression Design

    • 0 Comments

    One of the most common questions I get about Expression Design is how the tool would work with images. It’s true that Design focuses mainly on vector graphics creation, but there are neat bitmap manipulations and effects you can apply on your images as well. Check out the following two examples.

    When I was visiting back home earlier this year, I found these cool looking chairs. In this tutorial, I’ll show you how to crop out an object from an image, covert it into its own image object, and then apply an effect onto it. We’ll work on the image below on the right. You can click on the image to download a larger version to work with.

    group chair image single chair image

    Step 1: use the Pen tool in the tools palette to draw a path tracing the outline of the chair.

    the Pen tool image image

    Step 2: select both the path from Step 1 and the background image, go to menu and select Object –> Clipping Path –> Make with Top Path. You should get the image below on the right. At this point, you just created a clipping path (like a window to the background image). If you move the clipping path around the image, you’ll see different parts of the image. Follow the next step to make this cropped chair a proper image object.

    image image

    Step 3: select the clipping path you just made and go to menu and select Object –> Image –> Create Image Project. Drag the curser to draw out a rectangle to represent the area that you’d like to make into an image object. A dialog box will pop out asking you for the dpi for the rasterized area. Put 300 px/inch to create a high quality image object. At the end of this step, you should be able to select the chair object without seeing the path around the object.

    image image

    Step 4: you can change the color of the chair by going to Effects panel and select “fx” –> Adjust Colors –> Tint. Choose the Tint color you want and adjust the levels to see the results.

    image image

    Step 5: you can place back the element in the original photo. Look at how different color chairs would look in the image.

    image image image

    Here’s another example of using the same technique. If you are selling hats on your website, you may want to provide different colors to the same hat style. Can you tell which hat is the original and which ones are created using Expression Design?

    cousinBlackHat cousinBlueHat cousinOriginal

    You can see a full video tutorial on working with images using Expression Design by Arturo on the Silverlight blog. Start playing with images and have fun with Expression design!

  • Canadian UX Blog

    How to Best Work and Connect with You?

    • 0 Comments

    zombie picture: I can has brainz?It’s survey time. Wait! Don’t run away yet. It’s a survey to ensure that our team correctly identifies opportunities that would be of interest to you and discover what level you would be willing to share insights and collaborate across our programs, activities and in the community.

    Simply put by my college Joey DeVilla on his blog: “Microsoft Canada Wants to Pick Your Brain!” And he has great images to convince you. :) Help us to better work and connect with you by complete the short survey here.

  • Canadian UX Blog

    What does it take be a UX designer?

    • 1 Comments

    I went to the season kick-off of Waterloo User Experience Group meeting last night. The session is called "UX ChitChat" - cute! One topic we chitchatted was what takes someone to be a UX designer? This is a popular question and have been asked by people not only try to get into the field but also asked by people who have been doing UX design for years. The latter takes one step further and asks the question: what does it take to be a great UX designer.

    This is certainly a topic that closes my heart. I'll link my opinion with some inspiring resources on the topic. The most important trait (or UXNA) I think for a UX designer to have is compassion for users.  You need to be the advocate for users and it comes very naturally. For example, if you hit a confusing road sign, a hard to navigate website, or even those teapots in Chinese restaurants that are so hard to pour out tea without spilling it, you think about the poor experience users suffer. You also feel strongly that there should be a better design for this! Richard Ziade describes very nicely in his post (i.e. Design is...) about what separates a good design from a bad design.

    Everyone is a designer in a sense. But what separates good design from bad design?...Good design is about taking the time and energy to see through another's eyes and create something that sympathizes with how they think. At the risk of sounding hokey: Good design is thoughtful and compassionate. The beneficiary of a good design experiences something very unique. A good interaction experience creates an emotional bond and loyalty to the creation that is really, if you stop and think about, a bond with it's creator. "Someone took the time to think about what I need and worry about how I think."

    With the UXNA, you also need proper training and experience to be a UX designer. Dan Saffer from Adaptive Path has a great article on how to be an interaction designer. It gives an overview of the profession, necessary training and experience you need with lots of great resources listed in the article. I think there are three skill areas for UX design:

    • User research: researching both users and markets through focused groups, interviews, filed investigation, scenario analysis, problem definition, brainstorming, requirements gathering
    • Interaction design: storyboarding, wireframing, prototyping, visual design
    • Usability testing: designing usability tests, data gathering and analysis, reporting testing results and design recommendation

    A good designer will have experience in all these areas and is an expert in one or two areas. Many UX designer job posts list these similar skills. Form my experience, in grad level CS Human-Computer Interaction (HCI) field, we are trained in all these skill areas but focusing less on how to use different design tools in the Interaction Design phrase. Whereas college/university level multimedia design programs have more hands-on practice on tools such as Adobe CS3. However, they usually don't teach various user research methods and how to conduct formal usability study. The missing skills can be learnt from either taking a specialized course or on job training.

    Here are some of my favorite UX blogs:

  • Basement.org by Rich Ziade

    This is my favorite blog. This blog talks about Web 2.0 technologies and the importance of good experience design. The blog has influenced a lot on the way I'm thinking about design and how technology trends influence our lives. One nice feature of the blog is that the author has a column which provides a brief description of cool design tools and news from other blogs.

  • Functioning Form by Luke Wroblewski

    This is a very visionary blog and a must read among designers. The blog often interviews the experts in interface design and and asks about their design vision. The blog helps me to think about the big picture and the direction of user experience. It also offers very well written articles about technology and design.

  • Adaptive Path Blog and Essay Archives

    Not much description is needed here since Adaptive Path is the UX consulting group in the field. Each designer in Adaptive Path also has a great personal blog.

  • Future Perfect by Jan Chipchase

    "A picture is worth a thousand words." The old saying would be the best description for the blog. Jan is a user researcher at Nokia, and he travels all over the world and takes great photos of how people use telephones or just everyday things. An excellent portrait of "design of everyday things." This blog is great to read even on a 30 sec break.

  • Usability In The News by Usernomics

    This blog offers very practical tips on user-centered design and introduces new usability research findings that may surprise us designers.

  • IxDA Discussion List by Interaction Design Association (IxDA)

    This is not a blog but has daily active discussions on topics related to interaction design. It's a great UX expert pool and very welcoming.  

  • Design Critique: Products for People by Tim and Tom

    This is a podcast blog that consists of reviews of popular products such as IPod, alarm clocks, and etc.

     

  • Canadian UX Blog

    [Mini-Tutorial] Share Your Presentation in Deep Zoom

    • 6 Comments

    imageOver 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:

    1. Convert a ppt presentation into a collection of images: File -> Save As -> Other Formats -> Save as type PNG in PowerPoint 2007. Each slide will save as a PNG image.
    2. Launch Deep Zoom Composer: import all images from Step1 -> Compose the layout of your slides on canvas -> Export project (uncheck "Create Collection" if you want to have all images in one Deep Zoom control).

      image

    3. Create a Silverlight project in Visual Studio 2008 -> compile the empty project to create ProjectName.xap in ClientBin -> add exported folder from Step2 into the ClientBin folder. Mike Taulty has a great post that goes into a lot more detail for this step.
    4. Add the Deep Zoom control, which is called "MultiScaleImage", into Page.xaml. Your Page.xaml should look something like this:

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

    5. Add interaction for Zoom in/out. I used mouse wheel events for zoom in and out. You can also program to use certain keys to zoom in and out. I didn't bother to code for this demo and basically borrowed Mike Harsh's Deep Zoom demo code presented at MIX and switched with my images.

      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.

    6. Upload your Deep Zoom demo onto Silverlight Streaming following couple of easy steps in Tim Sneath's blog post.

    Congratulations! Now you have your presentation in Deep Zoom live and ready to impress your friends. :)

  • Canadian UX Blog

    [Mini-Tutorial] Blend 3: Visual Data Binding

    • 5 Comments

    As your project evolves from simple sketches to prototypes, you may want to add some real interactivity to it. There are two useful tools in Blend make this really easy: Sample Data and Behaviors. This tutorial will focus on Sample Data and how designers can bind data visually in Blend. The next tutorial will be on Behaviors.

    In previous version of Blend, we introduced data binding features in Blend. However, in order to make sample data targeted to particular applications, designers had to create XML data files in Visual Studio or other editors and then import into Blend. There was no easy way in Blend to generate the sample data they need. Check out how Sample Data makes this process easy in the tutorial below!

    You can download the video here.

  • Canadian UX Blog

    SWF to XAML Converter

    • 5 Comments

    he's my hero!Some of the scenarios for Flash and Silverlight usage are similar, such as rich media/video within websites, or interactive rich content for e-commerce, e-learning, or advertising. As interactive designers, you may want to reuse and repurpose the Flash assets that you built before. Here is a SWF to XAML converter called "The Converted" created by Debreuil Digital Works, a Canadian company. You can see a list of demos they've converted to XAML from SWF. Electric Rain also announced a project called Harmony that converts SWF based Flash files into Silverlight based XAML files. Stay tuned!

    Technorati Tags: , , ,
  • Canadian UX Blog

    Driving Customer Loyalty Through Design

    • 3 Comments

    Jesse James Garrett from Adaptive Path gave an very inspiring webinar today at Design Management Institute. He talked about how to drive customer loyalty through elements of user experience design. He first made the connection that "Products are people too." We may not realize that we act quite differently when interacting with responsive products.  For example, when people have bad experience with digital products, they tend to blame themselves (e.g. think they are not smart enough to use the products). The experience of feeling bad about themselves doesn't help to build loyalty towards the products. On the other hand, if one has great experience using a product, s/he will likely to recommend to a friend, use it repeal, and would buy again. Jesse concludes that "experiences build relationships, relationship build loyalty."

     

    I really like how he categorized the elements of UX design: Strategy, Scope, Structure, Skeleton, and Surface. He talked about each element in detail and how tie into customer loyalty. Strategy is the big ideas behind the project consists of a balance between user needs and product objectives.Scope is a checklist of functional and content requirements. Structure determines the flow of user experience. Skeleton includes information, interface and navigation design. On the very top of the stack is sensory design, which closely ties into customers' emotions.

     

     For more information on the topic, check out Jesse's book: The Elements of User Experience.

  • Canadian UX Blog

    [Mini-Tutorial] Creating a Reusable Glossy Button in Blend

    • 0 Comments

    Creating a button is the “Hello World” example of learning Blend. In this tutorial, I’ll show to how to create a reusable glossy button with Expression Blend 3. The concepts I’ll be covering are:

    • using gradient brush to create glossy effect
    • turning graphics into a control
    • editing a button control template
    • applying drop effects to an object
    • editing visual states and transition between states

    Enjoy!

    You can also download the video here.

    Technorati Tags: ,
  • Canadian UX Blog

    DevTeach 2008 - Silverlight 2.0 Training

    • 1 Comments

    DevTeach 2008 is coming to Toronto.

    What:Building Next-Generation, Business-Oriented, Rich Internet Applications using Silverlight 2.0
    Cost: 399.00$ CDN Make plans to stay an extra day after the conference to take advantage of this opportunity to join veteran software developers Rod Paddock and Jim Duffy as they give you a head start down the road to developing business-oriented Rich Internet Applications (RIA) with Microsoft Silverlight 2.0. In case you just crawled out from under a rock, Microsoft Silverlight 2.0 is a cross-browser, cross-platform, and cross-device plug-in positioned to revolutionize the way next generation Rich Internet Applications are developed. Microsoft’s commitment to providing an extensive platform for developers and designers to collaborate on creating the next generation of RIAs is very clear and its name is Silverlight 2.0. In this intensive, full-day workshop, Rod and Jim will share their insight and experience building business applications with Silverlight 2.0 including a review of some of the Internet’s more visible Silverlight web applications. Attendees will walk away from this focused, day-long session having learned the latest essentials of Silverlight 2.0 development. Topics will include how to create and deploy a Silverlight 2.0 application, how to create a UI with XAML, how to work with Silverlight 2.0 controls, how to access and integrate data within your Silverlight 2.0 applications via LINQ, WCF, and web services, how to apply visual design and styling features, how to integrate design changes in Expression Blend with code changes in Visual Studio 2008, how to use the control to create islands of richness on your ASP.NET pages, how to create your own custom Silverlight 2.0 controls, and a review of architectural considerations for your application.
    When:Friday, May 16, 2008 9:00 AM to 5:00 PM
    Where:Hilton Toronto
    145 Richmond Street West
    Toronto, ON M5H 2L2   Canada
  • Page 1 of 17 (422 items) 12345»