New answers tagged

0

Save ensures that the data you've entered is saved. If you do not tap on Save, your new data won't be saved. The original will remain. Done exits the edit screen to ensure that the Settings you've entered are right, but doesn't "save" anything for the future. It might be possible that you will have to reenter the details for another transaction. Bowen Li ...


0

You should have a button. Can you have a shorter input box and then place the button? You can design a button not so heavy visually and keep the minimal style to the rest of the website. do not sacrifice your UX over a minimalist look.


0

Yes. Even if it's never clicked, the button is still useful. The presence of a button visually indicates that nothing will happen until you tell it to. If I saw a search bar with no search button, I would assume it would perform searches as I type. My first thought when I start typing would be "why isn't it searching yet?" Edit: Challenging what I just ...


0

Great answers here. What no one has mentioned is Fitt's Law which governs the speed (and ease) of clicking targets in a GUI. It gives some hard science to where to place primary buttons. Basically Fitts Law (https://en.wikipedia.org/wiki/Fitts%27s_law) states that the size of the target and distance act predictably on the time it takes to hit the target. ...


0

Based on my personal experience A/B testing and the results of numerous eye-tracking studies, I recommend that the button (which I assume counts as the "conversion") be inline with the movement of the reader's eye. That means the full-width button is always inline (but can get silly when too wide). The smaller button on the wider viewport is beneath the ...


1

I would recommend the reverse of what you described. Instead of having a button that allows you to scroll, show a static map, as Brett East described, with a caption/button of something like "Press to Open". In order to control the map, the user can press (or long-press) on the static map, which links to a new view with full-screen zoomable/draggable map ...


1

The first question is "Do you need either of those buttons?" "Back" is a universally-available browser control. There is no need to replicate existing browser functionality inside your interface -- at best it'll be redundant, at worst it's a source of confusion (is it going to act exactly like the browser 'back' button, or do something different? does it ...


0

On Back button you should navigate to the previous page without any confirmation or any message..... On Cancel you should just ask for a confirmation and reset the field(clear all fields) so do look for proper validation upon that...


0

For arguments sake lets say this is a two step wizard and you are on step 2. Back - goes back to step 1. Retain any values entered on step 2 when going back unless fields on step 2 are reliant on options chosen on step 1 (in which case retain what makes sense on step 2). Cancel - cancels the entire wizard with a confirmation to confirm cancel. Cancel ...


0

Depends on the function and result of the interaction. If both buttons basically have the same effect, you'll only need one button. Back means navigating away from your current page, but it doesn't tell the users what happens to their input on the current page. Cancel clearly communicates that you are about to abort the process, and thus clearing the info ...


0

In a multi-step-wizard like scenario this would make sense, but if I understand your case correctly and you really only have one step then Cancel would probably be enough.


2

Go for it. One of the added benefits of showing immediate feedback in the button being interacted with is a reduction in duplicate form submissions. This can be really helpful in ecommerce instances where a double submission might result in a double charge. Best practice would be to limit the behavior to 'positive' additions/submissions, rather than ...


1

In my opinion using buttons will be more ergonomical or efficient to use. Buttons demand less work from the user, because all the distances will be displayed, and the user won't need to play with the slider to see the different options. When interacting with the buttons only 1 click will be necessary to complete the action, while the interaction with the ...


1

The solution might be having pinch to zoom option(with two fingers) for maps. When one finger is used only page scroll should happen. Most mobile users I came across uses one finger to scroll and pinch(with two fingers) to zoom. This may also be a better solutin http://stackoverflow.com/questions/15327783/enable-scrollwheel-zooming-on-a-map-upon-click-using-...


2

It's fine to have spinner / progress indicator in a button, but try to make the button big enough and put the indicator in the corner, so that the users don't feel distracted by the spinning indicator. A good example from Facebook iOS app login page:


0

I completely understand the problem that you have, it can me quite common on mobile devices. My recommendation would be to not add the padding down the right, and instead make the map not drag or zoom on scroll at certain widths or for touch devices. Here is a link to a good article on the matter https://coderwall.com/p/pgm8xa/disable-google-maps-scrolling-...


2

You can also try playing with typography with some pictogram. That might help in this case. I had a similar issue in one of my project and it worked. Different kind of animations (shake, wobble, rubber band etc.) are also helpful. For example in case of a hard alert, a shaky animation will serve the issue. That will not only attract the eye, but also ...


3

Use a different shade or hue of red/green/yellow/neutral, and use it consistently for your positive/negative/warnings/neutral. Also use iconography along with the colors to enforce the message. For example, use a light red with 1px border along with an "!" icon on all error messages. Ensure that you do not use your primary website color in any messages or UI ...


1

I think and "edit" icon or pencil could be misleading as the user may think they can actually edit the table's content. What about a solution that shows a Display All Columns option, along with the option to display a selection of columns? Here is a demo of what I mean: http://gergeo.se/RWD-Table-Patterns/#demo If all columns are displayed, you could make ...


2

Your button should have 3 phases if you plan on using the Progress indicator inside. Static Progress Success or Failure Floating Action Buttons in Material Design use a similar concept. You might be able to relate to this example on Material Up. The Static phase indicates the action to be performed. The Progress phase has a Determinate or Indeterminate ...


2

I se no problem using such a solution, but keep in mind that: When submitted, the button shall only use the progress bar (left to right). When submission is completed, the text "Submit" shall NOT be available again, instead use that check mark indication that the submission was completed. And, of course, Use good contrast colors and remember to change the ...


4

At the bottom Take a look to the image below, and you'll see how placing the button on top will be more difficult than placing it on bottom, even requiring both hands in order to perform a simple touch action But this is not the only reason (although it's really important) The close action has to come AFTER the content or at least on a position that ...


