What Should a Trading App Layout Prioritise?

By Yamm Labs · Updated September 2026 · 6 min read

It is 9:14 on a weekday morning. A trader in Pune opens her broker’s app on a crowded local train, one thumb free, the market fifteen minutes from opening. She wants three things: what her positions did overnight, whether her margin covers the trade she planned, and a way to place it before the opening move. What she gets first is a full-screen banner for a new mutual fund offer. That banner is a layout decision, and it is the wrong one.

What should the first screen of a trading app show?

The first screen should answer the question the user opened the app to ask. For most retail users in India that question is one of four: how are my holdings doing, what is this stock doing right now, can I afford this trade, and has something happened that I need to act on. Everything on the first screen should serve one of those four. A useful test: anything shown there should be something the user would pay to see.

• Portfolio or watchlist, above the fold. Day’s change in rupees and percent, with the instrument names readable at arm’s length on a small Android screen.
• Order entry within two taps. Buy, sell and exit are reachable from the watchlist row itself, not three menus deep. Exit matters more than entry on a bad day.
• Funds and margin in plain view. Available cash and margin used, in rupees, so the user never learns about a shortfall from a rejected order.
• Alerts that need action. Price alerts, order rejections and margin calls sit above offers and content.

New-product banners, referral offers and educational content can live on the home feed, but below these four. When they sit on top, the user scrolls past them every session and learns to ignore the one area where the broker might later need to say something important.

Which trading app screens does SEBI fix before design starts?

This is where a trading app differs from any other consumer app. Some screens are not open for creative debate. The clearest example is SEBI’s risk disclosure for equity futures and options. Under a SEBI circular dated 19 May 2023, in force from 1 July 2023, stock brokers must show clients a set of risk disclosures on derivatives when they log in to their trading accounts.

The disclosure may appear as a pop-up on login, must cover at least 50 percent of the screen, and the client can proceed only after acknowledging it. The version SEBI issued with that circular opened with its finding that 9 out of 10 individual traders in equity F&O incurred net losses. The SEBI circular sets out the full requirement.

For the layout, that one rule forces three decisions:

Beyond this, promotion of a broker’s app is also subject to the advertising rules that apply to brokers. Check the current guidance before any in-app creative that promotes a product also runs outside the app.

On a trading app, the first screen belongs to the user’s money, not to the broker’s next launch.

How should a trading app layout handle risk and costs on the order screen?

The order screen is where trust is won or lost. Show the order type, quantity, price and the approximate charges before the confirm button, not after the trade. Keep buy and sell visually distinct with more than colour alone, since a green and red pair fails for colour-blind users and in bright sunlight. Put the confirm button where a thumb reaches it, and give exit orders the same prominence as new ones.

SIGNALNewsletter by Yamm Labs

The next piece, straight to your inbox.

New writing on BFSI brands, B2B and influencer marketing, and AI search.

Email *

Subscribe

Subscription form is not available at the moment

One click to unsubscribe. Privacy policy

For derivatives, carry the risk tone from the login disclosure into the order flow. A brief reminder next to F&O order screens does more for the brand than a celebratory animation after an options trade. The same principle runs through lending: the lending app branding guide shows how disclosure screens can look like the brand instead of a legal afterthought.

Should beginners and active traders see the same layout?

Not always. A first-time investor buying a SIP and an intraday trader watching ten charts have different first questions. One common answer is a simple default with an advanced mode the user switches on. The brand should stay the same across both: the same type, colour and voice, with density as the only variable. What must not change between modes are the mandated screens. The login disclosure and the acknowledgement step apply to the account, not to the interface setting.

This is one of the hundred questions in our trading and payment app branding hub, which covers the neighbouring decisions on onboarding, outages and dark mode in short form.

What does a buyer decide when briefing a trading app layout?

The decision is the order of priority, written down before any visual work. A useful brief names the four first-screen jobs in order, lists every regulator-fixed screen with its owner in compliance, and states where marketing is allowed to sit. Yamm Labs works from Gurugram with BFSI clients that include Paytm Money, Axis Bank and HDFC Life, and serves international clients remotely. On app briefs the first workshop is the priority list and the mandated-screen map, not the mood board.

Common trading app layout mistakes

Most layout problems share one source: the home screen was designed around the broker’s goals and the user’s goals were fitted in afterwards. These are the patterns to look for in a review.

• A launch banner above the portfolio. The Pune trader at 9:14 wanted her positions and her margin. A full-screen offer made her wait for both.
• Exit buried deeper than entry. If buying takes two taps and closing a position takes five, the layout is telling users which action the broker prefers.
• Margin revealed by a rejection. When available funds sit inside a profile menu, users learn about a shortfall from a failed order, at the worst possible moment.
• Buy and sell told apart by colour alone. A red and green pair fails colour-blind users and washes out in bright sunlight. Add position, label and shape.
• The disclosure squeezed in at the end. A login risk screen added after the flow was designed usually ends up as a grey system dialog, which is exactly what users learn to tap past.
• An F&O promotion straight after the loss statistic. The home screen contradicts the screen the user has just acknowledged.

