usability – is the user's attention required or not?

We develop the module "Work Experience". You can see the screen in the form of wire attached here.

enter the description of the image here
enter the description of the image here


  1. The user has entered the information in the 1st block.
  2. After that, he clicked the button "(+ Add work experience)" to activate the second block "Work Experience" (you can see on the image).
  3. But he did not enter anything empty (2nd block)

My question is-

When I click the Save button, do I need to view validation errors in the 2nd block?
or ignore the 2nd block and save the 1st block only?

My thoughts on the point of view of the user: what is the use of displaying validation errors in the 2nd block because it is empty? With these validations, the user must work again or spend time filling in the fields or deleting the second block.

My observations in some applications:

When creating a new mobile contact number, I added several fields such as home, office, fax, email, email2 … by clicking the (+) button of each line. But I entered the number only in the field of the office. Finally, I tapped the Save button. He saved successfully. When I clicked to edit the number, everything I clicked on before, like at home, email, .. these are canceled.

Google Contacts:
I've added several fields, but I've typed a few fields and pressed the Save button. Without asking or displaying any validation error, it is saved successfully.

The examples above are not required fields. Here, my screen contains required fields, types of widgets and, globally, a backup button.

Please share your thoughts and any examples if you have seen anywhere.
If I think of a wrong direction please let me know your suggestion

Usability testing of components and models of the design system

This is my first post here, and what I'm looking for has not been found yet, I have to be very innovative, joking aside. At level C of my current company, I have the mission to test all the components and models of our design system. It's all about input components, badges, boards, maps, panels, and so on. Our design system is structured from an atomic design.

However, I am not used to testing only specific components. I have always done it through scenarios and cases in which we have complete provisions including components that will help our users in their work. Is there a way to perform smaller usability tests without special cases?

Here is what I thought:

  1. I could test each component against certain criteria.
  2. I could do the test of 5 seconds (identify how it is perceived after 5 seconds)
  3. The break-it method, where users and test participants try to find errors and problems with functionality and ease of use
  4. Test participants will compare our components one by one with those of material design or lightning.
  5. Evaluate components using CBUQ (Component Usability Questionnaire)
  6. Ask each component for small tasks to see how easy it is to use and navigate, eg. Task1 – enter data, Task2 – delete entered data, Task3 – navigate using keyboard, etc.

Are some of these ideas good? Are there any others? Please help! Any entry in value! 🙂

usability – Should e-mail verification links expire?

If you automatically click the verification link, then the verification link should expire.

Why? Because if the user's inbox is compromised, a hacker can search for the verification email, then click the verification link to access the user's profile on the website.

The question then is when the link should expire. Maybe not immediately after clicking on it, but for example 24 hours after clicking on the link.

usability – Horizontal scrolling menu or bar tabs?

I develop a mobile application compatible with iOS, Android and Windows platforms.

The application includes "sectional navigation". By navigation by section, I mean it has various sections such as:
1. Cards
2. Note
3. Search

I guess there could be a total of 8 to 10 sections and that each section takes the user to a new screen. Some of them can open an overlay with a close button ("X" icon) in the upper left corner.

I want to keep a minimalist design. I had two options in my mind:
1. Tab bar with the "More" tab.
2. Horizontal scrollbar with all options in place.

However, I am confused who would be aesthetically attractive. The tab bar looks a little old fashioned and the horizontal scroll bar seems to be the opposite of the minimalist design.

I have however seen the Zomato application, which has recently been the subject of a design update. They have placed a "+" icon in the lower right corner of the screen, which, when pressed, reveals the menu options. I've also visited the iPhone App: Tab Bar and Dashboard (also called Grid Navigation). Or both? Alternative to the bar of tabs (in the iPhone application) of this website, but I could not solve my query.

This is something that concerns the design of the navigation and many opinions answers could help me to try a lot of things for my application and to get useful reviews from my testers.

usability – field mapping for serialized data

I need to provide an interface for users to define the field mapping for some associated downloaded data. This mapping will be used as a template to import bulk data.

An example of mapping is:

[Field A] – Data A, [Field B] – Data B

However, the data is not delimited by commas, they are serialized as such:


