icon colors

[Kara Rawson]

i think if you were to leave the off button red, and make the expand and
min. icons light blue, i think that would work better then labeling the
off icon, as well as the two blue icons would now represent active
states (blue emotion), and the red button icon represent stop state (red
emotion).

btw over the weekend i capture some fireflies for a more verbose
comparison between firebugs logo and what a real firefly looks like, i
would have to say the results of my findings are astonishing. The
firebug logo not only looks almost identical to a firefly in real life,
but also the actual size of the icon matches perfectly too.

since we are on the topic of icons, how much work would it be to have
the firebug activation icon in your browser switch to a firefly on its
back when its off rather then just have it grey, you know like what bugs
look like when they are dead. This would be cute, and funny. just a
random idea.

kara

[johnjbarton]

On Jul 15, 9:13 am, Kara Rawson <karacu...@gmail.com> wrote:
...

> since we are on the topic of icons, how much work would it be to have
> the firebug activation icon in your browser switch to a firefly on its
> back when its off rather then just have it grey, you know like what bugs
> look like when they are dead. This would be cute, and funny. just a
> random idea.

A practical reason to use icon orientation rather than just color is
that some users cannot detect the color difference easily due to
differences in eyesight.
jjb

[Kara Rawson]

understood, however i thought tooltips were designed originally for
accessiblity. Honestly though at the end of the day, long as it does its
job Fb that is, im a happy camper.

k

[Mike Collins]

The point of having the icon change color, is, I assume, to be able to tell at a glance whether Firebug is on or off, so having to hover for a tooltip doesn't really work there.  Of course, I can't really tell how this works for other people, but I personally cannot tell the difference with the orange and grey bugs unless I look at them side-by-side.

I really like the dead bug idea, I just wish I had the design skills to make the icon.

mc

[Bob Hassinger]

If we can relate "Firebug" to "firefly", then note a firefly blinks
only when it is active and stays dark when it is inactive. How about
an icon that reflects that analogy?

Watching all this dialog go back and forth about the UI I keep
thinking a significant part of the problem for me is that the UI is
not documented (and it keeps changing without documentation of the
changes). At least there is no documentation to speak of that is
readily at hand when it is in use. The result is that the user learns
the interface by discovery and implication, and discovers changes by
the same process. Between analogs that do not match individual
understandings, changes from one release to another, and bugs that
lead to incorrect mental models of what is going on the tool becomes
difficult to use and evokes the flood of objections.

I think understanding what is going on in those terms might help
everyone get closer to a common view of what is going on and what is
needed. There are a pretty complicated set of concepts going on in
Firebug as to states and so on. People need to at least know what is
intended so they can adapt their mental models and they can
differentiate between misunderstandings and bugs.

Firebug needs to be easily discoverable and that means it has to draw
on established interface paradigms. People bring established
understandings of what various interface elements do in an app or
tool, and what states to expect in an app. Having different states
that are not obvious, and different effects for common UI elements has
to be avoided, or at a minimum well documented.

Less seriously: Firebug needs a couple of things that would relieve
the maintainers of a large part of the messages and questions and give
them lots more time to actually develop. The new user must sign a
release acknowledging that Firebug can not change the code on a host
site before they can use the tool. Second, Firebug needs a big button
that "installs in a new profile". It would be good if it would be
automatically invoked when the user runs into a problem too... ;-)

Bob

[Kara Rawson]

Mike Collins wrote:
>
>
> On Wed, Jul 15, 2009 at 9:53 AM, Kara Rawson <kara...@gmail.com
> <mailto:kara...@gmail.com>> wrote:
>
>
> johnjbarton wrote:
> >
> > On Jul 15, 9:13 am, Kara Rawson <karacu...@gmail.com

i dunno, these are just some suggestions from what ive read though this
on going activation and icon discussion. The red and blue color
suggestion i made, was more for distinguishing from the close button
from the other two, so users whom aren't color blind have a less chance
of clickinbg the wrong button. I personally can see the orange to grey
difference, however others like yourself dont notice it as easily which
is y i suggested changing the shape of the icon to a dead bug on its back.

as far as graphics go, ill see what i can whip up that looks neet.

kara

[Kara Rawson]

Bob Hassinger wrote:

If we can relate "Firebug" to "firefly", then note a firefly blinks  
only when it is active and stays dark when it is inactive.   How about  
an icon that reflects that analogy?
  

that is a great idea, i think having firebug blink like every so many seconds would be kewl, pretty easy to do too as far as gfx are concerned. To me this seems very clever, which reflects how clever the tool is in addition.

