SCS6079 Digital Practices MA Digital Media & Society

workshop 5 icon week 6: Inclusive design for UX

  1. accessibility and UX
  2. testing and user feedback
  3. effective enhancements

accessibility and UX

Accessibility

illustration of content flow
notes
  • accessibility often associated with physically obvious impairments which does not cover the full spectrum
  • abilities or disabilities are more complex and nuanced, they can also be temporary as well as permanent
  • ensuring easy use of alternative devices/apps will benefit all site visitors equally
accessibility needs for physical disability accessibility needs for sensory disability accessibility needs for cognitive disability

Reminders

User Experience (UX)

accessibility needs for cognitive disability
notes
  • user experience builds on the foundation of accessible design, adding more depth
  • consideration of the complexities of people and their current situations
  • research and user testing to guide UX design
  • good UX will mean a pleasurable experience, meeting the needs of target group
  • recurring cycle of work for best results: test - review - iterate

testing and user feedback

Considering people and situations

Design for real life, eric meyer

testing

variant validation

effective enhancements

plugin questions
  • which enhancements are suitable?
  • is it compatible with my version of WordPress?
  • how recent was the latest update?
recommended plugins
questionmarks filled with words

Don Norman: 3 Ways good design makes you happy

Photo editing

image sources

NOTE: the background image here serves as demo of how details of photos can interfere with the reading of content. Be careful when working with text on top of images.

Workshop task

To practice adding content to your site, create a new post to feature both images and text. This could become part of your final site, or be removed after completion ~ entirely up to you :)

your story

Write a short passage of text to tell your story (e.g. why you chose to come to Sheffield for study / why you are doing this MA / why you selected your chosen brief) and add some fitting images. Experiment with typesetting and layout — please ask as many questions as you can!

For the sake of time, choose one of the photos from Wikimedia Commons and work on optimising the file for the web: checking image size/ratio and compressing for smaller file size. Focus on good structure of content, add subheadings as fitting and experiment with the layout and presentation of the images.

to-do list
  1. write your story
    2-3 paragraphs or more
  2. edit the text for easy reading
    focus on short sentences and add subheadings as fitting
  3. select fitting image/s and optimise for web
    edit your chosen images by cropping to size and saving the file for web (you can use one of the online image editors mentioned above for editing)
  4. add optimised images to your text
    experiment with file sizes, alignment to text and aim for an effective layout of all content
  5. publish your final article
    publish the completed article to your site.
    (You can of course remove or edit this when you complete your project website with your final content.)

content curated / created © Prisca Schmarsow | eyedea studio london | 2017