Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
I still could not wrap my head around the whole idea of frames. However, I did like the structure that was described in relation to linguistics.
- Surface Syntactic Frames – verb and noun structures
- Surface Semantic Frames – action–centered meaning of words
- Thematic Frames – settings
- Narrative Frames – stories
We could notice the structure—from the detail towards the bigger picture. Patterns like these are also relevant to Information Architecture.
How about applying the DRY Principle in a user interface?
One method is by using a single element to have multiple functions. In the case of a <label> and a placeholder attribute in a <form>, we could simply use the <label> to be the only label of a particular field—as opposed to having two.
Besides, their main functions are to tell the user what field it is and what it expects as a user input—so why not optimize it?
Here’s a quick PoC. Try focusing on a field and see the label move.
<p class="codepen" data-height="300" data-theme-id="1820" data-slug-hash="YjowRP" data-default-tab="result" data-user="BrianSahagun" data-pen-title="Using
The minimum size of an Active Area (AA)
Ideally, it is 48 x 48 pixels. However, there are elements that needs to be smaller in relation to other elements with it—with this consideration, we could go down until 32 x 32 pixels.
The cohesion between two UI elements
In order to show cohesion and relation between two UI elements, we could use proximity—place the element near each other. However, when there are more important considerations like if space won’t permit one element to be there, we could use motion to cue that those two elements belong together.
The elements in relation to the user’s “now”.
Elements that are there only when you need it and also there when you thought you didn’t need it.
Numbers 3 and 4 fall under Relevance.
Outcomes Over Features
The outcome most teams are aiming for is a change in behaviour. The outcome you want will depend on your business or organisation: it might be selling more dog food, getting people to sign up to a monthly donation to your charity, or opting for mediation over court in their separation. Source
Shareability of Content
When deciding the number of characters an item could have, consider thinking about it being in other platforms.
There could be two approaches in defining elements in a User Interface (UI):
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.
What kind of content are you presenting?
Take a look at Facebook feed and Pinterest feed.
Facebook feed presents a variety of content—text, images, videos whose purpose are to update the users of current events and happenings in their friends’ lives.
Pinterest feed, on the other hand, presents content heavy on images—eye candy if you may.
So for timely content like news, it’s best to present it linearly (single–column) beginning from the most relevant and recent.
For content meant to be browsed or scanned, it’s best to present it all at the same time (multi–column), of course also beginning from the most relevant to the user.
Relevance is key.
What kind of experience do you want for your users?
Here’s a checklist:
- Business and User Objectives
- Features and Requirements
- Information Architecture and Interaction Design
- Navigation and User Interface Design
- Accessibility and Visual Design
- Sound (cues and effects)
- Music (background and foreground)
While one of sound’s purpose is enhancing the user experience, it’s primary goal is to provide accessibility to non–visual users.
And in cases video games and devices that only has VUI, sound is one of the primary elements.
If you’re working on a site or app, prioritize the checklist before leveraging audio to enhance the user experience (along with animations).
Think of a chat app wherein there are sound cues and animations when someone is composing a reply, when you successfully sent a message, and when you receive a message.
One can still use the app and accomplish the task at hand even without those sound cues and animations—but they are important aspects in enhancing the usability and user experience.