User Experience Driven Development

Transcript

1. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. Ted O’Meara: UXDD User Experience Driven Development Friday, March 16, 12
2. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Intro User Experience Driven Development Build for your users, not your tests! Friday, March 16, 12
3. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / About Me Ted O’Meara Project Manager & User Experience Designer ted@intridea.com @tomeara Friday, March 16, 12
4. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Intridea » www.intridea.com • Founded in 2007 in Washington, DC • Clients from coast to coast. • Range from startups to Fortune 500 • 50+ Full-time employees • One of the fastest growing software companies in 2011 - Inc 500 Expertise in: UX/UI Design & Usability, Agile Development, Ruby on Rails, Social Media, Enterprise 2.0/Web 2.0, Mobile Applications, Collaboration Technologies, Corporate Communications, business strategy. Friday, March 16, 12
5. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Tests Everyone <3’s Tests... So do we! Friday, March 16, 12
6. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Tests ...but sometimes tests don’t work Well, they do work; but they don’t bridge all of the gaps Friday, March 16, 12
7. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Tests ...and NO ONE reads this crap a. performance i. time ii. space b. operational environment i. hardware platform ii. software platform iii. external software interoperability c. standards conformance d. general characteristics i. reliability ii. robustness iii. accuracy of data iv. correctness v. security vi. privacy vii.safety viii.portability ix. modifiability and extensibility Friday, March 16, 12
8. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Tests Bad planning = Bad tests Bad UX Friday, March 16, 12
9. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Tests Bad planning = Bad tests Bad UX Bad tests = Bad execution Bad UX Friday, March 16, 12
10. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Tests What might be bad UX? Friday, March 16, 12
11. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Tests Friday, March 16, 12
12. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Workflow The UXDD Workflow Friday, March 16, 12
13. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Tests Planning Friday, March 16, 12
14. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Planning User Flows • Help to build conceptual models of an application • Will help shine light on dead-ends • Allows more insight into how modeled data will be used Friday, March 16, 12
15. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Planning / User Flows Friday, March 16, 12
16. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Planning Wireframes • Visually represent requirements • Understand how the user will encounter the application Friday, March 16, 12
17. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Planning / Wireframes Friday, March 16, 12
18. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. ...or you could do something like this. UXDD / Planning / Wireframes Friday, March 16, 12
19. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Planning User Stories • Cucumber Features • Translates business logic • Creates instructions that a user should follow to obtain a goal • Creates expectations that a system should receive from a user Friday, March 16, 12
20. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Planning / User Stories Turn the user into a machine. Think of it as the user and the system should maintain a connection with a specific protocol. Break it down to elementary school math. Friday, March 16, 12
21. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Planning / User Stories Given that John has 30 pies When he eats 3 of them a day And he eats them for 10 days Then he should not be hungry Friday, March 16, 12
22. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Planning / User Stories Friday, March 16, 12
23. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Tests Execution Friday, March 16, 12
24. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Review UI Breakpoints Time to step away from the console and use Selenium, WATIR, or other browser automation to force yourself to view the UI It does add extra time to your test suite, but totally worth it. Friday, March 16, 12
25. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Review / UI Breakpoints WATIR require "rubygems" require "rspec" require "watir-webdriver" describe "google.com" do let(:browser) { @browser ||= Watir::Browser.new :firefox } before { browser.goto "http://google.com" } after { browser.close } it "should search for watir" do browser.text_field(:name => "q").set "watir" browser.button.click browser.div(:id => "resultStats").wait_until_present browser.title.should == "watir - Google Search" end end http://watir.com/frameworks/ Friday, March 16, 12
26. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Review / UI Breakpoints WATIR require "rubygems" require "rspec" require "watir-webdriver" describe "google.com" do let(:browser) { @browser ||= Watir::Browser.new :firefox } before { browser.goto "http://google.com" } after { browser.close } it "should search for watir" do browser.text_field(:name => "q").set "watir" browser.button.click browser.div(:id => "resultStats").wait_until_present browser.title.should == "watir - Google Search" end end http://watir.com/frameworks/ Friday, March 16, 12
27. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Review Onion Skinning • Overlay a screenshot of the app, with a screenshot of the design • Show inconsistencies of a UI design that may have been overlooked while building a feature Friday, March 16, 12
28. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Review / Onion Skinning GitHub Diffs Pro • Really super, kickass feature Con • Doesn’t really work for our use case • Would have to commit to test https://github.com/cameronmcefee/Image-Diff-View-Modes/ Friday, March 16, 12
29. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Execution / Onion Skinning Photoshop Layers Pro • This is the only real way to check (right now) Con • Photoshop is expensive • Taking screenshots and setting them up is time intensive Friday, March 16, 12
30. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Execution / Onion Skinning Friday, March 16, 12
31. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Future That’s cool. We’ve seen most of that stuff before. Is there any more to UXDD? Friday, March 16, 12
32. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Future What’s Next? • Visual Test Suite w/ WAITR or Selenium • Use Chunky PNG and/or Compatriot as a foundation to build on Friday, March 16, 12
33. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Future Chunky PNG • Inspired by a post from Jeff Kreeftmeijer showing how to create your own GitHub diffs http://jeffkreeftmeijer.com/2011/comparing-images-and-creating-image-diffs/ https://github.com/wvanbergen/chunky_png Friday, March 16, 12
34. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Future Chunky PNG require 'chunky_png' images = [ ChunkyPNG::Image.from_file('1.png'), ChunkyPNG::Image.from_file('2.png') ] diff = [] images.first.height.times do |y| images.first.row(y).each_with_index do |pixel, x| diff << [x,y] unless pixel == images.last[x,y] end end puts "pixels (total): #{images.first.pixels.length}" puts "pixels changed: #{diff.length}" puts "pixels changed (%): #{(diff.length.to_f / images.first.pixels.length) * 100}%" x, y = diff.map{ |xy| xy[0] }, diff.map{ |xy| xy[1] } images.last.rect(x.min, y.min, x.max, y.max, ChunkyPNG::Color.rgb(0,255,0)) images.last.save('diff.png') http://jeffkreeftmeijer.com/2011/comparing-images-and-creating-image-diffs/ Friday, March 16, 12
35. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. UXDD / Future Compatriot • Started by Carol Nichols, Steve Klabnik, etc • Uses Chunky PNG to do crossbrowser testing with Selenium • Could probably be extended to not only test crossbrowser, but also to run UI Design Regression/Acceptance tests. https://github.com/clnclarinet/compatriot Friday, March 16, 12
36. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. Thank You Gracias ͋Γ͕ͱ͏ Merci Danke 谢谢 Friday, March 16, 12
37. Copyright © 2012 Intridea Inc. All rights reserved. Confidential. Ted O’Meara @tomeara ted@intridea.com www.intridea.com Friday, March 16, 12