HTML Prototyping - IxDA Presentation

  • Published on

  • View

  • Download

Embed Size (px)


Presentation by Robert Bastian at IxDA Twin Cities Web Prototyping Expo, February 16, 2012, hosted by The Nerdery.


  • 1. HTMLPrototypingRobert BastianWeb Developer Wells Fargo Store Communications

2. Member of small development team thatbuilds applications for branches andother retail support groups Many roles: UX design, visual design,front- and back-end development Lead designer for Store Portal, anapplication used by 80,000 employees inWells Fargo branches & backshop 3. Power of show & tell communication Reduce misinterpretation Catch mistakes early Reduce risk Save time and moneyWhy prototype? 4. Why HTML prototypes? Useful through entire development cycle Platform-independent, portable Self-documenting Collaborative Modular & reusable Cheap 5. What are they? Simulations built with HTML & CSS Can also include JavaScript and images Standalone interactions/modules Pages and sections Complete site templates 6. What are they? Lo- to Hi- Approaches Slap & map WYSIWYG-generated Hi-, production-level HTML 7. Pros Expensive tools not required Easy to share and review with anyone Deliverables dont have to be disposable Reusable code and patterns Can simulate & test complex interactionsthat are impossible with static mockups 8. Pros Provide reality checks: Technical feasibility Testing at dierent phases Discover problems early Feels real 9. Cons Need some level of coding prociency Annotation tools not built in Need to manage expectations Stakeholders, clients Developers 10. Process in context Early work, visual design, simple apps Discovered web standards:XHTML, CSS, DOM JavaScript IA & IX courses at SF State MSP 11. Process in context How to apply education to work Selling UX & web standards Wireframes and ow diagrams Throwaways Just get it done 12. Couldnt youjust do this inHTML? 13. Process in context Started making HTML prototypes Slow at rst Gray box technique HTML deliverables 14. Process in context Collaboration on portlets Early portlets, usability issues Success using HTML prototypes Validation of techniques Found articles, podcasts Attended HTML prototypingworkshop at Interaction 11 15. Case study:Re-designing the Wells Fargo Messenger 16. Case study: WF Messenger Re-designing legacy communicationsapplication Existing version: frameset, densely-packed layout, overwhelming User feedback positive but room forimprovement 17. Case study: WF Messenger Re-design goals Reduce crowding Make main content more visible Make content easier to scan Prototypes, Round 1 3 rounds of prototypes, user testing 18. Lessons learned Sketches before code Iterations, quantity over quality Keep code experiments, useful later Build pattern library, re-use 19. Toolbox Notebooks and pens Dreamweaver Firefox / Firebug jQuery Screen-sharing software Digicam / Gorillapod 20. Resources Articles Just Build It: HTML Prototyping and Agile Development:Garrett Dimon, Digital Web Magazine: Prototyping with XHTML: Anders Ramsay and LeahBuley, Boxes and Arrows: The Power of Prototyping An Interview With Todd ZakiWarfel: Vicky Teinaki, Johnny Holland 21. Resources Books Prototyping: A Practitioners Guide: Todd Zaki Warfel: Designing Interfaces: Patterns for Eective InteractionDesign: Jenifer Tidwell: Web Form Design, Filling in the Blanks: LukeWroblewski: 22. Resources Podcasts Radio Johnny: High-Fidelity Prototyping Its Easier thanyou Think: UIE SpoolCast: Prototyping Experiences: UIE SpoolCast: Nathan Curtis From PDFs to HTMLPrototypes: UIE SpoolCast: Roughing it with Interactive Prototypes: 23. Robert