iPhone App Designs Reviewed: Critique Board and Lessons Learned

Advertisement

Some time ago I started a mobile app design review section on our company’s website. The idea behind this “Crit Board” was simple: if mobile developers want to create apps that people want to buy, they’ll need help with design and usability. But most of the time they can’t afford it. On our Crit Board1, developers can send us their mobile apps (iPhone apps, Android apps, Blackberry apps) along with questions and problems, and we (free of charge) will pick apart key usability issues, illustrate our design recommendations and post our findings.

2

The only condition to get free criticism from us is that you agree for it to be made public, which is why I am able to share several case studies with Smashing’s readers right now. It’s hard to imagine something more relevant: these are real problems facing real developers. I hope these problems and the proposed solutions will benefit others who have similar issues and will be generally relevant to those working in the field.

1. Foobi

“Alex,

I am the lead designer and developer of Foobi3. Foobi was designed to track your diet in a different way; instead of tracking calories and tapping on many drilled-down lists, it works by simply tracking servings per food group and providing an overview of your food intake balance.

Although I have tried really hard not to over-design it by tracing Apple’s footsteps while building custom UI control elements, I would love to hear from you about this subject.

— Remy”

Your app is beautiful indeed. And it is also usable and easy, exactly as you describe it: if user knows how to flick, he is already an expert. An expert in what, though?

As stated in the iTunes description, the purpose of this app is to “track and balance your diet.” I understand the two main user goals as follows:

  1. To record what food they consume,
  2. To make sure they stay on the right path with their nutrition, and to have a clear guide to balancing their diet if they veer off that path.

Your app does a good job of fulfilling the first goal: users can easily record what they eat just by selecting the right food group and adding the amount of “servings” consumed.

4

But what about the second more important goal of tracking progress and adjusting one’s diet? Does the app help customers achieve this goal? Not very well. There is room for big improvement.

There are two main problems with this part of the app.

Summary Information Is Hidden

To access the summary chart, you have to flip the iPhone to the side and view it in landscape mode. But this feature is not communicated through the app’s design, so a user will discover it only by accident. When we talk about fulfilling a major user goal, it is important never to rely on accidents to communicate functionality.

5

Summary Information Is Not Well Designed

Additionally, the summary is not informative enough.

The summary chart doesn’t offer too much to the viewer. Here are the main problems:

  • It’s not clear what the different colors mean, and there is no legend to help.
  • The scale is not flexible. You can view the information only by week, which does not allow users to easily see their big-picture eating habits. (Tip: consider incorporating the pinch gesture to allow users to scale in and out.)
  • Tracking consumption of a particular food group is not possible with this chart but would be valuable to users.

6

Information design is a vast topic. There are a million ways to address the problems that I’ve highlighted and to increase the visibility of useful information for your audience. I recommend reading Edward Tufte’s books, particularly The Visual Display of Qualitative Information.

And here’s an inspiring display of a lot of information. Of course, it’s not tailored to mobile use, but it has a few great ideas:


From Google Finance7.

One More Thing

When I purchased and downloaded your app, I didn’t quite understand why it was taking so long to download… until I realized that it had already downloaded. I was fooled by the app icon, which makes it look like it is still downloading:

8

2. Budget Planner

“Alex, please take a look at my app Budget Planner9. I have tried everything, and it keeps going up and down. The major issues that people complain about are intuitiveness and slowness. People don’t understand what the software does. But people who do learn it love it.

— Alex Sabonge”

The basic idea of this app is very good, and the App Store description shows off its functionality well:”Budget Planner tracks your bills, budget, calendar and transactions by displaying your balance in a calendar view, letting you know how much money you will actually have on any particular day. Like a balance forecaster.”

Here’s an overview of how Budget Planner works:

  1. Users input their monthly salary info and plug in their fixed monthly expenses (utilities, phone, car payment, etc).

  2. Using this data, the app allows users to track their cash flow and predict the amount they’ll have in the bank on any given day.

Most folks would find this extremely useful. So, why are people complaining about the app? Why does it have an average rating of 2.5 out of 5 stars, and why are sales lower than you had hoped?

Let’s look at the main sources of the problem. For now, we’ll set aside lesser (though important) usability factors, such as not following the iPhone UI guidelines and using the standard controls improperly. Let’s start at the beginning. Humans invented money to buy things, right? Your core audience’s main goal is to know what they can afford and when they can afford it, whether it’s a new pair of shoes, a new car or a solid retirement plan.

People don’t prepare a budget just for fun. They make the effort because they hope it will help them make better purchasing decisions (read: buy more stuff that they like), without their rent check bouncing. Your app is getting there. But several key factors are getting in the way of a great user experience. Let’s take a closer look at the app’s “landing screen,” the calendar, the main element that differentiates this app from other budget apps.

