Project Documentation

1.1 Overview

This project introduces a framework for virtual exploration and narrative engagement with a collection of physical artifacts. The exhibition focuses on items that have sparked debate, challenged societal norms, or catalyzed unexpected impacts, providing a thought-provoking examination of how controversy can drive societal change.

The digital companion facilitates immersive experiences for visitors, offering in-depth narratives and multimedia content that illuminate the significance of each artifact. Through the digital application, visitors are invited to embark on a journey through history, enabling them to explore, learn, and contemplate the controversies and innovations that have shaped our collective past and present.

As visitors navigate the exhibition, the app offers detailed descriptions and narratives tailored to enhance their understanding based on their interests and background. For those on the go, concise summaries highlight key facts and significance. For educators and curious minds, delve deeper with pedagogical insights and historical contexts, fostering a deeper appreciation of each artifact's impact.

1.2 Objectives

The main objectives of the web application for visiting the exhibition are to provide users with an interactive and informative experience that enhances their engagement with the physical artifacts on display. The website will serve as a comprehensive digital companion, aiming to achieve the following:

• Enhanced Engagement: Create an immersive experience that allows users to explore each exhibit in detail through multimedia elements such as images and interactive info boxes.
• Educational Value: Provide informative narratives and historical contexts tailored to different levels of interest and understanding, including concise summaries for quick insights and detailed explanations for deeper exploration.
• Accessibility and Convenience: Facilitate easy navigation through the exhibition via online explanations, ensuring visitors can access relevant information seamlessly on their personal devices.
• Reflection and Learning: Foster critical thinking and reflection on the controversies and innovations represented by each object, prompting users to consider their broader societal and historical impacts.
• Technical Reliability: Ensure the web application is robust, user-friendly, and compatible across various devices, providing a smooth and uninterrupted user experience during the exhibition visit.
• Promotion of Cultural Heritage: Promote cultural heritage and historical awareness by presenting the stories and significance of each artifact in a compelling and accessible manner.

1.3 Requirements

See here the full dataset of the items.

2.1 Displayed Objects

The team selected the following items.

2.2 Map of the Exhibition

The exhibition map has the purpose to guide the user during the exhibition. The user selecting a specific narrative will see where each object related to that narrative is placed in the exhibition space. Also, there is the possibility to access the description of each object.

2.3 Narratives

The texts of the visit are organized around a set of narratives, guiding visitors through the rooms in a purposeful way rather than allowing them to wander randomly. This structure encourages visitors to move back and forth as they follow the specific storytelling approach of the app. As a result, the order, and even the inclusion, of each item in the visit depends entirely on the narrative chosen by the visitor, with the interface adjusting accordingly.

By choosing from these narratives, visitors can tailor their experience to their interests, with the interface dynamically adjusting to support their chosen perspective. This tailored approach not only enriches the visitor's engagement with the content but also enhances the overall effectiveness of the storytelling within the app.

(a) Historical Period

This narrative breaks down the content into specific time periods, including the XV-XVII centuries, XVIII-XIX centuries, the first half of the XX century, the second half of the XX century, and the XXI century. This approach allows visitors to experience the exhibits in chronological order, providing a historical context to the artifacts.

(b) Topic

Visitors can explore the exhibits through various thematic lenses, such as Women's History, the Scientific Revolution, the Ethics of War, Religious Dissent, Provocative Art, and Digital Privacy. This narrative emphasizes the thematic connections between different artifacts and events, offering a deeper understanding of the issues and ideas represented.

(c) Artifact Type

This narrative categorizes the exhibits by their types, including Event, Text, Tool, Artwork, Garment, and Weapon. By focusing on the nature of the artifacts themselves, this approach allows visitors to explore the diverse forms of historical and cultural objects on display.

To see more about these narratives, visit the online platform of the application, either in its desktop version or smartphone.

4.1 Information Architecture

To create a dynamic visualisation of informations about each object avoiding the use of multiple html pages and given that a server use was not allowed, it was decided to store in a json file all the info needed. Using an async function when the html document is loaded the file json is read and the objects informations are stored in variables. A default show is set (the items of the first period, XV-XVII century), unless the redirect variable is set to true, as previously explained. The data of each object are dinamically organized in a table. Here the json file: items.json

