Redesigning The World Cup 2014 Brazil | Hacker News Reader

Redesigning The World Cup 2014 Brazil

medium.com

65 pointsaorshan65 comments

I'm used to the visual design of ARD/ZDF in Germany. Thoughts:

* One team is "above" the other. This implies ranking between the teams. Who decides who's on top of the other? Imho a bad idea.

* The clock is unnecessarily bloated. I find the added visual markers distracting. The stoppage time is misleading, because additional play time is not a stopwatch or a timer. It is merely a suggestion and while most judges adhere to it, there are some games where additional play time is exceeded. It's not strict as a stopwatch implies.

* Ball possession: While being an interesting statistics, they are usually shown only once during an entire game. This kind of stuff is now easily retrievable during the game on a tablet or smartphone ("second screen"). Some people find the statistics completely unnecessary, because the only relevant statistic is goals, which is always shown anyways. I also don't see how extensive animation in the interface is not distracting.

* Formation screen: Just a different flavor. Nothing worse or better than the current one.

To summarize: Well, it's a suggestion, but I can't see that this is BETTER than the current layout, which the final paragraph implies about this design.

Having a team above one another doesn't stop Rugby League in Australia from doing that[0], so that I'll disagree with. The rest of it, I don't know enough about football to have much of an opinion :)

[0] http://i.ytimg.com/vi/hjHYB-oUH90/0.jpg

I thought it was a funny comment because there's always one team before the other, either above or first on a line. That's why there's a raffle for games which are not played at either teams' home. For example, next Wednesday it's Netherlands v Argentina and not the inverse.

A left right organization also give you clue of which side of the field the teams are playing.

Nope, it tells you which team is playing at its home stadium (or in the case of games played on neutral ground, the team that is designated the 'home' team by e.g. a raffle).

At half time the teams swap sides, the order of teams on screen doesn't

In American sports, the home team is always on the bottom. "New York playing at Dallas."

If what @surreal says in a sister comment is true, then they could do the same thing for FIFA.

Why would they adopt a US-centric practice?

In all likelihood it would be more suitable for the USA to adopt FIFA conventions. FIFA tournaments are astronomically more popular worldwide than any US sports. Even the USA-Portugal game had higher viewing figures in the USA than the World Series and the NBA finals.

Skipping the World Cup for a second...in 2011 the Premier League was broadcast in 212 territories around the world, working with 80 different broadcasters. The TV audience for Premier League games is 4.7 BILLION , and the number of homes reached last season increased 11 per cent to 643m.

It's a bit arrogant to assume some of the best UX designers in the world have not been hired to design and test the experience for a global audience. TV has forgotten more than the Web knows about user experience.

I don't particularly understand the point of this. There's absolutely nothing hard to distinguish about a score on the television, especially when soccer is a low-scoring game which isn't all that hard to keep track of if you're remotely paying any attention, and channels like Univision have incredibly minimalistic, easy to distinguish graphics. I don't know what Sky is doing, but ESPN and Univision are pretty straightforward.

All I get out of this is some people trying to Web 3.0-ify something that doesn't need to be. The clock looks absolutely dreadful and sticking minutes on top of seconds is an unnatural approach to displaying time in the context of a sport.

This is just a designer jerk-off to get attention. Just like someone porting 2048 to whatever hot new language is out this week. :)

I agree. I bet the OP wasn't expecting comments like yours, just praise, but he/she is wrong. This is totally unnecessary, and is an elegant solution to an nonexistent problem.

I think both this, the parent comment, and a fair amount of other comments on this post are unnecessarily harsh towards the designers. Pointing out design issues is always helpful for improvement and reiteration, but attacking their motivations just makes everyone hostile and gets nothing accomplished.

It appears that the hostility stems from a deep misunderstanding of football, the current UX and why it evolved the way it has.

You can hardly blame the community for reacting harshly when presented with a product they never asked for claiming that their current experience is somehow broken when it is not.

The worst part is the new UX is sub-standard.

I think you are correct

It's expected from a design work a much deeper understanding of the issue at hand (and current practices and conventions)

This design work is not aware of a lot of things in soccer AND TV production.

"Let's make something flat" what does this has to do with soccer: nothing.

Seriously? I've yet to come across a redesign presented on here that wasn't immediately shot down and trampled on.

But... it's flat! That has to means it's better!

The clock is actually harder to read this way. I want to glance and know what time we're on. By presenting the time in an unconventional way, you're making it difficult for me to do that. It also doesn't offer a way to distinguish between extra time and stoppage time.

When a player is booked, injured, substituted, etc I prefer to see what's, you know, happening. If you want to help me do that, you shouldn't obstruct my view with a giant bezel containing an icon and some text. I will go further and say that the icons are rather vague, especially in the example given. A football (I mistook it for a wheel at first) and a name? Thanks television, that cleared things up!

A yellow card icon should simply be yellow. Two cards as an analogy to a red card isn't a good one, as red cards can be given without a yellow one being given prior. I'm assuming the sniper's visor is meant to indicate penalties, it's a little disturbing to be honest.

These and other mistakes, mentioned in other comments, could've been easily avoided with a little domain knowledge. Once again, it's form over function.

The ball and the cards were the only icons I understood at first glance. It's common to use a ball icon to mean "goal", the single card is probably yellow, and the double one red.

I still don't see any problem with using colors. If the goal is being clear at a distance (a good goal, that they failed to achieve), colors are way better than an extra line. I also don't like how they put everything inside a rectangle, soccer does not have rich backgrounds that you can't design around - it's mostly green.

That said, it's a nice idea to pop important information on a big font size on the middle of the screen, currently if gores mostly to the bottom and audio. It may also be interesting to write the numbers of the players above them, because at some distance it's quite hard to recognize them. And yes, the clock needs a serious redesign - not this one, but it does need some work.

Anyway, before touching any of that, FIFA should take a hard look at the refree procedures.

I would have said for football (soccer) yellow and red indicate the cards the ref shows

I didn't make the connection between the ball icon and a goal until I read your comment. I think this just goes to show that icons as a primary indicator of something are just very hard to get right. Having said that, tho, I would make the connection if I were watching an actual match, but that's precisely when I don't want to see that icon in the middle of the screen. A small icon, the name of the player and the minute the goal was scored at, readable in a place where it doesn't block the view, is actually useful.

I notice there are no screenshots of these terrible UI's the author mentions. Probably because they are not terrible. They show a clock | team name | score | score | team name. It couldn't get much simpler to understand.

Here's the BBC one for instance: http://www.aotplaza.com/Files/Sport/Football/Euro%202012%20-...

If there's one part of this you might want to "solve", it's the possible ambiguity with using three letter abbreviations for team names, which is the one thing the redesign doesn't attempt to change.

I like the abbreviated names, as they leave more room for actually looking at the game (an important aspect, often overlooked by makers of info graphics)

Also note how the BBC display places the score a long way from the left border to accommodate for viewers who still have 4:3 screens and upscale the display in various ways.

The proposed design looks better, but the score will be cut of for some viewers.

Agreed (and can't really see the abbreviations being a problem – I'd rather have more space to see the game). The only other thing I can possibly think to change in BBC's design is the colour contrast when Netherlands play in orange – NED is shown in white on orange[1], which isn't as easy to read as black on orange. But that's really nitpicking.

ITV, on the other hand (who have the other ~50% of games in the UK), does have pretty bad design in the top-left corner – flags instead of shirt colours so don't know who's who, red cards sometimes drawn on top of red flags without any separation ([2] – there is a red card poking out of the right-hand-side of the Belgium flag!)

[1] http://snag.gy/D9fP4.jpg

[2] http://snag.gy/k9vN8.jpg

One possible solution to the abreviations that I have seen some TVs do is that at the start of the game and every once in a while they show an expanded score with the full names and than after a couple of seconds it goes back to the 3-letter names.

Writing the full team name all the time wastes some space and is sort of redundant. Not only are most people watching the game already aware of who the teams are (they wouldnt be watching otherwise) but the commentators are constantly saying the team names anyway.

One important aspect: this is going to be unreadable on CRT TVs

Yes, there's still a lot of them out there. Yes, it must be catered for them still.

Some TV stations still make sure their image looks good on B&W TVs. Really

You can't forget the fact someone is watching it on a 14' CRT, and it's not a small amount of people.

Some thoughts:

* Showing colors of jerseys is not necessarily new, ARD and ZDF in Germany are doing this for a long time now.

* I like the round clock BUT! Why are the seconds below minutes? It's confusing. Why does the red bar representing stoppage time grow while the stoppage time itself shrinks (it's a countdown)? Does not work well together imo. What do you display when the game lasts longer than stoppage time? -00:56? And why take the screen estate of seconds for stoppage time? They aren't gone or anything. And I get the intention of "cutting" the clock in half for representing half times, but since the shape is primarily a clock I was wondering why the 30 minute mark is important. I'd cut the clock in quarters and use three of them to display the game's progress (45 min - one half).

* How does this work on low-res TVs? They are still out there and need to be considered.

* Did they explain their icons? What's e.g. the soccer field icon supposed to tell me?

As a whole it doesn't seem to be thought through, sadly.

"We love a clear time indication, and Helvetica seemed to be the clearest typeface for our display."

No, I highly doubt you did any research. Helvetica numerals don't work well here, especially with sloppy kerning.

"We thought it could be interesting to add some useful informations without distracting you from watching your game."

Like the glitchy animation for showing/hiding scores?

