HTML Prototyping - IxDA Presentation
- 1. HTML Prototyping Robert Bastian Web Developer โข Wells Fargo Store Communications
- 2. โข Member of small development team that builds applications for branches and other retail support groups โข Many roles: UX design, visual design, front- and back-end development โข Lead designer for Store Portal, an application used by 80,000 employees in Wells Fargo branches & backshop
- 3. โข Power of show & tell communication โข Reduce misinterpretation โข Catch mistakes early โข Reduce risk โข Save time and money Why 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 donโt have to be disposable โข Reusable code and patterns โข Can simulate & test complex interactions that are impossible with static mockups
- 8. Pros โข Provide reality checks: โข Technical feasibility โข Testing at di๏ฌerent phases โข Discover problems early โข Feels โrealโ
- 9. Cons โข Need some level of coding pro๏ฌciency โข 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. โCouldnโt you just do this in HTML?โ
- 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 prototyping workshop at Interaction 11
- 15. Case study: Re-designing the Wells Fargo Messenger
- 16. Case study: WF Messenger โข Re-designing legacy communications application โข Existing version: frameset, densely- packed layout, overwhelming โข User feedback positive but room for improvement
- 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: http://bit.ly/z8d8n โข Prototyping with XHTML: Anders Ramsay and Leah Buley, Boxes and Arrows: http://bit.ly/yEvOS โข The Power of Prototyping โ An Interview With Todd Zaki Warfel: Vicky Teinaki, Johnny Holland http://bit.ly/ vZdF17
- 21. Resources โข Books โข Prototyping: A Practitioner's Guide: Todd Zaki Warfel: http://bit.ly/JoxI โข Designing Interfaces: Patterns for E๏ฌective Interaction Design: Jenifer Tidwell: http://bit.ly/3FxIe โข Web Form Design, Filling in the Blanks: Luke Wroblewski: http://bit.ly/dlP5jZ
- 22. Resources โข Podcasts โข Radio Johnny: High-Fidelity Prototyping Itโs Easier than you Think: http://bit.ly/zxXiOm โข UIE SpoolCast: Prototyping Experiences: http://bit.ly/ 3LGhcN โข UIE SpoolCast: Nathan Curtis โ From PDFs to HTML Prototypes: http://bit.ly/kDVdk5 โข UIE SpoolCast: Roughing it with Interactive Prototypes: http://bit.ly/dhmwg