Guide to list UI design: principles and examples (2024)

Design

October 15, 2019

Guide to list UI design: principles and examples (1)

How important are lists in UI design? How much do they affect usability and what’s the best way to design them? Find out in this guide on list UI design!

From the Tablets of Stone engraved with the Ten Commandments, to the Rosetta Stone’s three versions of the Decree of Memphis, lists have always been around. And from stone to modern UIs, it’s safe to say that this technique of summarizing information has come a long way!

Start designing the UI for web and mobile apps with Justinmind. It's Free. Unlimited projects!

Download Free

Guide to list UI design: principles and examples (2)

Why do we create lists? Because they’re a natural way to optimize scannability and summarize content. Lists are a way to remember, to summarize and a way to get things done. And in UI design it’s no different.

Many web and mobile app UIs make use of lists to help their users achieve a variety of daily tasks. Lists, therefore, play a crucial role in UI design. That’s why investing time and effort into this aspect of UI design has many payoffs in terms of usability.

In this guide, we’ll show you exactly what those payoffs are and run you through how to create the best list UI designs to fit your purpose. We’ve also listed (see what we did there?) some great examples to inspire your next designs!

Table of Contents

  • What is a list UI design?
  • Why is list UI design important?
  • List UI design: fundamental principles
  • Web list UI design principles
  • Mobile list UI design principles
  • Prototyping lists with Justinmind
  • 5 Cool web list UI design patterns
  • 5 Cool mobile list UI design patterns

What is a list UI design?

Everyone knows what a list is, you might say. True enough. But when it comes to great UX, it’s the fine detail that counts. Lists are supposed to be a solution to reading comprehension, and the rival of grid UI designs.

Guide to list UI design: principles and examples (3)

Creating the optimal solution for your list UI design means first understanding the core elements that make up a list UI design. The anatomy of a list, which is a classic UI pattern, generally consists of one column of horizontal line content in rows, but can also exist as a grid of images, which we’ll explain in more detail below.

List UI design content

Depending on what your users need to get from your list UI design, the content can take various forms. Basically, list items are grouped into three main categories by order of importance as: supporting visuals, primary text and metadata.

Supporting visuals

As the name suggests, supporting visuals draw attention to the list item, helping to convey basic information about the item to your users.

Guide to list UI design: principles and examples (4)

They do say a picture conveys a thousand words and lists are meant to be scannable. That’s why it often makes sense to use a thumbnail or an icon as supporting visuals in a list UI design.

Primary text

Primary text is the main text element in a list item. It should represent the most important piece of information for your users. After this comes secondary text which usually takes the form of a subtitle and offers a slight elaboration on the primary text.

Metadata

Metadata conveys any type of second-tier information about the list item. Examples of this might be the price of a product in an ecommerce app or website, star ratings on a travel app or simply the item’s order on the list.

Types of list UI design

Single-line list

A single-line list, like the name suggests, has just one line per item. Single-line lists can be very effective in that they provide optimal scannability.

Two-line list

Two-line lists provide a primary and secondary text. These are helpful when you need to go into a little bit more detail about the line item itself.

Guide to list UI design: principles and examples (5)

Three-line list UI design

Three-line list designs allow for both a primary text and secondary text paragraph of two lines. For most list designs, Material Design doesn’t recommend surpassing three lines.

Image list UI design

Image list UI designs usually take the form of a grid of images that share a similar pattern or set of attributes. The images can have a uniform aspect ratio or they can be a variety of different sizes. The latter is called a “quilted image list” and is used to display hierarchy among list items.

Why is list UI design important?

Getting list UI design right is crucial for achieving the optimal UX for you app or website. This is because lists make up a large part of many apps and website UI designs. The way they’re designed can have a huge impact on the usability of your product.

Most apps or websites contain large possible selections of data. Designers have to organize this information so that it’s logically and intuitively ordered. That way, users can easily find what they’re looking for in the UI.

Avoid pogo-sticking with good list UI design

In many cases, the signs of a poorly designed list are evident from two metrics: eye-tracking and the time it takes users to scan and act on the information the list provides. Nielsen Norman Group has conducted eye-tracking gaze plots and found there is a certain phenomenon brought on by badly designed lists called “pogo-sticking”.

Guide to list UI design: principles and examples (6)