Each segment of the number has a number of characters and a dedicated meaning, but the system does not know and can not parse the separations as a comma delimited file. This is where the user comes in. Our team wants to provide an interface that allows the user to manually split serialized segments and associate them with fields.

Does anyone have any ideas on how to manage or see other interfaces dealing with serialized mappings. Is there an interface that can be used to select the beginning and the end of segments?

usability – has USB-A always been designed to be reversible?

It is probably the opposite. people who have connection problems with the old connector get the idea of ​​reversible connectors.

1 – There is not enough space.

Although I have not found an official specification regarding the thickness of the white plastic part, here is a series of vendor diagrams that show that this is exactly or very very close to the connector axis.

enter the description of the image here

cropped from this image via

The entire connector has a thickness of 4.5 mm, while the white portion ends at 2.3 mm. The absolute center would be 2.25, so there is a gap of 0.05 mm, but it is to drag it and the variance of materials. 0.05 or even 0.1 mm (one or two sheets of printer paper) is not thick enough for a contact board. As a comparison, the already fragile contact table is 0.7 mm.

enter the description of the image here
cropped from omron data sheet

Although it does not have as many measurements, it shows the center line and you can see that the connector touches just about everything; only one pixel or two difference.

Basically, the two plastic parts (male and female) of the USB are the same size and are placed in the middle of the metal case. I guess / guess it's either for simplicity of production (both sides can use the same PCB), or to guarantee that both are about as strong / durable. Apart from a production margin, there is no space left.

2 – They did not know it would be a problem.

Older computer connectors tended to use slightly trapezoidal connectors. These would be recognizable by the outer shape of the connector. PS2 connectors were also very visible. As are the network cables. And none of these should be exchanged very often.

Things like headphone jacks have been designed to be used a lot, but they are extremely omnidirectional.

USB-A is somewhere in between. he looks reversible, but that's not it. Yet, it is used a lot. This is the first (common) cable that showed reversibility could be a problem.

Of course, the setback is 20/20 and it should have been tested, but at least we now have USB-C in response to this first world problem.

3 – You could make it reversible, but it would not look like USB-A at all.

USB-A currently has an individual connection, each party occupying 50% of the space. To make it reversible, you will need a one-to-one connection. You can have two tips for the woman and a man at the center or two tips for men and a center.

enter the description of the image here
red is a man, blue is a woman.

And the 2 men with 1 female version is essentially USB-C.

4 – It would be weaker.

The smaller an element, the more fragile it is. USB-A currently has an individual connection, each party occupying 50% of the space. To make it reversible, you would have to clear one or both sides, because you would have a connection one by two. You would have 3×33%, or 1×50% and 2×25%, or something similar.

It would also be more complex because there would be more elements to wire and therefore more things that could break.

And one last thing that could be lost, is that in variant 1M-2F, none of the cards would be connected to the metal shell. With USB-A and USB-C, the male card touches the case, which means that it can not bend. However, in all 3 variants, the female board remains floating and therefore fragile.

Note; Fragility is actually a point of criticism for USB-C, and I am inclined to accept. I think that a configuration more like lightning cables would be more solid, at least for female connectors. And the female connectors tend to be in electronic components (expensive), while the male connectors are connected to cables (less expensive to replace).

5 – How do the reversible?

They take all possible leeway with the specifications.

enter the description of the image here

According to the omron scheme, the case measures 5.12 mm with a sheet thickness of about 0.2 mm. This leaves 4.72 mm for a very tight connector. The connector is only specified at 4.5 mm, which leaves
0.22 mm. If you also reduce the thickness of the sheet from 0.2 to 0.1 mm, you get an additional 0.2 mm. A total of 4.2 mm. If we add card bending and other places to bend the rules, we can get closer to the 0.7mm thickness of a USB-C connector.

Of course. this has several disadvantages. On the one hand, it is obvious that the whole construction is more fragile. Two, because everything is pushed to the limit, it will be very difficult to set up and there may even be ports in which you literally can not insert it. Thirdly, bending means that you have a very small contact area.

enter the description of the image here

So overall, this does not seem to be a very resilient connector, but a pretty smart hacking.

usability – Global filter – is there a better solution?

I am currently working on designing a new version of our current SaaS and am experiencing a problem with a feature specific to SuperAdmin.

