Questions tagged [design-patterns]

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

Filter by
Sorted by
Tagged with
2
votes
2answers
82 views

Forms in natural language

I would like to know the best UX pattern for implementing such forms. This will be used to setup the discount of a particular hotel. The existing swing UI is designed in narrative forms and I am ...
1
vote
1answer
58 views

Is it easier for the user to have all the options at a glance?

I am working on an internal webapp where we ask users about very different issues. Users have the option of not answering, but now we want to know if they really don't answer because they don't ...
24
votes
5answers
5k views

What is better: to have a modal open instantly and then load its contents, or to load its contents and then open it?

Let's say you have a button. When you click it a GET request is fired for some data (for this example assume that the data cannot be prefetched). Then a modal opens and displays that data in a pretty ...
2
votes
1answer
62 views

Best practices for “show password” functionality

In a mobile app context, when the user is presented with a dialog specifically asking for a password, what are the best practices for allowing the user to show the password while entering it into the ...
0
votes
2answers
58 views

Apply theme customization on a financial app [closed]

I am designing a UI design for a financial app, can a user apply different themes to change between colors of the UI, so what themes are best suited for this feature?
0
votes
1answer
47 views

How to represent nested If-Else blocks in documentation?

I want to document a process that has some nested If-Else decision steps. The documentation must be printable, so I don't have a lot of space for proper left indentation to represent the current level ...
1
vote
0answers
21 views

Google Forms with Interactive Passage Design?

I'm currently trying to design an editor for an application where quiz questions are linked to specific parts of a passage. This editor is essentially for people to create these type of special ...
2
votes
1answer
31 views

Display dates for a long period on the graph

I'm working on an app where I need to show a graphs for different period of time. The problem is that when I'm picking long periods like a 5 or 6 months, the labels for days are all squished together ...
1
vote
1answer
31 views

How to handle data addition in data grid when data is sorted

I have data grid in application which has pagination and the latest added record is added on top. If the data is already sorted on a column and another record is added to the table how should the ...
4
votes
6answers
458 views

Dropdown menus: Should the parent item be clickable?

TL;DR In my opinion, the parent element (that which when hovered spawns the dropdown menu) MUST be clickable. Other items in the global navigation bar that do not have have dropdown menus take you ...
1
vote
0answers
40 views

How do I best show the format that's allowed for an input?

I can restrict the input on the front-end to certain values or make it match a regex pattern, but the user might be confused about why they can't input certain values unless it's communicated to them ...
1
vote
0answers
54 views

Are there any similar progress bars with interactions like this?

