The main thing I’m looking for feedback on is this idea of a full-page map for the activity view (and potentially for any page with a map on it) … Floating the content over the map, instead of splitting the page 30/70.
You should be able to click the images to see them full size.
For this poll, try not to consider the lack of the top menu. That’s a separate thing I happen to be working on at the same time (more below).
Yes, do it
Close…
No, this is bad
0voters
Secondarily, I’m also looking into the idea of reworking the menu system from a “top bar” style to a single button (that’s it in the bottom right of each screenshot). This would open a single “page like” menu - it wouldn’t be a list of text links, it would include buttons and maybe some extra data
Doesn’t really tickle my fancy. With current two side UI, I don’t need to move around, zoom, etc on the map. It has the full activity displayed at proper orientation and zoom level. If I choose to review the details or display nodes of a completed/progressed street, that automatically displays without me having to adjust the map.
With this new UI, if I wanted to show nodes of a particular street, the details/completed/progressed menu could potentially overlay on top of the street. This means I have to pan, tilt and/or zoom out to get it out from beneath the menu. This could be solved if the zoom level defaulted out but if I never utilize/select/display the menus, it would look weird to have all that extra space around activity.
For reference, see example photos with a menu expanded. The start/finish are hidden beneath menu.
I have been silently wishing for this view for a long time—thank you for asking about it. Good for the activity view, but I selfishly want it for the city/lifemap view so that I can filter and build an offline video showing progress month-by-month.
I’m a no for this one - key thing I look at post run is the map and the streets I progressed - I’m looking for ones I missed or didn’t quite go down far enough of a dead end. I’ll work through the “show” street so need the street list and the full route showing rather than having the route partially obscured.
If I can add something slightly unrelated it would be good where there are multiple pages to have the page advance at both the top and bottom of the list. It’s a pain when only at the top as I then have to scroll back up
What if opening a content section also zoomed the map out so the activity was still fully visible?
Here’s a tiny video that shows how the zoom would occur after the content was displayed on the page Dropbox - zoomout.mov - Simplify your life … It was easier to manually trigger the zoom than to build out the full UI experience
There must be some places where I missed this - a while back I went through and made sure that all pagination existed at the top and the bottom of the list.
One caveat is that I’m not doing this on larger screens, because as far as I’ve been able to see any pagination fits entirely on screen (so there was no “scrolling back to the top” that I could find anywhere).
Screenshots would be helpful, if you have the time/inclination. Otherwise just links and some details about your device/window size would help.
Building out a functional version of this wasn’t as much effort as I expected - here’s what it would look like to interact with the top 3 buttons: Dropbox - functioning.mov - Simplify your life
In terms of the scrolling back up - I think it’s only in the challenge screen on chrome on a laptop that I noticed it. Just checked on iphone safari and there was a next page button at the bottom of the list.
I like how it looks (esp. the version with opacity) and think it would work well on desktop. On mobile, I quite like the current split view as it lets me scroll through the streets while keeping the map in view. Also, I just realised I have never used landscape orientation on my phone for viewing CS, it would take some getting used to
The bottom-right menu button thing would be really handy to have on mobile, much easier thumb access than reaching all the way to the top!
If you go with the new layout this will be redundant, but would it be possible to move the map control buttons (node hunter specifically) so that they are not covered by the mapbox info link? It’s very frustrating to try to hit the 5 pixels that are not covered by it for a quick node check while on the go!
I like it. Implementation style aside, the part I like about it is having the full page available for the map. If that is achieved by overlay, great. If it is achieved by having the old pane style being a fly-out or somehow being able to be collapsed, that would be OK.
For reference, I do my CS 99% on a desktop, not my phone.
Yeah, I’m currently aiming to keep this same layout & just allow the map to visually flow beneath the bottom content. This is way up in the air & undecided right now, though. I expect I’ll share more screen shots for feedback before releasing anything.
One worry is that this will mess with muscle memory for computer users. I feel like the two experiences are opposite - on a computer, I generally look to top/top-left/top-right for menus & on mobile, I generally look to the bottom.
I worked out a version where it switched for each case, but then that had me worried that I’d be confusing people across multiple platforms.
That’s fair - some kind of “go away” button for the content (details/progressed/completed) … I’ll keep it in mind, especially if I can’t sort out a nice mobile version of this.
Yeah, that’ll be part of this … that really bothers me as well!
It’s sticky to the bottom of the screen. I’m going to make sure that any scrolling content underneath it scrolls past the button - so we’re never trapped with the button covering up info. The same placement exists for desktop browsers.
It can be opened/closed by tapping the ‘m’ key on a desktop browser. I plan on adding other keyboard shortcuts for some menu items in here.
I’m very uncertain about the menu content. I think I want two columns for the lower section & I need to separate out the buttons into logical sections.
It looks a bit too busy to me. I think the current left/right menu split is good in keeping things focussed and readable, I’m not sure how to carry that over to this type of design though. If the button is sticky to the bottom of the screen it might be a good idea to have the menu “upside down”, with the most used items near the bottom (Sign Out should definitely be moved somewhere less susceptible to accidental press )
The top right menu, specifically, causes lots of issues with the full-page map idea. When I extend the map to full height, the controls get hidden under the menu (and I don’t have access to adjust those). I can add a pile of opacity to the menu, so nothing is lost visually, but no interaction with the map/buttons can occur within that area.
Yeah, that’s fair … I’m unsure if that same approach should be carried over into the desktop site or not.
One idea might be to have Lifemap, Profile, Sync Now plus a “show full menu” item that reveals the remaining options. That would allow a very nice semi-circular arrangement around the menu button that would be very easy to use on mobile. Those 3 items are 90+% of my clicks, not sure if others have different patterns…
I’m likely putting this on hold for a bit. I ran into piles of trouble getting the mobile view to work, and another pile of trouble getting both versions to play nice with each other.
)
