Ideation
My interaction for this project is "Hover",
I took inspiration from my previous Reading 3 assignment and exapanded its functionalities to look better. It uses the same idea of my response website from Reading 3.
Each website links together to another website, like water drops touching each other constantly to form ocean.
Website trends and hype cycles are like ocean currents and the water cycle.
Websites that never change are like frozen ice, visible but rigid and difficult to modify, storing historical information.
Highly evolving websites are like evaporated water, quickly adapting and morphing like prototypes and landing pages.
The deeper the ocean, the darker it gets.
The quantity of drops, like websites, creates new systems and circulations, akin to trends and directions in the digital space.
One drop of water is not the ocean, but drops and drops of water together.
Here, instead of using basic hover to expand seperated spans in a paragraph. I seperated every word and locate them into their own table cells.
This solves the glitching issue where the text would constantly expand and contract due to the constantly changing text size.
In this case, whenever the user hovers on the cell, it will activate the Hover class on itself and it's neighbouring cells.
The one that is being hovered directly has a stronger color and opacity.
The change of size and color simulates water tension and water pressure. Each words seamless blends into another word.
Users here can also click onto the texts, and the texts will be highlighted / frozen in black.
The user can creatively string interesting phrases together by locking the right combination of words.
Originall, I planned to create water droplet shape that contains the texts, however it might require me to manuelly
create a sentence of different length for each line. This would be too consuming, and it might not be able to provide
the final interactability the I was hoping to to achieve. Now that it is being distrubuted onto a table, it makes it look more
organized and makes more sense as ocean.
I have tested different colors, opacity, transition smoothness and finally got this final result.
Progress
First, I build a grid of cells to test the functionalities. The border width is set to visible on purpose for debugging.
Then, test the hovering feature. At this stage, it is detecting the cell and the text at the same time, which is not idea.
Afterwards, I added a feature that inserts my pargraph as a string var into the table. It was done by splitting the paragraphs into one words strings. Then appen them individually into the table. I have set the table to 10 columns maximum by using the (i % 10 === 0), i for the length of the whole paragraphs.
Project 3 Interaction link
Product
Some of the risks would be the performance for mobile device, since it listens to every cell. It has some performance issue on my phone. Mobile devices also do not have hover feature in this case.