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	{{{col3HeadContent}}}	{{{col4HeadContent}}}	{{{col5HeadContent}}}	{{{col6HeadContent}}}	{{{col7HeadContent}}}	{{{col8HeadContent}}}	{{{col9HeadContent}}}	{{{col10HeadContent}}}	{{{col11HeadContent}}}	{{{col12HeadContent}}}	{{{col13HeadContent}}}	{{{col14HeadContent}}}	{{{col15HeadContent}}}



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


Proto Shield		-0.05	999	999	999		-0.11 11		0	0	0	0	0	0	0		0
Crest of Almire		-6.05	999	999	-6.05		-7.12 124		0	-999	0	0	-999	0	0

... Turns into this :D

Name

N

E

P

S

Health


Proto Shield	-0.05	999	999	999	-0.11 11	0	0	0	0	0	0	0	0
Crest of Almire	-6.05	999	999	-6.05	-7.12 124	0	-999	0	0	-999	0	0

Further style Research

Below is a table with 3px rounded corners, and lighter defense type & health cells.

Name

N

E

P

S

Health


Proto Shield		-0.05	999	999	999		-0.11 11		0	0	0	0	0	0	0		0
Crest of Almire		-6.05	999	999	-6.05		-7.12 124		0	-999	0	0	-999	0	0

Below is the same table, but with 2px rounded corners, and even lighter defense type & health cells.

Name

N

E

P

S

Health


Proto Shield		-0.05	999	999	999		-0.11 11		0	0	0	0	0	0	0		0
Crest of Almire		-6.05	999	999	-6.05		-7.12 124		0	-999	0	0	-999	0	0

Using Template:UniversalTable/BigHeader/Start

Name	N	E	P	S	Health	Curse	Fire	Freeze	Poison	Shock	Sleep	Stun	Abilities	{{{col14HeadContent}}}	{{{col15HeadContent}}}



Crest of Almire	-6.05	-7.12 124	0	-999	0	0	-999	0	0	Abilities, abilities, abilities, abilities weeee
Crest of Almire	-6.05	-7.12 124	0	-999	0	0	-999	0	0	Abilities, abilities, abilities, abilities weeee
Crest of Almire	-6.05	-7.12 124	0	-999	0	0	-999	0	0	Abilities, abilities, abilities, abilities weeee
Crest of Almire	-6.05	-7.12 124	0	-999	0	0	-999	0	0	Abilities, abilities, abilities, abilities weeee

Name	Defense			Abilities	{{{col5HeadContent}}}	{{{col6HeadContent}}}	{{{col7HeadContent}}}	{{{col8HeadContent}}}	{{{col9HeadContent}}}	{{{col10HeadContent}}}	{{{col11HeadContent}}}	{{{col12HeadContent}}}	{{{col13HeadContent}}}	{{{col14HeadContent}}}	{{{col15HeadContent}}}



Crest of Almire	-6.05	-7.12 124	0	-999	0	0	-999	0	0	Abilities, abilities, abilities, abilities weeee
Crest of Almire	-6.05	-7.12 124	0	-999	0	0	-999	0	0	Abilities, abilities, abilities, abilities weeee
Crest of Almire	-6.05	-7.12 124	0	-999	0	0	-999	0	0	Abilities, abilities, abilities, abilities weeee
Crest of Almire	-6.05	-7.12 124	0	-999	0	0	-999	0	0	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.

{{{1}}}

{{{content}}}

Basic Example of usage

Information about Chocolate.

Chocolate is quite delicious, it can be crafted using cocoa beans, and sometimes milk.

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

Calendar Data

2014

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

2015 and onwards

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

Various experiments

Unique Variant templates

hahaha variant

Attack Speed Increased: Maximum!

Charge Time Reduction: Medium

Attack Speed Decreased: High

Movement Speed Decreased: Medium

Damage Bonus vs Gremlin: Very High

Damage Penalty vs Slime: Low

Increased Poison Resistance: High

Damage Bonus: Medium

Damage Bonus: Maximum!

Damage Bonus: Low

Chance of receiving POISON

