Questions tagged [design-patterns]
Reusable solutions for commonly occurring problems in user interface and user experience design.
954
questions
1
vote
0
answers
34
views
Feedback on a Error Summary
There's a use case where we plan on having an error summary to describe better the errors they might have on a form. The documentation on the UK Government site is well-written and covers most ...
- 111
2
votes
0
answers
116
views
Does this pattern have a name?
I just came to a very known website that I found pretty weird and confusing because of its onload behavior. You can see it at https://wetransfer.com and what I mean is the image below:
Just in case ...
- 37.3k
2
votes
3
answers
133
views
What type of design pattern to use to toggle list actions?
In the design draft pictured below, you can see a number of events in a list. Users reviewing this list want to be able to add events to other lists: a watchlist or send list -- or both. They also ...
- 121
2
votes
1
answer
57
views
Seeking Help with a UI Pattern for Segment Selection in Analytical System
My team and I are currently working on developing an analytical system that employs a segment-based filtering mechanism. In essence, this system shares similarities with Google Analytics, where ...
- 21
1
vote
1
answer
119
views
Should I include sold out items?
I'm working on an e-commerce site that doesn't have many products (actually there are only 5). These products are high quality and quite expensive.
Now the most desirable product (the 2nd most ...
- 37.3k
2
votes
2
answers
83
views
Keeping the text handle visible at all times when in text editing mode on mobile devices, any accessibility issues?
There is a very interesting article on the 'invisible' problem of editing text on mobile that highlights the lack of novel and tailored UI design patterns for text editing.
One of the really ...
- 26.7k
2
votes
1
answer
85
views
Use of T menus for text editing in mobile
There is a very interesting article on the 'invisible' problem of editing text on mobile that highlights the lack of novel and tailored UI design patterns for text editing.
In particular, the idea of ...
- 26.7k
0
votes
0
answers
29
views
Looking for library of resources on real product's design, Information Architecture, etc
For my current project, I am looking for inspiration related to how different digital products (web applications, mobile apps) are organized:
navigation + menu structure, Information Architecture
So ...
- 450
0
votes
3
answers
92
views
Stepper - max. item count
I currently have an annoying discussion with one of the business guys as he wants to turn a freely configurable tool into a stepper. First of all the tool don't have mandatory steps, it's more like a ...
- 1
0
votes
1
answer
69
views
Components in graph based UI with more complex interactions
Something that I noticed has become a feature of complex no-code software applications is the use of graph-like interfaces with more complex interactions such as the Unreal Engine 5 user interface.
I ...
- 26.7k
0
votes
0
answers
25
views
What is the best UI element for selecting OPTION 1, OPTION 2 or NONE? [duplicate]
I am designing a very long form with around 40% of fields being a dropdown with options:
[NOTHING SELECTED]
Enabled (On / True)
Disabled (Off / False)
The [NOTHING SELECTED] option is important, ...
- 11
1
vote
1
answer
125
views
Struggling to make an accessible data table with clickable rows!
We're currently working on making our data table accessible. Our main concern is the whole clickable row that triggers a side sheet. The entire row is clickable, and a part of its content may be ...
4
votes
3
answers
247
views
Show included dates in a matrix/table
I’m stuck on that problem since last friday.
I work for a white-label company. My task here is to display multiple date ranges concerning cancellation fees based on the number of days before the ...
- 41
2
votes
1
answer
149
views
UI: Why not negative elevations?
Since Material Design came to the surface, we "learned" to design according to 3D planes based on the sheets metaphor. This replaced flat design, which in turn replaced skeuomorphic design.
...
- 37.3k
0
votes
2
answers
84
views
how to make card with more detail [closed]
How can I display all the information on this blood donation request card without cluttering the card's visibility on Stack UX? Additionally, I have a long text that describes the user's blood need, ...
0
votes
3
answers
102
views
Should "primary" buttons always perform an action?
I have 2 buttons, one is only to open a menu below and the other is to navigate to the view to create a new employee. I recently read an article where they say primary buttons should only be for ...
- 1
5
votes
2
answers
3k
views
Design Patterns - like WYSIWYG
We have seen multiple applications using WYSIWYG.Eg: MS office applications, Adobe Photoshop, Illustrator and so on.
Recently I came across Miro and started using it extensively. What does the Layout ...
- 1,114
0
votes
2
answers
104
views
Problems with UI UX design for grid elements
i am facing a problem with my grid elements, the design is made to look good when the grid element is filled with long information, but it looks empty and filled with lots of white space when there is ...
2
votes
1
answer
78
views
What is the name of this 'recommendation smorgasbord' UX pattern?
Here we see the main landing page of a food delivery app. The page is crammed full of recommendations; the user is presented with several different "channels" of recommendations as well as ...
- 121
1
vote
3
answers
138
views
Is it a good practice to display only one tab
Working on an experience where there are multiple tabs that have forms in them, but they show up only if a user has selected to fill them. There is one form and thus tab by default. Is it a good ...
- 1,013
0
votes
2
answers
71
views
Confirm Dialog after swipe to delete
I am building an application where I have a vertical list with cards and I want to delete a single item from the list by swiping left. Nothing wrong with this, right?
Well, these items are "...
- 1
0
votes
1
answer
55
views
LED blink pattern on Boot - Any best practices for UX?
I have an embedded device. During the boot process, the only feedback the user receives comes from a programmable RGB LED. That is, I am able to blink, fade, turn on/off etc. The whole boot process ...
- 3
11
votes
2
answers
1k
views
File tree expander arrow directions
Is there any explanation on why the expanded node/folder has an arrow pointing down and collapsed pointing to the right?
My guess, an arrow pointing down directs user down to the content of that node. ...
- 211
5
votes
1
answer
123
views
Why does "jump link" pattern not copy?
I am asking this question as a user. I have used several websites with the "jump link" feature, and after clicking on the button I go somewhere else and press Ctrl+V only to find out that ...
- 153
0
votes
2
answers
224
views
Design intended to discourage certain actions
I call it negative design, it's sort of like hostile design, without the social nonsense attached. I don't know what it's called in UX or UI terms though, I'm sure it isn't negative design.
A good ...
- 1,674
1
vote
1
answer
84
views
Examples of label/highlight color pickers
I'm looking for application examples where the user can select a color for a label/tag/highlight, choosing both the background color and foreground color. Gmail provides a two-stage UI for this with ...
- 11
1
vote
1
answer
74
views
How to display 3 nested content in an edtech platform
The learner in the edtech platform are having issues in accessing this nested structure, which is currently available on click. They want a single area where they can access this structure. I don't ...
-1
votes
1
answer
121
views
How should a multiple choice form response behave in a web UI chatbot?
I have a wireframe for a chatbot that includes a web form with multiple choice (radio selection). It's essentially a quiz; the chatbot asks a question with one possible response, then, after ...
- 853
3
votes
3
answers
326
views
What's the best way to name a toggle switch label?
I'm creating a section in an app that includes a toggle switch. Initially, I used the same name as the section for the toggle label, but I started wondering if that might be too repetitive for the ...
1
vote
1
answer
516
views
What are best practices in form element color vs background color? Should they be different?
I'm designing forms for healthcare applications. In our team there are some different opinions which of the designs below is the best. It's all about colors.
There are rough 3 options
Form elements ...
- 101
1
vote
1
answer
39
views
Need help for Svg-typed-Info section
I'm currently trying to create an SVG image for my GitHub readme's top. This image would include a profile for the user, a few links for social networks or similar sites to post(pinned), and some ...
1
vote
1
answer
108
views
Can UI design patterns be patented?
Just like any other product innovations safeguarded with patents, are there any provisions for UX design patterns to be patented?
Does anyone know of any research related to design patterns?
- 53
3
votes
3
answers
816
views
What can be the strategy to build a Design System?
I often wonder whether it should be a component first approach or what exactly should be the strategy to build a design system.
- 53
0
votes
1
answer
67
views
Modal or Non Modal functionality on UX Stack exchange portal - Behaviour Confusion
I was going through the profile section of the stack exchange site today and i found an interesting behaviour of modal window.
As far as what I have observed in various articles and design systems
...
- 1,114
0
votes
1
answer
217
views
Most user friendly way to select a time slot when booking a table
I'm designing the table reservation process for a website with multiple restaurants.
After selecting the day, the user has to select the time of the reservation. The restaurants have multiple shifts (...
- 317
1
vote
1
answer
66
views
Help me identify a formal name for the "workspace pattern"
I'm trying to find if there is a formal description of what I've tried to call the "workspace pattern", seen in apps like Figma, Canva, Notion, etc.
In this pattern, users to start out on ...
- 11
0
votes
1
answer
138
views
Is this navigation pattern a good idea?
I have noticed the following navigation pattern recently and am wondering if this is a "good" pattern in your experience. - Can you point to any usability research about the pattern?
It ...
- 7,294
0
votes
4
answers
4k
views
What is the best method to choose between two options in UI?
What is the best method to choose between two options - toggle, dropdown, radio or segmented button?
For example, the two options I have are 1. horizontal 2. vertical They are mutually exclusive.
Eg:
- 41
1
vote
3
answers
133
views
What to do with important information that disrupts the flow of the design?
Quite recently, we redesigned our whole application. FYI, below you'll see the old and the new design:
Old:
New:
Very short summary of what you'll see:
The top toolbar shows all the actions that ...
- 111
0
votes
1
answer
59
views
Should a feature be made available as a toggle button (related: Feature Flags)?
I'm designing a new feature.
It's been proposed that we make this feature a toggle that the merchant can turn on/off at their discretion.
I’m curious to know if features should be made as a toggle.
- 1
0
votes
1
answer
129
views
Displaying two column data grid
In my recent application I have to design and implement a data grid which will be having only two columns. This actually use as matrix for reference purposes.
User behavior is like
Railcar operators ...
- 27
19
votes
3
answers
4k
views
What's a good way to display settings that can be configured from both "directions"?
For a part of configuration, we need to allow the user to get a quick overview AND the ability to quickly set user-groups and their permissions, from both directions.
Meaning:
The user should be able ...
- 1,069
0
votes
1
answer
322
views
Do you really need a close button for a dialog to be accessible?
For example: Apple Books
When you create a note, the note doesn't have a close button, you click outside and it closes. If you delete the content, the note is automatically deleted. It doesn't have ...
- 853
0
votes
2
answers
240
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
392
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
90
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 ...
- 101
0
votes
2
answers
85
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
1
answer
174
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 ...
- 27
1
vote
2
answers
188
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: "...
- 111
1
vote
2
answers
199
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. ...
- 1,136