April 10, 2015 • STANFORD DRUPAL CAMP AWESOMEIZE YOUR CONTENT design and style best practices for text and images Linnea Williams Project Manager, Stanford Web Services linnea@stanford.edu • @linneawilliams
who am I to talk?
what are we covering?
Topics Covered Yes! Nope! • How people read online • Formatting content with • Writing more engaging HTML content • Using WYSIWYG editors • Establishing tone & voice • Creating content and • Making imagery choices imagery in Drupal • Choosing design elements like colors and fonts
how do people read online?
55% of visitors spend fewer than 15 seconds per page (33% for articles) http://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/
Most users read about 20% of the text on a page. http://readwrite.com/2008/05/07/the_stats_are_in_youre_just_skimming_this_article
In an F-shaped Pattern http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
We’re moving quick! Users are... • in a hurry • making snap judgments • scanning first lines and words
how can we help our users?
Keep everything brief. Cut, cut, cut. Write your content and then remove 50% of the words. (58% increase in usability) http://www.nngroup.com/articles/how-users-read-on-the-web/
Keep everything brief. Before After Nebraska is filled with internationally recognized In 1996, six of the best-attended attractions in attractions that draw large crowds of people every Nebraska were Fort Robinson State Park, Scotts year, without fail. In 1996, some of the most Bluff National Monument, Arbor Lodge State popular places were Fort Robinson State Park Historical Park & Museum, Carhenge, Stuhr (355,000 visitors), Scotts Bluff National Monument Museum of the Prairie Pioneer, and Buffalo Bill (132,166), Arbor Lodge State Historical Park & Ranch State Historical Park. Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). http://www.nngroup.com/articles/how-users-read-on-the-web/
Use scannable layouts. • Use bulleted and numbered lists. • Include headings. (47% increase in usability) http://www.nngroup.com/articles/how-users-read-on-the-web/
Use scannable layouts. Before After Nebraska is filled with internationally recognized Nebraska is filled with internationally recognized attractions that draw large crowds of people every attractions that draw large crowds of people every year, without fail. In 1996, some of the most year, without fail. In 1996, some of the most popular places were Fort Robinson State Park popular places were: (355,000 visitors), Scotts Bluff National Monument Fort Robinson State Park (355,000 visitors) ● (132,166), Arbor Lodge State Historical Park & Scotts Bluff National Monument (132,166) ● Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Arbor Lodge State Historical Park & Museum ● Bill Ranch State Historical Park (28,446). (100,000) Carhenge (86,598) ● Stuhr Museum of the Prairie Pioneer (60,002) ● Buffalo Bill Ranch State Historical Park ● (28,446). http://www.nngroup.com/articles/how-users-read-on-the-web/
Keep language simple. • Use common words and simple sentences. • Keep word choice objective. (27% increase in usability) http://www.nngroup.com/articles/how-users-read-on-the-web/
Keep language simple. Before After Nebraska is filled with internationally recognized Nebraska has several attractions. In 1996, some of attractions that draw large crowds of people every the most-visited places were Fort Robinson State year, without fail. In 1996, some of the most Park (355,000 visitors), Scotts Bluff National popular places were Fort Robinson State Park Monument (132,166), Arbor Lodge State Historical (355,000 visitors), Scotts Bluff National Monument Park & Museum (100,000), Carhenge (86,598), Stuhr (132,166), Arbor Lodge State Historical Park & Museum of the Prairie Pioneer (60,002), and Buffalo Museum (100,000), Carhenge (86,598), Stuhr Bill Ranch State Historical Park (28,446). Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). http://www.nngroup.com/articles/how-users-read-on-the-web/
Brief, scannable, simple Combining these three methods is extremely effective. (124% increase in usability) http://www.nngroup.com/articles/how-users-read-on-the-web/
Brief, scannable, simple Before After Nebraska is filled with internationally recognized In 1996, six of the most-visited places in Nebraska attractions that draw large crowds of people every were: year, without fail. In 1996, some of the most Fort Robinson State Park ● popular places were Fort Robinson State Park Scotts Bluff National Monument ● (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Arbor Lodge State Historical Park & Museum ● Museum (100,000), Carhenge (86,598), Stuhr Carhenge ● Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). Stuhr Museum of the Prairie Pioneer ● Buffalo Bill Ranch State Historical Park ● http://www.nngroup.com/articles/how-users-read-on-the-web/
Brief, scannable, simple Before After In support of your efforts to develop Interested in learning outside yourself, or a staff member who reports the classroom? to you if you are supervisor or manager, Learn on your own time using the the list below includes Suggested resources below organized by topic. Readings and websites organized by skill set.
Front-load important content. Put critical content at the top of your page and in headings.
Front-load important content. Titles: Before Titles: After What can I do after a BA in Career Options for English English? Grads Learn About How to Apply Apply for a Grant Get Directions to Stanford Directions to Stanford
Front-load important content. First Lines: Before First Lines: After Bachelor of Arts in Numerology Major Numerology We offer a B.A. in Numerology that explores traditional numerological subjects. You can also The undergraduate major in Numerology trains pursue a concentration in Computational students to consider all facets of counting and Numerology or Design and Numerological consider the deepest and broadest questions Thinking. concerning values and the infinity of the null, as well as their connections to the full range of humanity.
Avoid jargon. You know your content better than anyone else. Beware!
Avoid jargon. Before After STRP is available to FTEs. Tuition assistance is available to full- time employees. Stanford offers Long Term Care Stanford offers LTC insurance at group insurance at lower cost to you through rates through CNA. an outside vendor. Critical theory seeks to problematize Eh? the hegemonic reification of oppressive stratified social constructs.
Be consistent. Develop a style guide to ensure all content is written in a similar voice. More on that coming...
Top content goals • keep everything brief • use scannable layouts • keep language simple • front-load important content • avoid jargon • be consistent
what is a style guide? what is a style guide?
A style guide is a set of content rules that keeps everyone’s tone of voice on the same page. https://blog.gathercontent.com/tone-of-voice-guide
Style guides include • voice • grammar • language • (format) • (image usage) • (custom style options)
Voice: define your personality Choose three to five words to describe your organization’s personality.
Voice: define your personality Apple: • calm, but not passive • confident, but not arrogant • innovative, but not flash
Voice: define your personality Atlassian: • bold, brave but not cocky • practical, with a wink • optimistic, but not delusional
Voice: define your personality Cardinal at Work: • friendly, but not casual • conversational • personal and direct https://swsblog.stanford.edu/blog/creating-web-style-guide-cardinal-work
Voice: define your personality. Before After The Comparison Tool has been developed as a way We know that choosing medical plans can be to look at Health Plan options side by side. challenging. If you are having a hard time, try using Health Plan Comparison Tool the Comparison Tool. Compare health plans Stanford offers employees a place to enrich all At Stanford, we offer you a place to enrich all aspects of their lives. aspects of your life. Explore courses for Stanford staff and faculty Find a course for you Employees have many options for developing a We are happy to help you find the solution you maternity leave plan. need for your maternity leave. Review disability options for maternity leave Review maternity leave options
Grammar: define your rules Standard style books • AP Stylebook • Chicago Manual of Style • Yahoo! Style Guide
Grammar: define your rules Title vs. sentence case • Which of These Sentences is Easier to Read? • Which of these sentences is easier to read? http://www.stickycontent.com/blog/are-you-team-title-case-or-team-sentence-case.php
Recommend
More recommend
