Category: Uncategorized

1. Make it easy for people to interact with content and controls by giving each interactive element ample spacing. Give tappable controls a hit target of about 44 x 44 points. I was aware of the importance of spacing in mobile ui design, but it is good to know the recommended hit target was 44 x 44 points.

2. Use a peek to provide a live, content-rich preview of an item. It’s best when a peek gives users enough information about an item to augment their current task. For example, users can use peek to preview the webpage of a URL in a message before they decide to open the webpage in Safari or share the link with their friends. In a table view, peek shows users the detail view for a row item.

   Provide a pop for every peek. Even though a peek should give users most of the information they need, you should always let users transition to the pop if they decide to switch away from their current task and focus on the item. The pop should be the same view that users get when they tap the item.

   Don’t enable both peek and the Edit menu for the same item. It can be confusing when both features are enabled for one item. (To learn more about the Edit menu, see Edit Menu.)

   Within a peek, avoid displaying elements that look like buttons. If users lift their finger to tap an element that looks like a button, the peek disappears.

   Provide peek quick actions, if appropriate. Within a peek, users can swipe up to reveal actions that are related to the item. For example, peek quick actions in Mail include Reply All, Forward, and Move Message. Not every peek needs quick actions, but if you already provide custom touch-and-hold actions for an item, it’s good practice to provide the same actions within the peek that replaces touch and hold for that item. (Note that peek quick actions in a peek for a web view are supplied automatically.)

   Don’t use peek as the only way to enable item-specific actions. Not every device supports peek and pop and some users may choose to turn off 3D Touch, so it’s essential to find other ways to make peek functionality available in your app. When your app runs on older devices, it can make sense to mirror a peek’s quick actions in a view that users get when they touch and hold an item.

   I’m relatively new to designing for peek and pop guidelines and do not use 3D touch very often so it is interesting to see the ideal peek and pop specifications.

3. View Controllers To manage a set or hierarchy of views in your app, you typically use a view controller. A view controller coordinates the display of views, implements the functionality behind user interactions, and can manage transitions from one screen to another. For example, Settings uses a navigation controller to display its hierarchy of views.

   Here’s an example of how views and view controllers can combine to present the UI of an iOS app.

   

 

Here are some things I didn’t know, and other useful guidelines to always keep in mind:

1. I had know idea split screen existed for iPads and desktop/laptops! I used to play around with this on PCs many many years ago, but I don’t ever remember it being an advertised feature. I had no idea it was even possible and seems not very intuitive to find out (press and hold green full screen button and then drag it around to highlighted halves). But even so, I was disappointed with this feature for two reasons:
   • It only allows half screens and not quarter screens on desktop
   • You can’t exit out of split screen without toggling into full screen first, and the other half screen automatically becomes full screened. There was just a lot of clicking involved to get to the original windowed state.
2. Responsive Views – Views should be designed as ‘compact’ and ‘regular’ for both width and height. compact/regular, width/heights should be interchangeable.
   
3. Color Blindness – don’t use red and green the only distinguishable features. Use more than 1 way to indicate interactivity other than just color, and look into image-editing software that can help test for color-blindness).
4. Color Contrast –  I would really like to know what this means:

“Although viewing your app on a device can help you find some of the areas you need to work on, it’s no substitute for a more objective approach that yields reliable results. This approach involves determining the ratio between the luminance values of the foreground and background colors. To get this ratio, use an online contrast ratio calculator or you can perform the calculation yourself using the formula established in the WCAG 2.0 standard. Ideally the color contrast ratio in your app is 4.5:1 or higher.”

6.  Color Meanings in Different Cultures – keep in mind that color might be interpreted differently by different cultures.
7. Font Rules –
   • Headline and body should be same font size, but headline uses heavier weight.
   • Text in Nav bar is 17pt
   • Never use light or bold font as it is hard to read at small sizes (use regular or medium weight instead)
8. Support Retina Display – Supply @3x & @2x image assets for best resolution. Never scale images greater than 100%

• Give people confidence that their work is always preserved unless they explicitly cancel or delete it. Sometimes I lose some of my texts or notes in certain apps after I use other apps and want to continue my works. Because they restart themselves after recovering from multi-tasking. I always consider these situations as my personal problems. I think I should have saved everything before I switch away from the current app. I do not know that it is app’s responsibility to save user’s data periodically or automatically.

• Tailor Customization to the Task. I believe that many designers want to be innovative and creative while design their products. At least I do. Because being different is attractive to audiences occasionally. However, it is really important to balance UI customization with clarity of purpose and ease of use. Briefly, we have to be aware of how users do their jobs and the necessity of elaborate design.

• Avoid asking for health data before users have a chance to understand what it will be used for. I never used HealthKit before but it became popular since Apple Watch is released. And there are more and more apps using health data. It is really important while accessing user’s private information. It would be an issue if apps are not designed properly to do the tasks. Every designer has to pay attention to this detail.

–

 

1. Color Enhances Communication: In iOS, color helps indicate interactivity, impart vitality, and provide visual continuity. The built-in apps use a family of pure, clean colors that look great individually and in combination, and on both light and dark backgrounds.

If you create multiple custom colors, make sure they work well together. For example, if pastels are essential to your app’s style, you should create a family of coordinating pastels that can be used throughout the app.

2. Pay attention to color contrast in different contexts: For example, if there’s not enough contrast between the navigation bar background and the bar-button titles, the buttons will be hard for users to see. A quick but unscientific way to find out if your colors have sufficient contrast is to view your app on a device in different lighting conditions, including outdoors on a sunny day.

