Discuss UI

[cburgdorf]

@timhartmann came up with this mockup. Would like to discuss this a bit.

Quoting @herschel666 from twitter.

I think the vertical divider is dispensable. And I would change the <h4>s to clickable, vertically aligned <label>-elements.

https://twitter.com/Herschel_R/status/434984871832735744

Emanuel can you elaborate a bit on that. We changed the UI because nobody groked the tag based input (e.g. location: hannover, hanover answers: javascript, html). So Tim came up with a mockup of a redesigned dual input which I quite liked. Any other ideas for that?

[0x-r4bbit]

Hey that looks great! I'm sure this would perfectly work with "card" modules when getting search results :) @timhartmann how about adding some mocks for that too?

[herschel666]

Don't mind my opinion on the vertical divider. But I think the input-labels should be actual <label>-elements with appropriate for-attributes, to get a better UX. And I think, that the inputs and the labels fit in one row, if the screen i wide enough. Though this is also my subjective valuation.

Apart from that I like the mockup and I totally agree with you, that the input-section needs a re-work to not confuse the users regarding the dual tag-structure.

[cburgdorf]

@herschel666 you are totally right about making them <label> with for attributes. That was sloppy ;-)

[timhartmann]

@PascalPrecht I can do it - the design, which Christoph added here, was developed with the Dev-Tools in Chrome. No photoshop :godmode:

[0x-r4bbit]

Now let's make a great card module for stackwho, something in between G+ cards and Twitter Cards would be great I think.

[timhartmann]

@PascalPrecht :+1:

[timhartmann]

Guys, I designed something in photoshop. What do you think about this proposal?

[0x-r4bbit]

Maybe you can make the avatar round? (fancy times you know).

Also, we currently only rely on total reputation, to get a more precise result we have to evaluate reputation and upvotes per answer. Maybe you can somehow put the information the card.

So what we basically need is a number for reputation for each tag (?)

All in all, I like the card!

[0x-r4bbit]

But the header is like shit, so i'm just ignoring it. We could also think about extending the card module with additional functionality. For example flipping it, when clicking on it and showing more information about the user. But that's just future stuff.

[cburgdorf]

I think this whole thing should be a bit wider (like it was in the first mock). Especially if you want to enter longer search strings like San Francisco, Berkeley, Oakland + angularjs, nodejs it helps if you have a wider box.

Regarding the twitter share button. Currently the way it works is that you can share the current result which is awesome. I think we should communicate that stronger. By moving them into the upper right corner it feels more like "Share this site".

[0x-r4bbit]

Just talked to @cburgdorf about it and another option would be to introduce a two column layout for the cards.

[timhartmann]

@PascalPrecht If you like it's shit then don't bleat, but give some better feedback to improve it...

[0x-r4bbit]

No i'm just ignoring it for now since we're talking about the card module first. Forget the header for now.

[timhartmann]

Here is a quick view of the cards - two columns now.

[0x-r4bbit]

@timhartmann Perfect! Now I'd propose to set them not side by side but kinda shifted.

[timhartmann]

@PascalPrecht Shifted sounds good. If all are happy with this kind of solution, then let us build it :)

[0x-r4bbit]

How about providing a simple mock first?

[cburgdorf]

When we shift them, how about filling the spaces with a huge, low-contrast index number?

Like that:

[cburgdorf]

@timhartmann another thing noted. In your mocks the cards only use two tags. We should show at least 5 - 10 tags I think. Another reason for making them a little wider. I would like to push the issue :)