TimothyPuccetti

FundofInteraction361010
Assignment2Essay
02/07/2017

ColorVisionandWebsiteDesign

ThewebpageatColumbiaCollegeOasisthatiscurrentlyusedforstudentlasercutter
and3Dprinterequipmentreservationsinthedesigndepartmentbuildingbreaksmany
oftherulesoffunctionalcolorusageinitswebpagedesignandlayout.Thenetresultis
thatthiswebpageisverydifficultandirritatingforstudentstonavigate.Goodwebpage
designrequiresanunderstandingofandwillingnesstoabidebyrulesofhowcolorcan
bebestutilizedinfontsandgraphicsinordertocreateawebpagethatiseasytoread
andnavigate.Applyingtheserulesalsoalleviatesconfusionandeyestrain.Lets
examinethiswebpagethatcanbeseeninthescreenshotatthebottomofthispaper.

OneofthetenantsofhumancolorvisionasputforwardbyJeffJohnsoninhisbook
DesigningwiththeMindinMind:ASimpleGuidetoUnderstandingUserInterface
Designisthatpeoplehavedifficultydistinguishingsimilarcolorsplacedsidebyside
comparedtoopposingcolorssuchasredgreenoryellowblue.Opposingcolorscreate
greatercontrast.InmysamplewebsiteseenbelowinthepicturewithintheResource
Type:LaserCutterscontainer(atrightside)wecanbarelydistinguishthebluetexton
thebluebackgroundfieldofthelowermenuitemsbecausethecolorsaretoosimilar.
Wealsocanseethiswiththedarkgreytextonthelightgreybackgroundfield.Although
thecolorsareclosetogetherwhichaidsthecontrastdetection,itisstilltoodifficultto
distinguishthetextagainstthesimilarbackground.Thecalendardaysanddates
sectionjustabovethismenualsosuffersfromthesameissue.Thedatesareinblack
textagainstaverydarkgraybackground.Thereisnotenoughcolorcontrastto
distinguishthetwovaluesfromoneanother.

TimothyPuccetti
FundofInteraction361010
Assignment2Essay
02/07/2017

Thesamewebsiteisalsodesignedsothatthosesamecoloredmenuitemsandtexts
aretoosmall.AccordingtochapterfourofJohnsonsbookverysmallitemssuchas
thesetextsandfieldscreateadifficultyinthewebpageuserbeingabletodistinguish
thecolorsofthoseitemsfromoneanother.Thisexacerbatestheproblemofnotbeing
abletoreadthemenuitems.Bothoftheseproblemscouldbebestsolvedbymaking
themenuitemslargersothatthetextandfieldsarelargerandbyplacingthetext
againstneutralcoloredbackgroundssuchashavingthebluetextagainstawhite
background.Thecolorsandcontrastofthelargerelementswillappearstrongertothe
eyes.

Anotherproblemwiththecolorschemeofthiswebsiteisthattheoneverylargecolor
patchatthelowerleftisinbrightred.Oureyesaremostsensitivetoredsaccordingto
theJohnson.ThereisnoneedtohavetheReservationProblemssectionofthe
websitebesoattentiongettingthatitsthefirstthingausernotices.Theharshcontrast
ofthelargeredpatchagainstthedullbackgroundalsocreatesaneyeirritation.It
actuallyfeelsdifficulttoreadthetextbecausetheredareaistoostrongandlarge.Our
eyeshaveconesthataresensitivetodifferingcolorsandcolorcontrasts.Ourconesare
especiallysensitivetothelowerwavelengthsofredaccordingtoJohnsoninchapter
four.Itwouldbebettertohavethetextcolorbeasimpleblackletteragainstalight
backgroundfield.Asmallredwarningsymbolwouldbeenoughredcolortoattractthe
readersattentiontotheproblemssectionwithoutcreatingsuchaneyesoreand
frighteningordistractingwebsiteusersfromtheimportantcontent.Itwouldalsobe
morelikelytoactuallybereadwithamildercolorschemebecauseitwouldappear
moreappealingtotheeyes.

TimothyPuccetti
FundofInteraction361010
Assignment2Essay
02/07/2017

Accordingtochapterfiveinthetextbookoureyeshavearelativelyweakperipheral
visionacuity.Thisisbecausethefoveathecenterspotoftheretinahasarelatively
muchgreaterdensityofretinalconecells.Asaresultitwouldbeabetterwebsite
designtohaveawarningmessagepopupnexttothefieldwhereamistakewasmade
thentohaveacontinuouslydisplayederrorwarningmessageofftothefarleft.Oureyes
willnoticetheerrormessagethatpopsuprightnexttothemistakeareabecauseour
eyesnoticemotionintheperipherybetterthanstaticimages.

Thisexamplewebsiteisagreatpaintouseandisnotlikelytobewellreceivedby
ColumbiaCollegestudents.Thepainsaredirectlyrelatedtotheideathatthewebsite
creatorsdidnotstudynorutilizetheprinciplesofcorrectvisualdesignaspertainingto
humancolorvisionintheirdesignofthewebsiteinterface.Alittlestudyingandplanning
incolorschemesandcolorarrangementwouldhavemadetheuserexperienceofthis
websitemuchlessfrustrating.Itcouldbemadeintoamorepleasantandefficientuser
experiencewithalittlebitofunderstandingofhumanvisionandalittleeffort..

References:

Johnson,Jeff.2
014.DesigningwiththeMindinMind:SimpleGuidetoUnderstanding
UserInterfaceDesign.MorganKaufmann.Burlington,MA.

TimothyPuccetti
FundofInteraction361010
Assignment2Essay
02/07/2017