Drupaldelphia 2013 - Tyler School of Art: A Case Study in User-Centered Decision-Making

Transcript

1. Tyler School of Art: A Case Study in User-Centered Decision-Making BLUECADET • 1011 N. Hancock Street, Unit 101, Philadelphia, PA 19123 • 267.639.9956 • info@bluecadet.com
2. Rebecca Smith Mark Llobrera, @dirtystylus
3. Tyler School of Art: tyler.temple.edu
4. Accessibility Content Authors Methodology 5 Appeal to your audience
5. Accessibility
6. Who?
7. Why?
8. How?
9. WCAG: Web Content Accessibility Guidelines
10. Color.
11. WCAG standards set a contrast ratio of 4.5:1 for normal text size and 3:1 for large text. Test your hex codes: http://webaim.org/resources/contrastchecker/
12. Every shade counts
13. Get the blues.
14. Blue vs. Red with a Deuteranopia overlay, the most common type of colorblindness. http://colororacle.org/
15. Use your keys, not your mouse.
16. Make sure your hover states are accessible! We used: a :focus pseudo-selector in addition to :hover.
17. Who’s reading your site?
18. What you want: H1 H2 H3 H4 Header Order What you might get: H2 H1 H4 H5 What We Did: modified the templates
19. Read More
21. Integrate Alt Text seamlessly into your admin experience
22. Resources Color Contrast: http://webaim.org/resources/contrastchecker/ http://colororacle.org/ http://www.checkmycolours.com/ Screen Readers: http://webanywhere.cs.washington.edu/wa.php Overall: http://wave.webaim.org/
23. Take it, Mark
24. Section Text AUTHORING SUSTAINABLE CONTENT
25. “Content creators are users too.” -Jared Ponchot (@jponch)
26. Welcome your content author.
27. B A R T I K D E F A U L T
28. T Y L E R : 1 template php le, 2 images, CSS.
29. Give them something to hold onto.
30. M A S O N R Y G R I D : Grid had to accommodate different layouts/priority.
31. D R A G G A B L E V I E W S M O D U L E : Reorder content nodes. (https://drupal.org/project/draggableviews)
32. Lots of similar Content Types vs Few Content Types/too many fields
33. M A S O N R Y G R I D : Lots of different blocks.
34. Filter the noise.
35. C O N D I T I O N A L F I E L D S M O D U L E : Set contextual rules. (https://drupal.org/project/conditional_ elds)
36. C O N D I T I O N A L F I E L D S M O D U L E : Hide elds that don’t relate to the Content Type Category.
37. Nobody likes a long-distance (entity) relationship.
38. Nobody likes a long-distance (entity) relationship.
39. I N L I N E E N T I T Y F O R M M O D U L E : Search, create, edit. (https://drupal.org/project/inline_entity_form)
40. I N L I N E E N T I T Y F O R M M O D U L E : Create.
41. I N L I N E E N T I T Y F O R M M O D U L E : Search.
42. WYSIWYG
43. WYSIWYG (I know, I know.)
44. C K E D I T O R D E F A U L T : (photo: drupal.org)
45. C K E D I T O R P R O F I L E S : Cut out items you don’t need.
46. USER-DRIVEN DECISION-MAKING
47. “You are not your target audience.” -Mackenzie Fogelson (@mackfogelson)
48. “The business buyer, famously, does not care about the user experience. They are not the user, and so items that change how a product feels or that eliminate small annoyances simply don’t make it into their rational decision making process.” -Ben Thompson
49. “The web designer, famously, does not care about the user experience. They are not the user, and so items that change how a site feels or that eliminate small annoyances simply don’t make it into their rational decision making process.”
50. WEEKLY REGROUP: Content author (PM) Designer Developer
51. Don’t forget your fingers.
52. N O T A F I N G E R .
53. F I N G E R . ( p h o t o b y F l i c k r u s e r f r e n c h y , h t t p : / / w w w . f l i c k r . c o m / p h o t o s / f r e n c h y / 5 0 4 7 2 5 1 7 4 3 / i n / p h o t o s t r e a m / )
54. Navigation: prototype build test re-build test … repeat
55. Performance is the next step.
56. P I C T U R E M O D U L E : Serve up lightweight default, enhance to larger images at breakpoints. More info: Marc Drummond talk (https://www.youtube.com/watch?v=Zo_TTvV6DC4)
57. P I C T U R E M O D U L E : Serve up lightweight default, enhance to larger images at breakpoints. (https://drupal.org/project/picture)
58. Expand your content along with your viewport.
59. G R I D / L I S T T O G G L E : Default to list views on smaller screens.
60. G R I D / L I S T T O G G L E : Grids/blocks don’t let you skim as fast.
61. G R I D / L I S T T O G G L E : Blocks breathe easier at wider widths.
62. Testing
64. Devices you have. Shared Device Lab?
65. A D O B E E D G E I N S P E C T : Computer drives, devices follow.
66. i O S S I M U L A T O R : Handy, but remember to get on real devices.
67. Environments
68. Built-in Apache/MySQL on OS X Vagrant Pantheon Acquia
69. THANK YOU ! @bluecadet @dirtystylus BLUECADET • 1011 N. Hancock Street, Unit 101, Philadelphia, PA 19123 • 267.639.9956 • info@bluecadet.com