Code Playground 41

Prototyping Basics
- What is a prototype?: A prototype in UX or web design is an early working model of a design used to gain feedback and rapidly experiment with ideas, and they are usually made up of sketches, wireframes, and mockups. A sketch is a drawing of the website's user-interface. Wireframes are grayscale high-level rendering of a user-interface, focused on information and overall layout. A mockup is a fully rendered, colored, hierarchy design of the interface. Interactivity is any interactive behavior occurring on the user interface that changes the state of the design or flow.
- How prototyping helps user experience: When designing a prototype, you need to focus on the design and not the tool that you are using. Prototyping also limits the risk of delivering a project that doesn't solve the right business problems. Prototyping also gives other designers the chance to make comments about what is perfect and not so perfect in your site.
- Important prototyping considerations: Prototyping can have a time cost effect when doing them, but it also can help you with figuring out what designs work best and what doesn't. Other things to consider is who you will be sharing it with to get feedback. Another is to use the right tools when designing your prototypes.
- Building effective prototypes: When building effective prototypes, make sure that the fidelity for your site matches the feedback you are looking for. Make sure to check for errors when designing so that the users who are testing your prototype won't encounter any.
Prototyping Fidelity
- Overview of the design process: Design processes for web design are basically the same as others and use many of the same models, like the Design Council Double Diamond: Discover/Define/Develop/Deliver; IDEO Human-Centered Design Model: Hear/Create/Deliver; and the Stanford d.school Design Thinking Process: Empathize, Define, Ideate, Prototype, Test. All have these key concepts:
```
* User centered, focused on empathy
* Problem statement defined by users
* Ideation
* Prototyping and iteration
* Delivery of the design
```
- Choosing the right fidelity: Fidelity is the visual appearance of something, but also refer to the degree of functionality represented by the prototype. A low fidelity phase usually doesn't have a lot of things to go by and is mainly just the starting phase. A medium fidelity phase has a lot more things to focus on, like a lot more focus on the design and on the interactivity. A high fidelity phase is when the people testing your site will be making sure that it works fully the way it should and that it doesn't have any errors that could mess up users.
- Low-fidelity prototyping: A low fidelity phase is when the project is an a basic sketch outline and you are just trying to get an idea of which direction to go. If you don't have a prototype ready for your audience to test, then you coulkd have a very basic design sketch that could at least start off a conversation. Some advantages with low-fidelity is that users are more likely to be open about their thoughts about the project, and it is easy to create one and easy to fix or modify from the feedback. Some disadvantages are limited interaction and flows, are facilitator driven, and doesn't validate usability.
- High-fidelity Prototyping: Medium fidelity prototypes have some of the design elements and interactivity added in but the majority of it isn't ready. High fidelity prototypes have the visual appearance in place, including color and branding, and functionality is represented to a great deal. Advantages are they are more representative with look and feel, Design doesn't rely on facilitator, usability issues will be caught. Disadvantages are that the prototypes are very difficult to create and to update, along with that users might not be as willing to give feedback because it looks almost final.
- Testing and evaluating prototypes: When testing your site with a user, if it is early in the design, then it would need a facilitator, or someone to guide them through the site. The facilitator and the designer will also need to talk to each other about the kinds of questions to ask the user. The main goal of testing your prototypes is to find out if your design solves the right problems.
Prototyping Tools
- A word about tools: There are many different tools that can be used to make prototypes, but you don't have to know or use all of them, mostly just the ones that you are familiar with.
- Paper prototyping techniques: Paper prototyping is useful to get the layouts, light interactions and flows basically worked out. When using a paper prototype you would need to use a facilitator to help get the user to understand and be guided through the prototype. Another thing to think about is what kind of paper that you should use: cardstock for if you are handing the prototype around a room full of people and the chances of normal paper being ripped are bigger, or if there isn't that many people, then normal paper would do fine.
- A paper prototype walkthrough: Have a foam cutout of the devices that you are designing for, and then draw what each page would basically look like on that device.
- Paper prototyping tools: One tool that you can use after you have done some paper prototypes is use an app called POP.
- Moqups for low-fidelity prototyping: Moqups is another tool that can be used for prototypes. It also is browser-based so you can create your prototype in the browser window.
- InVision for prototyping: Another tool that you can use is InVision, which is really good at linking prototypes to other pages of that prototype. InVision comes with some limitations like, it doesn't allow you to create your own prototype, can't simulate data entry.
- Keynote prototyping for animation: Keynote can be used for prototyping even though it is mostly a presentation software, but it has plenty of animation options that can be used for interaction.
- Axure prototyping: Axure gives you the ability to create your prototypes in low, medium, and high fidelity. It can also include interactivity with the properties tab located on the right side of the editor.

Prototyping Basics

Prototyping Fidelity

Prototyping Tools