UI Design
5
Mar 10
Our first iPhone application – Champions
The day is finally here. This morning our first internal application is out in public. Champions is a cricket application that gives you the power to get up-to-date game information quickly and easily. Our aim was to provide easy to use interface and a fun interactive way to see and follow your cricket.
So what does Champions do?
- Easy to read summary panels
- Games schedule
- Ball-by-Ball coverage
- Full scorecard
Why did we build this?
Frankly, there are a few cricket applications on Appstore that provide somewhat similar functionality but all of them lacked one thing – usability. I have written a complete review of Cricinfo’s cricket application on iPhone and you can read my frustration there. We wanted to build an application that will make cricket easy and fun to follow. So this is our first step towards that.
One of the main design decision that went into this application was the “summary panels”. We wanted to allow our users to quickly look at the game summary without scrolling or tapping too much. So we decided to create “summary panels” which give you a quick summary of the game and allow you to view full scorecard or ball-by-ball coverage of the game quickly and easily.
This is just version 1.0, we hope to add many features in our next release.
Give it a try and tell us what you think. If you like the application please leave a review.
8
Feb 10
Cricinfo iPhone application review
Note: We have launched our own application which gives you up-to-date cricket scores on your iPhone. Check it out at Championsapp.com or go directly to appstore.
I have been using iPhone since the first one came out. I have been following cricket since I can remember. Naturally when I got my iPhone I was excited to follow my cricket from anywhere, anytime. Cricinfo has been the leader (and the only website) when it comes to cricket coverage. They simply have the best coverage, not necessarily the best UI though.
I have written before about their website redesign. So I won’t talk about that today. Although, there is so much that they can be doing with their website to make it more user friendly.
Today, I am going to be talking about their iPhone application. It is so disappointing that it made me browse to their actual website more frequently via my iPhone than to use their mobile application.
So those of you who haven’t used their iPhone application, I highly recommend you to give it a try before further reading this review.
Initial thoughts:
The application is very rough. It is not completely a native application. The only native component is the tabbar at the bottom and the actual content is rendered inside a UIWebView. My guess is that this application is built using PhoneGap or some similar technology. Nothing wrong with using such technologies but when the UI doesn’t follow the convention it creates all sort of issues.
The Main Screen:
The main screen contains three different sections: Summary, Current & Recent Matches and Upcoming Games. The idea is well thought out at least in a sense that it gives me a snapshot view of what’s going on. When you tap on a game it has two reactions: 1) dispatch a request and 2) flip the current view. This flip is not so user friendly. The reason being that it is not a “native” animation, it is a webkit enabled animation which isn’t that smooth.
Also the tap has no response, the usual tableview on iPhone has a “blue” or some sort of background feedback that a touch has been detected, which doesn’t happen here.
The tabs at the bottom react very differently as well. When you tap on a tab it first shows a loading image and then shows the actual view. This should be the other way around. First show the view and then load the data.
Match Details Screen:
Once you tap on a certain game you are then presented with a mini-match detail screen. This screen has a sort of tabular layout where information such as score, last 12 balls, run-rate and a small quick highlight from the game is present. There are also two large buttons for “Scorecard” and “Ball-By-Ball” view of the game. This is perhaps the only sane UI in the whole application. One thing that bothered me a lot was the “back” and “refresh” buttons at the top. Those were trying to simulate “UINavigationBar” but really when you scroll down you loose them from the screen and every time you have to refresh you have to scroll up. Again this is a restriction due to the “design” of the application.
Scorecard:
A very ordinary looking scorecard. One of the key vital information missing from this screen is the “balls faced” by the batsman. Seriously, that is so needed here. But I guess Cricinfo doesn’ t think that’s important information. Also, the tabs don’t really look like tabs at the top.
The refresh and back buttons are still having the same issue.
Ball-by-Ball:
This view really lacks the visuals that would make it much more exciting and pleasure to use. It is very plain and simple and missing a lot of key elements. While reading the ball-by-ball commentary, if you want to check on current batsman’s score, you have to actually go back one screen and then come back. Why can’t the “Match detail” view and this view be merged somehow?
There is a lot of room for improvement here.
While Cricinfo does a decent job of covering cricket on their site, their mobile application can certainly use a complete redesign. There have been some major bug fixes in recent updates. Most notable bug was the inability to view more than two innings of scorecard. So during the test match the scorecard view was only showing the first inning scores for both teams.
Another short coming is the inability to distinguish the follow-on of a team and no push notifications (not that big of a deal).
29
Sep 09
Good UI Design Is Very Important…
While watch Alien vs Monster, I had a huge laugh at this scene.
I think this is just super-creative from Pixar.
Also check out the following video:
Be sure to get your interface in order before you confuse your customers.
31
Jul 09
Dear GeoTV & ARY Digital
This morning I read an interesting article from ProPakistani, regarding the “Legal Status of Websites that Host Pakistani Talk Shows and Other TV Progrmmes”. Now there are gazillions of website that are putting in the effort to convert the shows into digital media formats and offering them for download and even on-demand streaming. All of these ofcourse requires them to pay for the bandwidth, and clearly they are making enough to pay for this bandwidth.
So the question that ProPakistani (and others) raised was: How come no one from these TV channels taking a legal action against them?
Good question. There answer?
“Of course it’s illegal, we never allowed anyone copy our videos – they are doing so without rights”
Ah! So they do admit that these websites are taking content without their permission. Good, next step? They have no clue. How can they?!? Have you seen their current web presence?
Lets take a look at that. I am going to talk about the two major channels in Pakistan: Geo TV & ARY Digital.
ARY Digital:
I am not even sure where to start from. Lets look at it from a non-designer point-of-view first.
- Who decided to use IFrames? Call him up and tell him that the world has moved on and then fire him.
- Image swap on navigation menu? Are you kidding me? Seriously, I want to know.
- What’s up with all the flying-and-dashing Flash content?
That’s my conservative list. I don’t want to bore my non-technical friends.
From the design perspective:
- Some colors appeal to certain demographics, some are trendy, some have universal appeal, some are boring; others invoke no reaction. The color that ARY Digital picked for their website is just simply horrible and unpleasant.
- The layout has no structure to it.
- Links open in a new window (or they just open within the IFrame and I can’t bookmark them)
- No social network integration. I am not even sure why am I saying this. I mean I didn’t really expect them to have that understanding anyways.
- No clear way to see how the TV programs are categorized.
Oh this list can be long, but I will stop here.
Now let’s look at the other channel, Geo TV:
At least one thing that Geo did right was not to go with any weirdo color scheme. But after that its all down hill.
Non design related issues:
- No SEO optimization
- Please give up on table based layouts
- Hey, at least they are not using IFrames
- Why do links to Geo ME, Geo Japan etc open in a new window?
Here are my biggest design issues:
- No structure to the website.
- What’s up with a small font-size?
- Ads by Google? Are you serious? What happened to your sales team?
- The navigation on the left has everything but what the user is looking for. Which shows are aired on Geo?
So with these kind of online presence how can they even think about taking any legal action against those sites. They have no way to provide that service to their customers, if it weren’t for these illegal streaming websites.
Solution?
Hire a design firm. Seriously, these guys have enough reason and responsibility to hire a design firm to work with them on their website to bring the content to the users. There is some really valuable and noteworthy content, but content without style goes unnoticed.
TV networks in Pakistan need to realize the potential that they are sitting on. Opportunity is with them to get the best solution out there so that their viewers can really enjoy their content. Its not hard, its very doable.
I would’ve provided my design thoughts on how these websites should look like but that is for another day. I would love to hear from someone at Geo and ARY on why is their site so badly designed. Its a long shot but hope never hurts.