"It’s not just a trend: infographics, pie charts and diagrams participate in your daily inspiration."

"participate in your daily inspiration" sounds terribly awkward.

Very hard to take this serious.

Your alternative for numerals? FF DIN/FF DIN Round maybe?

What a misleading headline. Redesigning the infographics is not redesigning the World Cup.

I thought they were going to redesign the FIFA qualifying system so it was easier to understand!

Let me start by saying that I really like the clean look. I'm a fan of flat design. From a design point of view (visually encoding information that is) the layout doesn't make a lot of sense though. Putting one team above the other (as ntaso pointed out) isn't a good idea. Not only does it imply ranking, it also takes away the opportunity to show which team plays on which side and can't handle double-digit scores all that well. "FRA 7 : 11 BRA" works a lot better. I can see why they did it though. If the teams weren't stacked there wouldn't have been any room for the pretty clock (which I like a lot). But that's not how design is supposed to work. The indicators next to the team's names are completely unnecessary. Which score belongs to which team seems fairly obvious.

The info graphics part seems a bit over the top as well. A (animated?) clock icon, the time itself and the subtitle "Local Time" seems a bit redundant. Surely the unit explains what the information is supposed to be. "96,000 people" doesn't need "Attendance" added to it. Let alone the huge icon. The local temperature doesn't have a subtitle and I figured out what it is anyway. And again, the indicators ...

The "POSSESSION" (not sure why this one is all caps) graphic I like. Kind of. Three indicators - really?. The one in the middle makes perfect sense but the other two? The shirts are unnecessary as well. You already have the colours inside the graphic, put the names of the teams in there. The rounded corners don't fit the visual language either; make them square like all the others.

The "Formation screen" is okay I guess.

The teams switch side at the beginning of the second half. The team mentioned first is the "host", the team mentioned last the "guest". Who is host and who is guest is decided by a draw in tournaments.

Did not know that. :/ The double-digit score and ranking problems remain though.

Handling double digit scores is something that you don't need to worry about in football. Not unless it was Brazil versus a local pub team.

LTR implies ranking also, but anyone who has watched a few games of football (other than in the world cup) knows that it actually signifies which teams are home and away.

LTR doesn't imply ranking because we read from left to right (IMHO). Google for ranking and try to find an example that doesn't use top down (Google itself is a good example). FYI, the highest score in a football match is 149:0 (happened in 2002: https://en.wikipedia.org/wiki/AS_Adema_%E2%80%93_SO_l%27Emyr...)

And even during a world cup double-digits can be reached quite easily when the game is decided by penalty shootout.

The whole point of a layout is to be flexible.

> LTR doesn't imply ranking because we read from left to right (IMHO).

When we name our company you won't mind if we put my name first then.

> FYI, the highest score in a football match is 149:0

I don't think non-televised protest matches matter. The EPL (probably the most watched league in the world) has literally never produced a double digit scoring match (that's approx. 7980 matches).

> And even during a world cup double-digits can be reached quite easily when the game is decided by penalty shootout.

You're not arguing from knowledge at all, you're just googling shit to be contrary. You don't add the goals from the penalty shootout to the total, they are a separate scoreline.

> When we name our company you won't mind if we put my name first then.

That's an old problem really. Somebody has to go first. Home team over away team, alphabetical order, etc. I think we've solved that problem.

Of course 149:0 isn't representative. Just because it hasn't happened doesn't mean it won't though. The point is you do have to worry about edge cases. Take the ball possession graphic for example: Picture what that might look like for a color blind person. Not all that helpful.

I know they currently keep two different score boards but I'm not sure that has to be that way (could be though - I don't know). The site I use to check the scores merges them after the game but the FIFA website doesn't.

I'm not trying to be contrary btw, and I'm not sure why you're offended. I said I really like the design, but I do think they removed a lot of flexibility and clarity for no reason by changing most of the layout without putting all that much thought into why things look the way the currently look.

I may not know a lot about football but I do know a lot about design. I didn't even talk about the clock which looks gorgeous but (as others already pointed out) doesn't work that well.

You don't have to design around the 0% case, so long as you functionally handle it as this design does.

Incidentally, I'm pretty sure I've seen one of the Spanish stations use the vertical score format, a quick search turns up this (Barcelona vs Real Madrid) [1].

> I know they currently keep two different score boards but I'm not sure that has to be that way

It does have to be, because goals are infrequent it's unfair to add 3 or more goals to a teams tally, the goals can be used to differentiate between teams with the same points in league systems. There's also essentially no limit to the number of penalties that can be taken.

I'm not arguing for this design (though I do like some aspects of it), I'm just defending it against what I see as illegitimate criticism.

[1] http://a3.mzstatic.com/us/r1000/120/Purple/da/d0/4c/mzl.wlqf...

The stoppage time counting down loses information. Seeing 2min/5min is better than seeing "3 min left"

