research – Should there be more square and round shaped buttons than there are at the moment in the main part of webpages and apps?

References regarding optimal and minimum contact area or touch target size on mobile devices (also similar question previously on UXSE here) suggest that the contact area should fit the rough size and contact point on a thumb.

Weighing up the pros and cons for a square or round shaped button or call-to-action, it doesn’t seem like there is enough square or round shaped buttons because of the amount of body text and length of characters used on labels and the typical way layouts are structured on webpages that focus a lot more on the width than height.

However, when we look at the proliferation of cards and tiles being used on many mobile apps and website home pages, it seems to suggest that they are more useful in certain types of contexts.

Also, in game interface designs where there is less emphasis on reading text (e.g. in dialogues) and more focus on interactions, buttons don’t tend to be rectangular shaped but have shapes that seem to be more fit for the purpose of optimizing the touch area.

With the more common use of voice-as-an-interface and also with more traffic now coming directly from mobile devices, is there any particular reason that there are not more square or round-shaped buttons on user interfaces? Is this a trend that we would expect to see more on the body of a webpage rather than just on the areas of the screen that are more condensed (e.g. menu headers and toolbars)?

gui design – Why do modern GUIs tend to have buttons on the side of message boxes?

Message boxes used to have buttons centered horizontally. E.g. here’s one you’d get with MessageBoxW API function on Windows XP:

Message box on Windows XP

But more modern systems have message boxes with the buttons on the side, like this same message box opened on Windows 7:

Message box on Windows 7

Similar results can be seen with Qt3 vs Qt4+:

Message box from a Qt3 app

Message box from a Qt4 app

The message boxes with centered buttons look nicer due to symmetry, so there must have been some good reason for the change.

What is the reason for this switch from centering the buttons to side-adjusting them? Do buttons on the side have some important advantage over those in the middle?

How do form #states interact with dialog action buttons, if at all?

A dialog can be fired by a link formatted as such:

<a class="use-ajax" 
    data-dialog-options="{&quot;width&quot;:400}" 
    data-dialog-type="modal" 
    href="http://drupal.stackexchange.com/some/path">
    Some path displayed in modal dialog.
</a>

If the contents of /some/path are a form, then drupal takes its action buttons and drops them into a “footer” <div class="ui-dialog-buttonset"></div> in the dialog. This seems to take into account the initial state of the buttons — so if submit has the disabled attribute by default then the corresponding UI button gets the .is-disabled class applied. The “real” form action buttons are rendered but set to display: none.

However, I’ve got #states set up on my submit button with

$form('actions')('submit')('#states') = (
  'disabled' => (
    ':input(name="field_fivestar_rating(0)(rating)")' => (
      (
        ('value' => '-'),
        ('OR'),
        ('value' => '0'),
      ),
    ),
  ),
);

The “real” form submit button is updated correctly according to its #states attribute, but the same cannot be said for the corresponding dialog button. It seems to be static based on the initial state of the submit button.

Is this expected behavior? If so, is this something that deserves an issue in the queue? Seems like an oversight and usability concern.

sharepoint online – How to hide “Share”, “Copy Link”, “Copy to” buttons in my site?

I’m using SharePoint Online modern UI.

And, I want to hide Quick edit, Sync, Export to Excel, PowerApps, Automate, Share, Copy Link, Copy to from my site.

Please check below picture.
this is my question

I found the easy solution about PowerApps, Automate, Sync buttons in below URLs.
https://mbangert.de/hide-power-apps-and-power-automate-flow-in-sharepoint-online
https://www.sharepointdiary.com/2017/08/disable-sync-button-in-sharepoint-online.html

But I can’t find solution other buttons.
I don’t want to use SPFX if possible, but is there no choice to use SPFX?

user behavior – Why are the titlebar buttons on the left side in OS X?

Is there a reason they’re on the left?

Yes. It’s that the ultimate button in this little micro “dialog” box (Window title bar) is the destructive action of closing the window, and Apple determined the ideal order of actions to be from left to right:

| Destructive || Neutral || Constructive |

Since the button on the far left closes the window, and is therefore the most destructive possible button in a window based GUI OS, it should be on the far left of the Window status bar that is its container when using these rules of lateral action distribution. This fundamental design choice informed the decision to put the close window button on the far left, the other two actions (minimise and maximise) are placed beside it because that’s now the area that is the “dialog box action area” of the Window Title Bar.

