Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

dirtystylus

October 11, 2013
Tweet

More Decks by dirtystylus

Other Decks in Programming

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 • [email protected]

    View Slide

  2. Rebecca Smith
    Mark Llobrera, @dirtystylus

    View Slide

  3. Tyler School of Art: tyler.temple.edu

    View Slide

  4. Accessibility
    Content Authors
    Methodology
    5 Appeal to your audience

    View Slide

  5. Accessibility

    View Slide

  6. Who?

    View Slide

  7. Why?

    View Slide

  8. How?

    View Slide

  9. WCAG: Web Content
    Accessibility Guidelines

    View Slide

  10. Color.

    View Slide

  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/

    View Slide

  12. Every shade counts

    View Slide

  13. Get the blues.

    View Slide

  14. Blue vs. Red with a Deuteranopia overlay, the most common type of colorblindness.
    http://colororacle.org/

    View Slide

  15. Use your keys, not your mouse.

    View Slide

  16. Make sure your hover states are accessible!
    We used: a :focus pseudo-selector in addition to :hover.

    View Slide

  17. Who’s reading your site?

    View Slide

  18. What you want:
    H1
    H2
    H3
    H4
    Header Order
    What you might get:
    H2
    H1
    H4
    H5
    What We Did: modified the templates

    View Slide

  19. Read More

    View Slide

  20. View Slide

  21. Integrate Alt Text seamlessly into your admin experience

    View Slide

  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/

    View Slide

  23. Take it, Mark

    View Slide

  24. Section Text
    AUTHORING
    SUSTAINABLE CONTENT

    View Slide

  25. “Content creators are users too.”
    -Jared Ponchot (@jponch)

    View Slide

  26. Welcome your content author.

    View Slide

  27. B A R T I K D E F A U L T

    View Slide

  28. T Y L E R : 1 template php le, 2 images, CSS.

    View Slide

  29. Give them something to hold onto.

    View Slide

  30. M A S O N R Y G R I D : Grid had to accommodate different layouts/priority.

    View Slide

  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)

    View Slide

  32. Lots of similar Content Types
    vs
    Few Content Types/too many fields

    View Slide

  33. M A S O N R Y G R I D : Lots of different blocks.

    View Slide

  34. Filter the noise.

    View Slide

  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)

    View Slide

  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.

    View Slide

  37. Nobody likes a long-distance
    (entity) relationship.

    View Slide

  38. Nobody likes a long-distance
    (entity) relationship.

    View Slide

  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)

    View Slide

  40. I N L I N E E N T I T Y F O R M M O D U L E : Create.

    View Slide

  41. I N L I N E E N T I T Y F O R M M O D U L E : Search.

    View Slide

  42. WYSIWYG

    View Slide

  43. WYSIWYG
    (I know, I know.)

    View Slide

  44. C K E D I T O R D E F A U L T : (photo: drupal.org)

    View Slide

  45. C K E D I T O R P R O F I L E S : Cut out items you don’t need.

    View Slide

  46. USER-DRIVEN
    DECISION-MAKING

    View Slide

  47. “You are not your target audience.”
    -Mackenzie Fogelson (@mackfogelson)

    View Slide

  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

    View Slide

  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.”

    View Slide

  50. WEEKLY REGROUP:
    Content author (PM)
    Designer
    Developer

    View Slide

  51. Don’t forget your fingers.

    View Slide

  52. N O T A F I N G E R .

    View Slide

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

    View Slide

  54. Navigation:
    prototype
    build
    test
    re-build
    test

    repeat

    View Slide

  55. Performance is the next step.

    View Slide

  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)

    View Slide

  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)

    View Slide

  58. Expand your content along with
    your viewport.

    View Slide

  59. G R I D / L I S T T O G G L E : Default to list views on smaller screens.

    View Slide

  60. G R I D / L I S T T O G G L E : Grids/blocks don’t let you skim as fast.

    View Slide

  61. G R I D / L I S T T O G G L E : Blocks breathe easier at wider widths.

    View Slide

  62. Testing

    View Slide

  63. View Slide

  64. Devices you have.
    Shared Device Lab?

    View Slide

  65. A D O B E E D G E I N S P E C T : Computer drives, devices follow.

    View Slide

  66. i O S S I M U L A T O R : Handy, but remember to get on real devices.

    View Slide

  67. Environments

    View Slide

  68. Built-in Apache/MySQL on OS X
    Vagrant
    Pantheon
    Acquia

    View Slide

  69. THANK YOU !
    @bluecadet
    @dirtystylus
    BLUECADET • 1011 N. Hancock Street, Unit 101, Philadelphia, PA 19123 • 267.639.9956 • [email protected]

    View Slide