Please enable JavaScript.

Coggle requires JavaScript to display documents.

E-Lecture 6: Prototyping (5 different prototyping techniques (ii. Wizard…

- - - - Low versus High Fidelity Webpage
        
        Here’s example of low-fidelity and high-fidelity prototypes for a website.
        
        On the left, the low fidelity prototype consists of hand-written texts and hand-drawn boxes
        
        On the right by contrast, there were real pictures and real typefaces laid out in accurate positions
- - - - Another low-fidelity prototyping technique is called the Wizard of Oz
        
        In the Wizard of Oz, a human operator simulated the behaviour of the system
        
        The term Wizard of Oz comes from the name of a book and movie about a man who pretends to be a wizard by operating a machine from behind the curtain
        
        In the next video, you will see a clip from the original movie
        
        Later on, in the movie, the team returns to the wizard having completed the tasks that he set and at this point, the truth about the wizard get exposed
    - - An iterative design methodology for user-friendly natural language office information applications
        
        The origin of the phrase ‘Wizard of Oz’ in the context of interaction design, is normally credited to John Kelley while working on his PhD in 1983 at John Hopkins University
        
        Here’s one of his early papers. It gives one of the best descriptions of the Wizard of Oz technique
    - - I can see you!
        
        In the original use of the term ‘Wizard of Oz’ technique, the Wizard was unknown and hidden from the users
        
        Nowadays, it’s common for the ‘Wizard of Oz’ technique to include situations where the user and the experimenter simply pretend that the wizard isn't there
  - - - Video prototypes are simply short videos that show how a technology would actually be used
        
        They can tell a whole story of the interaction process
        
        They are cheap and fast method of prototyping the interaction with the design.
        
        They often combine with other prototyping techniques such as Wizard of Oz or mockups
        
        The next clip shows a video prototype from a mobile cooking app
        
        It make used of paper prototype
  - - - There is also a lot of software that you can use to help build prototype
        
        Some of it like Balsamiq, is purpose-built, but other kinds of software like PowerPoint or Adobe can also be extremely useful in creating prototypes.
        
        PowerPoint
        PowerPoint is widely available and its hyperlinking feature is very useful in creating the simulation of interactions
        
        Balsamiq
        Balsamiq is wireframing software and it makes it very easy to design websites and interfaces to a variety of devices.
        
        Adobe Flash
        Adobe Flash is a very powerful software that makes it very easy to create interactive prototypes.
  - - - The sketch-a-move project combines some of the features of the video prototyping technique and the Wizard of Oz.
        
        It involves drawing a scale down version of the intended path on the roof of a toy car
        
        And after that, the car would automatically follow the path
        
        Sketch-a-move was a collaboration between Ann App and Lewis Clinker responding to an open project brief set by Matel, the toy manufacturers to quote design a smart toy car for children aged four to eleven on quote
      - Sketch-a-move Revealed
        
        The sketch-a-move car was only a prototype , so how did it work?
        
        Well, here’s the secret. Underneath the table, there someone holding a magnet.
        
        And manually drag the car using the magnet on the predetermined paths
      - Sketch-a-move Paths
        
        Here you can see some of the paths drawn beneath the table.
        
        By combining the hidden operator Wizard of Oz technique together with the Video prototyping approach, you can create an impression of how the car would actually performed
    - - Wireframes are blueprints of the design of a computer interface , despite the name, they have nothing to do with wires.
        
        A wireframe consists of outline boxes where photographs and textboxes would be placed
    - - Mockups
        
        Low fidelity prototypes
        
        Paper prototypes
        
        Wireframes
        
        “Please note: The terms ‘mock-ups’, ‘low-fidelity prototypes’, or ‘paper prototypes’ are usually used as synonyms.” IDF (2016)
        
        Why Balsamiq Mockups for wireframing?
        
        Painstakingly simple. Filled with hidden powers. Balsamiq (2016)
        
        The Devil Wear Prada (2006)
        
        As we get towards the end of this lecture, I just wanted to say a few things about the use of the word mockups
        
        The term mockups causes a lot of confusion because it is used in different ways by different people in different context
        
        Some people, for example, the Interaction Design Foundation (IDF) use the terms mockup, low fidelity prototype and paper prototype as interchangeable
        
        Balsamiq who produces wireframing software use the terms wireframing and mockups to be interchangeable , calling their wireframing software Balsamiq Mockups
        
        In the publishing industry, the mockup of a magazine, refers to the final version before its gone to print. It might consist of pages with pictures and stories stuck on with glue. The general appearance is much as it will be after its being printed
        
        The moral of the story is just to remember that the term mockup is used in different ways by different people