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

Curse

Fire

Freeze

Poison

Shock

Sleep

Stun

Abilities

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

Curse

Fire

Freeze

Poison

Shock

Sleep

Stun

Abilities

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

Curse

Fire

Freeze

Poison

Shock

Sleep

Stun

Abilities

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

Curse

Fire

Freeze

Poison

Shock

Sleep

Stun

Abilities

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	{{{col12HeadContent}}}	{{{col13HeadContent}}}	{{{col14HeadContent}}}	{{{col15HeadContent}}}

Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec	{{{col12HeadContent}}}	{{{col13HeadContent}}}	{{{col14HeadContent}}}	{{{col15HeadContent}}}

Calendar Data

2014

Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec	{{{col12HeadContent}}}	{{{col13HeadContent}}}	{{{col14HeadContent}}}	{{{col15HeadContent}}}

2015 and onwards

Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec	{{{col12HeadContent}}}	{{{col13HeadContent}}}	{{{col14HeadContent}}}	{{{col15HeadContent}}}

Various experiments

Unique Variant templates

hahaha variant

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

RGB test