Today I want to talk to you about SUPERHEROS

1

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

2

We're all familiar with superheros.

http://blo0p.deviantart.com/art/Bloop-s-New-Superhero-Wallpapers-304284941

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

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

Anyone would love to have a superhero looking after him!

Yes, even Umbraco content editors!

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

Being an Umbraco superhero is really easy

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

11

It’s time for a new superhero… UmbracoMan!

http://www.flickr.com/photos/steinmeier/8651542990/

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

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

>> NO! <<

15

Umbraco Man cares first and foremost about creating a great user experience for content

editors!

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

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

19

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

20

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

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

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

Textstring suggests short summary

Multine textbox asks for a paragraph

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

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

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

Textstring says "type a list"

• but how separate terms?

• With quotes, commas, semi-colons, ???

Tags are simple, obvious, and consistent

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

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

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

And you can create new, CUSTOM versions too for specific uses (such as an editor for the

sidebar content)

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

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

All aspects of document type properties are important

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

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

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

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

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

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

Before we leave document types and talk about users, here are some more superhero

techniques:

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

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

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

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

well

46

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

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

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

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

51

Notification emails for activities requiring attention by someone else

• approve publishing or translation; alerts when new content created; etc

52

Dashboards are great!

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

Advanced users see additional tools

Remove noise by hiding them from people who shouldn't use them

55

Content Maintenance Dashboard by Richard Soeterman

http://our.umbraco.org/projects/developer-tools/content-maintenance-dashboard-

package

56

Broken Link Checker by Darren Ferguson

http://our.umbraco.org/projects/developer-tools/broken-link-checker

57

Examine Inspector by Ismail Mayat

http://our.umbraco.org/projects/backoffice-extensions/examine-inspector

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

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

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

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

To be an umbraco superhero, remember:

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

Please share YOUR favorite superhero moves!

67

68