[dropcap]W[/dropcap]e have spent a fair time researching, gathering requirements, design translation & dwelling into usability best practices for this project, I am now proud to announce that we have launched our new revamped website @ viva.com.bh - I have highlighted below some of the new features that have been introduced with this release.
This is not the end , we have introduced way more features on our new website, go have a look yourself @ viva.com.bh & remember this is just the beginning ;)
by Mohammed Zainal
[us_btn text="Follow me on instagram" size="18px" align="left" target="_blank" icon="fa fa-instagram" color="red" style="outlined" link="url:http%3A%2F%2Finstagram.com%2Factionscripter"]
In my previous post [The future is mobile] I have briefly pointed out that the web is moving towards the mobile web [ web apps & native apps ].
Building for mobile is tricky however, I have summarized ?building for mobile guidelines? into the following points :
A very smart & wise initiative from Batelco is developing a mobile version of their telephone directory site that enables mobile users to search for public/private telephone numbers and their addresses.
You can fireup your safari on iphone or just browse the site on your BlackBerry device @ http://m.181.bh/ as you read.
A side note: the site detects mobile devices and redirects accordingly. [passed on iphone and BB]
Pointing your browser at the link above will lead you to this:
The site contains 4 main block elements:
A user experience expert wanna-be might jump up and say: hey where are the instructions to use the site?
Here is how to shut him up, how old is the internet in Bahrain 15+ years? I guess google & yahoo embossed that function into our brains so whenever we see and input box with a button next or below it that means that the site will submit whatever keyword I input in that field and I will expect an action in return hence the baby duck syndrome.
Notice that the site supers my previous post on search as a dominant function!
Pizza, is what I used as a search term ? don?t even ask why hehe! Carrying on?
Here is how the SRP or Search Result Page for the term ?Pizza? looks like:
3 additional blocks were added to the SRP besides the records ( 5 records per page ), the 3 additional blocks are :
Hmmm, so why didn?t I get to choose the category from the first page before submitting the query?
Remember the screen size is too small to be able to fetch all possible categories & areas in it, However the backend is kind of smart, once you search for a term the taxonomy system will only show you related categories to your search term, in our case ?Pizza? falls into food and restaurants category & somewhere in the backend this term is somehow linked to that category ( see the image below ).
Note: If you are an Iphone user, then no problem, you will still be using the iphone User Interface to scroll through the options in the drop down box J #thankSteveJobs
There is one thing that confused me for a second and that?s the light blue circle with the letter B in it which I think it stands for Business, and R stands for Residential ?
Carrying on ?
You can see that the contact number is highlighted as a link (on iPhone Ipods only), guess what happens when you tap on it ? No, it doesn?t Dial, it will overlay the ?create new contact or Add to existing account? option, in my opinion it should have been Dialing the number out ? but hey its just me!
Click on more and it will show you more information including the map but it won?t go native, native as in using the device GPS to plot the direction from your location to the destination? but it?s still a good option to have a map of the location.
Lets jump to the site?s content size, below are to snaps the first one is before search and the second one is after search :
16 KB before search and 17 KB after search ?I like :) [ excluding skype?s JS ]
The markup behind it looks intact so far with one error and 2 warnings, it?s a very simple error that can be fixed on the fly be specifying the <alt> tag for the image used, it will basically show the alternative text if the image is not available or if images were turned off by the client.
One thing though? the document type declaration used is :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I?m not very keen when it comes to mobile DOCTYPE but I think they should have used XHTML Mobile profile DTD
The Batelco 181 Telephone directory mobile site is very simple and easy to use; it?s probably one of the first noticeable mobile sites in Bahrain, enhancements can be applied for example, by clicking on the contact number the phone should dial that instead of copying and pasting.
I?m sure that there will be enhancements applied & that explains the GA tracking code to gather useful information, If interpreted correctly it will give a very useful insights on how to improve the site sort of business intelligence or BI data reports!
But so far, two thumbs up! ;)
We got our new boots on!
If we roll two years back when we were first got introduced to the wi-tribe brand, I have to admit that it was challenging to understand it by just reading ?A? brand manual, and I would lie if I told you we got the website right after one month of launching the brand?
And now I assure you that we have successfully revamped our website to reflect our brand!
Less is more: an adequate white space giving the site a clutter-less noise-less feel! Subtle colors with low contrast for elemental backgrounds, not to mention that we have used a plain white color as a background, you can really feel the site breathing in with ease!
Burgundy? one of our primary colors, coming from ?less is more? perspective we thought by adding subtle touches of this color would just do it, in psychology it?s a Red range color, if we use it as a background, visitors might feel uncomfortable looking at the monitor, this explains why fast food restaurants uses the color red extensively, they want to you to eat fast and just leave!
Illustrations: yep, no girls lying down on a grass with a notebook, or a high-tech guy with his gadgets on, simple illustrations that relates to its section or sub section? now this is unique and thats what makes us different, kind of positioning ourselves away from our?competitors.
A search box at the top right corner of the site, makes it visible for searching the search box itself ( web psychology ).
An opt-in link for our newsletter, trying to apply permission based marketing in a clutter-full mass marketing world? should make a difference!
Flash ( home spotlight ) : a rotating images/messages that relates to us wi-tribe our brand, will definitely make you understand that we are not a dating site but an ISP ? a wireless one.
Homepage widgets: pulls information from events, news and In which country do we operate in.
Footer: split in to two, one which has the social icons on it ( facebook, twitter & the rss links ) and an expandable one with our sitemap in it ( yeah trying to have less on a page ).
An introduction block at the top of every section that tells you briefly about the section itself? hence intro block!
That?s it in a nutshell, Feel free to browse around our revamped website, hop on the media center I kinda love it! http://www.wi-tribe.com
P.S thats the holding corporate site... wait for the retails ;)
P.S #2 I no longer work for wi-tribe & they've managed to screw up the design somehow :-|
We've all noticed the appearance of online advertising in our country/region which leads to the conclusion that business owners are now realizing the power of the digital medium and the channels behind it. This also means that they are budgeting for online ad spending, that is on its own an increase in online ad spending in this region.
Unfortunately companies like Zain and Batelco are applying it the wrong way, im hereby discarding the IAB guidelines and standards and just talking common-sense.
we all know What Zain & Batelco are at least locally we do, and most of us will find a way to reach their website when we require more information about a certain product or service (7elow?) Depending on what we are looking for most of us again apply the scan method in combination with the?baby duck syndrome, that is on its own frustrating if the Information architecture wasn't done properly,? now lets concentrate on ads bits, shall we?
If you are a facebook user you might have came across couple of ads from both companies which looks like this.
A part from its being a "misleading ad" oh well the usual Zain, when you click the ad it takes you to the index of their website "BOOM" there you are infront of 7 or more navigation links to choose from and you have been there before.
So basically they have generated a generic traffic ( a part from awareness ) to their website, but what are they doing with that traffic?
i bet a bounce rate of 80% or more occurs on daily basis because they smack users with the same website, which is not directly related to the ad itself.
Here we notice the absence of microsites or and expendable banners were they can collect user information from the ad itself without the need to navigate away from ad location, or simply link the ad to the related product on the site itself ( worst case scenario ). you can find out more on ad-format variations on eye-blaster website.
There are more issues related to their online presence if you look further into new trends such as RSS, opt-in email newsletters/marketing and proper social media optimization/engagement, did i mention that they are also using tables instead of divs ?oh well its all about time me thinks, what do you think?
I'll breakdown the design quickly,? and spot few issues related to the layout and the visual design of the portal .
The portal is located at http://www.e.gov.bh, once you click the link you will notice that the link itself is not user friendly nor SEO friendly .
You don't have to agree with everything i say, this is my personal breakdown based on my experience in web design, i like the way the government is trying to get the people to use the portal, but i think they should work harder on the visuals and strictly enhance it .
I'll start by breaking down the site to its original structure layout or what so called "wireframe" :
before that lets see how the site looks once we land on the English section:
Who agrees that there is a lot of visual noise specially in the content area ? it makes me feel nervous a little angry ! I don't know where to look, a clutter of information no specific standouts that might aid me in seeking the information that i might be looking for, its been said that users permanently scan for quick?n'dirty-solutions which are ?good enough?,? try to attract the eyes with a standout element .
Seven is the number that human's short term memory can retain ( 5-9 ) looking at many things under one page with no proximity, alignment, or contrast will only end up with user frustration, its always recommended to have the main important info on the first page and make it standout, that's off course determined under a proper information architecture documentation, Ok now lets start ....
Header and Navigation:
The navigation has 5 ( gradient like ) colors, looking like tabs, the quality of the visuals is low, the designers didnt pay much attention to details . In my opinion, box it out in one, or free it as text links (CSS themed) which will allow some space or white space, white space is essential, white space is good, don't be afraid to use it, most designers tend to fill in the white space they get scared when they see it ... combining the 5 colored menu with the 3 colored background = disaster :D
Like i said earlier a clutter of information, lack of white space , lack of proximity and alignment .
Left page: Click the image below...
They are really doing a good job by advertising the portal and trying to get people to use it, to maximize this i think they should revamp the site to be visually pleasing.
I still haven't checked the portal functions, navigation & speed. Did they follow a process or a procedure? what about usability testing? Focus groups ?IA ?
To have a solid website you should consider " site architecture, visual design, content & technology which then leads to user interaction ...
The users nowadays has high expectations towards arising websites with the appearance of social networks sites like youtube, facebook and myspace, it will be hard to please them, 10 years ago we used to design for "Mom & Dad", today we are trying to mix this, which leads us to the usability and user experience war.
Enough said :)
i saw this video on youtube , its a speedy ff video , kind of cool to watch :)