Signe Elimar Hansen and Charlotte Bust Sigvardt, graduated in 2015 from the master's programme in Information Architecture at Aalborg University. With their master's thesis they have explored the notion of single page websites and presented their findings to all attendees at World IA Day 2016 in Copenhagen.

1. Developing a framework of design principles for
single page websites and their application
Signe Elimar Hansen & Charlotte Bust Sigvardt

2. 1. Introduction
• Who are we?
• The single page
phenomenon
• Problem statement
2. Method/approach
• Phenomenological
Agenda
3. Investigation
• Evolution of web design
• Definition and
characteristics
4. Usability and results
• Usability study
• Usability data and results
• Design principles
2

3. Introduction
3

4. Masters of Science in
Information Technology from
the master’s programme in
Information Architecture at
Aalborg University.
Graduated July 2015.
Introduction - who are we?
4
Charlotte Bust Sigvardt
MSc IT from AAU
Signe Elimar Hansen
MSc IT from AAU

5. Introduction - the single page
phenomenon
5
Factory Forty - Coworking, Meeting Rooms
and Event Venue in Brussels.
Phoenix the Creative Studio - Agency Survival
Kit products.

6. Through an examination of the notion of single page
websites we aim to develop a framework of design
principles
- What is a single page website?
- How is information architecture in single page websites
designed, and how is it utilised by designers and users?
- How can the usability and user experience, in the context of
single page websites, be characterised?
Introduction - problem statement
6

7. Method/approach
7

8. Phenomenological reduction is aimed at investigating
phenomena in an unbiased way, which should lead to
looking at the phenomenon without the bias of prior
understanding. The scientific method should lead to the
essence of a phenomenon.
(Norlyk & Martinesen, 2008, pp. 70-73)
Method/approach - the
phenomenological approach
8

9. Evolution of web design
Defining single pages by
looking at examples
Describing characteristics
(features, tehnologies)
Categorisation of 100 single
pages by context
Identification of 2 sub-genres
Observational usability study
Meaning categorisation of data
Design principles
Method/approach - the
phenomenological approach
9

10. Investigation
10

11. Started from broad perspective: Investigated evolution of
web design (and technology)
Investigation - evolution of web design
11
1990 2000 2010
1990:
First website
1996:
Flash
introduced
2000:
Separation of
structure/style
Early 00s:
Web 2.0 and
user-created
content
Late 2000s:
HTML5
2008:
Mobile access
Early-mid 90s:
Table-based
structure

12. Web design is a product of technological
enhancements, and single page websites have
strong ties to responsive design thinking
and the mobile-first approach.
Investigation - evolution of web design
12

13. Defining the characteristics of the genre: Which features
and technologies are associated with the genre today?
• Ajax (Asynchronous JavaScript and XML)
• Responsive web design
• Parallax scrolling
• Custom and automatic scroll
• Fullscreen images
• Infinite scroll
Investigation - definition and
characteristics
13

14. Investigation - current context
14
Note: 21 % of all single pages were
represented by web design agencies

15. The anatomy and structure of single page
websites have clear differences.
The structural differences propelled us towards
creating a sub-genre division of single page
websites:
Conventional and Avantgarde.
Investigation - structure and anatomy
15

16. Conventional: Clear/conventional navigation forms a
distinct overview.
Presents information to the user right away. Easy to
predict, seems familiar.
Focus on usability = functionalist approach.
16
Investigation - structure and anatomy

17. Avantgarde: Artistic and unconventional appearance.
Hard to predict - breaking user-expectation. Not clear what
is going to happen next.
Focus on user experience = experience-based approach
17
Investigation - structure and anatomy

18. Combination: Hard to place. Navigation not always clear.
Site can seem confusing before initiating scroll.
After you have started navigating, it is very clear what is
going to happen next.
18
Investigation - structure and anatomy

19. 19
Investigation - structure and anatomy

20. Usability and results
20

21. How do users navigate single page websites, and
what are their thoughts about them?
● Observational study with 17 participants divided into two
groups (each sub-genre represented)
○ Attempted to find equal representation between genders, ages,
and backgrounds
○ Participants were asked to complete a series of tasks by
locating information on the website
○ Questions asked before, during, and after usability session
Usability study
21