Each of these is cheap to fix on a wireframe and expensive to fix after launch, when product teams have already planned their launches around the top banner.

A worked example: the 9:14 home screen, rebuilt

Take the trader on the Pune local train again and apply the four priorities in order.

She opens the app. Because she trades derivatives, the SEBI risk disclosure comes first, covering at least half the screen, set in the brand’s type on a calm panel. She acknowledges it with one clear button.

Home, top third. Her holdings and positions, with the overnight change in rupees and percent, in type she can read with one hand on a moving train.

Home, next row. Available funds and margin used, in rupees. She can see before the market opens whether the trade she planned is covered.

Alerts strip. A price alert she set yesterday has triggered. It sits above everything promotional, with a tap straight to the instrument.

Order. From the watchlist row she taps the stock, taps buy, and lands on an order screen that shows quantity, price and approximate charges above a confirm button within thumb reach. Two taps, then confirm.

Below the fold. The new fund offer banner is still there. It is where she scrolls when she has time, not what she has to get past to trade.

Nothing was removed from the broker’s plans. The same banner, the same disclosure and the same features are all on the screen. The trading app layout simply puts them in the order the user needs them.

A trading app layout checklist before release

Run this list on the smallest supported Android phone and on a large one, in light and dark mode.

1. Portfolio or watchlist sits above the fold on the home screen, with the day’s change in rupees and percent.
2. Buy, sell and exit are reachable from the watchlist row in two taps.
3. Available funds and margin used are visible on the home screen, in rupees.
4. Action alerts, such as price alerts, rejections and margin calls, appear above offers and content.
5. The login flow runs login, F&O risk disclosure, acknowledgement, then home, and the disclosure covers at least half the screen.
6. The first screen after the disclosure does not promote margin trading or derivatives.
7. The order screen shows order type, quantity, price and approximate charges before the confirm button.
8. Buy and sell differ by label and position as well as colour.
9. Advanced mode changes density only; the mandated screens are identical in both modes.
10. Every regulator-fixed screen has a named owner in compliance.

Where an item depends on a SEBI or exchange requirement, confirm the current text with your compliance team before release, since circulars are revised.

How should the layout behave on a bad day?

A layout is tested hardest when markets fall sharply or when the app itself has a problem. Plan the bad-day state as deliberately as the normal one.

• Exit gets priority. On a volatile day users want to reduce risk. Keep exit and square-off at the same prominence as buy, and do not let promotional modules push them down.
• Status in the alerts strip. If order placement or a data feed is degraded, say so in the alerts area on the home screen in plain words, with a time. A line that explains is better than a spinner that hides.
• Pause the promotions. Build a switch that removes launch banners and referral offers from the home feed on a bad day. Selling a new product while users are watching losses reads as tone-deaf.
• Keep numbers steady. Avoid animations that make P&L figures flicker or count up. On a falling market they add anxiety without adding information.

People also ask

Does SEBI require a risk pop-up in trading apps?

For equity futures and options, yes. Since July 2023, brokers show a risk disclosure to clients on login, covering at least half the screen, and the client can proceed only after acknowledging it.

Where should marketing banners go in a trading app?

Below the portfolio, funds and order entry, or behind a tab. Put them on top and users learn to scroll past that space, which is the space the broker may later need for alerts.

How many taps should it take to place a trade?

Aim for two from the watchlist: tap the instrument, tap buy or sell, then confirm on an order screen that shows the price, quantity and charges. Exiting a position should be just as quick.

What is the most important element of a trading app layout?

The user’s own money. Holdings or the watchlist, the day’s change, and available funds and margin should be the first things on the home screen. Order entry comes next, within two taps. Everything else, including offers, content and referrals, sits below those. When a layout gets this order right, most other screen decisions become easier to settle.

Should a trading app use a bottom navigation bar?

For most mobile trading apps a bottom bar works well because it keeps the main areas, such as watchlist, orders, portfolio and funds, within thumb reach. Keep it to a few items and do not give a promotional tab the same weight as orders or funds. Use the words users already say for each label, not internal product names.

Does dark mode change a trading app layout?

It changes the colours, not the priorities. Check that gain, loss and warning colours stay distinct on a dark background, that the risk disclosure remains readable, and that buy and sell still differ by label and position. Test the order screen in both modes on a small phone before every release.

Where should the order confirm button sit?

Where the thumb reaches it naturally, usually the lower part of the screen, below the order summary. The user should see order type, quantity, price and approximate charges before the button, not after. Give the button a label that says what it does, such as “Confirm buy”, rather than a generic “Submit”.

How often should a trading app layout be reviewed?

Review it whenever a regulator-fixed screen changes, whenever a new product is added to the home feed, and after any release that moves order entry or funds. Between those, a light quarterly pass with the checklist above catches drift, such as a promotion that crept above the portfolio or an exit button that moved. Confirm any change to a mandated screen with your compliance team first.