👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
About Snippet
Categories
0
Comment
In designing the user interface (UI) of an app, it is common to start with the design of the populated state of the UI. As designers, we envision perfect scenarios, common flows, and predictable results. This, understandably, contains the bulk of work a designer has to face. It contains all sorts of issues that need to be addressed.
In turn, we might neglect designing for the different states of the component or the whole system that we are designing.
In general, here are the different states a component might be in:
- Populated
- Blank
Populated
The populated state simply means that the component has been modified to have its intended content. In the example of an Accounts page, there is at least one account created.
See the Pen Component State: Populated by Brian Dys Sahagun (@briandys) on CodePen.
Blank
The blank state occurs when there is no content – whether it is the initial appearance or a result of removing all previous content.
See the Pen Component State: Blank by Brian Dys Sahagun (@briandys) on CodePen.
Always consider the design of the other states of the components.
As UI designers, it’s easy to jump into sketching UIs through wire frames. Afterall, UIs are commonly visual. But taking a careful step of planning before sketching is a rewarding way of ensuring that the information embedded into the UI is well-thought of.
Just like it making speeches or writing articles, the writer may create an outline. For UI designers, the Outline may be accomplished by these simple steps:
- Step 1: What do you want to show the users
Or what do the users want to see? Based on personas, list down the things that will help them achieve their goals or accomplish tasks. - Step 2: Content / component inventory
Using the list in Step 1, break down each piece of content that will be put into the UI. You may also start with bigger groups thru components. - Step 3: Information architecture
Now, rank the content and components based on the user’s task flows and based on importance - Step 4: Interaction
Plot down connections between content and components. Ask yourself “what will happen if the user interacts with a component?”
Each step, in general, is a task of prioritization – which is appears first? Which comes first? Which is not important enough to be the last?
After having a list bearing the interaction of content and components, it will now be easier to sketch its corresponding user interface or the Wire Frame.
Categories
Similar to UI State (which only has active or inactive), UI Condition can be anything to describe the condition of an object.
Example
To denote that an article entry does not have content, we add the class ui-cond__entry--blank which translates to “the UI condition of entry is blank”.
<div class="ui-cond__entry–blank"> … </div>
Categories
An action and a reaction that goes back and forth between entities is interaction. Here are simple examples of interaction between a user and computer:
- you press the power button of your mobile phone and it causes the screen to light up, showing a pass code input screen
- you input a pass code and the mobile phone unlocks, showing the home screen
- you tap a particular app icon and you are shown its information
It is worth noting that the last item is one of the simplest forms of interaction in web sites and apps – you tap an app icon and it opens or you go to a URL and the web site appears; it presents information and you consume it. Think of link surfing in Wikipedia – you simply activate link after link and consume the information available in the articles.
Of course, added web site or app features provide for more interactions other than purely presenting and digesting information. Take for example 9GAG – instead of textual information, the user could consume textual and visual information, upvote, downvote, comment, and share memes.
Elements of Interaction
The Elements of Interaction aims to categorize the actions of the user while interacting with web sites and apps.
Task
A task is a work done by the user. It is usually direct to the point. For example searching for the keyword “alpaca”. Given that you are already on google.com, this entails inputting the word “alpaca” into the search bar and activating the search button.
Activity
An activity is composed of several tasks. For example, contacting the best alpaca coat maker on the internet. Now, apart from doing the task of searching for the keyword “alpaca coat maker”, there are several tasks entailed in this activity such as reviewing the descriptions of top search results, looking for ratings, trying to visit all top five search results, picking the “best” according to your criteria, and finally, getting hold of them thru any communication channel available (contact form, chat, email, or phone).
Behavior
A behavior is a user’s particular pattern of usage of a web site or app. This particular element of interaction creates a space for special cases that varies from user to user.
From a low-level perspective, a user might have a peculiar way of accomplishing tasks or activities. From the example above, a user’s behavior in searching might be to go directly to the top result by activating the “I’m Feeling Lucky” button.
From a high-level perspective, the user might have a peculiar way of using a web site or app which could be not the main purpose of the web product itself. For example, some users use Instagram only for editing pictures but not posting them to Instagram.
Conclusion
The Elements of Interaction puts the context in Elements of Information Structure. It puts the connections among the objects and components in a user interface based on how users might use the web site or app.
In this post, we will discuss Elements of Information Structure. We’ll use google.com as an example to demonstrate how information is structured in such a way that all its elements are identifiable in singles and in groups.
Elements of Information Structure
Contents of web sites and apps can be called “information” – these are words, phrases, symbols, and any representations of elements that give meaning to the user. All information, to be effective, must be properly structured. Imagine a web site that does not show easily the information the user needs – that web site might need to restructure its information by prioritizing the more important ones or what the users usually need.
Object
An object is a singular element.
Note: Some Objects are generalized like in the Navigation Items above. There are several components there (e.g., Apps, Notifications, Social, and Admin) which are listed generally as “Navigation Items”. Ideally, another illustration could show these interactions but for this post, we won’t go into that level.
Component
A component is a combination of more than one object.
Note: Name is considered a Component due to its HTML markup grouping wherein the Name Component could also contain taglines and other objects related to the name of the web site.
Container
A container is a UI element that contains objects and components. Examples of containers are pages or screens, dialog boxes, pop-overs, and panels to say the least. Container is very useful during interaction because it defines the confinements of the information that will be shown or hidden from the user’s view.
Constructor
A constructor is a default section in a web site or app. Generally, these three constructors apply to all web products: Masthead, Content, and Colophon. The Masthead contains the name of the web product, the main navigation and search functionality; the Content, well, contains the main content; the Colophon contains additional information of the web product.
Sub-Constructor
Updated
One example of a sub-constructor is a sidebar which attaches to any of the three constructors. Sidebars are denoted by the HTML tag <aside>. It contains and supplementary information, widgets, and plug-ins.
View
A view is an instance of the web site or app. Usually this is also the name of the current page or screen container the user is in. It basically answers, “What page or screen is the user currently viewing?”
Conclusion
Each red label in the illustrations above can be used as official names of the objects and components. Team members working on the same project will now have a standard name for components and this could lessen the confusion when referring to the said components.