Watching all this dialog go back and forth about the UI I keep  
thinking a significant part of the problem for me is that the UI is  
not documented (and it keeps changing without documentation of the  
changes).  At least there is no documentation to speak of that is  
readily at hand when it is in use.  The result is that the user learns  
the interface by discovery and implication, and discovers changes by  
the same process.  Between analogs that do not match individual  
understandings, changes from one release to another, and bugs that  
lead to incorrect mental models of what is going on the tool becomes  
difficult to use and evokes the flood of objections.
  

i cant count how many questions or posts ive read about bugs whihc are just users not knowing how to use the interface in general or a changed and revised UI (IE the new fb beta version)

I think understanding what is going on in those terms might help  
everyone get closer to a common view of what is going on and what is  
needed.  There are a pretty complicated set of concepts going on in  
Firebug as to states and so on.  People need to at least know what is  
intended so they can adapt their mental models and they can  
differentiate between misunderstandings and bugs.
  

i think in a way thats what all of these discussions are evolving into.

Firebug needs to be easily discoverable and that means it has to draw  
on established interface paradigms.  People bring established  
understandings of what various interface elements do in an app or  
tool, and what states to expect in an app.   Having different states  
that are not obvious, and different effects for common UI elements has  
to be avoided, or at a minimum well documented.
  

personally speaking i haven't really noticed any majoy UI revisions or changes, other then the activation model and minor polishing, it took me about 2 mins to get used to the new version. I think putting together a doc guide and using that as a design and implementat`ion litmus would be excellant and prolly clear up atleats half of these invalid discussion posts.

Less seriously:  Firebug needs a couple of things that would relieve  
the maintainers of a large part of the messages and questions and give  
them lots more time to actually develop.  The new user must sign a  
release acknowledging that Firebug can not change the code on a host  
site before they can use the tool.  Second, Firebug needs a big button  
that "installs in a new profile".  It would be good if it would be  
automatically invoked when the user runs into a problem too...  ;-)
  

i agree with you on that one, i think its important to dumb the tool down during the install, meaning directly tell users that this t ool can not and will not change code on servers, that is a major pitfall to new web app dev's. Knowing is half the battle. =)

Bob


On Jul 15, 2009, at 12:28 PM, johnjbarton wrote:

  

On Jul 15, 9:13 am, Kara Rawson <karacu...@gmail.com> wrote:
...
    

since we are on the topic of icons, how much work would it be to have
the firebug activation icon in your browser switch to a firefly on  
its
back when its off rather then just have it grey, you know like what  
bugs
look like when they are dead. This would be cute, and funny. just a
random idea.
      

A practical reason to use icon orientation rather than just color is
that some users cannot detect the color difference easily due to
differences in eyesight.
jjb


    

ive also attacked two firebug logos for the dead bug, tell me what you think.

k

[Steven Roussey]

On Jul 15, 9:13 am, Kara Rawson <karacu...@gmail.com> wrote:

> i think if you were to leave the off button red, and make the expand and
> min. icons light blue

I wouldn't give them color at all... just gray. Makes the red Off
stand out. Looking at Windows, the close button is red but the min/max
are gray. It is not as if people haven't had to think about this
before...

[Kara Rawson]

well in windows its grey on a blue or color background, having grey on
grey is horrible for the vision imparied. I think keeping the close red,
and the other two grey might work better, maybe a lighter red, with a
mouseover or something that gets a little darker, honestly though im a
fan for simplier, i think grey for min and expand, and red for close
would work and look best. The off text still just bothers me a
considerable amount, i like my buttons aligned evenly in the corner like
windows does.

also speaking of M$ shouldn't it be, min, max, close not max min close

kara

[Mike Collins]

I wrapped Kara's dead bug icon in a simple extension to override the Firebug icon, I think it's funny.  If you want to check it out an xpi is here: http://collinsmichaelg.com/deadbug.xpi

Okay, back to real work....

mc

[sir_brizz]

That is so awesome! :D

On Jul 15, 2:31 pm, Mike Collins <collins.m...@gmail.com> wrote:
> I wrapped Kara's dead bug icon in a simple extension to override the Firebug
> icon, I think it's funny.  If you want to check it out an xpi is here:http://collinsmichaelg.com/deadbug.xpi
>
> Okay, back to real work....
>
> mc
>

[kara.rawson]

i would just like to comment on after using deadbug for sometime now,
i really find it useful for seeing if firebug is on or off. yay for
teamwork :) And yes it is silly, i made it look that way on purpose, i
wanted to put in some x's in the eyes but the icon was too small
already. ^_^

ms k