Hyperlinklijst Handboek Interactieontwerp

9789059404175-mini Teneinde de hyperlinks in het Handboek interactieontwerp toegankelijker te maken, heb ik de hyperlinklijst die achterin het boek staat hier opgenomen, zodat alle links klikbaar zijn. Sommige links zijn aangepast, omdat ze niet meer werkten, maar in alle gevallen is de extra informatie over een onderwerp toegankelijk gebleven.




Hoofdstuk 1

  1. en.wikipedia.org – Zoek op de begrippen in de tekst.
  2. www.jjg.net/ia – Jesse James Garrett’s model van The Elements of the User Experience.
  3. www.ixda.org – De Interaction designers association
  4. www.acm.org/sigs – Special Interest Groups van de Association for Computing Machinery
  5. www.sigchi.org – ACM SIG Computer-Human Interaction
  6. www.designinginteractions.com – Website bij het boek van Bill Moggridge

Hoofdstuk 5

  1. Wall of Deliverables: Verschillende manieren om analyseresultaten te visualiseren.
  2. Boxes and Arrows – Site voor en door analisten
  3. Design for the Digital Age – Site bij boek van Kim Goodwin over uitvoering van Goal Directed Design

Hoofdstuk 7

  1. 960.gs – Het 960 Grid systeem

Hoofdstuk 8

  1. www.vischeck.com – Bekijk uw site of afbeelding zoals een kleurenblinde die ziet
  2. www.useit.com/alertbox/20020203.html – Jakob Nielsen over ClearType
  3. en.wikipedia.org/wiki/Color_depth#Truecolor – Over kleurdiepte

Hoofdstuk 9

  1. www.webdesignerhelp.co.uk/index.php/2009/05/66-websites-which-use-beautiful-illustrations/ – Site met gebruik van illustraties in websites
  2. www.smashingmagazine.com/2009/02/19/40-excellent-illustrations-in-web-designs/ – Site met gebruik van illustraties in websites
  3. abduzeedo.com/web-design-illustration – Site met gebruik van illustraties in websites
  4. www.robertpenner.com/easing – The Penning equasions waarmee u animaties natuurlijker kunt maken
  5. research.microsoft.com/apps/tools/tuva/index.html – Een hypervideo speler
  6. www.videoclix.tv – Een Interactieve video aanbieder
  7. www.clikthrough.com/ – Een Interactieve video aanbieder

Hoofdstuk 10

  1. www.dialogdesign.dk/cue.html – Comparative Usability Evaluation
  2. www.useit.com/papers/heuristic/heuristic_evaluation.html – How to Conduct a Heuristic Evaluation
  3. www.useit.com/papers/heuristic/heuristic_list.html – Ten Usability Heuristics
  4. www.useit.com/papers/guerrilla_hci.html – Using Discount Usability
  5. www.accessibility.nl – Nederlands site over Accesibility
  6. www.drempelvrij.nl – Nederlandse site over Drempel Vrij
  7. www.vischeck.com – Bekijk uw site of afbeelding zoals een kleurenblinde die ziet

Hoofdstuk 12

  1. patterns.littlespringsdesign.com/index.php/Main_Page – Design for Mobile
  2. www.w3.org/TR/2008/REC-mobile-bp-20080729/ – mobile web best practices

Hoofdstuk 14

  1. www.gutenberg.org– Site van het Gutenberg Project
  2. www.apple.com/ipad – The Apple iPad
  3. www.plugandwear.com: Materialen voor wearable interfaces
  4. www.cutecircuit.com/products/wearables/ – Cute Circuit site
  5. www.oneill.com/navjacket/ – The NavJacket
  6. www.talk2myshirt.com – Fashion with Technology
  7. www.engadget.com – Site met het laatste nieuws over gadgets
  8. www.microsoft.com/surface/Pages/Technical/Learn.aspx – Site over Surface
  9. www.ted.com/talks/anand_agarawala_demos_his_bumptop_desktop.html – Videopresentatie van 3D OS BumpTop

Create a Button Control from an Expression Design drawing

I’ve placed a PushButton Design file in the Expression Gallery. A thousand people have actually downloaded the .design file. Only one question rose, asking how to implement that drawing as a Button Control. Here are the steps to do that:


In Design:
– Click the square on the Layer named PushButton to select all elements
– Select File/Export and in the dialog choose XAML Silverlight 4 Canvas, Leave Text Editable, set Live Effects to Convert to XAML,  call it PushButtonNormal.xaml, remember where it is located after export. Click Export All.
– Click the square on the second Layer named PushButton Pressed to select all elements
-Select File/Export and use the same settings and location. Name it PushButtonPressed.xaml. Click Export All.

In Blend:

– Start a new Blend Silverlight Application, Call it PushButtonControl
– Open MainPage.xaml in the Code Editor using View/Active Document View/XAML View.
– Create a closing the tag for the Grid Named LayoutRoot.
– Open the PushButtonNormal.xaml file in Notepad. Cut the inner Canvas named PushButton, Paste in inside the LayoutRoot Canvas and remove Width, Height and Canvas.Left and Canvas.Top.
– Open the PushButtonPressed.xaml file in Notepad. Cut the inner Canvas named PushButton_Pressed, Paste it under the PushButton Canvas and remove Width, Height and Canvas.Left and Canvas.Top.
– Resolve naming conflicts for Ellipses, you can only have objects with unique names.
– Switch to Design Vieww using View/Active Document View/Design View.
– Right Click the PushButton Layer in the Objects and Timeline Panel. Select Group into…/Grid from the context menu.
– Right Click the PushButton layer in the Objects and Timeline Panel. Select Make into Control… from the context menu.
– In the dialog select the Button control and name it PushButtonControl. Click OK.
– This will create a Button Control and open ControlTemplate Editing Mode. A ContentPresenter is added to the Button. Because the PushButton container is a Canvas you have to reposition this using the Left and Top properties.
– Click the [Button] button in de Breadcrumbs at the top left of the Artboard to go out of Template Editing Mode.
– Right Click the PushButton_Pressed layer in the Objects and Timeline Panel. Select Cut from the context menu.
– Left Click the [Grid] layer in the Objects and Timeline Panel. Select the [Grid] button in de Breadcrumbs at the top left of the Artboard to go into Template Editing Mode again.
– Right Click the [Grid] layer and select Paste from the context menu. This will place the Pressed state of the button over the Normal state. Remove the top most Ellipse. This is the transparent shadow and should not show twice. Drag the PushButton_Pressed layer up so it is above the [ContentPresenter] layer. The word Button should appear.
– Set the Opacity Property of PushButton_Pressed to Zero (0%).
– Now you should have a [Grid] with 3 layer in it: PushButton, PushButton_Pressed and [ContentPresenter]. The Normal state should be visible. The word Button should be visible in it.
– Open the States Panel (Window/States should have a check before it) and select the Pressed State. The Pressed state recording should go on, showing a red frame around the Artboard.
– Set the Opacity of PushButton_Pressed back to 100%.
– Click the Base layer at the top of the States Panel and switch between the Pressed and Base state. Make sure the Buttons overlap exactly.
– Click the [Button] button in de Breadcrumbs at the top left of the Artboard to go out of Template Editing Mode.
– Select File/Save all
– Press F5 to build the project, so you can test it.

Optimization would include replacing the Canvases with Grid containers while keeping all Ellipses in their places. This would allow for better control of button size and placement of the ContentPresenter.


Easy as Pie: Percentage Pie-Charts with the Expression Blend 4 Pie Shape

During the evolution of Silverlight and Expression Blend we’ve had to create Pie Charts for various projects. Often these were to illustrate the state of a percentage value in the application. Thus we’ve build our own a few times over. Now, with the new Pie Shape in Expression Blends 4 this has become a no-brainer. Here´s how:

 PieShape01  PieShape02 

  1. Create a new Silverlight Application project in Blend 4
  2. Open the Asset Panel and select the Shapes category
  3. Select the Pie Shape
  4. DoubleClick the Pie Shape at the bottom of the ToolBox so it is added to the Artboard with default values of StartAngle 90 and EndAngle 360
  5. Name it Pie1 in the Objects and Timeline panel. This way you can use code to access its properties.
  6. If you want you can give it a Fill Color to see it better.
  7. Add an event handler called UpdateArcEndAngle on the MouseLeftButtonUp event of the LayoutRoot Grid.
  8. In the Code Behind file (MainPage.xaml.cs) add a line of code to update the StartAngle of the Arc:private void UpdateArcStartAngle(object sender, MouseButtonEventArgs e)
        Pie1.StartAngle += 45;
  9. Build the project and click the Pie to update it with 45 degrees each time you click it. When the Pie has reached the 360 degrees, it with start again at 45.

Of course, you can style a Pie Shape any way you want. Now it is easier than ever to show a percentage Pie Chart…

 Pie01  Pie02



Focus on FocusVisualElement in Silverlight buttons

The FocusVisualElement is the equivalent of the dotted line that you see in Windows interfaces and on browser pages around an object on the page that “has the focus”. This means that it will receive the input a user is giving with a mouse, keyboard or touch. Actually, web designers don’t really like these dotted lines, because they degrade the look of their interface. It may disturb the carefully crafted look and feel of the page. But this FocusVisualElement has a function.

Normally I’m not so eager to use buttons as controls for showing examples. It usually doesn’t lead to an interesting visual result. As a designer my examples should look more interesting. Fortunately in Silverlight you can create other shaped and colored buttons easily using the Make into Control… option in the contextmenu of graphic elements gathered in a Grid. In this case the I’d like to focus on the FocusVisualElement element, so Buttons are my first choice.

In Silverlight the FocusVisualElement is an actual graphical element that is part of a control’s ControlTemplate. In Blend you can access this template by selecting Edit Template/Edit Current (I’d really like a keyboard shortcut here, but there isn’t, yet).

In template editing mode you can find the FocusVisualElement in every Silverlight control. It’s shape depends on the type of control, but in a Button it is a light blue Rectangle. By default this Rectangle has its Opacity set to Zero and the Focused State makes it visible. This leads to the notion that you can change the looks of this Focused State to anything you’d like:



ButtonFocused2  ButtonFocused

In these images I show how a HyperlinkButton could get a Glow Effect when it is focused. But there’s no reason to leave it at that. The oval Button plays an animation when it is focused. Apart from the Opacity, a TranslationX, Scale and a PointAnimation is applied to a semitransparent Ellipse when the Focused State is triggered. This makes the Ellipse move van left to right. The animation is AutoReversed and repeated Forever.

You can use the VisualStateManager to create the animations. You can also show the TimeLine and create an Storyboard that you paste in de <VisualState x:Name="Focused" /> Visual State. When you create a Button using Make into Control… you can copy the Visual States out of the ControlTemplate of a normal Button and use them in your own.

Make sure your animation for the Focused State of controls are low-key. You don’t want to irritate your users with flashing graphics only because a control is focused!

Working code from these Buttons is on my SkyDrive