User Interface Prototyping & Interaction Design

1. User Interface Prototyping & Interaction Design Tammara Combs Turner (tcombs@u.washington.edu)

2. 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) INFO 440: Information Systems Design

3. Xavier University of Louisiana BS in Computer Science 1993-1997 My Background #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 1995-1997 – STE Outlook INFO 440: Information Systems Design

4. Human Computer Interaction Lab – 1997-2000 MS in CS (1999) Microsoft Intern 1997-2000 INFO 440: Information Systems Design

5. Me today PhD Student 2001 – present FTE @ Microsoft 2000 – present INFO 440: Information Systems Design

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

7. What is UI Prototyping? • A model on which something is patterned • A façade • A way to explore ideas before you invest in them 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 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 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) 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. 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 INFO 440: Information Systems Design

13. 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 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) 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 INFO 440: Information Systems Design

16. Build your own • Using PowerPoint build a way for users to access help quickly when using shapes. INFO 440: Information Systems Design

17. Example • PowerPoint prototype of Visio feature INFO 440: Information Systems Design

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

19. Resources • The Art of UI Prototyping http://www.uiweb.com/issues/issue12.htm INFO 440: Information Systems Design

20. Questions? • Tammara Turner tcombs@u.washington.edu INFO 440: Information Systems Design