Through a series of examples I show, how to achieve big UX improvement with small changes in the code (HTML, CSS, Javascript). I called this „Low-cost sophistication„. The examples are from my LiipTalk, held on May 10, 2017 at Liip Zurich.

Example 1


Fig. 1: Problem: Assignment of result text to result numbers!

Fig. 1: Tagi Design Pattern VORHER
Fig. 1 vorher_02_Resultat.jpg


Adding one line of code in the CSS can improve the User Experience!

option 1: simple

.resultAnswer {
    margin: 30px 0 -8px 0 !important;

option 2: for modern browsers

.resultAnswer {
    transform: translateY(22px);


A bit better. But this poll design pattern could be made even better…

Fig. 2: Tagi Design Pattern NACHHER
Fig. 2


Drag the ◄ ►

tagi vorher
tagi nachher

Fig. 3

Link to example source–und-keine-Rolltreppe/story/11971614 (15.06.2017)

Update: Now has been corrected (26.07.2017)