The Relationship Between User Experience/User Interface, Mobile First Instructional Design, and Digital Accessibility

I frequently received questions about using tables to organize content on web pages or course content pages in an LMS. I also frequently see novice instructional design students do this in order to make content line up for aesthetic purposes. The problem is, if you are not well-versed in HTML coding, and using tools like Bootstrap UI to create engaging, interactive, responsive page elements, then using simple "tricks" like aligning contents with tables, manually formatting text for emphasis, or manually inserting lines on your pages to create visual divisions between content can actually create more problems then they solve!

Insprired by a recent flurry of questions from my ID students, I put together this video to demonstrate what problems you create when you use tables to organize content (among other issues). The key recommendations to optimize course page layout, minimize cognitive overload, and minimize Digital Accessibility issues are:

• Stick to a linear design (to-to-bottom flow) for your content pages.
• Consider how your pages will look and behave on a mobile device. While you may be creating the page using a large, landscape-oriented screen, most users will consume the content on smaller, portrait-orientation devices.
• Avoid using tables to arrange content. Only use tables to present statistical data!
• Avoid using the dash key ("-") to manually create horizontal lines on your pages.
• Avoid adding extra space between content by adding a hard return (<ENTER>).
• Make sure you properly tag text, headings, and images.
• Always test your content on different screen sizes and orientations to see how it displays!

References

Power, R. (2023, February 20). UX and Accessible Course Pages. [video]. https://youtu.be/QEvJ6r1ylDo