How to become a superhero for Umbraco CMS content editors (c) Douglas Robar, Percipient Studios

1. Today I want to talk to you about SUPERHEROS
1

2. Hi, I’m Doug. I’m an Umbraco-holic.
2

3. We're all familiar with superheros.
http://blo0p.deviantart.com/art/Bloop-s-New-Superhero-Wallpapers-304284941
4

4. Every superhero is gifted with different abilities but some TRAITS are common to all
superheros:
• they want to help others
• they never give up
• they are the best at what they do
• they are crystal clear on their purpose and goal
• they focus on what they do, and leave the rest for others
• they are NOT flawless
• they can work alone but are even more powerful in teams
• they don't seek glory; but they get it anyway
5

5. Superheros are role models.
Like me, you've probably dreamed of seeing a superhero in action in real life, doing his or
her superhero stuff, making a difference in the lives of everyday people.
You might have dreamed of being in a desperate situation and what it would be like to have
a superhero come to your rescue.
Or maybe you've even dreamed of being that superhero to rescue someone else! Wouldn't
that be great?!
6

6. Anyone would love to have a superhero looking after him!
Yes, even Umbraco content editors!
7

7. As a quick show of hands… how many of you think really highly of users?
• Excellent! you're well on your way to superhero status!
• For the rest of you who didn't raise your hand… there is still hope for you :)
8

8. Being an Umbraco superhero is really easy
9

9. Do it for the fun, the fame, the glory, the money
It's massively rewarding
- and great for both you and your clients
10

10. 11

11. It’s time for a new superhero… UmbracoMan!
http://www.flickr.com/photos/steinmeier/8651542990/
12

12. UmbracoMan:
• Has respect and compassion for content editors
• treats them the way he wants to be treated
• doesn't waste their time
• Keeps things simple, obvious, and consistent
• Uses his 'Belt of Widgets‘
• keeps those community packages handy for a quick rescue
13

13. What is UmbracoMan focused on?
• What the site looks like
• Cool technical implementation details
• Where it's hosted
• If you use C#, razor, XSLT, CoffeeScript, .less, and other cool techs
• ???
14

14. >> NO! <<
15

15. Umbraco Man cares first and foremost about creating a great user experience for content
editors!
16

16. Their experience of Umbraco and your talents are primarily governed by how the
document types and properties are crafted.
Document Types are the basis for nearly everything content editors do.
17

17. The first step when respecting content editors is to ask the LEAST possible from them
- Seriously –
• Every property is asking them for information
• Don't waste their time and attention span
• Treat them just as you'd want to be treated if you were the content editor for a site
Trust me, your kindness will be amply rewarded!
18

18. 19

19. For instance, suppose this About Us page needs updating with new text…
20

20. … and a photo of the company bbq just before the fire fighters arrived
21

21. If you were the webmaster for the site… what would be included in the email you received
about the update?
• The page name
• The body text and associated image
• And possibly the section heading if that's editable and different on this page
That's it! The rest they will assume you will take care of because you're a professional
webmaster.
Content editors don’t care about the templates, macros, and NOISE surrounding the
content.
If that's all they will tell you anyway, and it's enough, then don't ask for more when making
your document type properties.
22

22. Also, think about the effect the data type editor has for each property
• the data type isn't just a technical decision about how the date is stored
• the data type is also the DATA EDITOR for the …ummm… content editor
• IT IS THE MOST VISIBLE ASPECT OF THE UX FOR CONTENT EDITORS!
23

23. Textstring suggests short summary
Multine textbox asks for a paragraph
24

24. How many different ways could the date be typed in to a text string?
• would everyone in the organization do it the same way?
• would any single person always enter the date in exactly the same format?
• would YOU if you were the content editor of a large site?
• Remember: treat them the way you'd want to be treated
Date picker is simple, obvious, and consistent
25

25. Upload = one-time use only
• doesn’t clutter media section
• upload your CV for a job application, for instance
Media Picker = use many times
• optional ‘advanced’ mode allows upload as well as picking
26

