-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Develop new UI for Nearby item view pane, to include Upload option #922
Comments
It seems to me like the discussion in #873 is about media detail view instead of nearby items. To apply such thing to nearby, we might need to open each items details on new screens. Since nearby items doesn't have photos to display, it would be an empty page with nearby options. Thus my vote is for option 1, partially. I think it can be better if we protect both read article and get directions buttons and add "add photo icon" like: What do you think? |
To clarify, I didn't mean that we should follow the suggestions at #873 verbatim, just that perhaps we could consider incorporating elements of the suggestions there into our design here. Alternatively, I think Google Map pins are very similar to our Nearby items, so if we study how they handle their item details pane, we could perhaps use elements of that to improve our current one. I also think that we need to think about how the current Nearby item viewpane looks with the Nearby list (as opposed to just with the map). As seen in the screenshot above, it overlaps part of the list, which isn't a design that is commonly used - I think we might want to see if there is a way to work around that. |
Edit: I just did a bit of further reading, and it seems that the technically correct term for what I'm talking about is a "bottom sheet", not a "viewpane" - https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-usage Sorry for the confusion! |
Oh, sorry @neslihanturan , I also realized I didn't answer your question, lol. That looks quite good if we go with Option 1. :) It would be nice to have a few different possibilities to choose from though. Not urgent, we can start the wireframes in the next phase (2 weeks from now I believe?). I'm just asking early so we can get input from others before you start wireframing. |
I prepared that wireframe just to visualise our discussion. It is not my offer, actually. I will search to find a better solution according to your comments:) |
Google maps has a lot of good content in a very small space. Comparing the non-expanded Google Maps footer with our "nearby" map, I think it's equivalent in terms of content shown: What's nice is the FAB - a clear call to action for taking a photo in our case. The footer is hidden until you tap on something of interest. I think that would be pretty reasonable to implement in the Commons app. What I like is the smooth expansion (fairly standard bottom sheet behavior) in Google Maps: But the side-scrolling information cards are another nice feature. They benefit from great pictures but the floating card concept is pretty easy to implement: Have we considered the idea of simply expanding (and collapsing) the list items in place when a user taps on them - its within the bounds of reason looking at the Material Design spec. |
It sounds like the switch between "map" and "list" is more about expanding and collapsing the map; in "list" mode its about 1/2 the screen and in "map" mode its the whole screen. Like the "fullscreen" button when watching a video online. |
@psh I agree, using a FAB for camera would be awesome! (I suppose in this context it would make sense to prioritize camera over gallery, gallery can go elsewhere). For the Nearby Map, the expansion of the bottom sheet (from compact to detailed) would be great, too. Definitely makes much more sense than a separate activity/fragment. I'm not sure if the side-scrolling info cards are feasible for our scope this round, but it could be a future enhancement. :) @neslihanturan Yeah, for the Nearby List I would personally go with Option 2 that you mentioned, expanding the list view element in place. I don't think we need to handle the list the same way Google maps does... I might suggest something like the style below, perhaps? (with material design of course, the screenshot isn't very aesthetically-pleasing, haha) |
What I think I am hearing - map mode is a map that fills the whole view, and list mode is now a hybrid 50/50 split of list items and map: When an item is selected on the map, we show a footer (this used to be a floating bubble which covered the map display) and if you tap on the footer, it expands to show more detail about the selected place: The fully-expanded footer is (basically) also the view you would see if you tapped to expand an item in the list. I would expect that the back button would "close" and return you to either the map with footer or to the list of items (depending on where you were). (Note: I might have made the FAB a little large in these mockups, but you get the idea) |
Hmm, so we should decide something:
By the way I totally agree displaying detailed information with FAB camera icon on map. However, when I think about our use case, expanding list view on list looked to me a little problematic.
This UI would only work when you are in front of the nearby place. Thus, I think since nearby is one of our most important feature, its UI requires more brain storming. We can even consider a fundamental change. |
Yeah, good question. I agree with you re: the advantages and disadvantages. Another potential disadvantage of the hybrid view is that I'm not sure how it will look like on very small and low-res screens - might be worth checking out how Google Maps handles those. But on the other hand, another potential advantage is that it makes it simpler to do away with the map-to-list switch icon. Remember that with the new UI in #725 , Nearby will be on a tab alongside Contributions, so the current location of the icon (action bar) would likely not be appropriate anymore. If we go with the hybrid view, that solves the problem instantly. (Although then we are left with the problem of how to display the refresh option) Would be great if others could chime in. :)
I think if people are using the map to find the closest place, they may not often use the "directions" option since the nearest place would be very close by. This would be especially true once we implement real-time user location on the Nearby map. |
I liked hybrid view more, when @misaochan make us remember new UI plans. It really solves one of our problem. |
@neslihanturan Nice! In general it looks good to me, I especially like the camera FAB and the clean look. :). For the map, I'm not sure about having "show list" on the bottom left of the bottom sheet after the item is selected though (middle right screenshot). But admittedly, without it, it would be trickier to switch between list and map. And for the expanded bottom sheet (top right screenshot), I think we could improve on the layout of the buttons, I'm not sure we want them on all 4 corners. The list looks great to me in terms of layout, although I am not sure if the color scheme of the expanded list item (bottom right screenshot) conforms to Material standards? Would be great to hear input from others, too. |
I am liking the direction this is going, liking it a lot. 👍 Another way to think about showing or hiding the list of items is to look at the one screen having 3 states - All Map, Hybrid (1/2 map / 1/2 list) and All List. That is, from the perspective of just the size of the map, 100% / 50% / 0%. What if we had two small buttons to "maximize" and "minimize" the map display located at the bottom right side of the map. This feels a lot like how I interact with YouTube, where I have the video at the top with scrolling details below but there is a "full screen" button to bounce the video up to its 100% size, with a similar button to toggle back to 50% again. Recent versions of YouTube have a nice "picture in picture" view where your currently running video is minimized but still playing while looking at other content: I am wondering how it might look if we had a little floating map display when the map was minimized (that is, list was at 100%) If you tap the map and it restores to hybrid (50%) again. |
Hmm actually Youtube's left bottom corner generally disturbs me, but I am probably an old fashion user. I think it can be too much accessibility if we use "picture in picture" and "hybrid view" together. But we can consider using only picture in picture thing too:) |
@neslihanturan Great work with the mock up. Am very excited to imagine how our app would look after we implement this. :) |
@maskaravivek Good point. We actually do need to discuss how to handle the choice of Camera vs Gallery as well. In the UI aspect, a few of the options are:
Personally, I would actually be in favour of option 3, because my thoughts were that the main purpose of direct uploads is a continuous workflow - go to the place via our map, take the item, upload it. But @nicolas-raoul and @neslihanturan brought up a good point at #591 about people wanting to take photos first and then upload later (when at home, with wifi etc), so it's possible that option 1 or 2 would be a better bet for those people. |
My vote is for option 1, and adding a gallery button to our nearby list design. |
This sounds good to me, too. |
Looks great to me, @neslihanturan ! 👍 I would personally go with Option 1 for the detailed view. Anyone else, please feel free to offer feedback/suggestions too. :) We plan to start implementation next week. @VojtechDostal @nicolas-raoul @tobias47n9e |
Hi everyone, since I am implementing our chosen design, I have some questions about best practices. Currently I am working on hybrid map-list view, colapsed nearby details view and expanded nearby details view. Logically nearby details bottom sheet should be a modal bottom sheet, because it is actually a dialog. And user can hide it by clicking back button. However, modal bottom sheets get focus (since they are modal). I think semi transparent whole screen would look improper when nearby details bottom sheet is collapsed, user should be able to click other markers on the map at the same time. So there can be 2 solutions: |
Tagging @psh or anyone else familiar with Android UI development? :) |
@neslihanturan - I really like where your design is taking us! Couple of questions about the list view -
For the detail view -
|
Hi @psh , answers for your questions:
For controlling states: |
In our implementation of #252 , we need to think about where the "upload image for this item" button will be, and in the process figure out if the existing Nearby item UI needs to be overhauled.
Options:
I am personally leaning towards Option 2, but would love to get more input/suggestions.
The text was updated successfully, but these errors were encountered: