913196 - Fix T-Shirt UI

Status: RESOLVED INVALID

(Participation Infrastructure :: Phonebook, defect)

Description

[Andrei Hajdukewycz [:sancus]]

Once you've set your t-shirt size, this form field sits around and takes up a huge amount of space despite the fact that you're unlikely to need to modify it again or at least, anytime soon.

It would be nice to hide it under a +/- expander or something else to minimize the amount of space it takes up, once you've set it once.

Comment 1

[Giorgos Logiotatidis [:giorgos]]

Sorry to bring this up again but I really feel we should be doing this another way. 

I'm strongly for using a dropdown list for the t-shirt size, as the selected radio button display takes too much space and imho doesn't look that nice. (sorry to repeat myself from other bugs)

On top of that if we're going to have more (!) custom code / css for mobile view for just selecting tshirts, I suggest that we reconsider.

Comment 2

[Justin Crawford [:hoosteeno] [:jcrawford]]

I'm renaming this bug, since I think the fix may or may not be to shrink/expand t-shirt section. We could also easily consolidate the entire section into a single dropdown.

Another reason to consider this as a more general UI problem: We're starting to see people who we /suspect/ do not want fitted shirts, choosing a fitted shirt size. We /suspect/ they're doing this because the UI is huge, split across two lines, the words "fitted" and "straight" do not have universal meaning, and the explanation of "fitted" and "straight" is hidden. So if we treat this as a general UI fix then we can find those people and ask them what happened and tailor a fix that solves both the "too big" and the "not clear" issues. Or maybe we'll discover they really do want a fitted shirt. :)

Comment 3

[Julia Elman]

Attachment: Sketch for new t-shirt UI

Comment 4

[Julia Elman]

(In reply to Justin Crawford [:hoosteeno] from comment #2)
> I'm renaming this bug, since I think the fix may or may not be to
> shrink/expand t-shirt section. We could also easily consolidate the entire
> section into a single dropdown.

I think we originally discussed having them as dropdowns, but nixed the idea based off of some examples I was looking at for t-shirt size display. Totally up for more conversation around this, as I think there might be a good solve we can work out and still use dropdowns for the sizing.

> 
> Another reason to consider this as a more general UI problem: We're starting
> to see people who we /suspect/ do not want fitted shirts, choosing a fitted
> shirt size. We /suspect/ they're doing this because the UI is huge, split
> across two lines, the words "fitted" and "straight" do not have universal
> meaning, and the explanation of "fitted" and "straight" is hidden. So if we
> treat this as a general UI fix then we can find those people and ask them
> what happened and tailor a fix that solves both the "too big" and the "not
> clear" issues. Or maybe we'll discover they really do want a fitted shirt. :)

I have created a quick drawing displaying an initial concept for a new t-shirt UI. Basically, we add the dropdown back in. If the user has already selected their t-shirt size, we prominently display that size + style type (which I don't think we currently do on this form).

Here is a link to the sketch, and have also downloaded and added as an attachment. You can't see my notes in the attachment on each item, but they are viewable in the Google Drawing:

https://docs.google.com/a/caktusgroup.com/drawings/d/1lHU_tzmyj_KJ6sLrvpI7CtCVh1QKEXmyTEjaoAaQhCQ/edit

Please free to edit this sketch directly to collaborate ideas for a solve!

Comment 5

[Justin Crawford [:hoosteeno] [:jcrawford]]

Data point: I reached out to one person who chose a fitted shirt to ask about that choice. He said that the difference between fitted and straight is not clear. So for him at least, our UI around that is not working.

Comment 6

[Dan Poirier [:dpoirier]]

When I was first exploring the profile page, I had no idea what the difference between fitted and straight was until I clicked the little information buttons to pop up an explanation.

I've always seen T-shirts described as men's and women's sizes, not straight vs. fitted, so we could use that terminology.  Or we could split the difference and have "Men's Straight" and "Women's Fitted" sizes.

Comment 7

[Justin Crawford [:hoosteeno] [:jcrawford]]

> I've always seen T-shirts described as men's and women's sizes, not straight
> vs. fitted, so we could use that terminology.  Or we could split the
> difference and have "Men's Straight" and "Women's Fitted" sizes.

Regarding straight/fitted/mens/womens, there is discussion starting in bug 888006 comment 2. We made a call to describe the shirts in our UI rather than the people who wear them.

Comment 8

[Wray Bowling [:wbowling]]

Attachment: threadless sizing chart

I think the presentation on mozillians.org right now works okay which is why this bug has likely been dormant for a while. Just leaving my $0.02 here. I'm using Threadless.com and AmericanApparel.com as my references.


~FIT~

Slim fit: Hugs your body.
Regular fit: Feels pretty normal.
Oversized fit: Made to look slouchy.


~SIZE~

Sizes are presented in both "humanized" terms (small / medium / large) and specific lengths (inches / millimeters)

Comment 9

[Nikos Roussos [:comzeradd]]

This UI changed a lot after the recent changes on profile edit (now settings). T-shirt sizes no longer take too much space, but one thing we can still do is remove style prefix text on sizes (eg. *fitted* small).

I'm leaving this open to track this change.

Comment 10

[Greg Cox [:gcox]]

Shirts are not part of people.mozilla.org; closing as invalid since mozillians went away.