22. Usability study - the two sub-genres
22
Conventional
Companies
Avantgarde
Showcase/showroom
Representative of the two sub-genres and two largest categories.

23. Quantitative data
• Evaluations on the semantic differential scale (1-7)
• GSR measurements
Qualitative data
• Q&A before, during, and after usability session
• Feedback based on specific times in screen recording
found using the GSR measurements
Usability results and data
23

24. GSR – Galvanic Skin Response
24

25. Usability and results
Design principles
25

26. 12 design principles:
• Principles 1-9 produced during the writing process
• Principles 10-12 produced after handing in the thesis
(presented at final exam)
Usability results and data - the 12
design principles
26

27. Consider which information behaviour the website
should facilitate, and how it can be accomplished.
Inconsistencies between the user’s perceived affordances and
designer’s intended affordances can occur.
Some users did not discover manual scrolling, but only navigated via
automatic scroll features.
Design principles - principle #1
27

28. The amount of text must correspond to the context
of the website.
A website with the purpose of informing the user, such as a campaign,
should provide more in-depth information than a website aimed at
displaying images, such as an artist’s portfolio.
Participants felt that one of the websites was too text-heavy, while the
other did not provide enough explicit information.
Design principles - principle #2
28

29. Horizontal navigation confuses some users.
In order to help the users understand the structure of the site, horizontal
navigation should be clearly marked by signifiers and help-text, a
ording the action of navigating horizontally.
Some participants were inexperienced with horizontal navigation.
Design principles - principle #3
29

30. Some users only navigate via automatic scroll.
Consider how a website would be navigated if the users only moved via
automatic scroll, and how the designer can communicate that manual
scroll is possible.
Some participants did not discover the possibility of navigating
manually, and therefore only navigated via automatic scroll (and
missed some content).
Design principles - principle #4
30

31. Some users will use browser functionalities.
Designers of single page websites should take into account that some
users will use browser-functionalities.
Some participants tried to use the back-button, find-on-page
functionality, and looked to the browser (like the URL) to find
information about the sender.
Design principles - principle #5
31

32. Transparency is heightened by placing information
about the sender in the header or footer.
Much like a letter, the user looks to the head and foot for information.
Some participants became confused and frustrated when the site did
not provide practical information in the footer/header as expected.
Design principles - principle #6
32

33. Be consistent with use of signifiers in the interface.
Identical arrows (or other signifiers) should be consistently used within
the interface, and that the designers set up and follow platform
conventions.
Some participants were confused by arrows affording different actions,
and found them hard to predict.
Design principles - principle #7
33

34. Visualise the journey during automatic scroll
Automatic scroll should provide the users with the feeling that they are
being taken from one place to another, thus making the animated
journey transparent to the user. Designers should be aware that users
might try to brake the animation.
Some users saw the automatic scrolling as a film playing, instead of the
site scrolling down. Some users tried to “brake” the automatic scrolling,
as they found what they were looking for during scroll.
Design principles - principle #8
34

35. Familiarity can help minimise the user’s memory
load.
It takes less time to learn the design and be able to accomplish basic
tasks, if users have encountered them before and are able to derive the
meanings and actions from experience and memory.
Participants attempted to rationalise interface/actions based on prior
experience - for example, press an arrow pointing downwards with the
expectation of automatic downwards scroll.
Design principles - principle #9
35

36. Familiar transaction-patterns can increase
credibility.
The single page structure can in some cases decrease credibility if the
transaction process is downgraded to keep the single page structure
intact.
Participants expected to be presented with a traditional e-payment
system, but instead an e-mail client opened.
Design principles - principle #10
36

37. Navigational architecture communicates content and
structure.
By removing the traditional menu structure, efficiency decreases and
users experience that content is not explicitly presented to them.
Participants were sometimes able to derive sender, receive, message
and goal of the website based on a sticky top-menu.
Design principles - principle #11
37

38. Layering-effect can lead to coincidental overlaps of
interface objects.
The layering-effect can result in overlapping elements in the interface
and cause them to be perceived as connected (in accordance with
Gestalt principles).
Some participants were confused when they interpreted a button and
an arrow as interconnected because the automatic scroll destination
caused the elements to overlap in the interface.
Design principles- principle #12
38

39. THANK YOU
39