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.
Tour API in Drupal 8
Drupalcamp Brighton 2016
Tassos Koutlas (@akoutlas) , 17. 06. 2016
Content
● Who am I
● Tours in Drupal
● Creating a custom tour
● Other ways to provide help to users
Who am I?
Tassos Koutlas
Senior Technical Consultant @
C&W
web projects / machine learning / image
processing algorithms / administe...
Tours in Drupal
What are tours?
Tours in core
● Included with Drupal 8
● Based on joyride jQuery plugin
● Configuration based, translatable
● YAML
When yo...
Tours in contrib
A few modules try to leverage tours
in core and build new functionality to
make it easier for other to co...
Why tours?
● Alternative to providing extensive documentation
● Bundled with your Drupal build and version controlled
● En...
Primary use cases
● To draw the user's attention to critical components of the
interface, especially those elements that m...
Creating a tour
Anatomy of a tour [1/2]
YAML properties:
- id
- module
- label
- routes
- langcode
- tips
Anatomy of a tour [2/2]
Tips: core ships with text
and image plugin types
- id
- plugin
- label
- body
- location
- weight...
General principles [1/2]
General principles for tours as they are captured within the context
of Drupal user interface sta...
General principles [2/2]
● If the tour is intended to illustrate a workflow, it should stay
focused on completion of a sin...
Tour text standards [1/2]
● Follow the style guidelines for Interface text
● Keep it simple.
● Use -ing verb mode for the ...
Tour text standards [1/3]
● Start the tour with a general model (not linked to any element)
for a general introduction.
● ...
Tour text standards [2/3]
● If possible, keep the tour to fewer than 8 tips.
● If possible, keep to a single sentence per ...
Tour text standards [3/3]
● Use links where useful and ensure they will never break.
● Avoid complex tour tip selectors su...
An example
drupalcamp_tour.info.yml ./config/install/tour.tour.content-overview.yml
Advanced tour options
Extending tips
● Tips types implement a
TipPluginInterface
● Through the API other plugin
types can be created
(youtube, s...
Other ways to provide
help to users
Markdown
● Always have a README file
● Add in version control
● Help onboard developers
● Help onboard users
● Credit your...
Read the docs
● Git / Subversion / Mercurial
● Fully searchable
● Webhooks (build when
committing)
● Versioning (build fro...
Beautify my docs
A simple service to
convert text
between markdown,
html and drupal.
Thank you !
WEB www.cameronandwilding.com
EMAIL info@cameronandwilding.com
TWITTER https://twitter.com/cameronwilding
LINKEDIN https:/...
Tassos Koutlas - Tour API in Drupal 8
Tassos Koutlas - Tour API in Drupal 8
Tassos Koutlas - Tour API in Drupal 8
Tassos Koutlas - Tour API in Drupal 8
Upcoming SlideShare
Loading in …5
×

Tassos Koutlas - Tour API in Drupal 8

343 views

Published on

You know these super cool interactive on boarding tours that the cool site all have? Guess what Drupal 8 core ships with a Tour API. In this session we will explore:

- When to create an interactive tour
- How to create an interactive tour
- Who benefits from an interactive tour

Cameron & Wilding Ltd - http://www.cameronandwilding.com/

Published in: Software
  • Login to see the comments

Tassos Koutlas - Tour API in Drupal 8

  1. 1. Tour API in Drupal 8 Drupalcamp Brighton 2016 Tassos Koutlas (@akoutlas) , 17. 06. 2016
  2. 2. Content ● Who am I ● Tours in Drupal ● Creating a custom tour ● Other ways to provide help to users
  3. 3. Who am I?
  4. 4. Tassos Koutlas Senior Technical Consultant @ C&W web projects / machine learning / image processing algorithms / administering IT systems / scrum master
  5. 5. Tours in Drupal
  6. 6. What are tours?
  7. 7. Tours in core ● Included with Drupal 8 ● Based on joyride jQuery plugin ● Configuration based, translatable ● YAML When you have a web application which requires some getting used to from your users.
  8. 8. Tours in contrib A few modules try to leverage tours in core and build new functionality to make it easier for other to contribute tours: ● Tour builder ● Tour UI
  9. 9. Why tours? ● Alternative to providing extensive documentation ● Bundled with your Drupal build and version controlled ● Encourages self-paced learning ● Encourages splitting larger tasks into small chunks of knowledge ● Enables people to visit the resources multiple times ● Because Drupal 8 is so cool
  10. 10. Primary use cases ● To draw the user's attention to critical components of the interface, especially those elements that might not be immediately obvious ● To guide the user through a workflow
  11. 11. Creating a tour
  12. 12. Anatomy of a tour [1/2] YAML properties: - id - module - label - routes - langcode - tips
  13. 13. Anatomy of a tour [2/2] Tips: core ships with text and image plugin types - id - plugin - label - body - location - weight - attributes
  14. 14. General principles [1/2] General principles for tours as they are captured within the context of Drupal user interface standards: ● Tours are a complement (not a substitute) for good interface design. ● Tour text should follow the Drupal style guide for interface text. ● The tour should start and end in a logical place
  15. 15. General principles [2/2] ● If the tour is intended to illustrate a workflow, it should stay focused on completion of a single task. ● Avoid providing tangential information. ● If the tour is intended to highlight the UI, it may not be necessary or desirable to include every option for every widget. ● Keep tip content short, preferably 1 to 2 sentences. Provide examples to give a deeper understanding of tips context.
  16. 16. Tour text standards [1/2] ● Follow the style guidelines for Interface text ● Keep it simple. ● Use -ing verb mode for the tip label. ○ Viewing log messages instead of View log messages.
  17. 17. Tour text standards [1/3] ● Start the tour with a general model (not linked to any element) for a general introduction. ● Imagine the most basic task possible and write to that. Don’t try to cover every use case. ● Remember that your audience is a new user, so assume no Drupal knowledge.
  18. 18. Tour text standards [2/3] ● If possible, keep the tour to fewer than 8 tips. ● If possible, keep to a single sentence per tip of less than 25 words. ● A tour tip is not UI text. Don’t duplicate the UI text. ● A tour is not documented. You can link to documentation at the end if you think it’s useful. ● Doesn't explain stock Drupal page elements such as breadcrumbs or pagers.
  19. 19. Tour text standards [3/3] ● Use links where useful and ensure they will never break. ● Avoid complex tour tip selectors such as :first-child or :nth-child (n) as these at present cannot be tested via simpletest. Instead, add classes into the body to make the selectors easier to understand.
  20. 20. An example drupalcamp_tour.info.yml ./config/install/tour.tour.content-overview.yml
  21. 21. Advanced tour options
  22. 22. Extending tips ● Tips types implement a TipPluginInterface ● Through the API other plugin types can be created (youtube, soundcloud)
  23. 23. Other ways to provide help to users
  24. 24. Markdown ● Always have a README file ● Add in version control ● Help onboard developers ● Help onboard users ● Credit yourself!
  25. 25. Read the docs ● Git / Subversion / Mercurial ● Fully searchable ● Webhooks (build when committing) ● Versioning (build from tags)
  26. 26. Beautify my docs A simple service to convert text between markdown, html and drupal.
  27. 27. Thank you !
  28. 28. WEB www.cameronandwilding.com EMAIL info@cameronandwilding.com TWITTER https://twitter.com/cameronwilding LINKEDIN https://www.linkedin.com/company/cameron-&-wilding/

×