AI Skill Report Card
Designing Mobile Interfaces
Mobile Interface Design
Quick Start
1. Start with user flow mapping
2. Create low-fidelity wireframes focusing on core actions
3. Apply platform-specific design systems (iOS Human Interface Guidelines/Material Design)
4. Design for thumb-friendly interaction zones
5. Test with accessibility tools (VoiceOver/TalkBack)
Recommendation▾
Add concrete input/output pairs showing actual wireframe layouts or specific UI component specifications instead of high-level descriptions
Workflow
Progress:
- Research user needs and define core user flows
- Sketch key screens focusing on primary actions
- Create wireframes with proper information hierarchy
- Apply visual design following platform conventions
- Design interactive states (loading, error, success)
- Implement accessibility features (contrast, touch targets, screen readers)
- Test usability across different device sizes
- Validate with accessibility auditing tools
Recommendation▾
Include visual examples or ASCII mockups of common interface patterns like navigation structures or form layouts
Examples
Example 1: Input: E-commerce app checkout flow Output: 3-step process with large CTAs, guest checkout option, Apple Pay/Google Pay integration, 44px minimum touch targets, high contrast for form fields, clear error messaging
Example 2: Input: Social media feed interface Output: Card-based layout with infinite scroll, pull-to-refresh, floating action button, clear visual hierarchy, dark mode support, accessibility labels for images and actions
Example 3: Input: Onboarding sequence Output: Progressive disclosure over 3-4 screens, skip option, visual progress indicator, benefit-focused copy, large imagery, consistent with platform navigation patterns
Recommendation▾
Provide specific templates or frameworks (e.g., component libraries, design system starter kits) that designers can immediately use
Best Practices
- Touch targets: Minimum 44px (iOS) / 48dp (Android)
- Typography: Use system fonts (SF Pro/Roboto) for better performance
- Navigation: Follow platform conventions (tab bars, navigation bars)
- Color contrast: WCAG AA compliance (4.5:1 ratio minimum)
- Loading states: Always design for network delays and empty states
- Gesture support: Implement standard gestures (swipe, pinch, tap)
- Safe areas: Design for notches, home indicators, and rounded corners
- Responsive design: Account for various screen sizes and orientations
Common Pitfalls
- Don't mix iOS and Android design patterns within the same platform
- Avoid tiny touch targets or closely spaced interactive elements
- Don't rely solely on color to convey information (accessibility)
- Avoid custom navigation patterns that conflict with platform expectations
- Don't forget to design error states and edge cases
- Avoid auto-playing media without user consent
- Don't use low contrast text or backgrounds
- Avoid complex gestures without providing alternative interaction methods