Michael Gaigg: Über UI/UX Design

16Jul5

Highlights of Week 28/2011

Posted by Michael Gaigg

18Mar0

Highlights of Week 11/2011

Posted by Michael Gaigg

Thanks to everybody that sent me link suggestions. Here the highlights for week 11/2011:

12Oct4

MS SketchFlow meets Sketchables

Posted by Michael Gaigg

What is SketchFlow?

Sketchflow (a feature of Microsoft Expression Ultimate) is a prototyping tool that allows designers to create sketchy looking mockups, publish them and in that way gather feedback from their clients/colleagues.
As SketchFlow is tightly integrated into Expression Blend, any sketched control is behind the scenes already a Silverlight control that can be styled and consecutively used by your .NET application in Visual Studio. Any SketchFlow project can be converted into a production project, so the path from sketch to production-ready solution appears to be paved...

Why you should use SketchFlow

Like any other prototyping tool, SketchFlow

  • makes it clear that this is a prototype, it looks like drawn on paper or whiteboard
  • is a fast, easy and cheap way of putting visual ideas in front of your clients
  • allows you to link sketched pages together to create a navigable site structure
  • provides SketchFlow player for easy way of navigation through your pages without building any code
  • gives reviewers the ability to add comments directly from the SketchFlow player, making it easy to collect feedback

Why you should not use SketchFlow

During my research I found an article by Jag Reeha who argues that just because you can it doesn’t mean you should:

The aims and mindsets used to create a SketchFlow prototype are different from how you would go about creating a real world production solution.

  • A designer doesn't (and if he does, he shouldn't) think in development details and best practices, code re-usability or testing. A designer should flat-out ramble on UI elements and workflow, navigation architecture and content. Any thought that is put into structuring the solution, creating reusable controls and resources or even laying the page out in a way it can scale are counter-productive and ineffective.
  • The price tag is considerably higher (Estimated Retail Price $599 USD) than other prototyping tools like Balsamiq ($79 for a single-user, multi-computer license).
  • Another big downer is the limited amount of available sketch controls, about 17 if I counted right. Here is where Sketchable comes in handy.

What is Sketchables?

Sketchables

Sketchables

Sketchables (by Philipp Sumi) is a simple framework complemented by a set of controls that allow you to quickly create common controls in a matter of seconds. Sketchable extends the limited set of out-of-the-box sketch controls offered by SketchFlow.

Download Sketchables Preview

How to add mockup controls to your Expression Blend library?

Sketchable files to copy

Sketchable files to copy

After downloading the Sketchable libraries using the link above, copy the files (in the case of sketchables copy the complete /Sketchables/Build/SL/Debug directory, including the Design folder) to your Silverlight install directory. Well, while you are at it already, enable standard mockup controls for any SketchFlow project and copy them to the same target directory as well.

Here is how to do it:

  1. Copy both Microsoft.Expression.Prototyping.MockupsSL.dll and Design folder from:

    Documents > Expression > Blend 4 > Samples > MockupDemonstration > MockupDemonstration > Libraries > Silverlight > Debug

  2. Add copied files (including Sketchables) to the following destination:

    Computer > OS (C:) > Program Files(x86) > Microsoft Expression > Blend 4 > Libraries > Silverlight > 4.0 >

  3. Restart Blend. You can now start using mockup controls by clicking the Mockups category in the Assets panel (the appropriate assembly reference is automatically added to your project).

Your experiences?

What are your experiences and opinions on designing with SketchFlow or Sketchables?

30Sep1

Integrating Prototyping Into Your Projects

Posted by Michael Gaigg

This article was inspired by Integrating Prototyping Into Your Design Process - Using appropriate fidelity for the situation by Fred Beecher which I extend by the following:

Prototyping needs to be iterative throughout the project!

Goal of Prototyping

Prototyping is not only a design tool but a research and communication tool as well.

  • It should assist in optimizing the main task (top tasks) and validating its/their efficiency.
  • Furthermore this should not add cost to the project but reduce project expenses while increasing ROI.

So the goal is to use different levels of prototype fidelity to incrementally identify and enhance the user's task(s).

Ideally this happens linear (increase visual fidelity as you add functional fidelity) but typically it is bent to either side (see Figure 1) where more emphasize on

  • visual fidelity can be beneficial for marketing purposes or
  • functional fidelity can assist earlier user feedback trough user testing.
Prototyping in the context of your project

Figure 1: Prototyping in the context of your project.

Integration into your project

Regardless of the project approach you take it will boil down into the fundamental project management phases of Requirements, Design, Implementation (and possibly others). Prototyping should not be solely perceived as a method useful during Design, it is essential during all 3 (or more) phases starting as early as Requirements phase.

I suggest the following approach:

  1. Low-fidelity prototyping (paper / digital sketch)

    1. Create paper prototypes or digital sketches
    2. Design navigation architecture (workflow)
      1. Review with client
      2. User testing (optional)
      3. Iterate (until happy)
      4. Revise into 2
  2. Medium-fidelity prototyping (simple HTML)

    1. Simple HTML prototyping (maybe even black and white)
    2. Proof basic workflow and important interactions
      1. Review with client
      2. Iterate
      3. Revise into 3
  3. High-fidelity prototyping (Enhanced HTML)
    1. Enhance HTML prototype (links and basic functionality)
    2. Settle on design (including corporate design, basic artwork)
      1. Review with client
      2. Iterate
      3. Revise into 4
  4. Start 'real' implementation

Implementation Effort

Each prototype (digital sketch, simple HTML, advanced HTML based on simple) should not take more than 40 hours of pure development (not calculating initial meetings and communication and possible variations based on project size) plus 80 hours reviews and iterating with client. Sounds impossible? Think twice. It is so much easier to modify a sketch than programming HTML. The 'real' implementation will be built upon a solid code foundation with a grown-up design already - voila!

Can I skip a prototype?

Yes, obviously you can. But it comes with a cost later on because you miss crucial information from the earlier phase and it is more expensive to implement modifications.

Technical considerations

The argument I hear most often is that 'prototypes' are wasted time/money because they get trashed anyway. This is absolutely not true! Identifying problems early almost always saves money later on, you don't find anything out until you start showing it to people, enhancing the quality of the product will help money flow into your pocket once deployed and most important, prototypes don't necessarily need to and should not be trashed.

Low fidelity prototypes can be more than just ‘paper’, this could be digital wireframes that look like sketches, e.g. Microsoft offers software that tie sketches (SketchFlow) directly into UI design (Expression Blend) and subsequently into development (Visual Studio) - check out the WebsiteSpark Program for almost free licenses.

Don't bend too much!

Danger! Don't bend the curve from Figure 1 too much otherwise you end up with

  • a highly functional 'prototype' but without design, i.e. without visual clues whether your client/users will like it (buy it) and without validation that you got your information architecture right OR
  • a highly visual 'prototype' that looks sharp, sexy and slick but cannot be used and lack usability ("we just installed the app and now our users complain they [...]" - substitute the appropriate phrase for yourself ;)

Proof-of-concept

Creating medium- to high-fidelity prototypes can be considered proof-of-concept and can be beneficial to or sometimes even required by your project. Looking at Figure 1 that would mean to move their respective dots from Design/Implementation to an earlier phase.

What are your experiences?

Do you use / re-use multiple prototypes within your projects? Do your project structures support prototyping? To which extent?