prototyping, ui, ux, security & personas a little bit of everything nupul kukreja supannika...
TRANSCRIPT
Prototyping, UI, UX, Security& Personas
A little bit of Everything Nupul Kukreja
Supannika Koolmanojwong26th September, 2014
Agenda• What, Why and How of Prototyping• Types of Prototypes• Tool Demo• User Experience Design• Security Risks for Web Applications• Persona Modeling • Prototyping Workshop
“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
“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
“Process” of Prototyping1. Identify basic requirements2. Develop initial Prototype (whatever that
means )3. Review4. Revise and Enhance Prototype5. Stop. But when?
“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
“Types” of Prototypes• Throwaway• Evolutionary• Incremental• Extreme Prototyping (for web apps)
1. Build static HTML Pages2. Screens programmed with “simulated” backend
services3. Program backend services
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
“WHAT” TO PROTOTYPE
1. User Interface• For visualizing and validating requirements• Concept Exploration• Static – Screenshots– Wireframes– PowerPoint
• Mostly throw away
2. 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
“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
Tools (GUI Prototyping)• iRise• Balsamiq Mockup• IPlotz • FlairBuilder• MockFlow• Pencil Project• Hot Gloo• Cacoo
DEMO – UI MOCKUPS
USER EXPERIENCEhttp://blog.dashburst.com/infographic/ux-101-what-is-user-experience/
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
Great UX/UED
UX/UED Best Design Practices1. Become your users to know how to design
for them.2. Design first to avoid leaving user experience
to chance.3. Trust no one — test to make certain your
users are happy.4. Inject user experience design into your
software development life-cycle (SDLC) process.
SECURITY CONSIDERATIONS
OWASP Top 10 Security Risks1. Injection Flaws: Ex.: SQL Injection2. Broken Authentication/Session Management3. Cross-Site Scripting4. Insecure Direct Object Reference5. Security “mis”-configuration6. Exposing Sensitive Data: Ex.: SSNs etc.,7. Missing Function Level Access Control8. Cross-Site Request Forgery (Man-in-middle)9. Using Components with Known Vulnerabilities10.Un-validated Redirects and Forwards
WINBOOK CASE STUDYhttp://csse.usc.edu:8080/Winbook
PERSONAS
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
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: 34Occupation: TeacherHometown: Redmond, WAMarital Status: Married
Attributes-Busy-Focused on family-Social Organizer
DescriptionAnn 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
User ScenarioJeff 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.
Goals & Aspirations-Document memories as the kids grow up-Share important moments with the grandparents, aunts, uncles and friends.
Information Sources-Facebook-5 minutes for mom website-Local paper-Grey’s anatomy
http://www.agilemarketing.net/user-stories-agile-marketing-part-2/
30http://www.agilemarketing.net/agile-marketing-user-stories/
31http://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/
32
33http://www.dylanux.com/case-study-1.shtml#.URVOcaV9Jbo
PROTOTYPING WORKSHOPWhat should you prototype?