Click Path is a DDM terminologyⓘ which will normally occur in the instruction of a Task.
Definition of Click Path
Click
The word “Click” inside the term “Click Path” means anything inside the screen in your Web Application or Mobile Application that is Clickable, which is named as Clickable Element Below are some of the examples of Clickable Elements:
- Button
- Image
- Hyperlink
- Chat Bubble
- Expand / Collapse Button in a Accordion List
- Navigation Menu Item
- Tab
- Tick Box
- Offcanvas Menu
Path
The word “Path” in the term “Click Path” means the sequence or order of clicks to a group of Click Elements, as well as some Non-Clickable Elements which is acting as a directory which also can co-ordinate the location of the target destination so as to guide the user to reach that target destination.
Below are some of the examples of Non-Click Elements which although they are non-clickable , they can still guide user to reach the target destination:
- Title
- Text Paragraph
- Label (i.e. the Title of a Input Field)
- Tooltips
Click Path – What Problem Pattern it solves
As a Co-ordinator in the screen.
To guide the user what clickable elements inside the screen of the Web or Mobile Application you are using , for example, either a button or a hyperlink, to click , and what sequence the click elements to click, in order to reach a target destination (i.e. the destination) of that Web or Mobile Application.
Example of a Click Path
WordPress>Dashboard>posts>All Posts>Add New Post
Typesetting of the Click Path
>
The Right Arrow Character > denotes the next step among the Click Path.
Code Block
Inside the Code Block is any Clickable or Non-Clickable Element.
Image Icon
There are some Image Icons , for example 
, which neither can you type via the keyword directly, nor using Font Awesome Icon or UTF-8 Character. In this case, we have to insert the Image Icons inlineⓘ. You can use the following Click Path to achieve the expected outcome:
Gutenberg>>
Inline Image
UTF-8 Character
Other than any numeric characters [0-9] or Alphabetical characters [a-zA-Z], there are also some characters that exist but cannot be typed out via the keyword , which is named as UTF-8 Characters. Examples are the Vertical 3 Dots character ⋮, as well as Magnifier character ⌕ .
As they cannot be typed directly via the keyword, and there are thousands of characters that you can use, it is impossible for us to list out here and the only way you can do is to search the character in the internet, provided that you can insert the search term which can precisely describe the layout of the UTF-8 character, which is the hardest part.
Font Awesome Icon
Font Awesome icons are a collection of scalable vector icons that can be customized using CSS. They’re widely used in web development to add visual appeal and interactivity to websites. To use the Font Awesome Icon in the Gutenberg Editor:
- >
Inline code>wpfa icon="fa-wordpress"1
You may not always have luck to find out the exact the same icon showed in the application which you write the Click Path. In this case instead of picking the most similiar Icon , you should better use Image Icon. (mentioned in the previous paragraph of this article)
<<Placeholder>>
In some scenario you may not know the exact wording that should be occured in the Click Path. For example, if you want to lead the reader to choose “Today” in a Calendar, due to the fact that you will not know which is the “Today” which the user use the Calendar, you can never write the exact Date into the Click Path in advance. In this case, you can use a “<<>>” to denote the Placeholder as below:
WordPress>Calendar Sidebar>Date><<Today>>
Component excluded in the Click Path
Actionable Verb
While the character > alway implied “next step” , and the Code Block already denotes the item inside is a clickable element, it is not necessary to write the actionable verb like “Press” , “Choose” or “Insert”.
Explanation of the Action
While the purpose of the Click Path is only to coordinate the Clickable Element, any wordings which are out of this scope should not be included inside the Click Path, espeically the word which is going to explain the reason behind of the Clickable Element.
If you believe you must add a description to the click path to explain the logic behind, you can add a Footnote at the end of the step , or Tooltips which will be shown after mouseover the word:
Footnote
- >
Footnote
Tooltips
- >
2
- wpfa icon=”fa-wordpress” is the shortcode. You should add the “[” in front and “]” in the rear to wrap the shortcode. (I cannot type out the final output as once i do that, the shortcode will become an icon which i cannot show you how to type the shortcode!). The “fa-wordpress” is a variable which you can change to any Font Awesome Icon name as you wish. You can find the Font Awesome icon list in their website ↩︎
- Instead of mouseover the word to show the tooltips, please always add the “ⓘ” (search “i in the circle” in Google) as the underlying object which you used to show the tooltips when mouseover. ↩︎
Leave a Reply