1. EDUCATIONAL DEVELOPMENT CENTRE

2. Topics for Discussion What is visual course design cuLearn examples
Course branding and consistency
Chunking and simplifying content
Finding, editing and using images to enhance your course
Design with mobile users in mind

3. A good workflow is easy to explain and communicate to others.
The best workflows are those
which require no explanation.
EDUCATIONAL DEVELOPMENT CENTRE

4. Good Course Design is… Functional Intuitive Reliable Accessible
Enjoyable
Engaging
Flexible
Organized
Social
Colourized
Consistent
Branded
Responsive
Graphic/Image rich
60% What Faculty Members Need to Know About Retention: A Magna White Paper

5. User Experience: 7 pillars
Recognition
How does the LMS help the user to instantly know what they are looking at, where they are, and what actions they can take think: theme, process, content?
Access
How does the user access the LMS think: mobile vs. desktop, continuity?

6. User Experience: 7 pillars
Navigation
How does the user get around the LMS think: finding what they want, connections between tasks, easy and intuitiveness of getting around without getting lost, consistency
Consumption
think: When, where, how and why users access and use content?

7. User Experience: 7 pillars
Extraction
think: How do users take the information in the LMS and use it elsewhere – notes, presentations, printouts, etc.?
Communication
think: How does the user get notified, collaborate with others, provide and receive feedback?
Reporting
think: How does the user know how they are doing, their progress?

8. “I love my LMS and it makes it easy for me to learn”.
Said by almost no one.
EDUCATIONAL DEVELOPMENT CENTRE

9. Course Design Is good web design something everyone knows how to do?
What about instructional design?
Who’s job is it?
Does cuLearn foster good design?
Does design get in the way of learning?
How do we improve the student experience?
60% What Faculty Members Need to Know About Retention: A Magna White Paper

10. Layout cuLearn encourages linear learning paths.
Layout defines hierarchy and relationships.
Organization of content
By Week, Topic, Type or Combo

11. cuLearn course design Topics Content Context
Topics
Self contained space to add content and context
Content
Resources and activities (content=food)
Context
Labels and topic descriptions (context =menu)

12. Course Formats Grid Collapsed Topics Tab Topics Social (Blog Style)
Weekly
Highlighted Week

13. Courses
Example Course 3: ELEC
LAWS4904A Fall
ESLA1900A Fall
ENGL4115R5900R WGST4812B 5901C
BOTL
PADM6114F Fall
PADM5714F Fall 2015 and PADM5715F Fall
PSYC1001
COMM1101A Fall
PSYC2400R Winter
BUSI1001

14. Blocks (Almost half the page)
Important Information
Resources
Dates
Twitter
Instructor/TA contact
Custom Menus

15. We need to think more about the cake and less about the icing on the top’ even though it is the icing that attracts you to the cake in the first place.
Baldwin (2004) does argue that ‘the separation of style and content is the next step in the web's evolution, something to which VLEs are ideally suited. We need to think more about the cake and less about the icing on the top’ even though it is the icing that attracts you to the cake in the first place.
EDUCATIONAL DEVELOPMENT CENTRE

16. Simplifying content Less is more Accessibility Manage the view
Chunk content into Books or Lessons.
Accessibility
Post in web friendly format (Pages).
Manage the view
Hide, show and highlight topics and content.
Create custom menus

17. Where to start How will you organize your content?
What colours will you use?
What font and sizes will you use?
What icons/images will you use?
What other media (ex. Videos) will you use?
What will the navigation look like?

18. Images
An image's effectiveness lies in its ability to communicate a message simply.
Drag and Drop
Google
Royalty Free and Public Domain
See resources on support site

19. Free Images (Copyright and $)

20. Image editing pixlr.com/editor or freeonlinephotoeditor.com
Don’t scale up, Do scale down, use correct size
png or jpg

21. HTML is not does not have to be scary
Use sans serif, avoid using all uppercase, don’t use more then 3 sizes

22. Colour – High contrast
color.adobe.com

23. Mobile in Mind 1.5 sessions per month Open 24/7
80% desktop
15% mobile
5% tablet
Open 24/7
Course away from course

24. Don’t Do it Create a glorified file repository or “link farm”
Make a super scrolling page or bury thing too deep
Clutter your course with too many blocks
Flood your course page with graphics
Use too many different colours or fonts
Overdo content and activity names
Be afraid of white space
Forget to have fun with it
EDUCATIONAL DEVELOPMENT CENTRE

25. Take aways Clarity is key, brand your course (style guide), ADd some colour, Add some images, Create a learning pathway, Improve Flexibility
carleton.ca/edc
EDUCATIONAL DEVELOPMENT CENTRE

26. carleton.ca/edc/events/