Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions blog/2023/minimalist-affordances/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ tags:

Usability and aesthetics *usually* go hand in hand.
In fact, there is even what we call the [*"Aesthetic Usability Effect"*](https://www.nngroup.com/articles/aesthetic-usability-effect/):
users perceive beautiful interfaces as easier to use and cut them more slack when it comes to minor usabiity issues.
users perceive beautiful interfaces as easier to use and cut them more slack when it comes to minor usability issues.

Unfortunately, sometimes usability and aesthetics can be at odds, also known as “form over function”.

Expand All @@ -43,7 +43,7 @@ Look at how the text area smoothly blends with the tab, creating an irregular an

<figcaption>

The new GitHub commenting UI, unfocused.
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The original was correct here: it is depicting the new UI, when it is unfocused.

The new GitHub commenting UI, is unfocused.
</figcaption>
</figure>

Expand All @@ -53,7 +53,7 @@ The new GitHub commenting UI, unfocused.

<figcaption>

The new GitHub commenting UI, focused. Am I the only one that expected the focus outline to also follow the irregular shape?
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See above

The new GitHub commenting UI, is focused. Am I the only one that expected the focus outline to also follow the irregular shape?
</figcaption>
</figure>

Expand All @@ -73,7 +73,7 @@ The old GitHub commenting UI, with and without focus.
</figure>

While definitely more cluttered, its main UI elements were much more recognizable:
there is a text field, indicated by the rounded rectangle, and tabs, indicated by the light gray border around the active tab.
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As you pointed out, gray is perfectly valid US English.

there is a text field, indicated by the rounded rectangle, and tabs, indicated by the light grey border around the active tab.
By merging the two, both affordances are watered down to the point of being unrecognizable.

Yes, there was more visual clutter, not all of which serves a purpose.
Expand All @@ -98,7 +98,7 @@ In the language of user interfaces, affordances and signifiers are the vocabular
Learnability is not an intrinsic property of a UI; it is a function of the context (cultural and otherwise) in which it is used.

Many affordances and signifiers use metaphors from the physical world to communicate what a user can do.
For example a button that looks raised reminds us of physical buttons.
For example, a button that looks raised reminds us of physical buttons.
Tabs are a metaphor for the tabs in a binder.
Others are entirely arbitrary and acquire meaning through learning, such as link underlines or the “hamburger” menu icon.

Expand Down Expand Up @@ -134,9 +134,9 @@ We gradually evolved such that any rectangle around text is perceived as a butto
Could it be that the new GitHub comment UI is the beginning of a new convention?
It’s possible, but the odds are slim.
For new conventions to become established, they need to be widespread.
Links, buttons, website logos are present on any website, so users get plenty of exposure to any evolution in their design.
Links, buttons, and website logos are present on any website, so users get plenty of exposure to any evolution in their design.
Similarly, multiline text fields and tabs are very commonplace UI elements. However, *their combination* is far less common.
Even if every tabbed text field on the Web begun using the exact same design, the average user would still not get enough exposure to internalize it.
Even if every tabbed text field on the Web began using the exact same design, the average user would still not get enough exposure to internalize it.

## UX Stockholm Syndrome

Expand Down Expand Up @@ -197,7 +197,7 @@ Yet *absolutely nothing* in their representation signifies this.
You just have to learn it.
Heck, there’s nothing even indicating whether a symbol produces sound or not!
Demanding a lot of [knowledge in the head](https://medium.com/@matthewraychiang/doet-knowledge-in-the-head-and-in-the-world-64f901627eb3)
is not a problem in itself; it’s a common tradeoff when efficiency is higher priority than learnability.
is not a problem in itself; it’s a common tradeoff when efficiency is a higher priority than learnability.
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both seem correct to me?

E.g. the alphabet is also a set of arbitrary symbols we need to learn to be able to form words.
But even the best tradeoff is worse than none, aka having your cake and eating it too beats both options.
Was a tradeoff really necessary here?
Expand Down