New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Guide: "Improving User Experience" #14979

Closed
frantic opened this Issue Jul 12, 2017 · 9 comments

Comments

Projects
None yet
6 participants
@frantic
Contributor

frantic commented Jul 12, 2017

As discussed with @brentvatne and other during ChainReact '17, it would be great to have a section in the docs that lists mobile-specific important UX details.

This is a rough checklist:

  • hitSlop
  • tab bar
    • tab selected tab to pop
    • if empty stack, scroll to top
  • touchable with ripple
  • keyboard:
    • autofocus and return key
    • space under keyboard and dismissing
    • keyboard type, capitalization and autocorrect
  • animated with useNativeDriver
    • only some properties supported -- no layout properties. use
      transforms whenever you can rather than width/height/margin,
      so you can take advantage of this
  • nativedriver for animated.event in scroll view or it'll be janky
  • loading states
    • onPressIn trick for preloading
    • placeholder elements
    • using data that you already have to partially render
    • loading state for image: what do you see when it's not there? maybe
      grey placeholder, maybe gradient, maybe activity indicator, maybe
      low-res version
  • deferring rendering expensive (eg: maps) when possible
  • status bar color, size
  • fading in network images
  • cancellable gestures
  • meaningful animations -- shared transitions for example
  • respect battery state
  • prompt before asking permissions
  • portrait / landscape: lock if you don't support
  • android back button: navigation library can do some things but not all
    for you, need to consider where else users expect it to work
  • compress images properly, provide 2x/3x
  • sometimes text should be selectable
  • ellipsize truncated text
  • respect network status
  • splash screen (white flash)

@frantic frantic self-assigned this Jul 12, 2017

@hramos

This comment has been minimized.

Show comment
Hide comment
@hramos

hramos Jul 12, 2017

Contributor

Yes, yes, yes. These are all things that I quickly notice when an app doesn't get it right. Thanks for driving this!

Contributor

hramos commented Jul 12, 2017

Yes, yes, yes. These are all things that I quickly notice when an app doesn't get it right. Thanks for driving this!

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Jul 19, 2017

Collaborator

@hramos - let us know if we missed anything here too!

Collaborator

brentvatne commented Jul 19, 2017

@hramos - let us know if we missed anything here too!

@AlanFoster

This comment has been minimized.

Show comment
Hide comment
@AlanFoster

AlanFoster Aug 9, 2017

Contributor

deferring rendering expensive (eg: maps) when possible

I feel that would be a useful topic to cover - as it's not currently clear what the idiomatic approach within react-native is. For instance, I understand it can be a common UX pattern to use a placeholder/skeleton component in order to get a fast initial render, then have a deferred render to replace the skeleton component with the real, expensive, component.

In a similar vein, it's perhaps worth re-mentioning the benefit of avoiding re-renders entirely if possible, with shouldComponentUpdate etc perhaps? 🤔

Contributor

AlanFoster commented Aug 9, 2017

deferring rendering expensive (eg: maps) when possible

I feel that would be a useful topic to cover - as it's not currently clear what the idiomatic approach within react-native is. For instance, I understand it can be a common UX pattern to use a placeholder/skeleton component in order to get a fast initial render, then have a deferred render to replace the skeleton component with the real, expensive, component.

In a similar vein, it's perhaps worth re-mentioning the benefit of avoiding re-renders entirely if possible, with shouldComponentUpdate etc perhaps? 🤔

facebook-github-bot added a commit that referenced this issue Aug 24, 2017

New guide: Improving User Experience
Summary:
Work in progress for #14979

![image](https://user-images.githubusercontent.com/192222/28240809-efe8613c-693c-11e7-86e5-10dff490a686.png)
Closes #14993

Reviewed By: hramos

Differential Revision: D5700652

Pulled By: frantic

fbshipit-source-id: e4130723fa8ada2211f9559e5d84d81f29f9fd2a
@joegoodall1

This comment has been minimized.

Show comment
Hide comment
@joegoodall1

joegoodall1 Sep 14, 2017

Hi @frantic,

I just watched your talk from Chain React (after a recommendation from someone I spoke to at React Native EU).

I can see from the checklist above there are a number of things that need to be added to the guide.

Would it be helpful if I contributed to these docs? If it would be should I follow the process outlined here?

joegoodall1 commented Sep 14, 2017

Hi @frantic,

I just watched your talk from Chain React (after a recommendation from someone I spoke to at React Native EU).

I can see from the checklist above there are a number of things that need to be added to the guide.

Would it be helpful if I contributed to these docs? If it would be should I follow the process outlined here?

@hramos

This comment has been minimized.

Show comment
Hide comment
@hramos

hramos Sep 19, 2017

Contributor

The docs are now live in master at http://facebook.github.io/react-native/releases/next/docs/improvingux.html

PRs appreciated!

Contributor

hramos commented Sep 19, 2017

The docs are now live in master at http://facebook.github.io/react-native/releases/next/docs/improvingux.html

PRs appreciated!

@stale

This comment has been minimized.

Show comment
Hide comment
@stale

stale bot Nov 18, 2017

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

stale bot commented Nov 18, 2017

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

@stale stale bot added the Stale label Nov 18, 2017

@stale stale bot closed this Nov 25, 2017

@jasonkoirala

This comment has been minimized.

Show comment
Hide comment
@jasonkoirala

jasonkoirala Dec 4, 2017

Finishing activity like in android.

jasonkoirala commented Dec 4, 2017

Finishing activity like in android.

@hramos

This comment has been minimized.

Show comment
Hide comment
@hramos

hramos Dec 4, 2017

Contributor

I think it's worth keeping this open as a TODO. We have a new repo for the docs, so lets open it there: facebook/react-native-website

Contributor

hramos commented Dec 4, 2017

I think it's worth keeping this open as a TODO. We have a new repo for the docs, so lets open it there: facebook/react-native-website

@brentvatne brentvatne referenced this issue Dec 7, 2017

Open

Improving UX Guide (ongoing) #47

5 of 26 tasks complete
@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Dec 7, 2017

Collaborator

agreed, moved it over @hramos

Collaborator

brentvatne commented Dec 7, 2017

agreed, moved it over @hramos

@facebook facebook locked and limited conversation to collaborators May 15, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.