It's been a whirlwind of a few weeks! As some of you might already be aware, I've stepped into a design-focused role with the Flarum team. And, before diving deep into my primary task, I wanted to wrap up and present the UI/UX enhancement proposal for the search feature.
Since my last post, I've been deeply engrossed in refining the mobile experience. The advancements in the design are a noticeable leap from the previous versions. Even small adjustments, like a font change, have made a significant difference. One of the major shifts has been my approach towards working with precise measurements — padding, margins, fonts, and more. This ensures that what you see in the proposal will closely reflect the final look on your mobile devices. By anchoring the design in real-world measurements, my hope is to facilitate a smoother development phase, minimizing ambiguities.
Responding to @luceos concern about the mobile friendliness, especially with the gambit pills potentially being challenging to tap on touch devices, I took a deep dive into exact measurements. The design now reflects pills on mobile with a height of 36px. To put that into perspective, it's the same size as a typical button, ensuring users have a comfortable and error-free tapping experience. The choice to go with a near 100% border-radius isn't just for aesthetics. It helps differentiate the pills, and more importantly, ensures they don't come across as regular buttons. This rounded design also aids in providing a visually spacious feel.
With that context, let's delve deeper into the design specifics:
Search Model Tabs
The team's feedback on the initial "ALL" tab design was insightful. I had envisioned it as a way to represent Flarum's existing search. However, after some discussions, we realized that separating the models could be more efficient than using a unified tab. The primary motivation? Scalability. Making database requests more targeted helps optimize performance. For instance, when searching for a discussion, there's no immediate need to pull up user data. This refined approach not only streamlines search functions but also sets the stage for extensions to introduce new models in the future.
Introducing Filtering Pills
Flarum's search has always had a more nuanced dimension to it, thanks to gambits (you can check some search tips here). However, the challenge has been their accessibility; it's not always straightforward to recall the right gambit or even be aware of the ones added by extensions. This is where filtering pills come into play. These are designed to make those gambits more user-friendly and intuitive. By integrating these pills, we're aiming to provide a more streamlined and efficient search experience, ensuring that users can easily harness the power of gambits without the steep learning curve.
Enhancing Search Previews
One area ripe for refinement is the search preview. It's not just about making it look better, but also about offering more meaningful insights at a glance. Here's a breakdown of the changes tailored to the default core models:
Discussions Model: We're introducing avatars, badges, and tags. These aren't mere aesthetic additions; they're functional. Even without diving deep into filters, you'll be able to spot discussions by their authors or tags, making it a breeze to find what you're looking for, especially during broader keyword searches.
Users Model: We're adding profile badges and, for those who use the Nicknames extension, Usernames alongside Display names. I've noticed that sometimes multiple users share the same Display name, and without an avatar, distinguishing between them becomes a challenge. This tweak ensures that you can differentiate between users more easily, especially if you don't have tools like the fof/user-directory extension to expand your search results. With these changes, both the Username and the Display name (if Nicknames is enabled) will be visible.
Dynamic Placeholders for Intuitive Interaction
We're constantly looking for ways to keep the interface clean while maintaining its functionality. So, for certain pills, rather than adding a potentially intrusive tip section, we're utilizing interactive placeholders. This means the standard "Search…" prompt might change to reflect the specific pill, such as "2021-05-27…" when you're using the "Created" pill. And speaking of that date, does it ring a bell for anyone? 😉
Preserving Extension-specific Search Redirections
Extensions like fof/user-directory have always had the ability to redirect searches to specific pages, and this won't change. For instance, the aforementioned extension redirects user searches to a specific directory page. This behavior will stay intact under the new design, ensuring existing functionalities remain undisturbed.
Text Adjustments for Better Space Use
I've streamlined the search prompt to "Search for..." to make better use of the available screen space. This change, combined with the introduction of the model selector, reduces redundancy and offers a clearer, more spacious input area for users.
Proof of Concept: Advanced Search Modal
I've been exploring a fresh approach to Flarum's search. Instead of the traditional advanced search buttons, we could introduce an enhanced core search modal. Leveraging the capabilities of stackable modals, this would offer a streamlined experience where, with a single click, a user is presented with a modal filled with extensive search options.
Wrapping Up
I'm eager to hear your thoughts and feedback on this finalized proposal. If there are any details I've overlooked, your insights will be crucial in polishing them up.
I guess you may have noticed a change of tone in this message, very focused on the joint effort so to speak. I really want to continue to encourage the creation of more collaborative proposals with the community, be it in design or other important tasks. Together, we can shape the future of Flarum and bring attention to important issues. Reflecting on completed proposals, I sense a strong appreciation from the users who participate. Let's keep this momentum going!
Until next time!
