Code

Writing UI words

UI words principles

When writing words for the UI always consider the context - other elements on the screen and the user's workflow. For objects use nouns, for actions use verbs. Don't write instructions about using the UI. Do write words describing the system status and elements.

Be specific, avoid general writing

Specific texts puts the UI elements into context and ties together workflows while general words break up the workflow and makes it harder to follow. Writing specific labels on UI elements, especially actions enable the users to understand what an element is, helping them making faster and more confident decisions.

Write labels for scanning

Don't force users to read when they are doing their tasks. Capitalizing words makes them scannable, helping users recognize and understand the words faster. Labels for UI elements and navigation items should be scannable for quick recognition. Other text should be written as proper sentences.

Use as little text as possible

Unnecessary text on the UI increases clutter and distracts users from their text. As users do their tasks they don’t read on the UI. They scan however for meaningful words that move them towards their goals, so make sure you use scannable labels that clearly describe parts of the UI and the status of the system.

Last update:	()
Message	doc(search): new tags and hidden components --skip-ci
Committer:	Tamás Bíró
Version history

Headings

Headings
Copy Jade

Copy HTML

Show code

Hide code

<h1>
  H1&nbsp;-&nbspDolor excepteur irure tempor eiusmod 
</h1>
<h2>
  H2&nbsp;-&nbspQui tempor cupidatat occaecat et 
</h2>
<h3>
  H3&nbsp;-&nbspEst enim ex velit dolor 
</h3>


                                  <h1>H1&nbsp;-&nbspElit in sit cupidatat amet 
                                  </h1>
                                  <h2>H2&nbsp;-&nbspLorem nostrud sit sunt quis 
                                  </h2>
                                  <h3>H3&nbsp;-&nbspAute lorem pariatur ipsum nulla 
                                  </h3>

H1 - Do sint non anim sunt

H2 - Amet nostrud velit minim pariatur

H3 - Laboris voluptate officia ut occaecat

Small header segment

Small header segment
Copy Jade

Copy HTML

Show code

Hide code
70% font size

<h1>
  H1&nbsp;-&nbsp
  <small>
    Ad ipsum ullamco duis irure incididunt esse aliquip 
  </small>
</h1>
<h2>
  H2&nbsp;-&nbsp
  <small>
    Ut culpa ex in culpa exercitation dolore quis 
  </small>
</h2>
<h3>
  H3&nbsp;-&nbsp
  <small>
    Dolor aute excepteur deserunt irure in consequat velit 
  </small>
</h3>


                                  <h1>H1&nbsp;-&nbsp<small>Cupidatat enim dolor ad ut enim amet ex </small></h1>
                                  <h2>H2&nbsp;-&nbsp<small>Tempor velit amet voluptate incididunt velit in laborum </small></h2>
                                  <h3>H3&nbsp;-&nbsp<small>Deserunt ullamco laboris ad elit adipiscing culpa ad </small></h3>

H1 - Ipsum aliquip excepteur magna ut minim culpa nostrud

H2 - Aliquip sed labore nulla dolor ut dolor in

H3 - In ut sunt aliquip in culpa in sunt

Content text

Paragraph
Copy Jade

Copy HTML

Show code

Hide code

<p>
  Deserunt qui cupidatat in reprehenderit tempor dolore aliquip anim ut ad cillum dolor sint culpa nulla culpa in aliqua dolor et fugiat voluptate sunt fugiat ea duis aliquip dolor eu dolor ad esse eiusmod aliqua consectetur anim sit reprehenderit ullamco dolore amet irure veniam incididunt aliqua ipsum nostrud laborum ullamco ad ea aliqua do laboris aliquip officia dolore sint sit ex deserunt consectetur et enim magna ea cillum et ipsum occaecat ea laborum irure dolore ea ad officia cillum consequat ex velit ea elit pariatur labore ea in eu ex anim labore incididunt ut magna proident ipsum adipiscing mollit consequat 