Pogo-sticking occurs when either the hierarchy or the subcategory of a list isn’t clear. In other words, when the user cannot find the relevant subcategory, they start clicking on every link to see the resulting screen or subtitles. They then follow up by clicking “back” or they unfilter the category they selected. They proceed to do this with every link or category they see.

Reduce interaction cost and cognitive load

The general goal of a UXer is to provide the most simple user experience possible and that is helped by reducing cognitive load. Ensuring that your list only includes the bare necessities can naturally render your UI design more intuitive. It can also reduce interaction cost.

By creating a situation where your users are required to pogo-stick around your list UI design, you’re automatically bumping up the interaction cost tenfold. Spending adequate time planning your list UI design can help you avoid this and make sure your users get the information they need at first glance.

List UI design: fundamental principles

To start with, you need to decide what type of list is the best fit for your list UI design. Here you need to think about how much information you should convey to your user at first glance and what order it should be in. Why is that important? Because lists are meant to summarize details to optimize scanning.

We recommend using user journey mapping techniques to understand how your user personas might navigate your list UI design to find the information they need.

You also need to know what type of activity your users are trying to achieve. Do they want to memorize a series of items or mark certain tasks as done? This will dictate the type of list you’ll create, in addition to the type of interaction design and visual design your list UI design will incorporate.

Guide to list UI design: principles and examples (8)

Before we think about the type of list UI design to include in our website prototype or mobile app wireframe, we should first take a moment to consider some general principles and how they can help organize information in list format.

Visual design

The first, and perhaps most important set of principles regarding list UI designs are the visuals. A list with a good visual design is scannable, informative and easy on the eyes. Here are a few ways you can make that happen in your list UI design:

Left-aligned content

Nielsen Norman group maintain that the left part of the screen receives the most attention in cultures that read from left to right. Therefore, you should always ensure that the most important information is aligned to the left of the screen.

Deciding on which element of the list item gets this visual priority will help you draw your users’ eyes to the most important parts of the list first.

Font

Once you’ve ranked the order in which information should be displayed, you can use font as a way to guide your users’ attention to important elements.

Guide to list UI design: principles and examples (9)

You can place varying emphasis on the different key attributes of each item. You can achieve this by using different font sizes and weights for each element in the list item, creating a clear hierarchy in the UI design.

White space

One way to make an element within an item stand out in a list UI design is to simply leave it alone – literally. White space is one of the best ways to isolate the important elements in a list item. Doing this draws the user’s attention more easily.

A list, at the end of the day, doesn’t have to be fancy – it’s all about narrowing down choice for your users. And sometimes, less is more!

Consistency

When it comes to improving the scannability of your list UI design, consistency is king. A good list UI design has to have a consistent design all the way through. Otherwise, it doesn’t really serve its function as a list and doesn’t help the user to scan through all the information which is precisely what it’s meant to do.

Dividers

Dividers are great for helping distinguish each item in your list UI design. A great example of a divider would be a separator line. There are two types of separator line: full-bleed and indented.

Guide to list UI design: principles and examples (10)

Full bleed separator lines span the full width of the screen and separate each list item into different sections on the screen.

Material design recommends that you use dividers sparingly. It can quickly lead to a jarring, cluttered effect where every item in the list on top of the other, giving a chaotic and claustrophobic feel.

The indented variety don’t span the full width of the screen. Rather than separating the items into different sections, they merely allow the items to be grouped together but distinguished as being different from each other.

Color scheme

Color can be a powerful tool to enhance the scannability of your list UI design. Using a consistent color scheme can help you differentiate individual elements and improve the readability of the list.

Guide to list UI design: principles and examples (11)

The only rule to keep in mind is that less is more. Use too many colors and this trick could backfire, with no visible contrast. We recommend choosing two main colors and instead alternating between different shades and hues.

Interaction

Interaction is a great way to render your list UI design as intuitive as possible. Applying icons that allow your users to interact with your list, in addition to sorting and filtering options can give your whole website or app a powerful boost in UX.

Filtering and sorting

What better way to make a long list interactive than filtering and sorting? Let’s start with filtering. If you wish to incorporate filters in a list UI design for a website, you have two options:

  1. Displaying the filters in their original location
  2. Having a separate applied filters section.

The guys over at UXPlanet are of the opinion that both work, based on the research they carried out.

The first option works a treat because when a user deselects a filter, they tend to look for the position where they started. This option is best used with a sidebar navigation feature.

Guide to list UI design: principles and examples (12)

