Questions tagged [design-patterns]

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

Filter by
Sorted by
Tagged with
1
vote
1answer
29 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 ...
1
vote
1answer
70 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 ...
0
votes
2answers
50 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 ...
1
vote
1answer
48 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
37 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
297 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
32 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-...
0
votes
1answer
70 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
145 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
62 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
164 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 ...
0
votes
0answers
19 views

Pattern for adding information to a request that was submitted?

I have a relatively complex problem I'm trying to solve. Requestors can submit requests which come in to an approver to approve. I'm designing a flow for the approver. They need to be able to see ...
1
vote
3answers
158 views

The fragmentation of the page status introduced by multiple design patterns - best practice for page loading?

In one of the recent updates to Google Chrome, we have seen yet another method of dealing with page loading status with the introduction of the loading animation in the favicon area of the browser tab ...
2
votes
3answers
100 views

validating input widgets

[This may be a well-worn old question -- apologies if so, but I have no idea how to search for it.] First, the background. (This is not the question yet.) Suppose I've got a GUI with an input ...
1
vote
3answers
66 views

Real time filtering or Wizard steps

At this moment, I'm working on a product finder tool. By answering different questions, you get advice that suggests a product of your interest. So, the answers to questions could lead to different ...
0
votes
0answers
24 views

Real time filtering vs. Wizard steps [duplicate]

At this moment, I'm working on a product finder tool. By answering different questions, you get advice that suggests a product of your interest. So, the answers to questions could lead to different ...
2
votes
3answers
371 views

Making the user pay attention to what's on the screen instead of having him press next next next

