The Australis "hamburger" button

John Wong gokoproject at gmail.com
Thu Nov 28 00:38:04 UTC 2013


Regarding an earlier suggestion to replace hamburger button to something
more distinct, I thought I'd give my 2 cents.

1. Make it circular like a badge pin - see firefox pins:
http://media.smashingmagazine.com/images/badges-pins/002.jpg
2. Here is a cute little firefox logo set:
http://people.mozilla.org/~faaborg/files/20090520-firefoxIconQA/gfoxAndFoxkeh.png

We could use firefox logo for now if we want to do the replacement. I just
can't put my ideal badge into words (I sort of could... but that's for
another time if anyone wants to hear it...)

Another thing is as monitor becomes wider and larger, it's a bit tiring to
move my eye balls to some corner. This is not a super high priority but I
think if someone were to click the hamburger button, can it be shown in the
middle of the window instead?




On Tue, Nov 26, 2013 at 3:02 PM, Florian Bender <
florian.bender at quantumedia.de> wrote:

> Turns out I only changed the „active“ state which doesn’t get triggered
> easily. So I updated the base image, though now the default looks too
> bright:
>
>
>
> The updated base image (from a few weeks ago + changed menu icon):
>
>
> And a userChrome.css with the image above stripped of all non-menu icons
> (for minimal data-URI):
>
>
> Anyway, I wanted to try that out and see how it works / looks, and maybe
> it inspires someone to come up with a better solution ;-)
>
>
> Best regards
>
> Florian Bender
>
>
> · quantumedia | Kalchthaler, Müller & Partner GbR
> Neuhäuserstr. 130 · 79199 Freiburg/Kirchzarten · Tel. 0761 458 99 28-0
> USt-IdNr: DE280390014 · Geschäftsführer: Gregor Kalchthaler, Philipp
> Müller
>
> Am 26.11.2013 um 09:20 schrieb Florian Bender <
> florian.bender at quantumedia.de>:
>
> Hi all,
>
> I was talking about this with someone a few weeks a go, then sat down to
> do some sketching. I’ve attached a reworked toolbar sprite (Mac, darker and
> lighter variant as well as @1 and @2 versions) which essentially underlays
> some orange to the hamburger icon, keeping the overall style as much as
> possible.
> <toolbar-sprite.tar.gz>
> I haven’t yet found the time to try this in the theme, so no screenshots
> for now. Also, the base image is probably outdated, but it should do the
> trick.
> If somebody is interested in working with this further, I can send you the
> PSDs used to create the PNGs.
>
> Is this a possible solution?
>
> (Making the button glow orange-y when a notification is pending, is IMHO
> not sufficient, because most of the time, there is no notification, and is
> above all not very intuitive [unless maybe the notifications will be
> displayed right inside the menu] – at least on Mac: The „proper“ solution
> would be to display a badge / red dot, with or without a count.)
>
> Florian Bender
>
>
> · quantumedia | Kalchthaler, Müller & Partner GbR
> Neuhäuserstr. 130 · 79199 Freiburg/Kirchzarten · Tel. 0761 458 99 28-0
> USt-IdNr: DE280390014 · Geschäftsführer: Gregor Kalchthaler, Philipp
> Müller
>
>
>
> Am 25.11.2013 um 23:58 schrieb Madhava Enros <madhava at mozilla.com>:
>
>  Hi Hannes -
>
> We've actually been talking about using an orange glow on the menu button
> lines when there's a notification or a need to convey "attention required."
>
> I think you're right in that there are some use cases where we'd want it
> to be extremely obvious what browser, and what variant, is being used --
> i.e. the "over the phone" case. In a milder day-to-day sense, I think that
> people who become used to the curved tabs and foreground/background
> distinction will find it extremely obvious when they're not using Firefox
> (that's been my experience, anyway).
>
> The orange button was certainly distinctive, but it came with some
> drawbacks around available space for tabs in the titlebar, and a lack of
> consistency across platforms of where the menu sits (e.g. no orange button
> on Mac; a button but not orange on Linux; no Firefox button on Android), to
> name two. Now, for example, in the "over the phone tech support" case you
> cite, without knowing the user's platform, you can direct them to the menu
> button at far right.
>
> Anyway - I agree that we want there to be something that it means to look
> like Firefox vs. other browsers. We'll keep thinking about it!
>
> Madhava
>
> --
> Madhava Enros
> Firefox User Experience
> mozilla.org/firefox
>
> On Monday, November 25, 2013 at 2:32 PM, hv1989 wrote:
>
> I also think this is a loss for firefox. The orange button made it
> really easy to distinguish from other browsers. Also made it easy to
> confirm over phone the person was indeed using browser X or Y. Now
> with Australis I have to take a second look sometimes to be sure. I'm
> pretty sure people not familiar with different browsers will have no
> way of telling the difference or knowing they are actually working on
> another browser.
>
> I think it would make sense to change the "hamburger button" to
> identify with Mozilla. Using a black/white logo or using a orange
> color. I don't really care. But something that makes it easier. I'm
> pretty sure I will be one of the first to install an addon that would
> only turn that button orange!
>
> (That's actually my only negative point for Australis. Otherwise I
> think it is really good!)
>
> Hannes Verschore
>
> On Mon, Nov 25, 2013 at 8:20 PM, Daniel Veditz <dveditz at mozilla.com>
> wrote:
>
> On 11/22/2013 2:06 PM, Mike Conley wrote:
>
>
> In terms of the monicker "hamburger button", it's not the actual name of
> the button. But I've definitely heard it being tossed around and I've
> certainly used it myself (usually in jest).
>
>
>
> If you have Whimsy installed beware: this button turns into a stack of
> pancakes. That's not the "real" UI in case anyone is as confused as I was.
>
> -Dan Veditz
>
> _______________________________________________
> firefox-dev mailing list
> firefox-dev at mozilla.org
> https://mail.mozilla.org/listinfo/firefox-dev
>
> _______________________________________________
> firefox-dev mailing list
> firefox-dev at mozilla.org
> https://mail.mozilla.org/listinfo/firefox-dev
>
>
>  _______________________________________________
> firefox-dev mailing list
> firefox-dev at mozilla.org
> https://mail.mozilla.org/listinfo/firefox-dev
>
>
>
>
> _______________________________________________
> firefox-dev mailing list
> firefox-dev at mozilla.org
> https://mail.mozilla.org/listinfo/firefox-dev
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/firefox-dev/attachments/20131127/086eef78/attachment.html>


More information about the firefox-dev mailing list