Manual for implementation of good IA practices

1. Faculty of Mechanical Engineering, University of Niš
Information Architecture
of EURAXESS portals
Manual for implementation of good IA practices
Milan Zdravković
Miroslav Trajanović
Milan Trifunović
Nikola Korunović

2. ii
Table of Contents
Introduction .................................................................................................................................... 1
Introduction to Information Architecture ...................................................................................... 2
Definitions............................................................................................................................... 2
What is navigation? ........................................................................................................ 2
What is meta-data?......................................................................................................... 2
What is a taxonomy? ...................................................................................................... 2
What is data modeling?.................................................................................................. 3
What is website wireframe?........................................................................................... 3
Relevant fields/sciences.......................................................................................................... 4
Library science ................................................................................................................ 4
Cognitive psychology ...................................................................................................... 4
User research.......................................................................................................................... 4
What are user personas?................................................................................................ 4
How users find content on a website? ........................................................................... 6
Principles of Information Architecture ................................................................................... 7
Principle of objects.......................................................................................................... 7
Principle of choices ......................................................................................................... 8
Principle of disclosure..................................................................................................... 8
Principle of exemplars .................................................................................................... 8
Principle of front doors................................................................................................... 8
Principle of multiple classification .................................................................................. 9
Principle of focused navigation....................................................................................... 9
Principle of growth.......................................................................................................... 9
Content organization models ............................................................................................... 10
Single page.................................................................................................................... 10
Flat................................................................................................................................. 10
Index.............................................................................................................................. 10
Daisy.............................................................................................................................. 10
Strict hierarchy.............................................................................................................. 11
Multidimensional hierarchy.......................................................................................... 11
Tools of the trade.................................................................................................................. 11
Whiteboard apps .......................................................................................................... 12
Mind-mapping tools...................................................................................................... 12
Diagramming and wireframing tools............................................................................ 12
Modeling information architectures for the EURAXESS portals................................................... 13
Modeling framework ............................................................................................................ 13
Modeling formalism...................................................................................................... 13
Modeling assumptions - default structure ................................................................... 15
Information and assistance section...................................................................................... 16
Model implementation - content components............................................................................ 20
Data, teaser and mediator block .......................................................................................... 20
From the editor’s manual ..................................................................................................... 22
Components.......................................................................................................................... 23

3. iii
Using tabs to organize content..................................................................................... 23
Carousel ........................................................................................................................ 26
Block with image........................................................................................................... 26
Collapsibles ................................................................................................................... 27
Block with collapsible.................................................................................................... 29
Partners block ............................................................................................................... 30
News block.................................................................................................................... 31
Literature ...................................................................................................................................... 33
Appendices.................................................................................................................................... 34
Appendix 1 - full list of content blocks used in national EURAXESS portals......................... 34
Access to the culture of the host country/language courses....................................... 34
Accommodation............................................................................................................ 35
Banking.......................................................................................................................... 35
Career development ..................................................................................................... 35
Daycare, schooling, family ............................................................................................ 36
Departure conditions and formalities........................................................................... 37
Entry conditions and visas ............................................................................................ 37
Health insurance........................................................................................................... 37
Intellectual property rights........................................................................................... 38
Job opportunities.......................................................................................................... 38
Medical care.................................................................................................................. 38
Pension rights................................................................................................................ 39
Recognition of diploma................................................................................................. 39
Research funding opportunities ................................................................................... 40
Taxation and salaries .................................................................................................... 40
Unemployment............................................................................................................. 41
Work permit.................................................................................................................. 41
Appendix 2 - sitemap of European EURAXESS portal........................................................... 42
Appendix 3 - sitemap of Serbian EURAXESS portal .............................................................. 43

4. 1
Introduction
The main objective of this manual is to help EURAXESS portal administrators to re-engineer
the existing information architecture (national EURAXESS portals are already published) in
order to provide better structure, corresponding to the default content architecture, as
implemented in the recently developed EURAXESS portals platform. This, better structure
aims at facilitating better accessibility and clarity of the existing content and a framework
for the future content improvements (additions).
The structure is placed at the lower level of detail - it assumes the existing default content
architecture, but it also aims at challenging it, by providing the arguments for its
improvement in the future.
The manual will provide a theoretical introduction to the field of Information Architecture.
Second, it will then establish formalism for diagramming the website structure. Third, it will
provide an analysis of the existing content, published on the national EURAXESS portals
(main content providers of the Information & Assistance section content).

5. 2
Introduction to Information Architecture
Definitions
Information architecture is the creation of a structure for a website, application, or other
project, that allows us to understand:
 where we are as users, and
 where the information we want is in relation to our position.
Ultimately, information architecture results in site map (navigation) creation, meta-data
tagging, wireframes and categorization (creating taxonomies) — all of which needs to be
shared with clients in one visual format or another.
What is navigation?
Navigation is a key element of any website -- it’s how the user gets from section to section,
and to your content.
Figure 1. Example of website navigation diagram
What is meta-data?
Meta-data is data that describes other data. Meta is a prefix that in most information
technology usages means "an underlying definition or description." Meta-data summarizes
basic information about data, which can make finding and working with particular instances
of data easier. For example, author, date created and date modified and file size are
examples of very basic document meta-data. Having the ability to filter through that meta-
data makes it much easier for someone to locate a specific document.
What is taxonomy?
Taxonomy is a set of things that are grouped together. For an information architect,
taxonomies are also records of how we group similar types of content or pieces of
information. Most IAs will choose one or more appropriate taxonomies for a website or app
based on the mental model of their target audience. They may then “tag” content with
meta-data, so that users can search for content based on the assumed taxonomies.

6. 3
What is data modelling?
Also referred to as content modeling, data modeling pairs an IA with developers in order to
determine structured content types that represent user needs, business logic and
requirements, and internal editorial practices. In the case of website redesigns, new data
models will often need to be mapped to existing structures in order to assure a smooth
content migration. Data modeling can also result in the creation of documented content
types, or content templates, for content managers or copywriters to use as they create
content.
What is website wireframe?
A website wireframe, also known as a page schematic or screen blueprint, is a visual guide
that represents the skeletal framework of a website.
Figure 2. Example of web page wireframe
Wireframes are created for the purpose of arranging elements to best accomplish a
particular purpose. The purpose is usually being informed by a business objective and a
creative idea. The wireframe depicts the page layout or arrangement of the website’s
content, including interface elements and navigational systems, and how they work
together. The wireframe usually lacks typographic style, color, or graphics, since the main
focus lies in functionality, behavior, and priority of content. In other words, it focuses on
what a screen does, not what it looks like. Wireframes can be pencil drawings or sketches on
a whiteboard, or they can be produced by means of a broad array of free or commercial
software applications. Wireframes are generally created by business analysts, user
experience designers, developers, visual designers, and by those with expertise in
interaction design, information architecture and user research.

7. 4
Relevant fields/sciences
Library science
Two particularly valuable areas of library science for information architects are the art of
cataloguing, and archival science. Cataloguing is the process of creating metadata and
assigning it to content in order to find it again in the future. Archival science is the process
of building and curating archives filled with content, which may need to be edited or
removed in the future in order to maintain the integrity of the archives.
Cognitive psychology
Information architecture draws on some different elements of cognitive psychology to
influence how we structure information. Here are some of the key elements of cognitive
psychology information architects most value:
 Cognitive load is the amount of information that a person can process at any given
time. Keeping in mind the user’s cognitive load helps prevent information architects
from inadvertently overloading a user with too much information all at once.
 Mental models are the assumptions people carry in their minds before interacting
with a website or application. Information is easier to discover when it is in a place
that matches the user’s mental model of where it should be.
 Decision making is a cognitive process that allows us to make a choice or select an
option. Information architects can help us make decisions by providing certain
information at key moments.
User research
Often, an information architect will take an active role in facilitating interviews or card sorts,
where they can see how user would categorize a variety of terms. Through this research,
information architects are able to learn what people will do with a website, how people will
use information provided by the website, and what mental models the users have when
they use the website.
After conducting this research, an IA will begin to analyze the data. The outcome of this
analysis may be a spreadsheet or a set of recommendations, or even a set of user personas
that will showcase who the typical user is, what their goals are, and how they might
approach the application.
What are user personas?
The purpose of personas is to create reliable and realistic representations of your key
audience segments for reference. Effective personas:
 Represent a major user group for your website
 Express and focus on the major needs and expectations of the most important user
groups

8. 5
 Give a clear picture of the user's expectations and how they're likely to use the site
 Aid in uncovering universal features and functionality
 Describe real people with backgrounds, goals, and values
Personas help to focus decisions related to site components by adding a layer of real-world
consideration to the conversation. Personas development is done at the beginning of the
project, as personas can inform site functionality, help uncover gaps, or highlight new
opportunities. The personas are identified by asking the specific questions about the
website’s user, for example:
Objective Questions
Define the
Purpose/
Vision for
the Site
 What is the purpose of the site?
 What are the goals of the site?
Describe the
User
Personal
 What is the age of your person?
 What is the gender of your person?
 What is the highest level of education this person has received?
Professional
 How much work experience does your person have?
 What is your person’s professional background?
 Why will they come to the site? (User needs, interests, and goals)
 Where (or from whom) else is this person getting information about
your issue or similar programs or services?
 When and where will users access the site? (User environment and
context)
Technical
 What technological devices does your person use on a regular basis?
 What software and/or applications does your person use on a regular
basis?
 Through what technological device does your user primarily access
the web for information?
 How much time does your person spend browsing the web every
day?
User
Motivation
 What is your person motivated by?
 What are they looking for?
 What is your person looking to do?
 What are his/her needs?

9. 6
How users find content on a website?
There are four main ways that users seek information on a website. There may be some
overlap between these different types of content seeking, but classifying them in this way
gives you a good starting point for catering to their different needs.
Known-item
In this seeking pattern, the user knows exactly what they’re looking for, they know how to
describe it, and they might even know where to start looking. These are an IA professional’s
dream.
These users don’t really need any hand-holding. They’re likely to look for your site’s search
function, or to dive right into menus. As long as your information is well-organized and
logical, and/or your search function returns all relevant results, then these users are likely to
have few problems finding what they need on your site.
Exploratory
The exploratory visitor has an idea of what they might need to know, but they might not
have much idea of how to actually find it or where to start. They may dive into your site’s
menus to see if anything looks like it might be relevant (this is where well-thought-out labels
are key), or they might attempt a search.
Search that auto-suggests terms is a huge advantage for these visitors. They may know a
keyword or two, and a search that will suggest related terms to help narrow their results is
likely to be a huge help to them and give them a better user experience.
Unknown
The unknown user doesn’t really know what they need. They might have a vague idea, or
they might think they know, but they don’t know enough to effectively find it without some
assistance.
This is common in more complex industries like legal or financial. It can also be present in
many educational settings, where users might be looking for a solution without really
understanding their problem. This can also be apparent when someone is referred by
another user, or when a visitor is simply looking to keep up to date with a topic or industry.
In any case, you need to find a way to guide your visitors through your content, to help
them figure out both what they need and how to find it. How you do that can vary
depending on the specific likelihood of each scenario. For example, how you guide a visitor
through a news site is entirely different than how you would guide them through content on
a site offering financial advice. The main similarity, though, is that the user needs more
guidance.

10. 7
Re-finding
These people are looking for things they’ve already seen, and they may or may not know
exactly how to find those things again. There are two different ways you can deal with this
type of visitor.
The first way is to passively save content for users (such as a “recently viewed” section on
an e-commerce site). This type of system requires no action on the part of the user, but can
also be limited in how effective it is. For example, you might opt to save the last five pages a
user visits, but what if the thing they want to get back to was ten pages ago? Or fifty? They’ll
have to re-find it on their own. The other is to provide active tools for visitors to use to save
content so they can easily re-find it later. This could be things like a “save for later” function,
a wish-list, favourites, or something similar. These active solutions can make it easier to for
users to re-find content that’s important to them much better than an automated, passive
solution can.
Of course, it’s also possible to combine the two methods, both passively saving recent
content and giving users an easy way to save content that they deem important for later
reference.
Principles of Information Architecture
Eight Principles of Information Architecture (by Dan Brown) lays out a theoretical framework
for the IA industry, and makes the following assumptions:
 that the IA’s main focus is on the structure of information first, and the design of the
actual user interface second (if at all);
 that the IA understands how people actually use content and how the structure should
function to support that;
 that the IA grasps the range of content and functionality on a project and how that
needs to be structured.
Principle of objects
The principle of objects says that content should be treated as an evolving thing that has its
own lifecycle. Different content has different attributes and behaviors, and this has to be
recognized in order to best utilize that content. You should start every project by identifying
the kinds of content that will be present. That means both on a broad scale and a more
granular one.
For example, an ecommerce site might have content that includes products in various
categories (broad), but also has different kinds of content within each of those products:
title, description, specifications, prices, and related items. This type of site might also have
additional pages, like an about page, an FAQ, a customer service page, etc. Listing out all of

11. 8
these content types and how they relate to one another is the first step in devising a plan to
best deliver the information on a site.
Principle of choices
The principle of choices means that you should offer your users meaningful choices.
However, you need to make sure that those choices are focused on something specific. Too
many choices can overwhelm a user and negatively affect their experience using your site.
Information should be arranged in hierarchies, avoiding long lists of options, which can
become cumbersome to sort through. Categorizing and sub-categorizing content is much
more effective if you have more than a handful of options to begin with.
Principle of disclosure
It’s important to give your users the information they need. But be sure you identify what
the necessary information actually is, and don’t just give them information because you feel
like it. Give them the information they need to have an idea of what they can expect to find
as they delve deeper into your site, no more, no less (this is called progressive disclosure).
By limiting the information they see at any one time, you allow your user to better absorb
what they’re seeing. A paragraph on each page for ten pages is much easier to digest than a
single page with ten paragraphs of text. Use tools at your disposal to guide your users
through your content in a way that makes it feel accessible and easy to use.
The main concept here is to not overload your user by trying to cram every bit of
information on a single page. Steer them through the information in a way that makes it
easy to digest and remember.
Principle of exemplars
Describing the content within a category of information via example makes it easier for your
users to understand what they’re getting. It greatly improves user experience. For example,
when browsing categories on Amazon, they often show products that fall within that
category. This makes it easy to immediately identify the correct category, especially if you’re
not exactly sure what the category in question might be called.
This principle is a bit harder to use in some scenarios, depending on the type of content
you’re providing. But think about how you can incorporate it into your category labels and
menus, as it does provide a big boost in user satisfaction when done well.
Principle of front doors
Half of your visitors are likely going to arrive on your site via a page other than your home
page. That means that every page they land on should include some basic information so
that they know what kind of site they’re on. It also means every page should include at least
top-level navigation, as well as navigation to related pages.

12. 9
There are two major avenues that visitors will access interior pages of your site from: search
engine results and social media links. In either case, the user may have very little
information about your site or organization, other than that the information they’re looking
for is somewhere on the page they’ve arrived on. If they can’t find it quickly, then they’re
unlikely to stick around for long.
One takeaway from this is that you don’t need to cram all of your information onto your
home page, since half of your visitors, give or take, aren’t landing there and may never even
see it at all.
Principle of multiple classification
Multiple classification means that there should be different ways for your users to browse
the content on your site. Different people are likely to use different methods for finding the
information on your site.
For example, some users may go straight to your search function while others may want to
browse. But beyond that, even, some users may want to browse by one specification, while
others might want to browse by another. For example, on an ecommerce site selling
clothing one user might want to look at all of the dresses on the site, while another user
might want to look at everything that comes in a large size, and yet another user might want
to browse by price range.
Giving users multiple options results in more satisfied users.
Principle of focused navigation
Navigational menus should not be defined by where they appear, but rather by what they
contain. Your menus form the primary method for most users to find content on your site.
In many cases, there may be more than one navigational menu on the site, to provide
different ways to access the content.
You might have topic-based navigation (often the main navigation for a site); menus on
interior pages that show how the current page is classified, as well as related pages; a menu
offering sales or marketing links; and even seasonal or topical menus that provide content
that might be pertinent at a given time. In any case, keep each navigational menu focused to
make them easier to use.
Principle of growth
On the vast majority of sites, content is a fluid, changing thing. The amount of content you
have on a site today may be only a small fraction of what you’ll have tomorrow, next week,
or next year.
Organize your content in a way that allows it to grow over time. Your navigational menus
and general information architecture should be able to scale to accommodate a lot of
content without becoming cumbersome or unwieldy.

