Maker Map UX

I'd like to make the case for a left hand side UI.

Before I fork and made these changes I wanted to share my thoughts and see what everyone thinks. I don't want to step on any toes but I couldn't help myself from improving the map.

The current horizontal design has a lot of under utilized space in the header and doesn't allow for future UI elements.

I also tweaked the colors a bit so that the action items are more visually highlighted and added text to the buttons so that users can see right away what they can do with the map.

The key to this map is the data so I added another "Add A Resource" button on the map itself.

I'm not sure what's in store for the form but I would love to tackle that as well. It's a bit daunting at the moment and could be streamlined. I did however, add a picture of the modal which I can add now.

@thisandagain

I like where this is headed.

What would be a shame, though, would be to get a series of drive-by redesigns. I don't want to see your effort (or anyone else's) wasted, so let's talk things over a bit before you spend too much time implementing :)

We should establish some priorities, and a rough wishlist of future features so we can make an informed decision about layout and visual elements. Sound reasonable?

My priorities would look something like this:

1. Good use of available space (read: mostly map) at every resolution.

This means a responsive design, and no single-resolution mockups or redesigns. While I like the sidebar style, it doesn't work well on portrait-oriented tablets or on cell phones in either orientation. We need to figure out how to give the best experience to people who pull it up on their phone on their way to a hackerspace too.

2. Accessibility for future hackers.

If we make something beautiful, but that hampers the ability for others to contribute, we're shooting ourselves in the foot.

Toward this end, I think we should use Boostrap for modals, forms, css reset, etc. Sure, it's not the most original visual style these days, and it would mean that our forms look kinda like other sites' forms, but it would also mean that we could point future contributors to an actual style guide and say "You want to make a modal? Here's documentation."

I don't think the site layout should be Bootstrap, as the grid is constraining and doesn't really make sense for our site. But it is a great fit for form elements, modals, tooltips, popovers, et. al.

3. Discoverability.

You bring up good points with the buttons, it does help to have 'em labeled so you can see at a glance what actions are available to you. So how do we make this work with mobile layouts? What features are more or less important as you move to smaller screens?

4. Sharability.

The social media buttons are a great start. I can't believe we forgot to add them initially.

I'd also like to see history push URLs to enable deep linking to search results, latlong position, and possibly individual business popups. This is arguably not a UI feature, but it's definitely a UX feature. See #17.

5. Whatever else I'm missing.

:)

/cc @thisandagain @nickpinkston @reneejustrenee

👍 on Justin's remarks. Just to underscore, I believe that the mobile experience needs to be highly considered and at this stage it seems unnecessary to diverge layout too drastically between desktop and mobile.

Great thoughts! I took another quick stab at a solution for an uber responsive design and I'm happy with the result.

Nothing pleases me more than well executed responsive designs. See the images below, I believe floating the controls is the best option. We can use css media queries to make minor tweaks. For instance the buttons and filters should be hidden on mobile until accessed.

Yes. Bootstrap all the way, the buttons are what makes bootstrap most recognizable fortunately those styles can be easily overridden with our own custom style sheet.
See above images.
Deep linking would be a great feature!!
There is sooo much that could be done. Populating the map is the most difficult part, are there other data sources we can use? Can we utilize the Google Places API, Foursquare or Yelp? or do we determine our own criteria like the current form and rely on the word of mouth to populate the map?

What's the deal with the form? Can we define the spec and clean it up?

Also, one major action needed in the tool tip is a link out to google maps directions. Especially for the mobile version.

I also think it would be helpful to define a project scope, MVP features and add a few user stories to the README file to help guide the project. The only insight I have about the maker map is from Renee DiResta's blog post http://blog.noupsi.de/post/41215533372/the-maker-map-mvp-goes-live

needless to say, I'm stoked to have found this project :)

I know this stretches the scope but I rolling maker events into the map would be killer. Maybe eventbrite or meetups APIs could be useful but basically a list of upcoming events. That may be a whole other project in itself.

Let's open individual issues for things not directly related to the design. I don't want to scope creep too much now, since we've basically just got a proof of concept up, but let's keep track of these. Add some issues, and I'll tag 'em as feature requests. I'll go add the "deep linking" issue now.

We touched on some of your point 4 in #11. It would be great to get additional layers or import more data into our data source.

Event data would be super rad. It might even make sense to spin up another project just for that, and link out to it from the map?

Also, I really dig the mockups. I just realized I didn't say that :)

For the biggest two sizes above, it looks like we don't have that granularity of control over the zoom/streetview control's position. So either the zoom controls or the nav thingy needs to go on the right side of the map.

@nickpinkston

Thanks, I think this design is a good starting point.

I've added custom controls before but for now they will do just fine on the right side. MVP ;)

I modified the main buttons to "add a resource" and "about the map". The "about the map" button will launch the first time experience modal #14 (comment).

How about adding an events filter to the map? Events are date based and are best viewed in list format. I think the below designs work well. @nickpinkston started a simple event http://www.nickpinkston.com/2013/01/view-hardware-startup-meetups-in-a-larger-map.html map as well

For the desktop version if the user toggles on events a right side bar expands loading all events from soonest to latest.

For mobile I think the events tab should always be accessible like so.

I'll fork and start refactoring the html to match the new designs - minus the events ui until we make a decision about it

Random UX quirks:

The fusion table overlay doesn't play nice with the map nav, especially on small devices. It would be great to either give it a higher z-index, or fiddle with FusionTablesMouseEvent to make sure they don't collide.
It looks like FusionTablesMarkerOptions have way fewer options than regular markers, but the red dots are suboptimal. We should look at the available markers and decide what we want to use. This will take coordination with the maintain-the-fusion-table crowd, as there needs to be a column to set the marker type.

It also doesn't look like a fusion tables layer lets you supply a title by default (but I could be wrong...) so it would be cool if we could use FusionTablesMouseEvents to add hover text so you don't have to click into each result.

i just noticed that as well, giving it a higher z-index won't work - the tooltip is contained in the map which is always below the map nav - so i'll look into the mouseevent

i also have some other ideas on the ux which i'll post in a bit.

Ok. I'm throwing this out there. Currently a user has to search and click the dots on a map to get any useful information from the search results aside from contextual location information. I think we need to work in a search results list to improve the UX. I've added some examples from top sites and some rough ideas for the maker map

Navigation Menu

Repository navigation

Maker Map UX #16