Tag: button

Add button for a modal box in my navigation

I have the following navigation in my site.

enter image description here

The first 3 items are normal links to other pages in my site. The last orange link opens a modal box.

This is how I have written it in code

    <?php wp_nav_menu(['menu' => 'Main menu', "container" => "", "menu_class" => "desktop-menu"]); ?>     <a class="open-modal-registration passion-one bg-orange white" href="#">Einfach anmelden und kostenlos studieren</a>

I have a menu that can be customized from the Control panel, and then the orange button is hardcoded.

enter image description here

Now comes my problem. I would like to be able to reorder the items in the navigation in a way that I can also reorder the orange button, and put it, lets say, between “Page #1” and “Page #2”.

To do this, I guess I would have to add it to my menu from the Control Panel, but I do not see any proper way to do this. All that can be added to the menu are

  • Custom links
  • Pages
  • Posts
  • Categories
  • Tags

And none of those elements seem the right one to define a button with such a functionality.

How could I solve this?

Where to put submit button in a long screen with multiple inputs

I’m redoing a web configuration UI for a piece of hardware. Think of a configuration UI of a standard router. You install this hardware into your network and access configuration through your browser. The UI will normally be accessed from PC and should also be available for mobile devices, but PC is definitely in a focus here.

I need to implement a configuration form with a submit button. The old design was done in material design and had this layout: enter image description here

Form1, Form2 are a bit different configuration forms, that have a similar topic (Currently active SubMenu1). Think of “IP Address”, “Router Name”, “DHCP Configuration” etc. if it was a router. All of these have the same Submit button in the right top corner that applies only the changed inputs. For example if there is an input for a password, it will be applied only if it was changed, otherwise, the old password stays even though the input was empty. The submit button, although located on a menu bar is floating (when the menu bar is not) and always stays on the screen in exactly the same location when you scroll.

I’m redoing a UI similarly, preserving looks more or less, but changing the forms to be grouped in cards instead:

enter image description here

But I’m hesitant to use the same location for Submit button, as I believe there are serious issues with it from UI/UX perspective.

  1. The location is extremely weird and unintuitive. The button is located on the menu that is common for all views and simply appears/disappears depending on the view. Users do not expect it to be there
  2. The button although located on the menu is not attached to it and floats when menu is not.
  3. It is not obvious that if you do not change the password input and leave it empty, the password is not changed. My first thought is that this submits an empty password to the system. However, I’m not 100% sure this is a problem, just find it weird.

The problem is I do not know where to put submit button here. My first guess it to make it floating and to put it in the lower right corner. I do not know how to fix the password problem though.

Is this a good suggestion? If not what should I do? And is this a good idea to leave the password box as is, or it needs to be changed?

Active or Disabled action button in a mobile form?

I have a “change password” screen where the user’s password has expired and he/she has to change it. it’s a standard screen with “New password” and “Re-type new password” fields, with an inline validation that checks whether the password guidelines are met (while the user is typing): 8 characters, 1 digit, 1 number, 1 special character.

we have an argument whether the main “change password” action button should be disabled until all the validations are clear, or to keep it active and provide an error message if needed.

what do you think is better?

Is a split button valid without proper visual grouping

Split button is basically a button with a default action and several other actions which are shown in a drop-down menu.

While there’s no doubt in how it functions, the issue is with how the default-action and more-actions icon should be highlighted in UI.

I have created basic variations of split buttons in below codepen.

https://codepen.io/paulj05hua/full/PooayrP

In the above, both styles 1 & 2 are properly highlighted as a single group. But with style 3 user might mistake the more-actions arrow as separate button.

So the question is whether style 3 is valid or not ?

PS:

  • style 3 is used by Gmail in the mail list panel for selecting emails

    gmail-split-button-usage

    If this is considered valid, kindly state the reason.

  • There’s no mention of this type of component in material design ( material.io )

Display form errors on small screen. Scroll to error vs errors by submit button

I’m working on improving error visibility on our form. We display errors next to the field and highlight the tab containing errors. Which works well on desktops above a certain resolution. But on mobile or small laptops errors aren’t always visible.

This screen shot below of the form contains errors but are only visible when scrolling up.

Mobile View

mobile view

Actual Page

enter image description here

Should I display errors beside the save/submit button or scroll to the area/tab that needs correction?

Positioning an all purpose ‘smart’ button

I’m building a desktop app which has a kind of smart button. On click, the focus switches into a search bar and a pop up shows up (not a modal box). One may use the search bar to quickly add reminders, empty notes, etc and of course, to search. You get the idea. This is a major feature of the app. And I’m confused about the positioning. My ideas are as follows.

what I did

There is a home screen which you are presented on opening the app. On the homescreen, there is a toolbar, sidebar, main panel, and an area on the right for things like minimal calender, preview of things. On the main panel, there is a searchbar with an icon. Icon is the modifie version of the app logo. This searchbar is the smart button/bar. On click, it shows a pop up which shows the result ofthe search, and more, and has some buttons. The app logo,is on the left of the toolbar,whifh doubles as a dropdown menu for accessing things like open, view, settings etc. If one moves away from the home screen , the smart bar minimizes to the toolbar on the top. Clicking on it brings up the pop up and the minimized smart button expands to the searchbar.

But doing it way totaly confuses the user as there are two similiar looking buttons on the toolbar.

alternative

Regardless of the the screen you are looking at, the smart button stays fixed in the toolbar at the center and does the same as the above said minimized smart button. And instead of a fixed logo on the left of the toolbar which doubles an options drop down button, there is just a button for accesing the options.

First of all, I want to avoid the button on the left of the toolbar if its not a logo or remove any element from there. Thought about putting the options button in the pop up or the sidebar but they are already populated with unavoidable elements.

Any insight on this at all would be greatly helpfull. I have the illustrations but is impossible to upload via the app and the browser keeps crashing as I’m using an old samsung gt s7262 and there is no internet on the pc.

A warm label for a feedback button

Hopefully, this is an appropriate question, if not, I’ll delete it. I’m working on a new feature and it’s been decided that we will include a slideout feedback panel, similar to Hotjar. Currently, the label is ‘Feedback’ and it’s accompanied by a speech bubble icon.

enter image description here

I personally don’t think the label is clear enough, so I’m looking for alternatives. I’ve seen both ‘Give feedback’ and ‘Send feedback’ used on other sites, but those labels feel a bit impersonal.