[draft] UX Guidelines

[ds300]

This is a draft of a document I'd like to reference in the PR checklist, to help folks think about their work in relation to mobile UX patterns that aren't always captured by figma specs.

Loading

Your content is not always on the screen, and you should take care that it appears and disappears gracefully.

• Tap back and forth so that your content enters and exits over and over again. Make sure nothing about the transitions feels jarring.
• Does content jump around at all? You should try to find out why and make it stop.
• Do things appear or disappear abruptly? Use fade or collapse/expand transitions.
• Use skeleton loading states for content that is fetched remotely. Avoid spinners.
• Use ActivityIndicator instead of Spinner
• Use PopIn when something appears as a result of user interaction.
• Use Disappearable when something disappears as a result of user interaction.
• Do lists with lazily-loaded items scroll smoothly? Sometimes folks load items in too-small batches. The bigger the batches, the smoother the scrolling.

Interactions

Interactions should feel satisfying, smooth, and snappy.

• Touching interactive things should give the appropriate kind of feedback. See The guidelines on notion
• Touch targets should be at least 40px × 40px. Use hitSlop to increase the size of a touchable without affecting layout.

Forms

💡 When working on forms in the simulator always keep the on-screen keyboard visible (cmd+t in iOS)

• The first input in a blank form should normally receive keyboard focus automatically when the page comes into view. Inputs have an autofocus prop that should take care of this in most situations. Otherwise make a ref for the input and call ref.current?.focus()
• Forms with multiple fields should have seamless focus switching to the next input when the user hits 'enter'. You should customise the keyboard's return button label to be 'Next' on all but the last input.
• Inputs should always be visible when they are in focus. This should happen automatically when there is a correctly set-up KeyboardAvoidingView in your view hierarchy. Make sure all the parents between the KeyboardAvoidingView and the ScrollView that contains your inputs are flexing fully.

[brainbicycle]

we are going to discuss this in a knowledge share, and either close or follow-up based on outcome