13. 10
Sit down and consider what content may be added in the future, including entirely different
types of content rather than just extensions of what will be on the site now. Think of how
this additional content will interact with the current content, how they’re related, and how
they can be integrated successfully without the need to redesign the site’s entire content
structure.
These principles are all key to creating effective informational structures. While not every
principle will carry equal weight on every project, considering and assessing each prior to
beginning and during each phase of a project will result in better informational strategy
overall. And better information architecture equals happier users.
Content organization models
There are six basic models for organizing and structuring content on a website. These
models can sometimes be combined, depending on the exact structure (though generally
they’re used within different sections of a project, and not simultaneously) though they can
also be used entirely on their own.
Single page
A single page site puts all of the content and information on just one page. This works best
on a site with limited content and a very focused purpose. Single page sites are generally
broken down into different sections, often with navigation to permalinks for each topic.
Single pages are common for things like personal websites, sites for individual products
(either digital or physical), and similar sites. You may also see them as stand-along sub-sites
on a larger site.
Flat
Flat structures are most often seen on small sites with less than a dozen pages. On a flat
site, all of the pages are interchangeably accessible, ie, there’s only one level of navigation.
This kind of site is most common on things like portfolios and agency sites, simple business
sites, and e-commerce sites with only a handful of products. Flat sites become significantly
less usable as they grow in size.
Index
Index sites are similar to flat sites, though they often have a list of all of the pages on the
site in a central location. This makes sites with larger numbers of pages still usable with a
close-to-flat content structure, which keeps them simple. Again, these kinds of structures
are best for sites with a specific purpose, like an ecommerce site, a business site, a portfolio,
or a site educating on a very specific topic.
Daisy
A daisy structure is most commonly seen in things like web apps, though it is also seen on
educational sites sometimes. The daisy structure means that users return to a central point
(like a home page or landing page) after completing specific tasks on a site. For example, in

14. 11
something like a to-do list app, users might be returned to the to-do list after completing a
task, editing a task, or adding a new task. Similarly, on an educational site, users might be
returned to a central hub after completing a lesson.
Strict hierarchy
With a strict hierarchy, pages are only accessible from their parent page. This can be a great
structure for sites that wish to guide users through information in a very specific manner,
without allowing them to skip ahead.
Because of this, these kinds of structures work well on educational sites, where one lesson
builds upon the last. By only allowing users to access a new page from its parent page, you
prevent users from skipping ahead to information they might not understand.
Multidimensional hierarchy
Closely related to the strict hierarchy is the multidimensional hierarchy, which provides
users with more than one way to access particular content. This is one of the most common
organizational patterns, partly because of its ease of implementation.
Multidimensional hierarchies can also be the trickiest to pull off. Because while you want to
allow users multiple ways to access content, you still want to guide them along logical paths
whenever it makes sense to do so. Choosing when and where to provide access to more
content becomes equal parts art and science.
Multidimensional hierarchies at their simplest include pages that are accessible from their
parent pages, along with from a central navigation menu (often including sub-menus).
At its most complex, you have sites like Wikipedia, where pages are linked to one another in
contextual ways, as one page is mentioned on another. This weaves an intricate web of
interrelated content that seemingly goes on forever (and for all practical purposes, does).
These varying methods for organizing content can be adapted and hybridized to meet the
needs of a particular project, or for particular aspects of a project. For example, if you had
an educational website, the majority of your website might use a strict hierarchy, but then
individual sections might use a daisy pattern for teaching specific lessons.
Tools of the trade
Information Architecture takes a good deal of mental work, and so some IAs prefer to use
nothing but paper and pen. However, ultimately, information architecture results in site
map creation, metadata tagging, and categorization—all of which needs to be shared with
clients in one visual format or another. Some information architects also create site
wireframes, which require additional tools.

15. 12
Whiteboard apps
Whiteboard apps can be great for collaborative brainstorming with a distributed team, or
even with your client. The best ones offer the same kind of functionality as a real-world
whiteboard, but with easy digital sharing.
 Awwapp1
is a touch-friendly whiteboard that can be used from a tablet, smartphone, or
computer. You can draw sketches, collaborate, and share your completed whiteboard.
It’s compatible with all modern browsers without needing to install anything.
Mind-mapping tools
Mind-mapping tools are like a step up from a whiteboard, and provide more structure to
your notes. They can also be a great way to organize your thoughts and to start categorizing
information. While mind maps can be done with pen and paper (or colored markers and
paper), digital tools make them easier to edit and share.
 Coggle2
is a free online mind-mapping tool that makes it easy to create color-coded
mindmaps and share them with colleagues. Use it for taking notes, brainstorming, and
more.
Diagramming and wireframing tools
Wireframing tools are a key tool in the information architect’s toolbox. They’re often
handed off to others in the project team, so creating them in a way that make them easy for
others to understand is crucial. While paper wireframes can be a good staring point, digital
versions can be a better solution for sharing with others.
 Justinmind Prototyper3
is a free downloadable wireframe tool that lets you create
clickable wireframes for mobile apps. It’s a great solution for more complex IA projects
where interactivity at the wireframe level makes things easier to understand.
 MockFlow4