Explanation of the data structure: the "@sort" attribute was set according to the historical data. Its a value that goes from 1 to 20 and it's used to order the object when displayed in any narrative; the "shortName" is used to populate the title row of the table element; the "image" is used to retrive the corresponding image in the assets to be shown beside the table; "shortInfo", "longerInfo" and "fullInfo" are used to populate the description element. On "fullInfo" we will come back soon; the information inside "info" is used to populate the table element. "Title" was used to populate the Header of the table; "Exhibition" "Themes" "Historical Period" "Typology" are used to populate buttons that are used to create an objects set of that specific narrative.

About the fullInfo link. It was thought it would be more practical to write the complete description of the object in a separate html object in order to better organize the content and to not bear excessively weight on the json file. Here an mpck example of a fullInfo html file to understand the structure: example

4.2 User Experience (UX) and Navigation Structure

The website was developed to let the user to see the exhibition from different points of view, that's why the narratives, the timeline and the exhibition map have their own pages.

In the homepage there is an introduction to the exhibition and all the necessary info to go to see the exhibition. From the home is possible to access to the other parts of the website using the navigation bar or the buttons placed near the exhibition introduction.

In the Narratives page, the user can fully understand the meanings carried by the objects. Each narrative is briefly, but sufficiently explained and the user is allowed to access the exploration of the exhibition starting from whatever narrative he/she wants by simply clicking a button.

In the Timeline there is the historical distribution of the objects along a line. The intent here is to temporally locating the objects to give the user a diachronic idea of the exhibition. Each object is placed by its historical data and the user can read the name of the object and, by clicking a button, to access its description. A side index helps the user to scroll directly to a specif period.

The exhibition map has the purpose to guide the user during the exhibition. The user selecting a specific narrative will see where each object related to that narrative is placed in the exhibition space. Also, there is the possibility to access the description of each object.

The Items page contains the descriptions of all the objects. To this page all the others pages point when it comes to access the description of an object.
Each object is displayed with a table of information on the left, a picture of it and a description that can be more or less detailed and rich accordingly to the will of the user. Indeed, thanks to two buttons the user can expand or reduce the description.
In this page there are two ways to choose the objects to see:

1. Jumping from a single narrative to another thanks to the buttons in the table of informations.
2. Filtering, selecting multiple kinds of narratives to see a more specific set of objects using the filters right below the navigation bar.

In the longest pages there is a button that will help the user to quickly go back to the top of the page. This is useful to quickly go to the navigation bar, too; given that it was decided to leave the navigation bar at the top of each page in order to leave more space for the viewport content of each page.

Animations are distributed all over the website to guide the user in the navigation of the website (e.g. the arrow pointing down in the homepage), to stimulate its attention (e.g. the entrance of the objects in the timeline), and to focus on specific parts of the pages (e.g. the use of a opaque background in the narratives page to focus on the reading of each a narrative).

4.3 Technical Implementation

The technical implementation of this project revolves around dynamically handling and displaying data loaded from a JSON file. Its technical implementation is centered on creating an interactive experience where data is fetched, filtered, sorted, and displayed in response to certain predefined rules or user actions.

At its core, the project begins by leveraging the `DOMContentLoaded` event listener to ensure all DOM elements are fully loaded before executing JavaScript. Once the event triggers, an asynchronous function is executed to fetch the .json file, which contains both the data and metadata needed for the application. This file is parsed into JavaScript objects, and key pieces of information, such as the starting narrative, value, and items, are extracted for further use.

The project utilizes a prepareNarratives function to process the data according to the selected narrative and value. This function filters the items array to match specific conditions based on the metadata. It then sorts the filtered items using a custom comparator that orders them based on a sorting property (`@sort`). If no matching items are found after filtering, the function reverts to using the entire dataset. Once the relevant data is prepared, additional helper functions are called to update the state of the application and render the information for the user.

