App website: helloweatherapp.com
The app user has important initial questions that once resolved create a feeling that she understand the app; and until she feels she understand the app, she is a little bit uncomfortable. The designer’s task is to so arrange the components of the app that it easily leads the user to have a sense of understanding about the app. If the design be so arranged as that a minimum of cues can convey that feeling, we subconsciously appreciate that kind of efficiency, and we perceive designs that embody that grace to be elegant and beautiful.
There are many ways people go about to understand a thing, but the most essential and natural way must touch on our common ancestry, that is, our evolutionary roots. I believe that the most urgent kind of understanding has to do with a sense of place, which urgency is best explained through a simple example: imagine you found yourself suddenly not knowing either where you were or where you could go—_What room is this?;_ Are there any doors out of here? and where do they lead?; Is this even a building I’m in?. How uncomfortable, or at the very least, how distracting would that be?
So the user’s initial and pressing need is to understand where she is (in the app) and where she can go. If the app be only one screen, once the user knows this fact, a great apprehension has been soothed, and she is able to proceed with the comforting certainty that, Whatever I can do with this app, this screen is the place to do it; there are no other places. If the app consist of a number of screens, the user has to come to be acquainted with what they are, or to be more accurate, what distinguishes one from another, before she can feel that sense of understanding of where she is and where she can go.
Navigation model & locateability
In the language of Human Interface Design, when the user is acquainting herself with where she can go within an app, she is constructing a navigation model. It is a kind of mental model—another Design term—which I mention only to convey that the model is something held in the mind.
Let us consider the navigation model in Hello Weather. Its intellegibility (ie to the user) rests on the user’s first discovering that what she is looking at on the screen is a weather report for a particular geographical location, and second, discovering how a different geographical location may be selected.
So let us look at a screen from Hello Weather:
The challenge of readability
I’m always interested in what may be the most fundamental factor that may be an obstacle to a user’s using and loving an app’s design. The most fundamental often has the form of, Can I even see it?: those with impaired vision may see the same screen like this:
But it is important to realize that it is not only impaired vision that results in so blurry a view, but distracted vision. I am searching for a word as underogatory as possible to describe the simple fact of one’s attention being elsewhere; for when we say someone is distracted, we don’t mean it in a good way; and we have embedded in our culture an insane requirement that everyone be at the ready to pay ‘full attention’ to whatever trifle is presented before her. The fact is that there are things more important than whatever is on the iPhone screen, such as the conversation being had simultaneously as the iPhone is brought out for a complementary purpose. And so when we are not wholly concerned with the thing before us, it is the same as when our vision is impaired; the screen takes much more effort to read.
With Hello Weather, it is most important that the weather report can actually be read, and so we discover our first opportunity to be improved: we recommend that the app’s font size be changeable according to the user’s preference. On iOS (ie on an iPhone or iPad), there is a system-wide facility by which the user’s preference can be set, and it is called Dynamic Type: in the Settings app the user is able dial her preference for larger or smaller text, and apps can respond to that setting. It so happens that Hello Weather does not respond to it. Therefore: We recommend that Hello Weather implement Dynamic Type.
The challenge of structuring content
When regarding a screen of content, as when reading the printed page, the user first discerns the hierarchy embedded within it: the title, the headings, etc. We conventionally look to top matter to find a title that will tell us what the screen is about. In Hello Weather, the top matter is either this:
So for a moment the user must distinguish which is the true title: “West Vancouver, …,” or “Right now.” Although the user’s momentary confusion is quickly resolved as she discovers extra headings in the content that resemble “Right now” in size and location, this momentary confusion does exist, and we do not see a reason why the user should be made to do the extra work. (In fact, being extremely serious about these little disturbances is the only way to design products that will harmonize with their users.) Therefore: We recommend that Hello Weather more clearly distinguish a screen’s title from its content.
The challenge of locateability
Once the user discerns the content from the not-content, in this case from the top matter (as everything below is content), she next seeks to know where she is (in the app). Locateability refers to how easily a user comes to understand where she is (in an app) in relation to where she can go.
In Hello Weather, the paucity of things in the top matter facilitates the user’s sense of where she can go. We have only these three components (which we will consider from right to left):
The user may readily understand the gear symbol to mean ‘settings,’ and even if she doesn’t, tapping that symbol brings that clarity. The title does not appear to be interactive, but a trial tap can tell as much; its function is to give the user the important clue that this screen is all about “West Vancouver, BC, Canada,” or whatever location’s weather is being looked at. We come finally to the strange left-most symbol that may resembles a map location, if the user be familiar with that convention; but even if she is not familiar that this symbol means ‘location,’ it certainly does appear to be interactive, and so she taps it to learn where it leads, and sees the following (and only the top half of the screen is shown):
To answer the question of whether an improvement can be made to help the user more rapidly come to understand where she can go within the app, let us consider the top matter once more (and let us call the left button the ‘locations’ button, and the right, the ‘settings’ button):
The following are pertinent questions in the user’s mind (and they may be subconscious):
- Why is the locations button bigger than the settings button?
- Why does the locations button straddle the title area and the content area, but the settings button is constrained within the title area?
I cannot find satisfactory answers to these questions. If the user find symbols to be arranged according to some deliberate way that she does not understand, she will feel like the app is less understandable; and it will be less appealing to use it.
The most fundamental question concerning any human interface component is whether it should even exist, or at least, whether it should exist there. The settings button located on the main screen suggests the question: the settings for what?—for the app, or for this place in the app? In this app the settings pertain to the app, not the particular location, and so: We recommend the settings screen (as it refers to app-level settings) should be invoked from the highest level in the app hierarchy.
The challenge of navigational model correspondence
Let us now discuss an opportunity for improvement that has to do with how it is visually represented when the user moves from one place to another in the app. The opportunity relates to the manner in which the locations screen appears and disappears: when the user taps the location button, the locations screen slides in from the right.
But a screen sliding in from the right is a strong convention in iOS: it suggests a hierarchy, and a sliding-in from the right suggests going deeper in that hierarchy. The back button we can see in the locations screen is certainly a conventional element; it is conventionally understood that tapping the back button navigates a level higher (ie back) in the hierarchy.
Why do I mention these things about how the locations screen appears? Because I am pointing out a dysfluency created by this app’s behaviour, as compared with convention. The dysfluency has two parts: first, there is a strong convention that tapping a button in the top left corner of the screen navigates higher (ie back) in the app hierarchy (and not deeper, as happens here).
The second part of the dysfluency is this: if we are looking at the main screen, we are looking at the weather report for a particular location. If we wanted to change the location, it makes sense that we’d navigate higher up the app’s hierarchy, not deeper. Ie it makes sense that to go from ‘this particular location’ to ‘no particular location’ is a move from a more- to a less-specific state, which in hierarchies corresponds to a movement from a lower to a higher level.
In Human Interface Design terminology, what we are discussing is a disconnect between how the user would think the app to be navigated—the user’s (mental) navigational model—and how the app is in fact navigated. We have highlighted a disconnect in that correspondence. And so: We recommend that navigating from a particular location to the list of locations be visually represented as a moving higher up the app hierarchy (and not deeper).
And so our assessment draws to a close. We have considered some fundamental principles of human interface design. We have looked at an elegant contemporary app and we have seen how even something so simple provides interesting opportunities that may be improved.
My hope in writing this is to instill, in all those who are interested, a deeper understanding of human interface design. This is also a sample of what a quick design assessment from Radicle looks like. Our mission at Radicle is to improve design across the industry, so that we can make users happier. We appreciate your attention, as well as your support in this endeavour that affects us all so closely.
14 Jun 2017