offers free and premium plans for super easy wireframing. It works online or
off, gives you interactive clickable sitemaps, and offers HTML download to make it
easier to share your wireframes without special software.
 Draw.io5
is a general purpose drawing, diagramming and flow-charting online tool. It
has embedded templates for the information architecture and wireframes.
1
https://awwapp.com/
2
https://coggle.it/
3
http://www.justinmind.com/free
4
http://www.mockflow.com/
5
https://www.draw.io

16. 13
Modelling information architectures for the EURAXESS
portals
Modelling framework
After considering the above elements of the IA, a model will be created. The model will
identify content objects: pages and content blocks.
Content blocks are the building blocks of one page - they contain the unique content or its
introduction (with the link to the separate page), belonging to the topic addressed by the
page to which they belong. Content blocks can be implemented on page by using different
content components, for example:
 A simple block can be made by highlighting the title, short text and an image. If there is
a need to enumerate or list something related to that content, image can be replaced
with a collapsible menu.
 Tab component can be used to distinguish between different content blocks (each
published on the separate tab) presenting larger content.
 One block can consists of other blocks. For example, each tab panel in a tab component
can have other different components - simple blocks with image or collapsible.
 Components can be very complex, typically used in very specific circumstances, e.g.
carousel and partner block.
During modelling, each of the content objects need to be labeled. Connections between the
objects will be identified, where connection ending at the page is considered as a link, while
connection ending at the content block is considered as inclusion - part-of relationship
(content block belongs to the page or content block from where the connection is
established).
Typically, meta-data can be identified for each of the content block.
Modelling formalism
The above can be modeled by simple network diagrams or graphs, which use nodes
(visualized as squares) and directed arrows (indicated connections) that can be used to
connect two nodes. Figure below shows how the graphs are used to depict the basic, first-
level information architecture of the European EURAXESS portal.

17. 14
Figure 3. First-level information architecture of European EURAXESS portal
An agreement can be established to visualize pages by using squares with a solid border,
while content blocks will be represented with squares with a dashed border. For example, a
page Doing research in Serbia (see image below) consists of two blocks, where the first one
publishes links to three pages and the second one comprises of three other blocks. The
capture of the actual page Doing research in Serbia is shown below.
Figure 4. Example IA illustrating modeling content blocks

18. 15
Figure 5. Example page with content blocks
Modelling assumptions - default structure
The default structure, provided by the EC is two-level. At the first level, three categories are
identified: Living in Europe, Working in Europe and Leaving Europe.
Living in Europe category encompasses topics related to settling in one of the European
countries, no matter if you working there or not. It presents the content relevant not only to
researchers but also to their families. Following topics were introduced:
 Access to the culture of the host country/language courses

19. 16
 Accommodation
 Banking
 Day care, schooling & family related issues
 Health insurance
 Medical care
While the previous category is mainly targeting researchers and their families, Working in
Europe is addressed to researchers and their employers. The category covers issues that
arise due to relocation to another work place in another country, in Europe. Those issues
typically need some paperwork to resolve. The following topics are introduced:
 Career development
 Intellectual Property Rights (IPR)
 Pensions for researchers
 Recognition of diplomas
 Taxation/salaries
 Unemployment
 Work permit
The final category is targeting researchers who are relocating outside Europe, for work.
Thus, the relevant topics are:
 Departure conditions/formalities
 Job opportunities, and
 Funding opportunities
Information and assistance section
Example below is a graph, depicting information architecture of the Information &
assistance section of the European EURAXESS portal.
Based on the architecture, it can be understood that Information & assistance page consists
of three content blocks: Living in Europe, Working in Europe and Leaving Europe. Living in
Europe block, consists of two blocks: Visa and entry conditions and Settling in. Furthermore,
Settling in block consists of small blocks, corresponding to the topics as indicated on the
schema. Finally, Living in Europe block also links to Find information and Find Service
centers pages.

20. 17
Below, a capture of the web page, actually its two content blocks: Living in Europe and
Working in Europe are presented.
Figure 6. Information architecture of the Information & assistance section of the European portal

21. 18
Figure 7. Capture of Living in Europe content block
Navigation to the three
main content blocks

22. 19
Figure 8. Capture of Working in Europe content block
Working in Europe
content block
Information for
researchers
content block
Pensions content
block
Work permit
content block

23. 20
Model implementation - content components
Each of the content blocks can be implemented by using one of the offered components. In
this part of the manual, these components are presented.
Data, teaser and mediator block
In addition, before choosing the components for the particular block, another decision
needs to be made. It is related to the location of actual data in relation to the block.
Following types are possible: data block, teaser block and mediator block.
Data block presents the actual information assumed to be needed by the researcher,
meaning that researcher can find the answer to the possible question in the specific topic
only by reading the data block (no additional clicks needed). It is used when that
information is clear and short - not much of content is needed in order to present it. Still,
data block can provide a link to the further reading, for example, law presenting the data or
similar.
Figure 9. Example of data block
6
Teaser block is used when information needs to be presented in a way which requires
detailed elaboration, meaning larger chunk of content. In that case, teaser block presents
only summary and then asks the researcher to click on a link where he/she would get this
elaborated, detailed information - full data. This page resides on EURAXESS portal. It is
6
www.euraxess.no

