Skip to content
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

Maker Map UX #16

Open
ScottBlew opened this issue Jan 29, 2013 · 12 comments
Open

Maker Map UX #16

ScottBlew opened this issue Jan 29, 2013 · 12 comments

Comments

@ScottBlew
Copy link
Contributor

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.

themakermap_homepage
themakermap_addresource

@bobthecow
Copy link
Contributor

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

@thisandagain
Copy link
Contributor

👍 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.

@ScottBlew
Copy link
Contributor Author

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

  1. 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.

v1_desktop
v1_tablet_landscape
v1_tablet_portrait
v1_phone_portrait_home
v1_phone_portrait_menu
v1_phone_portrait_filter
v1_phone_landscape_home
v1_phone_landscape_menu
v1_phone_landscape_filter

  1. 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.
  2. See above images.
  3. Deep linking would be a great feature!!
  4. 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 :)

@ScottBlew
Copy link
Contributor Author

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.

@bobthecow
Copy link
Contributor

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.

@bobthecow
Copy link
Contributor

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?

@bobthecow
Copy link
Contributor

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.

@ScottBlew
Copy link
Contributor Author

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 ;)

v2_desktop
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

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

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

v2_phone_portrait_events

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

@bobthecow
Copy link
Contributor

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.

@bobthecow
Copy link
Contributor

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.

@ScottBlew
Copy link
Contributor Author

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.

@ScottBlew
Copy link
Contributor Author

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

searchExamples
v3_makermap_desktop_home
v3_makermap_desktop_search_results_pop
v3_makermap_desktop_events

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants