I'm not sure whether this is a discussion or just an enlightenment session:
Haha I think it was mostly an enlightenment session up to now, but if anyone has more ideas for search results, they can be shared here.
I was thinking of more ways to rank Guides in results. So far we have discussed:
* Written originally in your native language? Should this matter if we have good site translation?
* Age (How new or old the Guide is)
I'm just going to drop this here for reference:
The current UI design is that we display all the Crops matching the search term up top, and below that are all of the Growing Guides written for those Crops.
We have two mockups made for this (attached)
The 'Generic Search Results' has a 'carousel', featuring multiple Crops and prompting the user to pick one. If a user were to click one of the images, they would be taken to a search results page with that more specific search term. See 'Specific Search Results'.
Please share thoughts on this user flow and interface here as well :)
The design of the generic search results leading to the more specific ones when a result is selected looks like a good flow. I also think the ideas for ranking the results are good as long as I can select the different criteria for the ranking. I get annoyed when the options for sorting are limited and I have to accept some algorithm's idea of what is most relevant.
On the subject of search features, something I like to see with a search is a list off to the side with a hierarchy of the subcategories to filter the results (shopping sites such as Amazon sometimes show these filters on the left side of the page for example: "All results (52)", "Free shipping (10)" "Nikon (12)", "Sony (8)", "Canon (28)", etc.) I especially like seeing the number of hits that each filter encompasses so I can gauge the specificity of the search terms and can click them on and off to narrow in on the results. For tomatoes, such filters could be things such as Heirloom varieties, Hybrid varieties, Disease resistant varieties, Early bearers, Late bearers, Alternate colors, Quick tips, Specific to your area, etc. The list of filters would be dynamic based on the results returned and thus are probably based on keywords that they results contain. Reading such a filter list also helps summarize the results for quick perusal to know if the search terms were appropriate.
Anyway, just my thought about search functions. The site colors and graphics are looking cool. I'm looking forward to this site.
I like the idea of the search ranking filters to be able to, for example: turn off the importance of 'popularity' when ranking guides, or some other criteria.
You bring up good points about filters for finding the right crop. These filters would not filter out guides, but rather filter down the crop selection in the carousel. This would be super useful!
Hey guys, I've been working with Rory a bit to refine the search experience. We're trying to accommodate users of the site who have specific goals in mind and those who are just exploring with the goal of getting everyone to a specific crop and guide as painlessly as possible while still fostering exploration.
This currently flow isn't too different from what we have, but the organization of information is what's different. There's technically only one "search results page" with the "specific results page" now being the crop page, which features both crop info and all relevant guides with filters.
These are new mock-ups for the search flow, a good number of features are missing and we're still playing with the look and feel of different elements. Please leave any and all feedback including what immediately sticks out to you as missing or confusing. Also we're messing with various ways to show "guide compatibility." You'll notice that there are several styles in the following mock-ups. What do you think?
Below: Search Results (desktop, mobile, and mobile with filter modal)
If the user chooses a crop from this page instead of a guide, they'll be presented with this page with full crop info and a list of all guides (again filterable, but that element currently isn't show—please comment on the type of filters you'd think should be most prominent).
Below: Crop Pages (desktop, and mobile)
Hey Ryan, sorry that this has been so long in waiting for a response.
I'm not 100% clear on how we're going to differentiate a search for "cherry tomatoes" from one for "tomatoes". I think that's going to have to be thought out a bit more - can we consistently make that distinction? Can we guarantee that we know what the user wants, and then return "cherry tomato" crops, without showing possible other crops? Maybe there's a way to handle this within the "specific crop" result page, similar to the way Google says "did you mean ____". Also, if we show results for "Tomatoes" and it's lots of crops, what happens to the user who just wanted to grow tomatoes without wanting to know what specific variety? Do we have a "best tomato for you" section?
I'm a bit confused by why there's twice the same results for the first search result image you added. Is that meant to be two different Crops? (pretty sure it is - just wanted to clarify)
Specific Crop Chosen
I like the Desktop results, but I'm a bit concerned about the imbalance that's inevitably going to happen with lots of guides versus the fairly limited search result in the top right corner. I'm guessing that the idea is to have the crop be fixed and the guides scrollable underneath? Does that translate to mobile? Seeing the actual crop collapsed on Mobile would be kind of neat. Maybe the space underneath the Crop can show similar crops in case the user didn't want a Cherry Tomato really?
I like the overall style. It's subtle and still colorful.
I prefer the empty circles as a compatibility guide I think it -keeps the colors a bit less in your face. I suspect that the "compatible" at every section is a bit redundant, and can be solved by a tap and expand (or something like that).
I would also tone down the drop shadows a little bit in the mobile pages? I think they're a bit too intense on some of the boxes, though they seem good on the guide page.
Filters can be tricky - is the best bet to have a filter like Github's search Issues box (eg is:open, label:Growing Guides, etc), or is that too complicated? What if a user just types something (anything) into the search box, and it live updates with results, with specific things to look into (cause we know). Other than that - specific things that would interest me to filter on are: "location (near me)", "time commitment (low)", "sowing time (now)", "sun/shade preference (sun)". Can we filter by requirements?
Let me know if all of that makes sense, and whether it's helpful!
Kind of wish this column was a bit wider to show those images better.
No worries! I'll try to respond in an organized way:
I sort of assumed we'd use a typeahead for search with results for specific crops as well as general ones. General ones and things we can't match would go to the normal results with crops going straight to that crop's page? Did I understand the question correctly?
As far as not knowing what tomato to grow, I agree. That's hopefully where the compatibility scores come in. I imagine we'll show the top x guides for each crop and then sort crops based on guides available and compatibility. Not the best solution, but it's pretty good.
I kept customizing all of them but then just got lazy using symbols to repeat things :P
Specific Crop Selection
Can you clarify? Are you talking about mobile? Sorry, some of the mocks a bit confusing since they got saved as transparent pngs.
Thanks!…and good to know I agree. I also agree on repeating "compatible"—meant to get that out. The drop shadows are looking a lot more dramatic here than they did when I made the mocks—maybe it was flux. They're meant to be subtle and I'll be sure to tune them down.
I really like the idea of having big easy filters and more advanced hidden filters. GitHub's are too techy for our audience I think. I agree that graph search for OpenFarm would be fantastic, but is probably in a far flung future :P Who knows! Happy to be wrong.
I wish it was wider too :[ This is definitely not the best way to showcase all the design ideas/changes/etc, but eh.
I think so! So within the typeahead we'd list crops within the database, and if the user selects none of them, we'd go for general?
Specific Crop Selection
I'm talking about the image named "Crop Page.png". I guess "results" was the wrong word to use. Basically, the specific Crop result page, with the crop information on the left, and the guides on the right. I'm concerned about all of the empty space underneath the crop, and think that it could be used to fill with "related crops" appearing underneath it.
Re sharing designs, there a are a number of tools for that specific purpose, and we could try using one of them, with appropriate links laid here to them? I'll have a look around.