A workable tag auto-suggestion design for mobile devices

Question

Over at Stack Exchange we (fairly) recently rolled out a mobile design for all of our sites. This was definitely a 1.0 attempt, and while I think it's a huge improvement over what we had (which was basically nothing) there's a lot that can still be improved.

The subject of today's question: tag auto-completion.

On the desktop version of the site we've got a standard drop down.

This approach fails on mobile for space reasons: vertical space is at a huge premium on many phone (especially with a software keyboard displayed) so the drop down is a bad fit, and we really can't afford the horizontal space for tag counts either. This is compounded by many phones habit of centering the text field when it's focused, causing about 1/2 the available real estate to be wasted (whatever is above the text field after focus).

What I came up with as a stop-gap solution.

The logic is basically, chose the top 5 likely tag auto-completions and display them above the text field. Clicking them will replace the text in the tag field as expected.

This runs into problems with hit boxes (especially on Android phones), as it requires a great deal of precision to click some of the smaller tags.

Since I'm going to be redoing this anyway, I thought it best to solicit some feedback on the various designs I'm considering.

Mockup #1

The idea here is that I'd make the tags huge (with really exaggerated hit-boxes in comparison to the text), and try and force the input field to the bottom of the "screen". The scroll would only occur on initial focus, the user would be able to scroll back up to the question or down to "Post your Question".

Mockup #2

The idea here is to still present something that resembles a drop down, but to steal the whole screen for the auto-complete controls. Effectively, this would be a modal dialog (with a little "done" button and everything). Unfortunately, we can't capture the "Done" button on any of the phone keyboards... so, that's a wrinkle to consider.

In Super Constrained Screens

On a number of phones, if you're in "landscape mode" then there's really not a lot of screen real estate to play with at all. Literally 2 lines of text in some cases. When this happens, I intend to fall back to the existing auto-complete controls (flawed though they are, they're better than nothing) with the added constraint of not allowing more than 1 line worth of tags to display (the exact count would thus vary depending on the suggested tags' name lengths).

The Actual Question

I say all of that to basically ask: Which of these approaches would actually present a better user experience?

The sort of "multiple entries in a single field" auto-complete is a tad rare, at least in my searching, and I'm unaware of a canonical mobile equivalent. Are there any I should be considering?

I'm personally leaning towards Mockup #1, out of a dislike of modal dialogs. It'll also be a tad harder to implement, due to having to cope with orientation changes.

In terms of platform, we're constraining ourselves to recent iPhone and Android phones (not tablets), and the upcoming Windows Phone 7 Mango release.

Answer 1

Mockup #2.

This is how Google handles it (mobile and non-mobile) and this seems very intuitive. It is also in line with the way the desktop/laptop version works. Anything that is more seamless is better as long as it is not more difficult to use.

Answer 2

Mockup #3 (none of the above?)

I've been in this situation before and been really surprised at how foreign the concept of a tag is to the average adult. (There's an average!? Probably not.) I ended up with something pretty close to both of your comps, for a lot of the same reasons. Lack of vertical space being a big one.

Make the tags, tags.

Assuming the intention is to attribute many tags to one (or many) objects, I think a static list like mockup #2 is sort of misleading. Not maliciously, but enough to make tagging something feel very final—immutable. It's interesting that the tags on ux.se are so similar to what I'm talking about. They're defined very clearly as separate entities in a collection. Do that! Invite the user to interact with them, rather than wonder how to interpret or sort or otherwise treat them like a list.