The technical design is modular, with specific tasks divided into discrete functions. The use of promises, asynchronous operations, and event listeners highlights the project's focus on asynchronous workflows and responsive design. Callback functions are used to handle events and trigger processes, such as updating the DOM after preparing the narratives. The implementation adheres to modern JavaScript standards, including `async`, optional chaining (`?.`), and array methods like `filter` and `sort`. These tools help streamline the handling of dynamic data and ensure the project is maintainable and scalable.

6.1 Visual Design and Layout

The website for "Forbidden Curiosities" features a minimalist, modern design with a clean layout. It uses bold typography, clear section headers, and ample white space to enhance readability. The home page showcases striking visuals, including a header image with a compelling title and a scrolling interface. Informational sections about the exhibition and its logistics are interspersed with artistic visuals and engaging descriptions, maintaining a balanced focus on functionality and aesthetic appeal.

The Home page of the website introduces the theme with bold visuals and concise text, inviting exploration. The Narratives page uses a mix of text and images to tell stories, with a structured, scrolling format. The Items page presents a grid layout showcasing artifacts, blending visuals and short descriptions. The Timeline page organizes information chronologically in a sleek, linear format. The Map page offers an interactive design for spatial exploration. Each page prioritizes readability and immersive visuals while maintaining intuitive navigation.

6.2 Color Usage

The color palette for this website creates a visually engaging and harmonious experience, combining neutral tones, vibrant accents, and deep, contrasting backgrounds. The primary background color, #140221, establishes a dark and dramatic foundation that allows other colors to stand out, while the text color, #e5e5e5, ensures high readability with a soft contrast against the dark background.

Neutral shades like #cacaca and #d1c2adda are used for subtle elements like dividers, providing balance and cohesion without overwhelming the design. Accents such as #f7d9ad and #d7b052 add warmth and elegance, highlighting titles and buttons while maintaining a sense of sophistication.

Vivid colors like #542E71 for home panels and #de7b0a for links and narrative buttons introduce energy and vibrancy, drawing attention to interactive and dynamic sections. The footer color, #3b373dc7, complements the overall theme with a muted tone, creating a seamless transition at the bottom of the page. The deep purple shade, #2B1F4D, ties the palette together with a sense of depth and richness, reinforcing the site's bold yet approachable aesthetic.

Why choosing a dark background color?

• Enhanced Focus on Content:
  Dark backgrounds help to direct the user's attention to the content, such as album art, track names, and playback controls. By providing a dark backdrop, the vibrant colors of images, buttons, links and other visual elements stand out more prominently. This creates a more immersive experience where the primary focus remains on the content and its associated visuals.
• Reduced Eye Strain:
  For users who spend long periods using the app, black or dark backgrounds can reduce eye strain compared to bright, white backgrounds. This is particularly beneficial in low-light environments such a museum exhibition, where dark mode can be easier on the eyes and more comfortable for extended reading sessions.
• Battery Efficiency:
  On OLED and AMOLED screens, dark backgrounds can contribute to better battery efficiency. These screens work by lighting up individual pixels, so displaying black or dark colors uses less power compared to bright colors. As a result, dark backgrounds can help extend battery life, which is advantageous for users who rely on their mobile devices throughout the day.
• Elegant and Modern Aesthetic:
  Dark backgrounds are often associated with sophistication and modernity. Considering for instance apps like Spotify, which are deeply integrated into the entertainment and music industry, a sleek, dark design can convey a sense of high-end quality and style. This aesthetic aligns well with the app's branding of Forbidden Curiosities project and the overall user experience.
• Improved Visual Contrast:
  Dark backgrounds enhance the contrast of text and interactive elements, making them more readable and visually striking. For instance, white or brightly colored text and icons pop against a dark background, which can improve accessibility and user interface clarity.
• Minimal Distractions:
  Dark backgrounds create a minimalist environment that reduces visual clutter. This focus on simplicity allows users to concentrate on the content and interactions without being distracted by a busy or colorful interface. It promotes a more seamless and enjoyable listening experience.

In summary, a dark color for the background is chosen for its ability to enhance content visibility, reduce eye strain, improve battery efficiency, and maintain a modern aesthetic. It aligns with the app's brand identity and provides a user-friendly experience that supports extended use and visual comfort.