Prototyping Disusun oleh Lily Wulandari Definition Prototyping is
- Slides: 41
Prototyping Disusun oleh: Lily Wulandari
Definition × Prototyping is an integral part of Design Thinking and User Experience design in general because it allows us to test our ideas quickly and improve on them in an equally timely fashion. × Many of us may recall the art of prototyping from our early childhood where we created mock-ups of real-world objects with the simplest of materials such as paper, card, and modelling clay or just about anything else we could get our hands on. There is not much difference between these types of prototypes and the early rough prototypes we may develop at the earlier phases of testing out ideas.
Definition (Continue. . . ) × A prototype is a simple experimental model of a proposed solution used to test or validate ideas, design assumptions and other aspects of its conceptualisation quickly and cheaply, so that the designer/s involved can make appropriate refinements or possible changes in direction.
How do we express early design ideas? × No software coding at this stage.
Brainstorming Ideas Connecting all the dots in a three by three dot matrix by only drawing four lines.
Brainstorming Ideas Based on the items in this picture, (candle and a box of thumbtacks) how do you fix the candle to the wall without the wax dripping onto the table?
Prototype × A limited representation of a design that × allows users to interact with it and to explore its suitability Allows stakeholders to interact with the envisioned product, gain some experience of using and explore imagined uses × E. g. paper-based storyboards of a system, cardboard mockup for a desktop laser printer, hyperlinked screens
Key notes × Make it fast!!! × Allow lots of flexibility for radically different designs. × Make it cheap. × Promote valuable feedback. *** Facilitate iterative design and evaluation ***
Dilema. . . You can’t evaluate design until it’s built But. . . After building, changes to the design are difficult
The solution! × Simulate the design, in low-cost manner, × one of them is by making a model (prototype). we can implement UCD (User Centered Design) in making the prototype. × UCD is about designing interactive technology to meet user needs.
Stages of UCD: 1. Understand user needs. 2. Describe user needs. 3. Designing a prototype as an alternative. 4. Evaluate design.
Characteristics in the UCD process 1. Understanding the user and they need. 2. Focus on the user in the initial stages of design and evaluate the design results. 3. Identify, making documentation and approve the use and purpose of user experience. 4. Repetition is almost certain. The designers never succeeded in just one process. In other fields the design of a prototype is usually a model on a small scale. Example: Building Mockups
Why use a prototype Evaluation and feedback on interactive designs. Team members can communicate effectively. Stakeholders (in this case the user) can see, touch, interact with the prototype. Designers can put out their ideas. Visualize ideas and develop them. Can answer questions help select among alternatives.
Why We Need to Prototype × By prototyping and then testing those prototypes, you can reveal assumptions and biases you have towards your ideas, × Uncover insights about your users that you can use to improve your solutions or create new ones
Why We Need to Prototype × You can use prototyping as a form of research even before other phases in Design Thinking × Allowing you to explore problem areas in interfaces, products or services, and spot areas for improvement or innovation
Prototype dimensions 1. Representation × How is the design depicted or represented? × Can be just textual description or can be visuals and diagrams. 2. Scope Is it just the interface (mock-up) or does it include some computational component?
Dimensi prototype 3. Executability 4. Maturation × Can the prototype be “run”? What are the stages of the product as it comes along? × If coding, there will be periods when it can’t. × Revolusionary: Throw out old one. × Evolusionary : keep changing previous design.
Rapid Prototyping Methods Non-Computer (Typically earlier in process) vs Computer-Based (Typically later in process)
Non-Computer (Manual) Methods Goal Design Description Want to express design ideas and quick & cheap opinions on system. Can simply have a textual description os a system design. × Obvious weakness is that it’s so far from eventual system. × Doesn’t do a good job representing visual aspecs of interface.
Non-Computer (Manual) Methods Sketches, Mock-ups × Paper-Based “drawings” of interfaces. × Good for brainstorming. × Focuses people on high-level designations. × Not so good for illustrating flow and the details. × Quick and cheap helpful feedback.
Non-Computer (Manual) Methods Storyboarding Pencil and paper simulation or walkthrough of system look and functionality. × Use sequence of diagrams/drawings. × × Show key snap shots. Quick & easy.
Non-Computer (Manual) Methods Example:
Non-Computer (Manual) Methods Scenarios Hypothetical or fictional situations of use. × Typically involving some person, event, situation and environment. × Provide context of operation. Often in narrative form, but can also be sketches or even videos. ×
Non-Computer (Manual) Methods Scenario Utility × Engaging and interesting. × Allows designer to look at problem from another person’s point of view. × Facilitates feedback and opinions. Can be very futuristic and creative. ×
Non-Computer (Manual) Methods Other Techniques Tutorials and Manuals × Maybe write them out ahead of time to flesh out functionality. × Forces designer to be explicit about decisions. Putting it on paper is valuable. ×
Computer Methods Simulate more of system functionality. × Usually just some features or aspects × × Can focus on more of details Danger: Users are more reluctant to suggest changes once they see more realistic prototype.
Terminology 1. Horizontal Prototype Very broad, does or shows much of the interface, but does this in a shallow manner. 2. Vertical Prototype Fewer features or aspects of the interface simulated, but done in great detail. 3. Early Prototyping 4. Late Prototyping 5. Low-fidelity Prototyping (prototype with a low level of accuracy)
Terminology
Prototyping Tools 1. Draw/Paint programs Ex. Photoshop, Corel. Draw. 2. Scripted Simulations/slide shows Ex. Power. Point, Hypercard, Macromedia Director, HTML. Interface Builders Ex. Visual Basic, Delphi, UIMX 3.
Prototyping Tools 1. Draw/Paint programs × Draw each screen, good for look × Thin, Horizontal Prototype × Adobe Photoshop
Prototyping Tools 2. Scripted Simulations/Slide show × × × Put storyboard-like views down with (animated) transitions between them Can give user very specific script to follow Often called chauffleured prototyping
Prototyping Tools Macromedia Director
Prototyping Tools 3. Interface Builders Tools for laying out windows, controls, etc. of interface × Have build and test modes that are good for exhibiting look and feel × Generate code to which back-end functionality can be added through programming
Prototyping Tools UI Controls Design Area Control Properties
Good Feature: × Easy to develop & modify screens × Supports type of interface you are developing Supports variety I/O devices × × Easy to link screens and modify links
Good Feature: × Allows calling external procedures & program × Allows importing text, graphics, other media Easy to learn and use × × Good support from vendor
Conclusion Some of the purposes that prototypes fulfil are: × Exploring and Experimentation You can use prototypes to explore problems, ideas, and opportunities within a specific area of focus and test out the impact of incremental or radical changes. × Learning and Understanding Use prototypes in order to better understand the dynamics of a problem, product, or system by physically engaging with them and picking apart what makes them work or fail.
Conclusion (Continue. . . ) Some of the purposes that prototypes fulfil are: × Engaging, Testing, and Experiencing Use prototyping to engage with end users or stakeholders, in ways that reveal deeper insight and more valuable experiences, to inform design decisions going forward. × Inspiring and Motivating Use prototypes to sell new ideas, motivate buy-in from internal or external stakeholders, or inspire markets toward radical new ways of thinking and doing.
Place your screenshot here How about : × Marvelapp × Invision × Just. In. Mind × Flinto × Origami. Design × Axure
Task × Task description: do exploration of at least 3 prototype tools, then write exploration results including: × Operating system used × hardware specifications × functions in software × advantages and disadvantages × Deadline for submitting assignments: Saturday night
Thanks! Any questions?
- Syarat indikator kesehatan
- Respati wulandari
- Respati wulandari
- Respati wulandari
- Respati wulandari
- Video kreatif dan inovatif
- Jenis chord apa yang disusun oleh nada 135
- Disusun untuk memenuhi tugas
- Disusun oleh
- Ekosistem disusun oleh
- Kalimat disusun oleh
- Bahasa inggris disusun oleh
- Bahasa inggris disusun oleh
- Bahasa inggrisnya disusun oleh
- Nasapi
- Nspk arsip
- Pengorganisasian dan struktur organisasi
- Rangka kepala berbentuk bulat karena disusun
- Rancangan kerja yang disusun secara sistematis disebut
- Disusun oleh kelompok
- Disusun oleh kelompok
- Sistem gerak manusia disusun oleh organ
- Contoh critical incident technique
- Disusun oleh kelompok
- Disusun oleh kelompok
- Bagaimana cara mengaktifkan microsoft publisher
- Disusun oleh kelompok
- Kata khusus
- Bahasa inggris disusun oleh
- Naskah drama musikal disusun oleh
- Vastu flower plants
- Lily colgan
- Which two traits can you infer about mira
- Lily has been invited
- Water lily seed dispersal
- Lily dekic
- Adaptation of water lily
- Lily ho peck
- Adaptation of water lily
- Echo pam munoz ryan summary
- Pekeliling no 9 1946
- Lily nugent