This document discusses the declining importance of home pages and introduces cards as a guiding metaphor for course site design. It explains that course sites should feature multiple "cards" on the home page to present and highlight different parts of a course. It demonstrates how to add a card and what happens when a card is deleted. It also outlines general rules for interacting with cards and proposes that the card interface should treat each widget independently while allowing re-arrangement and optimizing layout based on screen width.

1. The home page is dead
Long live the home page
By Derek Moore

2. “Exemplary Courses”
School of Literature and Language Studies
SLLS4034 - Journalism Studies A2013 Anton Harber
School of Mechanical, Industrial & Aeronautical Engineering
MECN2012 Randall paton
School of electrical engineering Thomas Blaser
ELEN4007 - Engineer in Society2013
School of Chemical and Metallurgical Engineering
Chem & Met Eng POSTGRADS Kevin Harding
School of economic and business sciences
BUSE2002 - Human Resources IIA2013 Althea Jansen
INFO3002 Ernest Skinner
School of education
EDUC2194_2013 Daniel Lefoka
EDUC4144_2013_Modern Physics Emmanuel Mushayikwa
WSOA5038_2013 Avril Jofee
WITS School of Arts
DRAA4084 -Film and Television Production IVA2013 Eran Tahor

6. Entering in the side door
• What percentage of traffic comes via
– Search engines, e-mail, announcements
– Social Media
– Home Page

7. presentations
guest speaker
f2f element
readings
online quizzes
assignment submission
(dropbox)
online element
Course Site
Home page

8. Cards as a guiding metaphor

9. Home Page Cards
Present and highlight multiple
parts of your course on the
home page.
Press Add+ to get started
Trigger

10. Response

11. Feedback
Rules
1) I click add +
2) Fill in the heading and select the type of card
3) Press submit
Then a new card appears

12. Trigger> Response > Feedback
Let me repeat the pattern

13. I can follow use these rules repeatedly
and another card type appears

14. Trigger:
What happens if I
click on the cross

15. Response

16. Feedback:
The card disappears
when I confirm my
decision

17. Rules
1) I click X
2) I’m asked to confirm
3) When I confirm the card disappears
4) And the cards are re-arranged

18. Trigger - An onscreen event that triggers the interaction
Response - The users response to the trigger
Feedback - The reaction of the computer to the users response
Rules - The generalised rules developed by the user to explain this interaction

19. The interface should
1) Treat each widget independently, but be consistent
2) Allow the user to re-arrange the page, but also rearrange automatically
3) Optimise the layout according to the screen width

20. http://dropthings.omaralzabir.com/?Widget_to_Widget
WIDGET
Each of the cards are
independent of each other but
same rules apply to each block

21. http://mcpants.github.io/jquery.shapeshift/
SHAPESHIFT
If I move cards around, the
screen arrangement is
readjusted to fit cards in
optimally

22. http://masonry.desandro.com/
MASONARY
The cards can move around so
as to fit into the screen size

23. DRESSING TO IMPRESS, DIRECT OR
TO ENGAGE?
Are we….