I work on a fitness and recovery app which has an on-boarding process which requires the user to position 2 sensors on his body and pay attention to some small tasks on the screen (like put the ...
1
vote
2answers
197 views

Usability testing of design system components and patterns

This is my first post here, and what I am searching for have not been found yet so I must be very innovative (jokes aside). I have gotten a mission at my current company from the C-level to test ...
1
vote
0answers
48 views

interior page design patterns

Since the advent of the lonnnnnnng scrolling home page, I feel like there's been a surge of sites applying the same type of logic to the interior pages as well... lots of scrolling, no secondary ...
1
vote
2answers
96 views

Best way to summarize information that refers to an input

We are building a small tool to compare mortgage terms and their impact on the user's finances in the long term. We used to have an article explaining several concepts in the tool but opted for a ...
0
votes
1answer
73 views

Best ways to draw attention on the 'winner' and 'loser' within a table

We are building a small tool to compare mortgage terms and their impact on the user's finances in the long term. This is our attempt with the table. Our goal is to draw some attention on the 15 year ...
3
votes
3answers
302 views

Is it okay to break button consistency?

Currently have all buttons left-aligned in a dashboard. The alignment makes sense for filling forms. However, within a wizard and needed to add a 'Back' and 'Next' button, it makes sense to position ...
0
votes
2answers
172 views

Is this an accordion or not?

If you have scenario where you have a card component that can be expanded and collapsed independent of other cards eg. when expanding this card, other cards do not collapse. Is this still an ...
1
vote
4answers
261 views

Multiple steps each with a tasks vs one step with multiple tasks (for the user)

I am sketching the user flow for a new feature of a fitness/medical recovery application that is using hardware sensors to monitor the way the user is performing certain fitness exercises. In order ...
0
votes
1answer
52 views

Locked content before clicking CTA

We want to increase our conversion rate, so the marketing team suggests to use the pattern when information is locked before the customer clicks CTA. I actually don't know how this pattern is called ...
2
votes
1answer
165 views

Is Mailto function on E-mail address link bad UX?

I have done some basic research on this topic, but didn't came with valid conclusion as resources were not from well known or reputed sources. Hypothesis: (Especially for residential users), people ...
1
vote
1answer
151 views

UI Approach to Question/Reply Table

I got Project of One table which needs to be designed as per latest Design Standards, Old Table has a data of Question, Question's date & time, Reply and Reply Date & Time, UX perspective this ...
3
votes
6answers
218 views

Interaction for dependent sibling input fields?

I have two fields in a form - Country and Organisation. These hold the same hierarchy and are dependent on each other. Meaning, the user should be able to either select a country first and then select ...
0
votes
1answer
65 views

What are the common conversational design patterns used by voice-based assistants like Siri, Alexa, Google Assistant and Cortana?

Conversational UI is common in IoT and other connected devices these days, not to mention smartphones and also computers. The main players in the market would probably be Siri from Apple, Alexa from ...
2
votes
2answers
171 views

Name for design pattern used in complex or boolean search criteria

I am looking to see if there is a term that describes this type of design pattern or if there are well known examples of its implementation. This is an extension of the design pattern where a search ...
2
votes
1answer
76 views

Deselect after bulk actions

Working on a bulk actions flow at the moment and would like some thoughts on my approach. Wireframes here https://invis.io/7YTBHEJPXEA I have two core options... A button toggles the bulk ...
11
votes
3answers
4k views

Prepare a user to perform an action before proceeding to the next step

I am designing an application that allows the users to train at home. I have a step (let's call it step 1) in which the user must be in a position in order to "sync" (step 2) with the app for the ...
1
vote
2answers
180 views

Patterns for listing users in a “room”

I'm building a little app that lists music recommendations to users in a room. I want to list the users in the room but have a hard time finding patterns for this. Right now it looks like this (by ...
1
vote
1answer
77 views

Best practices: keyboard dismissal and button display in mobile apps

We have both iOS and Android apps with forms in multiple places, and are looking for an appropriate UX pattern for continuing when the form is complete. Example: On the login screen, the user must ...
0
votes
3answers
88 views

Inventory - how to add range of items and reduce the probability of human error?

Problem: I have an inventory that fills one purpose -> insert the same type of item (dongles) which only varies it's serial number. Every month someone buys a box which comes with a perfect range of ...
4
votes
3answers
259 views

UI Pattern for interdependent settings?

I've been trying to build a configuration screen for a network appliance that needs to be configured by the user and has multiple parameters that each influence the max values of the others. The user ...
0
votes
1answer
83 views

Multiselect dropdown where selected values cannot be deselected on edit?

I'm trying to find examples of a multi-select dropdown where once the form is saved/submitted, the selected values cannot be removed but, new values can be added. Currently, I've designed it to work ...
1
vote
0answers
53 views

why are outgoing text message bubbles colorful? [duplicate]

Why are speech bubbles either blue or green for outgoing messages and not for incoming messages? For example, in whatsapp, the outgoing messages are green. In iMessage, they are blue. I don't think ...
0
votes
1answer
50 views

Change main screen/section of product depending on user progression with product

Is it possible to create a product where the main section (where users land after login) changes depending on the progresses made by the users with the product? I'm currently working on a career ...
2
votes
2answers
343 views

What is the best color to differentiate male and female?

In my app, when a user doesn't provide his / her avatar, I would like to display a colorful circle with the capitalized first character of his / her name. Let us assume, that if an avatar (face ...
0
votes
1answer
69 views

Save Search in session or database

I have a table with records. The user can search the table using a Search Dialog. Due to our design constraints, I cannot have the Search criterias as part of a sidebar. Main Screen: Search Dialog (...
1
vote
4answers
601 views

Is it okay to use both nav drawer and bottom nav in home screen of an android app?

I am developing app, my home screen looks like below (using both navdrawer and bottom nav simultaneously) I used bottom nav, because I wanted to give user the easy access to the higher level ...
0
votes
1answer
74 views

Reusable named colors list to use across all mobile apps?

I'm trying to define a (map? / protocol?) for the mobile apps colors between the mobile developer (I represent) and the UI designer, to easily use it in our apps and to achieve consistency among all ...
1
vote
1answer
59 views

How to identify design system or design language used by app or website [closed]

Have few doubts. I'm new to UX, how to identify which design system is used by app / website, can we judge by looking into its UI. Can i design my own design system for my app and website - for this ...
5
votes
6answers
368 views

Why do users misunderstand the recycle bin as archive?

Today I faced yet another user misusing the application's recycle bin as archive. When I offered him to empty it he went angry because he "always did so" and didn't want to lose his mails. The first ...
8
votes
1answer
223 views

Why are design patterns normally not included as part of a design system?

I have seen many front-end development frameworks that are simple a collection of UI components and page layouts to be used by developers to build new applications. However, it should come as no ...
40
votes
4answers
7k views

Button changing its text & action. Good or terrible?

After the user Registers for an event (he goes to cart and pays, etc.) the next time he visits the page, the event for which he registered now shows a less emphasized Unregister button, which does the ...
0
votes
2answers
177 views

Are unclickable tags/chips a good practice?

Title says it all basically. I have to show a trip that contains Title, description and a bunch of random additional info (the tags). The issue lays in those tags they should not be clickable and ...
0
votes
2answers
187 views

Making complex UI easier - User License [closed]

I have an admin portal for a Staff / Tech Support to check USB Dongle license information and help customers solve problems The client interface is much simpler, but due to legacy data and how the ...
0
votes
1answer
127 views

Icons alignment issue

I'm trying to find out another way to show the big icon (dumbbell) or re-arrange the rows, because the first icon from the third row (the clock) looks a bit strange when it's next to that big dumbbell ...