Sign In Modal Redesign: How to Mitigate the Confusion Caused by “Xs” on the former Twitter version

Twitter’s recent rebranding challenged UX designers: the confusion caused by the three “Xs” elements in the sign-in modal. The Twitter logo is now an “X”, the close button is also an “X” and the text “Sign in on X” contains an “X”. This ambiguity has caused difficulties for users, who find it hard to distinguish the functionality of each element.

In this article, we will cover design strategies that can be applied to improve the user experience and eliminate this confusion. We will also understand the context and offer pragmatic solutions to make the interaction more transparent and intuitive.

Recognition rather than Recall is one of the ten usability heuristics proposed by Jakob Nielsen that can be applied in this case, as it suggests that a system should present information, options and actions in a clear and visible way so that users can easily recognize them, rather than relying on recalling specific information. Therefore, it is essential to adopt strategies that improve the clarity and usability of the modal.

To solve the challenge of the three “Xs” elements in the sign-in modal of the former social network Twitter, now “X”, we will adopt the following design strategies:

1. Update the phrase “Sign in on X”

The idea is to make it clearer and more descriptive. We can go with something like ‘Sign in to Your Account.’ While it might sound generic, this change will eliminate the confusion caused by the ‘X’ element in the original phrase.

2. Proper Positioning

Each “X” element in the modal should have sufficient spacing between them, allowing users to visually separate them easily. In this case, we will align to the center following the reading pattern indicated by the logo and login buttons.

3. Change the Close Button Icon “X” to the “CLOSE” option