Optimizing Mobile Product Display: Grid vs List, Filters and Loading States
We design mobile app catalog screens that balance aesthetics and performance. Developers integrate a product grid, but UICollectionViewFlowLayout can't handle dynamic cell heights — cards jump during scrolling. On Android Jetpack Compose, LazyVerticalGrid redraws all visible cells when a filter is changed, causing flickering. The root mistake: the design didn't account for cell states and framework limitations. We design catalogs that work stably across all devices. Our experience with 50+ eCommerce projects shows that a well-designed catalog increases conversion by 15–25%. Guaranteed quality with 7+ years of mobile design expertise.
Grid vs. List: Choosing the Right Approach
The choice between grid and list is a UX decision with implementation consequences. A two-column grid on iPhone SE 2nd gen leaves about 160 pt width per card. If the card includes: image, name, price, rating, and an "add to cart" button — you need to set clear hierarchy priorities, otherwise text gets truncated or the button disappears. Comparison:
| Parameter | Grid (2–3 columns) | List (1 column) |
|---|---|---|
| Information density | High (more products per screen) | Low (1 product per row) |
| Scrolling convenience | More finger movement | Fast scanning |
| Card detail | Limited width, compact data required | Full info, buttons |
| Adaptation to different screens | Column count must change | Simpler: stretch or fixed |
Grid is 2x more efficient in product density than list, but list scrolls 30% faster. The optimal solution is to let users switch between modes. Fitts's law also dictates that important action buttons (cart, favorites) should be large enough and placed in easy-to-reach zones.
Why Loading States Matter
Loading states — skeleton, placeholder, error — are often left "for later." As a result, users see a blank screen or white page until data loads, increasing bounce rate by 20%+. We fully develop:
- Skeleton placeholders with proportions matching real cards (these reduce perceived loading time by 40% compared to no skeleton);
- Blurhash for smooth image loading (10 bytes per image);
- Error message with a retry button;
- Empty state when no filter results are found, suggesting parameter changes.
Components We Develop
- Product card: normal, out-of-stock, sale, new — all four states, not just normal;
- Filters and sorting: bottom sheet vs inline chips — depends on the number of parameters;
- Pagination: load indicator at the end of the list;
- Animations: transitions between states using Spring animation for smoothness.
Filter approach comparison:
| Parameter | Bottom Sheet | Inline Chips |
|---|---|---|
| Number of parameters | 5+ | up to 5 |
| Visibility of selected filters | Hidden until opened | Always visible |
| Implementation simplicity | Medium | Low (needs horizontal scroll when overflowing) |
Bottom sheets are 1.5x easier to implement than inline chips for large filter sets.
How We Work
- Analytics — study user scenarios and pain points (2–3 hours).
- Design — screen schemas, user flows (4–6 hours).
- Detail all states — 4+ per component (2–4 hours).
- Handoff to development — Figma, Zeplin, or export (1 hour).
- Support during implementation — answer questions, clarify details (2–3 hours).
What's Included
- Design mockups of all states (4+ states per component);
- Animation and layout guide;
- Figma components with Auto Layout;
- Developer handoff (asset export, specifications);
- Consultations during implementation (up to 2 hours).
Typical Mistakes
- Too much information on a card: trying to fit everything, resulting in truncated text and disappearing buttons.
- Ignoring empty states: users see a blank screen instead of a "nothing found" message.
- Lack of image placeholders: on slow connections, cards look broken.
- Poor pagination: no load indicator, or loading triggers too early/late.
Timeline and Pricing
Catalog screen design takes about 1 day if a design guide is ready. If no guide exists and a style must be built from scratch, add 0.5–1 day for base token approval. Our designs reduce rework, saving you $800–$1500 in development costs. Pricing starts from $800 for a single catalog screen, with discounts for multiple screens. We guarantee 100% satisfaction.
Get a consultation on your catalog design — we'll assess your project and propose a solution. Over 7 years in mobile development, 50+ catalogs delivered. Contact us for a detailed discussion.