Graphical user interface design: style of a document preview in Bootstrap

I am currently working on a registration form using Angular 7 / Bootstrap 4 / HTML / CSS.

My registration form requires the user to enter Information A Y Information b , which are printed on documents to which they only have access.

How do I have to do the form? sensitive For all types of devices, whether they are ultra-wide screen displays or smartphones, I want my preview to skip below my form. Also, I want my preview card to always be the same height as the card on my form. Using Bootstraps 12 column methods, I have a bit that I noticed.

But the main problem is the style of previewing the document. The preview is just an image, which is being exchanged, depending on the input the user has currently focused on. Information A is printed on the top of the document, and Information b It prints near the bottom. Now, on wider screens, the letters also get wider. I have to scale the image or cut it out. Neither is really an option, since the scale is too small to be legible, and the cut is cut Information b.

In addition, different behaviors in different browsers should be covered.

Current preview card code:


Reference image:

I saw this post

What would be a good way to design a preview in 1: 1.4 (DIN A4) using Bootstrap4 and / or CSS / HTML / Angular 7

Graphical user interface design – a simple and massive removal mix

I'm working on a user interface that will allow users to save thousands of records. They also have the ability to organize these records into projects.

In the main records screen, we allow massive deletion, that is: you can mark several elements and then delete them in bulk. This is because, as mentioned, thousands of records.

However, in the Projects screen, we do not anticipate that users have many Projects. There will only be 3 or 4, so the bulk editing is not really necessary here, so I was thinking about allowing only users to delete one Project at a time.

This is how the record screen with massive editing looks. Note that the "Delete" button will only appear after at least one item has been marked.

enter the description of the image here

The Projects screen almost looks exactly the same, but without the check boxes / ability to remove them in bulk.

enter the description of the image here

I suppose we can reflect the UI for consistency, but I do not think massive editing is necessary for something that does not even contain a ton of elements.

Is it okay to have a combination of massive and unique editing in the user interface?

Tabs – Improved CRUD operations in the user interface list

So far, our pages for the operations that will be carried out in a collection of things (tasks, price groups, permission groups, …) have this general structure:

enter the description of the image here

If the things that are modified in a massive way have "only one thing", we do not have a panel with tabs, like this one:

enter the description of the image here


I have been entrusted to someone who says that if he were a user of this application, this design would not be good. However, when I asked him what he preferred, he had no concrete suggestions. I generally agree that this can be renewed, but I do not consider any easy-to-use suggestions either.

What you say?

interface: What is the best way to show multiple options for multiple fields?

I have a complicated one. I need to allow an IT administrator to set the value for each field and assign that combination of values ​​to an entity. (The following picture shows a simplified example, where the fields are named for meals, there are some options for each meal and each combination is named for a day of the week As you can see, two entities (Tuesdays and Thursdays) can call the same combination.)

first sample table

Different clients could have a different number of fields, field values ​​and entities.

[The actual use case is more complicated than menus. Our system applies various settings for each user depending on customer-defined metadata such as role, department, business unit, and task. The administrator names each combination of settings, and assigns each combination to a combination of metadata values. Where it gets interesting (and complicated) is that some settings may apply to a metadata value regardless of the other metadata values. For example, there may be a single set of settings for a particular task that apply to all business units, while for other tasks, the settings vary by business unit.]

To help administrators avoid overlooking any combination, I want to show you what combinations are left unassigned. (The only reason why a combination of metadata values ​​would remain unassigned is if that combination could never happen in real life). If administrators want to assign an entity to an unmapped combination (or change an existing assignment), I want to let them do it Right there (and not go to another screen).

This task will be carried out rarely: once it is configured and less than once a month to change.

My initial idea is to automatically fill in a table with every possible combination of values. The administrator could name the combinations that interest them and could easily see the combinations that are not assigned a name. For example, this shows a starting point without assigned entities:

all possible combinations

This approach could generate many more entries than I have shown here: it is possible to have 500 rows. So to facilitate the allocation process, I would add a wizard so that administrators can assign multiple combinations at once to an entity. For example, the user could assign "Soft Day" to Breakfast = Cereal or Oats, Lunch = bread and Dinner = any. (The last point is key: many entity assignments will have multiple values ​​for each field).

