Instructor

Rocco Panacci 

Group Members

1. Amandeep Singh
2. Khushboo Umrigar

PROJECT: UX TOOLING

CREATE DROP-IN UI COMPONENTS AND/OR TOOLS TO AUGMENT THE STANDARD BROWSER UI TO IMPROVE THE OVERALL USER EXPERIENCE FOR USERS READING AN ARTICLE

Article content

Write and style a document (topic of your choosing) using HTML and CSS. Ensure the content is vertically long enough to allow the browser to scroll at least three to four times the height of a browser window (assume an average height screen, with a browser using its default font size).

To help guide you and get you started, use the document outline, structure, and lorem ipsum content, written in the included file index.html, replacing the text and images with your original content.

For styling, consider responsive layouts, colour balance, fonts, formatting, and consistency. But keep it simple! Spend your time on the functionality that improves the experience before all else.

Deliverables

For this project, you will build the following functional UI components, tools and functionality with Javascript, meant to improve the article's reading experience.

A) Fixed heading when scrolled

When the user has scrolled past the article's primary heading, they may not have any context for what they're reading if they walk away, are interrupted or were sidetracked. Design a creative UI solution for bringing context to what is in the viewport by using a fixed element. This UI should be shown any time the primary heading is not being displayed. Get creative.

B) Outline/heading landmarks (scrollspy)

Design a way to represent the document outline and show the user their progress as they scroll through it. The user should be able to easily view the article's outline and move a desired portion of the document into the viewport at any time. This UI may can be on display at all times, or shown/hidden through the handling of an Event.

• An example of a "srollspy" (see the "Table of Contents" panel in a desktop browser): https://create.arduino.cc/projecthub/MoritzDornseifer/iot-cloud-enabled-alarm-clock-1e5119

C) Controlled content reveal (carousel, slides, tabbed component, etc)

Design a component that will guide a user though content that is split into multiple parts. The content (text, images, or other media) may be controlled by the user or the application (timer, events, etc). The content may be of any type or medium (text content, images, videos, etc).

D) Simulate infinite content

When a user reached the bottom of a document, maintain the fluidity of the experience and engagement by loading new content. More important than the loading of content (or the type of content loaded), is the UI and its impact on the UX. Place your focus on responsible engagement and ensure the user is made aware of all new content being added to the current page automatically (either upcoming, or already loading) while promoting a seamless, low-friction, ethically responsible experience.

• As an example, consider how Netflix transitions between shows or movies: The picture is shrunken to the corner while credit are rolling. An advertisement for new content is shown around it in the background. The name of the next show to be autoplayed is shown with a countdown timer and an option buttons.

References

http://jsfiddle.net/8PkQN/1/

https://codepen.io/wernight/details/YyvNoW

https://wddm-w20.slack.com/archives/CS51K1276/p1587698383013300