Prototyping

"Interaction design prototype is a representation of a design, made before the final solution exists"

the reason behind prototyping is that even after all of the formative work during UX research and creation of personas, wireframs, scenarios, and storyboards there often still isn't enough granular detail to really create an effective solution. Prototyping aims to bring everything together pragmatically and answer all the missing questions while keeping all the value added results form our research in mind.

A prototype aims to mitigate to major risks when building a system:

1. How exactly should the solution work, going from broad strokes to fine edges
2. Mitigate the cost of engineering and software development by

By building a prototype before beginning true development you can flush out a majority of the challenges that will be faced by the development team before they're faced with them. Prototyping enables testing and collecting feedback on:

• Overall design concept
• Functionality of different components of the system
• User interactions
• Layouts
• Fine-grain design details such as fonts and color schemes

"Each prototype is intended to answer one ore more questions intended to help designers make decisions that move the design forward"

Types of Prototypes 

• Storyboards: a sequence of frames depicting a visual story with descriptions providing context of use. they act as both a representation of the formative work as well as prototype in the sense that they allow the extraction of feedback about a concept as well as context of use.
• Sketches: Visual ideation around different approaches and options. Also used for early feedback to validate ideas and approaches to solving problems.
• Wireframes: Visual representations of an individual screen or view of a system. they are used to identify what type of input and output is collected and displayed as under what conditions. Used to map out a high level understanding of the system, not a polished product.
• Interactive prototype: captures multiple states of a design, transitions, interactions, look & feel.

prototyping maximizes the number of times a solution can be revised and refined before it is committed to code.

Prototypes

A prototype is a representation of a design before the final solution is decided upon, that is a prototype is a living representation of our idea and as our idea evolves to meet our challenges so does our prototype. Sometimes we drop our prototype and start fresh but we should always learn something from our prototypes, if not what works then definitely what doesn't and with these lessons we improve or build new prototypes that get us closer to a resolution or solve our problem becoming our finished product.

Reasons for prototyping 

• Reification: is the process of taking an idea or concept and making it real, by creating our prototypes we create the opportunity to verify our ideas are going to resolve our problems.
• Reflection: by createing a prototype it gives us a chance to reflect on our design to ensure that they are meeting the design goal or taking us in a different direction
• Communication: Prototypes communicate our design ideas to the stakeholders to validate that our solution is going to solve the right problem.
• Assessment: allow us to run user tests on our ideas to verify that they are going to satisfy user needs.

Various forms of a prototype

• Verbal description
• sketch or wireframe
• storyboard
• Navigation/flow diagram 
• Physical model
• Video
• Formal specifications 

any of the above are valid prototypes however in user experience we usually mean a depiction of the system as a user will experience it. there are vaious levels of prototype

• Low-fidelity
• Addresses
• Functionality of what needs to be done
• Organization of how the UI is going to look, grouping
• Task flow & Coverage: Solve the tasks users need and how many of them
• Ignores
• Graphics: colors, fonts
• Programming: no programming done on paper to keep costs down
• Real Data: don't wory about actual data
• Mid-fidelity
• Addresses
• Layout: how are the fields and controls going to be layed out
• Interactivity: How does it feel to interact with the system 
• Navigation: from one part of the system to another 
• Ignores
• Graphics: colors, fonts
• Programming: no programming done on paper to keep costs down
• Real Data: don't wory about actual data
• High-fidelity
• Addresses
• Graphic design: colors, fonts, images
• Interaction details: animations, transitions
• Realistic data: actual data for system 
• Ignores 
• Background programming: services, security, etc
• Complete functionality coverage: focused on task trying to resolve 

KISS (Keep it simple stupid)

The best prototype communicates the design idea in the simplest most economical way possible to the stakeholders or the team, the idea to prototype to most minimal level is to save time and money to let the needs of the product guide the design and not the prototype fashion the needs.

Low-fidelity prototypes will also receive more open and honest feedback, stakeholders are more likely to challenge a design when it's on paper than if significant resources where put into constructing it.

the iterative design process

Assess	Design	Build	Assess
Asses current needs Understanding current problem Establish guidelines & constraints Personas, scenarios, user stories, requirements	Ideation Sketching Selection Synthesis	Develop Prototype	Assessment redesign More prototyping

Sketching 

sketching is one of if not the most valuable tool in a UI/UX professionals box, sketching allows designers to workout problems quickly and cheaply. sketches have the following characteristics 

• Quick: to produce
• Timely: can be inserted in multiple ways
• inexpensive: cost is low
• disposable: you're not committed to them
• plentiful: you can make dozens if not more
• minimal: very little detail 
• ambiguity: let you evolve them

sketching is an activity it is central to the design process, it is not just the product of sketching it is also the process, it gives us an opportunity to: 

• reflect on our designs 
• explore directions they may lead
• communicate our ideas

What to sketch?

Problem: sketching what's wrong gives insight to what we are trying to solve

Resolution: what would it look like for the problem to be solved 

System: to solve the problem

Sketch		Prototype
Evocative	→	Didactic: try to explain
Suggest: possibilities & opportunities	→	Describe: a paticular idea
Explore: ideas	→	Refine: initial explorations
Question: raise questions about solution	→	Answer: try to answer questions
Propose: ideas	→	Test: ideas
Provoke: ideas push boundaries	→	Resolve: problems
Tentative: possibilities	→	Specific: testing potential solution
Noncommittal: no investment	→	Depiction: committing idea for testing

Sketches are used for generating ideas and creating options whereas prototyping is narrowing down ideas for problem resolution. sketching is used to come up with ideas and strategies whereas prototyping is used to narrow those ideas down to the ones that work best.

when sketching it's very common to get stuck, where as there are many ways to try and get unstuck there is one simple method known as "The worst idea" this is the processes of sketching the worst solution to your problem, the idea is that by understanding what not to do it may give you new insight on what to do.

Models: Mental, Conceptual and Interaction

A mental model is the way a person understands the world around them. You have a mental model of wooden blocks and you have a mental model of your oven, it's just the way your mind understands the way that something works. Your understanding by no means has to be correct or aligned with the intended use; for example I have a charcoal BBQ that I burn firewood inside of in the autumn to use it as a space heater for my patio. My use of the BBQ isn't exactly aligned with the intended use, but my mental model of it has expanded beyond just grilling food.

A key part of solving a UX challenge is to define a mental model that is appropriate for what is being designed, mental models are created early, and evolve quickly they are by no means, written in stone and should grow as you get a fuller understanding of the problem domain.

Six consideration to keep in mind when planning/analyzing a mental model are:

• Appearance: the way the system appears it should be used.
• Familiarity: does the system use design axioms and established design patterns?
• Simplicity: the ease of use, can a new user figure it out through trial and error
• Recall: procedural knowledge, recognizable sequences vs declarative knowledge facts
• Flexibility: the ability to do things in any sequence.
• Feedback: does the system provided positive and negative feedback appropriately.

mental models can be represented by flows or user journeys, they need to communicate why the user is trying to use the system

Once a mental model is constructed or understood then that insight can be used to create a conceptual model. A conceptual model is the bridge between how the user thinks the system works and how it generally functions. for a conceptual model you can start thinking how you are going to facilitate the mental model. these can take the form of wire frames
Conceptual models should describe what the user is trying to do

When the conceptual model is established then it's time to start experimenting with interaction models; these are more defined representations of how our system should work, however these are experiments. They can prove to be successful or be failures, think of them as tests to see if your approach is valid, this is not an end product of a process but merely step in an iterative process.
these can take the form of prototypes.
and interaction models should demonstrate how the system is going to help the user accomplish what they want to do.

Design Rational

Design rational is the process of justifying a designers choice from their options; the euphemism "There's more than one way to skin a cat" holds very true for UX design. Oftentimes when solving a UX challenge the designer has numerous options, the trick is to pick the best one for this particular instance of this problem.

"Design rational is the articulation of various trade-offs between potential options to guide design towards the most optimal solution."