26. Content (or Media) picker is for choosing a single item from anywhere
Multi Node Tree Picker (MNTP) is for multiple selections from specific parts of the site
• MNTP is THE best data type editor for users after the richtext editor (RTE)
• MNTP is hugely configurable with a thousand uses.
• Learn it, use it, love it.
27

27. Textstring says "type a list"
• but how separate terms?
• With quotes, commas, semi-colons, ???
Tags are simple, obvious, and consistent
28

28. Who wants to force users to type html?
They want something similar to MS Word
• Richtext editor is simple, obvious, and avoids markup errors
29

29. Beyond selecting the best data type editor, many have CONFIGURATION options
30

30. Richtext Editor
• Toolbar buttons
• In most cases I will at least disable html, enable cleansweep, enable spelling,
disable tables
• Size
• match the design layout width
• if responsive, set to most commonly viewed size
• CSS Styling
• Select css for wysiwyg
• Remember: not too many, and name them well!
• MS word uses Heading 1, Heading 2, and Normal or Body Text
• So do I; it’s what users are familiar with
31

31. And you can create new, CUSTOM versions too for specific uses (such as an editor for the
sidebar content)
32

32. In fact, a number of built-in datatypes don't have a default configuration but they are easy
to create for your needs
• Dictionary Picker
• Multi-Node Tree Picker
• Picker Relations
• Slider
• XPath Checkbox List
• XPath Dropdown List
33

33. The Umbraco community has many other excellent data type editors as well
• Google Maps Data Type
• uComponents (autocomplete, character limit, elastic textbox)
• and many many more
34

34. All aspects of document type properties are important
35

35. Clear, meaningful, and CONSISTENT property names
• "Auxiliary content" "Image 1" "Image 2" "Image 3" "Date“
• these are not helpful
• Think like users
• If they think of a person's name as "First name" and "Last name", use them!
• If they think of a person's name as "Firstname" and "Surname", use that instead!
36

36. Add property descriptions for built-in, on-the-spot, when-you-need-it help
ASK users how THEY would describe a property field to a new user… type it in the
description!
Saves a lot of phone calls and emails from confused users
37

37. Organize properties in a natural sequence
• First name and then Last name
• Unless the content editor are used to an ERP or CRM system that is last name
centric…
• Sort the properties the way content editors are used to!
This is the stuff superheros are made of!
Similarly, group properties into logical (and short) groups
• place each group on its own (well named) tab
• or in its own fieldset using Tom Fulton's package
Put them into natural sequence
• with the most important and often-used ones first
• don't bury important fields at the end; users will miss it too often
38

38. Consider how you use MANDATORY and REGEX VALIDATION for properties
Some people try to use technology to solve a human problem; that almost never works.
Think about it… what do YOU do when you fill out a form online and don't want to give out your email address?
• you leave it blank
• if that doesn't work you type in random characters
• if that doesn't work you type in "a@b.c" or "nobody@example.com“
There, you've passed the mandatory setting and you've even gotten past the regex validation requirement.
But you've entered unusable data!
The same thing can happen to content editors when you go crazy with the mandatory and regex settings on document
type properties!
I say it's better to leave it empty, to prefer NO DATA
• That's easy to spot in your macros and templates… if there is no email address, don't try to display it
But BAD DATA is impossible to recognize…
• you'll end up displaying a broken email address because you tried to use technology to solve a human
problem
39

39. Respect the content editors and treat them the way you'd want to be treated
In fact, let's take this step further… "OPTIONAL" properties rather than "MANDATORY"
properties
It's a different way of thinking, and a better experience for users
40

40. Don't include a wild number of obscure and little-used, "just in case" properties
• (such as pagetitle, urlalias, redirect to, etc etc)
• Avoid unnecessary inherited properties
Simplify and remove extraneous noise or you’ll be teaching users that you are happy waste
their time, complicate their task, and that they can ignore any property they don't feel like
entering a value into.
If you must have rarely used properties or tabs
• group them in special tab and provide excellent names and descriptions for them
• you might also consider uHidesy or Tab Hider packages by Anthony Dang and Tim Payne
to hide properties and tabs from users who shouldn't see them
41

