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.
About Snippet
0
Comment
Reading in Facebook about an upcoming Procurement Hack by the Open Data Philippines and PhilGEPS, I followed a link to http://data.gov.ph/hackathon and I was shown a 404 Not Found page.
I still want that information
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?
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.
Hoping to “learn more” about #KabantayNgBayan, I followed the link to http://beta.data.gov.ph/news/kabantayngbayan-hacking-national-budget which turned out to be worse than a 404.
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?
What is Infomap?
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
Basically, a Product Requirements Document (PRD).
Stages of Infomap
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)
- Secondary Links
- Entrance Components & Links
- Home Components & Links
Further Reading
If you’re travelling to or from Metro Manila, expect the rush hours of 7 to 10 a.m. and 5 to 9 p.m on weekdays. Your usual question before going must be, “How’s the traffic?”
Here are several ways to be informed of the traffic conditions if you really want to go with the flow (or not).
While using a big computer…
Metro Manila Traffic Navigator
Hosted in Interaksyon.com, I personally find the Line View the most useful of all views – with its linear presentation and color coding of traffic levels, you could easily see the reds.
MMDA Traffic Mirror
In case you want to see for yourself if a particular area is jammed, there are live traffic monitoring cameras available for online viewing.
Upon reaching the site:
- press “View All Cameras” button (located on top) to activate the play button then
- press play for a specific area
Note: Currently there seems to be a bug if you try to view an area on its own page (this will happen if you don’t press “View All Cameras”).
MRT3 Live CCTV
To avoid wasting time standing in long lines at MRT3, check out the situation first via Live CCTV. Sometimes it’s better to take the road than to take the train.
Below the main view of the camera are the other views such as the North/Southbound ticketing and platform areas.
Waze
For other roads and streets not listed via Metro Manila Traffic Navigator, there’s Waze. It relies on its mobile users to report the road condition at their current location. So you could be warned if there are scrupulous traffic officers hiding under a bridge and even find out if there’s saklaan sa may kanto.
While using a connected mobile device…
Metro Manila Traffic Navigator
Waze
It only takes a minute or two to check the status of the roads you’re taking when travelling somewhere. If you’re well-informed, you could save time and even contribute to lessen the influx of people/vehicles in a common route during rush hours.
I’ve written a short piece on how UX is already rolling here in Philippines, especially in our government.
Personally, I am keen on working on projects that will affect people positively – they could be information or service-oriented web products.
US and UK – Two Great Examples
It’s simple to be like them – they simply
- provide resources and guidelines on how to implement improvements in daily government activities and processes and more important than this is they
- provide access to the information people need or would search for
A step at a time, we could reach the level of developed countries in terms of how they value UX in the government sector.
…it has a Usability.gov website! Well, it’s an initiative and there is lot more ways UX could be manifested. In Philippines, UX is in its birthing process. First of all, we have:
User Experience Philippines Design Conference
We’ll be having our first UX design conference by UXPH.
UXPH 2014 aims to inspire designers, developers enthusiasts to learn more about improving the human experience while adding business value. This conference is for anyone who wants to learn what UX is and how it can make a difference in company’s products and services.
Source: User Experience Philippines
Form Function & Class
In its fifth year, FFC Web Design Conference continues to impart essential knowledge to the web design community. It is organized by Philippine Web Designers Organization.
We are a group of enthusiasts and professionals who create human interfaces for the Web, champion the use of standards, accessibility & usability, and aim to uplift the state of web design in the country.
What about in the government, what are we doing about UX? The ball is already rolling!
Philippine Design Competitiveness Act of 2013
I first heard this initiative at Grafika Manila 2011 – dubbed as “Design Para sa Lahat,” it sparked a new hope in me that the government is keeping up with the times. Imagine creativity in the government? Yes.
It is the declared policy of the State to enhance the competitiveness and innovation of Philippine products, create market-responsive design services, while advocating for economic and environmental sustainability. The State shall also endeavor to promote an economy and society driven by design and creativity responsive to our fast-changing times and reflective of the Filipino culture and identity, while concurrently advocating the protection of intellectual property rights to these ideas and innovations.
Government Website Template
We already have the initiative to improve the overall usability and experience of government websites thru the Government Website Template.
Through the standardized websites, Local Government Units, National Government Agencies and State Universities and Colleges will experience ease in navigation and use of digital assets. More than that, content, news updates, public documents and other services will be easily accessible to the citizens, especially for those who use mobile devices such as smart phones and tablets.
~ Antonette Torres, iGovPhil Project Manager
What can we do to help our country?
As we are going towards a stronger economy, UX is undeniably a helpful tool for the government to effectively reach out to people. There are very simple ways to contribute to this development (aside from voting wisely and paying our taxes):
- Join discussions about the web design & development and UX industries. Philippine Web Designers and Usability Philippines Facebook Groups are good places to start.
- Balance negativity with positivity. It’s very easy to succumb to bashing on the faults that our government fails to rectify but since we’re all in this (country) together, be the one who thinks and acts for a solution.
Resources
In our team, we have something called an Interaction Diagram integrated into our Design Process.
Basically it is a collection of wireframes in context – whether of the whole web product or of a simple task or activity. The diagram shows the layout of components as well as their interaction with other components.
We’re using it consistently as part of our communication with web and app developers. It has proven to be very useful since its inception a year ago (October 3, 2013).
Jesse James Garrett’s Visual Vocabulary for Information Architecture is one of our main references in establishing the Interaction Diagram.
—
Authors of the Interaction Diagram:
- Michelle Villanueva
- Brian Dys Sahagun