1

I would do something like the following: download bmml source – Wireframes created with Balsamiq Mockups This allows the user to see all available options and have quick access to enabling/disabling their display. The button dropdown communicates that it contains options (as opposed to triggering some immediate action). Optional: I've seen the ...


1

I would put the close button in the centered at the bottom of the screen. This is seen in notification panels of Android < 5 and all recent iOS versions. The same concept is put into the Snapchat menu. You click the menu icon (the ghost) which is located top and center and the menu drops from the top. You can see the menu close button at the bottom center:...


0

Depending on device the ideal placement would differ slightly. As android has a bigger screen the bottom would be best as its closest to your thumb, where as iphones are smaller thus buttons can be up around the top of screen without there being too much of a reach. But considering the user has tapped at the top middle section of the screen, I would say the ...


0

This is tough to answer without knowing more about the platform you're working on, but i'll pass along what i designed for the platform I work on in hopes that it may help. I've read a few suggestions about using an 'Edit' pencil. If your situation is anything like mine then that won't work, because a separate option to edit the form is already present, and ...


2

You might be mixing up use cases. Bootstrap might be responsive, but it's mainly focused on quickly bootstrapping websites. Whereas Material Design was created with a very heavy focus on mobile interactions. I would argue that, while on bootstrap you do have a dropdown + call-to-action button, on Material Design the second part is not a call-to-action. It ...


0

I understand you want to communicate the action "edit", but it may prove advantageous to communicate another action ("add") and making the functionality clear after the user interacts. e.g.: HOWEVER, depending on what kind of content you mean to display in the table, the "add" button may be interpreted as "adding an item to the table." It really depends ...


1

Guidelines are not the same as standards. Guidelines will depend on the needs of the solution and there are no guidelines for the situation you describe. There will only be guidelines for Radio buttons, e.g. If there is a obvious default value then make this radio button selected when the page renders. As for the best solution, well that depends on the a ...


0

I would make all the responses buttons, including "Option not listed", which when selected opens a text input and makes the text input area active. That way, you have consistency in your view and the same number of steps that would be needed if you had a text input area. So when selecting the "Option not listed" response, the actions are: select; type; and ...


2

Just a quick suggestion, you could possibly disable the submit button, but have the text on it change to 'Submitting...' and also disable all of the form fields, so that the user can't then submit the form using the keyboard. download bmml source – Wireframes created with Balsamiq Mockups I don't know about the feasibility of adding a loading ...


1

I agree that those buttons look like they're not able to accept any user interaction when their alpha values are lowered. I'd suggest not changing the alpha values at all. Instead, scale up the button that is selected, and scale down the other buttons. For example: Or, as suggested by @BrettEast, implement some kind of checking system. For example:


2

I would do both 1 and 2, but also present the user with a message. Having a message will guide the user's expectation and avoid unnecessary concern by the user. The message doesn't have to say much, even just that the form is submitting and will take up to 30s.


3