41. Before we leave document types and talk about users, here are some more superhero
techniques:
42

42. Provide clear and meaningful icons and thumbnails for all document types
• Use the FamFamFam icon set package (remove any you don't need)
• Add your own custom icons and thumbnails by dropping them in the appropriate folder
• see 24days article by Kim Andersen at http://24days.in/umbraco/2012/remember-the-
editors/
43

43. Disable the one-of-a-kind doctypes in the Structure tab after you've created the content
page
• see 24days article by Doug Robar at http://24days.in/umbraco/2012/superhero/
44

44. When you can't narrow it down to a single document type, use Tom Fulton's Structure
Extensions package to set default document type and media type
45

45. Oh, and remember to set which document type(s) are allowed at the root of the site as
well
46

46. 47

47. Content editors should focus on content
• Templates are for designers; don't let users choose them.
• Richtext Editor is deliberately limited to focus on the message, not the markup
• Embrace simplicity and remove the distraction of too many choices
48

48. Best practice is to have a single top-level node for the site
• or, if you have multiple sites, a top-level node for each site
• this also makes it easy to add a 'configuration' section outside the site
• this also makes it easy to add a 'shared content' section
• and you can limit users to only certain sites or sections of the site, as we'll see in a few
minutes
49

49. I'm sure you're already a User Ninja, creating new user types and assigning sections and
start nodes in the content and media trees for users
• Users only see what they are responsible for
• helpful in very large sites
• helpful in multi-lingual sites (different people are responsible for different languages)
• Configuration and shared content sections of the content tree can be seen or hidden
50

50. It's easy to over-ride user permissions to empower individual users
51

51. Notification emails for activities requiring attention by someone else
• approve publishing or translation; alerts when new content created; etc
52

52. Dashboards are great!
53

53. Not only can you make your own custom dashboard controls (really easy to do!)
… but you can show/hide it based on who is logged in to Umbraco
54

54. Advanced users see additional tools
Remove noise by hiding them from people who shouldn't use them
55

55. Content Maintenance Dashboard by Richard Soeterman
http://our.umbraco.org/projects/developer-tools/content-maintenance-dashboard-
package
56

56. Broken Link Checker by Darren Ferguson
http://our.umbraco.org/projects/developer-tools/broken-link-checker
57

57. Examine Inspector by Ismail Mayat
http://our.umbraco.org/projects/backoffice-extensions/examine-inspector
58

58. Disk Space Monitor by Matt Brailsford
http://our.umbraco.org/projects/backoffice-extensions/disk-space-monitor
And…
Your own custom dashboards, access to backend systems (such as ERP or CRM etc)
59

59. 60

60. Give all users a copy of the Umbraco Editors Manual by Matt Brailsford (and many others),
available in many languages
http://our.umbraco.org/projects/website-utilities/editors-manual
Email them the pdf
Also available for download from iTunes
61

61. Create custom help pages and update the help links in the Umbraco back office
• Each user type, in each language, viewing each screen in the back office can be
customized with your unique information for the project
• syntax details at http://our.umbraco.org/documentation/using-umbraco/Config-
files/umbracoSettings/#Help
• Your document type names and uses
• Macros available in the richtext editor (what they do, parameters, when to use them)
• BTW, don't provide too many macros in the RTE; keep it simple and obvious
62

62. Change property descriptions to icons
• I do this a month or so after launch
• Still visible but not so 'in your face‘
• Takes less space and is tidier in many cases
63

63. To be an umbraco superhero, remember:
64

64. Have respect and compassion for content editors
• treat them the way he wants to be treated
• don't waste their time
Keep things simple, obvious, and consistent
Use your 'Belt of Widgets'
66

65. Please share YOUR favorite superhero moves!
67

66. 68