Discovery has always been part of our experience in using web sites and apps. They could be in any form:
clicking an ambiguous icon to find out what it does
going through multiple pages to find information
finding out what’s causing an alert icon beside a label
learning and memorizing keyboard shortcuts
…and the list goes on.
One UI element that helps us in most discovery processes is the tooltip. Users of Windows or Mac have surely encountered it when you hover your mouse cursor on certain items in your computer desktop (maybe by chance or out of curiosity if you don’t want to click something). It is in the form of a box with text label or description.
The Elements of Style Sheets aims to categorize CSS properties into three elements: Nature, Theme, and Layout. It could help a front-end designer’s mental model of building the CSS on top of HTML.
Nature
Nature refers to the individual characteristics of an element.
Display (display)
Dimensions (padding, width, height)
Theme
Theme refers to the visual design of an element.
Colors (color, background-color)
Typography (font-size, font-family)
Decor (border, border-radius, box-shadow)
Layout
Layout refers to the relationship of elements with one another.
Position (float, position)
Spacing (margin)
Update
Animation
As an example, after building the Content Structure in HTML, the front-end designer, in a mobile-first approach, will focus on styling individual elements – by their Nature first (usually, width is set at 100%). And then style according to Theme and lastly, as the viewport goes wider, the front-end designer styles the Layout.
In general, label and icon combination is helpful in making an action easier to remember and depict.
Take a look at the left menu of this WordPress Dashboard:
WordPress menu labels with icons
And when there are no icons:
WordPress menu labels without icons
Without icons, you would need to read the labels one by one until you see what you’re looking for. The icons beside the labels definitely ease the effort in reading and recognizing the actions.
The Content Structure
How do we design the label and icon combination? First question we have to ask: with only HTML, is it important to represent the icon? For example, should it be contained in img, span, or a special character (think: icon fonts)?
If your answer is the same as mine, which is: only the text label is important enough to be represented in HTML, then we could simply use a to contain the label; the icon would be displayed using background-image.
Let’s use “Settings” for example:
[codepen_embed height=”102″ theme_id=”1820″ slug_hash=”EawKOb” default_tab=”result” user=”BrianSahagun”]See the Pen Label and Icon Combo by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
The HTML Anchor Element <a> should also stand for “action” since its use is very powerful from being a simple hyperlink to being an element that performs a specific action. Think icons in web apps that are <a> underneath the HTML markup.
You might have a 16×16 px icon for a toolbar action item – but is 16×16 px active area enough to be properly activated? Perhaps for a desktop device with a mouse and pointer. But for touch devices, we must ensure that our action elements are comfortable enough for the average human fingers or thumbs. This goes without saying that bigger active areas are easier to point at and activate than small ones.
The recommended size of active areas (or hit targets) for iOS is 44×44 px and 48×48 px for Android. This ensures that users could comfortably tap or click on active elements such as icons, lists, and buttons.
Increasing the Active Area Thru Padding</h3
Now, padding doesn't literally mean CSS padding – although we could also achieve it that way. For our examples below, we will set the active area of a 16×16 px icon to 48px thru the width and height CSS properties.
[codepen_embed height=”638″ theme_id=”1820″ slug_hash=”zxdPBJ” default_tab=”result” user=”BrianSahagun”]See the Pen Action Padding by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
Example 0 – Without Padding
This example shows if you have a small icon and you simply leave it as is. The active area is small enough to target/activate.
Example 1 – With Active Area of 48px
We increased the size of the <a> element to 48×48 px thru width and height CSS properties. As you can see if you hover your mouse, the active area is bigger and easier to target/activate.
Example 2 – 16px Sprite Image with Active Area of 48px
This example shows the icons having sizes of 16px and active areas of 48px.
Example 3 – 48px Single Image Resized to 16px Thru CSS with Active Area of 48px
The benefits of having a larger image (48px) which will be used as a smaller image (16px) are:
you can resize it later to a bigger image (but not bigger than its original size) without losing quality (see Example 5)
the icon can accommodate hi-res displays – meaning it won’t show pixelation (up to a certain size only – depending on the original size)
Example 4 – 48px Sprite Image Resized to 16px Thru CSS with Active Area of 48px
There are several CSS considerations when using sprite image being resized from its original size.
First, since a sprite image has multiple images in it and you only need to show one image for each element (and avoid showing parts of the adjacent image), we need to set up a separate element that will contain only the background-image. In this case, the <span>. On the other hand, the <a> will contain the dimensions of the active area.
Second, we have to set the <span>’s display property to inline-block so that we could control its horizontal and vertical alignment within its parent element (which is <a>). Remember, since the icon’s size is smaller than the active area, we need to align it at the middle.
Third, you have to set the desired width and height of the icons which are both 16px.
Fourth, of course, is to point to the sprite image using background-image.
Fifth, ensure that the sprite image will not tile like a pattern – this is achieved thru background-repeat: no-repeat.
Sixth is the tricky part wherein you need to calculate the size of your sprite image. In the example, I have a two-by-two (2×2) 48px sprite image – which requires a background-size: 200% 200% to display properly. Read more on CSS background-size.
The consideration here is that all the grids in your sprite image must have a consistent size – like everything has a 48px area – otherwise, the computation will show overlaps.
And notice how the background-position depended on the dimensions of width and height.
Example 5 – 48px Sprite Image with Active Area of 72px
For touch interactions using thumbs, a much bigger active area is needed – 72px. Having a 48px icon, we can safely set it as-is at 48px and set the active area to 72px. Notice the change in the CSS and how the background-position depended on the dimensions of width and height:
There are other approach in using icons in action elements, namely:
using an actual single image either thru <img> or <svg>
[html]
<a href="#"><img src="img/icon.png"></a>
[/html]
using a sprite image with differently sized icons (but can’t be resized thru CSS)
using only one container and setting the actual size in the image (including the white space – meaning within the 48px image, there’s a 16px icon at the middle and the rest is a transparent part of the image)
It is important that we don’t leave the link as it is – we must make it large enough to be easily activated by any pointing device (mouse pointer or touch).
Let’s take a very simply example – a set of navigation items:
Link Padding on Hyperlinks
[codepen_embed height=”572″ theme_id=”1820″ slug_hash=”VYWaYE” default_tab=”result” user=”BrianSahagun”]See the Pen Link Padding by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
In Example 1, notice that the only active area of the links are the words themselves and not the whitespace beside them. You can see the active area by the blue background highlight when you hover on the links.
Link Padding Increases the Active Area
Now, compare Example 1 to Example 2. When navigating with a pointing device such as a mouse, it is easier in Example 2 to hover on the navigation items and click the chosen link; for navigating using touch, it is also easier in Example 2 since the active area is larger and you can tap far away from the other navigation items – avoiding an accidental activating of the other links.
To pad a link, there are two things to consider:
Display it as block
Increase the size around it thru padding
[css]
a {
display: block;
padding: 1rem;
}
[/css]
Don’t Overdo It!
In Examples 1 and 2, you can see that the list has a fixed width and border that shows until where the navigation items end. Ensure that you clearly put active areas in a clear manner so that users won’t mistakenly click on a whitespace with a “hidden” link (see Example 3).
Now, why would users “click” or “touch” whitespace? I, personally, do that as a “comfort zone” knowing that activating on a whitespace releases any unknown focus on other elements – it’s similar to pressing Esc repeatedly.
Make example of how simple a semantic markup can be made into a component.
Use Search for example.
While HTML adjusted for the use of fragmentation in content structure (e.g., Form label scattered across the place and only connected by ID’s and for attributes), as well as ARIA adopted to Web Components to provide meaning and semantics to its structure and free-wheeling use of elements.
We must not forget that even webapps can be deduced into a simple document, so as long as they provide human-readable information.
The ultimate test still is stripping off the presentation layer, diving deep into the interaction layer and presenting only the information to the user.
This is the simplest we can approach designing website and applications.
I could have been well within my wits to simply use Google Search but the immediate thing I did was to search for the word “hackathon” using data.gov.ph’s Search Form – that’s why it’s there, right?
A screenshot of the search results for the term, “hackathon”.
There, I saw the title of what I was looking for as the second result – #KabantayNgBayan.
The link took me to another page with yet another link.
A screenshot of data.gov.ph’s News Entry about a hackathon.
A screenshot of a “Server not found” page from data.gov.ph.
Now I already knew where the real page was upon hitting that Server Not Found (thanks, Google Search). But we should expect more from Government websites to provide us with the information we are looking for – immediately.
Let me itemize the things that must not be experienced by other users – be it those looking for hackathon information or those looking for more important information on Philippine Government websites.
Could Be Better
Hackathons are like sleepover without the sleep – in a workshop with only cardboards, glues, and scissors as your materials and you are expected to come up with a rocket ship to relocate Philae to a sunny spot. Overnight.
But the websites hosting hackathons shouldn’t appear as if it was done in a half-hackathon event and launched. Think of UX Event websites that actually do not understand what “UX” means.
The Problems
The Missing Hackathon Page. Open Data Philippines hosts its 3rd Hackathon event and it seems like there are more to come yet nowhere on its homepage you will see that there’s a hackathon initiative (except for the ever-changing carousel and news articles).
The Search Forms on the Homepage. Having two search forms is confusing already though the second one is clearly labeled for searching data, the main Search Form at the header also searches for data (not news or other content).
The Quality of Search Results. Since the Search Form on the homepage isn’t working, I used the Search Form on 404 page. It gave me the impression that the information I was looking for was elusive – I couldn’t expect that the top results would lead me to the “right” pages.
The Solutions
Create a Hackathon Page. Like I mentioned above, Open Data Philippines might as well make a dedicated page for its hackathon events as a whole. Even better if the official page has compiled the recent hackathon news, then I might not even need to use the Search Form.
Rectify Broken Links. Nothing is more frustrating than going through several steps in searching for information and arriving at a broken link. Either remove the link to the non-existent information or put a content in the link.
Improve Search Engine Results. It is great that there’s a site Search Form despite the fact that on the homepage it searches only for data (seems like simply a bug) and on the 404 page it is out of alignment (easy to correct). But Search is only as powerful as its results. As someone who is looking for “hackathon” on the Government’s website, the results must come out to be about hackathons in general or the latest hackathon initiative.
Maintain an Old Page. This post started with a simple link: http://data.gov.ph/hackathon. It seemed perfect to contain hackathon initiatives of Open Data Philippines especially that it was once a live link. If it must really be taken down, at least either maintain the page with related links to the hackathons or redirect it to a new related page.
Conclusion
It’s true that this is a simple case of a broken link (or a user who opted not to use Google Search). Besides, I already found what I was looking for. But this scenario has proven to me that there’s a lot to improve regarding how the Government publishes and maintains information on its websites – not to mention when it comes down to searching for it – will the user find what he or she is looking for immediately?
Infomap is a spinoff of information architecture – it is a small part of it and is specifically for the usage of designers in creating Interaction Diagrams (basically a diagram of wireframes showing interaction; details on this in the future).
What is the purpose of Infomap?
It helps in setting up the environment for the web product’s navigation and content structure.
What are the requirements in creating an Infomap?
1. Purpose of the web product
2. Business goals
3. User goals
4. Features
Let’s use a Messaging app as an example – basically it allows the user to send and receive messages to a recipient; the app also requires the user to accept the Terms & Conditions before usage. For the sake of simplicity, let these be the only functions of the app.
1. Content Inventory
List down the features, components, activities, tasks, actions you could extract from the PRD – preferably on pieces of paper that you could easily rearrange. In the given above, you might list down the following: Terms & Conditions Content, Terms & Conditions Acceptance Action, Read Messages, Compose Message, Input Recipient, Send Message, Receive Message, Delete Message, Forward Message, etc.
Group those that belong together in an activity and label the groups. In the content inventory, we could find three groups namely, Terms & Conditions, Messages and Recipients. These group labels could act as the component names that you could use anywhere like class names in CSS.
2. Content Mapping
Categorize the grouped content inventory into two Views: Entrance and Home. For processes that require a user to do something before using the app – that falls under Entrance (e.g., the Registration process or the Acceptance of Terms & Conditions).
Determine which of the components have secondary functions – they will be converted to links (i.e., instead of the components presence, only its link will be there and it will have a separate view). In our example, under Home the primary component is Read Message and since others are secondary, they will be links.
Links must be categorized under primary and secondary (basically, primary links are important to the main function of the product and secondary links are helpers or informational in nature).
That’s it – as for the other views, every link must have its own View (so that your views will be: Entrance, Home/Read Messages, Compose Message, etc.)
All in all you must end up having the following:
Primary Links (must include the link to the View it belongs to)
