Defining Elements in a User Interface

There could be two approaches in defining elements in a User Interface (UI):

• Sentence
• Label

Say, for example, we have a blog post that has a date. In order to define what kind of date it is, we could either define it in a sentence:

• Published on 1 January 2020.
• This blog post was published on January 1, 2020.

or we could define it thru a label:

• Date Published: 1 January 2020
• Publishing Date: January 1, 2020

Please note that in order to create an effective description that communicates its purpose, we have to identify the context in which the element is in.

In the example above, the context is the blog post and the element is the date.

The context establishes what kind of approach matches it. In the case of a blog post, since usually, it is constructed in sentences, the Sentence Approach would fit well. For example:

A Modest Proposal

Published on 1 January 2020.

I profess, in the sincerity of my heart, that I have not the least personal interest in endeavouring to promote this necessary work, having no other motive than the publick good of my country, by advancing our trade, providing for infants, relieving the poor, and giving some pleasure to the rich. I have no children, by which I can propose to get a single penny; the youngest being nine years old, and my wife past child-bearing.

Using the Label Approach:

A Modest Proposal

Date Published: 1 January 2020

I profess, in the sincerity of my heart, that I have not the least personal interest in endeavouring to promote this necessary work, having no other motive than the publick good of my country, by advancing our trade, providing for infants, relieving the poor, and giving some pleasure to the rich. I have no children, by which I can propose to get a single penny; the youngest being nine years old, and my wife past child-bearing.

Qualities of the Approaches

The Sentence Approach opens up creativity in communication because sentences can be constructed in different ways.

The Label Approach, on the other hand, has two parts only: key (Date Published) and value (1 January 2020). Having a key–value pair offers a straightforward way of communicating the element’s purpose which lessens the possibility of different interpretations.

From Structure (Interaction Design) to Surface (Sensory Design)

What we were discussing was about defining elements in a UI—which ultimately is also about its presentation to users. Meaning, the examples are what the user will be able to read or hear literally.

On the web, the Sentence Approach example could be viewed in its HTML form as:

<article>
    <h1>A Modest Proposal</h1>

    <div class="blogpost-date-published">
        <span class="label">Published on</span> <date datetime="">1 January 2020</date><span class="delimiter">.</span>
    </div>

    <div class="blog-post-body">
        <p>I profess, in the sincerity of my heart, that I have not the least personal interest in endeavouring to promote this necessary work, having no other motive than the publick good of my country, by advancing our trade, providing for infants, relieving the poor, and giving some pleasure to the rich. I have no children, by which I can propose to get a single penny; the youngest being nine years old, and my wife past child-bearing.</p>
    </div>
</article>

Notice that all nodes in blogpost-date-published are marked up in an HTML tags—which makes them easily accessible in CSS thru selectors. In this regard, the Structure could remain the same while the Surface is customized accordingly. Thus, this:

HTML:

<div class="blogpost-date-published">
    <span class="label">Published on</span> <date datetime="">1 January 2020</date><span class="delimiter">.</span>
</div>

CSS:

.blogpost-date-published .label,
.blogpost-date-published .delimiter {
    display: none;
    // Note: Apply Visually Hidden CSS declarations during production (see HTML5 Boilerplate CSS files)
}

Will be viewed in a web browser as this:

1 January 2020

Conclusion

With this example in mind, we could see that it is easy to choose any approach and still present the same thing to the users by hiding nodes thru CSS.

The important thing to consider is how the element fits in its context—and choose the best approach that matches it. Presenting it to users comes in after that fact.