Transcript of "HTML Prototyping - IxDA Presentation"
HTMLPrototypingRobert BastianWeb Developer • Wells Fargo Store Communications
• 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
• Power of show & tell communication• Reduce misinterpretation• Catch mistakes early• Reduce risk• Save time and moneyWhy prototype?
Why HTML prototypes?• Useful through entire development cycle• Platform-independent, portable• Self-documenting• Collaborative• Modular & reusable• Cheap
What are they?• Lo-ﬁ to Hi-ﬁ• Approaches• “Slap & map”• WYSIWYG-generated• Hi-ﬁ, 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 interactionsthat are impossible with static mockups
Pros• Provide reality checks:• Technical feasibility• Testing at diﬀerent phases• Discover problems early• Feels “real”
Cons• Need some level of coding proﬁciency• Annotation tools not built in• Need to manage expectations• Stakeholders, clients• Developers
Process in context• How to apply education to work• Selling UX & web standards• Wireframes and ﬂow diagrams• Throwaways• “Just get it done”
Process in context• Started making HTML prototypes• Slow at ﬁrst• 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 prototypingworkshop at Interaction 11
Case study:Re-designing the Wells Fargo Messenger
Case study: WF Messenger• Re-designing legacy communicationsapplication• Existing version: frameset, densely-packed layout, overwhelming• User feedback positive but room forimprovement
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
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 LeahBuley, Boxes and Arrows: http://bit.ly/yEvOS• The Power of Prototyping – An Interview With Todd ZakiWarfel: Vicky Teinaki, Johnny Holland http://bit.ly/vZdF17
Resources• Books• Prototyping: A Practitioners Guide: Todd Zaki Warfel:http://bit.ly/JoxI• Designing Interfaces: Patterns for Eﬀective InteractionDesign: Jenifer Tidwell: http://bit.ly/3FxIe• Web Form Design, Filling in the Blanks: LukeWroblewski: http://bit.ly/dlP5jZ
Resources• Podcasts• Radio Johnny: High-Fidelity Prototyping It’s Easier thanyou Think: http://bit.ly/zxXiOm• UIE SpoolCast: Prototyping Experiences: http://bit.ly/3LGhcN• UIE SpoolCast: Nathan Curtis – From PDFs to HTMLPrototypes: http://bit.ly/kDVdk5• UIE SpoolCast: Roughing it with Interactive Prototypes:http://bit.ly/dhmwg
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.