Writing for the Modern Web

Понравилась презентация – покажи это...

Слайд 0

flic.kr/p/aHV47t Writing for the Web David Lee King | Rebecca Blakiston | Elaine Meyer

Слайд 1

t n e t n o C $ $ $ images videos words

Слайд 2

t n awe nte so m Co e ! $ $ $ images videos words

Слайд 3

Resp ent t onsn o ibCli i ty $ images videos words $ $

Слайд 4

so let’s improve our words

Слайд 5

the Problem(s)

Слайд 6

#1 we’re not writers

Слайд 7

General Reference Center:
 A general interest database that integrates a variety of sources in one easy-to-use interface. Use General Reference Center to find articles from magazines, reference books, and newspapers, many with full-text and images.

Слайд 8

28 seconds # to grab a reader’s attention

Слайд 9

People Product Process

Слайд 10

the People

Слайд 11

know your customers

Слайд 12

know your customers

Слайд 13

flic.kr/p/eo52B3 Have a focus

Слайд 14

know your staff, too

Слайд 15

the Product

Слайд 16

words are a product

Слайд 17

flic.kr/p/5qtj4r focus
 on the 
 right things

Слайд 18

the Process

Слайд 19

flic.kr/p/o6B7TP titles!

Слайд 20

Слайд 21

Слайд 22


Слайд 23

flic.kr/p/rrtaDX use

Слайд 24

know speling errores

Слайд 25

e it s b e w re-use
 Facebook content r te it w T

Слайд 26

where to start?

Слайд 27

flic.kr/p/qfMsoQ have fun!

Слайд 28

Слайд 29

Слайд 30

Слайд 31

Слайд 32

Слайд 33

Слайд 34

Слайд 35

Слайд 36

Слайд 37

Слайд 38

Слайд 39

Слайд 40

Слайд 41

Слайд 42

Слайд 43

Слайд 44

Слайд 45

Слайд 46

Слайд 47

Слайд 48

Слайд 49

Слайд 50

Слайд 51

Writing for the web Elaine Meyer www.mcls.org uxlibrarian@gmail.com www.uxlibrarian.com Internet Librarian October 27, 2015 Monterey, California

Слайд 52

Why is writing for the web different? Reading from a computer screen is: • tiring to your eyes • 25% slower than print reading. People are less likely to read long pieces of text online then in print. Jakob Nielsen: http://www.nngroup.com/articles/why-web-users-scaninstead-reading/

Слайд 53

How do people read online? They don’t! Instead, they: • skim, scan and select • browse before diving in • read a little at a time, mostly in short bursts • grab what they need and get onto their goal.

Слайд 54

Less is more Less content • is easier to manage • is more user-friendly • costs less to create

Слайд 55

Planning your web content Web content is useless unless it supports: 1. A key business objective such as: • Promotes events & training classes • Encourages citizens to become patrons 2. Users in completing a task • Search catalog for an item • Find a study room • Library hours/directions • How long can I keep my book?

Слайд 56

Questions before writing Before you write anything, ask yourself: • Why am I creating this page? • Who am I talking to? • What is my main message? • Does the user need it? • What do I want the user to do after reading it? Every page must have a clear purpose!

Слайд 57

Content accessibility Content is truly accessible only if it can be used by people with disabilities. Patrons with disabilities must be able to use everything: • Links • Buttons • Form controls • Images • Etc

Слайд 58

Use descriptive link text Not descriptive: To complete the online Reserve Form, click here. Descriptive: Complete the online Reserve Form. Never use “Click here” to describe a link • “Click here” is not descriptive for screen readers • Links are given extra weight by search engine spiders, so avoid “Click here”.

Слайд 59

Human readable URLs Not descriptive: http://www.michigan.gov/libraryofmichigan/ 0,2351,7-160-50206_18637_18649-2090--,00.html Descriptive: http://www.michigan.gov/libraryofmichigan/ accessibility_policy

Слайд 60

Button labels • Keep button labels short and action oriented. • Avoid ‘Go’ or ‘OK’ as button labels. Instead, use the appropriate verb or phrase, such as ‘Submit’ or ‘Give feedback’.

Слайд 61

Alert users of outside content Adobe PDF Microsoft Word Microsoft Excel PowerPoint Open in a new window

Слайд 62

Contrast Color picker tool: ColorZilla for Firefox Color Contrast Checker: WebAIM http://webaim.org/resources/ contrastchecker/ Both size texts failed the contrast checker for the search button

Слайд 63

Red/green color blindness Use labels instead: Don’t use color as the only indication of what to do!

Слайд 64

AVOID USING ALL CAPS Caps are: • Difficult to read • Portray shouting • Relay urgency This includes navigation items like menus, footer, buttons, etc

Слайд 65

Left-align text Instead of this: Try this:

Слайд 66

Images – text equivalents Text information MUST be provided for web content that is not textual. Non-text items include: • Images • Image buttons • Charts/graphs • Audio files • Multimedia files that include both audio and video

Слайд 67

Images – text equivalents <alt> attribute: every image must have valid ‘alt’ text Why use the “alt” attribute (commonly known as “alt text”)? • Provides text equivalent for blind users • Indexed by search engines • Can add additional information for the user alt="Find it for FREE” alt= “Gale LegalForms - Find it for FREE”

Слайд 68

Images that don’t convey information What type of images don’t convey information? • Spacer images • Design images • Background images Use null alt text: alt=““ (alt=quote quote with no space in between)

Слайд 69

User assistance (help!) Indianapolis Public Library Wayne State University Libraries Kent District Library Purdue University Libraries

Слайд 70

Go back and check your work Check your work: • before you publish your stuff • after you see it online • again next week (the article will be different the next time you look). Keep asking yourself: • Is this clear? • Is there a simpler way to say this? • Is there a shorter way to say this? • Is this even necessary?

Слайд 71

Слайд 72