I think that your concern is completely valid, especially if this is a user's introduction to the app. As Steve Krug points out, not making the user think is a fundamental part of User Experience design. Letting the user learn through trial and error can be okay, but not when it goes against what they traditionally already know. You're using an existing ...


1

Mac OSX has a right-click contextual menu somewhat like yours: I'm concerned about a couple things in your solution. (1) Keep in mind that stray clicks happen. As people mouse around they sometimes touch the mouse button enough to click things they didn't intend to click. So every word you can mark as known has to also be markable as unknown. It looks ...


3

All of the 3 proposed examples in my opinion assure bad usability. I think you have two main options: Show the help text on the page when the input element is highlighted. This way the user don't need to do anything, the help text is rendered when he selects the intended input field. That makes it easy for the user to spot the help text and read it if he/...


1

How often is the user expected to take this action? If it is something they do every time that they log into the site, then early education will do the trick, and they will learn it. Think about when you open your email client, your first reaction is to check for new mail and read new messages and you don't necessarily need anything more than a '...


0

Add a 'Call to Action' We use the general term 'Call to Action (CTA)' to refer to design elements that communicate to the user "This is the thing you're supposed to do within this larger element". [Buy Now] [Edit] [Approve] Whatever the relevant verb is for that feature of the dashboard, have your designer incorporate a text link or button that ...


1

I'm sorry but icons simply aren't the primary content here. Icons are nice. Labels are good. Good labels are critical. If there are so many buttons or controls that it's a struggle to include the accompanying text, then it's the structure of the layout that's at fault not the inclusion of the labels. Take a step back. Lets say the labels are non negotiable ...


1

I think you should go with help-mode switch because a lot of users are going to use it when they get lost and more advance users would understand the icons as longest is good iconography. Don't rely in first screen tutorials because it is been prove people skip those all the time. no matter how many animations you add they don't work trust me Force touch ...


1

We have a similar application and after user testing found that the following works best: Instead of using Previous and Next, labelling the actual destinations gives the user a sense of where they are. There wasn't really a need for a discrete Save button since the green buttons performed the save anyway. We didn't find it necessary to include a Cancel ...


4

Here are some suggestions that could help you increase the amount of donations you receive: -Reorder the donations from highest to lowest. The "anchoring" cognitive bias shows people are more likely to decide on an option that is closer to the first option they see. You should also emphasize a higher amount because it will draw the eye first and anchor the ...


2

Highlight the button middle in the sequence. If it is very first button: It will be skipped by user to check whats other options. User may not come back to first If it is last button: User may not reach till the 'Last' button in sequence. As donation may not be user's prime objective, it will be good to have middle button highlighted. It will give sense ...


2

This is a classic example where A/B-Testing will help you to make the best decision. Measure conversion rates for different variants and stick with the one that attracted the most donors!


2

It's both annoying and confusing: Annoying because it's covering the images. Confusing because it is out of context. You're on a page where you are looking for offers nearby, there's no reason to include a Sell It button. I recommend you look at this app called Saily for benchmarking. The option for "Buy it" or "Sell it" shouldn't be available on the ...


5

Well the proper way to choose which to highlight is de-emphasize the $5 donation, so no option is contrasting the other, put the site live and wait for the first 10-20 donations. Then you will find out which of them converted the most and respectfully contrast it against the others as you depicted in your image. However, in this approach the research phase ...


5

I'm assuming this is a Direct Primary Action similar to Instagram's New Photo button. Is it annoying? No. Is it confusing? Hell yes. Reasons that it is confusing: The button is floating. If you want to have a Floating Action Button, you could use the Android Design Support Library and use the FAB itself without any text needed. On Android, it looks like ...


2

There's a very good read from Aurora Bedford on icon usability: https://www.nngroup.com/articles/icon-usability/ and there's a section arguing that "icons need a text label": To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context. (And even if you’re ...


2

When several options are available for users to choose from, sometimes you can add a corner banner indicating it's a "best choice", "popular choice", or something similar. I'm not entirely sure whether this suits the situation of donations, but I think with proper wording it maybe a way to explore.


1

Try to stick with the mobile-os standards. On Android, long-pressing an ActionBar/Toolbar icon will show the label as a small pop-up in every app that uses the default ActionBar/Toolbar. I can't speak for iOS, but most apps on iOS i know use a permanently visible label below the icon. Please do not try to create a layout that fits different OS's if you want ...



Top 50 recent answers are included