Recently, the team is delving into gamification—ultimately, towards user engagement. Glad to have encountered the ARCS model of instructional design which is similar to the engagement loop.
ARCS stands for: Attention, Relevance, Confidence, Satisfaction—which could also be an engagement loop in learning.
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.
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?
Regarding its accessibility, please read an 2010 article from WebAIM and a recent one from Smashing Magazine.
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
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.
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.
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
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:
or we could define it thru a label:
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 finding the best term for separating a collection of items, which to use—list or group?
Brain dump:
List implies linearity, structure.
Group implies randomness.
—
In generalizing the semantics of all items in a collection—in an HTML document—go for group.
<ul class="list group">…</ul> <div class="group">…</div> <dl class="list group">…</dl>
—
It is important to note that the all HTML elements in the examples could express hierarchy by nesting other elements—but it is in the collection of items that list or group provides semantics.
To recap:
Use list for collection of items that implies order (yes, even for <ul>).
Use group for collection of items that does not imply order.
But I know every rock and tree and creature
Has a life, has a spirit, has a name
Colors of the Wind
In terms of User Interface Design, every element must serve its purpose—its reason for being. In able to be identified, it must have a name and a description of what it does.
The Name—Description—Purpose Information Structure or NDP becomes a tool in identifying any UI element within a system. The Designer would have a glimpse of what it is called (Name), what it does (Description), and why it exists (Purpose).
On 12 October 2017, we held a Meet & Greet event with our new Chief Innovation Officer, Aaron Madolora.
He is also the Founder and CEO of VeepWorks.
On September 8, we at Voyager hosted the general assembly of First Pacific Chief Information Officers Council and simultaneously held a digital transformation learning sessions with them.
I had the privilege of sharing about Organic Growth and UX with the IdeaSpace 2017 startups.
This was a meetup event by Voyager DX (digital transformation).