First of all, I think the calendar is a great idea. It’s much better than the categorized lists that many other apps have. The calendar is all about how much money you have or will have in future. A list only shows how much you’ve spent. Knowing that your money is gone doesn’t really help achieve a financial goal (purchasing a shiny new laptop, for example).

Here are some downsides to the calendar view:

10

I believe there’s a way to visualize information in the current design so that users are able to uncover “invisible” patterns. Uncovering the details and patterns behind their spending habits enables users to get new ideas, make informed decisions and achieve their financial goals (and praise your app in the process). Users will better understand their bad habits and be able to take steps to correct them.

A graph could provide richer possibilities for visualizing financial information. It’s much more flexible and scalable then a calendar. Using a graph for the landing screen could dramatically increase the density of meaningful data, while reducing visual noise. Here are some ideas we came up with; this is merely a draft we put together to illustrate our points and to get your ideas flowing—it is not a proposal for a final design:

11

12

13

Next Steps

People love apps that help them achieve their goals. What if your app allowed users to input and compare different financial scenarios, shown through several overlaid graphs?

This capability could help users think through their options:

  • If I put my child through this private school, would I still be able to afford the Beemer I’ve always dreamed of?
  • How many hours of overtime would I need to work to be able to afford both?

These are few examples of questions that people ask themselves. If your app can help them get the answers, I think it’ll really catch on, and you’ll soon be driving a shiny new Beemer yourself.

3. Units United

“Unit conversion app, Units United14. Yep, yet another one… ;) Can you please review it?

— Meils Dühnforth”

The biggest problem with almost every unit converter I have seen is that they require users to submit their query in a format that the computer (or iPhone in this case) can understand. Most unit converters force people to make double the effort to get what they want.

Consider the following scenario: you’re from the US, and you are recounting yesterday’s baseball game to your Icelandic friend. During their last at bat, the Phillies hit a 456-foot home run. Amazing! You punch the value into your unit converter app, but to get an answer you must translate the query into a format that the application understands:

  1. Go to “Categories,”
  2. Select meters for the “To” unit,
  3. Select feet for the “From” unit,
  4. Type in 456 on the number pad,
  5. Double-check that you are converting 456 feet into metres and not vice versa.

Are all these steps necessary? You just wanted to know “What is 456 feet in meters?” But you had to ask the question in robo-speak. You had to select options from a list to be understood. Good software speaks your language. Among the innumerable unit converters, only Google does it right, allowing you to ask your question in plain English:

Using speech recognition technology is another good idea. Sometimes your hands aren’t free when you need to convert a unit. Say your Icelandic friend is driving on a US highway and needs to convert the 55 miles-per-hour speed limit into kilometers.

Implementing everything described above, your app might look something like this (this quick draft is meant to illustrate the point and is not a design proposal):

This application is much easier to use because there’s no more robo-talk: it doesn’t force users to browse categories and sub-categories, and it accepts questions in everyday language.

Send Your App For A Free Review!

Mobile developers are always welcome to send me their apps for a free review. Just use this form15. Please remember that your content will be featured on our Crit Board, allowing developers, designers and users worldwide to join the conversation. If you prefer to speak privately about your design, please feel free to contact us directly.

(al)
[twcount]

↑ Back to topShare on Twitter

