Hello! In this post, I'd like to introduce the frontend projects I've been working on. Instead of just showing my work, I'll focus on the thought process behind the interactions and UX choices, and how I solved the challenges I faced.
Ultimately, I'll be sharing the choices I made to improve the user experience and the insights I've gained from real-world practice. If you've been curious about my work, I think you'll find this interesting. So, shall we get started?
Project 1: Improving Search UX – Smooth Page Transitions and Slide Interactions
If page transitions in a search interface aren't smooth, users can easily get confused. Especially when browsing through multiple pages of search results, abrupt page changes can make it difficult to understand where they are or what they’ll see next. To address this, I implemented slide interactions for the search results pages.
When moving to the next page, the content slides to the left, and when returning to the previous page, it slides to the right. Maintaining a consistent transition speed was key. For instance, moving directly from page 1 to page 3 required a longer slide duration since the distance covered was greater. This helped create smooth, natural transitions between pages.
Another crucial aspect of UX is maintaining context. Rather than simply refreshing the page, showing the transition visually allows users to better understand where they are and what they'll see next. I also ensured a smooth flow between pages by connecting the last row of the previous page with the first row of the next page.
Technically, managing the DOM was a significant challenge. Preloading all the content during page transitions would overload both the browser and server, so I handled this by removing unnecessary DOM elements as the animation ended. Additionally, I added a fade-out effect for the disappearing page's content to make the transition feel even more seamless. This effect was a designer's request, and though it was challenging to implement, the visual satisfaction was worth it.
As a result, page transitions became smooth and natural, allowing users to explore search results without losing context.
Project 2: Improving Search UX – Analyzing and Applying Naver's Search Interface
Next, I want to talk about search UX. The search bar is one of the key interfaces that provide a search experience, and its usability greatly depends on how quickly and intuitively it delivers search results. So, I analyzed Naver's search UX and applied it to my own search component.
Naver's search bar shows search results in real time as users type and highlights matching terms with color. This structure helps users quickly find what they're looking for by providing rapid visual feedback while typing. This makes the search results clearer and more intuitive.
I also paid attention to the triggers for showing and hiding the search results panel. Naver's search bar opens the results panel when the user starts typing or presses the arrow key, and closes it when they clear the input or click outside. These subtle interactions make the user experience smoother. UX that responds to multiple triggers like this helps users stay immersed in the search task.
Applied Interactions and UX Improvements
Based on this analysis, I incorporated similar UX elements into my search component. I designed it to display search results in real time while typing, highlighting the parts that match the search term to provide feedback to the user. Additionally, users could navigate the results using keyboard arrow keys, which improves usability by enabling navigation without the mouse.
I also handled the triggers for automatically opening and closing the search results panel more meticulously. When the user starts typing, the results panel opens automatically, and when the input is cleared, the panel closes. While the search bar is open, users can also use various keyboard actions (e.g., arrow keys, enter key) to select results, allowing them to check the results more quickly and intuitively.
Project 3: Scroll Animation – Code Typing Effect on Page Scroll
Next, I’d like to discuss scroll animation. Scroll animations are a key element in enhancing the user experience by adding visual effects to a webpage, making the experience more engaging. In particular, I wanted to provide a more lively experience for users of the Flitter.dev project through scroll animations.
Adding scroll animations helps draw users' attention and increases the time they spend on the page. From the user's perspective, it can feel like the page comes alive as they scroll. The scroll animation I applied to Flitter.dev makes it look like code is being typed in real time, giving the impression that the code is actually being written on the screen.
Implementation Method
To implement this animation, I used Lottie animations. The process was as follows:
- Write the complete code and then undo it line by line: After completing the entire code, I used the undo function to erase lines one by one, making it look like typing.
- Screen recording: I saved this process as a screen recording and converted it to MP4 format.
- Lottie conversion: I then converted the MP4 video to a Lottie file, allowing the typing animation to progress as the user scrolls.
Thanks to this approach, I was able to implement a smooth, natural animation without affecting the page loading speed.
UX Impact
The biggest advantage of this scroll animation is that it provides intuitive feedback to users. The real-time typing animation keeps users engaged with the content and draws their attention as they scroll through the page.
Visit https://flitter.dev to check out the animation for yourself! 🌟
Conclusion
I've introduced a few of the projects I've worked on so far. Though they're not perfect, I believe I’m growing step by step through these experiences. I'm constantly realizing how important user experience (UX) is, and I'll keep striving to create better interactions and UI in the future.
Thank you for reading, and I hope these projects might serve as a small reference for your own work. 😄
Top comments (0)