Design Critique: (iPhone app)


app1 is a mobile news app of Staten Island’s local newspaper, the Staten Island Advance. The app allows users to “get the latest Staten Island news, weather, sports, jobs and entertainment info on [his or her] phone or tablet.”

As a long-time resident of the borough, I have used this app a fair amount and can confidently say that the app has improved from its past iterations. However, even in the newest version of the app, I still find that there are a few design problems.

Fig 1. The homepage


Revisiting Articles

Problem 1: “Recently Viewed” feature

Suppose I would like to read an article about the new Ferris wheel that’s set to be completed in 2017. Since there is no visible search engine, I would click on the Three Line Menu—this symbol would be a cultural constraint or a learned convention that aids a user in his/her navigation of a design [in culture, we follow “‘scripts'”]—located on the homepage (Figure 1) to access the navigation menu. In the navigation menu, I click Search and am prompted with a search box, where I type my keyword: Ferris wheel. There are several options presented to me in no discernible order (not chronologically and it isn’t clear if it’s by popularity) (see Figure 2), and I choose an article at random.

Fig 2. The search results

After reading the article, I close out of the app, then return to it in a few days. I would like to show a friend the Ferris wheel article, but I don’t quite remember the title. Clicking back to the menu, I notice that the designer (seemingly) had the foresight to create a section called “Recently Viewed.” Clicking on Recently Viewed shows me the following:

Fig 3. Recently Viewed only shows me sections I’ve recently visited

I am shown only sections, not articles, that I’ve previously viewed. This means that the system image is not clear, and I now have the wrong mental model (also known as the user’s model, which is, as Don Norman notes, “developed through interaction with the system”). A good conceptual model (the communication between the design model and the user’s model via the system image) “allows us to predict the effects of our actions.”

Recommendations: Recently Viewed should instead display recently viewed articles–it would be more useful for a user. If I needed to return to a particular section, I could use the menu to navigate to the section. Alternatively, there could be a History option where, instead of using a collapsible menu, a user can be taken to a new page where he/she can see a list of articles he/she viewed in the past.

Problem 2: “Saved” folder feature

In the navigation menu (Figure 3), there is an option to Save an article. This could have been useful for my previous dilemma; however, there were no visible signs that I could save the Ferris wheel article.

Suppose a recently posted article catches my eye. I click on it. It’s interesting, so I save it.

Fig 4. I can save an article by clicking on the star symbol

After clicking the star symbol (yet another cultural constraint–the star has become associated with “favoriting” [a heart may have been another appropriate symbol to use]), the app tells me that the “article [was] added to [my] ‘Saved’ folder.” This is good feedback, and contributes to an overall stress-free experience.

Suppose I remember what the elusive Ferris wheel article was entitled. Now that I know I can save articles, I want to save that article for future re-reads. I search for it by title, and click on the article. This is what I see:


Fig 5. Ferris wheel article


Firstly, you’ll notice that the layout of this article is different than the layout of the curator article (Figure 4). There is some inconsistency with newer vs. older articles in the app: since the Ferris wheel article is older, from 2012, it seems to be in the same format as the desktop version of the website. Unlike the newer article, this article cannot be saved into the app’s Saved folder; I’m unable to locate any star symbol.

Fig 6. Inactive arrows


Furthermore, in the top-right corner of the Ferris wheel article, I am presented with a way to close the article, and two arrows (Figure 6). Clicking on the arrows does nothing; the arrows are not linked. It is also unclear as to what the arrows suggest–would it be meant to browse through other Ferris wheel articles? Or to go back to the previous page? This is poor affordance–there is no clue indicating how the arrows should be used.

Recommendations: Eliminate the arrows (or use text instead to give clue as to what the arrows mean and make it linkable) and maintain a consistent layout so users are able to save both old and new articles.

Source: Don Norman’s The Design of Everyday Things (2002).