For a brief while we had the ideal of a super-maximise-to-a-new-screen-space on the top right, double tapping the middle section of the Window Title Bar to minimise and far left being the destructive close button with the minimise and maximise buttons next to it.

But then a (wrong headed) desire to put the download button and iOS sharing button in the top right of Safari seemed to override this ideal across all of Mac OS X, and we lost the normal and rightful maximise button in this little trio. It’s been replaced with the fullscreen, new space button. I’m pretty sure this little mess wouldn’t have happened under Steve Jobs’ watch.

In answer to your original question, yes everything about OS GUI design is intentional, and has reasoning behind both the intentions and the decided design. It’s just not always transparent, and sometimes not good intentions, like the desire to transplant the ideas of iOS sharing button placement to Mac OS X.

Creating multiple DOM buttons in JavaScript (I am not DRYing)

I am making a Tic-tac-toe game and I have the basic board but I am repeating the code and it is very badly written. I am wondering how I can use better practices to write the DOM elements that I need.

I am referring to the function boardController.buildBoard() which can be found here:

https://github.com/robbiesoho/TTTJS/blob/master/assets/js/script.js

There are nine buttons and here are the first two

const boxOne = document.createElement('div');
    boxOne.classList.add('boxOne');
    const buttonOne = document.createElement('button')
    buttonOne.classList.add("button")
    buttonOne.setAttribute('type', 'button');
    buttonOne.addEventListener('click', () => {
      boxOne.classList.add('token');
      boxOne.textContent =  playerController.activePlayer;
      boardController.board(0) =  playerController.activePlayer;

      gameController.afterButtonIsPressed();
      gameController.winnerAction;

    });

    const boxTwo = document.createElement('div');
    boxTwo.classList.add('boxTwo');
    const buttonTwo = document.createElement('button')
    buttonTwo.classList.add("button")
    buttonTwo.setAttribute('type', 'button');
    buttonTwo.addEventListener('click', () => {
      boxTwo.classList.add('token');
      boxTwo.textContent =  playerController.activePlayer;
      boardController.board(1) =  playerController.activePlayer;

      gameController.afterButtonIsPressed();
      gameController.winnerAction;

    });

I am new to JS and know only enough to know that this is not a good way to write this. Thank you in advance

buttons – Showing edit mode for messages

How do you see the current approach negatively impacting the user? If you were to leave it as is, would you be concerned that someone would be confused by what the “Save” button does, because of its similarity to the “Submit” button? And if after hitting the “Edit” button they were to click the “Save” button, when they actually thought they were clicking “Submit”, would it make a difference? Not being difficult, just want to make sure there is a problem that needs to be solved here.

For reference: When posting this answer I see a blue button in the bottom left that says “Post your answer”. If I edit an answer, I see a blue button in the same place that says “Save Edits”. It didn’t matter that the buttons looked the same, were in the same location, but said something different. In both cases, it was clear what was happening and
I knew what to do, and I suspect that user testing would show the same to be true in the case of your UI.

Design pattern – I have 2 sets of buttons. How can I arrange them for an optimal user experience?

I have 2 sets of buttons in a website pop-up box. Set 1 consists of several options from which the user can choose, i.e. H. Option 1, Option 2, etc. Another is "Previous" "Next" "Start over". What is the best arrangement for the buttons? I tried the 2 arrangements. I have attached the pictures. Please tell me if it's okay or if there is a much better way to arrange the button. Thanks a lot.

1.Enter the image description here

2ndEnter the image description here

Data Tables – Displays contextual buttons on a row

I work in an internal application for my company.

I have a spreadsheet of documents sent for digital signature and a final column that shows buttons with multiple actions available for each line (view logs, download original file, download signed file, cancel signature process).

Enter the image description here

For example, the first line sent a document for signature, and the user can view the logs, retrieve the sent document, and stop the process, but cannot download the signed document.

Now I'm not a big fan of showing disabled buttons to a user who can't do anything (the user can't do anything to activate the third button on the first line, except waiting for the signer to create the signatures). and I wondered if another display option might be better:

  • Instead of disabling the button, hide it and leave an empty area. I'm afraid it might be strange for the user.

  • As a variation of the previous one, create a separate column for each button type.

  • Remove the deactivated buttons completely without leaving any spaces (in the first line, the last button is moved to the left).

Is there a general recommendation for this type of situation?