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

D74c365206652832a56fd9ba1fb61d99?s=128

dirtystylus

October 11, 2013
Tweet

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

  20. None
  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

  63. None
  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