UI/UX design principles are the rules that make a website or app easy to understand and easy to act on. The ten that matter most for a business site are: design around the user's goal, make one action stand out, stay consistent, limit choices, make buttons easy to hit, keep text readable, show what is happening, prevent and forgive mistakes, let people recognise instead of remember, and load fast. Below, each principle comes with a business example and a way to check it, followed by the step-by-step UI/UX design process and a checklist you can run on your own site.
We build websites and apps for businesses in Mumbai and across India, so this guide is written for the person paying for a design rather than the person drawing it. You do not need to know Figma to use it. You need to know what good looks like, and what to ask for.
UI vs UX: what each one means
UX (user experience) is how the product works for the person using it: whether they can find what they came for, finish the task, and leave satisfied. UI (user interface) is what they see and touch: layout, colours, type, buttons, icons and forms. UX decides that checkout should take two steps; UI decides what those two screens look like.
| UX design | UI design | |
|---|---|---|
| Main question | Does this work for the user? | Is it clear and pleasant to look at and use? |
| Typical work | User research, user flows, site structure, wireframes, usability tests | Visual style, layout grid, typography, colour, components, interaction states |
| Main outputs | Personas or user notes, sitemap, flows, grey wireframes, test findings | High-fidelity screens, design system, clickable prototype, handoff files |
| How you judge it | Task success, drop-off points, enquiries, completed orders | Readability, consistency, accessibility, brand fit |
In small projects one designer usually does both. That is fine, as long as the UX work happens first. A beautiful screen for the wrong flow still loses customers.
The 10 UI/UX design principles at a glance
Different sources list five, seven, eight or ten principles. Our ten draw on the most cited frameworks: Jakob Nielsen's 10 usability heuristics (first published in 1994 and still reviewed by Nielsen Norman Group), Ben Shneiderman's Eight Golden Rules of Interface Design, and the W3C's accessibility guidelines. We picked the ones that most directly affect whether a visitor becomes an enquiry or a sale.
| # | Principle | In one line | Quick check |
|---|---|---|---|
| 1 | Start from the user's goal | Every page exists to help someone finish a task | Can you name the one task each key page is for? |
| 2 | Clear visual hierarchy | The most important thing looks the most important | Squint at the page: does the main button still stand out? |
| 3 | Consistency | Same thing, same look, same place | Do all primary buttons share one colour and style? |
| 4 | Fewer choices | More options means slower decisions | How many items are in your main menu? |
| 5 | Easy-to-hit targets | Buttons big enough for a thumb, with space around them | Can you tap every link on a phone without zooming? |
| 6 | Readable contrast and type | Text must be legible for everyone, in sunlight too | Does body text meet a 4.5:1 contrast ratio? |
| 7 | Feedback and system status | Always show what just happened and what happens next | Does every button react when pressed? |
| 8 | Prevent and forgive errors | Stop mistakes early; make them easy to fix | Does a form keep what was typed after an error? |
| 9 | Recognition over recall | Show options instead of making people remember | Are saved addresses and recent searches visible? |
| 10 | Speed is part of the design | A slow page is a bad experience, however it looks | Does the page pass Core Web Vitals on mobile? |
The 10 principles explained, with business examples
The examples below are illustrative scenarios of the kind we see on Indian business sites. They are not client case studies.
1. Start from the user's goal
Good design begins with the task the visitor came to do, not with what the business wants to say about itself. A clinic's visitors mostly want timings, location and a way to book. A B2B manufacturer's visitors want product specs and a way to request a quote.
Business example: a coaching institute's home page opens with a long "About our founder" section. Parents, who arrive wanting batch timings and fees, have to scroll past it. Moving a "Courses, timings and fees" block to the top answers the real question first.
How to apply it: write down the top three reasons people visit your site. If you are not sure, ask your sales or front-desk team what callers ask most. Each of those reasons should be reachable in one tap from the home page.
2. Clear visual hierarchy
Hierarchy is how size, colour, weight and spacing tell the eye what to look at first. On a well-designed page you can tell what the page is about and what to do next within a few seconds, without reading every word.
Business example: a restaurant's page has "Order online", "Book a table", "View menu", "Franchise enquiry" and "Careers" as five identical buttons. Making "Order online" the single filled button and turning the rest into plain links gives the page one obvious next step.
How to apply it: one primary action per screen. Use one heading size for page titles, a smaller one for sections, and keep paragraphs short so headings do the scanning work.
3. Consistency
Consistency appears in both Nielsen's list ("Consistency and standards") and Shneiderman's ("Strive for consistency"). When buttons, links, icons and terms behave the same way everywhere, people learn your site once and stop thinking about it. That also covers external consistency: a cart icon top right and a logo that links home work because almost every other site does the same.
Business example: a real estate site calls the same thing "Enquire", "Get details", "Request callback" and "Contact builder" on different pages. Visitors wonder whether these lead to different places. One label used everywhere removes the doubt.
How to apply it: keep a small design system, even a single page listing your colours, fonts, button styles and the words you use for key actions.
4. Fewer choices, faster decisions
Hick's Law says the time it takes to make a decision increases with the number and complexity of choices. On a website, every extra menu item, banner or pop-up competes for the same attention.
Business example: a services company lists 14 services in its top menu. Grouping them into four categories (Websites, Apps, Marketing, Automation) with the detail on each category page shortens the menu and makes each choice easier.
How to apply it: aim for a short main menu, and use progressive disclosure: show the basics first and reveal advanced options only when someone asks for them. Do not oversimplify to the point where people cannot find what they need, though.
5. Make targets easy to hit
Fitts's Law says the time to reach a target depends on its distance and size: small, far-away buttons are slower and easier to miss. On phones, this is mostly about thumbs.
WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels at Level AA (with exceptions such as enough spacing around smaller targets). Treat that as the floor; primary buttons should be comfortably bigger.
Business example: a hotel booking form puts a tiny "+" and "-" for guest count right next to each other. Guests on phones keep hitting the wrong one. Bigger controls with space between them fix it.
6. Readable contrast and typography
If people cannot read your text, nothing else matters. WCAG 2.2 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, where large means at least 18 point (about 24px) or 14 point bold (about 18.5px).
Business example: a fashion brand uses light grey text on a cream background because it looks elegant on the designer's large monitor. On a phone outdoors, product descriptions become hard to read. Darkening the text keeps the look and passes the contrast check.
How to apply it: run your text and background colours through any free contrast checker. Use a body font size that reads well on phones, keep line length moderate, and if you serve Hindi or regional-language visitors, test those scripts too, since some fonts render Devanagari poorly at small sizes.
7. Feedback and visibility of system status
Nielsen's first heuristic is "Visibility of system status": the product should always tell people what is going on. Shneiderman's rules say the same thing as "Offer informative feedback" and "Design dialogs to yield closure".
Business example: a customer pays by UPI, switches to their UPI app, approves, and comes back to a blank screen. Not knowing whether the order went through, they pay again or call support. A clear "Waiting for payment confirmation" state followed by an order confirmation screen (and an SMS or WhatsApp message) removes the anxiety.
How to apply it: every button needs a pressed state, every form a success message, and every wait longer than a moment a loading indicator.
8. Prevent errors, and make recovery easy
The best error message is the one that never appears. Nielsen lists "Error prevention" and "Help users recognize, diagnose, and recover from errors"; Shneiderman adds "Permit easy reversal of actions".
Business example: a checkout asks for city, state and PIN code separately and rejects the form if they do not match. Filling city and state automatically from the PIN code prevents the mismatch. If a field is still wrong, the form should say which one and why, and keep everything else the visitor typed.
How to apply it: use the right keyboard for each field (numeric for phone and PIN code), validate as people type, write error messages in plain language, and offer undo for destructive actions like removing an item from a cart.
9. Recognition rather than recall
People should not have to remember information from one screen to use it on another. Shneiderman calls this "Reduce short-term memory load"; Nielsen calls it "Recognition rather than recall".
Business example: a returning customer on a grocery app has to retype their address every time. Showing saved addresses and recent orders makes repeat purchases faster.
How to apply it: show recently viewed items, saved details and visible labels. Do not rely on placeholder text inside form fields as the only label, because it disappears as soon as someone starts typing.
10. Speed is part of the design
A page that takes too long to show its main content, or jumps around while loading, feels broken however good the design file looked. Google's Core Web Vitals put numbers on this: Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint of 200 milliseconds or less, and Cumulative Layout Shift of 0.1 or less, measured at the 75th percentile of page loads.
Business example: a home page opens with an auto-playing full-screen video. On mid-range Android phones over mobile data, visitors stare at a blank area for several seconds. Replacing it with a compressed image and a "Play video" button keeps the story and gets the page usable faster.
How to apply it: design with performance in mind: fewer heavy images, fixed space reserved for images and ads so the layout does not shift, and system or well-optimised web fonts. Our technical SEO checklist shows how to test these numbers for free.
How these principles turn visitors into customers
Design principles sound abstract until you look at why people abandon a purchase. Baymard Institute's checkout research, which averages 50 studies, puts the documented online cart abandonment rate at 70.22%. In Baymard's survey of US online shoppers, several of the top reasons are design problems:
| Reason shoppers gave (Baymard survey) | Share | Principle that addresses it |
|---|---|---|
| Didn't trust the site with card details | 19% | Consistency, clear feedback, visible security and contact details |
| Site wanted me to create an account | 18% | Start from the user's goal: offer guest checkout |
| Checkout was too long or complicated | 17% | Fewer choices, recognition over recall |
| Website had errors or crashed | 17% | Error prevention, speed |
| Couldn't see or calculate total cost up front | 12% | Visibility of system status |
The survey is from the US, so treat it as a guide to the kinds of problems that cost sales, not as an Indian benchmark. The same logic applies to lead-generation sites: a contact form with twelve fields, no confirmation message and a broken mobile layout loses enquiries for the same reasons.
The UI/UX design process, step by step
Principles tell you what good looks like. The process is how a design team gets there without guessing. The UK Design Council's well-known Double Diamond describes four phases: Discover, Define, Develop and Deliver. For a business website or app, that usually becomes six practical steps.
| Step | What happens | What you get | Your job as the client |
|---|---|---|---|
| 1. Research | Talk to customers and staff, study analytics, review competitors | User notes, top tasks, problems to solve | Share data, enquiries, common customer questions |
| 2. Structure | Plan pages, navigation and the key user flows | Sitemap and user flows | Confirm the priority of pages and services |
| 3. Wireframes | Simple grey layouts for each key screen | Wireframes for desktop and mobile | Judge layout and content order, not colours |
| 4. UI design and prototype | Apply brand, type, colour and components | High-fidelity screens and a clickable prototype | Give one consolidated round of feedback per review |
| 5. Usability testing | Watch real users try key tasks on the prototype | List of problems and fixes | Help recruit a few real customers to test |
| 6. Handoff and measure | Developers build from specs; the team tracks real usage after launch | Design system, specs, analytics plan | Review the numbers and approve improvements |
Step 1: Research
Research does not need a big budget. Read the last 50 enquiries or support chats, look at which pages get traffic and where people leave, and spend an hour with whoever answers your phone. This tells the designer what real visitors want, which is often different from what the brief says.
Step 2: Structure (information architecture and user flows)
Next, decide which pages exist, how they are grouped in the menu, and the exact steps for each key task: "find a service and send an enquiry", "choose a product and pay", "book a slot". Writing these flows down early is the cheapest way to cut unnecessary steps.
Step 3: Wireframes
Wireframes are black-and-white sketches of each screen that show what goes where. Keeping them plain is deliberate: it keeps the discussion on content and order instead of colour. Ask to see the mobile wireframes first, since that is where most of your visitors will be.
Step 4: UI design and prototype
Once the structure is agreed, the designer applies your brand and builds a clickable prototype, usually in Figma, that you can tap through on your phone. This is where principles 2, 3, 5 and 6 (hierarchy, consistency, target size and contrast) get checked in detail.
Step 5: Usability testing
Give a few real customers a task ("find the price of X and send an enquiry") and watch without helping. Jakob Nielsen's long-standing advice is that testing with about five users finds most usability problems, and that several small rounds of testing beat one large one. Fixing a problem in a prototype takes minutes; fixing it after development takes days.
Step 6: Handoff, build and measure
The designer hands developers the screens, a component library and notes on every state (hover, pressed, error, loading, empty). After launch, track what people actually do: enquiry form completions, checkout drop-off, which pages lead to calls or WhatsApp chats. Then improve in small rounds. Our guide to the app development process shows how design fits into the wider build for apps.
India-specific UX details worth getting right
- Mobile first, low-end devices included. Test on a mid-range Android phone over mobile data, not just on the office Wi-Fi and a flagship phone.
- OTP and phone-number login. Many Indian users expect to log in with a mobile number and OTP rather than a password. Support autofill of the OTP where the platform allows it.
- UPI-friendly checkout. Make the UPI option easy to find, and handle the moment the user returns from their UPI app with a clear status screen (principle 7).
- WhatsApp and click-to-call. For service businesses, a visible WhatsApp or call button is often the main conversion action, so give it primary-action treatment.
- Languages. If you serve Hindi, Marathi or other regional-language visitors, plan layouts for longer or taller text from the wireframe stage.
- Prices with GST clarity. Say whether prices include GST. In Baymard's survey, extra costs (shipping, tax, fees) being too high was the most common abandonment reason, at 40%.
UI/UX checklist: review your own website in 30 minutes
Open your site on your phone and go through this list. Each "no" is a fix to discuss with your designer.
- Within five seconds of landing, can a new visitor tell what you do and for whom?
- Does each key page have one obvious primary button?
- Can the top three visitor tasks be started from the home page in one tap?
- Do all primary buttons look the same, and do you use the same words for the same actions?
- Is the main menu short, with related items grouped?
- Can you tap every button and link without zooming or mis-tapping?
- Does body text meet 4.5:1 contrast, and is it readable outdoors?
- Does every button visibly react, and does every form show a clear success message?
- Do forms use the right keyboard, explain errors in plain words and keep entered data?
- Is there a guest option, or at least a short sign-up (such as phone and OTP)?
- Are prices, GST and delivery charges clear before the last step?
- Does the page pass Core Web Vitals on mobile?
- Do images have alt text, and can the site be used with a keyboard alone?
- Are your phone number, WhatsApp, address and policies easy to find?
- Have at least five real customers tried the key task since the last redesign?
Security also affects trust. If you are reviewing the whole site, our website security checklist covers the technical side.
Frequently asked questions
What are the 7 principles of UX design?
There is no single official list. One widely shared version, from UX Design Institute, names user-centricity, consistency, hierarchy, context, user control, accessibility and usability. Figma's guide lists seven UI principles instead: hierarchy, progressive disclosure, consistency, contrast, accessibility, proximity and alignment. The ten principles in this guide cover the ideas in both lists.
What are the 8 golden rules for UI design?
These are Ben Shneiderman's Eight Golden Rules: strive for consistency, seek universal usability, offer informative feedback, design dialogs to yield closure, prevent errors, permit easy reversal of actions, keep users in control, and reduce short-term memory load.
What are the 10 rules of good UI design?
The best-known set of ten is Jakob Nielsen's usability heuristics: visibility of system status; match between the system and the real world; user control and freedom; consistency and standards; error prevention; recognition rather than recall; flexibility and efficiency of use; aesthetic and minimalist design; helping users recognise, diagnose and recover from errors; and help and documentation.
What is the UI/UX design process?
For most business websites and apps it runs in six steps: research, structure (sitemap and user flows), wireframes, UI design and prototype, usability testing, and handoff to developers followed by measurement after launch. It follows the Design Council's Double Diamond phases of Discover, Define, Develop and Deliver.
What is UX design in simple words?
UX design is planning how a website or app works so people can find what they need and finish what they came to do without confusion. It covers research, structure, flows and testing. UI design is the visual layer on top: the screens, buttons, colours and type.
What are the three main types of user interfaces?
Textbook answers usually list command-line interfaces (typed commands), graphical user interfaces (windows, icons and buttons, which is what websites and apps use) and menu-driven interfaces. Voice and touch interfaces are often added to the list today.
Want a site that follows these principles?
If your website looks fine but does not bring in enough enquiries or sales, the cause is usually in the UX rather than the colours. Our website design and development team starts every project with research and wireframes before any visual design. If you are budgeting for a redesign, our guide to website development cost in India explains what drives the price. Contact Webhorse Studio to talk through your site.