I'm actually looking at circular progress bars that can fit in the 45px x 45px space, as such there's a limit to what can be displayed (so the typical long and narrow progress bar isn't going to work ...
4
votes
2answers
236 views

Standard style for text that opens hover tool tip?

Is there a standard style for text that opens a tool tip upon hover? E.g. "Learn more" text where the user hovers over it and it opens a tool tip. Someone on my team had mentioned displaying the "...
2
votes
2answers
93 views

I have 2 sets of button, how can I arrange them for best user experience?

I have 2 sets of buttons on a pop-up box of a website. Set 1 consists of multiple options the user can choose from, i.e. option 1, option 2, etc. Another one is "Back" "Next" "Start over". What will ...
1
vote
1answer
73 views

What's a better alternative to using tool tips on a modal box on mobile

I'm working on the mobile web adaptation of a desktop design. The desktop version uses a modal box, on that modal box there are tool tips that can be hovered on or clicked for more info. When ...
1
vote
1answer
46 views

Browse and select from a list at the same time

We're looking for a way to cut down on pogosticking - users popping back and forth between a summary view and various detail views. One pattern we're experimenting with is pager arrows, for when users ...
3
votes
1answer
62 views

Is there a best practice for redirecting users in a web application during an interaction?

To be more clear, my scenario is something like this: User interacts with a dynamic form that might or not create a new record on the system. When this record is created, I want to give the user the ...
5
votes
2answers
180 views

“Missile launch” button pattern name and implementation?

I am curious about a specific confirmation pattern. The best way I could describe it is the "missile launch" pattern, where the user has to "arm" the button by removing some sort of cover before ...
3
votes
1answer
57 views

If I have 24 categories with sub-categories in my shop page, where would be the best place for them?

The design is specifically to Desktop, on Mobile and Tablet I'm planning to have a drawer window with the list of categories and its sub-categories. The idea is to make the category visible in the eye ...
10
votes
5answers
256 views

Novel design patterns used to attract user attention but not a call-to-action

On the seek.com job website there is an interesting little character on the top of the navigation: When you hover over this character, there is a small interaction/animation Which basically extends ...
1
vote
1answer
704 views

Why are Google search results aligned to the left? [closed]

While doing some research on search results patterns I realised Google still to this day shows the results list on the left on desktop while the remaining 99% of websites are aligned to the center of ...
0
votes
1answer
49 views

Design Principles for Applying Configurations to Multiple Destinations

Do solid design principles exist for a scenario where one would have a dashboard for applying configurations to multiple different locations? As an example - let's say you have a dashboard to ...
1
vote
1answer
63 views

Usability of toggles as a filter or sorting mechanism

I looked up a website (page link here) and noticed this at the bottom of the page (one of the few times that I managed to scroll that far): It shows a toggle being used to sort the comments added at ...
1
vote
2answers
76 views

Name for flexible view-based layout like in Photoshop, Eclipse, Blender?

Is there an established name for the visualization and interaction based on movable views as in Photoshop, Eclipse, Blender, etc.? I refer to: a screen with some global controls onto which a set ...
0
votes
1answer
53 views

How many input fields in one row of a form?

I’m currently designing a template for forms on a governmental website. This kind of template can contain lots of input fields so I don’t want the user to scroll a lot. Also, the forms are in a slide-...
5
votes
0answers
57 views

Order of arrangement controls for Back/Front Backward/Forward

Backstory A discussion came up in my organization where we're looking at the conventions for ordering the Forward/Backward and Front/Back buttons for our desktop application, which runs on Mac, ...
2
votes
1answer
47 views

Is there a name for a layout containing a list and detailed view of currently selected list item?

Like in an attached screenshot - on the left there is a list of all orders and on the right detailed view of a invoice of a selected order. Is there a name for such a layout / UX workflow?
0
votes
0answers
31 views

Overdue tasks in a filtered task list

I am designing a screen where users can see their tasks that are due in a selected period of time. They might have tasks assigned in future as well and the UI lets them focus on a specific time period....
4
votes
2answers
93 views

How can we inform the columns of a table can be made wider?

After using Query SO couldn't stop but to notice how hard it is to understand we can change the width of columns. How can we inform the user that the columns can be made wider?
2
votes
2answers
65 views

How to show Telephone Number range

I need to show telephone numbers which can be the range of following fashion. 1: 123456710- 123456720(11 Numbers) 2: 234567835-234567842( 8 Numbers) and so on I need to represent this info in table ...
1
vote
3answers
127 views

UX Pattern for indicating information that might be wrong

I’m working for a startup that crawls data from news articles and displays it in a table. For example: “Bayern Munich won 2:0 against BVB. Both goals were scored by Lewandowski. Müller assisted both ...
11
votes
1answer
141 views

Is there a name for this auto-append design pattern?

This animation best describes the pattern, whereby a new row in the table is always preserved so that the user can insert a new row without clicking a + button or similar: Does it have a name? At my ...
2
votes
2answers
89 views

How to ask for user's birth date with OAuth?

I'm developing a site that requires a user's birthday (both to validate they are over 18 and for use by other users). Asking for a birthday with an email registration form is trivial. Simply just add ...
0
votes
0answers
27 views

Best practice to show helpful recommendation to users

We are building an insight section where user gets all his critical status of his activities. It includes a recommendation section. Recommendation is basically few action items where user can go and ...
0
votes
1answer
41 views

Are there existing patterns for forwarding an image to email from in app?

I am working on an app where one of the final steps in the signup process requires that users provide information displayed on screen to their employer; they can either go to their email and forward ...
28
votes
4answers
6k views

2 buttons that do the same thing

I have a client that wants me to put 2 buttons on a page that do, look, and say the same things. The button would say 'Apply'. The rationale of the client is that he doesn't want people to miss it, ...
2
votes
1answer
73 views

List item label problem

I'm facing a problem where I have a list item that has multiple values and one of them is a number that's ambiguous, therefore I want to label it. However a problem (in my opinion) that it creates is ...
1
vote
1answer
68 views

What is the design pattern name of onboarding popups jumping step by step (image)

we would like to implement functionality like below, but I cannot find out name of this ux pattern. Those screen is from GSuite admin but you can find it in many applications. It jumps step by step ...
2
votes
1answer
71 views

UI component or design pattern for juxtaposition of images for comparison

This was a design concept/pattern that I first saw in use for an interactive on a website to show the before and after images of a natural disaster event. Since then I have seen it pop up in a couple ...
2
votes
2answers
52 views

Can you advise a better way to display a popover of catalog items?

I have a catalog that I need to show full on one page. The catalog contains categories, subcategories, and items (5-12 items inside a subcategory). That's what it looks like (please, see the attached ...
3
votes
1answer
106 views

Mobile Form Design Pattern

I am trying to determine which of the following design patterns for user input is most effective and/or recommended when it comes to mobile experience. In our application we have examples of both but ...
1
vote
2answers
68 views

How 'cloud of choices' is called correctly?

I'm working on a react-native app and I want to implement a similar interface, but I can't even find its name. Main task for this element would be to give users a "cloud of choices" where they could ...
2
votes
1answer
53 views

Empowering users to make beautiful/creative text pictures with “text filters”?

Complicated question but will try to explain as I really need help here :). As part of university work in design/film, I'm working on a UI design project that is going to be a tool for other students ...
1
vote
2answers
79 views

