The Australis "hamburger" button

Florian Bender florian.bender at quantumedia.de
Tue Nov 26 20:02:31 UTC 2013


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
> 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/firefox-dev/attachments/20131126/3a4e2174/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: australis-orange-menu-button.png
Type: image/png
Size: 66396 bytes
Desc: not available
URL: <http://mail.mozilla.org/pipermail/firefox-dev/attachments/20131126/3a4e2174/attachment.png>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/firefox-dev/attachments/20131126/3a4e2174/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Toolbar-darker-2.png
Type: image/png
Size: 30394 bytes
Desc: not available
URL: <http://mail.mozilla.org/pipermail/firefox-dev/attachments/20131126/3a4e2174/attachment-0001.png>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/firefox-dev/attachments/20131126/3a4e2174/attachment-0002.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: userChrome.css
Type: application/octet-stream
Size: 6003 bytes
Desc: not available
URL: <http://mail.mozilla.org/pipermail/firefox-dev/attachments/20131126/3a4e2174/attachment.obj>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/firefox-dev/attachments/20131126/3a4e2174/attachment-0003.html>


More information about the firefox-dev mailing list