24. 21
either a subpage of the page on which teaser block is placed, or any page on the EURAXESS
portals, including European one.
Summary of the teaser block should be written with main user motivation questions in
mind. In other words, the content of the summary should clearly:
- Highlight the motivation and needs of the user who would eventually access the
information presented in the teaser block (and related subpages).
- Highlight the nature of the information/data presented in the related pages – is that
what the visitor is looking for or looking to do?
Figure 10. Example of two teaser blocks, positioned one after another
7
Mediation block is similar to teaser block, with one difference: link is made to an external
resource, not a page on the EURAXESS portals.
7
www.euraxess.pl

25. 22
Figure 11. Example of two mediation blocks, positioned one after another
8
From the editor’s manual
According to the national EURAXESS portal’s editor’s manual, a page can be structured by
using following approaches:
 Tabs - split the page into tabs (up to 4 recommended). This fits well with both landing
pages and information topics with a lot of content.
 Collapsibles - organize content in collapsibles when the user needs to select what
content to view - for example when listing the different types of visa, a site visitor does
not need to read all visas to determine what visa is applicable for him/her. Solid
Collapsibles are more prominent for highlighting content e.g. on Landing pages. Can
either include another group of collapsibles or if only a few lines of text is needed bullet
points can be used. Do not overuse collapsibles and find a system for using the
components e.g. solid collapsibles on landing pages, light ones on subpages.
 Bullets - organize content when all content should be read by the site visitor. Bullet
Points are a great way to make long copy easier to read. Either within a plain text page,
or within a component like a collapsible.
 Sub-pages - add a sub-page when the content is too much to add in a tabs or
collapsibles.
8
www.euraxess.rs

26. 23
For setting up a simple layout of the page, use of grid system is suggested. Bootstrap grid
system is used, which divides the screen in rows and columns, where the full width of the
row is by default 12 columns.
Figure 12. Examples of dividing screen into rows and columns
By default, Information & Assistance pages are 8 columns wide. Basic pages and landing
pages are 12 columns wide.
Finally, the most advanced way to structure content is by using so-called components (tabs
and collapsibles mentioned above are components).
Components
Using tabs to organize content
Tabs divide content into meaningful sections which occupies less screen space. In this
regard, users can easily access the content that they are interested in (rather than having all
the content in paragraphs). Jakon Nielsen highlights following guidelines for using tabs
(selection):
 Use tabs to alternate between views within the same context, not to navigate to
different areas. This is the single most important point, because staying in place while
alternating views is the reason we have tabs in the first place.
 Logically chunk the content behind the tabs so users can easily predict what they'll find
when they select a given tab. (Card sorting is one option for researching this problem. If
you don't find clearly distinct groupings, then tabs are likely the wrong interface control
for managing your content.)
 Use tabs only when users don't need to see content from multiple tabs simultaneously.
If people do need to compare the info behind different tabs, then having to switch back

27. 24
and forth puts an added burden on their short-term memory, increases cognitive load
and interaction cost, and lowers usability compared to a design that puts everything on
one big page.
 Design tabs that are parallel in nature. If the tabs are significantly dissimilar, users will
interpret them as site navigation.
 Write short tab labels and use plain language, rather than made-up terms. Tab labels
should usually be 1–2 words. Short labels are more scannable; if you need longer labels,
it’s a sign that the choices are too complicated for a tab control.
 Do not use ALL CAPS for tab labels. ALL CAPS is rarely a good idea because it's harder to
read.
 Stick to only one row of tabs. Multiple rows create jumping UI elements, which destroy
spatial memory and thus make it impossible for users to remember which tabs they've
already visited. Also, multiple rows are a sure symptom of excessive complexity: If you
need more tabs than will fit in a single row, you must simplify your design.
Two different tab components are offered to EURAXESS portal editors: Tabbed block
component and Tabs component.
Tabbed block component
Tabbed block component is used to present relatively short information in each of the tab
panels. Typically, in each of the tab panels, illustration is shown on the right side.
It is not allowed to place collapsibles in the panels of the tabbed block component.
Figure 13. Example of tabbed block use
9
9
www.euraxess.sk

28. 25
Meta-data:
- For each of the tabs:
o Tab title (short)
o Tab panel title
o Tab panel text
o Tab panel image – illustration
o Tab panel – link to more information/external resource
Tabs component
The main difference between tabbed block and tabs component is that the latter is used to
distinguish between large chunks of content classified in tab panels.
It is allowed to place collapsibles in the panels of the tabs component.
Figure 14. Example of tabs use
10
Metadata:
- For each of the tabs:
o Tab title (short)
o Tab panel title
o Tab panel content
10
www.euraxess.rs

