Tag Info

New answers tagged

0

I have used Tab for Tab keypress, tabs to represent UI element There are different cases of user interaction here. Jump tabs in sequential order Jump tabs in non-sequential order Visibility of status on next tab expectation Having a Next button at the bottom of every form communicates the upcoming status of the screen. But, when the interaction is ...


3

Google explained why they are doing this: we're working towards introducing new authentication solutions that complement traditional passwords And later down in the blog: This new Google account sign-in flow will provide the following advantages: Preparation for future authentication solutions that complement passwords Reduced ...


3

I think combining the two could will be confusing. The reason why companies create two distinct paths is because those two are different paths. What happens if someone thinks they have an account, and then when they don't and they start registering and they don't want that, what then? This is forcing a user to register if they don't have a login, and that's ...


1

The problem with having a piece of information next to each field is that in many cases it is not necessary i.e. it is repeated or obvious information. You will end up being obliged to fill it in for everything, even when you don't want to. It's fine in the two examples you have, but as an often used design pattern, you may soon wish you hadn't committed to ...


0

I like the solution from elev.io - same idea as the "i" / tooltip combo, but using just an animated dot instead of the "i", as well as changing the cursor to a "?" on rollover. http://elev.io


3

There's a trend towards using CSS and/or Javascript to show and hide secondary or additional content on the Web. Here's an older example from CSSNewbie: Click 'See more' to view hidden content: Click 'Hide more' to hide revealed content: I'll leave it up to you to determine which approach is 'best'. This approach—designing 'More Info' as a hidden div ...


0

rather than having the "i" if you have it that once the mouse hovers over the option and a dialog/tooltip appears I have found to be the best. It can be easy for the user as most people seem to hover the mouse over options as they are trying to understand them anyways.


0

You could implement it the way typeform does it: Scroll and skip the questions you don't want to answer, and let radio buttons and checkboxes retain their default behaviour.


0

One form would not necessarily mean a better user experience. A better user experience can sometimes be defined as a "just right fit" for the user. If your user needs to experience certain fields and messages to experience this "just right fit", then you may need two forms after all. On your site: You could have one link on the homepage that says "Sign ...


0

I would most definitely use check boxes (as radio buttons would be unhandy for mobile devices) with option to leave question unanswered. If skipping is not an option, then I'd suggest you allow users to 'remove question'. This would clarify to users that they don't need to answer irrelevant questions and they can be skipped.


4

Neither, sort of. Classic radio buttons are intended for mandatory, single selections. I don't really like radio buttons because they are hard to click and it's not obvious (or consistent) that the labels can be clicked. Classic checkboxes are intended for single on/off selections. Button groups are sometimes used in situations where there is one or zero ...


0

I'm Assuming your user will move from one question to another question/page with the help of a button, let's Call is 'Next'. All you have to do is rename you button as 'Skip' till the time when no check-boxes/radio boxes are selected. As soon as the user selects atleast an option the button changes to 'Next'. Note: Use the standard convention only, for ...


2

Have you considered putting each choice on a button and allowing the buttons to have distinctive depressed and undepressed images? Javascript coding them as you describe in option 3 would allow your users to choose zero to one of the provided options. Meanwhile, the use of buttons might make the hidden behaviour more intuitive.


2

This sounds like you're trying for a "none of the above" option. A simple radio button option at the end of the list would do just fine. No need to make things complicated. e.g. Which of the following is an animal? ( ) Tree ( ) Car ( ) Radiowave (o) None of the Above


1

I will say even better approach is of material as it combines both of the rejected approaches in the article and tops the proposed one. Let me show how (one has to read the article mentioned in question to understand even better): First, Quickest scan but with label disappearing problem: Second, label stays visible but takes longer to scan: Material, ...


2

So your assumptions are that: The user needs to enter their current password again (even though the user is already logged in You need to confirm the password As a rule I'd go with fewer steps: the user has already expressed a desire to change their password; making it a 2-step process is putting a barrier in their way. In the same vein, confirming the ...


1

I would say if Instant verification of password is possible then go for 2nd option otherwise you have to go for 1st option in order to prevent user from typing the password again and again in case the current password is typed wrong. An icon for unmasking password could be useful in both the cases. This is more like a question to you and others who read ...


0

OK, I think you have 2 basic approaches, which are both correct, but could be enhanced with some slight changes. Particularly, I'd go with Option 2, because you have 1 action (password reset) and a subset of child actions for that main action. See, the common password actions are create / modify / delete. So, it would be different if (for example) you had to ...


4

The main benefit to the two-step process is user clarity about their data and its status. Think of it almost as a virtual barrier between the new and old passwords. I entered my old password, which after this step I am done with. Now I am entering my new password, which I will use from now on. Versus I entered my old password, but now I am entering my ...


3

Most of the cases I have used have the old and new password fields together, like Version 2 above. It is certainly what I would prefer, although of course your best course of action would be to ask your users, ideally by doing experiments to see which version yields the best results.


1

For a product HIG, I recently defined two independent widgets, as you described, for specific workflows. Typeahead basically follows the constructs of Typeahead.js. The workflow is similar to the one you describe where, as the user types, a list of available options appears that can be selected from. The user is, however, not forced to select one of these ...


2

I have to enter my University in often for various sign-ups, and I think a drop-down with an embedded search/input field might be the solution you're looking for: Start with a drop-down download bmml source – Wireframes created with Balsamiq Mockups Reveal a list with embedded search bar Allow the user to scroll through a list of colleges and ...


4

Although your interface is usable, it's important to utilize cohesiveness and decision-making in the case of image selection. By "toggle", I think your co-worker means the options should be more clear. Here are some mockups that might better illustrate what I mean: Drop Down This method is used heavily in social media, where the user intuitively clicks on ...


0

Go for Pagination with the Powerful Filter and Sort Pagination play a key role in performance of the app when there are 100s of records. If you don't use pagination your UI becomes so heavy. When user wants to get a record from 100s of records Filter is the way to go. Here you need to be smart to provide best filter options for the user. Sorting also ...


4

Yes, absolutely! It's more important to design for the best user experience and efficacy than to follow design patterns. In the end, patterns just codify a set of heuristics/experiences/guidelines so they aren't a replacement or an override for proper, tailored design. For the situation you're describing, it can make a LOT of sense to add a Clear button. ...


1

It would be helpful to have more context; What exactly is being calculated? In general, consider it bad UX if the user doesn't have the option to start a new calculation without having to reload the page. On the other hand, maybe the user would like to compare different calculations, in which case having to clear the form could be bad UX. As is with real ...


0

Do a quick comparative analysis I'd start by checking how other companies handle this problem, in adjacent spaces. For example, ride-share software apps such as Uber obviously need to sign up transporters and people who want to be transported. But if you already know that you need one form, then read on.... One starting point, two paths In the profile, ...


0

I see what you mean with the not-so-obviousness of the error. To look at it another way: could you indicate progress in a non-linear way (related to the form information, but not step by step), which gives a completely blatant indication of what's DONE and what's PENDING? Pending can do along with glowing perhaps to hit it home (a subtle glowing or ...


1

From a quick look at the page, it would seem that one way of handling this is to issue a page wide banner/overlay which identifies errors and on-click the user is directed to the element which is wrong/missing. The element can also be highlighted.


0

Type assist is best used to reduce seek times in large lists offer ambiguous, synonymous, redundant items speed up choices by showing item structure avoid typos and duplicates The usability of this complex element is influenced by the design of the rules item entry (differentiation between text entry and item selection) offered alternatives (item and ...


0

You can use type assist within a text field, just like in google search text box. It can help to get options to select, as well as add new entries.


1

• As Tomaz said, break down the form in simpler, logical steps; • Indicate the number of steps in the interface at all times; • Avoid sub-steps; • Use a single column for input, otherwise it might confuse users about what's optional and what's required (http://baymard.com/blog/avoid-multi-column-forms); • Each page should check for errors before ...


1

I 100% agree that there should be an option for a user to be able to cancel or go back rather than be forced to just save a draft. The following links are to iOS Human Interface Guidelines and Android Design Principles in an effort to support this arguement: iOS Human Interface Guidelines (Navigation) - ...


6

In any population, there will always be some outliers who don't do things the way most of the population does. Someone, surely, will fail to capitalize their name. What's the drawback, if users don't capitalize their own name? Do these names get used in a context where it might reflect poorly on the company? Do the names get used in legal documents or on ...


0

Why don't email companies provide a fix for this? For example, why don't they leave the filling of the "to:" field until after the user has typed the email? They do. There are commercial add-ins available that check for external recipients and asks users to confirm. This solution at least provides accidental sending of emails outside the company.


3

I would keep the Organization and Individual options as radio buttons. Keeping one of them checked. If user selects Organization, I will just hide the Mr. field. And replace the address field with textarea to avoid multiple elements and clicks. Something like this:


1

Suggest getting the user to nominate via radio button which they want to enter, and only displaying the relevant fields. Would also suggest flagging optional fields, especially if (as is usually the case!) the optional fields are the exception.


1

It is better if user is in control of whether fields auto-updates on contat selection or not, hence provide a top 'Auto sync' checkbox in the fields panel. If auto sync is set, fields automatically update on contact selection, If auto sync is turned off user needs to explicitly update the fields by either double click or right-click menu button on the ...


2

Delete is a destructive action. Some systems are good in allowing you to undo deletes (e.g. email), but majority don't have undo actions and so when something is deleted it's gone for good. Going by the principal of "poka yoke" (mistake proofing). You want to design the interface to reduce unintentional deletion of data. Having the delete action within the ...


1

There's two ways you could go about this: If users must configure payments at this step, then your button could read Configure Payment or Choose Payment Option. Since changing subscriptions and setting up payments are multi-part steps, it may be best to break the process into two steps. Save and Continue then Save or Submit Payment on the next screen ...


1

To answer your question: Yes, you can! But, really, I believe this might be more than changing that green notice. Here's what I would do and why (this depends on who your target audience is and what your team is willing to build, so pick and choose as you please; any of the following will help): Login Form Remove asterisk and "denotes required entry" ...


1

You can start by defining the priority of the fields: Primary fields are fields that must be mandatory otherwise the system can’t even work. For example an email needs to be verified before a user can access the application. Secondary fields are fields that you should make mandatory otherwise the application has no value for the user or for the customer. ...


1

The stack exchange has the answer for your question. you can use highlighted pop up kind of messages show up for mandatory fields like the Username, mail and CV kind of fields one by one while the user leave any field empty.


0

Some fields are more important (CV), some less (driver license), but this should not be communicated to the user. It's not about telling the user the importance to the recipient of each field, you just have to visually communicate which fields are mandatory and which are not. The convention is to use an asterisk beside a label, but you should always ...


0

@Michael Lai's answer was a good one and it put us on the right track. The workflow we eventually selected was a two-phase UI like he suggested, however user testing drove us to switch the workflow from his suggestion. Users will chose a leader first, then choose other selections (with the leader already selected and disabled so it can't be unselected). ...


1

If your space is limited you could try a solution that I've used for a recent project with similar requirements, using this plugin for multi select . Everything related to the plugin is editable (filtering, columns number, etc). It allows users to: Filter Select all Select all from a region (the ones in bold) When you filter, as any filter, only the ...


0

This is similar to what BrunoH suggests: http://grasshopperpebbles.com/demos/multilinelist/get_selected The sample is at the bottom of the page, after a lot of code. It's not that I recommend this plugin, I only wanted to show an example of a multiline selection artifact. Given that you must display several names, and that the availabe screen width is not ...


0

Another option to consider is Infield Top Aligned Labels. Most websites today either use top aligned or infield form labels because they aren’t aware of a better way. http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/


0

My suggestion is not to put the information in one line but in a more readable way. If you read an address you would expect something like Name Street City / ZIP Instead of Name, Street, City, ZIP So why not populate the Selectlist in this way. This way the user would have to scroll down more, but it is easier to find the right tenancy.


1

Google does something like this for Google Web Fonts: As the user selects options, the estimated overall impact on performance is displayed in a "speedometer"-style graphic. Some explanatory text is displayed below the graphic so users can easily understand the effects of their selections.



Top 50 recent answers are included