HTML Prototyping
Robert BastianWeb Developer • Wells Fargo Store Communications
• 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
• Power of show & tell communication
• Reduce misinterpretation
• Catch mistakes early
• Reduce risk
• Save time and money
Why prototype?
Why HTML prototypes?
• Useful through entire development cycle
• Platform-independent, portable
• Self-documenting
• Collaborative
• Modular & reusable
• Cheap
What are they?
• Simulations built with HTML & CSS
• Can also include JavaScript and images
• Standalone interactions/modules
• Pages and sections
• Complete site templates
What are they?
• Lo-fi to Hi-fi
• Approaches
• “Slap & map”
• WYSIWYG-generated
• Hi-fi, production-level HTML
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
Pros
• Provide reality checks:
• Technical feasibility
• Testing at different phases
• Discover problems early
• Feels “real”
Cons
• Need some level of coding proficiency
• Annotation tools not built in
• Need to manage expectations
• Stakeholders, clients
• Developers
Process in context
• Early work, visual design, simple apps
• Discovered web standards: XHTML, CSS, DOM JavaScript
• IA & IX courses at SF State MSP
Process in context
• How to apply education to work
• Selling UX & web standards
• Wireframes and flow diagrams
• Throwaways
• “Just get it done”
“Couldn’t you just do this in
HTML?”
Process in context
• Started making HTML prototypes
• Slow at first
• Gray box technique
• HTML deliverables
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
Case study:Re-designing the Wells Fargo Messenger
Case study: WF Messenger
• Re-designing legacy communications application
• Existing version: frameset, densely-packed layout, overwhelming
• User feedback positive but room for improvement
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
Lessons learned
• Sketches before code
• Iterations, quantity over quality
• Keep code experiments, useful later
• Build pattern library, re-use
Toolbox
• Notebooks and pens
• Dreamweaver
• Firefox / Firebug
• jQuery
• Screen-sharing software
• Digicam / Gorillapod
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
Resources
• Books
• Prototyping: A Practitioner's Guide: Todd Zaki Warfel: http://bit.ly/JoxI
• Designing Interfaces: Patterns for Effective Interaction Design: Jenifer Tidwell: http://bit.ly/3FxIe
• Web Form Design, Filling in the Blanks: Luke Wroblewski: http://bit.ly/dlP5jZ
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