User:Madhill/Sandbox
This is where I senselessly OBSESS about UI and UX on this Wiki :D
UI/UX Side by Side examples
Below are side by side examples of bad UI/UX and how to "fix" them, by yours truly, as I've felt some of the Wiki's recurring theming was hard to read, I will be adding example of how to do better here.
Basic Table
To start things off, here is what I consider to be a pretty ugly table, and also a rather unfriendly one for users suffering from any sort of reading impairments.
| Info | Info | Info |
| Item | Item | Item |
| Item | Item | Item |
| Item | Item | Item |
| Item | Item | Item |
And here is what I would replace it with You may notice the rows and columns are separated by much less invasive lines, and lines between rows under the header are also less prominent. I believe this is much easier to read, as the user's eyes don't need to "climb" thick borders between cells, and the cells are also not over-complicated in their form (no rounded corners).
| Info | Info | Info |
| Item | Item | Item |
| Item | Item | Item |
| Item | Item | Item |
| Item | Item | Item |
And lastly, a few refined version of it, with some old styling brought back, and improved styling mixed in.
| Info | Info | Info |
|---|---|---|
| Item | Item | Item |
| Item | Item | Item |
| Item | Item | Item |
| Item | Item | Item |
| Info | Info | Info |
|---|---|---|
| A | B | C |
| B | C | D |
| C | D | A |
| D | A | B |
Universal Table Templates
Below is a test of Template:UniversalTable/Start and Template:UniversalTable.
Universal tables are an idea I came up with to help all tables across this wiki stay unified in style, without having to copy/paste CSS around. The solution is admittedly quite boiler-plate, but it answers what I believe is a problem long-term.
Header 1
|
Header 2
|
Header 3
|
|---|---|---|
| C1, R1 | C2, R1 | C3, R1 |
| C1, R2 | C2, R2 | C3, R2 |
| C1, R3 | C2, R3 | C3, R3 |
| C1, R4 | C2, R4 | C3, R4 |
The following code was used for the above test:
{{UniversalTable/Start
| colCount = 3
| col0Width = 200px | col0HeadContent = Header 1
| col1Width = 110px | col1HeadContent = Header 2
| col2Width = 200px | col2HeadContent = Header 3
}}
{{UniversalTable
| colCount = 3
| col0Content = C1, R1
| col1Content = C2, R1
| col2Content = C3, R1
}}
{{UniversalTable
| colCount = 3
| col0Content = C1, R2
| col1Content = C2, R2
| col2Content = C3, R2
}}
{{UniversalTable
| colCount = 3
| col0Content = C1, R3
| col1Content = C2, R3
| col2Content = C3, R3
}}
{{UniversalTable
| colCount = 3
| col0Content = C1, R4
| col1Content = C2, R4
| col2Content = C3, R4
| isFooter = yes
}}
{{Table/End}}
Sticky headers for Tables
Info
|
Info
|
Info
|
|---|---|---|
| A | B | C |
| B | C | D |
| C | D | A |
| D | A | B |
Adapting Template:UniversalTable to detached heading & sorting formats (w/ sticky headings :P)
| Info | Info | Info |
|---|
| A | B | C | D |
| B | C | D | A |
| C | D | A | B |
| D | A | B | C |
The text here exists to verify that our above header won't bleed into neighboring elements when it reaches the bottom of its table.
| Header 1 | Header 2 | Header 3 |
|---|
| C1, R1 | C2, R1 | C3, R1 | C4, R1 | C5, R1 |
| C1, R2 | C2, R2 | C3, R2 | C4, R2 | C5, R2 |
| C1, R3 | C2, R3 | C3, R3 | C4, R3 | C5, R3 |
| C1, R4 | C2, R4 | C3, R4 | C4, R4 | C5, R4 |
Practical example of the above basic table
With the above idea in mind, the following shield item table...
| Name | N | E | P | S | Health | Curse | Fire | Freeze | Poison | Shock | Sleep | Stun | Abilities |
|
11 | ||||||||||||||||
|
|
|
124 | 
|
|
... Turns into this :D
| Name | N | E | P | S | Health | Curse | Fire | Freeze | Poison | Shock | Sleep | Stun | Abilities |
|
|
11 | ||||||||||||
|
|
|
124 |
|
|
Further style Research
Below is a table with 3px rounded corners, and lighter defense type & health cells.
| Name | N | E | P | S | Health | Curse | Fire | Freeze | Poison | Shock | Sleep | Stun | Abilities |
|
|
11 | ||||||||||||||||
|
|
|
124 |
|
|
Below is the same table, but with 2px rounded corners, and even lighter defense type & health cells.
| Name | N | E | P | S | Health | Curse | Fire | Freeze | Poison | Shock | Sleep | Stun | Abilities |
|
|
11 | ||||||||||||||||
|
|
|
124 |
|
|
Using Template:UniversalTable/BigHeader/Start
| Name | N | E | P | S | Health | Curse | Fire | Freeze | Poison | Shock | Sleep | Stun | Abilities |
|---|
|
|
124 |
|
|
Abilities, abilities, abilities, abilities weeee | |||||||||
|
|
124 |
|
|
Abilities, abilities, abilities, abilities weeee | |||||||||
|
|
124 |
|
|
Abilities, abilities, abilities, abilities weeee | |||||||||
|
|
124 |
|
|
Abilities, abilities, abilities, abilities weeee |
| Name | Defense | 
|
       |
Abilities |
|---|
|
|
124 |
|
|
Abilities, abilities, abilities, abilities weeee | |||||||||
|
|
124 |
|
|
Abilities, abilities, abilities, abilities weeee | |||||||||
|
|
124 |
|
|
Abilities, abilities, abilities, abilities weeee | |||||||||
|
|
124 |
|
|
Abilities, abilities, abilities, abilities weeee |
Fixing what has broken
Show / Hide
This is a fix for the broken Showhide template (which is protected), to be sent to GH.
Basic Example of usage
Calendars
After implementing Category:UniversalTableUsers, Calendars seem to have gained a soul of their own, below are tests to fix it.
Jan
|
Feb
|
Mar
|
Apr
|
May
|
Jun
|
Jul
|
Aug
|
Sep
|
Oct
|
Nov
|
Dec
|
|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
Jan
|
Feb
|
Mar
|
Apr
|
May
|
Jun
|
Jul
|
Aug
|
Sep
|
Oct
|
Nov
|
Dec
|
|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
