Macrotypography

Introduction

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

Before

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

Fig. 1 vorher_02_Resultat.jpg

Solution

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);
}

Result

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

Fig. 2

Before/After

Drag the ◄ ►

Fig. 3

http://www.tagesanzeiger.ch/zuerich/stadt/Bahnhof-Oerlikon-700-Millionen-investiert–und-keine-Rolltreppe/story/11971614 (15.06.2017)