search

caltechlibrary / cell-atlas

Cell atlas
https://cellstructureatlas.org
Other
5 stars 2 forks source link

Create Search Feature Mock Ups #23

Closed KianBadie closed 3 years ago

KianBadie commented 3 years ago

Create mock ups for upcoming search feature and decide on style/layout.

KianBadie commented 3 years ago

@coiko I've made a couple of different mocks of some ideas for the search bar on desktop. You can see what they would look like on the site here: https://www.figma.com/proto/SJo426n282Uz54qEwAFicL/Search-Mockups?node-id=2%3A2&scaling=min-zoom&page-id=0%3A1. I have also attached a screenshot of the current search bar ideas so far for reference. Any thoughts on what is shown so far? Do you think any of these are in the right direction or could use some tweaks?

On the prototype viewer for figma, the top in-page navigation bar might block a good view of the search bar mocks. I found that I had to move my mouse into the viewer first before the top navigation bar would disappear.

Screenshot

types

KianBadie commented 3 years ago

@coiko I also started on some mock ups for the result list available here: https://www.figma.com/proto/SJo426n282Uz54qEwAFicL/Search-Mockups?node-id=25%3A83&scaling=min-zoom&page-id=25%3A64. I think I have some more ideas/tweaks for the result menu, so hopefully I can get some more options in that link. For now, I just wanted to throw those out there to see if you had any thoughts so far.

coiko commented 3 years ago

Ooh I like these! Thanks @KianBadie! I think my favorite is number 6 (rounded boundary with grey text). The only thought I have is that it might be cool to add some animation, so that it would be more minimal (maybe just the magnifying glass icon) until it's selected, when the full bar would pop out. What do you think?

KianBadie commented 3 years ago

@coiko Sounds good! So if I'm understanding you correctly, would the magnifying glass be centered until it is clicked? Then it would expand fully to reveal the search bar?

coiko commented 3 years ago

@KianBadie Oh those results mocks look fantastic! I love the white version - either number 3 or 4. Which do you like?

And yes, if you want to try an animation, it would probably make most sense to have the magnifying glass centered.

KianBadie commented 3 years ago

@coiko I like both the black/white version, so whichever one you like more is the one I am a fan of! As for the overlay background, I added that in there to mimic some sites I saw. I'm not sure how necessary it is though, so I'm on the fence about "needing" it at the moment. I will let it roll around my head a bit. Do you have any thoughts?

