Questions tagged [design-patterns]

Reusable solutions for commonly occurring problems in user interface and user experience design.

Filter by
Sorted by
Tagged with
0 votes
1 answer
33 views

Alignment of "view all" button in a list

I'm designing a dashboard to allow users get a quick overview of updates and usage. So on the dashboard, there would be different widgets; Some of these widgets would be a short summary in a list ...
  • 1
3 votes
2 answers
208 views

What's the reason behind UX/UI Design to use (9+) and not showing exact amount instead?

I was presenting some design work for our teams new bookmark system where you can effectively bookmark your favorite games and in the design we show (9+) if the user has bookmarked more than 9 items ...
  • 133
0 votes
1 answer
52 views

How should I incorporate interactive 3D designs in a responsive website?

Description I am currently designing a website where, for the hero section in the desktop version, half of the page is used for the company's value proposition and call to action, and the other half ...
0 votes
2 answers
64 views

How can I make this habit tracker interface more visually interesting? [closed]

I'm designing an interface for a habit tracker app where a user can view a list of their habits for the day and tap a button to mark a habit as complete. I think the habit containers (meditate, ...
0 votes
0 answers
58 views

product detail page - sticky right column?

It seems to me that for the desktop view of a product detail page, it makes perfect sense to make the right column (the one containing the critical, above the fold info) sticky... assuming those ...
  • 181
0 votes
1 answer
74 views

Double grid approach to display related data

This is my problem: when the user selects a record from the first table, all parameters relevant to the selected h2h column must be displayed below the table. When the user selects the second row from ...
  • 23
1 vote
2 answers
152 views

Why Slack/Discord/Other messengers places menu for message at the right side?

In Slack/Discord/Element/Gitter each part of the message is arranged on the left: Avatar, username, reactions, the text of the message itself (most texts are short). But each message has a menu: "...
1 vote
2 answers
91 views

How should you organize 3 charts when two of them are the same type? (i.e. 2 bar graph, 1 line graph)

so I am designing a dashboard and on this dashboard there are going to be 3 graphs, 2 of them are bar graphs and one of them is a line graph. The bar graphs have similar x axis, but different y axis. ...
  • 325
0 votes
2 answers
40 views

Which editing options is the best on sys admin application

I m testing new consept of dashboard aplication. Does anyone know which approach is better Alt 1 or Alt2 and if you can argue through some examples on Web / or give me some advice? What is simpliest ...
  • 1
1 vote
1 answer
105 views

Placeholder Profile Photos or Initials

Currently, I am working on how to increase engagement with profiles that have not set up a profile image. We currently have a person as a placeholder image (the common genderless placeholder photo), ...
  • 13
1 vote
1 answer
115 views

Do non tech folks know the difference between search and keyword filter?

I have an app (direct to consumer) with search and advanced filters. But in some parts, it loads a list and has the filter by keyword functionality, so the user doesn't need to scroll. I wonder if I ...
1 vote
0 answers
44 views

The best way to show one-time action on a modal?

I'm working on a feature where the user is going to attach warehouses to their company branches. The process has two steps (input general information and define the coverage area of said warehouse). ...
0 votes
1 answer
49 views

How do I design a state machine?

I am trying to design a data catalogue page that shows the state of the data (draft, pending publish, published, pending archive, archived). When users add their data to the catalogue via a form, they ...
0 votes
2 answers
59 views

Filtering and Sorting a Table that has more than 1 row per user

Imagine if... you had 6 users. They all drove cars. The table shows which cars they drive and how many miles they have driven each car. It also shows a flag which is just a way to tag a user that is ...
1 vote
0 answers
36 views

What is the repeated, blurred image background called?

I have a card component with a photo. I don't want any portion of photos to be cut off, but this means narrow/vertical photos will have empty space to the sides. I want to use that blur tiling often ...
  • 123
2 votes
3 answers
150 views

Checkbox dirty state

I would like to highlight any changes made to a long list of form checkboxes. That way the user can review all the changes made (whether checked or unchecked) before saving. Are there any examples for ...
0 votes
0 answers
66 views

Implementing design system (pattern library) in working complex SAAS product - best way to do it?

