Insights ·
Mini Program Home Screens: Where Common Functions Go
A mini program home screen should let users find "the thing I came to do" within seconds. Lay it out in four steps: order functions by how often users do them, not by company department; split the first screen into identity, common entries and a main action; put frequent actions where a thumb can reach; and let the type of mini program decide what comes first. Before launch, ask a few real users to try set tasks and count the steps.
People open a mini program with a specific errand: check an order, claim a coupon, book a time, show a membership code. Whether the home screen works depends on whether they can find the entry for that errand within seconds. The problem with many home screens is not looks but placement: common functions are buried on the second screen while the first screen is taken up by one large picture.
This article is about laying out a mini program home screen so that common functions land on the first screen.
1. Start with what users do often
Before any layout, list what users do in this mini program and sort the list by how often each thing is done. There are three places to get this from: existing visit records, questions heard by customer service and store staff, and the requests the operations team handles every day.
Avoid arranging by company department: one block of entries for the merchandise team, one for membership, one for campaigns. Users do not care who is responsible for what; they care about what they want to do. The few things done most often are the ones the first screen should be kept for.
2. Split the first screen into three blocks: identity, common entries, main action
Space on a phone's first screen is limited, so it helps to divide it into three blocks:
- Identity and status: the brand mark, plus the user's own status, such as membership level, points or orders waiting. It tells the user at a glance which brand they are in and where they stand.
- Common entries: one or two rows of icons, each with a two- or three-word label. Keep the number small, generally no more than eight; beyond that, users have to read the whole set again.
- Main action: the one thing this mini program wants users to do first, such as order, book or register. Give it a prominent button or full-width banner, one per screen.
Everything else, such as campaigns, recommendations and the brand story, goes below the first screen. The first screen does not need to be complete. It needs to let users find the entry they want at a glance.
3. Put frequent actions within thumb reach
On a phone held in one hand, the lower half of the screen is easy for the thumb to reach and the top corners are hard to reach. So:
- Place common entries and the main action in the middle and lower part, not all crowded at the top.
- Keep the bottom navigation to three to five items that match the places users go most, such as Home, Categories, Orders and Me.
- A search box at the top is a common choice, but if search is something users do often, make sure it works with a single tap.
4. Different types of mini program put different things first
| Type of mini program | First screen | Below the first screen |
|---|---|---|
| Retail | Search, product categories, current offers, membership status | Campaigns, new arrivals, brand story |
| Booking services | Booking entry, my bookings, available slots | Service descriptions, common questions |
| Membership | Membership code, points, available benefits | Events, recommendations from the points store |
| Events and exhibitions | Registration, schedule, my tickets | Speakers, past highlights |
The table is not a fixed answer, only a way of thinking: put what users arrive to do first, then what you want them to see. For a retail mini program that also has to balance brand expression and conversion, continue with brand expression and conversion in a retail mini program.
5. Where the brand goes
The brand should appear on the home page without pushing common functions down. A common case is a full-screen picture at the top, so users scroll before they see any entry. There are two ways out: reduce the picture's height so part of the common entries shows, or move the brand imagery into a feature area below the first screen and keep only the mark and status at the top. Keep the brand's type, color and image rules consistent. Users form an impression of a brand not from the area it occupies but from whether every detail agrees.
6. Before launch, let real users try it
After the layout is done, find a few people who were not involved in the design and give them specific tasks: "find your order", "claim a coupon", "book a time next week". Watch three things: how many steps it takes, where they hesitate, and whether anyone taps the wrong place. Then check on phones of several sizes that the common entries are all there and nothing is covered.
For the overall acceptance before launch, see what to check in the week before a mini program goes live. The home screen layout should pass this check first, then go into overall acceptance.
Summary
To lay out a mini program home screen: order functions by how often users do them; split the first screen into identity, common entries and a main action; put frequent actions within thumb reach; let the type of mini program decide what goes first; keep brand expression from crowding out common entries; and let real users try set tasks before launch.
FIM's digital experience service covers WeChat and Alipay mini programs, from membership, booking and retail to event services, with design and development carried out together.