Alex (@akomarov) is a Russian designer located in Melbourne, Australia. He runs a nimble mobile UX/UI studio, www.komarov.mobi, that helps clients create exciting experiences for innovative mobile products.

  1. 1

    patrick connor klopf

    September 15, 2010 6:00 am

    great article. thanks.

    0
  2. 2

    Great article.

    Love the direct, no bs approach. Funny how many clients will keep turning out crapware loaded with unintuitive, poorly thought out “designs”!

    0
  3. 3

    That is fantastic, Alex! There is a lot to be taught with these examples and with your work!

    Congrats!

    0
  4. 4

    Thank you for these comprehensive and thought provoking case studies.

    0
  5. 5

    Thumbs up

    0
  6. 6

    This is really one of the best articles I’ve seen. Please WRITE MORE ARTICLES LIKE THIS! More User Experience Design articles! This is an excellent kind of critique / discussion that will only add to Smashing’s reputation and use!

    0
  7. 10

    Thank you Alex for helping me with Budgets & Bill Planner, the new version has so many good changes because of what you suggested. First the name, hehe. If you are looking into getting a great review people, this is the guy that will help you achieve that. Very affordable for the feedback. by the way, the new version will be called Extreme Budget Planner.

    0
  8. 12

    Great article. I have downloaded countless apps that are in need of Crit Board assistance.

    0
  9. 13

    For the unit converter app, we can exclude the “to” field. The app can show all the possibilities in the order of popularity. There won’t be many results per metric anyway.

    0
  10. 16

    good article.

    There is one broken link of “Foobi”

    0
  11. 18

    Very nice article, some very useful approaches in this article,
    Greetings from Holland

    0
  12. 19

    Nice review! voice command for unit converter will be great!

    0
  13. 20

    Great article – I think we can all appreciate real constrictive criticism for a change and no pie in the sky articles…

    My only feedback on the diet app – why black on gray for color scheme? People who are struggling with weight issues are already in a dark mood, wouldn’t you want the app to be more uplifting and positive? The interface, albeit really sharp, looks like your placing an order with your local machine shop…

    0
  14. 22

    I really enjoyed the blog

    thanks

    0
  15. 23

    Try my To-Do app, we really focussed on Simplicity

    http://www.ripeapps.com/reminders/

    0
    • 24

      Awesome App! thanks for the suggestion. I don’t think its perfect looking but so far the best at Simple Reminders.

      0
  16. 25

    Tachyon Feathertail

    September 15, 2010 1:29 pm

    Question: Do you know of anyone who critiques Android apps?

    0
    • 26

      Sure, I critique Android apps, iPhone/Android/Blackberry/iPad, it doesn’t matter as long as it is mobile.

      Feel free to send me your app here: http://www.akomarov.com/newcritique/

      0
      • 27

        Tachyon Feathertail

        September 15, 2010 3:15 pm

        Ah, okay! The title of the article was “iPhone App Designs Reviewed,” and you started it out by saying “Some time ago I started an iPhone app design review section on our company’s website.” So I didn’t know that. Thanks!

        0
        • 28

          Oops, should probably correct this.
          Good point!
          In another words: ANDROID DEVELOPERS ARE WELCOME!

          0
  17. 29

    great article. thanks.

    0
  18. 30

    the foobi app looks lovely and very well designed.. But i cant help but think on first impressions it feels dark and gloomy and not empowering, as i assume is a design/ux goal…

    By eating a proper well balanced diet will bring light and quality to my life and my overall daily health.. So the design should be light, joyful and vibrant to align with the usage goals..

    my 2 cents ;-))

    0
  19. 32

    Great and very constructive article.
    If you are making an app for unit conversion, then you must go beyond google (for unit conversion). Otherwise google is already there and full filling all conversion needs.

    I liked the speech recognition idea. +1

    0
  20. 33

    Zur App “Foobi”: Viel zu dunkles Design. Das iPhone spiegelt so schon sehr stark, aber diese dunkle App ist schwer zu erkennen.

    0
  21. 34

    Great article, but would love to see a follow up showing the changes implemented and an increase in KPIs.

    0
  22. 35

    Great Resource…

    0
  23. 36

    informative article.

    0
  24. 37

    Great article, thanks.

    0
  25. 38

    My first app is approved last night “mutfakta neler var?” I hope you like this.

    0
  26. 39

    Just one little thing about the first avalutation (Foobi´s App).

    The tip mentioned a reading of the book “The Visual Display of Qualitative Information”.
    The correct name is “The Visual Display of Quantitative Information” and it´s a great reading.

    0
  27. 41

    Ok thats kinda crazy dude, really.

    0
  28. 42

    Nice post! Good reading.

    I Just added support for Retina Display with CSS3 and HTML5 on the mobile version of http://www.smartbudget.se Its a Swedish online private budget program. Here is one image in 1:1 resolution on the Iphone4. http://nitzdesign.se/temp/sb_retina.jpg

    0
  29. 43

    @ foobi nice app but contrast is missing in my opinion.

    thanks

    0
  30. 44

    I have to also agree, Foobis structure and overall style is incredible, I would just go with a light/white version. Being all black, it’s a bit gloomy.

    0
  31. 45

    Is Foobi even available anymore ? I looked in the ITunes app store and didn’t see it when I searched for it.

    0
  32. 46

    This is such a cool insider page. Thanks for this writeup..
    The free speech technology is a cool deal.
    Hanita 23
    (Yes A Hot Black Girl that’s into tech-Deal Wit It)

    0
  33. 47

    I have to say as a designer, yes, this is beautifull. As a consumer… for a food application it’s a bit to dark, and also missing on one fundamental “rule” when designing mobile apps, contrast por a better reading.

    After designing several iphone apps, I find that in photoshop things look so much better, but in reality reflexes, daylight, nighlight… make a huge impact on the final look and we need to take those into consideration.

    0
  34. 48

    One very ace article, write part two quick or kittens will die

    0
  35. 49

    Edward Tufte’s book is the The Visual Display of Quantitative Information.

    0
  36. 50

    I love the Foobi interface. I see the same style in the new iTunes status indicators. Anyone seen a good tutorial on the effect?

    0
  37. 51

    Very useful article! Thanks!

    0
  38. 52

    I am not a developer but I have an idea for a game I would like to create as an app. Where would you suggest I go to find someone to build the app and what do you have an idea of the usual price range? Also, what steps do I need to take to protect my idea?

    0
  39. 53

    wow..such a great input for me as a student….thanks !! :)

    0
  40. 54

    Amazing article!

    0

↑ Back to top