The second option is also a great idea. It lets your users know where they are in the filtering process and allows them to easily go back and switch off the filters.

Use back arrow to remove filters. Users tend to understand filtered sections as being like separate pages, rather than a string of events that happens on the same page. Sending them to a different page is a great way to convert users into haters!

When creating a filter for a mobile list UI design, things can get a little more complicated. However, there are a few options available:

  • Slide-over onscreen filtering: creates an overlay that covers some of the search results but reminds the user where they are in the filtering process.
  • Fullscreen filtering: uses an entire screen to select filter options, meaning that the search results are fully visible.
  • Search filtering: lets your users manually pull up an item from a list and acts as a safety net to prevent pogo-sticking if all else fails.
  • Sorting: items alphabetically or by date helps a user find what they need faster and doesn’t require all the busy onscreen options that filtering does.

Expanding and collapsing lists

A popular technique for rendering lists more scannable are the expanding and collapsing list actions. These allow users to expand certain items to reveal more detail and subsequently collapse the item again to get an overview of the list.

You can make each item look expandable or collapsible by using the ▲/▼ icons. However, when doing this, you’ll want to take special care that the relationship between items on the list and their subcategories is always clear.

Icons

Icons are a great way of adding interaction to your list UI design. Here are some icons that let you do this:

  • Checkboxes: let your users mark tasks as done or items acquired
  • The draggable hand icon: demonstrates that your users can re-shuffle items within a list
  • Toggle UIs: let your users choose between two choices that change the list options such as pricing
  • Radio buttons: let your users select one option from a list, blocking out the others

Check out our post on the choice between the radio button vs checkbox, the never-ending debate.

Guide to list UI design: principles and examples (13)

Swiping

Swiping is another interaction you can add and is often used in Material Design applications, such as Gmail for archiving information. You can also use swiping if you’re designing an image or card UI design for a mobile UI. Swiping can allow users to swipe through various groups, either horizontally or vertically.

Web list UI design principles

When it comes to list UI design for website, designers usually have more options to play around with. This is due to the higher screen resolution, providing more screen real estate.

Guide to list UI design: principles and examples (14)

Here are some points to keep in mind when creating your list UI design for a website:

Extra space:

  • Take advantage of the extra screen real estate to create white space. This will help isolate and draw attention to important elements
  • Consider using card or image lists – these work exceptionally well with website UIs and are very responsive
  • Three-line lists work well on a web UI

Discover our guide to UI sketching and see your ideas can take off from a humble piece of paper.

Filters:

  • Use a sidebar filter if possible (we love the sidebar)
  • Show the applied filters in a separate section of the UI if not using a sidebar filter
  • Make sure the back arrow removes filters

Start designing the UI for web and mobile apps with Justinmind. It's Free. Unlimited projects!

Download Free

Guide to list UI design: principles and examples (15)

Mobile list UI design principles

When it comes to mobile list UI design, things can get a little trickier. Due to there being less screen real estate to manipulate, it’s only too easy to create a cramped feel and lose that minimalist touch.

You always want to keep lists as minimalist as possible because scannability is the name of the game!

Guide to list UI design: principles and examples (16)

Here are some points to consider when designing lists for mobile UIs:

Less space:

  • Consider using more single-line and two-line expandable and collapsible lists
  • Icons such as checkboxes and the draggable hand icon work well with touchscreen UIs
  • Use color and font variations to display hierarchy and minimize UI design clutter
  • List items will be closer together so use indented separators for a less cluttered but easily comparable list of items

Filtering and sorting:

  • Slide-over onscreen filtering provides a partial overlay on top of the search results to help keep the user aware of what they’re filtering
  • Fullscreen filtering makes use of the full screen and creates a more focused filtering experience
  • Search filtering works really well, but so do categories. Breaking everything down into a simple landing page of category grids works like a charm when it comes to breaking up long lists into multiple sections for mobile list UI designs
  • Sorting tends to work better with limited UI space as no filter controls need to be displayed

Start designing the UI for web and mobile apps with Justinmind. It's Free. Unlimited projects!

Download Free

Guide to list UI design: principles and examples (17)

Prototyping lists with Justinmind

Did you know that with the Justinmind UI design tool you can prototype a variety of different list designs using data masters? Best of all, you can make them interactive and add any kind of filter you want. Take a look at the following examples:

Data lists

Imagine you want to prototype a contact list. You simply start by creating a new prototype in Justinmind. Then you create a data master. Justinmind’s data masters feature lets you easily display data in list format.

You then simply add fields to your data master such as “Name”, “Address” and “Phone Number” and call your data master “Contact List”.

Guide to list UI design: principles and examples (18)

The only step required after that would be to display the information in your data master in list format, which you can easily do by selecting the Data List Widget and adding your data master to it.

Discover our guide to accessibility design and make sure your designs can be enjoyed by all.

Column headers

Now let’s say you want to allow your users to filter through your list of contacts by order of country phone number. In this case, all you’d have to do is add a column header in order to apply the filter.

All it takes is selecting the row you want to function as the header, then dragging and dropping a select list into the cell just below the text and adding an On Change + Set Value event for your filter. To learn more about this process, check out our tutorial on Filtering a Data List through a column header.

For tips on designing an aesthetically pleasing contact list, check out our post on prototyping a mobile contact list.

5 Cool web list UI design patterns

Travel Xplore

Travel Xplore was a design project to create a list UI design that displays a number of travel destinations on offer. There were a few different ways these destinations could have been displayed, such as image lists or on cards, but this vertical list actually works pretty well.

Guide to list UI design: principles and examples (19)

The designer made good use of the indented separator line and established a clear visual hierarchy for visual elements such as thumbnails, ratings and buttons in the UI design.

Patch

Patch is list UI design created for listing bank deposits. Many web list UI designs often tend to look overloaded, as designers try to take too much advantage of the extra screen space offered at higher resolutions.

Guide to list UI design: principles and examples (20)

But lists like this one keep things nice and simple for the user with a two-line list that naturally draws attention to the most important elements on the screen. UI designs like this are also much more responsive.

Speaking of responsive: check out this quick tutorial on how to design a responsive website prototype in 10 minutes.

Satoshi View

Next up is a cryptocurrency stock website list UI design – Satoshi View. Most cryptanalysis, financial or stock market websites have UIs that literally resemble a headache-inducing soup of icons, figures, and loud clashing colors. Not this one!

Guide to list UI design: principles and examples (21)

This list UI design proves, that whatever a website’s content, there’s always a visually appealing solution out of which a user friendly interface can be created. In this case, we’re faced with a list of cryptocurrencies followed by information such “market cap” and “current price”. Yet it somehow doesn’t seem like so much information.

This web UI list design is a shining example of how great list design can render even complex lists as readable.

CFlow Journal

What better example of a list than a bookkeeping web app? After all, from P/L and financial position statements, to lists of invoices, it’s safe to assume that there are a lot of lists involved in finance, right? And while that might all seem a little boring, this web list UI design actually makes the accounts look like an interesting activity!

Guide to list UI design: principles and examples (22)

All the list items are contained on separate rectangular cards, clearly grouped into sections, such as “previous invoices” and “activity income”. What we particularly like is how they tackled the filters – with a smattering of buttons in the top right corner that indicate the current filter selected, so that the user always stays informed of what’s been filtered.

Ecommerce product dashboard

Finally, for a great example of a single line web list UI design, we’ve chosen this ecommerce product dashboard. The list in question here is are a group of ecourses that the user can select.

Guide to list UI design: principles and examples (23)

On each line, only the bare necessities are conveyed, such as the course name, the type of course, how many places are available and the price. This example demonstrates that, by keeping things simple, you can display many more items on screen than if you decided to go into more detail.

Side note: looking for something new? Discover our guides to trendy takes on UI design skeuomorphic design and neumorphic design.

Start designing the UI for web and mobile apps with Justinmind. It's Free. Unlimited projects!

Download Free

Guide to list UI design: principles and examples (24)

5 Cool mobile list UI design patterns

Tickets wish list

This wish list page was a project done for a ticket wallet app. On this page the user can accumulate a list of tickets they want to buy in the future.

Guide to list UI design: principles and examples (25)

We really like the simple pastel design of this UI, in addition to the single-line list. The designer made great use of the limited mobile UI space available and included some nice visuals, along with all the information needed at a glance, such as ticket prices and amounts saved up.

For tips and inspiration on how to create a wish list UI design, check out our post on prototyping a wish list app!

They also provided an option to expand or collapse certain items in the list with a “view more” button. Learn more about button states for a more complete overview.

Category listing - filter

This category listing page shows a nice grid arrangement of cards with icons as an alternative to the vertical list.

Guide to list UI design: principles and examples (26)

The icons and descriptions provide a more visually appealing – not to mention scannable – list UI design. It’s also a clever way of letting the user apply their own filters immediately, by letting them choose the category they want. This method eliminates having to provide filter controls.

Clothes wish list

Here’s another wish list design to inspire you. We chose this UI design because it’s a great example of how you can make image lists work on a mobile UI.

Guide to list UI design: principles and examples (27)

The designer in this case denotes each category clearly with large bold font, followed by groupings of images for that category, all related to clothing items within that category. We also like the clear hierarchy created with the use of different aspect ratios for the images.

Travel Itinerary

This holiday itinerary app is a great example of how to use a two-line list with full-bleed separator lines to create a list UI design that’s easy to scan.

To counter the lack of space caused by using a two-line format, the designer chose to go with full-bleed separator lines – and it worked!

Guide to list UI design: principles and examples (28)

The use of icons on the left of each line draws the eye in to the activity, with the primary text being the name of each activity itself, followed by the secondary text which contains the practical details.

The fact that the content is centered on each line helps prevent that cluttered, claustrophobic feel we mentioned earlier.

Discover our guide to game UI and start creating products that your users will greatly enjoy.

Todo List App

A list about lists wouldn’t be complete without the traditional to-do list! This example of a todo list shows how simplicity and minimalism can help get the job done.

Guide to list UI design: principles and examples (29)

The designer made great use of a uniform color scheme to differentiate clickable and non-clickable elements. They also used white space wisely to guide the eye to important elements, such as the current task, then the time each task is to be completed at.

Final thoughts

If you’re going to include a list in your UI design, which is very probable, you need to think it through carefully. Lists can be a make-or-break when it comes to UI design. They can render your UI design as usable or unusable.

Lists, by definition, should be easy to read and scan. The amount of lines each item in your list should have largely depends on the purpose of your UI design, but you should always keep it to the minimum possible. Each element in a list item should be relevant and follow a clear hierarchy. Try to encourage intuitive interaction where possible.

We hope this guide has given you some food for thought for your next list UI design. Happy listing! Looking for design something more data-heavy? Try your hand at dashboard design.

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS

Download Free

Joseph DownsIn-house UX copy-slinger, foodie and classic motoring enthusiast
Guide to list UI design: principles and examples (2024)

FAQs

What are the key principles in UI design? ›

The UI design principals are:

Place users in control of the interface. Make it comfortable to interact with a product. Reduce cognitive load. Make user interfaces consistent.

What are the six principles of designing a UI project? ›

6 principles of effective UI design
  • Clarity. In UI design, the term clarity means using recognizable features and elements that are intuitive to interact with. ...
  • Consistency. Consistency is essential in design for building trust. ...
  • User Control. ...
  • Comfort. ...
  • Ease of Use. ...
  • Accessibility.

What is UI design with example? ›

User interface (UI) design is the process designers use to build interfaces in software or computerized devices, focusing on looks or style. Designers aim to create interfaces which users find easy to use and pleasurable. UI design refers to graphical user interfaces and other forms—e.g., voice-controlled interfaces.

What are UI fundamentals? ›

Predictable and seamless elements, such as buttons. Effective navigation, such as clearly labeled icons. Frictionless and invisible interactions. Purposeful and clear tasks or goals.

How many UI design principles are present? ›

6 key UI design principles.

How can I improve my UI design skills? ›

How to become a better UI designer: 9 expert tips
  1. Get to grips with UX.
  2. Design for inclusivity and accessibility.
  3. Explore (and learn from) different design systems.
  4. Practice as much as possible.
  5. Seek out and embrace feedback.
  6. Experiment with different tools.
  7. Take inspiration from UI Design and tech trends.
30 May 2022

What is a UI UX design principle? ›

The Interaction Design Foundation defines UX principles as “fundamental points of advice for making easy-to-use, pleasurable designs as we select, create and organize elements and features in our work.” Design principles, therefore, form the heart and soul of UX design.

How do I create a UI design document? ›

Start by dividing the product into 10-30 major areas or workflows (e.g. "dashboard" or "onboarding") depending on the scope of work. Then, one-by-one, write a pitch for each that explains why and how it should be created, with considerations for both design and development.

How do you create better UI components? ›

