ted o’meara: uxddfiles.meetup.com/1397868/ted-mountainruby2012.pdfcopyright © 2012 intridea inc....
Post on 04-Oct-2020
2 Views
Preview:
TRANSCRIPT
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
Ted O’Meara: UXDD
User Experience Driven Development
Friday, March 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / Intro
User Experience Driven Development
Build for your users, not your tests!
Friday, March 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / About Me
Ted O’Meara
Project Manager & User Experience Designerted@intridea.com@tomeara
Friday, March 9, 12
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 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / Tests
Everyone <3’s Tests...
So do we!
Friday, March 9, 12
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 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / Tests
...and NO ONE reads this crapa. performance
i. timeii. space
b. operational environmenti. hardware platformii. software platformiii. external software interoperability
c. standards conformanced. general characteristics
i. reliabilityii. robustnessiii. accuracy of dataiv. correctnessv. securityvi. privacyvii.safetyviii.portabilityix. modifiability and extensibility
Friday, March 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / Tests
...and NO ONE reads this crapa. performance
i. timeii. space
b. operational environmenti. hardware platformii. software platformiii. external software interoperability
c. standards conformanced. general characteristics
i. reliabilityii. robustnessiii. accuracy of dataiv. correctnessv. securityvi. privacyvii.safetyviii.portabilityix. modifiability and extensibility
This type of requirements analysis blows.
Friday, March 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / Architecture
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 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / Architecture / User Flows
Friday, March 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / Architecture
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 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / Architecture / 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 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / Architecture / User Stories
Given that John has 30 piesWhen he eats 3 of them a dayAnd he eats them for 10 daysThen he should not be hungry
...but he might gain 50 lbs.
Friday, March 9, 12
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 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / Review / UI Breakpoints
WATIRrequire "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" endend
http://watir.com/frameworks/
Friday, March 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / Review / UI Breakpoints
WATIRrequire "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" endend
http://watir.com/frameworks/
Friday, March 9, 12
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 9, 12
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 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / Review / 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 istime intensive
Friday, March 9, 12
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 9, 12
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 9, 12
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 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / Future
Chunky PNGrequire '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] endend
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 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
UXDD / Future
Compatriot
• Started by Carol Nichols • Uses Chunky PNG to do crossbrowser testing with Selenium• Could probably be extended to not only test crossbrowser, but also to run “UI Design Acceptance” tests.
https://github.com/clnclarinet/compatriot
Friday, March 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
Thank You
Gracias
ありがとう
Merci
Danke
谢谢
Friday, March 9, 12
Copyright © 2012 Intridea Inc. All rights reserved. Confidential.
Ted O’Meara
@tomeara
ted@intridea.com
www.intridea.com
Friday, March 9, 12
top related