When Graphic/Website Design Meets Online Course Design Applying graphic/website design principles to an online course Quebec City, E-Learn Cheng-Yuan ‘Corey’ Lee, Ph.D. The University of Findlay, OH

Outline Preface Organization – Course Structure Organization – User Interface Overview Questions & Comments Contact Information Quebec City, E-Learn

Preface: Get to know your students Study alone – they are on their own Scanning / Browsing your course pages The Brain's strengths / capabilities What do these mean to your course design? Quebec City, E-Learn

Where are the lions? Quebec City, E-Learn

Principle # 1 : Organization Organization, Organization, Organization Students’ Satisfaction Help students establish their online learning habits Quebec City, E-Learn

Organization – Course Structure Devising Meaningful Groups Devising a Functional Sequence of Pages Within a Group Devising the Best Possible “Shape”: Balance breadth (within page width or height) and depth (optimal: 3~4) Quebec City, E-Learn

7

8

Organization – User Interface Communicate, don’t decorate Consist Colors / Images / Layout / Font Size Divided Line or Color Text Color: Avoid using underline text in blue. By convention, this means it is a link and clickable. Quebec City, E-Learn

Bad examples Quebec City, E-Learn

Quebec City, E-Learn

Organization – User Interface Effective Links / Navigation buttons ◦ Make Clear “What’s Hot and What’s Not”  Color  Hyperlink Text: click here to download, click here to visit  If links to a file, provide file info - PDF (4.7KB) ◦ Open the website in a separated window if it is outside of the system. ◦ Provide a short description or your expectation of your students Quebec City, E-Learn

Quebec City, E-Learn

Organization – User Interface Hyperlink Format: Convention colors and underline ◦ Link – blue, underline ◦ Mouse over – red, underline ◦ Visited link – purple, underline Be consist throughout your course Quebec City, E-Learn

Overview Organization: Course Structure ◦ Grouping / Sequence / Layout / Breadth and Depth Organization: User Interface ◦ Colors / Graphics / Links Quebec City, E-Learn

Quebec City, E-Learn

Questions & Comments Quebec City, E-Learn

Contact Information Quebec City, E-Learn Cheng-Yuan ‘Corey’ Lee, College of Education The University of Findlay Findlay, OH United States