HTML Prototyping - IxDA Presentation

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

Robert [email protected]

[email protected]