DEMO: 5 gotchas combining SketchFlow, Visual Design and Silverlight Banners

Recently we created a demo. It was in SketchFlow, but it was not really a sketchy demo. Some screens are in the typical SketchFlow look, but for three important scenarios we’ve created a Visual Design. For the Homepage and a Product page in the demo we even created a Silverlight Banner, including the navigation inside the banner.

We’ve actually presented it inside the SketchFlow Player with panels collapsed. We gained the ease with which to connect the screens, in combination with the Behaviors the make parts of the demo interactive. And we combined real Silverlight applications inside the SketchFlow demo and they worked just fine. This is a demo that is meant to impress a customer.

I’ve collected some some gothas we run into when creating this demo:

  1. Large images are not include as a Resource, but as Content. In the Blend Options screen you’ll find a slider setting the limit for large images. You’ll get a warning when you import an image larger than that limit. You can choose to include the image as Content, not as Resource. This will result in the image not showing in your SketchFlow Player. So be sure to include all images in a subfolder in the MyProject_Screens folder and make sure the path in the Image Source is correct. When images show up in the root of a deployed SketchFlow project, you’re in trouble…
  2. When you use a Silverlight application inside a SketchFlow Page, you can use the NavigateToScreenAction inside your UserControl, but screens will not show up in the list in the Properties Panel. It has no use to create a reference to the SketchFlow project. You can add the correct path manually. You can find the names of the Screens in the Projects Tab.
    <i:EventTrigger EventName="MouseLeftButtonDown">
        <pi:NavigateToScreenAction TargetScreen="MyProject_DemoScreens.Screen_1"/>
    </i:EventTrigger>
  3. You can use Components as Masterpages. Remove all elements in the Visual Design that change between pages and put the rest in a Component screen. This allows you use this UserControl as the first element of a page. You can create separate boxes with content on the page to link to different pages in the prototype.
  4. Alternatively, use HyperlinkButtons with NavigateToScreenActions Behaviors to create “HotSpots” on a background image if you want to navigate to different screens. You’ll have to edit the HyperlinkButton ControlTemplate to remove the FocusVisual that appears when you click the control. Then they are invisible, but still catch the Click Event for the NavigateToScreenAction. It will navigate to the screen you enter as a Target.
  5. Use SketchFlowAnimation or GoToStateAction Behaviors for interactive elements on the page. This way you can use highlights and let pop-ups appear and disappear. SketchFlow Behaviors rock!

Njoy!

ScreenMachine in Silverlight Showcase

It took a while, but my personal porftolio in Silverlight called ScreenMachine, has appeared in The Silverlight showcase. You can also reach it through the ADdendum blog, too. When you select The Netherlands as Geography in the left menu of the Showcase you can find it as fourth on the first row (for now).

ScreenMachineInShowCaseSmall Njoy!

Edit Oct 2011: The new url for the Screenmachine is :

http://www.silverlight.net/showcase/2009/10/screenmachine

It is placed in the News Category and it is on the 16th page or

in th Silverlight 4 Category on page 61…

Simple rules for an enjoyable experience

“Having clear goals and expectations for whatever we do, paying attention to the consequences of our actions, adjusting skills to the opportunities for action in the environment, concentrating on the task at hand without distractions – these are the simple rules that can make the difference between an unpleasant and an enjoyable experience” Mihaly Csikszentmihalyi in Creativity.

Dit citaat kwam ik tegen terwijl ik research deed voor het handboek Silverlight. Het lijkt perfect te passen als definitie en voorwaarden voor wat we User Experience (UX) noemen. Dit geeft je handvaten bij het vraag: wat moet ik doen om een goede UX te bereiken?

  • Zorgen dat de doelen van de eindgebruikers duidelijk gedefinieerd zijn en dat je een ontwerp gemaakt heb waarmee ze dat kunnen bereiken.
  • Goede en onmiddellijke feedback, zodat duidelijk is wat er gebeurd en wat de gevolgen zijn van acties. Gebruik van Direct Manipulation om het gevoel van controle te vergroten.
  • Ervoor zorgen dat gebruikers met verschillende vaardigheden de site of applicatie goed kunnen gebruiken. Scaffolding: leren in kleine stappen en het geleerde weer toepassen in nieuwe taken. Progressive disclosure maakt het mogelijk om met een eenvoudige interface te beginnen, maar toch geleidelijk steeds meer functionaliteit zichtbaar en bruikbaar te maken.
  • Direct Manipulation in een venster maakt het mogelijk om op een taak te concentreren.Voorkomen dat dialoogvensters en messageboxen de flow van de applicatie onderbreken.

Dit citaat komt uit de vorige eeuw en is niet geschreven met ontwerpen voor software in gedachten. Toch lijkt het uitstekend te passen bij wat we deze dagen als uitdaging voor interactie ontwerp zien: een “enjoyable experience”.