Our SuperAdmin administrator, when setting up the environment for a new customer or customer support, must often switch from one customer's view to another. In the previous version of the software, we had a specific superadmin account for each client, which made the switch longer and more annoying for the user (the SuperAdmin has all the time to disconnect and then log back in).

After interviewing SuperAdmin and thinking about it, we have developed a global filter always present (for this user role only) in the top header (see the images below):



The user searches for the client and selects the company from the list to obtain a filtered view of the platform.

However, now that the feature has been implemented in our first beta, SuperAdmin is complaining that this solution is not user-friendly.
As it is still in development, the search needs to be optimized so that I know it can be improved (for example, if you do not type a letter, nothing is displayed).

Still, I can not help but wonder if we made the wrong design choice. What do you think? Is there a better way to handle this problem?

usability – How to resolve the ambiguity of the selected state in a segmented control with only two segments?

I'm working on a web application with two similar data grids in one page. The user should be able to switch between these two data grids on the same page.

I've used segmented buttons to navigate between these two grids. But I think that this component visually becomes a seesaw and that the current state of the seesaw becomes ambiguous.

For now, I'm only relying on the color / hue to display the selected state, but I do not know which state to choose.

Is there a better approach to solve this problem?

Segmented buttons surrounded in red
enter the description of the image here

usability – Enter a lot of data with the vs vs checkboxes

I guess the answer, as usual, will depend in part on your users themselves and their preferences for typing compared to the mouse.

The Atlassian suite (for example, Jira) has a process similar to that of your example 1, but with some important improvements. First, when you start typing a name, a suggestion box appears below the field to help you quickly find the user you are looking for. Second, you can automatically fill in the name of the user with the choice highlighted (top) in the suggestion box via the action of the keyboard or mouse. Third, this automatic completion or selection action adds a balloon to the field containing this user name, adding the user to the list of selected users, much like in an email client. You can then immediately start typing another user name to add a second user and repeat the process until all desired users are selected. After that, you can apply or save in the modal to apply the action.

Benefits for a system like this:

  • It is easy to quickly add a small number of known users among a large number of options via the keyboard.
  • autocomplete means fewer keystrokes and fewer typing errors

Disadvantages of a system like this:

  • no clear workflow with the mouse first (though that's Jira, I think the most selected users immediately fill the suggestion box by clicking on the empty user selection field )
  • tedious or potentially frustrating to select a large number of users (for example, more than 10)
  • difficult to add users whose names are less known to the user, or to use the list itself to improve the mental model of the user in order to decide who to choose

A potential hybrid solution would add an (+) icon to the right edge of the field, which would display a modal with a list of user names with checkboxes. This would solve most of the disadvantages listed above and would have little impact on the interface for those who prefer the keyboard's operating mode. It should also have a familiar pattern for users who are used to sending emails to clients providing a similar model (for example, Outlook).

Actually, tl; dr: Simply use a template like Outlook in which you can type up to completion, type for auto-populate selection or click to add users via a template with a full list.

usability – How to manage multiple statuses when tagging elements

Currently working on the "tagging" feature for a results page.

  • The user needs to be able to tag and decode the results
  • The page may have active filers that exclude results based on tags

Which model can I use to allow the user to manipulate a group of selected elements containing a combination of labels (on 5 elements, only 3 may have a "label 2", for example).

Ideas I've explored:

Simple drop-down menu
A simple drop-down menu that lists all the available tags. If the items are marked with a tag, the drop-down list would be "unlabeled" when hovering. This idea breaks as soon as you have a selection of items that do not all have the same label.

Check box and undetermined state
List of check boxes in a drop-down menu showing all available tags. If a tag has mixed selections, it appears as an indeterminate state. The user can check or uncheck the desired tags and apply them in one function.

Two separate drop-down buttons, one for "Tag" and another for "Untag". The user can make selections and add or remove tags as desired. The items in the drop-down menu are not affected by the selected items. This option disappears once you consider the "exclude" filters. If the first action I had to take causes the deletion of copies, I am unable to take the second action.

Dropdown with undetermined state
It would be a simple drop-down menu but with indeterminate states. If an item in the drop-down menu has mixed states, it does not display "untag" on rollover, the user has access to hover only if all selections have this tag.

My preference is for the check box but I am looking for additional opinions or reflections on my approach.