For this lab, I watched the video Essential Design Principles from Apple’s 2017 Worldwide Developer’s Conference. Below, I’ll write some general notes from the video, as well as detail the 11 core design principles discussed in this video, and describe some examples of real apps that help to illustrate these principles.
General Notes
- Everyone needs to: feel safe, understand, achieve, and experience beauty. Therefore, apps should provide: predictability and stability, clear and helpful info, streamlined and simple workflows, and a delightful experience.
- Design principles don’t tell us how to do specific things in our design, they tell us why we should do those things.
11 Core Design Principles:
- Wayfinding systems: help people to navigate environments quickly and successfully. These are important to help people feel oriented and safe, and they provide an exit path for the user. Examples in the app world include: navigation bar and selected tab bar, back buttons, labels to help people understand what is going on.
- Feedback: gives us information about whether actions are being performed or completed, problems are imminent, the status of certain things, or whether there is a warning or error we should know about. App world examples: unread status indicators on email, red recording dot on camera app, sound of a locked iPhone, animation of email being deleted, animation and sound of Apple Pay transaction, form validation. Good feedback is like having a conversation with the person who designed the app.
- Visibility: the usability of a design is greatly improved when controls and information are clearly visible. App examples: badges (for attachment, unread status, etc.) in mail app, tab bar in clock app for showing different functions (as opposed to being in a hamburger menu). But — densely-packed interfaces can be overwhelming and can slow decision-making, esp. for people who might be new to your app.
- Consistency: representing similar design features in similar ways, as well as the location and configuration of controls. To make your app consistent, you have to fully consider what expectations people have when they come to your app (these are determined by their experiences with other apps that they use). Pay attention to platform conventions like workflows, navigation schemes, iconography, etc. App examples: share icon on iOS vs the one you might see on a website. It is best to be consistent unless you have a very strong justification to do otherwise.
- Internal Consistency: within your app, everything should share a similar look and feel, that match each other. App examples: have glyphs with a similar visual style, text should have limited number of fonts and sizes and colors, etc.
- Mental Model: a model of how a system works, oversimplified to help you understand what’s going on. Mental models are developed through personal experience. When a system matches our mental model, then our expectations of that system are met (we perceive this experience as “intuitive”). Trying to get people to change their mental model of how your app works is risky, so prove to yourself without a shadow of a doubt that your changes will be an improvement before enacting them.
- System model: model about how a system works
- Interaction model: model about how we can interact with the system to get the desired results
- Proximity: the distance between a control and the object that it affects. If a control is really close to an object, we assume there is a connection between the two. Proximity is also useful for expressing relationships between controls.
- Grouping: helps people to understand the relationships between elements, and is key to giving a design structure. Examples: in keynote, controls that toggle panels are located right above where those panels are displayed, and are grouped together by purpose or topic.
- Mapping: designing controls to resemble the objects that they affect. Mapping also relates to how controls are arranged relative to each other. When mapping is unclear, you’ll see labels. The best mapping is the most direct mapping. If you can allow people to directly manipulate an object, that is going to be the most intuitive process.
- Affordances: giving your design visual and tactile cues about what interactions the user can take. Affordances let people know what actions are possible, and obviousness or visibility of those cues help people to use correct or intended ways of interacting. Affordances depend on each person’s abilities, so they can vary from person to person. People are more likely to perceive an affordance when it is related to an action that they are more likely to take. Examples: seeing a door and assuming you can move through it, seeing a chair and assuming you can sit on it, etc. App examples: sliders afford dragging a knob along the track, buttons afford tapping, dials afford rotating.
- Progressive Disclosure: technique for managing complexity, gradually easing the user from the simple to the more complex, and hiding away complexity so that people can accomplish basic tasks with simple interfaces. Be careful to not bury information or important functionality though!
- The 80/20 rule says that 80 percent of a system’s effects come from 20 percent of its functions. Carefully go through your app to decide what the most useful 20 percent of its functionality is, and it’s probably okay to make the other 80 percent not immediately visible. This can also prevent someone from accidentally changing a control they don’t really understand. Keep things simple for novices, while more experienced users can quickly reveal the options and actions that they require.
- Symmetry: reflectional, bilateral symmetry are most commonly thought about, but there are also radial, rotational, and translational symmetry. We associate symmetrical forms with good health, stability, balance, and orderliness, as well as being aesthetic. We perceive symmetrical elements to be connected to each other even if they aren’t (ex: [] brackets). Attractive interfaces demonstrate a mixture of reflectional and translational symmetry. App examples: phone app, clock app, weather app.
Examples of Core Design Principles:
Headspace: Good example of internal consistency
In the headspace app, all of the fonts are the same font and size, and design elements like stroke size and the shape and style of clickable modules are consistent across the entire app. The app makes use of many different colors, but they are all optimized to work well together. Additionally, all of the illustrations are done in the same style across different pages and modules, and all of the icons share similar visual styles as well.
Duolingo: Good example of progressive disclosure and the 80/20 rule
When you first open the app, the first thing you see is a page showing you which lessons you have to take next, which makes it very simple for the user to get going on their next lesson. As you progress through a lesson, the user only has to worry about completing one task at a time before moving on to the next one. Duolingo has other features, too, like changing notification settings or using your gems to buy different costumes for the Duo character (see below screenshots), but these are hidden away in other tabs that I didn’t even realize existed for a long time, since I mostly use the app for working through lessons. In this way, Duolingo breaks a very complex task (learning a language) into manageable bite-sized lessons that the user can work through, and more advanced or niche features are hidden out of the user’s immediate view. Since most people probably only use Duolingo to work through lessons (instead of spending their gems in the shop, checking leaderboards, etc.) I think it is a great example of using the 80/20 rule to present the most important functionality to the user while hiding more advanced features.
Fitbit: Good example of visibility
I think the Fitbit app is a great example of the visibility design principle, which states that the usability of a design improves as information and controls become more visible. As you can see in the screenshots below, each page of the Fitbit app presents a ton of useful information to the user. The first screen to load shows the user highlights about various areas of their fitness, such as exercise, sleep, water, and weight loss. When the user clicks onto any one of these areas, they are presented with more detailed information, including graphs and visuals to help understand and simplify everything. Any information that the user might be searching for is readily available (because of its visibility) and can be as detailed as the user needs it to be.
Done: Not-so-great example of affordances
I love the app Done because it is a customizable and flexible habit-tracker app, but it had quite the learning curve for me because the design doesn’t immediately communicate to the user how they can interact with different elements. For example, if you click onto the middle of a tile, it brings you to a page where you can record that you’ve completed that task for the day (by clicking the small “+” button in the second screenshot), as well as view your history for that habit. For the first few months of using this app, I clicked into each habit and recorded them manually, which was actually quite tedious. Eventually, I accidentally clicked on the far right side of a tile (where the lone number is), and realized that clicking in that particular area is a much faster way to record completing that task. However, there is nothing in the UI to suggest that clicking over there will do anything, much less record completion of a task. In addition, it took me awhile to realize what the number on the right side of each tile represents (it is your streak for completing that task, in days, weeks or months depending on the habit), because there is nothing to suggest what the number means or how you can interact with it. I think this app could be better if there were more indications in the UI about what affordances different elements might provide, and how the user should interact with the app.
nate bennett 