Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Today I want to talk to you about SUPERHEROS1
Hi, I’m Doug. I’m an Umbraco-holic.2
Were all familiar with superheros.http://blo0p.deviantart.com/art/Bloop-s-New-Superhero-Wallpapers-3042849414
Every superhero is gifted with different abilities but some TRAITS are common to allsuperheros:• they want to help others•...
Superheros are role models.Like me, youve probably dreamed of seeing a superhero in action in real life, doing his orher s...
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! youre well on your way to superhero st...
Being an Umbraco superhero is really easy9
Do it for the fun, the fame, the glory, the moneyIts massively rewarding- and great for both you and your clients10
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• doesnt waste thei...
What is UmbracoMan focused on?• What the site looks like• Cool technical implementation details• Where its hosted• If you ...
>> NO! <<15
Umbraco Man cares first and foremost about creating a great user experience for contenteditors!16
Their experience of Umbraco and your talents are primarily governed by how thedocument types and properties are crafted.Do...
The first step when respecting content editors is to ask the LEAST possible from them- Seriously –• Every property is aski...
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 arrived21
If you were the webmaster for the site… what would be included in the email you receivedabout the update?• The page name• ...
Also, think about the effect the data type editor has for each property• the data type isnt just a technical decision abou...
Textstring suggests short summaryMultine textbox asks for a paragraph24
How many different ways could the date be typed in to a text string?• would everyone in the organization do it the same wa...
Upload = one-time use only• doesn’t clutter media section• upload your CV for a job application, for instanceMedia Picker ...
Content (or Media) picker is for choosing a single item from anywhereMulti Node Tree Picker (MNTP) is for multiple selecti...
Textstring says "type a list"• but how separate terms?• With quotes, commas, semi-colons, ???Tags are simple, obvious, and...
Who wants to force users to type html?They want something similar to MS Word• Richtext editor is simple, obvious, and avoi...
Beyond selecting the best data type editor, many have CONFIGURATION options30
Richtext Editor• Toolbar buttons• In most cases I will at least disable html, enable cleansweep, enable spelling,disable t...
And you can create new, CUSTOM versions too for specific uses (such as an editor for thesidebar content)32
In fact, a number of built-in datatypes dont have a default configuration but they are easyto create for your needs• Dicti...
The Umbraco community has many other excellent data type editors as well• Google Maps Data Type• uComponents (autocomplete...
All aspects of document type properties are important35
Clear, meaningful, and CONSISTENT property names• "Auxiliary content" "Image 1" "Image 2" "Image 3" "Date“• these are not ...
Add property descriptions for built-in, on-the-spot, when-you-need-it helpASK users how THEY would describe a property fie...
Organize properties in a natural sequence• First name and then Last name• Unless the content editor are used to an ERP or ...
Consider how you use MANDATORY and REGEX VALIDATION for propertiesSome people try to use technology to solve a human probl...
Respect the content editors and treat them the way youd want to be treatedIn fact, lets take this step further… "OPTIONAL"...
Dont include a wild number of obscure and little-used, "just in case" properties• (such as pagetitle, urlalias, redirect t...
Before we leave document types and talk about users, here are some more superherotechniques:42
Provide clear and meaningful icons and thumbnails for all document types• Use the FamFamFam icon set package (remove any y...
Disable the one-of-a-kind doctypes in the Structure tab after youve created the contentpage• see 24days article by Doug Ro...
When you cant narrow it down to a single document type, use Tom Fultons StructureExtensions package to set default documen...
Oh, and remember to set which document type(s) are allowed at the root of the site aswell46
47
Content editors should focus on content• Templates are for designers; dont let users choose them.• Richtext Editor is deli...
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 s...
Im sure youre already a User Ninja, creating new user types and assigning sections andstart nodes in the content and media...
Its easy to over-ride user permissions to empower individual users51
Notification emails for activities requiring attention by someone else• approve publishing or translation; alerts when new...
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 lo...
Advanced users see additional toolsRemove noise by hiding them from people who shouldnt use them55
Content Maintenance Dashboard by Richard Soetermanhttp://our.umbraco.org/projects/developer-tools/content-maintenance-dash...
Broken Link Checker by Darren Fergusonhttp://our.umbraco.org/projects/developer-tools/broken-link-checker57
Examine Inspector by Ismail Mayathttp://our.umbraco.org/projects/backoffice-extensions/examine-inspector58
Disk Space Monitor by Matt Brailsfordhttp://our.umbraco.org/projects/backoffice-extensions/disk-space-monitorAnd…Your own ...
60
Give all users a copy of the Umbraco Editors Manual by Matt Brailsford (and many others),available in many languageshttp:/...
Create custom help pages and update the help links in the Umbraco back office• Each user type, in each language, viewing e...
Change property descriptions to icons• I do this a month or so after launch• Still visible but not so in your face‘• Takes...
To be an umbraco superhero, remember:64
Have respect and compassion for content editors• treat them the way he wants to be treated• dont waste their timeKeep thin...
Please share YOUR favorite superhero moves!67
68
Upcoming SlideShare
Loading in …5
×

Becoming a superhero - Umbraco DK festival 2013 - notes

2,456 views

Published on

How to become a superhero for Umbraco CMS content editors

(c) Douglas Robar, Percipient Studios

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Becoming a superhero - Umbraco DK festival 2013 - notes

  1. 1. Today I want to talk to you about SUPERHEROS1
  2. 2. Hi, I’m Doug. I’m an Umbraco-holic.2
  3. 3. Were all familiar with superheros.http://blo0p.deviantart.com/art/Bloop-s-New-Superhero-Wallpapers-3042849414
  4. 4. Every superhero is gifted with different abilities but some TRAITS are common to allsuperheros:• 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 dont seek glory; but they get it anyway5
  5. 5. Superheros are role models.Like me, youve probably dreamed of seeing a superhero in action in real life, doing his orher 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 havea superhero come to your rescue.Or maybe youve even dreamed of being that superhero to rescue someone else! Wouldntthat be great?!6
  6. 6. Anyone would love to have a superhero looking after him!Yes, even Umbraco content editors!7
  7. 7. As a quick show of hands… how many of you think really highly of users?• Excellent! youre well on your way to superhero status!• For the rest of you who didnt raise your hand… there is still hope for you :)8
  8. 8. Being an Umbraco superhero is really easy9
  9. 9. Do it for the fun, the fame, the glory, the moneyIts massively rewarding- and great for both you and your clients10
  10. 10. 11
  11. 11. It’s time for a new superhero… UmbracoMan!http://www.flickr.com/photos/steinmeier/8651542990/12
  12. 12. UmbracoMan:• Has respect and compassion for content editors• treats them the way he wants to be treated• doesnt waste their time• Keeps things simple, obvious, and consistent• Uses his Belt of Widgets‘• keeps those community packages handy for a quick rescue13
  13. 13. What is UmbracoMan focused on?• What the site looks like• Cool technical implementation details• Where its hosted• If you use C#, razor, XSLT, CoffeeScript, .less, and other cool techs• ???14
  14. 14. >> NO! <<15
  15. 15. Umbraco Man cares first and foremost about creating a great user experience for contenteditors!16
  16. 16. Their experience of Umbraco and your talents are primarily governed by how thedocument types and properties are crafted.Document Types are the basis for nearly everything content editors do.17
  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• Dont waste their time and attention span• Treat them just as youd want to be treated if you were the content editor for a siteTrust me, your kindness will be amply rewarded!18
  18. 18. 19
  19. 19. For instance, suppose this About Us page needs updating with new text…20
  20. 20. … and a photo of the company bbq just before the fire fighters arrived21
  21. 21. If you were the webmaster for the site… what would be included in the email you receivedabout the update?• The page name• The body text and associated image• And possibly the section heading if thats editable and different on this pageThats it! The rest they will assume you will take care of because youre a professionalwebmaster.Content editors don’t care about the templates, macros, and NOISE surrounding thecontent.If thats all they will tell you anyway, and its enough, then dont ask for more when makingyour document type properties.22
  22. 22. Also, think about the effect the data type editor has for each property• the data type isnt 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. 23. Textstring suggests short summaryMultine textbox asks for a paragraph24
  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 youd want to be treatedDate picker is simple, obvious, and consistent25
  25. 25. Upload = one-time use only• doesn’t clutter media section• upload your CV for a job application, for instanceMedia Picker = use many times• optional ‘advanced’ mode allows upload as well as picking26
  26. 26. Content (or Media) picker is for choosing a single item from anywhereMulti 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. 27. Textstring says "type a list"• but how separate terms?• With quotes, commas, semi-colons, ???Tags are simple, obvious, and consistent28
  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 errors29
  29. 29. Beyond selecting the best data type editor, many have CONFIGURATION options30
  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 with31
  31. 31. And you can create new, CUSTOM versions too for specific uses (such as an editor for thesidebar content)32
  32. 32. In fact, a number of built-in datatypes dont have a default configuration but they are easyto create for your needs• Dictionary Picker• Multi-Node Tree Picker• Picker Relations• Slider• XPath Checkbox List• XPath Dropdown List33
  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 more34
  34. 34. All aspects of document type properties are important35
  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 persons name as "First name" and "Last name", use them!• If they think of a persons name as "Firstname" and "Surname", use that instead!36
  36. 36. Add property descriptions for built-in, on-the-spot, when-you-need-it helpASK users how THEY would describe a property field to a new user… type it in thedescription!Saves a lot of phone calls and emails from confused users37
  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 namecentric…• 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 Fultons packagePut them into natural sequence• with the most important and often-used ones first• dont bury important fields at the end; users will miss it too often38
  38. 38. Consider how you use MANDATORY and REGEX VALIDATION for propertiesSome 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 dont want to give out your email address?• you leave it blank• if that doesnt work you type in random characters• if that doesnt work you type in "a@b.c" or "nobody@example.com“There, youve passed the mandatory setting and youve even gotten past the regex validation requirement.But youve entered unusable data!The same thing can happen to content editors when you go crazy with the mandatory and regex settings on documenttype properties!I say its better to leave it empty, to prefer NO DATA• Thats easy to spot in your macros and templates… if there is no email address, dont try to display itBut BAD DATA is impossible to recognize…• youll end up displaying a broken email address because you tried to use technology to solve a humanproblem39
  39. 39. Respect the content editors and treat them the way youd want to be treatedIn fact, lets take this step further… "OPTIONAL" properties rather than "MANDATORY"propertiesIts a different way of thinking, and a better experience for users40
  40. 40. Dont include a wild number of obscure and little-used, "just in case" properties• (such as pagetitle, urlalias, redirect to, etc etc)• Avoid unnecessary inherited propertiesSimplify and remove extraneous noise or you’ll be teaching users that you are happy wastetheir time, complicate their task, and that they can ignore any property they dont feel likeentering 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 Payneto hide properties and tabs from users who shouldnt see them41
  41. 41. Before we leave document types and talk about users, here are some more superherotechniques:42
  42. 42. Provide clear and meaningful icons and thumbnails for all document types• Use the FamFamFam icon set package (remove any you dont 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. 43. Disable the one-of-a-kind doctypes in the Structure tab after youve created the contentpage• see 24days article by Doug Robar at http://24days.in/umbraco/2012/superhero/44
  44. 44. When you cant narrow it down to a single document type, use Tom Fultons StructureExtensions package to set default document type and media type45
  45. 45. Oh, and remember to set which document type(s) are allowed at the root of the site aswell46
  46. 46. 47
  47. 47. Content editors should focus on content• Templates are for designers; dont 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 choices48
  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 well see in a fewminutes49
  49. 49. Im sure youre already a User Ninja, creating new user types and assigning sections andstart 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 hidden50
  50. 50. Its easy to over-ride user permissions to empower individual users51
  51. 51. Notification emails for activities requiring attention by someone else• approve publishing or translation; alerts when new content created; etc52
  52. 52. Dashboards are great!53
  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 Umbraco54
  54. 54. Advanced users see additional toolsRemove noise by hiding them from people who shouldnt use them55
  55. 55. Content Maintenance Dashboard by Richard Soetermanhttp://our.umbraco.org/projects/developer-tools/content-maintenance-dashboard-package56
  56. 56. Broken Link Checker by Darren Fergusonhttp://our.umbraco.org/projects/developer-tools/broken-link-checker57
  57. 57. Examine Inspector by Ismail Mayathttp://our.umbraco.org/projects/backoffice-extensions/examine-inspector58
  58. 58. Disk Space Monitor by Matt Brailsfordhttp://our.umbraco.org/projects/backoffice-extensions/disk-space-monitorAnd…Your own custom dashboards, access to backend systems (such as ERP or CRM etc)59
  59. 59. 60
  60. 60. Give all users a copy of the Umbraco Editors Manual by Matt Brailsford (and many others),available in many languageshttp://our.umbraco.org/projects/website-utilities/editors-manualEmail them the pdfAlso available for download from iTunes61
  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 becustomized 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, dont provide too many macros in the RTE; keep it simple and obvious62
  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 cases63
  63. 63. To be an umbraco superhero, remember:64
  64. 64. Have respect and compassion for content editors• treat them the way he wants to be treated• dont waste their timeKeep things simple, obvious, and consistentUse your Belt of Widgets66
  65. 65. Please share YOUR favorite superhero moves!67
  66. 66. 68

×