Also, I know you were a fan of the current versions of the search bar/result list, but did you think they could use any tweaks? There are some things like this (https://gohugo.io/documentation/) search feature example where the displayed list has some stylistic touches that are a bit different from ours.

KianBadie commented 3 years ago

@coiko There were also some details I wanted to ask about the displayed results list:

coiko commented 3 years ago

Thanks @KianBadie! (And sorry for the slow response!) I think the white version is great, and I don't think the overlay background is necessary, so let's keep it simple and leave it off (at least for now).

And no, I think the styling of the result list is fantastic!

As for the details, yes, I think it's a great idea to show the metadata in case that's what someone's searching for. And as for height, I think it's fine to only have it as tall as needed to accommodate the results (unless you prefer a minimum height). Since it's an overlay element, I think it will look good even when it's very short.

KianBadie commented 3 years ago

@coiko No worries at all! And sounds good! I will go ahead and stick with the white version of the results list and only experiment with new ideas if it seems like a great idea.

For the metadata question, I think I might have miscommunicated my question! I was wondering if the result was only in the metadata, should the main content of the section still show? And sounds good on the height!

coiko commented 3 years ago

@KianBadie Ah, sorry for misunderstanding that! Yes, I think it's good to show the main content of the section to provide a little more context. But if it looks odd to you, feel free to leave it off. Thanks!

KianBadie commented 3 years ago

@coiko No worries! That sounds good to me. I also agree that it feels better to include the content of the section.

KianBadie commented 3 years ago

@coiko So I created some mocks for the mobile design of the search feature: https://www.figma.com/proto/SJo426n282Uz54qEwAFicL/Search-Mockups?node-id=64%3A308&scaling=scale-down&page-id=56%3A245. It's only testing 1 idea so far, which is to have the search bar take over the title when it is clicked. I'm not sure how that transition would look visually however. Also, I made the mocks using an iPhone 8 with the navigation bars showing to work with an example that would be on the lower end of screen space. The android navigation bars resulted in a similar layout to iOS, so I think the end result will be the same.

Here are some other ideas I had for mobile with inspiration examples. Of course, the examples are best seen on mobile sized screens. So you might have to view them on your phone, if you were interested in the ideas!:

As a side note, I thought the gamespot and gatsbyjs examples were really cool. As of right now, I don't think I have any strong opinions formed yet amongst the 3 ideas, so I don't mean that in a way to sway opinions yet! I just thought it was really interesting how they made use of the layout space on mobile.

Did you have any other ideas for the search on mobile? I took some notes from our discussion, but I am sorry to say that they were not very good notes so I might have missed some key points. It looks like some ideas were to remove the title in the header or to even remove search on mobile. Another option was to put search in a new page (could maybe be just results or the whole feature in general), but I opted to save that as a backup, since it would be a different experience from desktop (adding a new page to the experience). Do you have any opinions or thoughts on what I have mentioned so far? Were there any ideas from our discussion I missed? I will be creating mocks for the other ideas to see how they pan out, but feel free to let me know if you think some of the ideas are not worth investing in!

KianBadie commented 3 years ago

@coiko My apologies for all the updates while you're away! I just wanted to drop the updates in these threads, so feel free to respond/check them out at your own pace!

Just wanted to say I mocked some initial drafts of the other 2 ideas I mentioned (in nav menu and in modal)

I drafted these ones pretty quickly just to get the ideas "on paper", so they might be a little rough in terms of spacing or font size (things like that). Also, it might be good to visually convey that the results are links. A simple solution might be an underlined title. Maybe only the title could be the link, or the whole result could be a link. What do you think?

coiko commented 3 years ago

@KianBadie Never apologize for updates! They're always greatly appreciated! I apologize for another (the last, I hope) long delay.

These examples are fantastic! I agree with you - my favorites are the nav menu and mobile options (gamespot and gatsby). The Amazon-style page element clutters up the page too much. And yes, I like the idea of not making it a separate page on mobile.

I love the mocks you developed! Both of them look great. The simplest/cleanest option might be the nav menu element. That leaves all the real estate in the header for your nice styling with the page title. If that's more complicated to implement, though (since it involves a bigger change from desktop), we should go with the header icon.

The styling of the results also looks fantastic. I like the site-theme color highlighting. I agree that it would be good to show that they're clickable links, so yes, underlining the title (and having that be the link) would be perfect!

KianBadie commented 3 years ago

@coiko As always, no worries on the delay!

Having the search feature in the nav menu would require some additional tweaks since we would have the feature in 2 spots, but not so much that it should be considered a hindrance I would say, so I would be happy to try out this option. How did you feel about how much real estate was available for the results list in portrait mode nav menu? I feel like it looks a little tight, and I'm not sure if it would be worth to expand the nav menu (either when the search feature is interacted with or just making it bigger in general). Looking at some more example sites on mobile (https://docs.gitbook.com/, https://www.ign.com/, https://www.gamespot.com/), it looks like some of them have nav menus that are bigger than ours on portrait. What do you think?

coiko commented 3 years ago

@KianBadie Yes, I definitely see what you mean. I think the best would be to expand the nav menu when the search feature is activated, but if it's easier to have it wider all the time (i.e. also in table of contents mode) that's great, too. Thanks!

KianBadie commented 3 years ago

@coiko Sounds good! I will try to expand it only when the search is activated, and if that proves to be impractical for some reason I will let you know and switch to having it wider all the time.

KianBadie commented 3 years ago

@coiko I wanted to make sure the mental goal of the mobile designs were clear since there is a lot of details/quirks to mobile, so I updated the mocks to reflect a bit of what we discussed and some other thoughts that I have had: https://www.figma.com/proto/SJo426n282Uz54qEwAFicL/Search-Mockups?node-id=86%3A345&scaling=contain&page-id=79%3A344

The update has the expanded nav menu on portrait when search is activated. One thought that I had while doing this is what happens to the display when the keyboard comes up for the search. We have not had a feature that utilized the keyboard yet (besides the google feedback form)! I was wondering if the screen would be too narrow, and on some platforms (Android and sometimes iOS) the keyboard actually shrinks the screen height as opposed to just adding a floating keyboard on top of things.

I checked out some other sites to see how they dealt with this. On sites like https://www.gamespot.com/ and https://www.gatsbyjs.com/ the keyboard pretty much prevented the search bar from being visible on landscape! It seems like the intended user experience on some of these search features is to type something and close the keyboard to see results. I just say all of this so the keyboard doesn't become an unexpected user experience change, because it was something I myself forgot to consider!

coiko commented 3 years ago

Thanks @KianBadie! I have definitely experienced this with other sites on mobile, so I don't think it will be problematic behavior for users. And the way you've mocked it up looks fantastic to me!