Your SlideShare is downloading. ×
0
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
HTML Prototyping - IxDA Presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML Prototyping - IxDA Presentation

244

Published on

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

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

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
244
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTMLPrototypingRobert BastianWeb Developer • Wells Fargo Store Communications
  • 2. • 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
  • 3. • Power of show & tell communication• Reduce misinterpretation• Catch mistakes early• Reduce risk• Save time and moneyWhy 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 interactionsthat 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 youjust do this inHTML?”
  • 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 prototypingworkshop at Interaction 11
  • 15. Case study:Re-designing the Wells Fargo Messenger
  • 16. Case study: WF Messenger• Re-designing legacy communicationsapplication• Existing version: frameset, densely-packed layout, overwhelming• User feedback positive but room forimprovement
  • 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 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
  • 21. Resources• Books• Prototyping: A Practitioners Guide: Todd Zaki Warfel:http://bit.ly/JoxI• Designing Interfaces: Patterns for Effective InteractionDesign: Jenifer Tidwell: http://bit.ly/3FxIe• Web Form Design, Filling in the Blanks: LukeWroblewski: http://bit.ly/dlP5jZ
  • 22. 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
  • 23. Robert Bastianbastianr@wellsfargo.comr.bastian.2@gmail.com

×