GestaltPrinciplesontheWeb

BryceTham

GoodContinuation

ESPNistheworld’smostpopularsourceforsportsnewsandstories.ThefrontpageofESPN(http://www.espn.com)makesexcellentuseofgoodcontinuation.Imagineifyouwillhowonemightgrouptheelementsonthispagetogether.Itwouldmakesensetogrouptheelementsfoundonthelivescoretickerlocatedatthetopofthepageduetohowtheyarearrangedhorizontally.Thissameprinciplecanbeappliedtotheprimarymenubarjustbelowit.Noticealsohowthecontentareacanbedividedinto3verticalgroups,withthecentergrouphostingthemaincontentofthepage.Bygroupingelementsinthiscontinuousform,navigatingthewebsiteandfindingcontentbecomesmucheasier.

Proximity

EdusalsaisatoolforStanfordstudentstohelpthemfindandplanforclasses.ExploringcoursesinEdusalsaisaidedbyaclusteringvisualizationthatgroupssimilarcoursestogetherbyproximity.ThefigureaboveusescoursesofferedintheESSdepartmentatStanfordforthesummer(https://edusalsa.com/explore?all=&dept=ESS&quarter=summer)todemonstrategroupingbyproximity.NoticehowESS800andESS801aredistinctlyseparatedfromthecentralcluster,denotingthattheyarequitedifferentfromthetypicalESScourse.OtheroutliersincludeESS292(DirectedIndividualStudy)andESS400(GraduateResearch),likelyduetothefactthatthesecoursesdonotrequirelecture.Thiswayofgroupingallowsstudentstofindsimilarclassesoftheirinterestsmorequickly.

Similarity

NintendoLifeisapopularmediaoutletthatfocusesonallthingsNintendo.Registeredusersofthewebsitecanchoosefromalistoftopicstheywouldliketofollowinordertocustomizetheirbrowsingexperience.Thisisdoneonthetopicspage(http://www.nintendolife.com/topics)whichcontainsalistofNintendosystems,subjects,series,andmore.Specifically,thesystemssectioncontainsalistofconsolesthataregroupedbysimilarcolor.Forexample,systemsinreddenotecurrentNintendosystemsthatareonthemarketrightnow,systemsinorangedenoteNintendo’sdigitaleShopplatforms,andsystemsinbluedenoteNintendolegacyWiilineofconsoles.Thisgroupingbycolorallowsuserstoquicklyfindandaddtopicstheylike.

UniformConnectedness

UponopeningthehomepageofTwitter(https://twitter.com)thefirstthingusersseeistheirTwitterfeed,whichoftencontainsnumerousconversationsmadeupofseparateTweetsfromdifferentusers.Inthisinterface,conversationsarestrungtogetherwithverticalbluelines,denotingwhichTweetsareresponsestowhichotherTweets.Suchuniformconnectednessmakesiseasytodistinguishbetweenconversations,whichareotherwiseonlydividedbyfeintgraylines.NoticealsohowTweetsthatareinthesameconversationbut1ormorerepliesapartareconnectedbyadottedline,denotingthattherearemoretotheconversationthanjustwhatappearson-screen.