Design Exploration

[TangerineFloof]

I'm experimenting with a new design for the main page of Fuzzrake.

Motivation

In an updated design, I would want to address the following UI/UX concerns:

• Reduce number of clicks. In UI/UX design, the more clicks required to perform a task, the less "usable" it's considered.
  • Examples in current design: filtering, age/SFW confirmation
• Legend. As a generalized rule you want your UI to be able to exist without any manuals or explanation. The design not being immediately understandable is a point of friction for users.
  • Examples in current design: legend/icon glossary in table
• Modals. Modals aren't inherently wrong, but you want to use them sparingly. They're a friction point, and can make the UI feel less seamless. Modals are great for hiding content of secondary importance, but you want to avoid using them for primary content/"golden path" flow.
  • Examples in current design: filtering; maker modal
• Text-heavy. Too much text can be overwhelming; it's hard to skim, relies on language proficiency. Too much text can make it feel like you're reading an essay or looking at a spreadsheet. It also makes for a less colorful design. And especially for our content — fursuits are a visual thing that text won't approximate.
  • Examples in current design: filter modal; table; maker modal
• Lack of branding. Outside of the URL bar, the site doesn't indicate that you're on getfursu.it. We want to build up an identity for the site. Having an identity makes a design come together, and allows you to use visual shorthands going forward.
• Ad-hoc visual style. There are a couple of color palettes in use, as well as different design language (rounded corners and square corners, different font sizes/alignments, etc).
• Required confirmation each visit. Every time you reload the page, you have to confirm your age/NSFW preferences. You generally want to always display your content right away — give the user what they're looking for, show them why they should stay on the website.
• Filters could use a refresher. Some filters are redundant, or are more data-driven than human-driven.
  • Revisiting how a user is going to consume the site and what questions they're going to be asking/looking to answer
  • In general we want to reduce filters to as few options as possible without sacrificing usability
    • Note: This doesn't mean outright removing filter options. However, it means rethinking the question/what we filter over. For example, instead of asking "Do you want a partial, mini partial, three fourths, full plantigrade, or full digitigrade?" we could instead ask them which pieces of a fursuit are they interested in

Exploration

I'm still very early in this. I'm in the blockout phase right now; I'm just putting items in the right spot, and not worrying about how style/content/implementation. This lets me preview a layout and iterate very quickly.

The direction I'm exploring right now looks (very early) like this:

Highlights:

• Side panel for filtering. Side panel is always visible (except on mobile).
  • Offers us more dedicated space, so filters can be visual.
• Table is a list of cards. Rather than a data table, each maker shows up in a card. We can show at-a-glance info and offer a link to go to their full profile
  • Allows us to include a preview image of the maker's work/style
• Logo/header at top, along with very short intro blurb
• Removed text search
• Immediately loads results. I've removed the age and SFW consent from page load, even for brand new users
  • When a brand new user visits, we only fetch SFW makers
  • If they want to include NSFW makers, they click a toggle button → we confirm they're 18+ → we load the NSFW makers
  • When the user comes back, we fetch using the settings they previously had (NSFW if they were last including NSFW makers, SFW otherwise)
  • Also worth revisiting what "NSFW" means in this context/if it's necessary to include?
    • I imagine we're never going to show NSFW pictures on this website — that is, we're only identifying whether a maker's website/social media might have NSFW content on there?
    • Maybe we just don't sort makers by SFW/NSFW, and on social media links/etc we identify saying "this link could include NSFW content"
• Filters updated. I have a whole doc for this.
  • Remove "State" filter — this offers a level of granularity that buyers probably don't need
  • Country — add ability to say "include this country" or "exclude this country" (eg, view ALL makers who aren't located in the USA)
  • Order Types → Parts (name TBD) — lets you select which pieces you're interested in
    • Opens up new avenues for searching — eg, I have a friend who was using getfursu.it a few weeks ago trying to find makers who specialized in only bodysuits
    • Pictures are easier to work with than text here
  • Payment plans → "Allows payment plans" checkbox
    • Users aren't going to search for "only show me makers that DON'T support payment plans"
    • If checkbox unchecked = show all makers
    • If checkbox checked = show only makers who explicitly support payment plans (exclude those that don't, and those it's unknown for)
  • Remove "Hidden" filter — This won't offer a ton of value and can be confusing to customers ("what does hidden mean?")

I have a lot more to do, and a lot more to refine. We'd still be many weeks to months away from this being ready to go live. However, I wanted to start getting input now at an early stage.

So:

• Tell me what you like (I'll make sure to keep it/flesh it out)
• Tell me what you don't like (I'll work to see what other options we can explore)
• Tell me if there's anything about the current design that you want to see changed (maybe I missed something)

[veelkoov]

Some (old) and related: #239 #222 #171 #43
I still owe a response.

[veelkoov]

Would splitting this into topics be OK, or would it make it more difficult for you?

[veelkoov]

I don't know where to start, so let's go with filters first.

• I personally use text search, so we need it at least on "DEV". I'm not sure if I want to maintain a separate list in the admin panel kind of way.
  • If I deployed the HTMX changes online, I could quickly see if the option is indeed used by users or not. What do you think?
• I can try to parse the logs to get stats on most commonly used filters. Would you find that helpful?
• I was asked to add the "states" filter. We could check the stats, or show/hide it depending on if you've selected US/Canada only?
• Order types - we need to expand choices based on supplied "other order types" information. This is a huge topic, "adding new options to existing filters". It's related to the behavior of filtering the "Unknown".
• I'm absolutely OK with pictures, but there may be particular filters or options where this doesn't work. Did you mean for "Order types" only, or more?
• Payment plans - good point on useless "doesn't support" option.
• Unknown - knowing how much holes are in the data cheese, I'm not feeling comfortable about getting rid of this option, but this is not final. We could also consider adding a single "also list makers who didn't specify details I'm filtering with" (but prioritize those with data supplied), instead of having this option in every filter out there.
• Hidden - I guess apart from people being curious, we need to maintain the possibility to display everyone due to the fact, that a maker marked as hidden (due to e.g. rebranding without updating getfursu.it info, thus breaking all links here) should be able to find their hidden studio.

[veelkoov]

For "Required confirmation each visit": I am aware it may be slightly annoying. I tried to reduce the impact by remembering last selections (if you visit the site soon again, or reload the page).
I resumed working on this document, which explains why I did it this way: https://github.com/veelkoov/fuzzrake/blob/initial-code-guidelines/docs/Guidelines.md