Planning and design prototype

Planning and Design Prototype



Planning and Design Prototype

Chapter I

Introduction

Prototypes can help to evaluate design alternatives at any stage of the development process. Here three approaches are introduced: storyboards, paper prototyping, and HTML prototyping. A listing of pros and cons is given for the prototyping approaches in order to facilitate the decision of which is best for your requirements. Prototypes can be a valuable tool for designing applications. They can help to evaluate design alternatives at any stage of the development process. During the conceptual phase the basic design elements can be explored and tested with users. When designing the actual screens the layout and more detailed interaction issues can be evaluated and tested. Later "high-fidelity" mockups can be used to provide a "preview" of the final application. In addition, storyboards can be used for basic usability inspection. (Dean Leffingwell 2007, 34-675)

Advantages

Better interaction, especially useful for evaluating screen changes (but usually someone is needed who plays the "computer")

Useful for presentations of the application design or of design alternatives

Still time to make changes between days of testing and final coding

No hassle with paper

Drawbacks

Creation takes much time (usually one or more days)

Barrier to discard the prototype and start over

Not as flexible to test new ideas or alternatives

Providing realistic scenarios and fake data is time-consuming

Analyzing, editing tapes, creating reports delays change implementation

Often discussions on implementation issues ("taste") dominate content discussions

Users cannot CO-design the prototypes, they can only make suggestions (which cannot be checked immediately) (Dean Leffingwell 2007, 34-675)

HTML and/or programming knowledge needed (usually created by one person only - the designer may also tend to create a "perfect" prototype)

In creating your prototype, you gain insight on what the final product will actually look like. You can eliminate problems before you've gotten too deep into the programming to turn back or need to implement some kludgy fix. In developing my application, there are three components to the prototype development that I'll be using:

Visual Design

HTML Prototype

Usability Testing

Visual Design

The visual design stage is where the fun is. You establish your layout, group elements together and really get a sense for how your application is going to work. I use a graphic design application such as Photoshop or Fireworks. You'll be able to easily add new elements, resize, rotate and whatever you need to lay things out. Take one of the pages from your application flow and start putting in all the elements that belong on the page. Don't worry about where they need to be at first. Just make sure you don't miss anything that needs to be on the page. Once everything is on the page, start grouping related elements together. Give greater prominence to elements or tasks that are more important and minimize or hide elements that are less important. Prominence can be expressed in various ways such as size, colour, or positioning. More important elements could be larger and higher on the page whereas less important elements would be smaller and using more muted ...