eyelearn.org

digital practices

inclusive design for UX

wordpress with pen DEC 4th 2020 WEEK 6
  1. accessibility & UX
  2. testing and user feedback
  3. site maintenance & backup
download notes as PDF

TALK: inclusive design for UX

date DEC 4th 2020
time 8:00-9:00 BST

WORKSHOPS: site planning

view group list [PDF]
  1. GROUP 1 : 9:30 - 10:30 BST
  2. GROUP 2 : 10:30 - 11:30 BST
  3. GROUP 3 : 12:00 - 13:00 BST
  4. GROUP 4 : 13:00 - 14:00 BST
  5. open session : 14:00 - 15:00 BST
download slides
opening slide
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week
text: this week

inclusive design design for everyone

illustration of diasabilities + people

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
illustration of keyboard tab key

Ensure access to functions via keyboard - test by using tab key to navigate site

illustration of sensory alternatives

Provide captions/transcripts for visual/audio content - provide text alternatives for images

illustration of sensory alternatives

Add alternative versions of content - use visuals/icons and text in combination

Reminders

image edit process
illustration of sensory alternatives

user centred design design for delight

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

Content out for a better site and theme preview

illustration of sensory alternatives

A quick reminder on why the content out approach will yield the best results:

By using a CMS (content management system), i.e. WordPress, all additions of content (text/images) are uploaded and added to the database. This means your content is the foundation of the site and remains untouched by any visual presentation. Once in the database, you are free to edit/remove any content - and you can control what is visible on the site (via publish) and what is not (draft).

Remember that before you can preview a theme and see it in its full glory, your site has to have published content. Only with published content and fitting settings for layout and menu will you be able to make a choice.

Working with themes & mindful choices for more than just aesthetics.

illustration of sensory alternatives

starting points

  • content first!!
    add your actual content to your website, neatly organising your posts into categories as you publish them.
    NOTE: without content there'll be little to preview and you will not be able to judge whether a theme would work or not.
  • understand layout options via blocks
    before you even begin to look at themes or plugins, experiment with the given options in the editor to create your layouts and format your content. Much can be achieved without the use of specific themes or plugins.
  • choose wisely!
    browse your options and preview them without installing them first. Read the info and check on any requirements listed. Stay focused on your site's requirements and don't let the 'shiny shiny' distract you from your mission!
    CAUTION: avoid any themes that require additional plugins to be installed. They will likely be poorly configured and heavy/slow loading.
  • understand your chosen theme's settings
    before you even begin to look at themes or plugins, experiment with the given options in the editor to create your layouts and format your content. Much can be achieved without the use of specific themes or plugins.

questions to ask

  • what kind of design will present an effective website and appeal to your target group?
  • which content elements (if any) require bespoke presentation, e.g. photo with caption?
  • what kind of typesetting will work best?
  • which colour scheme is fitting context and audience? Does the theme include these options?

points for consideration

  • target group, their browsing habits and likes/dislikes
  • quantity and structure of content
  • final site plan with clear sections / sub-sections
  • media types: images / video / audio / supplementary downloads

related reading

Useful links & themes & royalty-free image libraries

Theme offerings

Don Norman: 3 Ways good design makes you happy

footnotes

One way to make your content more accessible is to add footnotes to explain complex or jargon terms, acronyms or abbreviations. See this example which uses parenthesis to define 'CMS' within a sentence (this will work with the EasyFootnotes plugin).

WordPress is a very popular CMS (( Content Management System )).

Presentation of footnotes will be automatic when published. The text inside the pair of double parenthesis (( ... )) is then presented below the content, shown as numbered list of linked notes.

to-do list

  1. complete 'about' page
    review your current text drafts and edits and decide on final tone of language
  2. add optimised images to your content
    experiment and practice editing and optimising your images
  3. check text alternatives
    explore the media library and its settings, checking that all your uploaded images have set alternative text
  4. plan your references and credits
    For your final site, any externally sourced content (such as images) has to reference its source and credit the original creator. This could be done via footnotes, or published as separate page.

NOTE: this a super-quick fly-by demo with no audio; it is intended to be paused as needed (hit SPACE bar or use controls).

Referencing with Footnotes Made Easy plugin

Content audit

Today, DEC 4th 2020, is the deadline for confirming your brief and you will hopefully be already working on your content. Time to review your plans and your content so far. Keep in mind your users and your site's aim and make notes for revision and edits.

your message - your mission

Write up an email and confirm your brief choice, submitting your self-written brief proposal to me.

to-do list

  1. finalise your site plan
    review your mind map, decide on your final content structure
  2. check your notes and content
    focus on the mission of your website and keep in mind your target group
  3. continue work on content production
    write/edit/review your content text and media, check on accessibility aspects, such as the alt text
  4. email Prisca*
    submit brief proposal /or/ confirm your choice of given brief