Chance of receiving FIRE

Slight chance of causing Strong SHOCK

Good chance of causing Strong CURSE

Slight chance of causing Moderate STUN

Good chance of causing Minor FREEZE

Health Bonus: +10

Health Penalty: -5

hahaha variant

hahaha variant

hahaha variant

Damage Bonus: Medium

Damage Bonus: Maximum!

Damage Bonus: Low

Supply depot re-format

You can find this page at User:Madhill/Sandbox/Supply_Depot now.

Gate tables re-format (hardcore difficulty x-x)

Originals

Level combinations

Background colors

Grey:

Normal

Orange:

Fire

Blue:

Freeze

Green:

Poison

Turquoise:

Shock

Ultramarine:

Sleep

Icons

Boss	Ironclaw Munitions Factory or Event Dangerous Mission: Grinchlin Assault! or Complex 357	Firestorm Citadel or Royal Jelly Palace or Scarlet Fortress	Concrete Jungle or Dark City	Briar Bone Barrage or Stygian Steeds or Torporal Titan or Camp Crimson	Candlestick Keep	Deconstruction Zone	Clockwork Tunnels or Compact Area or generic locations
Gloaming Wildwoods	Graveyard	Aurora Isles or Jigsaw Valley or Starlight Cradle or Sunset Steppes	Devilish Drudgery or Lichenous Lair or Wolver Den	Battle Arena	Compound	Shadow Lair	The Sanctuary
Terminal	Subtown	Treasure Vault	Random level	The Core	Party Lobby

Icon colors

Yellow:

Beasts

Brown:

Constructs

Blue:

Fiends

Orange:

Gremlins

Pink:

Slimes

Grey:

Undead

My Attempts

Gate Icon table

Attempt 1

Icon	Associated Locations	{{{col2HeadContent}}}	{{{col3HeadContent}}}	{{{col4HeadContent}}}	{{{col5HeadContent}}}	{{{col6HeadContent}}}	{{{col7HeadContent}}}	{{{col8HeadContent}}}	{{{col9HeadContent}}}	{{{col10HeadContent}}}	{{{col11HeadContent}}}	{{{col12HeadContent}}}	{{{col13HeadContent}}}	{{{col14HeadContent}}}	{{{col15HeadContent}}}

	Party Lobby
	Terminal
	Random level
	Graveyard
	Gloaming Wildwoods
	Shadow Lair
	The Sanctuary
	The Core
	Subtown
	Boss
	Ironclaw Munitions Factory, Complex 357, Event Dangerous Mission: Grinchlin Assault!
	Firestorm Citadel, Royal Jelly Palace, Scarlet Fortress
	Aurora Isles, Jigsaw Valley, Starlight Cradle, Sunset Steppes
	Treasure Vault, Treasure Trove
	Concrete Jungle, Dark City
	Devilish Drudgery, Lichenous Lair, Wolver Den
	Briar Bone Barrage, Stygian Steeds, Torporal Titan, Camp Crimson
	Battle Arena
	Candlestick Keep
	Compound
	Deconstruction Zone
	Clockwork Tunnels, Compact Area, Generic Locations

Attempt 2

Icon	Associated Locations	{{{col2HeadContent}}}	{{{col3HeadContent}}}	{{{col4HeadContent}}}	{{{col5HeadContent}}}	{{{col6HeadContent}}}	{{{col7HeadContent}}}	{{{col8HeadContent}}}	{{{col9HeadContent}}}	{{{col10HeadContent}}}	{{{col11HeadContent}}}	{{{col12HeadContent}}}	{{{col13HeadContent}}}	{{{col14HeadContent}}}	{{{col15HeadContent}}}

	Party Lobby
	Terminal
	Random level
	Graveyard
	Gloaming Wildwoods
	Shadow Lair
	The Sanctuary
	The Core








	Devilish Drudgery, Lichenous Lair, Wolver Den
	Battle Arena
	Candlestick Keep
	Beast Compounds
	Jelly Compounds
	Undead Compounds
	Deconstruction Zone
	Clockwork Tunnels, Compact Area, Generic Locations