A step-by-step approach, using Aristotle’s view on Greek tragedy as it’s core, that will help designers design solid interactive projects that engage customers in the right way.

1. FRAMEWORK
STORYTELLING
@jeroenvangeel
A R I S T O T L E ’ S
FOR THE WEB

2. ARISTOTLE
M E E T T H E M A N

3. L I V E D I N A N C I E N T G R E E C E B E T W E E N 3 8 4 – 3 2 2 B C

4. PHYSICS, METAPHYSICS,
POETRY, THEATRE, MUSIC,
LOGIC, RHETORIC, POLITICS,
GOVERNMENT, ETHICS,
BIOLOGY, AND ZOOLOGY
MR. POLYMATH

5. P L A T O & A R I S T O T L E

6. ARS POETICA
A R I S T O T L E O N G R E E K T R A G E D Y

7. PLOT
A R I S T O T L E ’ S S T O R Y E L E M E N T S
CHARACTER
THOUGHT
DICTION
SONG
SPECTACLE

8. PLOT
A R I S T O T L E ’ S S T O R Y E L E M E N T S
CHARACTER
THEME
DICTION
RHYTHM
SPECTACLE
(THOUGHT)
(SONG)

9. LET’S DIVE
T I M E F O R T H E D E T A I L S

10. T H E C O R E
PLOT

11. A R I S T O T L E
“PLOT IS THE SOUL OF A
TRAGEDY (..) IT’S OF THE
ESSENCE THAT A PLOT
ARROUSES EMOTION IN THE
PSYCHE OF THE AUDIENCE.”

12. 2 0 0 1 : A S P A C E O D Y S S E Y

13. T H E C L A S S I C L O V E S T O R Y

14. William "Will" Thacker owns an independent bookshop in
Notting Hill that specialises in travel writing. He has been
coping with divorce after his wife left him for a man who
looked exactly like Harrison Ford. He shares his house with an
uninhibited Welsh eccentric named Spike. Thacker
encounters Hollywood star actress Anna Scott when she
enters his shop to buy a book. Minutes later, the pair collide in
the street, causing Will to spill his orange juice on both of
them.
He offers his house across the road for Anna to change. She
accepts and, having changed, surprises Will with a kiss which
starts their mutual attraction. Days later, Will asks Spike if he
has any messages. Spike has trouble writing or remembering
messages but does recall "some American girl called Anna"
who mentioned a "completely different name". Anna is at the
Ritz, under the name "Flintstone", and has asked Will to visit.
Will is allowed in, but her room has now become the centre
for a press day and he is mistaken for a journalist. (In panic he
claims he works for Horse & Hound.) He has to interview all
the cast of Anna's new film Helix, even though he has not seen
it. Will's sister Honey (Emma Chambers) is about
THE PLOT OF NOTTING HILL
H T T P : / / W I K I P E D I A . C O M

15. H T T P : / / M A R G O B E R E N D S E N . B L O G S P O T . C O M / 2 0 1 1 / 0 2 / L O V E - S T O R Y - P L O T S - O R - 1 3 - W A Y S - T O - M E S S . H T M L
LOVE STORY PLOT STRUCTURE
FORBIDDEN LOVE
LOVE TRIANGLE
SECRET LOVE
ONE-SIDED LOVE
LOVE FORSAKEN
HAPPILY-EVER-AFTER LOVE
YOU’RE THE LAST PERSON I LOVE..
LOVE TORN APART
IN LOVE WITH WRONG PERSON
RELUCTANT LOVE
RE-DISCOVERED LOVE
PLATONIC LOVE
OUT-OF-CONTEXT LOVE

16. Two people who would normally never meet
suddenly bump into each other. Through a
series of events they fall in love.
But they come across several obstacles before
they get a relationship. Fortunately just before
the end things go right and they live happily
ever after.
THE PLOT OF NOTTING HILL

17. 9 2 9 2 . N L
Eric is going to travel to his new
girlfriend, but he is a bit uncertain
about the best route to take. And than
he meets 9292, the Dutch public
transport expert. 9292 asks Eric a series
of questions and within seconds gives
him an appropriate and correct answer.
Eric is so happy with the information
that from now on he’ll always first ask
9292 what to do.
They become friends.
9292’S PLOT

18. P L O T I S …
PRODUCT GOALS
+
USER NEEDS

19. C H A R A C T E R
T H E M E
P L O T

20. T H E C H A L K O U T L I N E
CHARACTER

21. A R I S T O T L E
“THE MOST BEAUTIFUL
COLORS.. WILL NOT GIVE
AS MUCH PLEASURE AS
THE CHALK OUTLINE OF
A PORTRAIT.”

