![Page 1: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/1.jpg)
Creating Great Content for Websites
MarthaNicholsFacultyInstructor,Journalism
JenKramerLecturer,DigitalMediaDesign
HarvardUniversityExtensionSchool
hAps://scholar.harvard.edu/jen4web/presentaJons
![Page 2: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/2.jpg)
https://xkcd.com/773/
![Page 3: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/3.jpg)
Clarity, Clarity, Clarity
“Muddinessisnotmerelyadisturberofprose,itisalsoadestroyeroflife,ofhope:deathonthehighwaycausedbyabadlywordedroadsign,heartbreakamongloverscausedbyamisplacedphraseinawell-intenJonedleAer….Thinkofthetragediesthatarerootedinambiguity,andbeclear!”
—StrunkandWhite,TheElementsofStyle
![Page 4: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/4.jpg)
SAMPLE WEBSITES: Good or Bad?
§ YaleUniversity
§ Purdue’sOnlineWriJngLab(OWL)
§ Teavana
![Page 5: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/5.jpg)
PRINT: Classic Design that Works
Inbooksandjournals,you’llfind:
§ Headlines,Jtles,andcontentspages.§ Clearhierarchyofheadings.§ Fixedreadingwidth(pagesorcolumns).§ Blurbs,dropquotes,andsidebars.§ Indexes,references,footnotes.§ Spotart.
![Page 6: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/6.jpg)
WEB CONTENT: What Users Get
TheGood…
§ Textisbriefandclear.§ Mixisfocused.§ IncludeseffecJvechunking.
TheBad…
§ Textistoolongandvague.§ Mixisamess.§ CreatesaAenJonscaAer.
![Page 7: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/7.jpg)
…and the Ugly
![Page 8: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/8.jpg)
FORM vs. FUNCTION
Q:Isiteverokayforawebsitetobeugly?A:Yes.Itdependsonthepurposeofthesite.Q:Really?Butdon’tvisualsmaIermorethanwords?
A:No.AskyourselfthefollowingquesLons:
Whatisthemainpurposeofthiswebsite?DousersjustneedalistofopJons?IsitaboutcreaJngabrandorimage?
![Page 9: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/9.jpg)
![Page 10: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/10.jpg)
Your responsibility is to enforce content rules.
![Page 11: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/11.jpg)
UX PRINCIPLES: Focus on Users
1. Understandstakeholdergoals—fortheorganizaLon,website,andendusers.
2. IdenJfyyourtargetaudience(s)—anddeveloppersonas.
3. Getfamiliarwiththe“voice”ofyourunit—usekeyphrases,connecttobranding.
4. ConsiderwebsiteorganizaJon—andhowthisrelatestoinformaLonarchitecture.
![Page 12: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/12.jpg)
CONTENT REALITY: Pushing Back
Thecontentteammayignoreeveryrule,butyoucansLllpushback:
§ Flagcontentthatdoesn’tworkwiththesiteplan.
§ InvokeUXprinciples.Askifthiscontent…—supportsoneofourgoals?—speakstooneormoretargetaudiences?—complieswithourbrand?—fitswiththeinforma9onarchitecture?
![Page 13: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/13.jpg)
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:
![Page 14: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/14.jpg)
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.
![Page 15: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/15.jpg)
BAD TEXT
Onfartoomanywebsites,you’llfind:
§ Boring,overlywordycontent.§ Toomanydetails.§ Thewrongdetails.§ Noheadlinesororganizingstructure.§ ExplanaJonsinthepassivevoice.§ Vaguenessabouttherealpoint.
![Page 16: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/16.jpg)
GOOD TEXT: Three Rules
1. Keepitshort.—Cutthetextbyhalforone-third.—Reduceparagraphstoaheadline.
2. Keepitfocused.—Firstoutlinethemostimportantpoints.—Thenselectthreeorfewerasyourfocus.
3. Keepitmeaningful.—Avoidfancylanguageandjargon.—UsetheacLveexposiLonalvoice.
![Page 17: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/17.jpg)
TEXT: How IT Can Help
1. FlagwordycontentbasedonUXprinciples.—Doesitviolatebranding,audience,goals?
2. Flagpoorlyorganizedcontent.—IsthepageLtledisLncLveanddescripLve?—Howwillyoutestforaccessibilitywithusers?
3. CheckforsemanJcmarkupofheadings.—Haveheadingsbeenstyledcorrectly?
4. Remember:HappyTalkMustDie.—SeeSteveKrug,“Don’tMakeMeThink.”
![Page 18: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/18.jpg)
MESSY MIX
Onfartoomanywebsites,you’llfind:
§ Wrongtextwidthforreadability.§ Toomanysidebarsandvisuals.§ UndifferenJatedtextblocks.§ Placeholderheadingslike“Welcome.”§ Nologicaltextflow.§ ToomanymenuopJons.
![Page 19: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/19.jpg)
FOCUSED MIX: Three Strategies
1. Createahierarchyofmeaning.—Focusonwhatreadersreallyneedtoknow.—OrganizetexttoindicatewhatmaIersmost.
2. Useheadlinestodirectreaders.—Makeheadingsshortandpunchy.—Createaheadingstructurethat’slogical.
3. Establishsensiblemenusandsequences.—UselisLcles/Lmelinesiftheyimproveclarity.—CutdownthenumberofmenuopLons.
![Page 20: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/20.jpg)
MIX: How IT Can Help 1. Checktextwidthacrossdevices.
—Isitreadableandlegibleforallusers?—Haveyouestablishedafixedwidthfortext?
2. RevisitUXprinciples.—Toomanyelements?Don’tcavetopressuretoputeverythinginasidebar.
3. Avoidimagesastext.—Doesthesiteloadslowly?TextasHTMLisreadablebyGoogleandscreenreaders.
4. EnforceinformaJonarchitecture.—DoesthedeliveredcontentmatchplannedIA?
![Page 21: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/21.jpg)
ATTENTION SCATTER
Onfartoomanywebsites,you’llfind:
§ Swathsoftextinsteadofreadablechunks.§ Notenoughparagraphbreaks.§ Toomanyrandomelements.§ NoclearsenseofwhatmaAersmost.§ Imagesthatundercutorinterferewithtext.§ Toomanyhyperlinksthatpullreadersaway.
![Page 22: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/22.jpg)
CHUNKING: Three Strategies
1. Organizealltextinshortchunks.—Reduceparagraphstothreeorfourlines.—Includenomorethanthreegrafsinachunk.
2. Useimagesthatservethetext.—KeepinmindthevalueofclearexplanaLons.—RememberthatapreIypictureisnotenough.
3. EmployhyperlinkslogicallyandeffecJvely.—UselinkstotakereaderstoaddiLonaldetails.—Don’tpullreadersawaywithtoomanylinks.
![Page 23: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/23.jpg)
CHUNKING: How IT Can Help
1. Addparagraphbreaks.—Isthecontentbrokenintologicalsegments?
2. Considertabs,accordions,andotherorganizingelementsfortext.—AretheydistracLngordotheyfocusmeaning?
3. Avoidimagesforthesakeofimages.—Dovisualsdirectorconfuseusers?
4. Insertlinksthatarerelevanttousers.—Arelinksimmediatelyhelpful?
![Page 24: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/24.jpg)
“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
![Page 25: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/25.jpg)
Except When You Break the Rules
https://www.lingscars.com/ “Ling’s Cars Has One of the Best Websites on the Internet”
(Newsweek)
![Page 26: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/26.jpg)
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
![Page 27: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/27.jpg)
Contact Us
MarthaNicholsInstructorinJournalismHarvardExtensionSchoolmnichols@fas.harvard.eduTalkingWriLngmagazine:hAp://talkingwriJng.com
JenKramerLecturerinDigitalMediaHarvardExtensionSchooljkramer@fas.harvard.eduSlidesat:hAps://scholar.harvard.edu/jen4web/presentaJons
![Page 28: Creating Great Content for Websites - Harvard University · UX PRINCIPLES: Focus on Users 1. Understand stakeholder goals —for the organizaLon, website, and end users. 2. Idenfy](https://reader035.vdocuments.us/reader035/viewer/2022070722/5f01c9f87e708231d4010aa3/html5/thumbnails/28.jpg)
BONUS: Revise Strunk and White AsapracLceexercise,cutdownthequotesoit’shalfaslong:
“Muddinessisnotmerelyadisturberofprose,itisalsoadestroyeroflife,ofhope:deathonthehighwaycausedbyabadlywordedroadsign,heartbreakamongloverscausedbyamisplacedphraseinawell-intenJonedleAer….Thinkofthetragediesthatarerootedinambiguity,andbeclear!”[53words]Hint:TryalisLcleorturningitintoatweet.