How soon will the rounded rectangle represent a phone and not a shape?

Icons are, by definition, a visual representation of an object, action, or idea.*

Over the past fifteen years, the mobile phone icon has subtly evolved, iteratively removing visual cues mirroring technology and ergonomic advances.

An evolution of mobile icons mirroring technology and design trends

With the launch of the Samsung S8 and iPhone X, I’ve wondered how soon will it be that a rounded rectangle will be recognised as a phone and not as a shape?

To test my idea, I asked my wife to identify the following 4 “things”:

Question: “What are these?”
(I purposely avoided using the noun ‘shape’ as I didn’t want to influence her answers)

Rectangle, circle, square & rectangle

Her answers were immediate; “Rectangle, circle, square, rectangle!”. There was a slight pause (milliseconds) when answering the final rectangle but I later learned this was due to the orientation difference from the first rectangle. I then asked her to identify the following:

Question: “What’s this?”

Rectangle and circle using a different scale and relationship

Again her answer was immediate; “a mobile”.

Visually, all I’ve done here is reduced the circle radius and positioned it closely to the lower x-axis of the rectangle. However, as this layout closely mirrors the appearance of mobile phones (2007–2017) we all immediately see this as a visual representation of a mobile phone and not two shapes (rectangle and a circle).

Up to now, my discussion has focused on a simple, straight edge rectangle and hopefully this has played no part in you the reader, failing to identify the mobile phone icon. As we all know, mobile phones are not straight and they have a varying degree of corner radiuses. Adding a corner radius to our icon strengths the mobile phone depiction.

Same shape scale and relationship as above but rounded rectangle

For mobile phones, 2017 was the year of change. Samsung and Apple both removed their home button from the front of their screen. Samsung adopted, in my view and imbalanced form with two panes (top and bottom) while Apple adopted the one top pane, dubbed ‘the notch’. Both of these changes impact the mobile icon we see and use today, it’s now time for another small iterative change. We need to remove the circle.

Today’s depiction of Samsung S8 and Apple X

Apple and Samsung will soon find a way of having a complete edge-to-edge display, close to a 100% screen ratio. At this point, how will our icon depict these products? The final visual cues (notches) will need to be removed, leaving a simple rounded rectangle before our eyes. Will we see this as a phone, or will we see this as a rectangle?

Rounded rectangle or future mobile phone?

*Nielsen Norman Group. Icon Usability

Written by

UI & UX Designer. Passionate about design, health & fitness and wellbeing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store