PROTOTYPING PROTOTYPING Brings designs to life for Designers

PROTOTYPING

PROTOTYPING Brings designs to life for: Designers Users Can be as sophisticated or as crude as you want Allows you to explore ideas Used properly, it is at the heart of human-centred design

PROTOTYPING May (rarely) mimic the whole system. More usually looks at horizontal or verticcal slice through the system May evolve into final product, or be replaced by an idea that worked better. A prototype is about the presentation of ideas Different prototyping methods suit different situations.

Low fidelity prototypes explore initial concepts and broad ideas. High fidelity prototypes help evaluate "look and feel" and functionality. The main purpose of prototyping is to evaluate designs with users.

A prototype is a concrete but partial representation of a system design. It may be built to demonstrate a concept, test details of a concept or as a specification for the final product. It may be made of paper or cardboard, or using a software package.

• • Prototypes are always interactive. They are made so that users can interact with part of the system. In the crudest example, a paper print-out of a web site can be made interactive: A user "presses" a button with his pen. The designer then changes the print-out to represent the system's response. (He might swap print-outs)

HI-FI PROTOTYPES Hi-fi prototypes have a similar look and feel to the final product. They need not have the functionality of the final product. The Hi-fi prototype on the next slide has no functionality whatsoever. It is a photograph. Nevertheless, I can add the effect of a purchase.

HI-FI PROTOTYPES • Useful for an evaluation of the main design elements: – – – • Content Visuals Interactivity Functionality Media Can be used to measure how fast a person can learn the system.

HI-FI PROTOTYPES • • • Useful for getting client approval before developing all the functionality. "The site will look like this. Would you like changes before I go on? " Usually appears well into the project. Beware: it looks so realistic that the client will regard it as real. Any typos will be treated seriously and will distract from the main purpose.

HI-FI PROTOTYPES Beware: It is possible to prototype systems that cannot be produced using today's technology.

LO-FI PROTOTYPES • • • Usually made from paper or cardboard Designed to be produced quickly and thrown away after use Focuses on underlying design ideas: – – – Content Form Structure Functionality Navigation

LO-FI PROTOTYPES Usually made of card and post-it notes Permanent features drawn on the cardboard. Changing features simulated by adding and removing post-it notes Can use acetate and wipe-off pens

HOME INFORMATION SYSTEM Different screens on different pages of the binder Simulated pop-up keyboard Acetate panel for adding comments 13

LO-FI PROTOTYPES Main issues: • Robustness: It needs to be strong enough for use • Scope: Keep it simple so users can follow the story • Instructions: Too little and they get lost. Too much and they obey without thinking • Flexibility: Invite users to redesign the mock-up so as to sidestep problems encountered

USING LO-FI PROTOTYPES Need to record what happens: take notes, sound record or use video. Have 2 designers, one to interact with the user, one to "play computer" User points to where they would click next. Use a narrative: "You are interested in this shirt, but you want to know what sort of material it's made of. What would you do?

TYPES OF PROTOTYPE A Full Prototype provides full functionality, but with less power A Horizontal Prototype mimics the whole system, but many of the functions don't actually work. A Vertical prototype only mimics a part of the system (e. g. Login, registration), but what is there actually works.

TYPES OF PROTOTYPE • Evolutionary and Incremental prototypes eventually develop into the finished system. They are a form of Rapid Programming, Extreme Programming or Agile Programming. The philosophy is to get a partial prototype to the customer within a week or so of starting the project. Features are added in order of priority and the model is refined using customer feedback.

TRADE-OFFS Hi-fi prototypes can give you exciting prototypes. . . Special-purpose prototypes can answer specific questions. . . Realistic prototypes may increase validity of user test data. . . . but can lead to premature commitment to design decisions . . . but building all those prototypes is expensive, in time at least. . . . but may delay testing and require more prototype building

TRADE-OFFS Iterative refinement enables continual testing and feedback. . . but may discourage radical transformations

OTHER COMMENTS • • If you see the term "Requirements Animation", it means a quick prototype to show the client to make sure you are thinking along the same lines Rapid Prototyping ("throw-away prototyping") uses multimedia software to imitate the user interface. It must be thrown away because the final implementation will be in a different language.

