Overall UI Proposal

[tristen]

Base

Overall

Remove apple's default gui elements from the app. We have a strong template to work with. I don't know what limitations we have, (I would love to learn more about this) but It would be ideal to use Droid sans as our base font. In the mock above, I've made the top bar slightly taller with a more subtle dark gradiant. By making this a little taller, action buttons would be larger and more togglable. Any action items are to the right of the bar. I gave some thought into what an app should look like with a starter set of tiles and how it should form and grow as more media is added. I propose spliting mashed maps, map layers and points into their own screens. I justify doing so below.

More:

• Use one of our own map tiles as the opening tile. A potential candidate could be World Bright. I think this is stronger representation of our work than using a mapquest layer as the starter palette.
• Break up Load and Save map. Change 'Load Maps' to 'My Maps' and give it the same interface as data points and map layers. The save button is integrated with the map a user has created.
• When I began adding data points, the three dot/single dot buttons did not make sense to me. I'm not sure just using an icon here is a clear enough guide. In the mock I have made this a single togglable action with a button that reads, "Cluster Points".

  Exploring Layers

Exploring Points

Functionality Includes:

• Visual Preview of each tile
• Swipe to the left to show more tiles (as more are added)
• Add a map: a big plus button thats the same size of the preview shots
• Edit action to the right as a fast means to rename?, delete tiles
• Swipping up and down on a layer could potentially reveal more information about a tile?
  

  Export Screen

We currently have one export option. I assume we will have more exciting ones in the future. This screen could give us the opportunity to list new export options in the future with the version number its proposed to show up in.

Help Screen

Couple things:

The current help screen confused me a little. Why was there soundless video of an older version of the app? Was this help? I think video could be an excellent way of tutorializing how to use the app. It would be nice if these were short, had voice and were split up into chapters. We could use this part of the UI to explain what's new in a particular version of the app. this doesn't even need to be video, it could be a bulleted list that appears in place of the player view. Another thing that confused me is that the buttons, 'About MapBox' and 'View Release Notes' all take you out of the app. Further, if you select 'View Release Notes' it takes you to another video. You have to scroll down to see the version notes. This should be clear.

[incanus]

@tristen, thanks for this. Will review in-depth soon. /cc @willwhite

[incanus]

@tristen, I got a chance to go over this in more detail. You bring up some good points. A number of them are actually ways that the app used to be, but changed. More below on everything.

• The idea of the MapBox logo in the toolbar strikes me as a bad use of space. In the current position (map watermark), it passes touches through, plus it brands all shared snapshots of maps. In the toolbar, it's dead space, plus it feels like a website, where you need to be reminded what page you are on. In an app, you know which app you are in.
• Re: the action button height, the top toolbar is 44px, which is Apple's minimum touch size, and despite appearing shorter (which they are), the toolbar buttons actually take up all vertical space when it comes to touch response.
• In your mockup, is the top toolbar opaque? We used to have this, but when we released 1.4 with TileStream integration and the visual makeover, we made this translucent to open up the top of the app a bit and make it feel roomier -- less "wasted" space.
• We do use one of our own layers as the default -- World Light -- not MapQuest. Though I do like World Bright better, it was a size decision. When 1.6 ships with in-app download support, we plan on removing a bundled set, reducing the app download size from 160MB to probably less than 10MB, which is a huge win. You could be setup to be subscribed to a number of TileStream accounts by default, but if you want offline use, just tap & downloads happen in the background -- not in your upfront use of the app, which is potentially limiting for mobile downloads.
• The idea of floating action buttons -- the save & cluster ones -- seems somewhat webby to me, too. But on the other hand, I like how they are emphasized that way. Still thinking about this.
• The mockups in general seem kind of like Flash to me. See my theming devlog for some backstory here. I do like the idea of continuing in the direction of a custom aesthetic, though. This just feels like a website, or like it was built on a framework that's web-driven (like PhoneGap) which tends to feel like a generic solution. It's a fine line, as some excellent things are possible -- for example, check out Stamen's work on the NatGeo app.
• Re: the clustering button icon vs. text -- we used to have a text button, until the 1.4 visual refresh. We want to move to an icon to free up some space and look a little less busy.
• I love the visual browsing of tiles -- see Eric's thoughts on #149 for more on this. We would need to provide these full account names in the TileStream API, though, and we don't currently have the concept of a "real name", just a username. I think the horizontal swiping of layers is good if it's continuous -- like a table view -- as opposed to paging like the TileStream browse view. Compare to the current table view layers UI only swiping by 5 rows at a time or something like that. It needs to be fast and have inertial scrolling and make use of muscle memory. I like the edit action off on the right, where it's useful on the periphery but not cluttering the top as it is now in the layers UI.
• "Data points" aren't just points, but also lines, polygons, and anything else supported by KML & GeoJSON. For example, yesterday I added GeoJSON polygon support, and we support KML GroundOverlay, which is a way to stick a raster image on the map at certain bounding coordinates (see my devlog).
• Swiping up and down on layers is nice. It's not terribly discoverable, but is good for a supplementary action like "more info". It doesn't have an analog to any other action that I can think of on iOS, though, so it might require some explicit cueing like how we talk about pinching to peek at TileStream accounts.
• The export "screen" (to borrow another web term) -- great idea, but I am leery of promising both features as well as the versions they will land in. See here where we were talking about RSS subscriptions, which we might never do in the app, and more recently where we promised in-app MBTiles downloads in 1.5, but shipping GeoJSON support instead, and I'm now working on downloads for 1.6 (probably).
• Video in help: yes, this is old and getting crufty. We had talked before about this before in #133, specifically about chapters. Otherwise, it's hard to keep up to date.
• The "About MapBox" doesn't take you out of the app, but pops up an alert with version and open source library information. The release notes do. They used to warn/prompt you first, but when we moved to iOS 4.0+, we thought this was less of an issue due to multitasking. And the release notes link is currently broken due to the reorg on mapbox.com. I fixed this the other day in ad11e99d3f9a2d17e0639e9c33ee949a49d88a92.

I sent this link to Saman when he started working on iPad UI, too -- Apple's Human Interface Guidelines:

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

It's good to read to bone up on where they are coming from with the standard UI and controls, if only to know it better before breaking out of that box in the future with custom UI.

/cc'ing @gundersen so he can catch up on our thoughts here.

[tristen]

Wow! Thanks for the feedback on the designs. Your points make a lot of sense. I'm interested in improving on this (if even just as an exercise in application design) - I'd like to respond and post back some revisions soon. And yeah, I will most definitely give the HIG a read!

[incanus]

We should start thinking about this for a mid-year (or earlier) 2.0.

[tristen]

Sounds good - I'd love to spend some time soon re-working a lot of the drafts above and taking in your feedback above. In terms of timing, do you have an approximate date for a 2.0 release? It would make sense to block out a little time for the release to take in a UI revision.

[incanus]

Yeah I'm thinking around July 1 at the latest. That will give me enough time to get Mapresent out, iterate a bit, and revamp the underpinnings of MapBox for iPad by moving to Alpstein, among other things.