1. User Interface Prototyping & Interaction Design
Tammara Combs Turner

2. INFO 440: Information Systems Design
Overview
A little about me (5)
UI Prototyping Basics (15)
Ways to use UI Prototypes (10)
Example (5)
Build your own (10)
Q&A (5)
11/11/2018
INFO 440: Information Systems Design

3. My Background Xavier University of Louisiana
BS in Computer Science
Xavier University of Louisiana
#include <iostream>
using namespace std;
int main() {
long num1 = 0, num2 = 0, num3 = 0, num4 = 0;
num4 = (num1 = 10, num2 = 20, num3 = 30);
cout << endl
<< "The value of a series of expressions "
<< "is the value of the right most: "
<< num4;
cout << endl;
return 0; }
Microsoft Intern – STE Outlook
11/11/2018
INFO 440: Information Systems Design

4. INFO 440: Information Systems Design
Human Computer Interaction Lab – MS in CS (1999)
Microsoft Intern
11/11/2018
INFO 440: Information Systems Design

5. INFO 440: Information Systems Design
Me today
PhD Student 2001 – present
Microsoft 2000 – present
11/11/2018
INFO 440: Information Systems Design

6. INFO 440: Information Systems Design
UI Prototyping
What is it?
Why do it?
When should you do it?
How should you do it?
11/11/2018
INFO 440: Information Systems Design

7. INFO 440: Information Systems Design
What is UI Prototyping?
A model on which something is patterned
A façade
A way to explore ideas before you invest in them
The overall reason to prototype is to save time and resources. The value of the prototype is that it is a façade; it's like a Hollywood set, where only the front of the building is constructed, propped up to look like more than it is. Relative to the real product, prototypes are easy and inexpensive to create. So for a minimal investment, you can find mistakes and adjust your design before you ever begin work on the real product.
11/11/2018
INFO 440: Information Systems Design

8. Why should you prototype?
To save time and resources!
Easy & relatively inexpensive
Helps you find mistakes in the design before development
11/11/2018
INFO 440: Information Systems Design

9. Reasons for prototyping
Proof of concept
To prove that an idea has value
Design Exploration
To solve a specific problem in a product
Technical Exploration
To investigate different coding techniques for implementation
Proof of concept On some teams there are disagreements about the future direction for the project. You can use a prototype to prove that an idea or new approach has merit or value. A prototype can help illustrate that an idea works, express its qualities in a visual and interactive way, or motivate team members to think about the problem from another perspective. Design exploration If you design i nteractive things, the only way to explore how something will be used is to mock it up and interact with it. Sometimes the mock-up is tied to a usability test, where parts of the prototype can be evaluated. Sometimes it's just a way to clearly express to a developer how something should work or look. In many cases it can simply be a designer experimenting, trying things out alone to get a sense for what approach might work. Anyone on the team can use prototypes to explore design issues, although designers often have the strongest skills. Design explorations should be directed at trying to solve specific problems that you've recognized in your product. Technical exploration Developers investigating implementation approaches to a problem often try out different coding techniques to see if they work well. Using COM+, DHTML, Win32, or specific coding approaches within each technology have different tradeoffs. Sometimes a prototype represents an exploration into what technique will work well for a particular feature.
11/11/2018
INFO 440: Information Systems Design

10. When should you prototype?
Early in the planning, design & specification phase of a project before code is written
When tough design & technical issues arise that need to be resolved
When you’re going to break status quo (i.e. consistency is being compromised)
11/11/2018
INFO 440: Information Systems Design

11. How should you prototype?
“build as little of the design as you need and fake the rest”
Invest as little as needed to answer the question
Throw it away when you’re done
Be careful about show an overly elaborate prototype to the people who have to build it.
Of course none of this matters if you’re prototyping for a grade! 
11/11/2018
INFO 440: Information Systems Design

12. Fidelity in Prototyping
Fidelity refers to the level of detail used in a prototype
High fidelity
The look and feel are close to the final product
Low fidelity
Rough, quick, drawings
11/11/2018
INFO 440: Information Systems Design

13. INFO 440: Information Systems Design
Tools & Techniques
Paper Prototypes
Fast with no coding, saves time, throw away; no computer necessary
No subtle interactions; No performance data
Ex. Drawings, screenshots
Electronic/Interactive Prototypes
Captures users’ interactions with UI
Tracks how users actually complete tasks (when multiple ways to do it)
When animation is important for understanding
Ex. HTML, Director/Flash, Visual Basic
11/11/2018
INFO 440: Information Systems Design

14. Other things to remember
Start with an understanding of the problems/needs you’re trying to solve
Decide the scope of your prototype (breadth vs. depth)
Breadth – a little of each feature
Depth – one feature w/all of its options
Make it flexible!
Make one piece of the prototype do lots of things (i.e. built-in option that changes the look/feel of the UI)
11/11/2018
INFO 440: Information Systems Design

15. Ways to use UI Prototypes
As a communications piece
To show core ideas; to tell a story
Solicit user feedback
Higher fidelity prototype to test the concepts & tasks with real end-users
Spec for developers
As a visual spec to help developers w/ the layout of the interface
Investigate detailed interactions
Explore how a person interacts with a small element of the product; the “feel” of the interaction
Solicit user feedback
Are the right things represented in the UI?
Can the user find them?
Can the user use them?
11/11/2018
INFO 440: Information Systems Design

16. INFO 440: Information Systems Design
Build your own
Using PowerPoint build a way for users to access help quickly when using shapes.
Open Visio and show them what I mean.
11/11/2018
INFO 440: Information Systems Design

17. INFO 440: Information Systems Design
Example
PowerPoint prototype of Visio feature
11/11/2018
INFO 440: Information Systems Design

18. < Example Deleted >
11/11/2018
INFO 440: Information Systems Design

19. INFO 440: Information Systems Design
Resources
The Art of UI Prototyping
11/11/2018
INFO 440: Information Systems Design

20. INFO 440: Information Systems Design
Questions?
Tammara Turner
11/11/2018
INFO 440: Information Systems Design