WRITING & TYPOGRAPHY CLASS 1 LECTURE Content precedes design. - - PowerPoint PPT Presentation

WRITING & TYPOGRAPHY

CLASS 1 LECTURE

“Content precedes design. Design in the absence of content is not design, it’s decoration.” Jeffrey Zeldman

Plopping in content as an afterthought yields to the Standard Content Design Model (SCDM)

• r blog format
• f one, long,

vertical column

Form over function is backwards

Even the best copywriting is for nothing if users don’t read the text

Content must survive a cost-benefit analysis:

■ Cost = time and hassle users must expend ■ Benefit = what do I get out of it?

Users only read 20-30% of words

■ Krug “scan, muddle, satisfice”

Grab users’ attention quickly. Get them interested before they decide to leave

Users are impatient. Make content as clear as possible ie; scannable and skimmable

Focus on Re Readability, Le Legibility, and Cl Clarity an and Comprehension

Re Readability:

■ Understanding the content ■ How desirable is the content? ■ Interesting enough to read? ■ Follow storytelling format = people remember stories 22x more often than facts alone ■ Use plain spoken words

Test with users of varying ages and visual capabilities using software/readability calculators

Le Legibility:

■ Proper visual perception and scanning of text ■ Minimalism – users scan and selectively choose words and sentences that interest them ■ Line breaks, shorter paragraphs, “chunking”, bullet points ■ Users cherry pick ideas and concepts

Lowest level consideration in content

• usability. Test by observing users, do they

lean in to read/hard to see? How many words per minute do they read?

Cl Clarity and Co Comprehension:

■ Incorporate white space, focus and guide users’ eyes ■ Use of CRAP = Contrast, Repetition, Alignment and Proximity ■ Brevity ■ Information architecture ■ Inverted pyramid writing style = start with conclusion ■ Supplement text with images, charts, graphs ■ Visual hierarchy

Test how well users interpret information/perform specified task(s)

Good information architecture and good layout are important to get users to read content but to convert users from scanners to readers you need high-quality writing

Goals of good writing for web:

■ Write for how users read on web – clear headlines, scannable layout ■ Focus on information of interest to users, not on things you want to promote ■ Communicate immediately at top of page content which is interesting and useful ■ Clear navigation allowing users to get relevant information easily and quickly ■ Layout guides users’ eyes to relevant parts of page

WORKSHOP

■ Work in groups to design usability test of improved web writing for Lingscars.com ■ Following example from Jakob Nielsen’s “How Users Read on the Web,” select portion of text from Lingscars.com and create four or five variations of the same information ■ Poll random users and compile results for discussion during next class ■ Draft summary of results and observations

CLASS 2 LECTURE

“Typography is the detail and the presentation of a story. It represents the voice of an atmosphere, or historical setting

• f some kind. It can do a lot of things.”

Cyrus Highsmith

Typography – the art of arranging type

Typography is body language; it enhances the character of the site and adds a tone of voice that subliminally reinforces what the words say to influence how those words are perceived

Good typography = good navigation tool to guide users’ eyes

Essential in context of usability and user experience

Video – History of Typography https://www.youtube.com/watch?v=wOgIkx AfJsk

Design for legibility and readability – font, size, spacing and line length readers will see and understand

Poor readability scares readers away from the content

TY TYPOGRAPHY TIPS:

• Keep number of fonts used at a

minimum

• Use standard fonts

• Limit line length

• Choose a typeface that works well

in various sizes

• Use fonts with distinguishable letters

• AVOID ALL CAPS

• Don’t minimize spacing between

lines

• Use sufficient color contrast

• Avoid using red or green text

• Avoid using blinking text

Video – Typography Basics Parts 1 and 2 https://www.youtube.com/watch?v=rF0zvSr F438 https://www.youtube.com/watch?v=ZnyNGa xFRqQ

Typography exists to honor content

Primary goal of effective typography:

■ For users to easily and quickly read and understand text

ASSESSMENT

■ The One-Minute Paper. In 1 or 2 sentences answer the following questions: “What was the most important thing you learned during this section of the course re: Writing and Typography?” “What question(s) still remain and/or what are you still confused about?” ■ Turn in responses before leaving class.