Mafia Wars - Two UI Flaws


I am greatly enjoying playing Zynga's Mafia Wars on the Cadbury's iPhone. There are two fairly interesting UI flaws which I'd like to point out...

The first is the screen which allows you to alter your stats - this is what it looks like. Screenshot of the app.

However, this is what most people will see. Detailed screenshot. Can you spot the subtle but important distinction?

Proximity implies relation. The word "Energy" is nearer to the number "102" than health. Therefore, one would assume that they are related. In this case they are not.

This error is compounded by the boxing. The horizontal lines are, I'm guessing, intended to imply underlining. They have the effect of creating boxes - our mental model of UI generally assumes that everything inside the box should be related.

The second UI flaw is much harder to show on a blog :-) When the game starts up, it plays an animation with the sound of some reving cars and a barking dog.

When I'm playing the game late at night (or at work!) I don't want to disturb people. You can set the sound options in the preferences but this has no effect on the startup sound! Screenshot with toggle switches. (Incidentally, notice the boxing on this screen. The inconsistency between these screens will also confuse users.)

Fair enough, I'll use the handy switch at the side of the iPhone to switch all sounds off.

Except, it would appear, that applications can override this system setting. This is a poor choice by Cadbury's. They should know that silence is golden and that user-space applications should not be able to override system wide settings.

However, aside from these two flaws, it's an addictive little game.


Share this post on…

  • Mastodon
  • Facebook
  • LinkedIn
  • BlueSky
  • Threads
  • Reddit
  • HackerNews
  • Lobsters
  • WhatsApp
  • Telegram

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.

Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">