Over the following years, Readymag’s user interface changed. Hundreds of new features were being added, just as hundreds of flaws were being fixed. Weak points were rethought and redesigned. This process is ongoing. Today, Readymag's UI is still far from our ideal; but there’s something there that many users have fallen in love with. Perhaps, it can be called a human touch. In a world where every product claims to be a problem-solving tool with copycat interfaces, Readymag stands out.
Readymag came out in 2013, when designing a freeform layout in your browser without coding was still brand new. The interface was designed completely in Photoshop. Can you imagine that today? With colorful buttons and interactions, it looked fresh and unique. It didn't look like anything designers were using day-to-day at that time. In many ways, it was a brave experiment.
Readymag user interface in 2012, designed by Anton Herasimenko.
What is special in the Readymag user interface? It’s hard to say for sure, but we all feel it. I made an attempt to deconstruct the way Readymag is designed, over time, by breaking our philosophy down into small chunks — a handful of design principles for you to explore below.
Stas Aki, product designer
Readymag user interface in 2016
The user interface represents the sum of possible experiences, not of visual elements. The way you accomplish tasks with a product — what you do and how it responds — that’s the interface.
So, the structure and appearance of the interface determine what is and isn’t possible.
Structure and appearance are defined through conveyed meanings.
All possible experiences should also be communicated through conveyed meanings.
Once we accept that there is a meaning to be told, it’s useful to think of interface design as a communication process. There is not only a message, but also a sender — as well as a recipient. There has to be a common thread that both of them can understand, otherwise the communication fails.
1.1
1.12
1.13
1.14
1.2
Each piece of our grid control inputs is designed to visually convey its particular function.
It is crucial for every feature to provide a recognizable function. An interface designer should always wonder how a user will know an action is possible.
Preferably, the user interface should be self-explanatory (i.e., easy to understand without any tutorials or support services).
All features should also be discoverable in the interface, without external help.
An interface should keep users informed about their actions and any changes.
2.1
2.2
2.3
2.4
When the interface is self-explanatory, it becomes easy to learn and use.
When a font parameter is being adjusted, the user needs to see what has been changed with the type setting on the page.
When the user uploads an image or processes a payment for more than a second, the interface should communicate that.
Similarly, when the project is published or a font parameter is adjusted, the user needs to know that and perceive changes quickly.
A perfect user interface for a graphics editor is WYSIWYG (What You See Is What You Get).
In a physical world, you simply move objects with your hands if you want to move them. You don’t go to another room, press some button there, and then come back to the first room to see the result. In the digital space, the result of the user actions should be also shown right away; without shifting between panels, windows and preview modes.
Minimize additional layers between the interface and user, and maximize operations performed directly via content.
User attention is a precious resource that should be treated with care. As an interface designer, you must reduce the load put on the user.
Avoid visual clutter. Construct your interface out of only functional elements.
Disclose your interface gradually. As task A and task B often differ, focus the user's attention on whatever part of the UI is best suited to the task.
2.41
2.42
2.5
2.5
2.52
2.6
2.61
2.62
The Text widget padding — space around an element's content, inside of bounding box borders — can be adjusted by directly interaction with the bounding box edges.
Like other widget settings, the Align Controls open only when you need them.
The interfaces should be easy to understand, learn, and efficient over time.
The ideal humane interface reduces the interface component of a user's work to pure habituation.
A well-designed human interface should not be split into beginner and expert modes. Instead, think of the interface as a beginner-to-expert journey.
The learning phase of working with any professional interface requires conscious attention. Simplicity, clarity of function, and the visibility of a user interface helps beginners learn.
The expert phase is characterized by fast unconscious use.
3.1
3.2
3.3
3.31
3.32
3.33
3.34
3.35
According to Jef Raskin, qualities like suitedness to the task and modelessness lead the way for UI to be habitual.
Users shouldn’t have to get lost among multiple elements. There should be only one way to perform a task. Jef Raskin wrote, the more ‘monotonous’ an interface, the more quickly it becomes habitual.
Avoid alternate modes that can shift the user's attention. And if you have them, make sure they are distinctly marked.
Let’s look at the round buttons at the bottom of the screen. When the Pages Menu is open, tapping the button switches on the Settings Menu. When the Settings Menu is open, tapping the same button will open the Pages Menu again. Users didn’t notice the buttons’ switch, and weren't sure how to open the Settings panel. We made a mistake trying to save space on the page.
Non-split interfaces are more consistent for users, and easier to maintain for designers and developers.
3.36