1181623 - Don't try to fit a square pin in a round hole

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::System::Browser Chrome, defect)

Description

[Ben Francis [:benfrancis]]

We're currently cropping all icons to be a circle shape with 50% border radius. If a square icon is provided, we should show it as a square, not crop it to a circle.

Comment 1

[Ben Francis [:benfrancis]]

(I should have caught this during code review, sorry)

Comment 2

[GitHub Autolander Bot]

Attachment: [gaia] gmarty:Bug-1181623-Dont-try-to-fit-a-square-pin-in-a-round-hole > mozilla-b2g:master

Comment 3

[Guillaume Marty [:gmarty]]

Comment on attachment 8632080 [details] [review]
[gaia] gmarty:Bug-1181623-Dont-try-to-fit-a-square-pin-in-a-round-hole > mozilla-b2g:master

Ben, is there anything else needed here, apart from this CSS change?

Comment 4

[Ben Francis [:benfrancis]]

Comment on attachment 8632080 [details] [review]
[gaia] gmarty:Bug-1181623-Dont-try-to-fit-a-square-pin-in-a-round-hole > mozilla-b2g:master

Looks good to me.

Comment 5

[Ben Francis [:benfrancis]]

https://github.com/mozilla-b2g/gaia/commit/e0088a67f53d48f77a5c1936301411b0f7ef9f7c

Thanks

Comment 6

[Etienne Segonzac (:etienne)]

Do we have a visual designer assigned to pin-the-web yet?

Personally, since it changes the shape of the rocketbar (which is a key part of our chrome), the full size square icons looks like a bug.

That's why I originally asked for the radius while waiting for a final visual treatment handling all the cases.

Comment 7

[Ben Francis [:benfrancis]]

Yes, Eric could take a look at this.

My personal view is that we shouldn't be modifying other peoples' logos to force them to be circular. We don't do that on the homescreen and the icon in the URL bar is meant to be the same "pin badge" as you'd pin to the homescreen.

There are examples where it doesn't look great in both cases though.

Comment 8

[Ben Francis [:benfrancis]]

Eric, do you know why we crop the icons of bookmarks to a circle, but don't apply the same treatment to app icons? It seems like this should be consistent.

Cropping a square or irregular shaped icon to a circle can have bad results (and may upset trademark owners) and I'm not sure why we do that. It's also true that not cropping some icons can make them look odd in the browser chrome in the current design though.

I previously did experimentation with this with lots of different icons and my conclusion was that not cropping was the best approach in most cases, but I'd like to get your input because you may disagree :)

Comment 9

[Etienne Segonzac (:etienne)]

(In reply to Ben Francis [:benfrancis] from comment #8)
> Eric, do you know why we crop the icons of bookmarks to a circle, but don't
> apply the same treatment to app icons? It seems like this should be
> consistent.
> 
> Cropping a square or irregular shaped icon to a circle can have bad results
> (and may upset trademark owners) and I'm not sure why we do that. It's also
> true that not cropping some icons can make them look odd in the browser
> chrome in the current design though.
> 
> I previously did experimentation with this with lots of different icons and
> my conclusion was that not cropping was the best approach in most cases, but
> I'd like to get your input because you may disagree :)

Note: since this maybe wasn't clear, I'm perfectly fine with a square icon as long as it's small enough not to hide the urlbar shape.

Comment 10

[Eric Pang [:epang] UX]

Attachment: icon.jpg

Hey guys, sorry for the delay on this.

Read through the comments and I agree with both of your concerns.

As Ben mentioned changing a brands icon shape probably isn't a good idea but I'm also very uncomfortable with changing the shape of our rocket bar.

I'm thinking we can do something similar to fennec where the icon sits within the rocket bar (I've attached mock ups of an icon in a square and circle form).  

I'm concerned about the collapsed state - Is there a reason we need the icon/pin icon in the collapsed state? (sorry if it's a dumb question, I'm just trying to understand the functionality in the collapsed state)  Would it be possible to fade the icon out and shift the text left on collapse (similar to what we do with the ssl lock)? 

Ben, what do you think?

Comment 11

[Ben Francis [:benfrancis]]

> I'm thinking we can do something similar to fennec where the icon sits within 
> the rocket bar (I've attached mock ups of an icon in a square and circle form).
...
> Would it be possible to fade the icon out and shift the text left on collapse 
> (similar to what we do with the ssl lock)? 

I agree this would solve the problem of fitting the icon inside the existing URL bar shape, it might also help with the issue of a tiny spinner in bug 1179908.

I would be quite disappointed if we had to do this though.

The oversized icon which shrinks down into the statusbar for me is core to the UI metaphor and personality of Pin the Web. The idea is that the icon is a pin badge for the site - nice and big and inviting to tap on. When you pin the site, the pin badge shrinks down as the page (or collection of pages) is "pinned" to the device, literally pinning it to the statusbar (and the homescreen) with the pin badge. It's meant to be a fun kind of 2.5-dimensional, slightly skeuomorphic interaction... with lots of potential marketing opportunities ;)

Also, the smaller icon looks kind of boring, like favicons in every browser ever. I wanted it to look more like a high resolution app icon, something you want to collect to put on your homescreen (I read about a theory once that people liked the original iPhone homescreen because it looked like a box of chocolates). The badges you collect should be big and beautiful and come in all sorts of shapes and colours, not neat and tidy and constrained to a tiny space in a text box.

It would be awesome if we could figure out how we can ship with this, and not have to suck all of the fun out of the concept for boring practical reasons :) 

What do you think Eric? Can we make it work?

Comment 12

[Etienne Segonzac (:etienne)]

(In reply to Ben Francis [:benfrancis] from comment #11)
> The idea is that the icon is
> a pin badge for the site - nice and big and inviting to tap on. 

None of the proposed design fulfills the "inviting to tap on" part.
(Anecdotally, got 2 people in the Paris office asking me why we couldn't pin websites once loaded, because the Pin icon disappears when we show the site icon.)

Don't think any amount of marketing will make the status-quo okay.

Comment 13

[Ben Francis [:benfrancis]]

(In reply to Etienne Segonzac (:etienne) from comment #12)
> (Anecdotally, got 2 people in the Paris office asking me why we couldn't pin
> websites once loaded, because the Pin icon disappears when we show the site
> icon.)

Yeah this sucks, see bug 1179908