Michael Gaigg: Über UI/UX Design

14Oct0

ArcGIS Silverlight App: World Bank Data Mapper

Posted by Michael Gaigg

World Bank Data Mapper

World Bank Data Mapper

The World Bank Data Mapper is the latest mapping application published by the Esri Applications Prototype Lab (thanks Richie).

The app is built using Esri's ArcGIS API for Microsoft Silverlight and the recently published (free) web API of the World Bank that provides access to up to 50 years of economic, financial and health data.

Besides mastering some technical challenges (missing cross-domain access file, amount of web requests) the map viewer looks sharp and straight forward without the usual template-related overkill of functionality - great job visualizing all this economic data. Let's see which other - maybe analytical? - mapping tools will follow...

Oh, of course, have a look at the working app and download the full source if you are interested to see how the pros did it.

30Sep0

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?

23Jan0

Powerpoint Wireframe Stencils as Free Download

Posted by Michael Gaigg

The last couple of weeks were pretty busy for me. We were trying to design an application that has potential to grow beyond national importance and get high visibility. Needless to say expectations are high. Time constraints aside, my focus was to extract the goal of the application and streamline the user experience, do I sound like a marketing person yet?

Powerpoint Wireframes

In order to get quick and accurate feedback from our client I wanted to create visuals as early as possible. That's when Microsoft Powerpoint came in handy. I created wireframe mockups and iterated through the slides via video conference which turned out to be not only useful but essential to the mutual understanding. The client was able to adjust their process, our project managers increased their knowledge about the domain and our developers identified potential issues with integrating our mapping software.

Free Download

Download Powerpoint Wireframe Stencils

During the process of designing the wireframes I created my own set of Powerpoint stencils that covers all common interface elements as well as a set of small icons.

Powerpoint Wireframe Stencils

Example Usage

Just recently I started to redesign www.actress.at, the website of my sister who is an actress currently located in Berlin, Germany.
What better opportunity than this to put the wireframe stencils into work. After talking with her for some time over the phone I got a good sense of what her vision is based on the needs of job. Together with some photos from her agency and videos from youtube I created the following three mockups:

Mockup for Eva Gaigg's redesigned webpage actress.at

Mockup for the Homepage of Eva Gaigg's redesigned webpage actress.at

Mockup for Eva Gaigg's redesigned webpage actress.at

Mockup for a page inside the navigation architecture, in this case videos but also applicable for photos and other presentation items.

Mockup for the response form, probably a critical part of the application since this will be the butter on the bread.

Next Step: XHMTL Prototype

Following the wireframes exercise we created a color palette and implemented an XHTML prototype which roughly took us 3 days. Screen snapshots fed another set of Powerpoint slides for the big demo and will eventually go into the design doc as well. So far, so good.

Help me to improve the stencils

I really hope the wireframe stencils will be helpful for your work (as they made my life easier). I am interested in your opinion. What is missing? What can be improved? Send me your suggestions, ideas, updates 🙂