User Experience Driven Development

Copyright © 2012 Intridea Inc. All rights reserved. Conﬁdential. Ted
O’Meara: UXDD User Experience Driven Development Friday, March 16, 12

Copyright © 2012 Intridea Inc. All rights reserved. Conﬁdential. UXDD
/ Intro User Experience Driven Development Build for your users, not your tests! Friday, March 16, 12

/ About Me Ted O’Meara Project Manager & User Experience Designer [email protected] @tomeara Friday, March 16, 12

/ 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

/ Tests Everyone <3’s Tests... So do we! Friday, March 16, 12

/ Tests ...but sometimes tests don’t work Well, they do work; but they don’t bridge all of the gaps Friday, March 16, 12

/ 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. modiﬁability and extensibility Friday, March 16, 12

/ Tests Bad planning = Bad tests Bad UX Friday, March 16, 12

/ Tests Bad planning = Bad tests Bad UX Bad tests = Bad execution Bad UX Friday, March 16, 12

/ Tests What might be bad UX? Friday, March 16, 12

/ Tests Friday, March 16, 12

/ Workﬂow The UXDD Workﬂow Friday, March 16, 12

/ Tests Planning Friday, March 16, 12

/ 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

/ Planning / User Flows Friday, March 16, 12

/ Planning Wireframes • Visually represent requirements • Understand how the user will encounter the application Friday, March 16, 12

/ Planning / Wireframes Friday, March 16, 12

Copyright © 2012 Intridea Inc. All rights reserved. Conﬁdential. ...or
you could do something like this. UXDD / Planning / Wireframes Friday, March 16, 12

/ 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

/ Planning / User Stories Turn the user into a machine. Think of it as the user and the system should maintain a connection with a speciﬁc protocol. Break it down to elementary school math. Friday, March 16, 12

/ 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

/ Planning / User Stories Friday, March 16, 12

/ Tests Execution Friday, March 16, 12

/ 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

/ 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

/ 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

/ 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

/ 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

/ Execution / Onion Skinning Friday, March 16, 12

/ Future That’s cool. We’ve seen most of that stuff before. Is there any more to UXDD? Friday, March 16, 12

/ 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

/ 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

/ 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

/ 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

User Experience Driven Development

User Experience Driven Development

More Decks by Conferences Box

Other Decks in Technology

Featured

Transcript