Unit
- First mobile platforms: Early devices like the Palm Pilot and BlackBerry relied on physical buttons and small monochrome screens. Designers focused on maximizing information density with limited color palettes, typically black and white or four-shade grayscale. Text was primary, and interactions were menu-driven with hierarchical lists.
- Touchscreen revolution: The introduction of capacitive touchscreens changed interface design fundamentally. Direct manipulation replaced physical buttons, requiring designers to rethink hit targets, gesture recognition, and visual feedback. The screen became both input and output, demanding larger touch targets of at least 44 points.
- Diverse screen sizes: Modern apps must support hundreds of device sizes from 4-inch phones to 12.9-inch tablets. Designers use responsive layouts and adaptive breakpoints to ensure usability across the spectrum. Density-independent pixels (dp) help maintain consistent physical sizes across screens with varying pixel densities.
- Platform ecosystems: iOS and Android have distinct design languages: Human Interface Guidelines (HIG) for Apple and Material Design for Google. Each platform has unique navigation conventions, icon styles, and interaction patterns. Designers often create platform-specific adaptations rather than forcing a one-size-fits-all approach.
- Context of use: Mobile devices are used in fragmented, often distracting environments: while walking, commuting, or multitasking. Design must account for one-handed use, attention limitations, and varying lighting conditions. Features like reachability and dark mode address these real-world scenarios.
- Performance constraints: Mobile processors, memory, and battery life are limited. Heavy animations, large images, and inefficient code degrade user experience. Designers optimize assets, use lazy loading, and prioritize essential content to maintain smooth performance.
- Connectivity variations: Users experience fluctuating network speeds, offline periods, and data caps. Apps must handle network errors gracefully, cache content for offline use, and minimize data consumption. Skeleton screens and progress indicators improve perceived performance during loading.
- Accessibility requirements: Mobile design must accommodate users with visual, motor, hearing, or cognitive impairments. Features like dynamic type, voiceover compatibility, and sufficient color contrast are not optional but essential. Designing for accessibility often improves the experience for all users.
Design Principle
Principle: Platform Consistency
Definition: Adhering to each platform native conventions and UI patterns to reduce cognitive load and leverage user familiarity. Users expect standard icons (like the share icon), gestures (swipe to delete), and navigation structures (tab bar at bottom on iOS, or top navigation on Android).
Application: When designing a cross-platform app, create separate mockups for iOS and Android. Use system fonts (San Francisco for iOS, Roboto for Android) and follow platform-specific spacing and corner radius guidelines. Avoid custom UI elements that mimic native controls unless justified by strong branding needs.
Quick Revision
- Early mobile platforms relied on physical buttons and hierarchical menus.
- Touchscreens introduced direct manipulation and larger touch targets.
- Responsive design using density-independent pixels handles diverse screen sizes.
- Platform consistency reduces user confusion and leverages existing habits.
- Performance, connectivity, and accessibility are critical design constraints.