</p>


                                  <p>Dolor dolore occaecat non nulla laborum nostrud est et eu dolor commodo duis et duis sit labore aliqua ullamco officia reprehenderit velit culpa elit dolor eiusmod anim duis veniam do magna cillum ut proident amet culpa laboris in sint sunt lorem consectetur magna et do commodo in cupidatat nisi proident reprehenderit in ut tempor esse eu et proident id excepteur deserunt dolore adipiscing exercitation voluptate dolore ea nostrud ipsum proident laborum in fugiat pariatur in id ad aliqua non consectetur officia voluptate sit enim nisi occaecat adipiscing ut in dolor labore excepteur ut ipsum eiusmod officia magna tempor magna non 
                                  </p>

Laboris excepteur voluptate sit do dolor cillum in do in elit amet lorem lorem adipiscing dolore laborum ut minim ut sint deserunt elit fugiat anim magna deserunt sed culpa laborum deserunt occaecat ex sed magna ullamco et consequat ut ex ut laborum sit ut ut et mollit aliquip amet sint labore pariatur lorem ut cillum id exercitation ut excepteur dolor voluptate cupidatat nulla sint eu qui laboris quis aute voluptate nulla excepteur in aliqua duis reprehenderit eiusmod duis dolore dolore eu mollit dolore dolor velit nostrud aliqua officia commodo excepteur sed id et officia consectetur elit mollit quis amet labore

Link
Copy Jade

Copy HTML

Show code

Hide code

<p>
  Amet dolore est ut non ut ut 
  <a href="#">
    Ut cillum elit 
  </a>
  Lorem qui amet in 
</p>


                                  <p>Commodo ea consequat eu fugiat fugiat magna <a href="#">Mollit reprehenderit in </a>Magna do veniam qui 
                                  </p>

Cupidatat mollit proident culpa consequat nulla minim Est ut sed Aute magna non aliqua

Sup
Copy Jade

Copy HTML

Show code

Hide code

<p>
  Magna cupidatat consectetur pariatur do adipiscing dolore 
  <sup>
    Laborum eiusmod culpa 
  </sup>
  Lorem adipiscing dolor ipsum 
</p>


                                  <p>Eu sit labore nulla excepteur et veniam <sup>Reprehenderit esse cupidatat </sup>Reprehenderit nulla qui labore 
                                  </p>

Ea in cupidatat aliquip nulla dolor aliqua ^{Amet nulla ad}Ullamco officia adipiscing veniam

Sub
Copy Jade

Copy HTML

Show code

Hide code

<p>
  Dolore amet ut cupidatat dolore id nostrud 
  <sub>
    In veniam dolore 
  </sub>
  Magna adipiscing non sunt 
</p>


                                  <p>Do irure ut duis nisi ut aute <sub>Aliqua ex proident </sub>Nostrud tempor cupidatat duis 
                                  </p>

Irure culpa eu ipsum laborum minim in _{Pariatur reprehenderit sed}Enim consequat velit consectetur

List
Copy Jade

Copy HTML

Show code

Hide code

<ul>
  <li>
    Deserunt nisi 
  </li>
  <li>
    Amet culpa 
  </li>
  <li>
    Mollit esse 
    <ul>
      <li>
        Aliquip ut 
      </li>
      <li>
        Sunt ut 
      </li>
    </ul>
  </li>
  <li>
    Duis voluptate 
  </li>
</ul>


                                  <ul>
                                    <li>Anim quis 
                                    </li>
                                    <li>Nostrud irure 
                                    </li>
                                    <li>Fugiat eiusmod 
                                      <ul>
                                        <li>Voluptate aute 
                                        </li>
                                        <li>Sint consequat 
                                        </li>
                                      </ul>
                                    </li>
                                    <li>Dolor dolore 
                                    </li>
                                  </ul>

Occaecat officia
Minim in
Esse commodo
- Commodo ut
- Ea ipsum
Cillum ad

UI Kit