29. 26
Carousel
Figure 15. Example of carousel use
11
Metadata:
- Carousel title
- For each of the carousel panels:
o Thumbnail
o Carousel panel title
o Carousel panel content
o Carousel panel link (to a page/subpage/external resource
Block with image
Block with image is typically use for teaser and mediator blocks. Image can be placed on the
left or right side.
Figure 16. Example of block with image use
12
Metadata:
- Block subtitle
11
www.euraxess.no
12
www.euraxess.hr

30. 27
- Block title
- Block text
- Illustration
- Link to a page/subpage/external resource
Collapsibles
When a lot of data or a lot of functionality is available, users typically only need a certain
subset at any given moment. In order to keep the screen clean, it is preferred to show only
the core information or functionality, and hide the rest but make it available on demand.
In the above cases, collapsibles are being used.
Accordion - Collapsibles component
An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide
content associated with them. It is one of many ways you can expose content to users in a
progressive manner. Allowing people to have control over the content by expanding it or
deferring it for later lets them decide what to read and what to ignore.
There are other advantages to applying accordions to long, content-rich pages:
 Collapsing the page minimizes scrolling.
 The headings serve as a mini-IA of the page. This allows users to form a mental model of
the information available.
 Hiding (some of) the content can make the web page appear less daunting.
 Accordions can be a better alternative to within-page links, which are problematic
because they break people’s mental model for hypertext links. People expect clicking a
link will load a new page. Without proper cues people are confused about where they
are on the site.
Important considerations for using accordions:
 Accordions should be avoided when your audience needs most or all of the content on
the page to answer their questions. Better to show all page content at once when the
use case supports it. In such cases, don’t worry too much about page length. Relevance
trumps page length. Save people the hassle of clicking on links needlessly if their
intention is to consume all of the content in the same session.
 Accordions are more suitable when people need only a few key pieces of content on a
single page. By hiding most of the content, users can spend their time more efficiently
focused on the few topics that matter.

31. 28
 Another situation in which accordions are helpful is when the information is restricted
to very small spaces, such as on mobile devices. On small screens people often stop
scrolling before reaching the end of an extremely long page. If the page has several
loosely related pieces of information, users often cannot guess if the information in
which they are interested will be found somewhere down the page and they quit before
scanning it all. In such cases, extremely long pages are detrimental to the user
experience. Collapsing the information is a better alternative: it minimizes excessive
scrolling and gives users an overview of the content available on the page.
Figure 17. Example of collapsibles use
13
Metadata:
- For each of the accordion items:
o Accordion item title
o Accordion panel text
Collapsibles light component
Collapsibles light component should be used in the cases of multi-level content
classification. Information presented to the users after the browsing to the relevant point
should be short and concise.
13
www.euraxess.pl

32. 29
Figure 18. Example of collapsibles use
14
Metadata:
- For each of the items:
o Item title/question
o Panel content
o For each of the subitems
 See above
Block with collapsible
Block with collapsible presents short text describing the data/information presented in
collapsible panels. This short text should be treated as a teaser. Thus, it should be written to
highlight the needs (related to looking for the specific information) of the visitor to be
addressed, by the content presented in collapsible panels
It should be used only in cases where collapsible panels present small chunks of the content
– a short text, bullet list, short text with button link and similar.
14
www.euraxess.no

33. 30
Figure 19. Example of block with collapsible use
15
Metadata:
- Block subtitle
- Block title
- Block text
- For each of the accordion items
o Item title
o Item panel text
Partners block
Partners block is a collection of horizontally and vertically stacked widgets, each of which
contains a thumbnail image, title, short text and a button link.
Figure 20. Example of partners block use
16
15
www.euraxess.rs
16
www.euraxess.lu

34. 31
Figure 21. Example of partners block use
17
Metadata:
- For each of the partners block items
o Block item thumbnail
o Block item title
o Block item text
o Block item link to page/subpage/external resource
News block
News block is a set of horizontally stacked widgets with links to the latest published news.
Figure 22. Example of news block use
18
17
www.euraxess.nl

35. 32
Metadata:
- As foreseen by the news item structure
18
www.euraxess.rs

36. 33
Literature
UX Booth Editorial Team. (2015) Complete Beginner’s Guide to Information Architecture.
http://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/
Chapman, C. (2015) The Ultimate Guide to Information Architecture.
https://www.webdesignerdepot.com/2015/02/the-ultimate-guide-to-information-
architecture/
Wikipedia article on Website wireframe. https://en.wikipedia.org/wiki/Website_wireframe
Nielsen, J. (2016) Tabs, Used Right. https://www.nngroup.com/articles/tabs-used-right/
Loranger, H. (2014) Accordions Are Not Always the Answer for Complex Content on
Desktops. https://www.nngroup.com/articles/accordions-complex-content/
http://www.netflarehosting.com/web_design/information_architecture/ia_principles

37. 34
Appendices
Appendix 1 - full list of content blocks used in national
EURAXESS portals
Access to the culture of the host country/language courses
basic-country-data
bringing-pet
car-insurance
cuisine
cultural-programmes-events
customs-and-lifestyle
cycling
driving-license
driving-rules
hosting-immigrants
important-phone-numbers
importing-car
integrating-immigrants
language-courses
living-costs
living-ethics
living-with-disabilities
national-holidays
online-language-courses
practicing-religion
public-transport
recreational-sports
safety
shopping
sightseeing
toll-roads
traffic-accident
travelling-to
utilities
veterinary-care
working-ethics

38. 35
Accommodation
buying-property
dispute-with-landlords
house-appartment-room-sharing
monthly-costs
personal-liability-insurance
relocation-companies
renting-agencies
renting-contracts
renting-costs
short-term-accommodation
terminating-renting-agreement
university-housing-offices
Banking
credit-cards-use
currency-and-banknotes
deposit-safety
exchange-money
financial-services-and-products
loans-and-mortgages
major-banks
making-payments
money-transfer
moving-money
opening-bank-account
stolen-credit-card
switching-bank-accounts
travellers-cheques
types-of-bank-accounts
use-of-foreign-currencies
Career development
H2020-information-sessions
RD-funding
career-development-centres
career-paths
charter-and-code
coaching-and-mentoring
dual-career-services
enterprise-europe-network

39. 36
fellowships-grants
governmental-schemes
industry-opportunities
innovation-and-enterpreneurship-centres
networks-for-returning-researchers
no-limits-tool
performance-appraisal
probation-period
reflex-tool
research-organizations
responsible-research-and-innovation
training-opportunities
transfer-of-entitlements-accrued-abroad
work-life-balance
working-environment
Daycare, schooling, family
adoption
babysitting
benefits-allowances-of-family-members
bringing-pet
childcare-aid-and-support
citizenship-by-marriage-by-birth
conditions-for-bringing-family
daycare-for-children
education-system
family-healthcare
family-members-and-children-with-disabilities
family-tax-relief
foreign-language-kindergartens
health-insurance-dependenat-children
in-case-of-death-in-family
in-case-of-divorce
job-seeking-for-family-members
leave-for-family-reasons-child-ilness
legal-status-of-marriage-partnerships
part-time-jobs-teleworking
pregnancy-maternity-benefits-and-leave
recognition-of-primary-secondary-education
registering-family-members
same-sex-marriage-partnerships

40. 37
validation-of-foreign-school-diploma
voting-rights
work-life-balance
Departure conditions and formalities
cancelling-health-insurance
cancelling-pension-insurance
cancelling-utility-services-and-other-subscriptions
car-deregistration
closing-bank-accounts
customs-export-of-goods
deregistration
embassies-consulates
getting-employment-record-certificates-qualifications
in-case-of-debts-and-unpaid-bills
issueing-certificates-on-professional-activity
tax-return
terminating-renting-agreement
transferring-healthcare-information
unused-holidays-pay
Entry conditions and visas
bringing-pet
customs-import-of-goods
embassies-consulates
identity-cards-for-foreign-citizens
immigration-formalities-for-family-members
importing-car
integration-of-foreigners
long-stay-visa
permanent-residence
scientific-visa-implementation
short-stay-visa
temporary-residence
visa-extension
visa-for-studying-purposes
where-to-apply-for-visa
Health insurance
accident-insurance
cancelling-health-insurance
drug-payment-scheme

41. 38
european-health-insurance-card
expiration
getting-public-health-insurance
health-insurance-companies
health-insurance-dependenat-children
health-insurance-employed-researchers
health-insurance-phd-students
health-insurance-treaties
long-term-ilness-scheme
optional-insurance
pharmaceutical-care
pregnancy-delivery-coverage-costs
private-health-insurance
public-health-insurance-costs
public-health-insurance-coverage-services
sickness-benefits
Intellectual property rights
help-and-counselling
ip-databases
ipr-studies-and-reports
ipr-to-claim-when-working-as-researcher
liability-penalties-for-infringement
literary-works-publishing
model-agreements
national-european-international-ip
registering-ipr
rights-obligations-of-employee-researcher
types-of-ip
universities-policies
useful-documents-guides
where-to-apply-for-ipr
why-protect-and-register
Job opportunities
how-to-apply-for-job
national-employment-agency-services
national-employment-conditions
online-job-platforms
Medical care
child-care-vaccination

42. 39
clinical-centers-hospitals
dentists
e-health-services
emergency-care
general-practitioners
health-checks-for-professionals
medical-care-costs
medical-care-in-private-hospitals
medical-care-in-public-hospitals
patient-associations
pharmacies
pregnancy-delivery-related-services
specialist-treatment
what-to-do-in-need-of-doctor
Pension rights
bilateral-social-security-agreements
cancelling-pension-insurance
coverage-for-phd-students
european-coordination-of-social-security
invalidity-pension
national-pension-scheme
old-age-pension
pension-fund-contributions
pension-insurance-registration
pensions-for-researchers
private-pension-funds
resaver
supplementary-pension-savings
survivor-pension
transfer-of-pension-savings
Recognition of diploma
agreements-on-mutual-diploma-recognition
cost-of-process
european-qualifications-framework
evaluation-recognition-for-employment
evaluation-recognition-for-studying
issueing-certificates-on-professional-activity
national-authority-for-diploma-recognition
national-qualifications-framework
recognition-of-primary-secondary-education

43. 40
recognition-of-qualifications-acquired-abroad
Research funding opportunities
bilateral-cooperation-programmes
eu-funding-opportunities
funding-agencies-ministries
information-sessions-on-funding
innovation-funding
investment-funds-venture-capital
national-databases
national-innovation-system
research-contract-types
Taxation and salaries
avoidance-of-double-taxation-agreements
getting-fiscal-identification-number
how-to-get-tax-return
how-when-to-pay-income-tax
income-tax-allowances-deduction
income-tax-exempts
national-taxation-system
online-tools
personal-income-tax-chargeable-income-rates
property-tax
salaries-employee-contributions
salaries-employer-contributions
salaries-gender-equality
salaries-ranges-for-researchers
tax-residency-tax-liability
tax-return
tax-scenario-for-researcher-on-employment-contract
tax-scenario-for-researcher-on-fellowship-contract
taxation-incentives-for-startups
taxation-of-non-residents
terminating-employment
understand-your-payslip
vacation-entitlement
vat-and-excises
vehicle-tax
work-contract-types
work-positions-for-researchers
working-time

44. 41
Unemployment
conditions-for-firing-employee
eligibility-for-unemployment-benefits
exporting-unemployment-benefits
lifelong-learning-programs
losing-unemployment-benefits
prequalification-programs
registration-as-jobseeker
unemployment-allowances
Work permit
exemptions-from-obligation-to-obtain-work-permit
extending-work-permit
obtaining-work-permit
quotas
types-of-work-permit
where-to-obtain-work-permit
work-permit-application
work-permit-for-self-employed
work-permit-for-spouse
work-permit-rights

45. 42
Appendix 2 - sitemap of European EURAXESS portal

46. 43
Appendix 3 - sitemap of Serbian EURAXESS portal