'

Before the Docs: Writing for User Interfaces

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





Слайд 0

Before the docs Writing for user interfaces Beth Aitman @baitman


Слайд 1


Слайд 2

Introduction - Microcopy - Help - Errors Why does UI text matter?


Слайд 3

Introduction - Microcopy - Help - Errors Why does UI text matter? The UI comes first.


Слайд 4

Introduction - Microcopy - Help - Errors


Слайд 5

Introduction - Microcopy - Help - Errors


Слайд 6

Introduction - Microcopy - Help - Errors


Слайд 7

Introduction - Microcopy - Help - Errors It’s not one or the other


Слайд 8

Introduction - Microcopy - Help - Errors It’s not one or the other Docs and UI support each other.


Слайд 9

Introduction - Microcopy - Help - Three main areas 1. Microcopy 2. Embedded help 3. Error messages Errors


Слайд 10

Introduction - Microcopy - Help - Errors


Слайд 11

Introduction - Microcopy - Help - Errors


Слайд 12

Introduction - Microcopy - Help - Errors


Слайд 13

Introduction - Microcopy - Help First, microcopy - Errors


Слайд 14

Introduction - Microcopy - Help - Errors


Слайд 15

Introduction - Microcopy - Help - Errors


Слайд 16

Introduction - Microcopy - Help - Errors Text makes UIs meaningful from https://signalvnoise.com/posts/3404-reminder-design-is-still-about-words


Слайд 17

Introduction - Microcopy - Help - Errors Text makes UIs meaningful from https://signalvnoise.com/posts/3404-reminder-design-is-still-about-words


Слайд 18

Introduction - Microcopy - Help - Errors Microcopy is difficult “Naming things is hard!”


Слайд 19

Introduction - Microcopy - Help - Errors


Слайд 20

Introduction - Microcopy - Help - Errors


Слайд 21

Introduction - Microcopy - Help - Errors


Слайд 22

Introduction - Microcopy - Help - Errors


Слайд 23

Introduction - Microcopy - Help - Errors


Слайд 24

Introduction - Microcopy - Help - Errors


Слайд 25

Introduction - Microcopy - Help - Errors


Слайд 26

Introduction - Microcopy - Help - Errors Three strategies for microcopy 1. Think from the user perspective 2. Choose names they can understand 3. Experiment with phrasing


Слайд 27

Introduction - Microcopy - Help - Errors 1. Think from the user perspective Explain what a feature does, not how it works


Слайд 28

Introduction - Microcopy - Help - Errors


Слайд 29

Introduction - Microcopy - Help - Errors For buttons, think actions


Слайд 30

Introduction - Microcopy - Help - Errors For buttons, think actions Not this!


Слайд 31

Introduction - Microcopy - Help - Errors 2. What’s it normally called? What do users call it? What will they understand?


Слайд 32

Introduction - Microcopy - Help - Errors


Слайд 33

Introduction - Microcopy - Help - Errors


Слайд 34

Introduction - Microcopy - Help - Errors


Слайд 35

Introduction - Microcopy - Help - Errors


Слайд 36

Introduction - Microcopy - Help - Errors 3. Experiment with phrasing


Слайд 37

Introduction - Microcopy - Help - Errors 3. Experiment with phrasing Try explaining it in a sentence.


Слайд 38

Introduction - Microcopy - Help - Errors


Слайд 39

Introduction - Microcopy - Help - Errors


Слайд 40

Introduction - Microcopy - Help - Errors … and embedded help is there if you need it.


Слайд 41

Introduction - Microcopy - Help - Errors


Слайд 42

Introduction - Microcopy - Help - Errors


Слайд 43

Introduction - Microcopy - Help - Errors


Слайд 44

Introduction - Microcopy - Help Embedded help - Errors


Слайд 45

Introduction - Microcopy - Help - Errors


Слайд 46

Introduction - Microcopy - Help - Errors


Слайд 47

Introduction - Microcopy - Help - Errors


Слайд 48

Introduction - Microcopy - Help - Errors Embedded help - What do you include? When do you use docs? Where do you put help? Styles


Слайд 49

Introduction - Microcopy - Help - Errors What goes in embedded help? “What does your user need to know to complete their task?”


Слайд 50

Introduction - Microcopy - Help - Errors


Слайд 51

Introduction - Microcopy - Help - Errors


Слайд 52

Introduction - Microcopy - Help - Errors


Слайд 53

Introduction - Microcopy - Help - Errors


Слайд 54

Introduction - Microcopy - Help - Errors


Слайд 55

Introduction - Microcopy - Help - Errors Don’t overload people


Слайд 56

Introduction - Microcopy - Help - Errors Embedded help vs docs - If it’s necessary information: probably keep it in the UI - If it’s huge: summarise, then link to a doc


Слайд 57

Introduction - Microcopy - Help - Errors Show it in the relevant place


Слайд 58

Introduction - Microcopy - Help - Errors


Слайд 59

Introduction - Microcopy - Help - Errors


Слайд 60

Introduction - Microcopy - Help - Errors Embedded help styles There are tons.


Слайд 61

Introduction - Microcopy - Help - Errors Embedded help styles There are tons. But I like: - inline help


Слайд 62

Introduction - Microcopy - Help - Errors Embedded help styles There are tons. But I like: - expandable questions


Слайд 63

Introduction - Microcopy - Help - Errors Embedded help styles There are tons. But I like: - hover text


Слайд 64

Introduction - Microcopy - Help - Errors Embedded help styles There are tons. So experiment!


Слайд 65

Introduction - Microcopy - Help - Errors In summary - find out what user needs to complete task - don’t overload with information - show help in a relevant place and time


Слайд 66

Introduction - Microcopy - Help Error messages - Errors


Слайд 67

Introduction - Microcopy - Help - Errors Error messages are easy! I’ve got a formula.


Слайд 68

Introduction - Microcopy - Help - what went wrong - consequences - how to fix it - Errors


Слайд 69

Introduction - Microcopy - Help - what went wrong - consequences - how to fix it - Errors


Слайд 70

Introduction - Microcopy - Help - Errors


Слайд 71

Introduction - Microcopy - Help - Errors


Слайд 72

Introduction - Microcopy - Help - Errors


Слайд 73

Introduction - Microcopy - Help - what went wrong - consequences - how to fix it - Errors


Слайд 74

Introduction - Microcopy - Help - Errors


Слайд 75

Introduction - Microcopy - Help - Errors


Слайд 76

Introduction - Microcopy - Help - what went wrong - consequences - how to fix it - Errors


Слайд 77

Introduction - Microcopy - Help - Errors


Слайд 78

Introduction - Microcopy - Help - Errors


Слайд 79

Introduction - Microcopy - Help - Errors


Слайд 80

Introduction - Microcopy - Help - Errors


Слайд 81

Introduction - Microcopy - Help - Errors - what went wrong - consequences - how to fix it (and leave it out if it doesn’t apply)


Слайд 82

Introduction - Microcopy - Help - Errors In summary... - Experiment with naming to get your microcopy right. - Support users with embedded help in the UI, but be ready to link to docs. - Use the formula for error messages!


Слайд 83

One last thing! beth.s.aitman@gmail.com uiwriting.tumblr.com @baitman


Слайд 84

Thanks for listening :) If you have questions/opinions, talk to me after, or get in touch! beth.s.aitman@gmail.com uiwriting.tumblr.com @baitman


Слайд 85


×

HTML:





Ссылка: