Boil Monitor – Wireframe/App map Slides & In-Class User Testing

Here’s my slides of wireframe & app map:

BoilMonitor_wf

For the in-class user test last week, I learned these:

  1. The paper prototype I printed was too small and not the actual size of the phone, this will affect the user test.
  2. My user indicated that when her task is done, there’s no way to return to the beginning and start the next task. (I fixed that at the second iteration)
  3. My user suggested that in the timer settings, I can provide the function for users to save multiple timers as presets, so they can just turn on the desired timer when needing it again next time. (I’m still considering about this point — more user test needed)

iOS HIG Learning Notes

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.

image: ../Art/color_family_a_2x.png

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.