Segmented control at the bottom of the screen in iOS

Is this a common pattern to put a segmented control at the bottom of the screen? I've seen this only in the native iOS 13 Photos app. This is a segmented control on the screenshot below, right? If ...
1
vote
5answers
305 views

What is the name for the UX pattern for showing ambiguous count for likes, votes etc?

While browsing various social media platforms, I encounter this upvote, likes button that shows an ambiguous count for the aforementioned things. Is there a name for such a pattern ?
0
votes
1answer
61 views

dismiss card for certain period of time

I've been tasked to apply a dismiss interaction to some UI cards that act as cross selling ads. We don't want to allow the user to dismiss them forever, just for a period of 30 days before they re-...
1
vote
1answer
111 views

Expandable/Collapsible menu

dear community members! I'm currently working on the solution and have a need to make a blue menu expandable and collapsible. Probably someone has good examples on this pattern? Here is how this is ...
0
votes
3answers
157 views

Is it lazy or inconvenient not to distinguish between password reset use cases in the UI?

I was recently asked to reset a password due to the fact that the security requirements for the website had been upgraded, and the users have been asked to change their passwords (for those that don't ...
0
votes
1answer
114 views

Where is the most conventional/best place to add actions for items inside datatable?

Like actions I would say "delete", "edit", "details" and many more maybe. How display that on a desktop application. Some possibilites that I already used could be : Add to the top before the header ...
0
votes
3answers
758 views

good ux design patterns to add/edit/remove entities in a mobile app?

I'm looking for Android apps which have good entity management (add/edit/remove) UX. The home page of my app displays a list of configured entity instances. Now I need to give the user the ability ...

1
2 3 4 5
17