Prototyping, UI, UX, Security & Personas

1. Prototyping, UI, UX, Security& Personas A little bit of Everything  Nupul Kukreja SupannikaKoolmanojwong 26th September, 2014

2. Agenda • What, Why and How of Prototyping • Types of Prototypes • Tool Demo • User Experience Design • Security Risks for Web Applications • Persona Modeling • Prototyping Workshop

3. “What” is a Prototype? • An early sample, model, or release of a product… • …built to test a concept or process… • …or to act as a thing to be replicated or learned from

4. “Why” Prototype? • Fail early and inexpensively i.e., risk mitigation • Increased user involvement • Gather more accurate requirements • Better understanding of underlying technicalities • Resolve conflicts among stakeholders • Validate if building the right system • Explore feasibility i.e., for estimation and planning

5. “Process” of Prototyping • Identify basic requirements • Develop initial Prototype (whatever that means ) • Review • Revise and Enhance Prototype • Stop. But when?

6. “Dimensions” of Prototypes • Horizontal: • Mile wide inch deep view of system • Good for: • Validating requirements/scope • Demo version to get buy in • Develop preliminary estimates for planning • Vertical: • Complete elaboration of single subsystem or function • Good for: • Detailed requirements for a given function/feature • Address fundamental problems sooner • Deeper understanding of inner working of system

7. “Types” of Prototypes • Throwaway • Evolutionary • Incremental • Extreme Prototyping (for web apps) • Build static HTML Pages • Screens programmed with “simulated” backend services • Program backend services

8. Prototyping Risks • Non-technical Stakeholders: • New way of doing things? • Prototype == Finished System • May think everything is doable • Developers • Over attached to throw-away prototype • Excessive development of prototype • Too involved with “new” prototyping tools

9. “What” to prototype

10. User Interface • For visualizing and validating requirements • Concept Exploration • Static • Screenshots • Wireframes • PowerPoint • Mostly throw away

12. Functionality • “Executable” Prototypes • Vertical prototyping common i.e., implementing a complete use case/state machine etc., • Stubbed services simulating functionality • May or may not evolve to whole system • Includes writing code, quite often • May be quick and dirty • Elucidate complex algorithms

13. “Which” Requirements to Prototype • Highest risk items • NOT the easiest ones first • Login/Logout! • Requirements which the team is most under-confident to deliver! • Use Winbook’s prioritization as guide • High penalty, high business value win conditions • High value MMFs • Not sure how to do it?  Prototype

14. Tools (GUI Prototyping) • iRise • Balsamiq Mockup • IPlotz • FlairBuilder • MockFlow • Pencil Project • Hot Gloo • Cacoo

15. Demo – ui Mockups

16. http://blog.dashburst.com/infographic/ux-101-what-is-user-experience/http://blog.dashburst.com/infographic/ux-101-what-is-user-experience/ User Experience

17. UX/UED: User Experience Design • Focus on usability • Not look-and-feel • Attractiveness can be a part of it • Benefits for a good user experience design • More customers will be willing to purchase • More customers will resist doing business with competitors • More customers will recommend you

18. Great UX/UED

19. UX/UED Best Design Practices • Become your users to know how to design for them. • Design first to avoid leaving user experience to chance. • Trust no one — test to make certain your users are happy. • Inject user experience design into your software development life-cycle (SDLC) process.

22. Security considerations

23. OWASP Top 10 Security Risks • Injection Flaws: Ex.: SQL Injection • Broken Authentication/Session Management • Cross-Site Scripting • Insecure Direct Object Reference • Security “mis”-configuration • Exposing Sensitive Data: Ex.: SSNs etc., • Missing Function Level Access Control • Cross-Site Request Forgery (Man-in-middle) • Using Components with Known Vulnerabilities • Un-validated Redirects and Forwards

24. http://csse.usc.edu:8080/Winbook Winbook case study

25. Personas

26. Personas “Why”? • For most teams gathering user stories should be enough • Persona modeling “may” help elicit additional stories • Only use this if you anticipate a direct, tangible benefit to the project

27. Personas – “What”? • An imaginary representation of a user role • Described in sufficient detail • As if the team “knows” the person • Has a name and lots of background detail • Examples?

29. Soccer mom - Ann Basic Demographic: Age: 34 Occupation: Teacher Hometown: Redmond, WA Marital Status: Married Description Ann is married to Jeff. They have two kids, Michael age 9 and Nicholas age 7. Twice during the week and every Saturday they’re on the sidelines at soccer games and practices • Attributes • Busy • Focused on family • Social Organizer • Goals & Aspirations • Document memories as the kids grow up • Share important moments with the grandparents, aunts, uncles and friends. User Scenario Jeff has a camcorder, but has taken limited pictures of the kids. Jeff doesn’t get to the weekday practices, and sometimes forgets to charge the camcorder before Saturday games. Ann doesn’t know how to use Jeff’s camcorder. Jeff can’t find the cord to connect the camcorder to the computer, so they watch the videos on the small screen of the camcorder itself. • Information Sources • Facebook • 5 minutes for mom website • Local paper • Grey’s anatomy http://www.agilemarketing.net/user-stories-agile-marketing-part-2/

30. http://www.agilemarketing.net/agile-marketing-user-stories/

31. http://becubed.me/2007/06/08/download-an-example-persona-used-in-the-design-of-a-web-application/http://becubed.me/2007/06/08/download-an-example-persona-used-in-the-design-of-a-web-application/ http://blog.ocad.ca/wordpress/gdes1b26-fw2010-19/2011/02/18/exercise-eight-ocad-student-personas/

33. http://www.dylanux.com/case-study-1.shtml#.URVOcaV9Jbo

34. What should you prototype? Prototyping workshop