large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="https://blog.prototypr.io/all-caps-on-ui-good-or-bad-2570f14dc457?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Saadia M. <img alt="" src="https://cdn-images-1.medium.com/max/1000/1*Gv89TEzi2Wh0e1wKuTkFUA.jpeg">Source: <a href="http://www.wisegeek.com/what-is-the-caps-lock-key.htm#">http://www.wisegeek.com/what-is-the-caps-lock-key.htm#</a>
Using All Caps on user interface does not sound a good practice. There are many other ways to emphasize your point when you are putting textual information for your user.
<blockquote>All caps text is difficult to read and human mind takes time to absorb it.</blockquote>
To provide a good user experience, it is recommended to avoid all caps text.
Below few examples will provide you a clear picture that why All caps text can create problems for a design.
<h3>All caps is difficult to read and scan</h3>
The example below displays a list of Styles from MS Word. You can easily judge both images and tell which one is looking better.
<img alt="" src="https://cdn-images-1.medium.com/max/586/1*h1aUPRfDDbj7VCU3_9J-aA.png">MS Word Styles Pane
A similar list view displays below from iOS. While looking at both images one after another, you can feel the difference of stress level that your eyes and mind has experienced.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*a06QApxUQRFKC2nTDgKh6A.jpeg">iOS Settings Pane
<h3>It seems like SHOUTING on the user</h3>
<blockquote>Providing instructions in all caps to the user gives an impression that UI text is screaming at him.</blockquote>
See the example below taken from UX Guidelines for iOS. Both images show the difference in expression clearly.
<img alt="" src="https://cdn-images-1.medium.com/max/722/1*WzlsXKVXT30pXS2ZBwPDfg.png">iOS Guidelines
Buttons can be a place where All caps can sound good and stand out on UI. However it also depends on the context in which buttons are used.
<img alt="" src="https://cdn-images-1.medium.com/max/443/1*ggWBHzz3VoMQy9KEnIYzMA.png"><img alt="" src="https://cdn-images-1.medium.com/max/441/1*djEADOanBx0Op38o8kCMoA.png">Buttons using ‘Title case’ and ‘All caps’ text
<h3>Makes readability slower</h3>
Since all caps are difficult to scan and take time to interpret by your mind, they make the reading speed slower than title or sentence case.
<blockquote>“When text is set in all capital letters, reading speed is slowed about 13 to 20 percent” — Breland &amp; Breland</blockquote>
Experience the example below by reading first ‘All caps’ version, and then scanning the ‘title case’ image and you will feel the difference.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5-RKFcdjePlPt5J1Bbmoog.png">A flow of Online Booking system using ‘All caps’ and ‘Title case’ text
<h3>When it is ok to use All caps?</h3>
<blockquote>All caps can be a good option where reading is not involved in a sense.</blockquote>
For example, Logos, Brand names, Advertisements, Magazine covers, Book titles and Buttons. A few examples showing a comparison between ‘All caps’ and ‘title case’ are shown below.
All caps in logos make them stand out visually and they seem more beautiful as compared to title case logos.
<img alt="" src="https://cdn-images-1.medium.com/max/835/1*-JNao70gWCYxM4IjMKPZ1w.png">Logo design with ‘All caps’ and ‘title case’
All caps best suits to books and magazine titles. It gives a life to book cover, as you can see in given examples below.
<img alt="" src="https://cdn-images-1.medium.com/max/300/1*5-zmtGBb_tqLpk4fMW706w.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/630/1*FNVUgjBRd0V9k9HKEJ7xEA.png">Book title covers using ‘All caps’ and ‘title case’
<h3>Conclusion</h3>
From the given example, you can easily judge that how All caps can affect your UI design. From given examples, you can better decide that when and where ‘All caps’ can help you to emphasize your text on UI; where you should take advantage of All caps text, and where it is better to avoid it.
<blockquote>Would love to share your thoughts on this 🙂</blockquote>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2570f14dc457" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/all-caps-on-ui-good-or-bad-2570f14dc457">All Caps on UI: Good or Bad?</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

All Caps on UI: Good or Bad?

All Caps on UI: Good or Bad?

Top Stories