Once your perfect software is published, you can finally take a break from checking all the details needed to provide flawless experience for your users. Well, at least up to the moment any change needs to be made and you do not want them to cause any imperfections.
I had spent months working on a website before I attended Typo Berlin 2018 in May of this year. I tweaked every pixel, addressed every possible shortcoming. I kept checking it on all the screen sizes that exist. I wanted a webpage that would be extraordinary on mobile, on 4K screen and also everywhere in between. I was going for perfection. I had the time and the will to do it.
Although I was looking for perfect user experience, I was also going for perfect development experience. I tapped into my inner backend personality and decided to populate all repetitive content with PHP. I created templates in HTML and CSS and adjusted them to all the screen sizes. After that the PHP would use these templates to fill in the blanks.
This approach was used for everything on the page. It was all dynamic, generated by PHP, very little text was static. The benefit of this was easy maintenance and updating of the content. I did not really need to go into code to add new content or remove old one. The page reflected any changes on its own. I can safely say the experience of developing the page from there on has been a breeze.
Control over typography
During my stay in Berlin I attended a great talk by Frank Rausch, who talked about New Typography. It was inspiring speech that introduced me to so many great ideas.
He described how typographers should control the system as opposed to controlling the documents. He argued that if you check each individual document and fix the typographic errors, incorrect line breaks, and so on, those things will break down if any changes are made or if the document is ever displayed differently – for example on differently sized screen. It will also mean you will have to check every single document.
In his presentation, he described his application that took content from Wikipedia API and displayed it in corrected fashion. Wikipedia has millions of articles, checking each one of them would be impossible. What he did to overcome this obstacle was truly genius solution – he coded rules into his application that would adapt the typography in content when the article was pulled from web. This way he did not have control over specific documents, he had control over the whole system and therefore over all of the documents.
He went few steps ahead and added automation to some of the design decisions as well. Every time there was a picture of person he would use API to find face of that person and make sure the picture was aligned in such a way that the face was shown. It is way too often on Wikipedia pages that famous kings and queens get decapacitated because of incorrect picture alignment. He also automated some of the colours in his app that were based on the most prominent colours of the unique headline images, different for each article. This created incredible consistency and helped with legibility.
He gave different examples of Regex rules he used to fix some of the typographical errors. He mentioned 8 different existing characters for whitespace – yes, it is not just space. It was amazing to watch what astonishing outcomes can be obtained with just few lines of code.
According to his opinion, designers, typographers and all folks alike, should take up coding courses so that they can control parts of the system. It would be unreasonable to assume that engineers will have the same knowledge, experience and keen eye on details when for example using specific colours, typographical characters or applying very precise size of whitespace to interface. Therefore, he said, it is up to us to handle those tasks, as we are the ones who truly understand them.
Control over user experience
The talk was amazing. It influenced me more than I dared to admit. I came back from it and started coding rules for typography that would be applied to my webpage. Automatic corrections of characters without a need for me to go over every single copy and hope it will be ideal on all the screens – that became the dream.
But it did not end there. I started looking at column layout and text alignment. Why couldn’t that also be influenced by the content? Why should I fit the content to a specific layout instead of having dynamic layout that would embrace the content within it.
I already had PHP controlling majority of the page, why not give it control over the layout as well. I could give it a powerful relationship with CSS and adapt the content based on itself and the screen of the user. So I set out to give it a shot.
I identified few paragraphs that were suboptimal. My page is mostly aligned to centre and therefore short texts look better aligned to centre. If they are long though, it gets problematic to read them. On the other hand, even short texts can get longer if displayed on small screen and long texts can get rather short when looked at on 4K screen.
I added CSS classes that would handle the screen size and I added simple PHP calculation that would decide what CSS class would be used. The text is now changing based on its length and the screen the user is on. If its optimal to centre it, it gets centred. If it is too long for that, it gets aligned to left. This solution drives solid balance between aesthetically pleasing design and easily-usable one.
After this was done I went over to column layout and started doing the same. I wanted the page to still have the same major grid size but also have the perfect amount of white space between elements. If there is few elements, move them closer to middle instead of driving huge gaps between them. If there is more and they still easily fit, put them next to each other. And so depending on the amount of elements the columns were adjusted to provide best fit for all screen sizes.
Here is a very crude sketch of one screen size (mostly used by tablets). Of course, the layout would change on bigger screens that could have 4 elements in a row. And it would change on smaller that could hold only one or two per each row. Important thing to point out here is that the number of items was known during the loading of the page. It is not possible to have both 2 and 3 elements at the same time. It would always pick the layout that would correspond to real state of the content. Hence it would be consistent for the user as the changes are not done that often.
Another great idea sparked by this approach was to change the CTA based on circumstances. The webpage is about meetups and therefore, it is important to have Call To Action buttons enabling easy registration. But what if the meetup already started or is about to start in just a few minutes. In such a case, it is far more likely that people are looking to find live stream of the event rather than to register for it. Hence in those situations, the webpage will display CTA calling the user to watch the livestream of the current session.
With the same logic in mind, the event that already ended – even if it was just minutes ago – would be automatically moved to archive, leaving behind a message informing the user about the event being over. Users can then find all the events in the archive. And even though archive has slightly different template used, all the content is the same and PHP can populate it from the same source as it did before when the meetup was still in section for upcoming events.
This is just a beginning of what is possible. But having this idea in mind, I believe that typographers, UX researchers, designers, copywriters, and many more, can have more control over the aspects of product they are responsible for.
This will let us provide the ultimate experience for our users. It will negate the negative effects of different browsers, screen sizes, devices, situations users can find themselves in, changes in content, and so much more. The system will simple take all of this into account and provide the best experience for the given situation, tweaking the subtle obstacles in typography, usability, design, etc.
Post a Comment