The home page is dead

Long live the home pageBy Derek Moore

“Exemplary Courses”

School of Literature and Language StudiesSLLS4034 - Journalism Studies A2013 Anton HarberSchool of Mechanical, Industrial & Aeronautical EngineeringMECN2012 Randall patonSchool of electrical engineering Thomas BlaserELEN4007 - Engineer in Society2013School of Chemical and Metallurgical EngineeringChem & Met Eng POSTGRADS Kevin HardingSchool of economic and business sciencesBUSE2002 - Human Resources IIA2013 Althea JansenINFO3002 Ernest SkinnerSchool of educationEDUC2194_2013 Daniel LefokaEDUC4144_2013_Modern Physics Emmanuel MushayikwaWSOA5038_2013 Avril JofeeWITS School of ArtsDRAA4084 -Film and Television Production IVA2013 Eran Tahor

Entering in the side door

• What percentage of traffic comes via– Search engines, e-mail, announcements– Social Media– Home Page

presentations

guest speaker

f2f element

readings

online quizzes

assignment submission (dropbox)

online element

Course Site Home page

FACE-TO-FACE ONLINE

Cards as a guiding metaphor

Home Page CardsPresent and highlight multiple parts of your course on the home page.

Press Add+ to get started

Trigger

Response

Feedback

Rules1) I click add + 2) Fill in the heading and select the type of card3) Press submitThen a new card appears

Trigger> Response > FeedbackLet me repeat the pattern

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

Trigger:What happens if I click on the cross

Response

Feedback:The card disappears when I confirm my decision

Rules1) I click X 2) I’m asked to confirm3) When I confirm the card disappears4) And the cards are re-arranged

Trigger - An onscreen event that triggers the interactionResponse - The users response to the triggerFeedback - The reaction of the computer to the users responseRules - The generalised rules developed by the user to explain this interaction

The interface should1) Treat each widget independently, but be consistent2) Allow the user to re-arrange the page, but also rearrange automatically3) Optimise the layout according to the screen width

http://dropthings.omaralzabir.com/?Widget_to_Widget

WIDGETEach of the cards are independent of each other but same rules apply to each block

http://mcpants.github.io/jquery.shapeshift/

SHAPESHIFTIf I move cards around, the screen arrangement is readjusted to fit cards in optimally

http://masonry.desandro.com/

MASONARYThe cards can move around so as to fit into the screen size

DRESSING TO IMPRESS, DIRECT OR TO ENGAGE?

Are we….