Touch Football

Rebuilding Yahoo Fantasy Football for the Modern Web

Transcript

1. Touch Football Rebuilding Yahoo Fantasy Football for the Modern Web Sunday, November 10, 13 We launched a major redesign of Fantasy Football this year (2013), so here are some of the lessons learned on that project, and some of the ways we used YUI. I know my last talk was about rebuilding Fantasy Football for touch devices, but I promise it’s all new content, though it’s fair to say...
2. Sunday, November 10, 13 ... I am the “Fast and Furious” of tech conference speakers.
3. 1. Goals 2. Delegating, Tapping, Confessing 3. Keyboard Accessibility 4. Raves vs. Clown Socks (or: I Go Insane) 5. Questions Sunday, November 10, 13
4. Goals Sunday, November 10, 13
5. Great on all three screens But... I thought it already did. Sunday, November 10, 13 We wanted to make Fantasy Football work on all three screens: Desktop, tablet and phones... But didn’t we do that already. Well not really, we got was...
6. It “works” on touch devices Sunday, November 10, 13 Something that just “works” on touch devices.
7. Chapter 5: Sunday, November 10, 13 Here’s a few slides from my last talk to illustrate the problems we had.
8. scroll gesture Sunday, November 10, 13 Scroll if the user’s finger doesn’t pause while moving (“doesn’t pause” means a touchmove event within 25ms of touchstart. You have to allow for a tiny bit of pausing. 25ms isn’t set in stone, but it seemed to work the best in informal testing).
9. dragging gesture PAUSE FOR AT LEAST 25ms Sunday, November 10, 13 We only allow the drag to start if you pause for at least 25ms. So we’re using tiny, subtle variances in user action to determine user intent, which is pretty close to mind reading. Actually, technically it’s a variation on “cold-reading”. But it’s imperfect at best...
10. finger tip 4: Reduce frustration with E.S.P. Eliminate frustration with great UI. Sunday, November 10, 13 ... much better is to have a UI that doesn’t require psychic powers, by clearly indicating to the user what areas they can expect drag interactions to occur, and what areas they can expect scroll interactions to occur.
11. ESP is for chumps Sunday, November 10, 13 This year we wanted to skip the ESP and go straight for Great UI.
12. It “works” on touch devices Sunday, November 10, 13 So let’s change this...
13. It works. Sunday, November 10, 13 ... to this.
14. example #1 what we came up with Sunday, November 10, 13 We replaced Drag and Drop, which confuses the drag action with the scroll action on touch devices
15. example #2 alternatives Sunday, November 10, 13 We had other alternative input methods too, something made easy with YUI’s attributes and YUI’s modular approach to building web apps.
16. example #3 tap vs. click Sunday, November 10, 13
17. this._handlers.rowtap = table.delegate( "rosterswapper|click", this.handleRowTap, "tbody tr.editable", null, this ); Sunday, November 10, 13 For performance, we delegated nearly everything. The result is a roster that initializes practically instantly. When cached, it can initialize in under 100ms, below the threshold of perceptibility.
18. this._handlers.rowtap = table.delegate( "rosterswapper|click", this.handleRowTap, "tbody tr.editable", null, this ); Sunday, November 10, 13 But notice the “click”? That’s not good for touch devices, it forces a 500ms delay between the user’s action and the result, way too long.
19. this._handlers.rowtap = table.delegate( "rosterswapper|tap", this.handleRowTap, "tbody tr.editable", null, this ); way better! Sunday, November 10, 13 So use “tap” instead of “click” wherever you can (basically wherever you don’t need to worry about users double-tapping to zoom in).
20. It works for everyone. Sunday, November 10, 13 Our old Drag and Drop rosters had very poor keyboard support. Our new rosters have great keyboard support
21. example #4 keyboard accessibility Sunday, November 10, 13 You can use the tab key, or the up and down arrows to select rows, the enter key to activate it, arrows or tabs to select destinations, and you can esc out of the interaction.
22. this._handlers.rowenter = table.delegate( "rosterswapper|key", this.handleRowKey, "enter,38,40,tab,esc", "tbody tr.editable", null, this ); Sunday, November 10, 13 Adding key support is easy: Just declare the keys you’re listening for (note: like everything else, you can delegate keyboard support)
23. this._handlers.rowenter = table.delegate( "rosterswapper|key", this.handleRowKey, "enter,38,40,tab,esc", "tbody tr.editable", null, this ); Sunday, November 10, 13 Here’s how you declare which key’s you’re listening for
24. // allow user to esc out of editing mode if(e.keyCode === 27) { if(self.isEditing()) { if(self.get("swapmethod") === "place") { self.exitPlaceEditMode(); } else { self.exitEditMode(); } } return; } Sunday, November 10, 13 And here’s an example of using them in action. In this case, this is using the esc key to exit the interaction.
25. The Firefox Thing A story where I go insane Sunday, November 10, 13 So we had a lot of complaints about poor scrolling performance in Firefox.
26. Guideline Don’t use fixed position backgrounds! Sunday, November 10, 13 I figured I knew the issue, it’s the fixed position backgrounds. That’s a guideline, right? Well, wrong, but before we get into that, time for a quiz. Oh, and I’m going to sound insane asking you this question:
27. What’s better? A.Clown Socks B.Raves C.None of the Above? Sunday, November 10, 13
28. #clownsocks Sunday, November 10, 13 The correct answer is clown socks. Tweet it. #clownsocks
29. Example #5 Clown Socks Sunday, November 10, 13
30. This shows paint rectangles in Firefox’s developer tools. It’s awesome. Sunday, November 10, 13 This shows paint rectangles in Firefox’s developer tools. It’s awesome.
31. You want to see this “clown socks” when you scroll, it means it’s only repainting new content. Sunday, November 10, 13
32. Example #6 Rave on Fantasy Football Sunday, November 10, 13
33. But we were getting the flashing, colored strobe- light “rave”, which means it’s re-painting every module over and over while scrolling Sunday, November 10, 13
34. Example #7 Rave on Yahoo Sports... or is it? Sunday, November 10, 13 But the non-fantasy site wasn’t getting a rave, and they had fixed position backgrounds too. How come?
35. Guideline Don’t use fixed position backgrounds? Sunday, November 10, 13 Wait, so what’s the guideline now?
36. Example #8 #clownsocks on Fantasy Football Sunday, November 10, 13
37. By removing the fixed-position backgrounds on the modules, and leaving the page’s fixed-position background, we got our clown socks back. Sunday, November 10, 13
38. Guideline Don’t follow guidelines. Sunday, November 10, 13 Guidelines are a relic of an earlier web. The modern web has modern browsers with modern tools.
39. Other Tools FPS Meter on Chrome Chrome Paint Rectangles Continuous Repainting Frame Profiling Secret Firefox FPS Meter! Sunday, November 10, 13 Tools such as these. BTW, the secret Firefox FPS meter is layers.acceleration.draw-fps in about:config.
40. Guideline Don’t follow guidelines, follow measurements. Sunday, November 10, 13 So those rules of thumb about how to optimize page speed? Throw a lot of them out, and use the browser’s tools to find out where your page might be having problems.
41. We are SO hiring! This is a great team, please consider joining us Sunday, November 10, 13 We’re hiring. Email sportsjobs@yahoo-inc.com, and mention me. I’m Mark.
42. thanks Sunday, November 10, 13