Designing and Prototyping in WPF and Microsoft Silverlight: A Case Study Billy Hollis

Consultant / AuthorNext Version SystemsWUX205

The Customer: Sommet Group

Provides services to small businessesSommet Center in Nashville named for them

The Scenario: Temporary Staffing Management

Small staffing companies (2 to 10 users)Match temporary employees to companies needing workers

Orders and assignmentsPayroll and billing

Easy deployment, transparent updatingSoftware-as-a-service

Highly intuitive UIDistributed usersKeep training minimalIncrease revenue by finding more matches

Essential Needs

The end result: StaffLynxBilly HollisConsultant / Author / Team lead for StaffLynx developmentNext Version Systems

demo

How We Got There

Requirements gathering and documentationOriginally expected to be ASP.NETAdvent of Silverlight opened up new thinkingProblem: how to use advanced UI capabilitiesSo the prototyping began…

First step: Is advanced UI worth it?

First StaffLynx prototypeBilly HollisConsultant / Author / Team lead for StaffLynx developmentNext Version Systems

demo

First Prototype: Important Lessons

Data templates are powerfulTry to be “non-linear”

Don’t think of the screen as a set of rectangular areas to pour things into

You Don’t Want This

First Prototype: Additional Lessons

Traditional navigation not good enoughGradient color is effectiveTranslucency preserves mental contextSome experiments did not work

Oval vs. square buttonsIn-place editing has usability obstacles

Conclusion from First Prototype

Advanced UI is worth it, but lots more experimentation needed

Next Phase: Multiple Prototypes

Developed several prototypes in parallelBasic idea:

Develop one approachPretend we can’t use itDevelop another, significantly differentRepeat until run out of ideas for approaches

Then we hashed out the results with a group of users

Multiple StaffLynx prototypesBilly HollisConsultant / Author / Team lead for StaffLynx developmentNext Version Systems

demo

Multiple Prototypes: Lessons Learned

Home screen resonates with usersOne place to find an entity

Semi-modal child screens essential“Interrupt-driven” users

Visual “dirty record” signal essentialAnimation essential to natural feelDon’t try to cram too much user action into pop-ups

Pop-ups for additional detail work well, however

Process and Team Structure

Process must be design-centric rather than code-centricVisual designer vs. interaction designer

Interaction designer hard to find, needed earlyVisual designer easier to find, can come in later

CollaborationUser involvement

Major Lessons

Let’s go through the most important lessons we learned in the development of StaffLynxCircumstances vary; only you can decide if these lessons apply to your situation

Work with People’s Brains

Gradient colorsAnimation

Goal is that they like it but they can’t tell you why

Use Both Sides of Your Own Brain

Developers tend to be left-brainedVisual sense, pattern recognition, empathy are right brained skills

Get Insides User’s Head

Understand their work flowUnderstand where they add valueKnow their pain pointsEmpathize with them

Multiple Prototypes

Develop one approachPretend you can’t use itDevelop anotherRepeat until out of ideas

Collaboration is Essential

Question Everything

Question every principle you ever learned about UI designSome will still applyMany won’t

Build Production Version from Scratch

Prototypes should be hacksDon’t reuse themProduction version needs manageability

Design, Don’t Decorate

Interaction Patterns Early, Styling Later

Hard to change interaction patternEasy to restyle

Learn and Use Templates

Data templates make list boxes amazingly flexibleControl templates drive look and feel

Don’t Get Bogged Down in Details

Lot’s of things easy to change late in the game

Color schemesTemplates

Complex UI Asynch data

Use asynchronous data in WPFRequired in Silverlight

Don’t Make First Project Time -Sensitive

If you do, it will never live up to advanced UI potential

Result Can be Worth it

question & answer

www.microsoft.com/teched

Sessions On-Demand & Community

http://microsoft.com/technet

Resources for IT Professionals

http://microsoft.com/msdn

Resources for Developers

www.microsoft.com/learningMicrosoft Certification and Training Resources

www.microsoft.com/learning

Microsoft Certification & Training Resources

Resources

Complete an evaluation on CommNet and enter to win!

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS,

IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.