Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1....
Transcript of Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1....
Creating Great Content for Websites
MarthaNicholsFacultyInstructor,Journalism
JenKramerLecturer,DigitalMediaDesign
HarvardUniversityExtensionSchool
hAps://scholar.harvard.edu/jen4web/presentaJons
https://xkcd.com/773/
Clarity, Clarity, Clarity
“Muddinessisnotmerelyadisturberofprose,itisalsoadestroyeroflife,ofhope:deathonthehighwaycausedbyabadlywordedroadsign,heartbreakamongloverscausedbyamisplacedphraseinawell-intenJonedleAer….Thinkofthetragediesthatarerootedinambiguity,andbeclear!”
—StrunkandWhite,TheElementsofStyle
SAMPLE WEBSITES: Good or Bad?
§ YaleUniversity
§ Purdue’sOnlineWriJngLab(OWL)
§ Teavana
PRINT: Classic Design that Works
Inbooksandjournals,you’llfind:
§ Headlines,Jtles,andcontentspages.§ Clearhierarchyofheadings.§ Fixedreadingwidth(pagesorcolumns).§ Blurbs,dropquotes,andsidebars.§ Indexes,references,footnotes.§ Spotart.
WEB CONTENT: What Users Get
TheGood…
§ Textisbriefandclear.§ Mixisfocused.§ IncludeseffecJvechunking.
TheBad…
§ Textistoolongandvague.§ Mixisamess.§ CreatesaAenJonscaAer.
…and the Ugly
FORM vs. FUNCTION
Q:Isiteverokayforawebsitetobeugly?A:Yes.Itdependsonthepurposeofthesite.Q:Really?Butdon’tvisualsmaIermorethanwords?
A:No.AskyourselfthefollowingquesLons:
Whatisthemainpurposeofthiswebsite?DousersjustneedalistofopJons?IsitaboutcreaJngabrandorimage?
Your responsibility is to enforce content rules.
UX PRINCIPLES: Focus on Users
1. Understandstakeholdergoals—fortheorganizaLon,website,andendusers.
2. IdenJfyyourtargetaudience(s)—anddeveloppersonas.
3. Getfamiliarwiththe“voice”ofyourunit—usekeyphrases,connecttobranding.
4. ConsiderwebsiteorganizaJon—andhowthisrelatestoinformaLonarchitecture.
CONTENT REALITY: Pushing Back
Thecontentteammayignoreeveryrule,butyoucansLllpushback:
§ Flagcontentthatdoesn’tworkwiththesiteplan.
§ InvokeUXprinciples.Askifthiscontent…—supportsoneofourgoals?—speakstooneormoretargetaudiences?—complieswithourbrand?—fitswiththeinforma9onarchitecture?
ACCESSIBILTY: Usable Sites for All
IT: Wow, this content is great, but Harvard won't let us do that because we have to comply with online accessibility. Content Team: Really? There are rules for accessibility? IT: Yep. Websites must be usable for those with disabilities – and Google is your #1 blind user:
ACCESSIBILITY ESSENTIALS
ContentTeamCreates…§ PageTitle§ InformaJonStructure§ Headings§ Language§ Links(descrip9ve?)§ ImageAlternaJves(crea9on)§ MediaAlternaJves(crea9on)
DevelopersEnforce…§ SemanJcMarkup§ Legibility§ Readability§ Layouts§ Links(easytofind?)§ ImageAlternaJves(enforcement)§ MediaAlternaJves(enforcement)
Lists derived from HUIT’s “10 Essentials” for Content Creators and Developers.
BAD TEXT
Onfartoomanywebsites,you’llfind:
§ Boring,overlywordycontent.§ Toomanydetails.§ Thewrongdetails.§ Noheadlinesororganizingstructure.§ ExplanaJonsinthepassivevoice.§ Vaguenessabouttherealpoint.
GOOD TEXT: Three Rules
1. Keepitshort.—Cutthetextbyhalforone-third.—Reduceparagraphstoaheadline.
2. Keepitfocused.—Firstoutlinethemostimportantpoints.—Thenselectthreeorfewerasyourfocus.
3. Keepitmeaningful.—Avoidfancylanguageandjargon.—UsetheacLveexposiLonalvoice.
TEXT: How IT Can Help
1. FlagwordycontentbasedonUXprinciples.—Doesitviolatebranding,audience,goals?
2. Flagpoorlyorganizedcontent.—IsthepageLtledisLncLveanddescripLve?—Howwillyoutestforaccessibilitywithusers?
3. CheckforsemanJcmarkupofheadings.—Haveheadingsbeenstyledcorrectly?
4. Remember:HappyTalkMustDie.—SeeSteveKrug,“Don’tMakeMeThink.”
MESSY MIX
Onfartoomanywebsites,you’llfind:
§ Wrongtextwidthforreadability.§ Toomanysidebarsandvisuals.§ UndifferenJatedtextblocks.§ Placeholderheadingslike“Welcome.”§ Nologicaltextflow.§ ToomanymenuopJons.
FOCUSED MIX: Three Strategies
1. Createahierarchyofmeaning.—Focusonwhatreadersreallyneedtoknow.—OrganizetexttoindicatewhatmaIersmost.
2. Useheadlinestodirectreaders.—Makeheadingsshortandpunchy.—Createaheadingstructurethat’slogical.
3. Establishsensiblemenusandsequences.—UselisLcles/Lmelinesiftheyimproveclarity.—CutdownthenumberofmenuopLons.
MIX: How IT Can Help 1. Checktextwidthacrossdevices.
—Isitreadableandlegibleforallusers?—Haveyouestablishedafixedwidthfortext?
2. RevisitUXprinciples.—Toomanyelements?Don’tcavetopressuretoputeverythinginasidebar.
3. Avoidimagesastext.—Doesthesiteloadslowly?TextasHTMLisreadablebyGoogleandscreenreaders.
4. EnforceinformaJonarchitecture.—DoesthedeliveredcontentmatchplannedIA?
ATTENTION SCATTER
Onfartoomanywebsites,you’llfind:
§ Swathsoftextinsteadofreadablechunks.§ Notenoughparagraphbreaks.§ Toomanyrandomelements.§ NoclearsenseofwhatmaAersmost.§ Imagesthatundercutorinterferewithtext.§ Toomanyhyperlinksthatpullreadersaway.
CHUNKING: Three Strategies
1. Organizealltextinshortchunks.—Reduceparagraphstothreeorfourlines.—Includenomorethanthreegrafsinachunk.
2. Useimagesthatservethetext.—KeepinmindthevalueofclearexplanaLons.—RememberthatapreIypictureisnotenough.
3. EmployhyperlinkslogicallyandeffecJvely.—UselinkstotakereaderstoaddiLonaldetails.—Don’tpullreadersawaywithtoomanylinks.
CHUNKING: How IT Can Help
1. Addparagraphbreaks.—Isthecontentbrokenintologicalsegments?
2. Considertabs,accordions,andotherorganizingelementsfortext.—AretheydistracLngordotheyfocusmeaning?
3. Avoidimagesforthesakeofimages.—Dovisualsdirectorconfuseusers?
4. Insertlinksthatarerelevanttousers.—Arelinksimmediatelyhelpful?
“There is one rule that is fairly safe to follow: When in doubt, wear the plainer dress.” —Etiquette in Society, in Business, in Politics, and at Home (1922),
Emily Post
Except When You Break the Rules
https://www.lingscars.com/ “Ling’s Cars Has One of the Best Websites on the Internet”
(Newsweek)
Resources Accessibility
w Forcontentcreators:“10Essen9als”(Harvard)w Fordevelopers:“10Essen9als”(Harvard)
Coursesw DGMDE-23:PlanningSuccessfulWebsitesandApplica9onsw JOURE-137:FeatureWri9ngw JOURE-169:DesigningStoriesfortheWeb(spring2018,newclasstaughtbyMarthaandJen)
Booksw SteveKrug,Don’tMakeMeThinkw StrunkandWhite,TheElementsofStylew RoyPeterClark,HowtoWriteShort
Contact Us
MarthaNicholsInstructorinJournalismHarvardExtensionSchoolmnichols@fas.harvard.eduTalkingWriLngmagazine:hAp://talkingwriJng.com
JenKramerLecturerinDigitalMediaHarvardExtensionSchooljkramer@fas.harvard.eduSlidesat:hAps://scholar.harvard.edu/jen4web/presentaJons
BONUS: Revise Strunk and White AsapracLceexercise,cutdownthequotesoit’shalfaslong:
“Muddinessisnotmerelyadisturberofprose,itisalsoadestroyeroflife,ofhope:deathonthehighwaycausedbyabadlywordedroadsign,heartbreakamongloverscausedbyamisplacedphraseinawell-intenJonedleAer….Thinkofthetragediesthatarerootedinambiguity,andbeclear!”[53words]Hint:TryalisLcleorturningitintoatweet.