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…
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.
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”).
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.
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
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.
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.
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
During the heyday of IE6, front-end design was in murky waters. The front-end designer would need to employ lots of hacks, patches, and workarounds just to achieve the look and feel of a grand mock-up. Remember:
- when we used
- when we used a 1×1 transparent pixel as spacer image?
- when we exported images as masks to make rounded rectangles?
- when we used images as gradients?
These were just a minute part of the painful challenges front-end designers faced yet nothing stopped us from adapting to the crappy non-standard browsers of that time. We moulded the web into different appearances despite the difficulties. Remember the time:
- when pixel fonts were in?
- when DHTML was so fancy that sites had snowflakes falling on them and cursors were customized with trailing stars?
- of Web 2.0 – the proliferation of badges, loading icons, fab aqua buttons?
- of letterpress typography?
- of minimalism?
- when full-screen images is the template of all websites?
Some of us might only relate to the last item – which we encounter 90% of the time these days. But as for the other nostalgia, there really was a time when visual designers were advantaged with the knowledge of how to implement their designs in the front-end (HTML/CSS). Because otherwise, the visual design in all its JPG glory might be so much ahead of its time that it couldn’t be implemented properly without gathering a bucketful tears of albino unicorns.
But as browsers abided by the standards, IE dieded (best thing ever), technology fast-forwarded itself to touchscreens, and mobile had identity crisis – the lines of limitations blurred out, the doors and windows flung wide open. Suddenly anything is possible and this time standards, open source, and our respective communities are even more by our sides.
You can only draw? That’s OK.
It is no longer a must for visual designers to know the magic of HTML and CSS. We can now sleep soundly at night knowing that the project’s full-screen parallax slider would be implemented properly. All we need to know are three things:
- There must be someone for you to collaborate with who shares your vision and knows how to technically implement the visual design
- Usability – if your webpage looks like a KFC flier crumpled on the sidewalk, it will be as usable on the web as it is on the ground
- Anything is possible (you will find out if it’s not) so do your homework and thing
Watch Out for Falling Debris
Who will tell you what mobile is and what mobile is not? Who will tell you when to use and when not to use a back action or a cancel action and whether it should be in text or in icon? We were almost sure that after iPhone 5 it would only get longer like a lightsabre.
With the stiff competition in the tech industry, we could only say that the best is yet to come. It’s no holds barred. And nobody could tell you anything anymore. Not “you can’t do that” or “you should do it this way” or “this is the best way to do it” – not even the guidelines of operating systems could strictly dictate how designers should design.
Who could tell that your 27-inch iMac won’t be touch-capable next year?
Who could tell that we won’t need a mobile-responsive webpage for a smartwatch?
Walk your own stride but watch out for falling debris.
Consider this scenario:
- you are the product owner of Siete Baracos (a tool that helps people with coffee measurements and ingredients)
- how will you inform the designers, developers, testers about the basic technical information of the product?
- thru a Technical Document, of course!
So here’s the basic format of the document:
Name: Siete Baracos
Description: Siete Baracos is a tool that helps people in making coffee thru measurements and ingredients.
- Website URL: http://sietebaracosapp.com
- Google Play URL: https://play.google.com/store/apps/details?id=com.siete.baracos
- Purpose: Brochure
- Primary Device: Desktop Computer
- Secondary Device: iPad
- Lowest Browser Version Supported: IE 8
- Mobile Response: 768 px
- Template System (Python, PHP)
- CMS (WordPress)
- HTML (Bootstrap, Foundation, Web Starter Kit)
- None (Plain HTML)
- Primary Device: Samsung Galaxy Y
- Secondary Device: Any
- Lowest Version Supported: Froyo (2.3)
These basic information of the product acts as guideline and sets the context in which the product revolves around.
Now, team members will not blindly test the app using a device lower than the version stated.