Wait, what is the "21" supposed to represent? Seconds?

yes.

well I'm with orteipid, minutes on top of seconds is very unnatural

You'd figure it out within a minute of watching

I see what you did there.

Why put the scores on top of each other? The team on the left should be on the left, and the team on the right on the right. Many channels use this left-right layout, but they fail to swap it around at half-time, when the teams change sides!

This is especially useful during the World Cup, when you quickly glance at bits of many games and are unfamiliar with the teams and colours and flags

I guess the top/bottom (or left/right) diversion comes from home team / away team. In the world cup this doesn't make that much sense, but that's what people are used to.

They're not supposed to change sides though, it's the standard home/away concept.

Another one of those classic HN threads whereby tech geeks attempt to "improve" something you clearly understand very little about and end up being schooled by those with experience.

1. As has been covered; the team names on screen represent home and away not the side of the pitch. This format has been in use for decades and cannot be improved. Every football fan in the world understands it. You are 0/1.

2. Thanks for the blinding suggestion of putting the team formation on the screen before the game begins. If only every football game had such a thing already. Oh wait, it does and has done since the 1970s. You are 0/2

3. The clock design is unintelligible. The idea of the clock onscreen is purely to give you information when you glance at it, not to detract from the action on screen with measurement bars and large typefaces. 0/3

4. You completely misunderstood about red and yellow cards. Straight reds can be given, they are not always 2 yellow cards. 0/4

5. Football does not need space for double digit scores. 0/5

6. Who cares about possession mid-game? You fail to grasp that half time is for analysis. 0/6

7. Stoppage time is not fixed. It is the referees perception and is affected by events during stoppage time itself. The countdown bar is useless. 0/7

8. the beauty of football, most fans would agree, is the lack of stats and quantative analysis. Midfielders are not ranked according to passes attempted/completed or defenders by tackles successful. Football is subjective and heuristic and the fans and the sport itself is happy to embrace that. Infographics only ever get trotted out when a manager needs fired. 0/8

9. Football is the most popular sport in the world (by a massive margin) with the worlds biggest network television providers optimising every single aspect of the on and off-screen experience. Children in african villages, Brazilian favelas and Norwegian forests understand it intuitively. Any design change you could make would be minutely incremental and certainly not grounded in Web 2.0 or 3.0 type principles. You can see this attitude displayed in the hostility of football fans to american-style video refereeing. It would destroy the pace of the game. Football is subjective, anecdotal, memory based and contentious. It's why we love it. If you attempt to data-fy it the consensus will find another channel (IMO).

I have not even touched on television types, sponsorship and branding, the terrible choice of icons you chose (why is there a basketball in your icon set??) and other things.

I love design attempts but don't redesign a sport you clearly don't understand. Customer Development comes before User Development. Understand my sport before you attempt to understand my UX needs.

A bit abrasive; I do agree though.

This is a fun concept. We're used to top/bottom alignment of teams here in the US, with the home team on the bottom. That trend was started by baseball.

BTW, you have to leave room for network branding. For example, where does ESPN put their logo?

I clearly agree that the current graphics sucks, however I feel you are missing one major point in this discussion: Where's the sponsor's promotion? That said, if I had to guess why we ended up with this abominable graphics, I believe that 30% of it is pure corruption, 40% is tasteless "let's make it look like a yunday" and the remaining is actually the desired "favela style".

If instead this design is currently being used by any channels, I think switching back would be an improvement.

Where are you supposed to put the ads?

Nicely done, ignore the haters.

Yep, a designer that ignores criticism of his work is indeed destined to reach far. /s

Valuable criticism and the bile I read here are two very different things.

Stop with that flat design everywhere.

Don't worry it will be out of fashion by next World Cup

This was a reach at best and IMO not a very good article at all.

They left out the sponsors and the FIFA logo, which makes it a non-starter.

Anybody following the EPL would know that they have their on-screen graphics done very well, especially starting last season.

Minimalist but informative (and with sponsors!):

http://images.mukki.org/11-08/21/tv_shows/EPL.2011.08.20.Eve...

But what football really needs is a way to scratch below the surface and expose casual fans to the tactics and little bits of skill involved. The television camera really doesn't do games justice compared to what you see/hear watching in real life.

Sky started doing this with computer analysis this year, watch this if you want your eyes opened a little in terms of what goes into breaking down modern football:

https://www.youtube.com/watch?v=9upX7wyJy4E

This is done post match, but they are beginning to highlite player movement, formations and heatmaps with technology much in the same way the NFL got their yellow line for television.

that image is some scam site redirect.

why clicking on image endup in some casino site with many redirects?

The image redirects to a scam casino. What scum.

Not sure what happened there, but nikcub is definitely a legit user, so we should give him the benefit of the doubt.

Reply on news.ycombinator.com