TOOLS FOR PROTOTYPING Allows easy modification of interface details or functionality Allow manipulation of prototype components For evolutionary prototypes, allow reuse of code Not constrain the designer to default styles for interface objects

TOOLS FOR PROTOTYPING • Requirements animation: Paper – Powerpoint – Drawing packages – • Vertical & Horizontal prototype development environments: Visual Basic – Delphi – Java –

TOOLS FOR PROTOTYPING Throw-away prototypes: Director Visual Basic Powerpoint Dreamweaver Flash Evolutionary & Incremental Prototypes: Object oriented languages

PRESENTING DESIGNS IN A MEETING • If presenting to Senior Management: – – – • Vision Concepts Key features Impact Image If presenting to client: Detail of design – Workings of system –

PRESENTING DESIGNS IN A MEETING If aimed at getting a contract: The main selling point Differences between your product and others If aim is to agree a concept: Restate client brief Clarify requirements Scope the project

PRESENTING DESIGNS IN A MEETING • If evaluating early designs: Design principles – How the parts fit together – Basic navigation – • If evaluating detailed designs: Size – Shape – Colour – Text –

LOW, MID AND HIGH FIDELITY TOOLS

Three-level framework: Low-fidelity prototyping tools and methods are used for early design just after requirements analysis, to help conceptualize and envision the interface at a high level. These tools often support rough sketching of interface screens by freehand drawing with a mouse or tablet pen.

Mid-fidelity prototyping tools are used after early design, for the purposes of detailed design and usability validation. They present detailed information about navigation, functionality, content and layout, but in schematic (“wireframe”) or approximate form.

High-fidelity prototyping tools permit the creation of a lifelike simulation, normally for marketing purposes or sometimes for user tests, before the final version has been developed. High-fidelity prototyping tools tend to target developers, and are often general-purpose development tools. Due to the efforts required, highfidelity prototypes are usually not “rapid”; nevertheless the expression RAD (rapid application development) is widely

BENEFITS AND VALIDITY OF RAPID PROTOTYPING Rapid prototyping is known to offer many advantages across all levels of fidelity. The following summarizes the most important benefits of rapid prototyping : • • Cost savings in the total life cycle Improved usability and quality of the final application Permits usability testing before coding Improved communication of the design concept to the client and end-users, and communication of the functional specifications to graphic designers and developers.

THE GENERIC MID-FIDELITY PROTOTYPING FRAMEWORK

Before starting to create the mid-fidelity prototype, it is important to prepare a preliminary (high-level) design. Two steps are involved: 1. A hierarchical (tree-format) outline of the content and functionality of the information architecture is created. The outline serves as a reference to help structure the early stages of defining menus, navigational structure and page content. The outline accelerates the graphical prototyping and ensures that crucial elements are not forgotten. 2. A rough overall design is sketched, including the general navigation scheme. Solutions can be drawn from design patterns in order to accelerate this step. This step is inherent to usable design but is considerably more complex than can be explained in this paper.

Define screen capabilities and font size The prototype should simulate the screen resolution and screen size at which the final site will be viewed. Some prototyping tools allow the user to set the screen resolution, but in other tools it is necessary to approximate font size by “eyeballing” (trial and error tests) in full-screen mode. If the prototyping tool does not allow the designer to specify screen resolution, the use of a smaller font will simulate the increased space available at higher screen resolutions. The font size affects how much space a menu requires, how much information will fit into the content zone, and how many top-level items can fit into a horizontal menu. The main fonts to define are for menu items, page titles, subtitles, textual content, field labels and buttons.

Define main areas and navigation strategy This step consists of defining the page layout and basic behaviour, in particular for the elements listed in Table 2. In a first step, the designer places repeating elements (such as menus) in a dedicated and normally fixed-size zone. Some prototyping tools such as Power. Point have a “page background” or “master” function that allows users to identify elements that repeat on all pages.