Design rational aims to understand the various options in terms of their various pros and cons and then justify the decision to pursue one particular design route over the alternatives. there are many pragmatic and theoretical approaches to selecting a design route, almost all of them are based on the articulation of design trade-offs and using those trade-offs to make a decision.

Questions, Options, and Criteria.
QOC is a methodology to facilitate systematic and principled decision making for design options. It's routed in the notion that

"A feature is represented by multiple options, which answer a particular question. Criteria help articulate the various tradeoffs between the options and guide the choice of which option to settle on."

Questions:

• Provide structure to the design space
• Help uncover and define design alternatives

Options:

• Are different potential solutions to the same question

Criteria

• The required and desired properties that a solution should satisfy 
• Differ in importance and generality 
• Help determine reasons for a decision

Criteria do not just come out of thin air, they are founded in requirements and often come from:

• UX research, the formative work that is done with target users
• Requirements gathering both functional and non functional
• Accessibility constraints: visually impaired, hands free for driving, etc 
• Usability: integration into daily routines, Privacy, social acceptability, etc
• Previous studies: historically identify what works, established paradigms  
• Behavioral theory: how do people act vs how they portray/believe they act
• Common sense.

where ever your criteria come from it's important to understand they are not arbitrary and are in fact rooted in a need, when a criteria is proposed ask why? if you can't come up with a good answer then you should rethink the criteria.

By listing all of the criteria required 

How Humans Perceive

There are five main senses that human beings use to take in information

Sight Sound Touch

Taste Smell

In graphical user interfaces we mostly leverage sight, in User experience we can also incorporate sound, and in some systems we can even leverage touch; as for taste and smell, well maybe in the future; however we are going to focus on sight since most UI information is conveyed visually. humans have a very narrow field of view, we most of what our brain perceives is peripheral vision, we can only really focus on about 5 degrees of information at a time.

This 5 degrees of vision is the reason we have to scan things before we identify what we are looking at, our brains do this automatically. When designing an interface we have to be aware that just because we put something on the interface doesn't' mean our users will ever look at it. studies have show that when users read a web page they follow an "F" pattern, that is the read the top line, maybe the second or third one, and they scan the left side of the page for information.

By being aware about the F pattern we now can identify where the best real estate on a page is to increase the odds of your user finding what you're trying to sow them.

Our human eyes are better at differentiating UI assets by their properties:

• Color: if something has a contrasting color our eye will almost certainly notice it
• Shape: not as stand out as a color change, but our eyes will catch objects that are of a different shape
• Clutter: is all the things distracting the user from finding what they're looking for, if there's too much clutter and we don't differentiate our search target from the clutter we have to manually search, scanning our UI the way you do a word search.
• Motion: if we add some sort of animation to our UI this will again draw our eye to our search target.

the Gestalt Principles are a set of principles that define patterns that humans see:

1. Proximity: objects or shapes that are close to one another appear to form groups. Even if the shapes, sizes, and objects are radically different, they will appear as a group if they are close together.
2. Similarity: we group things that look similar into categories, for example a group of triangles
3. Closure & Continuation: refers to the way that a dashed line is still perceived as a line even though it's not a continuation our mind sees it as one item. same with a dotted border.
4. Symmetry: we are far more likely to perceive symmetrical half's as part of a whole than two different objects overlapping each other.
5. Common area: things that are grouped inside of a border we them as being related.
6. Common fate: if visual elements are seen as moving in the same direction at the same rate (optical flow), our perception associates the movement as part of the same group

Take away

• we can use pop out, things like Color, shape, and motion to draw attention to things to make them pop-out from the other clutter.
• we can use the six Gestalt Principles to group things together
• and we can use the same gestalt principles to allow people to skip over sections to find what they're looking for

7 stages of action

In the book the design of everyday things, the author Donald A. Norman modals how people act when they are pursuing a goal. this modal has seven stages:

1. Forming a goal: decide on something you want to accomplish 
2. Forming the intention: decide if you want to pursue your goal
3. Selecting the action: pick the "best" thing to do to accomplish your goal
4. Executing the action: do the "best" thing you chose to do to accomplish your goal
5. Perceive the state of the world: take in the information of the result of the "best" thing you chose to do
6. Interpret the state of the world: use the information you gained to see how your "best" action changed the world
7. evaluate the world: decide if your action accomplished your goal, moved you closer to your goal, or further from your goal.

this is an iterative process that people follow to complete their minor goals to reach their major goal

if you look at the first three steps after forming the goal:

1. Form the intention
2. Select the action
3. Execute the action

they make up the Execution path, deciding to act, selecting the action and performing the action. Whereas the following three steps:

1. Perceive the result
2. Interpret the result
3. Evaluate the result

make up the Evaluation path, seeing what changed, interpreting it, deciding if the change moved the user closer to his or her goal.

the space between the user's goal and the execution path is referred to as "The gulf of Execution" the challenge for the user to map their goals on the possibilities in their environment, whereas on the other hand the user faces "The gulf of Evaluation" this occurs when the user tries to see what their action changed, interpret their change, and decide if their change moved them closer to their goal.

When designing systems we want to bridge these two gulfs, the gulf of execution and the gulf of evaluation. To bridge the Gulf of execution we want to make it clear and obvious for the user as to what they're suppose to do, and as for the gulf of evaluation we want to give them a clear indication via feedback that their action has been received and is moving them towards or away from their goal in order for the user to keep on their present course or pivot to move towards their goal.

Users need to be able to know what the system can do, how to do it.

The Gulf of execution: Users can figure out what they can do

The Gulf of evaluation: Users can see if they where successful 

Aids in discovery 

• Affordances: a feature of an object or environment that indicates the possibility of action, it'll communicate that something can be done intuitivly  
• Signifiers: an indication of what will occur and where it can occur. Signifiers are often required when you have many options but you need to differentiate them.
• Feedback: lets the user know that their input was recieved and what it did with that input
• Constraints: limit the number of options the user has, things the user can't do should be disabled or hidden. Limit the number of options making the selection easier.
• Conceptual Models: support future actions, they are paradigms that will clearly communicate to a user what their action will accomplish, they are supported by the previous aids.

a designers conceptual modal is how the system functions and can be used, however every system is clear and obvious to the designer, the user however can really only use their past experiences and the visual cues available to form their course of action to accomplish a goal

there are two more aids that can be leveraged for building a Cohesive Conceptual modal:

• Consistency: things should work the same way throughout the user experience
• Metaphor:  things should function the same way between different user experiences, that is if a paradigm has been defined for example 3 horizontal bars for a hamburger menu, that's exactuly what your experience should do

UX Design

"Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works." – Steve Jobs

Design is not an afterthought, good design begins with the inception of the product or service and is in the forefront throughout the entire delivery process. The product or service is the direct result of the design, too often in the past products are built and then designed, a vernier thrown onto a product is not a design, it's a face-lift at best.

Design is not what it looks and feels like, design is how it works. A Design is a plan to arrange elements to fulfill a purpose, it describes on how a product or service works, design is solving a problem.

Design Process
To successfully design something we must

• Assess
• Identify & understand the problems we are solving
• what the user is doing what works what doesn't 
• Design
• Generate possible solutions to our problem
• Analyse the solutions and select the best one
• Build
• Low/Mid/High-fidelity prototypes

this is an iterative process we go through numerous times until we arrive at an iteration that solves our problems.

What makes UX Design special?
When designing User experiences we are focused on experiences and interactions with the system, these are time sensitive inputs with feedback that the user interacts with for the purpose of accomplishing whatever it is the user is trying to do, this person could be a novice, or seasoned user and our system must engage with both facilitating their tasks as effectively and pleasantly as possible.

UX Design	UX Research
Understand the problem	Study Users: Tasks, context
Generate Possible solutions	Sketch, storyboard, wireframes
Analyse & Select	Apply UX criteria
Embody solutions	Build prototype
assess:find new problems	Apply UX research methods user tests
Repeat!!!

UX Design works hand in hand with UX research we move between the two to try and come up with the best experience and interface that we can for the particular system we're designing.