Although viewing your app on a device can help you find some of the areas you need to work on, it’s no substitute for a more objective approach that yields reliable results. This approach involves determining the ratio between the luminance values of the foreground and background colors. To get this ratio, use an online contrast ratio calculator or you can perform the calculation yourself using the formula established in the WCAG 2.0 standard. Ideally the color contrast ratio in your app is 4.5:1 or higher.

3. Be aware of color blindness: Most color blind people have difficulty distinguishing red from green. Test your app to make sure that there are no places where you use red and green as the only way to distinguish between two states or values (some image-editing software includes tools that can help you proof for color-blindness). In general, it’s a good idea to use more than one way to indicate an element’s interactivity (to learn more about indicating interactivity in iOS, see Interactive Elements Invite Touch).

4. Text should never be smaller than 11 points, even when the user chooses the extra-small text size. For comparison, the body style uses a font size of 17 points at the large size, which is the default text-size setting. The headline and body styles use the same font size. To distinguish it from the body style, the headline style uses a heavier weight. Text in a navigation bar always uses 17 points, which is the same as the body text style at the large setting.

1. Use depth to communicate: phone screen has small and limited design area, iOS uses depth to emphasize the importance of different layers which helps users understand the relationships among onscreen objects. This detailed design is a smart, clear, efficient to communicate with phone users. For example, when you open a folder on the home screen, the folder and its content float up with a translucent background.
2. User control: iOS UI/UX is clean and simple, straightforward for users to understand and remember how to use the function. When the user feels more in control of an app, the app can be a good one, especially when users know how to correctly respond to different designs, which means the ui/ux design is successfully meet designers’ expectations.
3. Consider hiding the navigation bar when users want to focus on content: I didn’t pay attention to this detail before, I thought the navigation bar was always there as default. But here is a design that let users focus on content, and hide the navigation bar.

The overall design of an app’s interface needs to distinguish content’s importance by placing them differently. The most important content would usually be placed on the top left corner, whereas the less important content would be placed on the bottom right corner.

 

---

“As much as possible, avoid displaying a splash screen or other startup experience”. Users would expect to be able to use the app immediately after they launch the application. Any kind of information or introduction to the app’s features need to be added with caution; because this might lose users’ interests, and prevent them from exploring more.

If an “onboarding experience” must be added to the app, then use animation or interactivity to improve users’ engagement, or be sure to design a way to exit or dismiss this part.

---

If certain tasks require a hierarchy of modal view, make sure the “Done” button does what users would expect it to do.

---

When design an app interface, be sure to consider color blindness when using colors as visual cues.

 

Furu 

 

DuoLingo is the #1 language learning app on Apple Store. Users can choose the language(s) and their desired study goal(s) for each language. DuoLingo taps into humans’ intrinsic motivation to complete goals by inviting users to set the goals for their intended languages at their own pace; every time when uses feeling the itch that they have left tasks unfinished, they would return to DuoLingo. DuoLingo also sends external trigger – task/goal reminder; these external triggers are owned triggers, meaning users can turn them on/off as they wish. If users keep missing their daily goals, instead of constantly sending reminders, DuoLingo would send out an email reminder, which is less invasive. Users accumulate “experience points” as they learn languages by gaining one point for a correct answer and losing one point for an error. The “experience points” could be considered as variable rewards because users could potentially lose points. The more interesting design of DuoLingo in my opinion is that users would have to complete the easier courses in order to advance and unlock more difficult course, which invites users to invest and store values in their apps, and makes it less desirable for users to switch into other language learning apps.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

View1 shows what happens when users open the app. A banner pops up at the bottom that reminds users of their daily goals, and the banner disappears after a few seconds, revealing View2. View2 shows a clean and clear interface where the primary button is distinctive, and system buttons in the navigation bar have a key blue color that implies interactivity. The contents on View2 are minimized to heighten the core functionality; no unnecessary texts/images or annoying ads. The app uses visual layers to express depth. When users tap into each course, they can swipe between different lessons or views within each course, shown in View3. View4 shows that an alert pops out when users try to quit in the middle of a lesson; the alert message is short and precise, clearly stating the action and the consequence. Users can also access in-app purchases (View5) and user profile (View6) from the navigation bar on View2. Overall, the app follows the principles of deference, clarity and depth.

 

 

 

1. Let content and functionality motivate every design decision: This is a very important guideline that helps create a clean and clear application. Every piece of UI element, interaction, gesture, imagery, animation, video etc.  should be deliberately considered, and the app should not be crowded with unnecessary information that users do not need. This goes back to one of the three principles of IOS designs: Deference (the UI helps people understand and interact with the content, but never competes with it).
2. App should interact with users just like how human interacts with human: a lot of the IOS principles of how an app should be designed goes back to the natural way how a human interacts with another human. For example, an app should maintain a sense of give and take that helps people feel they are making progress as they move through the app. The app should show users the value of the app before asking for login information, and delay login as much as possible. In addition, the app should ask users’ permission before accessing their private data, and clearly state the reason. All of these principles follow a sense of give and take, mutual respect for each other’s privacy and total control.
3. An important point of the iterating process of conceptualizing an application: (1). first brainstorm and come up with a list of app features  (2). Define target users and user characteristics  (3). Go back to the list of app features and based on the user characteristics, cross out features that do not meet user characteristics  (4). Based on the polished list of app features and user characteristics, draft the app definition statement that clearly defines the target users and the core functionality of the app.