XS✔ ◾ Fixed bad example + improved URL + better intro "use-images-to-…

…replace-words" (#8601)

* Update and rename rule.md to rule.md

* Update rules-to-better-websites-layout-and-formatting.md

* Rename folder to match URI

* Added related + improved reading flow

* Auto-fix Markdown files

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

categories/design/rules-to-better-websites-layout-and-formatting.md

@@ -9,7 +9,7 @@ index:
 - forms-do-you-know-when-to-use-links-and-when-to-use-buttons
 - forms-do-you-include-the-number-of-results-in-comboboxes
 - create-a-combo-box-that-has-a-custom-template
-- figures-do-you-use-images-to-reduce-the-words
+- use-images-to-replace-words
 - add-useful-and-concise-figure-captions
 - use-bad-and-good-examples
 - avoid-unnecessary-css-classes

rules/screenshots-avoid-walls-of-text/rule.md

@@ -12,6 +12,7 @@ related:
   - screenshots-add-branding
   - screenshots-tools
   - change-from-x-to-y
+  - use-images-to-replace-words
 redirects:
   - screenshots-do-you-use-balloons-instead-of-a-wall-of-text
 created: 2009-03-25T05:07:01.000Z
@@ -23,12 +24,9 @@ Communicating effectively often involves moving away from lengthy 'Walls of Text
 
 Consider the following points:
 
-* Efficiency - Screenshots enable people cc’ed to check the task by quickly skimming, not needing to click on links.
-* Capture the moment - Tasks can take time to get to, often weeks or months! Reports and dashboards change over time and without a screenshot, a developer probably won't know what the person was looking at.
-* Clear and concise - Screenshots are like the ‘x’ in  the useful format of change x to y (see related rules) Make the task as clear as possible!
-
-You can take screen captures to the next level by adding balloons that have the appropriate text (aka speech bubbles). Sometimes you need only the text in the balloon and no text in the email.
-The balloon is great because you can point to a specific part of the image. It is much easier than reading the old ‘Wall of Text’.
+* **Efficiency** - Screenshots enable people cc’ed to check the task by quickly skimming, not needing to click on links
+* **Capture the moment** - Tasks can take time to get to, often weeks or months! Reports and dashboards change over time and without a screenshot, a developer probably won't know what the person was looking at
+* **Clear and concise** - Screenshots are like the ‘x’ in  the useful format of change x to y (see related rules) Make the task as clear as possible!
 
 <!--endintro-->
 
@@ -50,6 +48,10 @@ It's like zooming in on the important bits, making them bigger and friendlier fo
 
 ### Tip #2: Add a balloon when you need to point at a specific area of your screenshot
 
+You can take screen captures to the next level by adding balloons that have the appropriate text (aka speech bubbles). Sometimes you need only the text in the balloon and no text in the email.
+
+The balloon is great because you can point to a specific part of the image. It is much easier than reading the old ‘Wall of Text’.
+
 ::: bad
 ![Figure: Bad example – The email is using a screenshot so that is good, but you need to read the text and relate it to the image](BalloonBadExample.jpg)
 :::
@@ -92,7 +94,6 @@ Follow the rule [Do you add branding to screenshots?](/screenshots-add-branding)
 `youtube: https://www.youtube.com/embed/5TB61bqQKtE`
 **Figure: Betsy Weber Techsmith - Part 1 - Creator of Snagit. See [full series here](http://tv.ssw.com/204/betsy-weber-teched-interview)**
 
-
 ### Tip #5: Pay attention to the arrow tail
 
 When you use an arrow in your screenshot, make sure you start the arrow from an appropriate place.
@@ -102,10 +103,5 @@ When you use an arrow in your screenshot, make sure you start the arrow from an
 :::
 
 ::: good
-![Figure: Good Example - If you just want to emphasize what you're pointing to, start drawing the arrow from an empty space](ArrowGoodExample.png)
+![Figure: Good example - If you just want to emphasize what you're pointing to, start drawing the arrow from an empty space](ArrowGoodExample.png)
 :::
-
-## Do you know the best tools?
-
-Follow the rule [Screenshots - Do you know the best tools?](/screenshots-tools)
-

rules/use-images-to-replace-words/rule.md

@@ -0,0 +1,40 @@
+---
+type: rule
+archivedreason: 
+title: Figures - Do you use images to reduce the words?
+guid: 022e3d71-8c64-4063-9077-f20e539e5cce
+uri: use-images-to-replace-words
+created: 2014-12-04T20:21:31.0000000Z
+authors:
+  - title: Adam Cogan
+    url: https://ssw.com.au/people/adam-cogan
+  - title: Tiago Araujo
+    url: https://ssw.com.au/people/tiago-araujo
+related:
+  - screenshots-avoid-walls-of-text
+redirects:
+  - figures-do-you-use-images-to-reduce-the-words
+
+---
+
+"An image is worth a thousand words" is a timeless saying that underscores the power of visual communication. Images can convey complex ideas, emotions, and information more efficiently and effectively than text alone. They capture attention, enhance understanding, and improve retention.
+
+Therefore, whenever possible, replace text with images to create more engaging and impactful content. By doing so, you can simplify your message, appeal to visual learners, and make your communication more memorable.
+
+<!--endintro-->
+
+::: greybox
+You then have this pretty white flower with a green stem standing on a water pond. It is beautiful.  
+:::
+::: bad
+Figure: Bad example - A text describing a flower
+:::
+
+::: good  
+![Figure: Good example - A picture of a flower is way better](flower.jpg)  
+:::
+
+#### What else can you do?
+
+* **Use good captions** - See [Do you add useful and bold figure text (aka a caption) to avoid a lot of text over images?](/add-useful-and-concise-figure-captions)
+* **Use good markup** - See [Do you use the right HTML/CSS code to add the useful figure/caption?](/use-the-right-html-figure-caption)