This document provides interaction guidelines for desktop and mobile versions of an IBM/Wimbledon website. For both desktop and mobile, it describes parallax scrolling interactions for the top section including headlines, courts, and labels. It also covers main content sections for desktop and mobile, including sticky navigation, progress bars, and video lightboxes. The mobile version additionally includes "Read more" functionality to reduce page length.

1. June18,2019
IBM/Wimbledon
Interaction
guidelines
1
v0.1

2. 1. Desktop
i. Topsection-Screenelements
ii. Topsection-Parallaxscrolling
iii. Maincontent
2. Mobile
i. Topsection-Screenelements
ii. Topsection-Parallaxscrolling
iii. Maincontent
Tableofcontents
2

3. Desktop
01
3

4. Topsection-Parallax-ScreenelementsDesktop
4
This is the main headline.
This is the centre court.
This is an example of a label.

5. Please review the video to the right.
Topsection-ParallaxscrollingDesktop
Parallax interaction
5
1
Headline
As the user scrolls, the headline moves up, out of
view and fades out.
2
Centre court
As the user scrolls, the court moves up and comes
into view.
3
Labels
As the user scrolls, the smart rays come into view
and then the labels appear.

6. Topsection-ParallaxscrollingDesktop
End of parallax interaction
6
1
1
Once the user reaches the end of the parallax
interaction, they can continue to explore the main
content (See page 7) by further scrolling, or they
can jump to each content area by clicking on the
label.
Amendment added 19 June 2019: Once the
label has finished animating in from the parallax
scroll, each label button should further animate
with a pulse (similar to the “pulse” animation on
here: https://daneden.github.io/animate.css/) in
order.

7. Desktop Maincontent
1
3
7
1
As the user scrolls down the page, this navigation
will stick to the top of the screen. As the user
reaches each section, the title of the section will be
highlighted. There is also a progress bar that
indicates how far along the page the user is.
2 There is no parallax animation on this section.
3
As the user scrolls down the page, all other
elements on the page will contain subtle parallax
movement vertically. A similar interaction can be
found on the “Life of adventure” section on https://
www.beargrylls.com/
2

8. Desktop Maincontent-Videoplayerlightbox
1
3
8
2
1
There is a darkened layer with 80% opacity
and page is still visible in the background.
2
The X button closes the video and returns the
user back to the main page.
3 The video should auto play in a lightbox when
a user clicks on the video from the main page.

9. Mobile
02
9

10. Topsection-Parallax-ScreenelementsMobile
10
This is the main headline.
This is the centre court.
This is an example of a label.

11. Please review the video to the right.
Topsection-ParallaxscrollingMobile
11
1
Headline
As the user scrolls, the headline moves up, out of
view and fades out.
2
Centre court
As the user scrolls, the court moves up and comes
into view.
3
Labels
As the user scrolls, the smart rays come into view
and then the labels appear.
Parallax interaction

12. 1
Topsection-ParallaxscrollingMobile
End of parallax interaction
12
1
Once the user reaches the end of the parallax
interaction, they can continue to explore the main
content by continuing to scroll, or they can jump to
each content area by clicking on the label.
Amendment added 19 June 2019: Once the
label has finished animating in from the parallax
scroll, each label button should further animate
with a pulse (similar to the “pulse” animation on
here: https://daneden.github.io/animate.css/) in
order.

13. Mobile Maincontent
1
2
13
1
As the user scrolls down the page, the navigation
will stick to the top of the screen. As the user
reaches each section, the title in the navigation will
change. There is also a progress bar that indicates
how far along the page the user is.
2
To reduce the length of the page, each section has
some content behind “Read more” functionality.
Tapping on “Read more” will reveal that section in
its entirety. The “Read more” button appears after
the first video or key fact.

14. Mobile Maincontent-Videoplayer
14
Videos on mobile should auto play in the native video player.

15. Thank you
ExperienceDesigner
AlexNguyen
alex.nguyen@ogilvy.com
ContactUs