Hey there! Brian Dys here — I’m a visual and visceral person at heart. Ever since my mom lent me her old film camera, I fell in love with photography. All of my creative musings were exemplified by my second brain, the computer. This journey is a topsy-turvy ride of creative pursuits — from electronic music to UX design.
I enjoy every dull and wild moments of it — yes, this life of mine that I share with a woman named Jaycelle and a boy named Bryce. Take a peek into my kaleidoscope!
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
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.
There are several blog entries in Design DriveThru about the practical application of HTML and CSS, simple ideas as well. In order to put these entries in a clearer light, there needs to be specific categories where they fall under. This will put things in context so that the reader would know to which extent the entry applies to him or her.
For example, as we talk about Notes on SASS File Structure, how does one try to absorb this concept? You might ask if this entry is important for you as a web or front-end designer. The answer can be made easier by categorizing the topics.
Think and Act
The first categories deal with a particular web concept as being either of the two:
Theory deals with general principles.
Theory is a contemplative and rational type of abstract or generalizing thinking, or the results of such thinking. Depending on the context, the results might for example include generalized explanations of how nature works.
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 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.
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.
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?