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

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-fi to Hi-fi
• Approaches
• “Slap & map”
• WYSIWYG-generated
• Hi-fi, 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 different phases
• Discover problems early
• Feels “real”

9. Cons
• Need some level of coding proficiency
• 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 flow 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 first
• 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 Effective 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

23. Robert Bastian
bastianr@wellsfargo.com
r.bastian.2@gmail.com