FROM THE EXCEED IT BLOG
What Makes a Mobile App Feel Good? A Complete Guide to UI/UX
Published

Two mobile apps can do exactly the same job and feel completely different. In one, you know where you are, what to press and whether your action worked. In the other, you tap Save twice, stare at a spinner and wonder whether going back will erase everything.
A mobile app feels good when it helps you complete your task with clear choices, predictable behaviour, prompt feedback and an understandable way out of mistakes. Attractive screens contribute, but the experience also depends on performance, accessibility and honest business rules.
This guide connects those decisions, from individual buttons to an entire checkout journey. The examples are hypothetical design scenarios, not claims about measured results from Exceed IT client projects. Standards are linked where specific requirements matter; recommendations explain the tradeoffs you should test in your own app.
Jump to: Design principles · Loading states · Accessibility · Dark patterns · 40-point checklist
What is UI/UX?
UI means user interface: the colours, typography, buttons, icons, cards, spacing and layout people interact with. Visual hierarchy directs attention, while animation can reveal how the interface changes.
UX means user experience: how the whole journey works and feels. It includes navigation, feedback, task completion, error recovery, performance, accessibility, predictability and control. A beautiful payment button is UI; understanding the total, paying once and finding your receipt belong to the wider UX.
| UI | UX |
|---|---|
| What the interface looks like and presents | How the experience works and feels |
| Colours | User journeys |
| Typography | Navigation |
| Buttons | Interaction |
| Spacing | Cognitive load |
| Animations | Feedback |
| Icons | Discoverability |
These overlap. An unreadable label is a visual problem that can prevent task completion. A navigation decision determines which controls must appear on screen. Designers and developers need to work through both together.
For more background on turning requirements into screens, read our mobile app design and user journey guide. Here, we will focus on why particular choices make an app easier or harder to use.
What actually makes an app feel good?
Figma's UI design principles describe hierarchy, progressive disclosure, consistency, contrast, proximity, accessibility and alignment. These are useful design tools rather than a formula that guarantees success. The following examples apply those ideas alongside practical interaction decisions.
1. Visual hierarchy: make the next action clear
Size, contrast, typography, colour, position and whitespace tell people what deserves attention. On an appointment screen, a large promotional banner can overpower the date selector. Give the appointment details priority, make “Confirm booking” the primary action and present “Choose another time” as a visible secondary action. Prominence should match the reader's task, including information they need before committing.
2. Consistency: let learning carry across screens
If “Save”, “Done” and “Submit” all describe the same draft action, users must repeatedly interpret the interface. Use shared components, terminology and predictable button behaviour. Keep navigation and icon meanings consistent, while respecting each platform's conventions. Consistency does not require identical iOS and Android controls when their familiar system behaviours differ.
3. Simplicity: remove effort without hiding meaning
A checkout with only a bright “Continue” button may look minimal but conceal the delivery cost. A better screen displays the total, delivery option and next action together. Simplicity means an understandable decision with enough information to make it. Removing labels, prices or helpful explanations can increase the work required to understand a visually sparse screen.
4. Progressive disclosure: reveal detail when it matters
A search screen need not display every specialist filter immediately. Show common filters first and offer a clearly labelled route to more. Preserve a summary of active filters so people know why results changed. Keep decisive information, such as cancellation conditions or an extra charge, visible before commitment; those are not optional details to bury.
5. Familiarity: make important controls recognisable
An experimental symbol for searching asks users to learn something before they can find anything. A familiar search control with a label removes that translation step. Novelty can suit an expressive product, but test it against the task. Give unfamiliar icons text labels, and make gestures optional shortcuts rather than the only route to essential actions.
6. Contrast and readability: make meaning visible
Pale text over a photograph may disappear when the image changes. Use a stable surface behind essential text and test actual colour combinations. Keep type readable, distinguish primary and secondary actions, and explain unavailable buttons. Review light and dark modes separately; a colour that stands out in one theme may fade into the other.
7. Accessibility: offer more than one way to understand
A red border alone does not adequately explain an invalid field. Add a specific message and expose the error to assistive technology. Plan for enlarged text, screen readers and different motor abilities from the first prototype. Accessibility affects components, content and navigation, so retrofitting it after every screen is finished can require structural changes.
8. Proximity, alignment and spacing: show relationships
If a delivery fee sits closer to an unrelated product than to the order summary, its meaning becomes ambiguous. Group related information, align repeated amounts and use spacing to separate decisions. On a small screen, extra whitespace should improve scanning without pushing every relevant detail below the fold. Test the layout with real content lengths.
9. User control: make actions reversible where possible
Back, Cancel, Edit, Undo and Delete serve different purposes. Explain what each does. For a reversible list change, Undo may be more useful than a confirmation dialog on every tap. For an irreversible deletion, describe the consequence and confirm the intent. Returning from a detail screen should preserve the previous list position and filters when practical.
10. Feedback: acknowledge the interaction
After someone favourites an item, change the icon and its accessible state. After a form submission, distinguish “Sending” from “Received”. A pressed state acknowledges a tap; it does not prove that a remote operation succeeded. Tie completion messages to the actual outcome, and keep important confirmation available somewhere more durable than a disappearing toast.
11. Error prevention and recovery: protect the work
A generic “Invalid input” message leaves users searching for the problem. Put “Enter a delivery address” beside the relevant field and retain everything else they entered. Use suitable keyboards and examples before mistakes happen. If a connection fails after submission, establish whether the server received the request before inviting a retry that might duplicate it.
12. Cognitive load: do not outsource memory to the user
Requiring someone to memorise a reference on one screen and type it into another adds avoidable effort. Carry information forward, show a review summary and allow corrections. Remember sensible preferences with the user's understanding. For complex decisions, organise information around the current question instead of presenting an undifferentiated dashboard of every available feature.
Design for humans, not screenshots
A production interface has to survive data that nobody chose for a portfolio. Try a long customer name, a translated button label, an unavailable image, an empty list and thousands of records. A card that works beautifully with two lines of text may hide its action when a name wraps onto four.
Build a small set of deliberately difficult examples before approving layouts. Include zero values, unusually large values, an address without the expected format and content entered by someone unfamiliar with your terminology. Decide what wraps, what truncates and how the full information remains available. Do not silently shorten information needed to identify a person or transaction.
Then change the conditions. Try a small phone, a large phone held in one hand, an older device, larger accessibility text and a screen reader. Test a slow connection, no connection and an interruption halfway through a form. A South African field-service app, for example, might need to preserve a job draft when a technician loses mobile coverage; that is a scenario to validate with its actual users.
Onething's mobile design guide highlights one-handed use and interrupted sessions as design considerations. Its guidance is an agency perspective, not evidence that every mobile audience behaves identically. Test your own context before choosing a layout or workflow.
Loading states: what should users see while they wait?
Actual performance is how long the work takes. Perceived performance is how responsive and understandable that wait feels. You can improve either, but a reassuring animation does not make an API response arrive sooner.
Mobbin's loading indicator guide distinguishes determinate progress, where progress is measurable, from indeterminate loading, where it is not. Start there, then decide what information the person needs. The feelings below are possibilities to investigate, not universal research findings.
| Pattern | What user sees | What user may feel | Best use | Bad use |
|---|---|---|---|---|
| Spinner | Repeating activity indicator | Something is happening; duration is uncertain | Brief wait with unknown progress | Endless blocking screen without recovery |
| Skeleton | Placeholder shape of incoming content | The layout is preparing to fill | Known list or card structure | A placeholder unrelated to the result |
| Progress bar | A track filling with completed work | The task is advancing | Measurable upload or download | Invented progress that stalls near completion |
| Percentage | A numerical completion value | A precise sense of work completed | Known total bytes or items | Presenting upload percentage as total processing progress |
| Step indicator | Named stages and current position | I know where I am in the journey | Checkout, onboarding or a long form | Pretending each step takes equal time |
| Progressive loading | Useful content appears in stages | I can start doing something | Independent content sections | Moving controls as late content arrives |
| Optimistic UI | A reversible change appears immediately | My action registered | Favourite or low-risk preference change | Claiming a payment succeeded before confirmation |
| Cached content | Previously retrieved information | I can continue with a known snapshot | Revisiting content during refresh | Hiding that stock or pricing may be stale |
| No loading indicator | Immediate result or unchanged screen | Finished, if clear; uncertainty, if unchanged | Truly immediate action with result feedback | A slow request that looks like an ignored tap |
Spinners: communicate activity and a way forward
A spinner can suit a short request whose completion time is unknown. Place it close to the affected action, with useful text such as “Checking availability”. Keep unrelated controls usable where possible. Define what happens when the request fails or exceeds your expected wait: explain the situation and offer an appropriate recovery route.
Avoid turning every refresh into a full-screen interruption. IBM Carbon's loading guidance differentiates loading contexts and advises against multiple competing loading indicators. In a booking app, refreshing available times need not hide the selected service and address. Preserve context so the user can understand what is being updated.
Skeleton loaders: preview structure without pretending content exists
Skeleton loading works best when you already know the shape of the result. Reserve space for an image, title and price while a product list arrives. Keep dimensions close to the final layout so content does not jump around. A placeholder for a product price is not a price, and it should not be announced as one.
Use a single meaningful loading announcement rather than exposing every decorative placeholder to a screen reader. Make shimmer optional or use static placeholders when motion is reduced. For an empty result, replace the skeleton with an explanation and a next step. Whether a skeleton feels better than a spinner depends on the task and implementation; test rather than assuming a guaranteed advantage.
Progress bars and percentages: measure the right thing
If a file upload has a known total size, report transferred bytes against that total. If the server must then process the file, label that as a separate stage. “Upload complete; processing document” is more honest than leaving an unexplained bar at 99%.
Do not convert elapsed time into a fabricated percentage. Completed work also does not necessarily predict remaining time when later stages cost more. If you cannot measure progress, use an indeterminate state with useful context instead of false precision.
Step indicators and progressive loading: expose useful progress
“Delivery → Payment → Review” describes a user's route, not a stopwatch. Let people revisit editable stages without losing their answers. If the journey branches, update the stage labels honestly rather than surprising them with several extra steps after the supposed final screen.
Progressive loading lets independent information appear when ready. Show a restaurant's name and menu before optional reviews finish. Reserve space for delayed content and avoid moving a button under a finger. If one section fails, explain that local failure without discarding sections that remain useful.
Optimistic UI and cached content: distinguish local state from confirmation
Optimistic UI displays an expected result before the server confirms it. A favourite can appear selected immediately, provided a failed request restores or clearly marks the state and offers retry. A low-risk toggle or saved preference may work similarly. Rapid changes need careful handling so a late response does not overwrite the user's newer choice.
For a payment, reservation or other consequential operation, show acknowledgement while awaiting authoritative confirmation. “Request sent” is different from “Payment successful”. For drafts, distinguish “Saved on this device” from “Synced”. A cache can make reopening a screen useful immediately, but label stale information where freshness affects a decision and recheck changeable values before commitment.
No feedback: leave no uncertainty after a tap
An immediate result may need no loading indicator at all. It still needs an understandable outcome. If the screen remains unchanged during a request, a person may reasonably tap again. Acknowledge the first interaction, prevent accidental repeat submissions and ensure the server handles retries safely. Disabling a button alone does not explain what is happening.
Animation and microinteractions: motion should have a purpose
A microinteraction is a small interaction around a specific action, such as changing a favourite or adjusting a setting. Motion can confirm an action, guide attention, establish context or explain a state change. Broworks' discussion of animation offers industry examples of microinteractions and branded movement; it is professional guidance rather than a controlled study of mobile outcomes.
Functional animation helps explain what happened. A deleted card moving away connects the tap with the removed item. Decorative animation provides character, such as a small celebration after finishing a personal goal. Decoration can be welcome, provided it respects the task and does not repeatedly obstruct interaction.
| Animation | Purpose | User understands | Good use | Bad use |
|---|---|---|---|---|
| Button response | Acknowledge input | My tap registered | Immediate pressed state | Effect appears after a long pause |
| Favourite change | Confirm selection | This item is selected | Brief motion plus stable selected state | Animation without a lasting state change |
| Card removal | Connect cause and result | This item left the list | Short removal with Undo where feasible | Dramatic exit before recovery is possible |
| Screen transition | Preserve spatial context | I opened details or went back | Consistent direction and usable controls | Long transition blocks every visit |
| Progress movement | Show ongoing work | The process continues | Movement tied to the loading model | Decorative progress presented as measurement |
| Error response | Draw attention to correction | This field needs attention | Text message with restrained emphasis | Shake alone, with no explanation |
| Success celebration | Mark a meaningful milestone | I completed my goal | Optional brief flourish | Confetti obscures a receipt or next action |
Gesture feedback can show that a swipe crossed an action threshold before release. Haptics can reinforce a confirmation or warning when supported and appropriate. Neither vibration nor sound should carry essential meaning alone: the device may be silent, vibration disabled or the user unable to perceive it.
Ask what each animation communicates. Remove constant movement that competes with reading. Respect reduced-motion preferences, keep final states clear without motion and test repeated use. A flourish that feels pleasant once can become an obstacle when someone performs the same task throughout a workday.
Can your UI actually be too fast?
Imagine tapping Save and seeing the editor disappear immediately. The operation may have succeeded, but the transition alone does not answer whether the record was saved or dismissed. The issue is missing confirmation, not excessive computing speed.
A better flow could acknowledge the tap, save the record and open the detail view with a persistent “Saved” status or visible updated value. A brief microinteraction or optional haptic can supplement that result. Let the user proceed without waiting for an animation to finish.
Minimum visible states deserve care. A loader that flashes for an instant can be distracting; delaying the loader's appearance may avoid that flash while the operation continues immediately. Do not delay the actual result merely to make a spinner visible. If success feedback needs to remain noticeable, leave it on the destination screen rather than locking the user on the previous one.
The reverse problem is easy to construct: a screen loads promptly, but an 800 ms transition blocks interaction on every navigation. That is an illustrative delay, not a recommended duration. Measure when controls actually respond, and watch whether people understand the change. Fast work and clear feedback can coexist.
Performance is part of UX
Engineering decisions shape the experience as directly as colour and spacing. Startup work determines when the first useful screen appears. API latency affects data availability. Image size and decoding affect bandwidth and rendering. Expensive visual effects can interrupt otherwise smooth scrolling.
Start with a concrete journey and measure several moments: app opened, first useful content visible, controls usable, request acknowledged and task confirmed. Separate a cold launch from reopening an app. Compare ordinary and slow connections, and inspect slower devices; a developer's newest phone is an incomplete test environment.
Size images for their displayed use, cache appropriate responses and consider prefetching likely next content. Prefetch selectively because speculative downloads consume data and may retrieve information the user never needs. Avoid refreshing entire screens when one section changes. Smooth animation cannot compensate for repeated unnecessary network calls.
A skeleton loader may improve perceived performance, but it cannot excuse a screen that takes 15 seconds to load. That example should trigger investigation of the underlying work, not a more elaborate placeholder. Distinguish a slow request from a failed one and from an offline state.
Define offline behaviour explicitly: what can be read, what can be drafted, what can be queued and what needs a connection. An offline save should survive the interruptions your product promises to support. Explain conflicts when another device changes the same record, and make retry safe against duplicate transactions.
This is why Exceed IT considers interface design and application architecture together when planning mobile applications. The screen's promises need to match what the application can reliably do.
Good UI and good UX are not the same thing
This comparison uses “good UI” as shorthand for visual polish. In a fuller definition, UI quality includes usability too: dated styling alone does not make an interface poorly designed.
| Visual presentation | Good UX | Bad UX |
|---|---|---|
| Good UI: polished appearance | Attractive, understandable and efficient | Beautiful screens with confusing journeys |
| Bad UI: weak visual presentation | Dated or uneven styling, but predictable tasks | Unclear presentation and difficult interaction |
The first combination joins readable design with a coherent journey. The second might feature elegant cards but hidden controls, complicated forms, sluggish navigation or missing confirmation. The third could be an older stock-management tool with plain styling that staff can navigate reliably. The fourth combines problems such as crowded screens, ambiguous actions and lost form entries.
A redesign should preserve useful behaviour while improving presentation. Observe which parts users depend on before replacing familiar workflows. Screenshots can help assess visual treatment; they cannot demonstrate whether someone can recover from a failed submission.
Dark mode done right and wrong
Dark mode is a visual theme. Dark UX patterns are manipulative design choices. A light interface can be manipulative, and a dark interface can be clear, accessible and honest. The opening illustration contrasts clarity and confusion; its darker example does not mean that dark themes are inherently bad.
Do more than swap white for black. Establish separate colours for backgrounds, raised surfaces, text, borders, icons and status messages. Pure black and dark grey can both be appropriate, depending on the design; neither automatically produces a readable hierarchy. If neighbouring cards merge together, use tested surface differences or borders to separate them.
Check photographs, transparent logos and illustrations against both themes. Test selected, focused, pressed and disabled controls. A faint disabled action still needs a nearby explanation if people must understand how to enable it. Preserve the meaning of warning and success states, including text or icons beyond colour alone.
Offer system preference support and a clear theme choice where appropriate. Assess outdoor and low-light use, enlarged text and long reading sessions with your audience. Avoid claiming that dark mode is universally more comfortable or that it guarantees a particular battery saving.
Mobile UI/UX trends that matter in 2026
Muzli's April 2026 pattern roundup discusses adaptive interfaces, gestures and passwordless experiences. Treat that as an editorial view of current practice, not a census of adoption. Our test for each proposal is whether it helps a specific task, including when the technology gets something wrong.
AI assistance and generated experiences
The proposal is to move from asking users to configure every step towards interpreting an intention and suggesting a result. In a hypothetical maintenance app, someone could describe a fault and receive a draft job form. This may help with unstructured input, but users need to review the extracted location, urgency and details before submission.
Keep editable fields and conventional controls available. A conversational interface can make a precise correction harder if users must repeatedly explain themselves. Mark generated suggestions clearly and distinguish a draft from an action already taken. Judge useful assistance by correction effort and task success, not simply by whether the app includes AI.
Adaptive and contextual interfaces
Personalisation can change which information appears first. Showing an active delivery near the top of the home screen could save searching. Moving every navigation destination according to an inferred preference could undo what a returning user learned.
At what point does personalisation become unpredictability? Keep core navigation stable, explain relevant suggestions and offer control over personalisation. For dynamic content, preserve a clear route to the full set of options. A predictable shortcut may solve the problem without an interface that continually rearranges itself.
Gestures, haptics and persistent status
Evaluate gestures as shortcuts layered onto discoverable actions. A swipe to archive can help repeated sorting when an accessible menu offers the same action. Motion can reveal the threshold and haptics can reinforce it, but accidental swipes still need a recovery route.
Contextual status can also reduce unnecessary navigation. A compact active-order summary might let someone check progress while browsing. It becomes intrusive when it occupies essential space after the task is finished. Test the full lifecycle: appearance, update, expansion, dismissal and return.
Passwordless sign-in
Passkeys change the sign-in interaction by using device-supported authentication instead of asking someone to remember a password. Google's passkey documentation describes signing in with mechanisms such as a biometric sensor, PIN or pattern. The useful design question is how this affects account selection and recovery, not whether passwords can be declared obsolete.
Explain setup in familiar language and test sign-in from another device, unavailable credentials and recovery. A convenient initial login is incomplete if a returning customer cannot regain access. Include supported alternatives and the security implications of recovery in the design review.
Our Modern App Design Patterns guide explores how to prototype these choices around user needs, including minimalism, motion and dark themes.
Can an app be over-designed?
Yes, when its visual treatment adds more work than value. Excessive blur or glass effects can weaken contrast. Giant cards and generous spacing can push a useful comparison across several screens. Hidden navigation, novel icons and unusual gestures may ask people to learn rules the task does not justify.
A user opening a banking app is trying to check or change something, not necessarily admire a transition. That does not make visual delight irrelevant. Clear typography, thoughtful illustration and a restrained celebration can give a product personality without obstructing work.
Prototype the decorative treatment and a simpler version with the same content. Ask people to complete the same task, including a correction and a repeat visit. Note hesitation, missed information and blocked interactions. Keep a pattern when it earns its space through comprehension, comfort or an appropriate moment of enjoyment.
Accessibility is good UX
Accessibility needs its own acceptance criteria throughout design and development. It also reveals assumptions about how people see, hear, move, read and remember. A usable default component is a starting point; its labels, arrangement and behaviour still need testing in the finished journey.
Typography, scaling and contrast
Allow text to grow without clipping important labels or hiding actions. Let forms scroll above the keyboard and keep field labels visible after entry. Test long content at enlarged sizes, rather than checking only a short heading.
For web content, WCAG 2.2's text contrast criterion specifies at least 4.5:1 for ordinary text and 3:1 for large text at Level AA, with defined exceptions. Large text means at least 18 point, or 14 point bold, under the criterion's definition. Inactive controls and logos have exceptions; that does not make unreadable essential instructions helpful. These text ratios do not establish complete accessibility conformance.
Touch targets and alternatives
Do not confuse platform units. Android recommends touch targets of at least 48 by 48 dp. For web pointer targets, WCAG 2.2 SC 2.5.8 sets a Level AA minimum of 24 by 24 CSS pixels, subject to exceptions including spacing and inline links. CSS pixels and Android dp are different units in different implementation contexts.
Treat the applicable minimum as a floor and test comfortable tapping with your users. Separate adjacent destructive actions. Provide a simple alternative to dragging, long-pressing or complex gestures, and ensure keyboard or assistive navigation reaches important controls.
Screen readers, errors and reduced motion
Give controls meaningful names and expose their roles and states. “Favourite this restaurant” conveys more than “Heart icon”; the selected state must also be available. Check reading order, modal focus, validation messages and confirmation announcements. Do not make someone search the entire screen to discover that a submission failed.
Pair colour with words, shapes or other meaningful indicators. Respect reduced-motion preferences while preserving the information an animation conveyed. WCAG's interaction-animation criterion is Level AAA and addresses disabling non-essential motion triggered by interaction. It should not be mislabelled as a blanket Level AA animation ban.
Use automated checks to catch detectable issues, then manually complete real tasks with tools such as TalkBack and VoiceOver. Include people with relevant access needs in usability work where possible. A contrast check cannot prove that an order can be placed or an error corrected.
Bad UX versus dark UX
Bad UX can result from unclear requirements, overlooked states or an untested layout. A tiny cancellation button may simply be poor design. Dark UX describes deceptive or manipulative patterns, such as deliberately hiding cancellation to keep collecting fees.
Intent is not always visible from a screenshot. Investigate the behaviour and its consequences rather than assuming every awkward screen is malicious. Regardless of intent, remove obstacles that prevent an informed choice.
The UX Design Institute's dark-pattern overview provides terminology for patterns such as forced continuity, confirm-shaming and disguised ads. A polished interface can execute these patterns efficiently. Visual quality, technical reliability and conversion performance do not by themselves make a design ethical.
Dark patterns we consider morally wrong at Exceed IT
Exceed IT's design philosophy is that people should understand what they are agreeing to and retain a practical way to refuse. We do not consider manipulation successful UX simply because it improves a conversion metric. The judgements below state our position; they are not claims about the legality of every implementation.
| Dark pattern | What it does | Business motivation | Why we would avoid it |
|---|---|---|---|
| Confirm-shaming | Insults or guilt-trips someone who declines | Increase opt-ins | Refusal should be a respected choice |
| Hidden costs | Reveals unavoidable charges late | Secure commitment before the real price appears | People need the total before deciding |
| Forced continuity | Obscures the move into recurring charges | Retain paid subscriptions | Renewal needs informed agreement |
| Difficult cancellation | Makes leaving needlessly complicated | Reduce completed cancellations | Retention should not depend on exhaustion |
| Misdirection | Draws attention away from a material condition | Steer an unwanted selection | Visual hierarchy should support understanding |
| Trick questions | Uses confusing wording or reversed logic | Obtain unintended consent | Consent should match the person's intention |
| Fake urgency | Invents a deadline or scarcity | Pressure immediate action | False information undermines choice |
| Disguised advertisements | Presents paid promotion as neutral content | Generate clicks | Commercial influence should be recognisable |
| Confusing consent | Makes permissions or purposes hard to distinguish | Collect broader agreement | People should understand each meaningful choice |
| Obstruction | Adds unnecessary hurdles to a user's goal | Discourage an inconvenient action | Effort should serve the task or a real safeguard |
Consider the decision after the click. A trial signup followed by surprise charges, refund requests and distrust is a different outcome from a customer knowingly choosing a useful service. Evaluate complaints, reversals and whether users understood the agreement alongside conversion.
Persuasive design versus manipulative design
Encouragement is not automatically unethical. A hypothetical offer saying “Start your 30-day free trial. R99/month afterwards. Cancel anytime” can support an informed decision if the billing schedule and cancellation process match the promise. Show when the first payment occurs, what is included and how cancellation works before collecting agreement.
The manipulative version hides the recurring price, preselects extras or makes cancellation depend on unrelated phone calls. The problem is the concealed or obstructed choice, not the existence of a commercial offer.
Honest visual hierarchy can emphasise a recommended plan while keeping alternatives legible and comparable. Explain differences rather than making the decline option disappear. Aliona Kyrychenko's illustrated dark-pattern examples show how familiar form placements can be used to mislead. They are a designer's examples and critique, not a quantified study of all users.
Good UX versus bad UX versus dark UX
These hypothetical comparisons distinguish helpful design, accidental friction and deliberate manipulation. Real products require investigation before assigning intent.
| Situation | Good UX | Bad UX | Dark UX |
|---|---|---|---|
| Subscription | Show price, renewal and controls | Renewal explanation is unclear | Deliberately conceal recurring billing |
| Checkout | Show the full payable total | Confusing address validation | Reveal mandatory fees only after commitment |
| Notifications | Offer useful topic preferences | Send poorly timed alerts | Pressure consent with misleading warnings |
| Account deletion | Explain consequences and confirm | Lose progress through an unclear flow | Hide deletion to obstruct departure |
| Privacy | Separate understandable choices | Use unexplained terminology | Make refusal deliberately hard to find |
| Loading | Report actual state and recovery | Leave an endless spinner | Fabricate activity to prevent withdrawal |
| Onboarding | Teach the current task | Require an unnecessary tutorial | Hide optional data collection inside setup |
| Forms | Label fields and preserve answers | Erase entries after an error | Use trick wording to obtain agreement |
| Permissions | Explain a relevant request | Ask for everything at first launch | Falsely claim optional access is essential |
| Cancellation | Provide a clear completion receipt | Leave the final status ambiguous | Add irrelevant steps intended to exhaust users |
What good mobile UX looks like in practice
Consider a hypothetical food-delivery app. The journey is Home → Browse → Product → Cart → Checkout → Payment → Confirmation → Tracking. The quality of the handoffs matters as much as each screen.
Home and browse
Home prioritises the delivery address and food search. Someone can enter an address manually instead of granting location access. If nearby restaurants are loading, a structured placeholder appears while the address remains editable. A failed request offers retry; it does not silently become “No restaurants available”.
Browsing preserves filters and list position after opening a restaurant. Names wrap, unavailable images have useful alternatives and prices remain readable with enlarged text. Load optional imagery progressively without moving the order controls. A screen-reader user can identify each restaurant and its availability without decoding decorative icons.
Product and cart
The product screen shows the item price and required choices before “Add to cart”. Selected extras update the visible total. A brief response confirms addition, while the cart count and contents provide a stable record. An unavailable option is explained instead of appearing as a mysterious disabled control.
The cart allows quantity changes and removal with an appropriate recovery option. Delivery charges and relevant conditions are visible before checkout. If prices or stock changed since browsing, show what changed and let the customer decide. Do not silently substitute an item or insert an extra.
Checkout and payment
Checkout reuses entered details and lets the customer edit them. The keyboard does not cover the current field or next action. An invalid address produces a nearby explanation while preserving the rest of the order. Stage labels explain what remains without pretending that each step takes equal time.
Payment shows the amount and acknowledges submission immediately. If the connection drops after the payment request, the app checks the existing transaction's status rather than treating an unknown outcome as a definite failure. Prevent duplicate orders through server-side handling as well as button behaviour. Make support or status checking available when the result cannot yet be established.
Confirmation and tracking
Confirmation displays the order reference, charged amount, delivery address and next step. Important details remain accessible in order history. Any celebration is brief and does not conceal the receipt. Announce the outcome accessibly rather than relying on a green tick alone.
Tracking distinguishes an estimate from a confirmed event. If updates stop, show the last update time and explain the connection state. An animated map is not proof that a driver is moving. Make assistance and available cancellation options clear, including any actual limits. The entire journey should remain understandable when its most interesting animation is switched off.
Common mobile UI/UX mistakes
Use this as a quick diagnostic before commissioning a visual redesign. Each correction still needs testing against the actual task.
- Mystery icons: users must guess the meaning → add clear labels to unfamiliar or important actions.
- Tiny buttons: taps miss or hit neighbours → enlarge targets and separate adjacent controls.
- Too many CTAs: competing emphasis obscures the decision → identify a primary action and useful alternatives.
- Unnecessary onboarding: instructions delay the first useful task → introduce help when the feature becomes relevant.
- Long registration forms: effort arrives before value is clear → request only what the current journey needs.
- Poor error messages: people cannot identify a correction → describe the problem beside the affected input.
- Endless spinners: waiting offers no decision or recovery → define failure handling and an appropriate next step.
- Unclear navigation: returning users lose their place → keep destinations and back behaviour predictable.
- Excessive notifications: alerts interrupt without helping → offer relevant categories and straightforward controls.
- Inconsistent components: familiar-looking controls behave differently → share component rules and terminology.
- Excessive confirmations: routine work becomes repetitive → reserve confirmation for meaningful consequences.
- Missing interaction feedback: people cannot tell whether a tap worked → show acknowledgement and eventual outcome.
- Gesture-only functionality: essential actions remain undiscoverable or inaccessible → provide a visible alternative.
- Poor contrast: important text blends into its surface → test actual colours in both themes and states.
- Excessive animation: movement blocks or distracts from work → keep informative motion and allow reduction.
- Over-designed screens: decoration consumes useful space → compare a simpler version using the same task.
- Premature permissions: access requests lack context → explain them when needed and handle refusal gracefully.
How to test whether the app actually feels better
Choose a task with a clear finish: book a slot, submit a job or correct an order. Recruit people who reflect the intended audience and access needs. Give them the goal and realistic information without teaching the interface. Ask what they expect to happen, then observe what they do.
Record successful completion, mistakes, repeated taps, backtracking and uncertainty about status. Test a failure and recovery as well as the happy path. Ask participants to explain what was saved, charged or shared; successful tapping alone may conceal a misunderstanding. Baymard's UX principles emphasise navigation and regular usability testing, drawing particularly on ecommerce research. Apply findings to another domain with attention to that difference.
Change the most consequential obstacle and repeat the task under comparable conditions. Include first use, repeat use, slow networks and interrupted sessions. A small study can reveal concrete problems; it cannot establish a universal percentage improvement. After release, compare relevant completion and error measures with support enquiries, accounting for audience and product changes. More time spent in an app can reflect either useful activity or difficulty finishing.
The mobile app UI/UX checklist
Use these 40 checks during a prototype review and again in the implemented app. Mark an item only after observing the behaviour, and record a concrete issue when it fails.
Navigation
- ☐ Can users identify where they are and what they can do next?
- ☐ Does Back preserve relevant filters, position and entered work?
- ☐ Do essential actions have discoverable alternatives to gestures?
- ☐ Are navigation labels and destinations consistent across screens?
Visual hierarchy
- ☐ Is the primary action clear without hiding meaningful alternatives?
- ☐ Are related details grouped with readable spacing and alignment?
- ☐ Do long names and missing images preserve a usable layout?
- ☐ Do both themes distinguish important content and control states?
Forms
- ☐ Does every field have a persistent, understandable label?
- ☐ Are required fields justified by the current task?
- ☐ Do keyboards, examples and autofill suit the information requested?
- ☐ Can users correct one answer without re-entering everything?
Accessibility
- ☐ Can text grow without clipping essential information or actions?
- ☐ Have contrast and touch targets been checked against applicable guidance?
- ☐ Can a screen-reader user complete the whole journey?
- ☐ Are meaning and status available without colour, sound or vibration alone?
Loading and performance
- ☐ Does each loading pattern match what can actually be measured?
- ☐ Is useful content available without waiting for unrelated downloads?
- ☐ Are stale, offline, local and synchronised states distinguishable?
- ☐ Has responsiveness been tested on slower devices and connections?
Feedback
- ☐ Does each interaction receive appropriate acknowledgement?
- ☐ Are pending requests clearly different from confirmed results?
- ☐ Can users find important confirmation after a toast disappears?
- ☐ Are meaningful state changes exposed to assistive technology?
Error handling
- ☐ Do errors explain the problem and an achievable next step?
- ☐ Is entered work preserved through validation and network failures?
- ☐ Are retries safe against duplicate submissions or transactions?
- ☐ Can users distinguish an empty result from a failed request?
Animation
- ☐ Does each functional animation communicate a specific change?
- ☐ Can users act without waiting for decorative transitions?
- ☐ Are reduced-motion preferences respected with clear final states?
- ☐ Does repeated use remain comfortable and responsive?
User control
- ☐ Can people edit, cancel or go back where the workflow allows?
- ☐ Is Undo offered for suitable reversible actions?
- ☐ Are irreversible consequences explained before confirmation?
- ☐ Can permissions, notification choices and preferences be revisited?
Ethical design
- ☐ Are total costs, renewal terms and payment timing clear before agreement?
- ☐ Are accepting and declining both understandable choices?
- ☐ Can users cancel or leave without unnecessary obstruction?
- ☐ Are urgency, progress, advertising and personalisation presented honestly?
Good UI/UX should feel almost invisible
What makes a mobile app feel good is the confidence that you can understand it, act and recognise the result. Its presentation is readable, its behaviour predictable, its response timely and its recovery helpful. It remains accessible and trustworthy when the connection fails, the text grows or the user changes their mind.
People rarely celebrate excellent information architecture by name. They find the order, correct the address and carry on. The interface has helped them accomplish their goal without becoming another problem to solve.
Planning a mobile application? Explore Exceed IT's mobile app development service, where we consider the user journey alongside how the application performs, responds and feels.
Sources & Further Reading
Sources checked for this guide on 9 September 2026. The examples and comparison tables are Exceed IT's practical synthesis; they are not reported experiments. Platform guidance and research have different scopes from industry commentary.
Standards, platform documentation and research
- W3C: WCAG text contrast — Level AA text requirements and exceptions.
- W3C: WCAG target size minimum — web pointer targets and exceptions.
- W3C: animation from interactions — Level AAA motion guidance.
- Android: make apps more accessible — platform touch targets and meaningful descriptions.
- Google: passkeys — authentication mechanisms and implementation context.
- IBM Carbon: loading usage — a design system's component guidance.
- Baymard: UX design principles — research-informed guidance, particularly for ecommerce.
Industry guidance and professional perspectives
- Figma: UI design principles — visual organisation and interface foundations.
- Ava Patel: mobile UI design principles — practitioner commentary; the author discloses AI assistance.
- Onething: UI/UX design for mobile apps — agency guidance on mobile contexts.
- Mobbin: loading indicators — component types and examples.
- Broworks: animation in UX/UI — animation and microinteraction perspectives.
- Muzli: mobile app design patterns in 2026 — an editorial trend assessment.
- UX Design Institute: dark patterns — terminology and illustrative examples.
- UX Collective: Little UX crimes — a designer's critique using recreated examples.
Exceed IT perspective
- Mobile app design and user journeys — translating a workflow into useful screens.
- Modern App Design Patterns: How to Choose What Helps Your Users — our approach to prototyping, motion, minimalism and themes.
Community discussion
- Hacker News discussion supplied for the question of interfaces being too fast — retained as further reading. The thread could not be retrieved during preparation, so no comments or findings from it are attributed in this guide. Community discussion is opinion, not authoritative research.