CURRENT SITUATION: Developers are using Angular Material library for building a desktop SAAS application. PROBLEM: Solutions are old, UI is inconsistent, various paddings, increasing UX debt, etc. ...
0 votes
1 answer
74 views

How to communicate that an item can no longer be deleted

Scenario: Imagine a kanban system and some tickets in it (Like Jira, Trello, etc.) The user can add various information to a ticket, such as assignment, description, checklists, etc. There is a time ...
2 votes
0 answers
60 views

Is there a better pattern for 'nested' UI select controls [Users can use THEESE or THIS]

Is there a good UI pattern for this sort of specific select case? There is a search field for labels/tags. The user has 3 options they can select from to refine their search. These options are grouped ...
0 votes
4 answers
150 views

How do you find inspiration without copying someone's work [closed]

Say you want to design a mobile app and the like a few stuff about some design choices and decisions on similar apps designed... You'd like that in your app design wouldn't that be copying
  • 9
0 votes
3 answers
147 views

Accessibility of Icon Buttons?

I have a challenge: I'm working on a project and I used icon buttons. Someone said icon buttons are not accessible because they don't have labels. ARIA and some HTML techniques can achieve ...
0 votes
2 answers
50 views

What's the best way or practice to align the 3 lines at the bottom like the 3 ones at the top

I have too long text that I don't want to shorten or get rid of and it gets returned to the next line (Avis des tous les clients d'Abricibuis.www.Abricibuis.com) What's the best practice to align the ...
1 vote
3 answers
116 views

Multiple choice dropdown - when items are selected they are moved to the top of the dropdown

Does anyone know if moving selected choices to the top of the multiple-choice dropdown is a good design pattern? This would prevent users to scroll through a lot of content to preview active fields. ...
0 votes
0 answers
60 views

EDIT / RENAME VIEW - what's best approach - keep it together under edit or separate options?

Currently, I design edit flow for saved view (filters that allow being saved under "saved view"). The filter bar consists of 4 dropdowns (multiple and single choice), and radio buttons. The ...
0 votes
1 answer
51 views

What would entail hiding the price for some products on Amazon?

I've noticed that when I search on Amazon for a product, there usually will be some results where the price will not be visible until you click on the product and then again click on "See all ...
  • 191
0 votes
0 answers
24 views

Design patterns to handle scenarios where there is no response from the user

Most design patterns (used on desktop applications) for communication or passing information to users are based on the assumption that there is some response or reply from the recipient of the message ...
  • 25.7k
1 vote
3 answers
280 views

Editing large nested content

I'm looking for a useful editing UX for large, tree-structured content like this: Project 1 - Step 1 - Explanation 1 - Explanation 2: could be long paragraphs, too. - E2.1: Lots of ...
  • 63
0 votes
0 answers
21 views

Should buttons' position/placement be standardised across the whole platform?

I know that there have been threads about button placement, however what I'm asking is not a specific case. Rather, I would like to know regardless of contexts, should button placements be ...
1 vote
3 answers
198 views

How to handle conditional dropdown lists

My form has two fields. The first one is a dropdown list displaying a list of categories, and the second one is a data list that displays a list of users. The data list options depend on the category ...
  • 23
2 votes
1 answer
88 views

How to avoid ambiguous interactions in messaging apps?

One of the very basic and common interaction design patterns in messaging apps (e.g. WhatsApp, LINE, Facebook Messenger) is to provide micro-interactions associated with the message composition and ...
  • 25.7k
0 votes
3 answers
81 views

How to indicate a group of required fields and single required fields in the same flow?

I would like to hear your opinion on the matter. We do have a set-up wizard like that. Let's say in step one we do have dropdowns with values from 0 to 10 and 0 being the default value. The user can ...
46 votes
9 answers
10k views

Is it good practice to allow users to navigate simply by hovering on a menu item without clicking?

A pattern I have noticed recently on some (desktop) websites is that users can navigate simply by hovering on menu items. While this is more efficient (fewer clicks) it feels unexpected and therefore ...
2 votes
1 answer
146 views

What to consider when designing UX for smartwatch and wearables?

I've designed for the desktop, tablet and mobile. But have no experience designing for smartwatches. What are the considerations I should be making when designing for smartwatches? e.g. users can use ...
  • 10.5k
0 votes
2 answers
789 views

UX guidelines for placing edit buttons?

I am working on finding the best placement for the edit button for a company website already in existence (used for internal staff & clients). This is a review page after a Client has filled out ...
0 votes
1 answer
55 views

Editing information displayed in page header

I have a page header which looks like this example from Ant Design: I need a way to edit the information displayed in the header. Initially I thought of having an Edit button in the header for that ...
  • 649
2 votes
1 answer
95 views

What should we call the mouse-over heading link pattern, and where is it best documented?

I want to be able to refer to the UI pattern where each heading / h-tag on the page is automatically turned into an appropriately named link, and hovering on the heading reveals an icon that can be ...
  • 121
1 vote
3 answers
127 views

Where should I redirect after filling a "creation" form?

HI hope y'all doing well I have an app where users need to create different items. There's a page that displays all the items created that as a "Create new..." button. The user's path: ...
  • 23
2 votes
2 answers
323 views

What is "neo-modern interactive" design?

I was going through a Google tutorial on building UI experiences with Jetpack Compose when I came across an odd aside: Tip: neo-modern interactive is probably a design trend After a web search, I'm ...
  • 121
0 votes
1 answer
53 views

Communicating the price on a single service, single price website

Having a pricing page or section that follows conventional pricing table design patterns seems to be a best practice for websites offering different services. If a website offers only a single service ...
  • 103
1 vote
1 answer
147 views

UI patterns listed by type of UI design case

Most UI pattern libraries list patterns by UI element - e.g. "footer UI patterns", "scroller UI patterns", "button UI patterns", etc. Do you know a library where patterns ...
  • 316
0 votes
2 answers
78 views

design decision behind buttons

What is the design decision behind the buttons 'Open in app' and 'get started'? In the image below we see two buttons or clickable links one has a boundary and another does not. But what thought ...
3 votes
2 answers
453 views

What is the name for the design pattern of large numbers to convey statistics?

Usually presented on website homepages, the purpose of this design pattern is to present a quick top-level overview of the company in numbers, aiming to convert visitors by establishing credibility ...
0 votes
1 answer
137 views

Is the 'Quick Exit' feature commonly applied to websites with sensitive information?

A developer pointed out this feature that was implemented on a website that I thought really understood the user experience at a high level, and showed that catering for the user experience doesn't ...
  • 25.7k
2 votes
1 answer
172 views

How should users be notified of license expiration and of renewal?

This is a two part question. Licence Expiration: When a platform license expires, users are logged out and everyone sees the paywall. How should users be notified that this forced log out is about to ...
  • 110
1 vote
1 answer
140 views

What is this stepped design/component called?

I search for flow builder or sequence but can't seem to find references on google. This is the layout:
  • 123
1 vote
2 answers
122 views

Improve the current UI library or build a new one?

I recently joined a company with a small team but not a startup. I'm working on a CRM SaaS product, which has a few years, but it's not very sophisticated (UX and UI wise). When they started to build ...
  • 11
0 votes
1 answer
275 views

Which option is better for read only mode?

I have an Angular application where I have used mat-form fields (Material components) to build the forms. Here I am having a requirement to implement a read only mode. I hope disabling all mat form ...
  • 23
0 votes
2 answers
174 views

Is a good user experience to display actions on the top of the screen on the web?

Navigation on the top of the screen is common on the web. To add actions like "Edit", "See details", "Copy" in the navbar is more specific on the desktop. Fluent UI, ...
1 vote
2 answers
89 views

How can I concisely present lists in table cells?

I am presenting data in a table. One of the columns will contain list data. The length of the list will generally be around 1-4 entries. These lists will have entries looking like property-comparison-...
  • 111
0 votes
1 answer
71 views

How to "swipe right" between two people given information density?

I'm not a UX designer, I'm a programmer. So please be patient with me :) So we're working on a dating app that learns what features a user likes in other people. We're struggling with designing the '...

1
2 3 4 5
19