Best Practices for Designing an Interface
  1. Keep the interface simple. ...
  2. Create consistency and use common UI elements. ...
  3. Be purposeful in page layout. ...
  4. Strategically use color and texture. ...
  5. Use typography to create hierarchy and clarity. ...
  6. Make sure that the system communicates what's happening. ...
  7. Think about the defaults.

What are Norman's 7 principles? ›

Norman's Seven Principles

Use both knowledge in world & knowledge in the head. Simplify task structures. Make things visible. Get the mapping right (User mental model = Conceptual model = Designed model). Convert constrains into advantages (Physical constraints, Cultural constraints, Technological constraints).

What are the 4 types of user interfaces? ›

There are four prevalent types of user interface and each has a range of advantages and disadvantages:
  • Command Line Interface.
  • Menu-driven Interface.
  • Graphical User Interface.
  • Touchscreen Graphical User Interface.
22 Sept 2014

What are the 10 heuristics? ›

Here are the 10 Nielsen heuristics:
  • Visibility of system status;
  • Match between 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;
29 Jun 2022

What is UI design skills? ›

User interface (UI) design focuses on the appearance and usability of a website, mobile application, software program and other interactive platforms. To succeed as a UI designer, it's important to develop your hard and soft skills, including technical, teamwork and interpersonal skills.

Which software is best for UI design? ›

Overviews Of The 10 Best UI Design Software Solutions
  • Balsamiq. ...
  • Proto.io. ...
  • ProtoPie. ...
  • Figma. ...
  • Webflow. Best for designing websites with a visual canvas. ...
  • Sketch. Best for a fully-collaborative design process. ...
  • Adobe XD. Great for creating highly-realistic UI/UX designs. ...
  • Bubble. Best for no-code web app design.
24 May 2022

What software is used for UI design? ›

Adobe XD is considered by many as the go-to design tool. It's fast, it's powerful, and there's not a lot you can't do with it! From early ideation and low-fidelity designs, right through to impressive animations and true-to-life prototypes, Adobe XD will see you through the entire UX and UI design process.

What is UI structure? ›

To clarify the difference, UX design is the internal structure of the interface, the logic of user interaction, and functionality. UI design includes colors, typography, illustrations, animations, and other features that users will see.

What are the two types of user interface? ›

Types of user interfaces

graphical user interface (GUI) command line interface (CLI)

What are the steps in user interface design? ›

6 Steps Of UX/UI Design Process
  • Step 1: Understand your customers and their values.
  • Step 2: Research the competition.
  • Step 3: Sketch out your product.
  • Step 4: Design your product.
  • Step 5: Implement the solution onto a webpage.
  • Step 6: Evaluate the work and improve it.
13 Aug 2019

What is the golden rule of design? ›

A good interface should be designed to avoid errors as much as possible. However, if something goes wrong, your system should make it easy for users to understand and resolve the problem. Simple ways to deal with errors include displaying clear error notifications and descriptive hints to resolve the problem.

Does UI design require coding? ›

If you are considering getting into UX/UI design, you're probably wondering the same thing. The short answer is no. UX design does not require coding. Nonetheless, there are occasions where learning to code can give you a leg up on the competition.

Is UI design hard? ›

Learning to be a UI designer is not easy. Trust me, I've been there! There are specific skills and traits that will make your journey into this career go more smoothly and I've listed a few of them for you below.

How long does it take to get good at UI design? ›

You can learn the skills needed to become a UI Designer in as little as 10 weeks, which is why it has become increasingly common for aspiring Designers to attend UI design courses and bootcamps.

What is the difference between UI and UX? ›

UI refers to the screens, buttons, toggles, icons, and other visual elements that you interact with when using a website, app, or other electronic device. UX refers to the entire interaction you have with a product, including how you feel about the interaction.

What are the 5 principles of UX? ›

Summary: The principles of scale, visual hierarchy, balance, contrast, and Gestalt not only create beautiful designs, but also increase usability when applied correctly.

How many principles does UX have? ›

There you have it: 10 fundamental principles and laws in UX. Now that you understand them, you'll start noticing them at work in the world around you. They'll change the way you see and understand so many products and experiences—and even better, they'll add depth and quality to the work you do as a UX designer!

Which of the following are good rules practices for user interface UI design for websites? ›

More videos on YouTube
  • Make Everything the User Needs Readily Accessible. ...
  • Be Consistent. ...
  • Be Clear. ...
  • Give Feedback. ...
  • Use Recognition, Not Recall. ...
  • Choose How People Will Interact First. ...
  • Follow Design Standards.
16 Sept 2022

What is the rule of thumb for organizing content within an interface? ›

The rule of thumb here is that if an element is more important than another, it should be of a higher visual weight. This makes it easy for a user to quickly skim the page and distinguish between the important and less important information.

What is GUI design? ›

The GUI (/ˌdʒiːjuːˈaɪ/ JEE-yoo-EYE or /ˈɡuːi/ GOO-ee), graphical user interface, is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, instead of text-based UIs, typed command labels or text navigation.

What is UI design medium? ›

UI Design generally refers to the visual elements of a product or experience — the look and feel, the presentation and the interactivity of a product. It's the interface that the user interacts with and (hopefully) makes the experience aesthetically pleasing.

What is the golden rule of design? ›

A good interface should be designed to avoid errors as much as possible. However, if something goes wrong, your system should make it easy for users to understand and resolve the problem. Simple ways to deal with errors include displaying clear error notifications and descriptive hints to resolve the problem.

What are the 4 types of user interfaces? ›

There are four prevalent types of user interface and each has a range of advantages and disadvantages:
  • Command Line Interface.
  • Menu-driven Interface.
  • Graphical User Interface.
  • Touchscreen Graphical User Interface.
22 Sept 2014

How do I present my UI design? ›

11 tips for presenting your UI/UX designs to non‑designers
  1. Before you do anything: provide context on the problem(s) you are solving! ...
  2. Make it clear who has the problem you're solving. ...
  3. Make it clear what your solution(s) allow people to do. ...
  4. Communicate the constraints. ...
  5. Explain UX jargon. ...
  6. Provide a format for feedback.
22 Jul 2019

What is heuristic design? ›

A heuristic is a fast and practical way to solve problems or make decisions. In user experience (UX) design, professional evaluators use heuristic evaluation to systematically determine a design's/product's usability. As experts, they go through a checklist of criteria to find flaws which design teams overlooked.

What is the key to a good user interface? ›

The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging. Create consistency and use common UI elements. By using common elements in your UI, users feel more comfortable and are able to get things done more quickly.

What are some basic rules that should not be broken when designing a user interface? ›

6 UI Rules You Should Never Break
  • Back and forth navigation options. Rely on cognitive design theory while deciding user interface elements for your system. ...
  • Make it consistent. ...
  • Leverage colors to project similar functions on a screen. ...
  • Use effective language. ...
  • Make it accessible to all. ...
  • Consider all devices.

What software is used for UI design? ›

Adobe XD is considered by many as the go-to design tool. It's fast, it's powerful, and there's not a lot you can't do with it! From early ideation and low-fidelity designs, right through to impressive animations and true-to-life prototypes, Adobe XD will see you through the entire UX and UI design process.

What is difference between GUI and UI? ›

GUI is "graphical user interface" and UI is just "user interface." GUI is a subset of UI. UI can include non-graphical interfaces such as screen readers or command line interfaces which aren't considered GUI. Also, the opposite of GUI is CLI - Command Line Interface.

What are the two types of user interface? ›

Types of user interfaces

graphical user interface (GUI) command line interface (CLI)

What does UI UX have in common? ›

UX and UI design are related but not exactly the same. UX design involves managing the user journey as they interact with a product or service, while UI design focuses on the actual construction of that product or service's interface. UI design is usually considered part of the UX design process.

Why does ordinary design almost always win? ›

Because ordinary design is both easy to the eyes and feels instantly familiar. People love familiar design because it makes them feel comfortable. Another reason ordinary design can be better than distinctive design is simply that it can work in various contexts.

Top Articles
Latest Posts
Recommended Articles
Article information

Author: Frankie Dare

Last Updated:

Views: 5860

Rating: 4.2 / 5 (53 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Frankie Dare

Birthday: 2000-01-27

Address: Suite 313 45115 Caridad Freeway, Port Barabaraville, MS 66713

Phone: +3769542039359

Job: Sales Manager

Hobby: Baton twirling, Stand-up comedy, Leather crafting, Rugby, tabletop games, Jigsaw puzzles, Air sports

Introduction: My name is Frankie Dare, I am a funny, beautiful, proud, fair, pleasant, cheerful, enthusiastic person who loves writing and wants to share my knowledge and understanding with you.