Design Review 1.18.11

This is Dotspotting's first "formal" UI design review by Shawn Allen and Sean Connelley, cobbled together from a series of emails between Shawn, Sean, Aaaron, Mike, Eric, and Geraldine. It's loosely organized around Dotspotting's existing pages, and things deemed worth doing will eventually be turned into issues that we can track against committed code.

General site-wide improvements

1. HTML link titles everywhere so that people know what to expect when they click on something (specifics below).
2. Style clickable things as links: Pointer cursors, underlines where appropriate.
3. Enable permalinking of specific views: map center/zoom, table sort, highlighted dot.

Feature-specific improvements

All maps

1. Include "original" bounds as an HTML text link (e.g., "reset map bounds") that takes you back to the default extent.
2. Make shift-click area selection indicators partially transparent (currently it's opaque).
3. Track center/zoom in location.hash (a la po.hash()).

Maps (Polymaps)

1. SVG titles for every element.
2. Consider using SVG links instead of JavaScript event handlers.

Dot maps

1. Info bubbles! The mouseover behavior that brings up text below the map is awkward. Dots should either:
   • Show additional info in a bubble on mouse over and link to the dot page, or
   • Bring up the info bubble on click with a link to the dot page.
2. Move dots to the front (z-index, DOM order) on mouseover.
3. Add HTML titles to export links (e.g., csv: "comma-separated values, suitable for spreadsheet applications").

Data tables

1. Make it clearer (with link-like CSS, HTML titles) that you can click on column headers to sort.
2. Revamp the "Processing..." status indicator, as this is kind of awkward.
3. Don't toggle the boldness of highlighted rows on mouseover, which sometimes causes the table to reflow.
4. Make it clearer which bits of text link where in certain columns with appropriately styled HTML links and descriptive titles.
   • Add HTML titles to geohash links (latitude and longitude) providing a more user-friendly description of what users should expect to see when they click on them. (Those hashes are totally opaque for laypeople!)
   • Additionally, consider showing geohash bounds on the map on link mouseover.
5. Remove redundant columns, such as "sheet" on sheets pages.
6. Explain and/or refine how client-side table search works (ASC says he's unsure what DataTables does).
7. Pagination is currently kind of whacked out by the data tables client-side sorting logic. This is a problem.

Per-page improvements

Home

1. Ditch the Kirby dots image (maybe move to the about page?)
2. Show some real data right off the bat:
   • number of dots, plus n most recent (perhaps w/small images per dot, and/or a map)
   • number of sheets, plus n most recent (perhaps w/small images like Crimespotting beats)
   • Github-style charts or Flickr-style sparklines indicating upload activity

Sheets

1. Per-sheet customizations! These can live in toggleable controls near the "DELETE THIS SHEET" button visible only to the sheet owner.
   • Custom dot colors:
     • Allows people to distinguish dots in different sheets in views that mix them (like geohash search pages).
     • Fill and stroke for off, hover, and selected (more on that later) states.
   • Custom map providers, e.g. Bing satellite.
   • Configurable dot titles, either:
     1. A single column, or
     2. A Smarty-style template string: "{dot.id} by {owner.name}"
2. Alternative views:
   • Dot-by-dot maps, a la Crimespotting

Recent Sheets

1. Carry over custom dot colors (see above) to bounding rectangles.

Dot page

1. Move title ("This dot is part...") above the map.
2. Consider two-column layout with square map left, data right.
3. Also, maybe:
   • Promote "special" fields, like flickr:id, so that photos rise to the top of the display?
   • Allow (per-sheet) configuration of the dot display so that owners can reorder the field order.

Nearby

1. Better indication of location detection progress (an indeterminate bar?)
2. On success, show both the location and the "nearby" radius (or geohash bounds) on the map.
3. Integrate the search form from other dot lists into this table (w/sort and filter).
4. Wish list: browseable geohash maps with counts for each bounding box at the current zoom level.

Users

1. Third-party authorization connections! (Facebook, Twitter, Flickr)
2. Design a directory! (This would require people indicating their accounts as public.)
3. Password retrieval! (I realize that this involves sending mail, but thew Wordpress community seems to have figured that out.)

Upload dots

This one could use some serious work, and I have a feeling that it's a pretty infrastructural undertaking. But here's an idea for a 3-step process that would provide a lot of help with some of the mysterious upload options:

1. Upload a file

The help text on this page needs only describe the allowed formats and list common filename extensions for them. We might want to link to more specific help for exporting certain formats (such as CSV) from popular applications. Some other notes:

1. Clearly note the maximum upload file size (based on all applicable limits).
2. The failure response here should be a lot more useful than it currently is.

2. Check the parsed result

Once parsed, the upload becomes a "temporary" sheet (NOTE: I guess we'd need some sort of vacuum process to clean up unsaved sheets every night) that can be displayed just like a saved one, with:

1. inputs for:
   • the upload name, pre-populated for some formats that provide a document title, such as Excel and KML;
   • drop-downs listing columns to index, which may disqualify columns unsuitable for indexing;
   • privacy settings;
2. a sheet map that shows the extent (as a sanity check for wayward points), and
3. a dot map that shows the individual points.

What would be really cool and useful at this stage is a way to repair mistakenly geocoded addresses. (This sheet is a great example of why people would want these.)

It's also worth considering that people might upload Excel files with multiple sheets in them, GPX files with multiple tracks or segments, or other files that might include multiple groups of data. This could be a chance to separate those into multiple Dotspotting sheets, or to perform operations like simplifying super-granular GPX tracks. (Or do we offer those as separate tools?) At the very least, I could see that people might want to remove or rename columns and trim "bad" dots. Yes, we're veering dangerously close to full editing capability here...

(One consideration to make is that we could do all of the above completely client-side.)

3. Save the sheet

This commits it to the database. Et voilà!