Ted O’Meara: UXDDfiles.meetup.com/1397868/Ted-MountainRuby2012.pdfCopyright © 2012 Intridea Inc....

Copyright © 2012 Intridea Inc. All rights reserved. Confidential.

Ted O’Meara: UXDD

User Experience Driven Development

Friday, March 9, 12


UXDD / Intro

User Experience Driven Development

Build for your users, not your tests!

Friday, March 9, 12


UXDD / About Me

Ted O’Meara

Project Manager & User Experience [email protected]@tomeara

Friday, March 9, 12

mailto:[email protected]



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


UXDD / Tests

Everyone <3’s Tests...

So do we!

Friday, March 9, 12


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


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


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


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


UXDD / Architecture / User Flows

Friday, March 9, 12


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


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


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


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


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

http://google.com

http://google.com




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


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




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


UXDD / Future

That’s cool. We’ve seen most of that stuff before. Is there any more to UXDD?

Friday, March 9, 12


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


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

http://jeffkreeftmeijer.com/2011/comparing-images-and-creating-image-diffs/


https://github.com/wvanbergen/chunky_png

https://github.com/wvanbergen/chunky_png


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')


Friday, March 9, 12




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




Thank You

Gracias

ありがとう

Merci

Danke

谢谢

Friday, March 9, 12


Ted O’Meara

@tomeara

[email protected]

www.intridea.com

Friday, March 9, 12



Ted O’Meara: UXDDfiles.meetup.com/1397868/Ted-MountainRuby2012.pdfCopyright © 2012 Intridea Inc....

Documents

Transcript of Ted O’Meara: UXDDfiles.meetup.com/1397868/Ted-MountainRuby2012.pdfCopyright © 2012 Intridea Inc....