AWESOMEIZE YOUR CONTENT design and style best practices for text - - PowerPoint PPT Presentation

AWESOMEIZE YOUR CONTENT

design and style best practices for text and images

Linnea Williams Project Manager, Stanford Web Services linnea@stanford.edu • @linneawilliams April 10, 2015 • STANFORD DRUPAL CAMP

who am I to talk?

what are we covering?

Topics Covered

Yes!

• How people read online
• Writing more engaging

content

• Establishing tone & voice
• Making imagery choices

Nope!

• Formatting content with

HTML

• Using WYSIWYG editors
• Creating content and

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%

• f 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.

http://www.nngroup.com/articles/how-users-read-on-the-web/

(58% increase in usability)

Keep everything brief.

Before

Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge 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).

After

In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State Historical Park. http://www.nngroup.com/articles/how-users-read-on-the-web/

Use scannable layouts.

• Use bulleted and numbered lists.
• Include headings.

http://www.nngroup.com/articles/how-users-read-on-the-web/

(47% increase in usability)

Use scannable layouts.

Before

Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge 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).

After

Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were:

• Fort Robinson State Park (355,000 visitors)
• Scotts Bluff National Monument (132,166)
• Arbor Lodge State Historical Park & Museum

(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

Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge 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).

After

Nebraska has several attractions. In 1996, some of the most-visited places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge 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/

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

Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge 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).

After

In 1996, six of the most-visited places in Nebraska were:

• Fort Robinson State Park
• Scotts Bluff National Monument
• Arbor Lodge State Historical Park & Museum
• Carhenge
• 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

In support of your efforts to develop yourself, or a staff member who reports to you if you are supervisor or manager, the list below includes Suggested Readings and websites organized by skill set.

After Interested in learning outside the classroom?

Learn on your own time using the resources below organized by topic.

Front-load important content.

Put critical content at the top of your page and in headings.

Front-load important content.

Titles: Before What can I do after a BA in English? Learn About How to Apply Get Directions to Stanford Titles: After Career Options for English Grads Apply for a Grant Directions to Stanford

Front-load important content.

First Lines: Before Bachelor of Arts in Numerology

The undergraduate major in Numerology trains students to consider all facets of counting and consider the deepest and broadest questions concerning values and the infinity of the null, as well as their connections to the full range of humanity.

First Lines: After Numerology Major

We offer a B.A. in Numerology that explores traditional numerological subjects. You can also pursue a concentration in Computational Numerology or Design and Numerological Thinking.

Avoid jargon.

You know your content better than anyone else. Beware!

Avoid jargon.

Before

STRP is available to FTEs. Stanford offers LTC insurance at group rates through CNA. Critical theory seeks to problematize the hegemonic reification of oppressive stratified social constructs.

After

Tuition assistance is available to full- time employees. Stanford offers Long Term Care insurance at lower cost to you through an outside vendor. Eh?

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

• n 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

The Comparison Tool has been developed as a way to look at Health Plan options side by side. Health Plan Comparison Tool Stanford offers employees a place to enrich all aspects of their lives. Explore courses for Stanford staff and faculty Employees have many options for developing a maternity leave plan. Review disability options for maternity leave

After

We know that choosing medical plans can be

• challenging. If you are having a hard time, try using

the Comparison Tool. Compare health plans At Stanford, we offer you a place to enrich all aspects of your life. Find a course for you We are happy to help you find the solution you need for your 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

Grammar: define your rules

Oxford comma usage

• Is it snooty, unnecessary(,) or

absolutely essential?

Language: ensure consistency

• Stanford University
• the university
• Department of History
• departments of History and Music
• Department of Art & Art History

Stanford News Style Guide: https://stanford.app.box.com/s/d7xbj061yqxgy6n3692m

Language: ensure consistency

• web site vs website
• & vs and
• Mon vs. Monday
• email vs. e-mail

Top style guide goals

Be consistent.

• choose your voice and personality
• define your grammar rules
• ensure consistent use of words

what about images?

Support your content

Have a goal for the image. This image will…

• Help our users find our department.
• Illustrate the kind of work we do.
• Get students excited about our

program.

https://swsblog.stanford.edu/blog/imagery-101-choosing-right-image-your-webpage

Crop to the subject matter.

Get rid of cruft.

https://swsblog.stanford.edu/blog/imagery-101-how-choose-great-images

Use sufficient contrast.

Don’t let the content get lost.

https://swsblog.stanford.edu/blog/imagery-101-how-choose-great-images

Use real people.

Avoid stock photography and clipart.

Top imagery goals

• support your content
• crop to the subject matter
• use sufficient contrast
• use real people

When it’s good, it’s great!

https://undergrad.stanford.edu

a website is a garden.

Don’t let your content die.

“Don’t let crappy content ruin your website!” Consider:

• annual review of all pages on your site
• editorial calendar - put it on Zimbra?
• quarterly “web team” meetings

Thank you!!!

ayl.lv/web-producer ayl.lv/web-developer