My main problem with this approach is that it is rare and therefore requires an explanation. The alternative is to provide two UIs, one that lists each entity and shows the assigned field values ​​(with the ability to change those values), and one similar to the previous one that shows each combination of field values ​​and the entity assigned to each combination . (The advantage of two user interfaces is that you would not need an assistant, the disadvantage is that the first user interface would be complicated, so if I go in that direction, I'll come back here).

I hope that some of you can suggest a simpler approach that meets the requirements:

  1. Allow the user to assign one or more entities to a combination of one or more values ​​for one or more fields
  2. Allow the user to see all combinations of unassigned field values

Thank you!

Graphic user interface design: Will the icons affect the overall UX experience?

I am working on a gas application (similar to GasBuddy) and based on the Geico application. Geico mainly makes insurance, but added the gas price sections.

So that's what the Geico app looks like. I like it because it's simple, with big text, and to the point:

enter the description of the image here

Our application would not compete with Geico, but I would like to add something else. So I was thinking of adding icons showing the amenities. This would look something like this:

enter the description of the image here

The Geico does not have the services section, but applications like Waze and GasBuddy show these services if you click on the service station; they do not show them on the main page where the list is.

I was even thinking of something like this (the price with a fund):
enter the description of the image here

So, my question is: does adding these icons negatively affect the usability of the application? Maybe I could make them smaller?

I wanted to clarify that our application is local, so these icons are an additional feature; It is not something that "do or undo" the application.

graphic user interface design: is a "natural language" a good practice?

I would say, Yes and a great DO NOT.

As others have already mentioned, it depends solely on the context of use. As UX Design is a contextual approach and you should already have researched about your stakeholders and the segment of your potential users. If all belong to the same location, age group and community. Yes, "Natural language" will be a very influential one.

But, it would only be a hypothetical argument that all potential users belong to the same location, age group and community. (Almost impossible, in the context described above). And if they do not, then the "natural language" will become a major obstacle to the accessibility of your application / website, which will result in fewer conversions and less business.

Thus, For better accessibility and early adaptability, it is always advisable to use "Standard language" instead of "Natural language".

Graphical user interface design – size of the track on the interactive map

I'm designing navigation clues on an interactive map (openstreetmaps) (see example image). There is a distinction in size and color to indicate what type of track and what type of size the track is. But now I'm thinking about how I could define what the minimum size of a track should be and what the maximum size of a track should be.

Being able to select a track quickly and accurately is important, but it is also possible that there are a few hundred tracks in a range close to each other, so I can not make them too big.

Does anyone have any suggestions for me on how to have a reason to choose the size?

He really values ​​it!

Thank you.


Example tracks

navigation – Characteristics of a complex interface: capacity for learning or discovery?

Working on something similar

Ultimately, the system must be used repeatedly in our service, so we design it taking into account the "expert use".

We know that this will worsen orientation and learning ability, but it is an exchange. If we introduce characteristics to make it easier to learn, we know that, when testing them, it is complicated for experts: slower!

So what we did was try the content of the orientation or "if users understand the system because we tell them, can they learn it faster?"

The answer is yes! And to answer your question, what you need is a solid incorporation experience, guided tour; and, what is more important, the very specific content related to micro interactions that is known is less learnable "this is here because X"

The system is for repeated use
Design with experts in mind
Offer incorporation tutorials
Place specific content around the micro-interaction explaining the micro-interaction.

This works

8 – How to use the interface translation for specific text on specific pages only

I need to translate certain text in a twig template to one of several languages, depending on the language selected for the node that is displayed. I have installed the interface translation module (without translation files because I do not want the interface translated) and I have added custom translations for the text I want to translate. This works perfectly using {{"text to translate" | t}} in the template.

Here's the problem: when I'm on a page like "/ is / node / 50" (Spanish), Drupal "switches to mode / is" adding / is to menu entries, administrator links, etc. I guess this is what is expected. , but I do not want it. I just want to use the built-in translation capability of Drupal (via | t) to translate the things you specify. I do not want any other page to get a prefix / is.

I want to select a language for a node and then have translation capability only for that node's template, without affecting anything else on the site.

Is this simply out of the use case for the interface translation module? Or is there a combination of modules / configurations to make it possible?

I have been playing with this for hours (days) and have read documentation and many publications without success.

unity: prevent the mouse from breaking the keyboard navigation in the user interface?

I'm trying to achieve the following, a behavior like Windows Explorer where the mouse and the keyboard play well together.

Here is a GIF along with explanations:

enter the description of the image here

  • First I click on one of the folders using the mouse
  • Secondly, I click on the background area, the folder is not in focus but it is still selected
  • Third I move to the next folder below using the keyboard.

To summarize, the mouse and the keyboard play well together.

Now in Unity is a completely different story, here is a fairly simple menu created with the actions in the Hierarchy context menu, nothing special:

enter the description of the image here

This is what is happening:

  • I click on one of the buttons using the mouse.
  • I move down to the next button using the keyboard.
  • I click on the blank area, the button loses focus.
  • I try to go to the next button using the keyboard, nothing happens

I tried a couple of things like disable Raycast objective in images, disabling background panels or making them opaque but without success.

How can you make Unity UI behave like Windows Explorer?

(where clicking on the blank area with the mouse does not interrupt navigation with the keyboard)