User:Johan G/Messagebox style sandbox
Testing out some style ideas for a messagebox meta template (a template template).
The long term goal is to get a way from the mess currently shown in Help:List of messagebox templates. I strongly believe more consistency is less confusing (though to much consistency could hamper creativity).
The testing that is done is done with an old opera web browser.
Colours used
I am borrowing colours from cockpit displays: red (warning), amber (caution), cyan (good) and green (steady good), however green and cyan is not used together it seems.
That is making the intended colours a bit tricky is that two common kinds of colour blindness are inability to differentiate between red and green and inability to differentiate between yellow and blue. One way around the first kind apparently often used in traffic lights is to have the red a bit towards amber and the green a bit towards blue. I do not know about the yellowish amber and blueish cyan, but I am using the same principle there and adjust the hue towards more the more distinguishable colours for that kind of colour blindness, red and green. Looks ok to me, who however do not suffer from colour blindness, as far as I know.
After some time I have come to colours below:
| Style | Messagebox border and icons | Messagebox background |
|---|---|---|
| Speedy | #000 | #ff5 |
| Warning | #f42 | #ffe0d0 |
| Caution | #fc2 | #fdf8d8 |
| Note | #0cc | #d7f7f7 |
| Tip | #0c6 | #e0ffe8 |
| Protected | #bbb | #eee |
| Neutral | #bbb | #fff |
Summary so far
Do note the the texts in the boxes are only some example texts, which happen to be style names considered. The text in the boxes should be centred unless there is something to the left catching the attention, like a thick border or an icon, in which case it should be left aligned.
Use on top of pages or sections and within file information
| Used when |
On top of sections On top of file pages On top of user pages On top of article pages |
On top of talk pages On top of category pages Within file information boxes | ||
|---|---|---|---|---|
| For speedy deletion template |
|
| ||
| Action taken or refrained from is required |
|
| ||
| Action taken or refrained from is needed |
|
| ||
| There is important information |
|
| ||
| There is helpful information |
|
| ||
| A page is protected |
|
| ||
| Neutral |
|
|
Use within sections
| Used when | Within sections | |
|---|---|---|
| There will be serious consequences in certain conditions |
| |
| There might be consequences in certain conditions |
| |
| There is important information |
| |
| There is helpful information |
| |
| Neutral |
|
Source for the above
| Used | Source |
|---|---|
|
On top of sections On top of file pages On top of user pages On top of article pages |
{| style="background-color: #fff; margin: 1px; margin-left: 10%; border: 1px solid #FC2; border-left: 15px solid #FC2; width: 80%;"
| style="padding: 0.25em 1em;"|
'''Caution'''
Test content
|}
|
|
On top of talk pages On top of category pages Within file information boxes |
{| style="background-color: #fff; margin: 1px; margin-left: 10%; border: 1px solid #FC2; width: 80%;"
| style="text-align: center; padding: 0.25em 1em;"|
'''Caution'''
Test content
|}
|
|
Within sections |
{| style="background-color: #fdf8d8; margin: 1px; margin-left: 0px; border: 1px solid #FC2; border-left: 10px solid #FC2; width: 80%;"
| style="padding: 0em 0.5em;"|
'''Caution'''
Test content
|}
|
How about some icons
I am quite convinced that in most cases icons will not be necessary provided a short but meaningful word in bold is near where the reader will begin to read the messagebox (most probably about centre in a box without anything catching his eyes attention to the left and for those, about the top left).
That said a well chosen icon may help the reader to perceive some of the context for the messagebox before he even begin to read it, though those short words will have the same function (e.g. Danger, Warning, Caution, Cleanup, Note, Notice, Tip, Hint, Protected etc.)
A small selection of default icons
These icons are for now 48 pixels in square as demonstrated by the immediate triangles. The rest of the icons are shown 24 pixels high. There is no default icons for the "Neutral" style.
| Used when | Style | |||||
|---|---|---|---|---|---|---|
| Speedy | Warning | Caution | Note | Tip | Protected | |
| For speedy deletion template |  
|
|||||
| A user is warned about imminent blocking or is blocked | 
|
|||||
|
The reader is warned about serious consequences Immediate action or restraint is required |
|
|||||
|
The reader is warned about consequences Action or restraint is required |
|
|||||
| The reader is given very important information | 
|
|||||
| The reader is given very important question to consider | 
|
|||||
| The reader is given important information | 
|
|||||
| The reader is given important question to consider | 
|
|||||
| The reader is given information | 
|
|||||
| The reader is given important helpful tip | 
|
|||||
| The reader is given helpful question to consider | 
|
|||||
| The reader is given helpful tip | 
|
|||||
| The reader is informed that page is protected | 
| |||||
The following rather self-explaining short-cuts, /!\, (!), (?), (i), (x) and U, could probably be made available to use in an icon or image parameter instead of typing a full file name.
Adding icons to the messageboxes
Or rather trying to... It took quite a few previews of failed attempts to get things in the vicinity of where I want them.
|
|
Caution style="padding: 0.25em 1em; padding-right: 0px; vertical-align: top; width: 24px;" 150% |
|
|
Caution style="padding: 0.25em 1em; padding-right: 0px; vertical-align: top; width: 24px;" 100% |
|
|
Caution style="padding: 0.25em 1em; padding-right: 0px; vertical-align: top; width: 24px;" 75% |
|
|
Caution style="padding: 0.25em 1em; padding-right: 0px; vertical-align: top; width: 24px;" Two-liner |
|
|
Caution style="padding: 0.25em 1em; padding-right: 0px; vertical-align: top; width: 24px;" One-liner |
|
|
Caution style="padding: 0em 0.5em; padding-right: 0px; vertical-align: top; width: 24px;" Two-liner |
|
|
Caution style="padding: 0em 0.5em; padding-right: 0px; vertical-align: top; width: 24px;" One-liner |
Testing width of icon
|
|
Caution style="padding: 0em 0.5em; padding-right: 0px; vertical-align: top; width: 24px;" |
|
|
Caution style="padding: 0em 0.5em; padding-right: 0px; vertical-align: top; width: 0px;" |
|
|
Caution style="padding: 0em 0.5em; padding-right: 0px; vertical-align: top; width: 1px;" Might be an ugly hack, but let's go for it for now. |
And icon sizes
|
|
Caution 48 px icon |
|
|
Caution 40 px icon |
|
|
Caution 32 px icon |
|
|
Caution 24 px icon |
|
|
Caution 16 px icon |
|
|
Caution Two-liner, 40 px icon |
|
|
Caution One-liner, 24 px icon |
|
Caution Two-liner, no icon |
|
Caution One-liner, no icon |
|
|
Caution Two-liner, 40 px icon |
|
|
Caution One-liner, 24 px |
|
Caution Two-liner, no icon |
|
Caution One-liner, no icon |
|
|
Caution Two-liner, 40 px icon |
|
|
Caution One-liner, 24 px |
|
Caution Two-liner, no icon |
|
Caution One-liner, no icon |
Smaller vertical padding for one-liners
|
|
Caution One-liner, padding: 0em 1em; |
|
Caution One-liner, padding: 0em 1em; |
|
|
Caution One-liner, padding: 0em 0.5em; |
|
Caution One-liner, padding: 0em 0.5em; |
|
|
Caution One-liner, padding: 0em 0.5em; |
|
Caution One-liner, padding: 0em 0.5em; |
Testing out CSS classes
| Used when |
On top of sections On top of file pages On top of user pages On top of article pages |
On top of talk pages On top of category pages Within file information boxes | ||
|---|---|---|---|---|
| Speedy deletion |
|
| ||
| Action taken or refrained from is required |
|
| ||
| Action taken or refrained from is needed |
|
| ||
| There is important information |
|
| ||
| There is helpful information |
|
| ||
| A page is protected |
|
| ||
| Neutral |
|
|
Use within sections
| Used when | Within sections | |
|---|---|---|
| There will be serious consequences in certain conditions |
| |
| There might be consequences in certain conditions |
| |
| There is important information |
| |
| There is helpful information |
| |
| There is helpful information |
|
Useful resources
Web and MediaWiki
Sources for inspiration
- Flight deck warning annunciators
- Novacek, Paul (October 2003). Design displays for better pilot reaction (PDF), pages 44-47. Published by Avionics News. Retrieved 5 Nov 2013.
- FAA CA 25-11A - Electronic flight deck displays (PDF). Published by FAA. Retrieved 5 Nov 2013.
- Flight manuals
- AC 25.1581-1 - Airplane Flight Manual (pdf). Published by Federal Aviation Administration. Retrieved 2 June 2014.
- English Wikipedia
- Wikipedia:Manual of Style/Article message boxes. Retrieved 5 Nov 2013.
- Wikipedia:Ambox classes. Retrieved 6 Nov 2013.
- MediaWiki:Common.css. Retrieved 4 jan 2014.
- Template:Mbox. Retrieved 5 Nov 2013. See also the related meta templates.
- Wikimedia Commons:
- Template:Mbox. Retrieved 5 Nov 2013.