General techniques The following additional methods apply across all of the prototyping steps: • Because the goal of a mid-fidelity prototype is simply to communicate the concept and create the illusion of the target system, it is usually not essential to model every single page in the target site. Particularly for large sites, the designer can put less detail in the less important sections and pages. Where the same page format repeats across a large number of pages, a single page can be provided as an example.

• It is possible to simulate virtually any interaction technique using simple approaches. For example, complex database architectures can be simulated simply by providing sample data in the fields. The prototype does not need to actually use advanced technology to present advanced techniques – it only needs to paint the picture of how the results would look.

• In addition to the prototyping process itself, it is important to validate the prototype before sending it out to the developers, in the following steps: 1. The prototype is compared to the textual or graphical outline to ensure that it correctly implements the vision and definition of needs. 2. All links are tested. 3. The prototype is validated with the client. 4. Usability tests are performed with target users.

LECTURE: TYPES OF ENGINEERING PROBLEMS

There are two main tasks in CAD: 1. The problem of analysis. It is connected with the function definition of the system object according to a given description and the evaluation of possible design solutions (the direct problem answers the question: "What will happen if. . . ? "). A direct problem is the task of analysis. It is unambiguous. Reliability of resolution depends on the level of reliability of the mathematical model of this problem. 2. The synthesis problem. It is related to the creation of the object itself and the project documentation (the reverse task answers the question: "What should I do to. . . ? ")

3 The inverse problem is the synthesis problem. This is a multivalued problem (the optimization problem). SYNTHESIS: 1. Structural - obtaining a structural diagram of an object, generating information about the composition of elements and their methods is connected between themselves. 2. Parametric - definition of numerical parameters values of systems or elements. Synthesis is called optimization if the best structures (structural optimization) or parameters (parametric optimization) are determined in a given sense. Carrying out the optimization requires the spectrum of optimization criteria and corresponding restriction. If criterion one, optimization is scalar, if several is vector.

Criterion is called a sign, on the basis of which an estimate, definition or classification of something is made. There are several types of criteria: A particular criterion is the criterion of optimality, in which one of the output parameters is taken as the target one, which most fully reflects the specific quality of the object under study. In this case, the effect of other output parameters refers to the number of constraints of the optimization problem. As a rule, partial criteria (the number of which can be very large) characterize the quality of the system elements of low hierarchical levels.

The additive criterion is the criterion of optimality relating to the group of direct apriority methods of multicriteria optimization formulated in summation of the output parameters (evaluation criteria) of the object under investigation. An additive criterion is obtained as a result of accepting the convolution of several criteria in a generalized criterion. Advantage of this method: it is always possible to determine only optimal solution.

Disadvantages: difficulties in determining the weight coefficients. . The additive criterion does not follow from the objective role of the partial criteria and therefore acts as a formal mathematical device. In the additive criterion, there is mutual compensation of particular criteria. That is, a decrease in one of them can be compensated by an increase in the other.

The multiplicative criterion assumes the objective function in the form of a product of individual components. The advantage of the multiplicative criterion is that it does not require the normalization of particular criteria and almost always determines one optimal solution. Disadvantages are difficulties in determining the weight coefficients, changing the different dimensions, mutual compensation of the values of particular criteria.

Minimax criterion works on the principle of compromise, which is based on the idea of uniformity. The essence of the principle is the following. Designing complex systems, when there a large number of particular criteria, it is very difficult to establish an analytical relationship between them. Therefore, they try to find such values of variables (parameters) where the normalized values of all particular criteria are equal.

Formally, the minimax principle is formulated as follows: choose a set of variables for which the maximum of the minimal normalized values of the partial criteria is realized. This principle of choice is sometimes called the guaranteed result. It is borrowed from theory of games, where is the basic principle.

If there are several criteria, choose: A) an additive criterion, if the absolute values of the criteria have a significant value with the chosen parameter vector: B) a multiplicative criterion, if an important role is played by the variation of the absolute values of particular criteria with the variation of the vector of parameters: C) the maximin (minimax) criterion, if the task is to achieve equality of the normalized values of conflicting (conflict) particular criteria.

Lecture: Machinery analysis concepts