opdrachtgever website fo versienr - royal haskoningdhv€¦ · a.1. as an expert, i want to check...
TRANSCRIPT
Functional Design
RHDHV
Corporate website
30th of May 2013 Version 1.0
Jaron Barends (Interaction Designer)
Jeroen Kasteleijn (Information Analist)
Functional Design RHDHV Corporate website Page 2 / 71
Table of contents
1 Introduction 5
1.1 Versions 5
1.2 Reference documents 5
2 Requirements 6
3 Goals 10
3.1 Users 10
3.2 User stories 10
4 Processes 12
4.1 Minimum viable solution 12
4.2 Improved Solution 14
5 Sitemap 17
5.1 Sitemap minimal viable solution 17
5.2 Sitemap improved solution 18
6 Templates 19
6.1 Corporate website (minimal viable solution) 20
T1 (Country) Homepage 21
T2 General overview page 22
T3 General detail page 23
T4 Search result page 24
T5 Contact page 25
T6 iFrame page 26
T7 Sitemap 27
T8 Offices page 28
6.2 Corporate website (improved solution) 29
T9 Office detail page 30
T10 Markets landing page 31
T11 Market overview page 32
T12 Sub-market page 33
T13 Contact lightbox 34
Functional Design RHDHV Corporate website Page 3 / 71
T14 Services landing page 35
T15 Service detail page 36
T16 Project detail page 37
7 Functionalities 38
7.1 Template functions 38
F1 Header 38
F2 Pushbox component 39
F3 Main text/Image block component 40
F4 Content components 41
F5 General teaser component 42
F6 Forward links component 44
F7 Search services component 45
F8 Text block component 46
F9 Footer 47
F10 List component 48
F11 Contact block component 49
F12 Minimal teaser component 50
F13 Article component 51
F14 Search results 52
F15 Pagination 53
F16 No search results 54
F17 Office component 55
F18 Contact form 56
F19 Submenu component 58
F20 Office lister component 59
F21 iFrame 60
F22 Sitemap 61
F23 Big teaser component 62
F24 Lightbox 63
F25 Images component 65
F26 Related items carousel 66
F27 Location component 67
8 Glossary 68
Functional Design RHDHV Corporate website Page 4 / 71
9 Approval 71
Functional Design RHDHV Corporate website Page 5 / 71
1 Introduction
This document is the Functional Design (FD) for RHDHV Corporate website. This FD contains the following chapters:
User stories, most important journey’s that users make on the website;
User flows, most important user flows supported by the website;
Sitemap, de page structure of the website;
Templates, the layout of the individual templates with references to the functionalities in the next
chapter. Pages with matching layouts use the same template;
Functionalities, descriptions of the separate functionalities that are used to build the templates;
Technical requirements, technical requirements for website visitors and website management.
eFocus will develop the RHDHV based on the templates and functionalities described in this FD.
To reach an agreement for the development of the website we ask RHDHV to inspect every page of this FD
thoroughly and confirm the content. eFocus will schedule the development of the website after the complete
approval for this FD.
1.1 Versions
Version Date Author Remarks
0.5 18-4-2013 Jeroen Kasteleijn
0.8 1-5-2013 Jeroen Kasteleijn
0.8.1 7-5-2013 Jeroen Kasteleijn Processing feedback of customer
0.9 16-5-2013 Jeroen Kasteleijn Processing feedback of review panel
0.9.1 27-5-2013 Jeroen Kasteleijn Processing feedback of customer
1.0 30-5-2013 Jeroen Kasteleijn
1.2 Reference documents
File name Description/remarks Version Date
Functional Design RHDHV Corporate website Page 6 / 71
2 Requirements
Site
core
CM
S
Par
t o
f m
inim
al v
iab
le s
olu
tio
n
Co
nsi
de
r fo
r im
pro
ved
so
luti
on
(see
rec
om
men
dat
ion
)
1,01 Content must be shown
A Projects X
B Services X
C Markets X
D Locations / Country X
E Corporate content: corporate story, management, corporate
governance etc.
X
F Corporate literature (Annual reports, brochures) X
G Our vision on (Corporate responsibility / Innovation) X
H News X
I RHDHV in the media X
J Publications X
K Events calendar X
L Contact information contact persons X
M Offices and descriptions (related to Locations/Country) X
N Route descriptions X
O Vacancies X
P Employer / HR information X
T Binary data and files X
U Word, PowerPoint, PDF files X
V Video X
W Pictures X
1,02 Projects must be shown
A Project information can be found by anyone, despite their geographical X
Functional Design RHDHV Corporate website Page 7 / 71
location
B Project information must include geographical information so they can
be shown on a map
X
C Projects can be filtered (Location, Markets, Services) X
D Projects can be tagged (to create cross-connection with other content) X
E Additional info must be displayed (video, links, pictures, PDF) X
1,03 News must be shown
A News must be displayed on all landing pages X
B News must be allowed to be shown as related content X
C News can be filtered so only relevant news is shown X
D Individual news items can be tagged X
E Users have the ability to see all news items X
1,04 Content must be related
A Via tags: X
B On Projects X
C On Location / Country X
D On Market X
E On Services X
F Projects must be tagged to the above items X
G News must be tagged to the above items X
H Contacts must be tagged to the above items X
I Articles and Publications must be tagged to the above items X
J Smart use of tags/filters and must be easy to maintain & future proof X
1,05 Keep users up to date
A Users must be able to register for newsletters X
B RSS feeds need to be available X
C Social media Share buttons X
D Users can fill out additional information requests X
1,06 Provide users with relevant contact information of the right Royal
HaskoningDHV employees
A Access to and usage of contact information forms by employees must be X
Functional Design RHDHV Corporate website Page 8 / 71
very easy
B Contact information is easily added X
C The contact information will guide users directly to the relevant contact X
D Every page can show relevant contact information and relevant pictures X
1,07 Provide users with the ability to upload their contact information and
register
A Registration is easy and short X
B Uploaded contact information is directed to relevant contacts within
RHDHV
X
C When uploading contact information the opportunity is provided to
subscribe to news letters and additional information
X
1,08 The site must have a very good search function
A Keywords can be searched X
B Tags can be searched X
C Regions and countries can be searched X
D Offices can be searched X
A Text can be searched X
B Publications can be searched (incl. PDF’s) X
1,09 The site must have an excellent Search Engine Optimization
A Proposer needs to conform to publicly available SEO standards and
make the SEO metatags user modifiable
X
B Keyword and Title tags should be modifiable per page, others are
assumed to be site bound
X
C URL’s need to have meaningful keywords, related to content and
context
X
1,10 Analytics requirements
A Proposer needs to allow for urchin tags (Google Analytics) with site
modifiable account information for all pages, with meaningful url’s.
X
B Parameters within the url are allowed, unless they hide information
significant for the navigation path. (For instance a parameter for
language is allowed and meaningful.)
X
Functional Design RHDHV Corporate website Page 9 / 71
C URL’s need to have meaningful keywords, related to content and
context
X
D A parameter which makes a switch possible in navigation is not allowed X
Note This applies to the url passed on to Google Analytics, not to the real url
E The number of hits on vacancies, HR information and HR links can be
measured
X
1,11 The site must support the application process
A An application procedure can be started on the site X
B Resumes can be uploaded X
C Resumes can be tracked by HRM X
D E-CV uploading is possible X
E The site can interchange data with recruitmen database (Connexys or
PeopleXS)
X
1,12 Sub sites:
Within the platform / CMS it must be possible to create sub sites: X
- inheriting templates / design / functionalities of corporate website X
- own navigation X
- possibility to re-use content from corporate website (projects, news,
contacts)
X
1,13 Stand Alones
Within platform / CMS it must be possible to create Stand Alone
websites:
X
- inheriting templates / functionalities X
- own look & feel / logo / design X
NOTE: definition of Sub sites & Stand Alone website should be considered in
more detail, looking at functionalities and speed of development / costs
Functional Design RHDHV Corporate website Page 10 / 71
3 Goals
3.1 Users
Defined users for the corporate website are as follows (sorted from most important to less important):
A. Expert
B. Decision maker
C. Influencer
D. Employee
E. Future employee
F. Press member
3.2 User stories
Defined users stories for the corporate website are as follows (sorted from most important to less important):
Minimable
viable
solution
Improved
solution
A.1. As an expert, I want to check if RHDHV is a suitable company for the project we
are planning, so that I can advise my superior.
P1 t/m P4 P5, P6,
P7, P8,
P10
A.1.a. As an expert, I want to see projects of RHDHV, so that I can see if they have done
similar projects to mine.
P2 P6
A.1.b. As an expert, I want to see local project of RHDV, so that I can see if they have
done in my country/region.
P2 P6
A.1.c. As an expert, I want to see markets of RHDV, so that I can read more on their
vision on my market.
P2 P10
A.1.d. As an expert, I want to see company information, so I will know e.g. the size and
age of RHDHV.
P2 -
A.1.e. As an expert, I want to send/share information, so that I can share this with my
superior
P4 -
A.2. As an expert, I want to check if RHDHV offers the specific service I need, so I can
contact them and discuss carrying it out.
P1 t/m P3 P5, P7,
P8
A.2.a. As an expert, I want to see service examples of RHDHV, so that I see how they
implemented this service.
P2 P7
B.1. As a decision maker, I want to get more information about RHDHV, so I can see if P1 t/m P3 P5, P6,
Functional Design RHDHV Corporate website Page 11 / 71
it is a suitable company for the project we’re planning. P7, P8,
P10
B.1.a. As an expert, I want to see projects of RHDHV, so that I can see if they have done
similar projects to mine.
P2 P6
B.1.b. As an expert, I want to see company information, so I will know e.g. the size and
age of RHDHV.
P2 -
C.1. As an influencer, I want to know what RHDHV does, so I can tell others P2, P4 P5, P6,
P7, P8,
P10
C.2. As an influencer, I want to know who works at RHDHV, so I can contact them P2, P3 P5
C.3. As an influencer, I want to know the vision of RHDHV P2 -
D.1. As an employee, I want to find a project to show to a (potential) client P2 P5
D.2. As an employee, I want to know what RHDHV does, so I can tell others P2, P4 P5, P6,
P7, P8,
P10
A.3. As an expert, I want to find a local office, so that I can visit them. P2, P3 -
A.4. As an expert, I want see upcoming events, so that I can subscribe to an event. P2 -
A.5. As an expert, I want to see news, so that I can stay up-to-date on (general)
developments in my field of expertise.
P2 -
A.6. As an expert, I want to see a specific campaign, so that I can get information. - -
E.1. As a future employee, I want to get information about (working for) RHDHV, so
that I can find out if I want to apply for a job
P2 P9
E.1.a. As a furture employee, I want to read general information about (working for)
RHDHV
P2 P9
E.1.b. As a future employee, I want to apply for a job - P9
E.1.c. As a furture employee, I want to see what kind of projects they have done in my
area of expertise
P2 P6
E.1.d. As a furture employee, I want to see if they offer jobs in my country and in my
area of expertise
P2 P9
E.1.e. As a future employee, I want to contact RHDHV to get more information P3 P5
F.1. As a press member, I want to find information about RHDHV, so that I can use it
for a press item.
P2 P5, P6,
P7, P8,
P10
F.1.a. As a press member, I want to find a press release P2 -
F.1.b. As a press member, I want to find general company information to use in my item P2 -
F.1.c. As a press member, I want to find project images, employee images and corporate
identity assets to use in my item
P2 P6
Functional Design RHDHV Corporate website Page 12 / 71
4 Processes
The processes described in this chapter will cover the goals which are described in the previous chapter.
4.1 Minimum viable solution
P1 Search for information
P2 Browse to information
P3 Find contact information
Functional Design RHDHV Corporate website Page 13 / 71
P4 Share information
Functional Design RHDHV Corporate website Page 14 / 71
4.2 Improved Solution
P5 Find contact information (lightbox)
P6 Browse to projects
P7 Browse to services
Functional Design RHDHV Corporate website Page 15 / 71
P8 Find cross-content
Markets
Countries
Services
Functional Design RHDHV Corporate website Page 16 / 71
Projects
P9 Browse to jobs
P10 Brows to markets
Functional Design RHDHV Corporate website Page 17 / 71
5 Sitemap
The sitemap is a schematic view of the page structure. For each page the applied template is mentioned. The
sitemap describes the default page structure, which also defines the position of the page used for navigation with
the web trail. Crosslinks between pages are not specified in the sitemap but in the description of the individual
functionalities.
5.1 Sitemap minimal viable solution
Functional Design RHDHV Corporate website Page 18 / 71
5.2 Sitemap improved solution
Functional Design RHDHV Corporate website Page 19 / 71
6 Templates
This chapter specifies all templates used in the sitemap from the previous chapter. Several pages in the sitemap can
have the same template because their layout is (virtually) the same. For each template a short description is given
and the functionalities are specified. These are references to the functionalities described in the next chapter.
Each template is represented as a wireframe. A wireframe is a schematic view of the functionalities and their
allocation on the page. The dotted orange line indicates that the inside components are optional and the sorting
can be freely determined. Wireframes do not indicate design. Design can deviate visually from the wireframe but
will have the same functionalities.
Every functionality is described extensively in the next chapter because of the fact that one functionality may
appear on several templates.
Functional Design RHDHV Corporate website Page 20 / 71
6.1 Corporate website (minimal viable solution)
Functional Design RHDHV Corporate website Page 21 / 71
T1 (Country) Homepage
F1
F2
F3
F4
F5
F6
F7
F8
F9
F5
F5
Functional Design RHDHV Corporate website Page 22 / 71
T2 General overview page
F1
F9
F7
F8
F2
F3
F4
F5
F6
F10
F11
F12
F19
Functional Design RHDHV Corporate website Page 23 / 71
T3 General detail page
F1
F2
F9
F12
F10
F11
F6
F7
F8
F3
F5
F13
F19
Functional Design RHDHV Corporate website Page 24 / 71
T4 Search result page
F8
F8
F14
F15
F16
F9
F1
Functional Design RHDHV Corporate website Page 25 / 71
T5 Contact page
F1
F9
F3 F12
F12 F17
F18
The global head office
is always displayed,
independent of the
selected country
Functional Design RHDHV Corporate website Page 26 / 71
T6 iFrame page
F21
F1
F9
Functional Design RHDHV Corporate website Page 27 / 71
T7 Sitemap
F1
F9
F12
F12
F22
Functional Design RHDHV Corporate website Page 28 / 71
T8 Offices page
The global head office
is not displayed if
different country than
default country is
selected (for minimal
viable version)
F17
F1
F9
F20
Functional Design RHDHV Corporate website Page 29 / 71
6.2 Corporate website (improved solution)
Functional Design RHDHV Corporate website Page 30 / 71
T9 Office detail page
To be defined
Functional Design RHDHV Corporate website Page 31 / 71
T10 Markets landing page
F1
F9
F23
Functional Design RHDHV Corporate website Page 32 / 71
T11 Market overview page
F1
F3
F23
F6
F6
F12
F2
F9
Functional Design RHDHV Corporate website Page 33 / 71
T12 Sub-market page
F1
F2
F9
F23
F3 F11
F6
F6
Functional Design RHDHV Corporate website Page 34 / 71
T13 Contact lightbox
F18
F24
Functional Design RHDHV Corporate website Page 35 / 71
T14 Services landing page
F11
F9
F1
F7
F5
F8
F3
Functional Design RHDHV Corporate website Page 36 / 71
T15 Service detail page
F11
F7
F12
F8
F1
F9
F10
F13
Functional Design RHDHV Corporate website Page 37 / 71
T16 Project detail page
F2
F1
F11
F13 F6
F6
F25
F26
F27
Functional Design RHDHV Corporate website Page 38 / 71
7 Functionalities
The functionalities used in the different templates from the previous chapter are specified below. Some of these
functionalities are applied in more than one template.
7.1 Template functions
F1 Header
Function
1 Logo of RHDHV.
This is clickable and links to the homepage (T1)
2 Meta and main navigation
As defined in the sitemap of chapter 4
3 Search field
Search query applied on all content
o If user clicks the magnifying glass or uses the enter key
Search result page (T4) is displayed after query
4 Language selector
Default language selection is based on the language of the visitor’s browser
Available languages are Dutch and English for release 1.0
For every country, all available languages are displayed in a dropdownlist
o Visitor can change the language by selecting a different language
If a language is selected, all content will change into the selected language
5 Country selector
Default country selection is based on IP-address of visitor
Visitor can change country selection from a dropdownlist
1 2 3
4 5
Functional Design RHDHV Corporate website Page 39 / 71
F2 Pushbox component
Function
1 Image
Image is clickable, manageable in CMS
No maximum of images (content manager responsibility to make number of item fit on 1 line of
thumbs)
No fixed height
2 Thumbs
Thumb in relation with displayd image is marked as active
No maximum of thumbs
If different thumb is clicked than active thumb, the image of the inactive thumb is displayed
3 Title, sub-title
Title
o Optional in CMS
o Maximum of 1 line
Sub-title
o Optional in CMS
o Maximum of 1 line
1
2
3
Functional Design RHDHV Corporate website Page 40 / 71
F3 Main text/Image block component
Function
1 Title
Maximum of 1 line
Manageable in CMS
2 Text
WYSIWYG Editor
3 Image (for minimal viable version)
Optional
Manageable in CMS
Images for events, news and projects need a capture and copyright statement. We will use the Alt
text functionality for this. If this text becomes to long, the content manager can use the text of the
relevant item instead.
4 CTA
Optional
Link location is manageable in CMS
Label on button is manageable
Internal link (same window)
1
2
4
3
Functional Design RHDHV Corporate website Page 41 / 71
F4 Content components
Function
1 Title
Title is optional
Manageable in CMS
Maximum of 2 lines
Link can be added so that title becomes clickable
2 Date
Fields available in CMS to add a start- and end-date
o Selection is made using a calendar functionality (no string)
o Both are optional fields
3 Image
Image is optional
Manageable in CMS
Link can be added so that image becomes clickable
Images for events, news and projects need a capture and copyright statement. We will use the Alt
text functionality for this. If this text becomes to long, the content manager can use the text of the
relevant item instead.
4 Text
Text is optional
Manageable in CMS
Link can be added (does not make the whole text clickable)
1
2
3 4
Functional Design RHDHV Corporate website Page 42 / 71
F5 General teaser component
Function
1 General teaser component
This component can be used to display markets
This component can be used to display general or country specific projects/news
o If a country is selected (selected by default on IP-address or selected by user with the
country selector in the header (F1)) which has no local content, only the general
component(s) are displayed
o If a country is selected (selected by default on IP-address or selected by user with the
country selector in the header (F1)) which has local content, the general and country
specific components are displayed (local first, general second)
2 Title
Manageable in CMS
Maximum of 1 line
If the active country has local content for projects or news:
o Label + [Selected country]
3 Date
Fields available in CMS to add a start- and end-date
o Selection is made using a calendar functionality (no string)
Both are optional fields
4 Image
Image is optional
Manageable in CMS
Link can be added to the related item (image becomes clickable)
Images for events, news and projects need a capture and copyright statement. We will use the Alt
text functionality for this. If this text becomes to long, the content manager can use the text of the
relevant item instead.
2
3
4 5
6 7
1
Functional Design RHDHV Corporate website Page 43 / 71
Function
5 Title and introtext
Title of the item (maximum of 1 line)
Introtext of the item
o Maximum of 2 lines
o Link ‘Read more’ (label) to the related item
6 Link
Links to General overview page (T2)
If the active country has local content for projects or news:
o Label + [Selected country]
o Links to General overview page (T2) (with filtered projects/news for selected country)
7 Link
Links to General overview page (T2
If the active country has no local content for projects or news:
o Label
o Links to General overview page (T2) (with unfiltered projects/news)
Functional Design RHDHV Corporate website Page 44 / 71
F6 Forward links component
Function
1 Title
Label, manageable in CMS
Maximum of 2 lines
2 Links
Option 1: Generated by content manager
o Link locations manageable in CMS by content manager
Option 2: Automatically generated by CMS
o Link locations are generated based on related content (news, markets, services, or
projects)
1 column
No maximum of lines per column
Sorted from A-Z
Icons in front of every line (for enhanced version)
1
2
Functional Design RHDHV Corporate website Page 45 / 71
F7 Search services component
Function
1 Title
Label
2 Text
Optional
Manageable in CMS
Possibility to add links within the text
3 Link
Optional
Label
Links to Service group overview page (T2)
4 Search field
Search query applied on all services
o If user clicks the magnifying glass or uses the enter key
Search result page (T4) is displayed after query
1
2
3
4
Functional Design RHDHV Corporate website Page 46 / 71
F8 Text block component
Function
1 Title
Label
2 Text
Manageable in CMS
3 Link
Label
Links to Contact page (T5)
1
2
3
Functional Design RHDHV Corporate website Page 47 / 71
F9 Footer
Function
1 Text and links
Not manageable in CMS
Link re-directs to Contact page (T5)
2 Footer links
3 columns (not manageable in CMS)
o First column
Home, re-directs to Homepage (T1)
Markets, re-directs to General overview page (T2)
Services, re-directs to General overview page (T2)
Projects, re-directs to General overview page (T2)
News, re-directs to General overview page (T2)
About us, re-directs to General overview page (T2)
o Second column
Contact, re-directs to Contact page (T5)
Offices, re-directs to General overview page (T2)
Careers, re-directs to General overview page (T2)
o Third column
Twitter, re-directs to social media page
Link-location depending on country selection (URL manageable per
country bij content manager in CMS)
Facebook, re-directs to social media page
Link-location depending on country selection (URL manageable per
country bij content manager in CMS)
Linked-in, re-directs to social media page
Link-location depending on country selection (URL manageable per
country bij content manager in CMS)
Youtube, re-directs to Youtube page
Link-location depending on country selection (URL manageable per
country bij content manager in CMS)
1 2
Functional Design RHDHV Corporate website Page 48 / 71
F10 List component
Function
1 Title
Label, manageable in CMS
Maximum of 1 line
2 Links
Link locations manageable in CMS
Maximum of 2 column
No maximum of lines per column
Sorted from A-Z
3 For services only
Possibility to use this component to create an A-Z overview of all services
Functionality should be available to generate the links automatically from the CMS
o If services are available in CMS with starting letter A, all relevant services for this letter
are displayed in the list of links (2)
o This applies for all letters B, C, … , Z
o Letter (e.g. ‘A’) will be displayed in the title (1)
1
2
3
Functional Design RHDHV Corporate website Page 49 / 71
F11 Contact block component
Function
1 Title
Label, manageable in CMS
Maximum of 1 line
2 Image
Manageable in CMS
3 Contact person details
Name (maximum of 2 lines)
Function & location (maximum of 2 lines)
Phone number (maximum of 1 line)
Email address (maximum of 1 line)
Linked-in URL
Link for personal Twitter account
4 CTA-button
Label on button is manageable
Links to Contact page (T5)
5 More contacts
Label
Always displayed under the first contact person (default visible)
When + is clicked, more contact persons are dislayed ( + is changed in - )
o Maximum of 2 extra contact persons
o (2), (3) and (4) is displayed for every contact person
When - is clicked, first contact person is dislayed and the other are hidden ( - is changed in + )
1
2 3
5
4
Functional Design RHDHV Corporate website Page 50 / 71
F12 Minimal teaser component
Function
1 Title
Label, manageable in CMS
Maximum of 1 line
2 Date
Fields available in CMS to add a start- and end-date
o Selection is made using a calendar functionality (no string)
o Both are optional fields
3 Image
Manageable in CMS
Images for events, news and projects need a capture and copyright statement. We will use the Alt
text functionality for this. If this text becomes to long, the content manager can use the text of the
relevant item instead.
4 Sub-title
Label, manageable in CMS
Maximum of 1 line
5 Link
Manageable in CMS
1
2
4 3
5
Functional Design RHDHV Corporate website Page 51 / 71
F13 Article component
Function
1 Text, sub-titles, image
WYSIWYG Editor
2 Social sharing (as basic as possible for minimal viable version)
Linked-in
3 Download
Download item manageable in CMS
Download title manageable in CMS
1
2 3
Functional Design RHDHV Corporate website Page 52 / 71
F14 Search results
Function
1 Search results
Label: [number of search results] Search result for [search term]
2 Search term
Search term used for search query is displayed in field
If clicked, current search term is removed and user can type in a new search term
If user clicks CTA, new search query is applied
3 Search result items
Title on top
Text, maximum of 2 lines
Link: URL of search result
o Clickable and re-directs to location of search result
4 Number search results
Total number of search results per page is 20
If user changes the displayed page, this is updated
1
2
3
4
Functional Design RHDHV Corporate website Page 53 / 71
F15 Pagination
Function
1 Previous and next buttons
If user clicks previous button, page before the active page is displayed
o This button is inactive if first page is the active page
If user clicks next button, page after the active page is displayed
o This button is inactive if last page is the active page
2 Page numbers
Active page number is highlighted
If there are more than 5 pages, 5 page numbers (the active page in the middle) will be followed by
…. , followed by the last page number
If the are 5 or less pages, the page numbers are displayed from first to last page
Every page number is clickable, if clicked the page number will be the active page
1 2
Functional Design RHDHV Corporate website Page 54 / 71
F16 No search results
Function
1 Search results
Label: No search results for [search term]
2 Test
Maximum of 1 line
Link to Contact page (T5)
3 Search term
Search term used for search query is displayed in field
If clicked, current search term is removed and user can type in a new search term
If user clicks CTA, new search query is applied
1
2
3
Functional Design RHDHV Corporate website Page 55 / 71
F17 Office component
Function
1 Title
Label, manageable in CMS
Maximum of 1 line
2 Image
Manageable in CMS
3 Office details
Title (maximum of 1 line)
Sub-title (maximum of 1 line)
Address line 1 (maximum of 1 lines)
Address line 2 (maximum of 1 lines)
Address line 3 (maximum of 1 lines)
Phone number 1 (maximum of 1 lines)
Phone number 1 (maximum of 1 lines)
Email address (maximum of 1 lines)
String A, universally applicable (maximum of 1 line)
String B, universally applicable (maximum of 1 line)
4 Link
Label is manageable
Links to Offices landing page (T8)
1
2
3
4
Functional Design RHDHV Corporate website Page 56 / 71
F18 Contact form
Function
1 Title
Label, manageable in CMS
Maximum of 1 line
2 Contact details
Name (mandatory, no verification)
Company (mandatory, no verification)
Email address (mandatory, no verification)
3 Location selectors
First dropdown lists regions
o Default selection is active country
Second dropdown lists offices in selected region
o Default selection is active office
4 Message details
Subject field
o Field for text (mandatory, no verification)
Message field
o Field for text (mandatory, no verification)
o No maximum of lines
o Scroll-bar wil become active if number of lines is higher than 10
1
2
3
4
5
Functional Design RHDHV Corporate website Page 57 / 71
Function
5 CTA-button
Checkbox
o Data from field Email address is added to CC of email (plain text) which is send to
selected office
Button
o Label on button is manageable
o Sends all data from form to selected office
Functional Design RHDHV Corporate website Page 58 / 71
F19 Submenu component
Function
1 Fly-out
Displays all sub-level pages
Automatically generated by CMS based on page-tree
Every sub-level page is clickable and re-directs to the selected page
1
Functional Design RHDHV Corporate website Page 59 / 71
F20 Office lister component
Function
1 Title
Country
Automatically generated from CMS
Maximum of 1 line
2 Links
Offices
Automatically generated from CMS
Maximum of 3 columns
No maximum of lines per column
Sorted from A-Z
1
2
Functional Design RHDHV Corporate website Page 60 / 71
F21 iFrame
Function
1 iFrame
Height and width of frame can be controlled in CMS
1
Functional Design RHDHV Corporate website Page 61 / 71
F22 Sitemap
Function
1 Title
Title, maximum of 1 line
2 Text
Manageable in CMS
No maximum of lines
3 Sitemap overview
Indexing every avalaible page
Levels applied
1
2
3
Functional Design RHDHV Corporate website Page 62 / 71
F23 Big teaser component
Function
1 Image
Manageable in CMS
Link can be added so that title becomes clickable
Images for events, news and projects need a capture and copyright statement. We will use the Alt
text functionality for this. If this text becomes to long, the content manager can use the text of the
relevant item instead.
2 Title
Title is optional
Manageable in CMS
Maximum of 1 line
Link can be added so that title becomes clickable
3 Date
Fields available in CMS to add a start- and end-date
o Selection is made using a calendar functionality (no string)
o Both are optional fields
4 Text
Text is optional
Text of the item
o Maximum of 5 lines
5 Link
Link is optional
Link can be managed in CMS
1
2
3
4
5
6
Functional Design RHDHV Corporate website Page 63 / 71
Function
6 Link
Link is optional
Link can be added in CMS
F24 Lightbox
Function
1 Lightbox
If ‘X’ is clicked, lightbox is closed
2 Contact form
Same functionality as F18
1
2
Functional Design RHDHV Corporate website Page 64 / 71
Functional Design RHDHV Corporate website Page 65 / 71
F25 Images component
Function
1 Title
Label, manageable in CMS
Maximum of 1 line
2 Images
Manageable in CMS
2 images per line
No maximum of images
If image is clicked, enlarged image is displayed in lightbox (F24)
Images for events, news and projects need a capture and copyright statement. We will use the Alt
text functionality for this. If this text becomes to long, the content manager can use the text of the
relevant item instead.
1
2
Functional Design RHDHV Corporate website Page 66 / 71
F26 Related items carousel
Function
1 Title
Label, manageable in CMS
Maximum of 1 line
2 Images
Manageable in CMS
Display of 3 images
Link can be added so that image becomes clickable
If user clicks left arrow, previous image is displayed
o This button is inactive if first image is already displayed
If user clicks right arrow, next image is displayed
o This button is inactive if last image is already displayed
No maximum of images
Images for events, news and projects need a capture and copyright statement. We will use the Alt
text functionality for this. If this text becomes to long, the content manager can use the text of the
relevant item instead.
3 Sub-title
Manageable in CMS for every image
Maximum of 2 lines
Link can be added so that sub-title becomes clickable
1
2
3
Functional Design RHDHV Corporate website Page 67 / 71
F27 Location component
Function
1 Title
Label, manageable in CMS
Maximum of 1 line
2 Map
Manageable in CMS
Geo-location has to be added by content manager in CMS to display location
1
2
Functional Design RHDHV Corporate website Page 68 / 71
8 Glossary
Term Description
Ajax AJAX (Asynchronous JavaScript And XML) is a term for interactive web pages on which
asynchronous requested data is collected from the web server. In this way, web pages do not have
to be refreshed in full.
Teaser A functionality that gives the visitor a short and teasing impression of the item that is linked to.
This can be an attracting text with an image or a short enumeration of items (for example the
three most recent news messages with a link to the full overview of news messages).
Back end The back end is the part of the software system in which processing takes place and that is not
visible to visitors. The CMS and the back office application are considered to be back end.
Back office
application
A back office application is an application that operates in the background and is not visible to the
visitor. Examples are administration software or a production application.
Breadcrumb A breadcrumb trail shows the visitor where he finds himself relative to the homepage. It shows the
path from the homepage to the current page. This trail represents the path in the site structure, it
is not necessarily the path a visitor followed to reach the current page.
Client side Client side scripting is the technology used for executing scripts in the visitor’s browser.
CMS CMS means Content Management System. A CMS is a web application that enables people to
publish documents and data on the website in a simple way without needing much technical
knowledge. The CMS is secured and is used by editors of an organization to edit the contents of
their website.
Cookie Cookies are small amounts of information that are sent to the browser by a server with the
intention of being saved locally and sent back to the server at the next visit. This is a simple way of
remembering information for a specific internet user so that this information does not have to be
entered over and over again (for example login data). Cookies may also be used to monitor surfing
behavior.
Cookies can be used in a session (information recedes when the browser is closed) or permanently
(information is saved and will be available the next time the browser is used).
CRM Customer Relationship Management is a procedure as well as a technique in which optimizing all
customer contacts is the mail goal. It is tried to offer each customer an individual value proposition
based on his/her wishes. Moreover the thought behind CRM is that the more value a customer
represents, the better a treatment he gets.
Dropdown
list
A dropdown list is a screen element in which the visitor can select one item. When a dropdown list
is inactive, only one value is shown. When the dropdown list gets activated, all items in the list are
shown (expanded). When the user selects a new item from the list, the list will be hidden and the
selected item is shown.
Front-end The front end is the part of the software system the user Works with.
Functional Design RHDHV Corporate website Page 69 / 71
Term Description
Google Maps Google Maps is a service from Google Inc. that offers the opportunity to limit a search by only
searching in a specific geographical location. The purpose of Google Maps is to help people find
companies or businesses nearby. Google Maps may also give additional information about the
company or business.
Iframe IFrame (from inline frame) is a HTML element that enables another HTML element to appear in the
main document. Iframes are mostly used to show content from another website or external
application in a website.
Light box A light box is a layer that is shown on top of the website and may contain an image or other
elements. The website itself remains on the background but gets dark and will not be readable
anymore. The light box needs to be closed to view the website in a normal way again.
The advantage of the light box is that additional information can be shown without the user
needing to navigate away from the current web page or to extract the user from the current
process.
Mouse over Mouse over is an action of the user with the mouse on a specific screen element in the
website/application. By a mouse over, a text may appear or a button may change color for
example.
RIA A Rich Internet Application (RIA)is a term used for interactive internet applications that convey the
feeling of a desktop program (for example a text editor or an agenda). Rich Internet Applications
respond to data entered by the user without another page needing to be opened.
Rich Internet Applications differ from the basic functionalities of websites. They give the user a
richer user experience that is characterized by a better feedback and dynamic elements. In this
way the user experience of the web application nears the user experience of a desktop program.
Server side Server side scripting is the term commonly used for the technology that is used on the internet to
dynamically generate HTML pages that get another content and/or design on the base of
parameters. Server side scripts are processed on the server and not in the browser.
Session A session is a temporary connection between a browser and a server. During a session information
is exchanged between the browser and the server. The session is closed by closing the browser or
after a certain amount of time as set on the server.
Template A template is a graphical form that is meant for repeated use. A template describes the elements
on a page. The template can be used on several locations in the website.
Tooltip A tooltip is an often used screen element that works together with the mouse pointer. The user
hovers the mouse pointer over a screen element, without clicking, and a small text block appears
that contains information about the screen element that is clicked.
URL A Uniform Resource Locator (URL) is a label that refers to a source of information, for example a
web page or another file.
WYSIWYG WYSIWYG is an acronym for What You See Is What You Get. The term is used for computer
programs and means that the result will be exactly the same as is shown on the screen, inclusive of
layout and formatting: bold, character size, colors etc.
Functional Design RHDHV Corporate website Page 70 / 71
Term Description
XML eXtensible Markup Language (XML) is a standard for defining formal markup languages for the
representation of structured data in the form of unformatted text. This representation can be read
by both computers and people.
In other words: XML is a way of saving data in a structured way. This way is defined and can be
used by everyone. It is designed to be readable by both computers and people. XML is not only
suitable for saving data but also for sending data through the internet. The AJAX method uses XML.
Web widget A web widget is a standalone program that can be installed and executed within a HTML based
page. An example that is often used is the showing of news messages of an external site on the
own website.
Functional Design RHDHV Corporate website Page 71 / 71
9 Approval
By signing below RHDHV confirms that this Functional Design is approved. Both RHDHV and eFocus are aware that
developments during the implementation of the website can result in necessary adjustments.
The indicated hours needed for implementation are based on this Functional Design. The website will initially be
developed as described in this document. Before the release the website will be available to RHDHV for testing
during a set amount of time (to be determined during the project). If the test results imply changes are needed,
these are assessed by project managers from RHDHV and eFocus. In this assessment a clear distinction is made
between functional changes and changes as a result of failures in the website.
Failures in the website will be corrected according to the description in this Functional Design.
If functional changes are needed, an indication will be given for the costs of changing the Functional Design and the
implementation of these changes. After approval by RHDHV the changes will be implemented in a new release of
the website.
If you agree with this proposal we kindly request an initialed and signed copy of this document.
Name:
Function:
Date:
Place:
Signature: