Beyond the Simple Click: Decoding the Significance of the “More•••” Icon (Three Dots) in UX Design
Hey everyone, great to have you back for my 3rd article on iconography, one of my favourite design topics. My first piece covered the history and evolution of icons, and the second explored why everyone uses a ✨ spark for AI.
Today, I’ll share my perspectives on how tiny details can massively impact icon choice — specifically, the classic “more” icon. I recently asked on Twitter about preferences for horizontal vs. vertical more icons. The different takes were fascinating, proving how much psychology, viewpoint and perception play into even simple icons.
In this article, I’ll share the viewpoints I gathered on horizontal vs. vertical more icons, complete with visual examples. My goal is examining how such a small decision can shape the user experience. I hope this breakdown provides helpful context for making thoughtful icon choices in your own interfaces.
Let’s begin!
Uncovering the Origins of the More Icon
The ‘more’ icon is a familiar presence in modern interfaces — three unassuming dots promising deeper options. But have you ever wondered about the icon’s origins and why three dots represent “more”?
The inspiration becomes clear when we consider the ellipsis punctuation (…). For centuries, writers have used “continuation dots” to signal omitted text. Readers recognize those three dots as shorthand for “there is more coming.”
Online content adopted the same principle. Blog and article excerpts display an ellipsis to prompt clicking “read more.” Just as with written ellipses, the three dots visually communicate “additional text ahead.”
This firmly established the ellipses as implying continuation or expansion. So when GUI icons emerged for condensing menus and options, using three dots for “more” had natural appeal. It provided instant familiarity, already associated with revealing more content. It’s known by different names as well, such as:
Read more ellipsis, Read more dots, Continuation dots, Truncation dots, Read more indicator, three dots or simply dot-dot-dot. What do you personally call it? Comment it.
This is a clear indication of the purpose behind the ‘more’ icon and why it consists of three dots; I hope it doesn’t require any further explanation
Why more icon so essential in modern interface design?
At first glance, they seem simple — just three dots. But this modest icon hides vast utility in a compact form.
More icons imply expanded options without occupying extra space. They act as navigation guides that reassure users — more awaits with a tap. By following platform standards, they enable instant recognition across apps.
In just a few pixels, more icons promote flexibility and discovery. Their simplicity empowers complexity through elegant restraint. Small in scale, but mighty in impact.
As our digital journey continues to unfold, we find that these unassuming ‘more’ icons hold the key to unlocking boundless possibilities.
The more we use the things, the more we discover what’s possible, and it turn, the more we want from it. And so the birth of more ··· possibilities begins
Why Horizontal More Icon Dominates
Google Search Results: More Icon
In the world of design, there’s a persistent choice between two types of ‘more’ icons — horizontal and vertical. Interestingly, the majority of platforms and designers lean towards the horizontal version. But why the favoritism? Is the horizontal one looks more visually appealing than its vertical counterpart? Or is there a deeper reason at play? Surprisingly, human psychology has a significant role in influencing our preferences when it comes to directional association and the selection of these icons.
The popularity of horizontal icons in design comes from a mix of cultural, psychological, and user habit factors. When we see a left-to-right motion, like the movement of a horizontal icon, it feels positive and progressive. This is because many cultures read from left to right and many other factors which are connected with us from a root level, and our brains associate this direction with moving forward. On the other hand, a downward motion might feel a bit negative or final. Our brains are used to consuming information from top to bottom, taking the example of how we consume content on websites and apps by scrolling.
Many designers and product team members prefer horizontal ‘more’ icons because users are more familiar with them and they match what users expect. Take the home icon, for example — it’s a common symbol that everyone recognizes.
Same Context But Choice Matters
Visual comparison: List view with different ‘More’ Icons
Imagine a data-packed interface — rows upon rows filled with text and icons, columns competing for space in the narrow margins where the space is luxurious. Now, envision a subtle transformation: a switch of a ‘more’ icon from horizontal to vertical. It’s a seemingly small change, but its impact ripples through the interface, significantly altering the visual landscape. The group of icons arranged with the horizontal ‘more’ icon (Option A — Left) appears cluttered, while the icon group with a vertical ‘more’ icon (Option B — Right) arrangement conveys a sense of precision. The shift from a horizontal to a vertical ‘more’ icon notably lightens the visual load. It’s the art of making small changes with a big impact
Visual comparison: List view with different ‘More’ Icons
This is another visual example where things looks different the horizontal icon appears better when comparing both options. The reason is that the drag icon looks very similar to the vertical more icon, so visually they can be confusing. Determining which icon to use depends on the specific context and considering how well each aligns with surrounding elements. The horizontal icon differentiates itself more from the vertical more icon, making it clearer in this case.
Google Chrome menu button design with a vertical ‘More’ icon
This marks the final example in our series, and it’s a noteworthy one from the world of the Chrome browser. Here, the designers opted for the vertical ‘more’ icon for the menu bar. Imagine, for a moment, the same menu with a horizontal ‘more’ icon. It either demands more horizontal space, stretching things out, or if squeezed into the same size, it risks creating a sense of congestion. It’s worth noting that Google consistently employs the vertical ‘more’ icon in the majority of their apps, and it’s a smart choice, as demonstrated here.
Bridging the Perception Gap
Shifting perspectives: designer vs. user viewpoints
Designers and users perceive interface elements differently. When users scan an interface, they only notice the visual aspects of the elements that are obviously present. They don’t know the full dimensions like a 16x16 pixel icon. Users mentally model an icon based on its appearance on screen — a horizontal more icon is seen as a horizontal rectangle, while a vertical more icon is seen as a vertical rectangle.
So the key consideration isn’t just the space an element occupies in the design file, but how users visually process and interact with it. Vertical ellipses icons create a cleaner look by using vertical space, but can raise concerns about available space and click functionality when the interface is visually noisy.
Evolution of the ‘More’ Icon: Old mac OS vs. new mac OS
We can look at the example of Apple’s Mac OS iconography updates. In previous versions, Mac OS used a simple horizontal ellipsis icon. But in later OS updates, the more icon was redesigned with a circular outer stroke, clearly indicating a larger touch target. This shows how designers evolve icons to communicate intractability in addition to visual style.
Small design choices collectively shape user experience. Icons, text sizing, alignment — these micro-decisions seem minor but collectively impact aesthetics and usability. Meticulousness matters, so thoughtfully deliberate on even subtle details. Sweating the small stuff creates cohesive designs.
The key point is that designers need to consider both the visual presentation and implied user interaction models of interface elements. What scans cleanly to a designer may be perceived differently by users. Designs should communicate affordances and intractability in ways that match user expectations.
At the end of this topic I would like to add the inspiration from the real products how they used more icon in their interface design.
Explore how top digital products utilize ‘More’ Icon
Let’s look at how some leading digital products elegantly employ more icons to enhance their interfaces.
Slack Interface
Slack strategically employed a horizontal ‘more’ icon in its primary left navigation and a vertical ‘more’ icon for additional actions within ongoing conversations. This approach establishes a clear hierarchy for the ‘more’ icon, distinguishing its primary and secondary use cases.
Tickertap.in Mobile App
TickerTap cleverly employed both vertical and horizontal ‘more’ icons within its bottom navigation, assigning them distinct purposes. The vertical more icon is dedicated to the stock page, streamlining your navigation, while the horizontal more icon serves as the primary navigation tool. TickerTap effectively establishes a hierarchical distinction for the ‘more’ icon, designating its primary and secondary functions.
YouTube Web Interface
When browsing YouTube, hovering over video thumbnails reveals a vertical ‘more’ icon, allowing ample space on the left and right sides. This arrangement creates a visually pleasing white space between the title and the ‘more’ icon. Imagining a horizontal ‘more’ icon in its place would result in a more congested appearance. However, during video playback, the screen displays a horizontal icon, maintaining consistency with other grouped actions such as like, dislike, share, and download due to its horizontal representation.
Coda.io — Table Options
Coda.io strategically employs a horizontal ‘more’ icon for primary actions like changing table views, offering options such as cards, charts, or other formats. This icon is preferred over an arrow because it signals a range of choices distinctly. Unlike an arrow, which might suggest more options within a specific selection, the ‘more’ icon communicates that additional options exist beyond what’s immediately visible. Additionally, the vertical ‘more’ icon serves to balance visual weight and reduce confusion, specifically designated for secondary actions like download or import.
Medium — Web and Mobile App
Medium’s strategic use of a vertical ‘more’ icon in its mobile app, as opposed to the horizontal icon on its website, is a thoughtful adaptation to accommodate varying screen sizes. The decision to implement the vertical icon in the mobile app stems from the limited screen real estate available on mobile devices.
I’ll continuously update this article as I discover more real product use cases. Feel free to share your findings and suggestions in the comments section; your contributions can greatly benefit other readers. My aim is to provide a comprehensive understanding of the ‘more’ icon’s various applications. Your participation and insights will make this article a valuable resource for all seeking to grasp the versatility of the ‘more’ icon.
If you found this article helpful, attractive, useful and would like to support me, make sure to:
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Authored by: [Niamh]
This collaborative research-driven exploration required [1] day of dedication and [2 to 3] hours of meticulous crafting.
Let’s get connected on Twitter: [@niamh_dcreator]
Thank you for your interest.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