22. G R E E K T R A G E D Y

23. PRIMARY & SECONDARY
“HEROES OF THE
STORY WHOSE
ACTIONS DETERMINE
THE PLOT OF THE
STORY.”
“SUPPORTING ROLES
PROVIDE THE MAIN
CHARACTERS WITH
INFORMATION,
MATERIAL, GOODS,
SERVICES OR
WHATEVER IS NEEDED
IN ORDER TO ADVANCE
THE PLOT.”
W W W . N A R R A T I . C O M / N A R R A T O L O G Y / C H A R A C T E R S . H T M

24. PRIMARY & SECONDARY

25. PRIMARY & SECONDARY
F L I C K R . C O M / P H O T O S / C A N N E D T U N A

26. 9 2 9 2 . N L
PRIMARY & SECONDARY
- KIDS
- ELDERLY PEOPLE
- VISUALLY IMPAIRED
- CAR DRIVERS
- BOOK LOVERS
RED BULL -
GOVERNMENT -
IKEA -
BBC -

27. 9 2 9 2 . N L
PRIMARY & SECONDARY
- PUBLIC TRANSPORT
USERS
- VISUALLY IMPAIRED
9292 -

28. C H A R A C T E R I S …
USERS
+
BRAND

29. T H E S E T O F L O C A T I O N S
THEME

30. N A R R A T I . C O M
“THEME REFERS TO THE SET
OF LOCATIONS WHERE THE
STORY TAKES PLACE AS WELL
AS HISTORY, GEOGRAPHY
AND LAWS OF NATURE

31. N O T T I N G H I L L

32. P E A R L H A R B O R

33. B R O K E B A C K M O U N T A I N

34. S T A R W A R S V : T H E E M P I R E S T R I K E S B A C K

35. 9 2 9 2 . N L

36. SLOGAN
NIKE
APPLE
MCDONALDS
AVIS
9292
JUST DO IT
THINK DIFFERENT
WE LOVE TO SEE YOU SMILE
WE TRY HARDER
TRAVELS WITH YOU

37. T H E M E I S …
THE CONCEPT

38. C H A R A C T E R
T H E M E
D I C T I O N
SPECTACLE
RHYTHM
P L O T

39. E X P R E S S I N G M E A N I N G
DICTION

40. N A R R A T I . C O M
“THE EXPRESSION
OF MEANING IN WORDS”

41. C A S A B L A N C A

42. O N E D E A L A D A Y – 1 S A L E A D A Y . C O M

43. O N E D E A L A D A Y – W O O T . C O M

44. W H I T E H O U S E . G O V

45. 9 2 9 2 . N L

46. D I C T I O N I S …
TONE
+
STYLE

47. R E C U R R I N G
RHYTHM

48. J A W S

49. P E T E R S T A H L
“MOST INTERACTIONS HAVE AN
UNDERLYING RHYTHM. THE BEST SUCH
EXPERIENCES INDUCE A STATE OF
FLOW DURING WHICH USERS GET INTO
SUCH A GROOVE THAT THE MECHANICS
OF OPERATING THE PROGRAM
DISAPPEAR, ALLOWING USERS TO
FOCUS ENTIRELY ON MEANING.”

50. N I K E . C O M – A L L S U B W O R L D S H A V E T H E S A M E S E T U P

51. O Z O N . R U – S A M E A S A M A Z O N

52. 9 2 9 2 . N L – O N E B I G F A M I L Y

53. R H Y T H M I S …
USABILITY
+
PATTERNS

54. E N T I C I N G A N D S U P E R F I C I A L
SPECTACLE

55. J O N A T H A N C R A R Y
“SPECTACLE IMPLIES AN
ORGANIZATION OF
APPEARANCES THAT ARE
SIMULTANEOUSLY ENTICING,
DECEPTIVE AND SUPERFICIAL.”

56. A V A T A R – A L O T O F V I S U A L S P E C T A C L E

57. N E W Z E A L A N D . C O M – T O O M U C H S P E C T A C L E

58. N E W Z E A L A N D . C O M – T H E R E D E S I G N

59. S P E C T A C L E I S …
GRAPHIC DESIGN
+
UI EFFECTS

60. P L O T
C H A R A C T E R
T H E M E
D I C T I O N
SPECTACLE
RHYTHM

61. S T R A T E G I C
T A C T I C A L
O P E R A T I O N A L

62. THANK YOU!
E - M A I L
J E R O E N @ O A K A N D M O R R O W . C O M
T W I T T E R
@ J E R O E N V A N G E E L
W O R K
W W W . O A K A N D M O R R O W . C O M