News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Better icon for WYSIWYG toggle

Started by NanoSector, June 12, 2012, 10:31:05 AM

Previous topic - Next topic

MrPhil

If you "borrowed" any or all of those icons from a commercial package, better check the license terms. We don't want to get dinged for a copyright violation here!

I don't like the pencil+eye icon because it looks like you're drawing the eye, rather than using a pencil. Maybe if the pencil were separate, next to the eye? Brain+pencil makes absolutely no sense to me. A brain is so rarely used for an icon that no one would have any idea what it signifies. Angle brackets <> are not good because in Visual/WYSIWYG mode you don't see them -- you're directly typing in, say, bold, and don't need to be aware of what HTML markup is.

Icons, especially icons to be used across multiple languages and cultures, are a very complex and difficult art form. For example, you might think to use an owl for "wisdom" (perhaps a FAQ), as the owl in Western culture is associated with wisdom and linked to the goddess Athena (IIRC). However, in some cultures (such as Native American), the owl signifies death. Don't even get me started on how a given color means totally different things across different cultures!

Akyhne

You don't want a toggle button, you want tabs. Much easier to understand and not least much easier to see what mode you are in.

Do it like the Woltlab forum software does it, although make it look nicer:

Antechinus

I think a toggle is fine. It just needs to be a bit clearer than it is in 2.0.x. It's sorted for 2.1.

Akyhne

I have never had any idea whether the WYS is enabled or not. I can't tell!

DenDen60

What about just having html on the button. Whether it is on or off you see html.

Arantor

Try fitting it into a 16x16 image...

DenDen60


Arantor


NanoSector

:P

It looks damn weird though, and I'm sure about 90% of the users would be like "Hey I can insert HTML this way".
My Mods / Mod Builder - A tool to easily create mods / Blog
"I've heard from a reliable source that the Answer is 42. But, still no word on what the question is."

Arantor

And this is why I suggested people try it, because it will give the wrong impressions.

MrPhil

So far, I like best a picture of an eye for "visual mode" and "[BB]" for markup. I would have either two separate buttons (one inactive) or (better) one that flips depending on the mode. There's just not enough space to try to put both concepts on a toggle, plus it needs to be clear what mode you're in at any given time. Perhaps the visual/markup mode button could be noticeably larger than the other buttons, both to draw attention to it and to allow space for a creative icon?

Waitin' on a promised blizzard...

NanoSector

Attached are two mockups. Excuse my awesome Paint.NET skillz :P
My Mods / Mod Builder - A tool to easily create mods / Blog
"I've heard from a reliable source that the Answer is 42. But, still no word on what the question is."

Arantor

* Arantor would not want to wish the fun of rewriting the bbcode box JS code to allow for bigger images on anyone.

emanuele

With SCEditor is just a matter of changing two lines of css I think:
.sceditor-button div, .sceditor-button {
display: block;
width: 18px;
height: 18px;
background-repeat:no-repeat !important;
background-position:center center !important;
}


;D


Take a peek at what I'm doing! ;D




Hai bisogno di supporto in Italiano?

Aiutateci ad aiutarvi: spiegate bene il vostro problema: no, "non funziona" non è una spiegazione!!
1) Cosa fai,
2) cosa ti aspetti,
3) cosa ottieni.

ApplianceJunk

Quote from: Akyhne on November 15, 2012, 06:24:21 PM
You don't want a toggle button, you want tabs. Much easier to understand and not least much easier to see what mode you are in.

Do it like the Woltlab forum software does it, although make it look nicer:

I like the tab idea.

dimspace

best i can come up with.

totally unintuative, the current icon is recognisable with tooltips

the bb codes will look better once they are png anyway. these are mine (attach 2) and yes, there are a couple missing i havnt done yet

Oldiesmann

I think the </> icon will work fine, as that's what most other WYSIWYG editors use.
Michael Eshom
Christian Metal Fans

Advertisement: