Essential Design Principles

Summary & Reflection

After watching a speech from Apple’s World Wide Developer Conference 2017 (WWDC17), I have a newfound understanding for the eleven primary design principles that go into iOS app design. The speaker talked about Human Interface (rather than User Interface), and how that impacted the mindset behind the design process.

1. Wayfinding

Essentially, this design principle emphasizes that the user should always know where they are in the app, and know how to get wherever they need to go next. A user should never be confused, concerned, or distracted with moving around the app. Instead they should be able to easily learn their way and enjoy the service the app is offering.

2. Feedback

This principle is broken up into four types of feedback: status, completion, warning, and error. All four of these feedback categories are meant to keep the user informed to how they are interacting with the app and to guide them to using it successfully.

3.  Visibility

I liked how visibility was explained after feedback, because I feel they are in the same vein. Visibility is all about presenting the user with necessary information in an non-obstructive way, but in a clear enough way so that the user isn’t missing anything important. An example the speaker gave was the mail app. Attachment icons and color-coded flags are visible from the inbox; which may cause the inbox to appear slightly cluttered, but those pieces of information are important for the user to have without searching for them.

4. Consistency

Another strategy to make an app easier to use is the consistency in symbolism used in the design. In all of Apple’s apps, the button for the “share” action looks the same. So the user is never confused about how to share an item, or what the box with an arrow pointing up out of it is for. The speaker compared using this same “sharrow” to other common sharing symbols, and while people can usually use their intuition to figure out what they mean, Apple’s consistent use of the “sharrow” eliminates all chances of confusion or discouragement.

5. Mental Model

What makes a mental model successful is when the system model matches the interaction model. A user will have an idea in their head of how to make an app work based on how it looks, and if the mechanics of the app aligns with that idea, the user will be able to easily learn to use the app. Otherwise, there will be confusion and frustration on the user’s part trying to accomplish their goal in the app.

6. Proximity

This is a very simple principle. Basically it refers to the fact that the distance between a control and the object it affects our assumption that they are related. The closer the proximity, the easier it is for the user to see the connection and they will be motivated to interact with an object of interest.

7. Grouping

With regards to organization of controls, Grouping advises that an app clusters related controls to each other (as well as Proximity, see principle #6). This helps the user get a complete look at what they can do with the tools of an app, and reduces the time they spend searching. 

8. Mapping

Mapping refers to what a control looks like in comparison to the object it controls. For example in interface design, adjusting a horizontal property is very easy to use a horizontal slider, whereas a dial is perfect for a rotational adjustment. Allowing people to directly manipulate an object is the easiest way for a user to map the purpose onto a control (directly with a finger or a pointer).

9. Affordance

The characteristics of an app that cue the user as to what they can use it for. Affordance is all about the relationship that the user has to the app, it is subjective and varies from user to user. Users perceive affordances based on their likelihood to take an action. The example the speaker gives has to do with the affordance of a plate giving him cues to put food on the plate. So in the context of apps, actions should be obvious to the user so they are more likely to know the actions are possible (example: sliders, dials, buttons). As time goes on, affordances become more abstracted from the real life actions they represent, but efficiency remains a priority for Affordance.

10. Progressive Disclosure

A simple way to explain “progressive disclosure” is by the 80/20 rule: 80% of the app’s benefits should be found with 20% of the actions. This principle gradually eases people from simplicity to complexity. So if a user has a simple goal they can easily achieve that, but are able to find more complex tools if they have the skillset / ambition to do so. Often times, presenting all complex traits of an app can be overwhelming, but it does run the risk of burying too much functionality / opportunity from users.

11. Symmetry

In design there is reflection symmetry, rotation symmetry, and translational symmetry. It is important for an app to exhibit symmetry so the user knows all the objects are related and can rely

Examples of the Principles in Action

Wayfinding (good example): Snapchat

Although the design of Snapchat is easy to critique, it is easy to get to any of the three main pages from anywhere in the app. The user can quickly tell where in the app they are currently and can naturally figure out their next step forward. Snapchat keeps their main navigation across the bottom of the screen and all features are accessible from each main screen. (Related to the example given in the video, if all the features were packed into a hamburger menu, Snapchat would be much harder to learn to use)

Feedback (good example): Duolingo

Again, although the graphic design isn’t palatable to everyone, Duolingo offers helpful and specific feedback. From a user’s perspective, Duolingo is one of the most informative apps. From progressing through lessons to risking losing all progress made, the user can see with progress bars or alerts where they are in the app. Also, it is very customizable so the user can set preferences in the forms their feedback takes (eg: noises, syncing with emails, notifications).

Grouping (good example): editing tools iOS Photos app

When a user decides to edit a photo on the iOS Photos app, each category of photo editing is categorized in the menu along the bottom of the screen. Each menu element can be expanded and condensed, which makes the potentially overwhelming process of photo editing to a much more systematic one!

Visibility (poor example): Boulder’s Transit app

As stated in the video, it is possible for Visibility to be overdone. I believe that the Transit app has tried to overcompensating their poor design with labelling everything. The city map is very detailed and almost all bus lines show up right when the app is opened, and the search bar is in the very middle of the screen (also not very consistent with where search bars usually are, violating another design principle). But the app is still hard to use. I’m imagining if I was not from Boulder or did not know which bus I needed initially, I would be very frustrated trying to figure out how to benefit from Transit’s services.