Menu

Designing a React Native app for field reps: cheap Android phones, direct sunlight, weak signal
📰

Designing a React Native app for field reps: cheap Android phones, direct sunlight, weak signal

DEV Community: reactnative·shaoor ahmad·8 days ago
#syYBbdKp
#devtoreactnative#devto#dev#android#field
Reading 0:00
15s threshold

Most mobile design advice assumes a new iPhone, indoors, on Wi-Fi. The people using our field sales app have mid- and low-end Android phones, stand in car parks and dealer shopfronts at midday, and often have one bar of signal.

We still borrowed heavily from Apple's Human Interface Guidelines, because grouped lists, large titles and calm hierarchy make dense data readable. But a lot of Apple's defaults fail outdoors on Android. Here's what we kept, what we changed, and why.

Contrast: Apple blue is too faint in sunlight

iOS system blue, #007AFF , is about 4.0:1 contrast on white. That just passes WCAG AA for large text, and it becomes invisible in direct sun.

We use a darker accent ( #0369A1 , about 6:1) as the tint for every action, link and selected state. Secondary text is grey at 72% instead of the usual lighter grey, giving roughly 5.4:1.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.