Tag Info

New answers tagged

1

I think where the confusion comes is in your question where you say the options are "Selecting a Tax type in a retail store, Options are Inclusive and Exclusive" .. do you mean inclusive OR exclusive? A quick run-down of radio buttons and toggles: A toggle button should be used when there are ONLY two mutually exclusive options. Think of it like a ...


0

This is a bit more of a coding & development issue than UX IMO. Ideally you should try and use CSS/html/whatever you're using (not at all familiar with windows forms) to do it natively. Using an image for a button isn't good practice; it does have UX implications for accessibility (how does a blind person know that's what they've got to press?- hope you ...


1

Call the dog by its name I think that if you're running into such terminology problems, you should really 'call the dog by its name'. That is, be explicit. So only provide a save button, but then ask the users explicitly whether to do A or B. Same like what Google does when you modify a recurring event:


1

I feel in the example you provided those terms for 'Save' and 'Apply' would be quite confusing (unless I've misinterpreted). Typically when save and apply are used together (from what I've seen), it is for the following functionality: Save - save edits you have locally made without everyone else seeing what you have done (like saving a draft) Apply - apply ...


1

Differences between Apply and Save In Windows 7 Preferences center it's easy to visualize the difference between Apply and Save. When you go to change your background you pick a new image, then if you hit apply it changes the background. However, if you close the Preferences screen it will revert back to previous background. That is because you didn't hit ...


3

Great question! The save button definitely feels redundant. Many websites and apps take the approach of applying user action without confirmation but providing an undo option. For eg: Deleting a file on Google drive, will not ask for a confirmation. But it will give the user a notification that the file has been deleted along with an option to undo the ...


1

They're very bad UX, and the main reason of opposition to Material Design as a whole. To answer your specific question and why they do it: Raised buttons behave like a piece of material resting on another sheet—they lift and fill with color on press. Flat buttons are printed on material. They do not lift but fill with color on press. Button ...


0

Think in terms of process and action flows. What you're doing is an edition action, let's say the main action. Inside it, you have a subset of actions, in this particular case you have these: search add delete Each one is a subset of the main action, and each one stands on its own. However, the main action remains "open" since the user didn't save or ...


2

It's a bad design pattern in the context of the example...where there's just text floating in space by itself. But in context, it maybe a perfectly valid design pattern. Controls have their own affordances (or lack thereof) but also gain (or lose) affordance based on the context they are placed in as well. This is why it's a challenge to build pattern ...


4

Well first the button on the front of the iPhone isn't the power button, they place theirs on the side as well. The reason for not putting the power button on the front is that where the users can most easily reach, so that real estate is used for functions that occur more commonly like backward navigation such as the iPhone. Also many other phone ...


2

The most important factor in your decision should be "don't make the user think." The ellipsis is standard for truncating, but if you also intend to use it for a link, you'll want to use some sort of visual link convention (an underline, a link colour that you're using throughout, or something to that effect.), but it must be both obvious to the user that ...


0

I suggest you read a Technical Report from Carnegie Mellon's Software Engineering Insitute called "Supporting the CANCEL Command Through Software Architecture" that goes into a lot of the ins and outs about what to present to the user and how to implement it in software. There are also citations in the report to the research that supports the users' needs ...


3

The left field answer to this is to make your calculation process asynchronous. In other words, don't trap your users on a page where you don't know how long they will be stuck. Instead, have the "submit" instance an asynchronous backround process, which will then notify the user once completed, at the end of the async process. Basic user flow: submit ...


1

I'm not a fan of the cancel button as the only solution - would only encourage people to press it and probably would probably make them more impatient (don't think of a white elephant on a stool...dammit!). I'm assuming you have a warning about the length of time the calculations may take before they actually submit it (Warning - your calculations may take ...


0

the first thing I was wondering was the fact that you mention that you can imagine that your users are more annoyed by it than you are, this seems like a perfect opportunity to go and figure that out, in the field :-) I don't get why somebody would want to press the "cancel button", as there is, according to you, not much else they can do. There is some ...


0

Design for your workflow! Model out why and how your users create records. For example: If users are likely to open the page with a clear intent to create a record, then placing the button immediately at the top left allows users to accomplish that task with minimal friction (no need to hunt for the button) If users need to scan the table before ...


0

Continuing from Razor9012's answer: Placing the button at top is a good idea. Reason being let's say if your table has numerous rows which covers the entire viewport. Then in this case, your button will be hidden from the viewport. Users will have to scroll down to actually add a new row. Most users will not even know that there is a add button if they ...


1

The position of the element depends on the amount of content. If the element is positioned under the records, a user needs to scroll further down as he adds more rows. Looking at the Floating Action Button Google's Material Design Floating Action Button is often placed at the bottom right side of the screen and is positioned absolute from the elements on ...


0

From what i've seen top right seems to be the most common placement for the add new button, with the exception for middle eastern region where they read from right to left. http://blog.mailchimp.com/wp-content/uploads/2013/06/Redesign2x_iPad.png http://blog.datalicious.com/assets/sites/2/TagSummary1.png https://www.submarinecrm.com/assets/post-shortcuts.png ...


2

This is a classic case of guidelines that are in tension. When guidelines conflict … you compromise Since your site's style guidelines require you and the designer to misuse command buttons in place of radio buttons, many of the other rules go out the window. Your question—though not your illustration—lists three choices AND it says "etc." which I take to ...


1

You should keep the button labels as short as possible and they should be simple commands. So yes/no is better than long descriptions for each button. However, rather than yes/no, more descriptive commands like discard/keep are preferred. The description should, instead, be placed in the text area of the dialog. Take this example from Microsoft's Dev ...


4

I like to label buttons with the action they perform where possible. In the dialogue you describe, I would try something like this:


1

Yes the position of icons is critical in buttons especially if you are working multi lingual applications. Having worked on web applications with Arabic as the primary language, I can tell you it is important that the right-to-left culture or vice versa is reflected in all aspects of UI, including placement of icons.


1

Option 1 is cleaner and a more direct visual translation of "this OR that". If you added a 'Mode' label like other controls it would be more descriptive and recoup some of the benefit of the long form option. It's interesting the second option is given a lot more visual prominence with color and size. What is the goal here? If it's a new feature / major ...


1

In terms of order, the primary (in terms of user association) identifier for the data row should always be on the left in a left to right language localization. Note that if you have a unique ID for each item, this may not be appropriate if it's not what a user themselves would primarily associate with that item, or the main feature they would generally ...


1

I propose you do this like on YouTube (and the same solution is proposed in the accepted answer of the question you link to) when there is a table with videos you uploaded. There are some actions, like "Delete", "Publish", "Edit" etc. for each video. The Table has one more column allowing selecting a video (this is typical checkbox). You can select multiple ...


7

3 small action buttons on the left-hand side of each row With a LTR languages, one can assume users will first inspect the row (starting from the left) and only then decide to take action. So placing the buttons on the left side is somewhat counter-flow. 3 small action buttons on the right-hand side of each row Pros: Buttons are easily ...


1

I think it depends on the main purpose of that table; if Update/Delete, put it first else put it last. In most cases though, you probably first want to identify what you want to edit/delete; in that case putting it at the left side forms clutter and is better to replace it with a checkbox and to than put the inline controls at the right side instead. Also ...


0

Why do designers do this? Concealing information in this manner helps designers display content in a way that's manageable and complies with relevant theories on how users seek/consume content. Is it good UX? Yes, see: Information scent Studies show that users will continue to search (read: click through) for information that is more rewarding than it is ...


0

Another reason for a Read More button is to allow the site to show an advert within the body of the article without creating a "false floor", which may lead users on mobile devices to erroneously believe the article to have ended. http://www.nngroup.com/articles/ad-placement-mobile/


0

When I was at Microsoft and we were building the UI component libraries I tried a little experiment, that is, I held back on the DataGrid & Tree Control(s). I wanted to see how the user base would react given well these were expensive controls to make as well. Something interesting happened, ListBoxes, Radio + Checkboxes were starting to be used in some ...


1

Credible source: "About Face 3" - Chapter 21 http://www.amazon.com/About-Face-Essentials-Interaction-Design/dp/0470084111


0

You can find the definition for UI elements on the link below. Here is how the checkbox and radio buttons are defined. Checkboxes Checkboxes allow the user to select one or more options from a set. It is usually best to present checkboxes in a vertical list. More than one column is acceptable as well if the list is long enough that it might require ...


2

I think what you're asking for is a canonical set of definitions/guidelines for standard UI components. To me, a useful set would be: Concise, so readers can refer to it quickly. Precise but not too technical, so that it can be useful for both professionals and lay audiences alike. Comprehensive enough to cover all major controls but not so pedantically ...


3

There are a couple of websites that inform you about UI components and patterns. I am listing the most useful ones: 1. Welie A comprehensive list of UI components, principles and patterns segmented into user needs, application needs and context of design. Their library consists of Navigation, Search, Data, Shopping, Input, Feedback and Miscellaneous ...


0

I think most of these items are still skeuomorphic elements from a time before the visualized consumer computer: A floppy disk A phone icon A radio button Folders They were helped to accomodate for the big leap into the digital world. Nowadays most of those items are really outdated or bluntly unknown (floppy, the classic phone icon). So that will ...


5

So the chosen answer, while good, is incorrect as regards this particular screenshot. I am actually responsible for implementing the button in the screen shot. I can't speak for every site but I can say that the thought process (as far as I know) is basically the 3rd option given by tohster. QZ only shows the read full button when you navigate directly to ...


1

Going by the limited information we have, I assume that we are talking about something along the lines of a "planned transaction" form, where there are three actions: Primary Action 1: Authorize will actually cause the transaction to happen Primary Action 2: Reject will prevent the transaction from happening Secondary Action: Cancel will NOT have an ...


1

It depends on the reason you are using an icon in addition to the Text. In the examples that you have mentioned, I see two different reasons why the icon has been included Icon is being used to visually represent the task. Like you have done for the Shortlist button. Over time users would recognise the icon and not need the supporting text for their ...


5

I had a similar situation when I was designing an accordion menu. here you can find the related article. For navigation items such as previous and next I would use the icon based on the direction i want to point. (right placed icon for next, left placed icon for previous). For other cases left aligned icons feels more familiar.


1

To me, it depends if it's to perform an action or for the flow. For the flow, you'd want to "point" people in a timeline direction (as with the next button, where the arrow is after the text), where it a "back button" than the arrow would be in front of it, as per convention. The position of "actionable" icons, to me, doesn't seem to affect a whole lot, as ...


17

There are a few reasons: Robot defense. Content sites (e.g. news sites) sometimes use these buttons to provide a rudimentary defense against content scrapers. By showing only part of the content they prevent scrapers from loading the page and parsing the article. This is obviously very crude, but it is still effective. Affirmation of user intent. ...


7

Quite the opposite, there are several good reasons to do it. Take a look to this article (I don't fully agree with all of it, but you'll get the gist of it) They are important for several reasons, most importantly because they allow designers to compress content on the home page. By compressing content, you fit more content in less space. This means ...


1

If all the information in the steps (Person; Relation; Reference; Files) is mandatory, and you are worried that there is a high risk of failure to save (timeout / system failure), then it would make more sense to make this a multi-step process, and replace 'Save' with 'Next'. Of course, you can also auto-save on opening of the next accordion, and achieve ...


0

I would copy the idea of having IOS tab styled buttons in a horizontal row so user can scan easily from left to right. So if you put the buttons in horizontal row like i have shown, user eyes need to scan the row only once...In case of dropdown or vertical layout...User eyes fixations are a lot more so difficult to find the right button... Put the most ...


1

If you have space issues, you can always use dropdowns, like this (closed and open states): This works as a select element or a Jquery selector or whatever. Alternatively, you can make the options radio or checkbox input (the latter if options are multiple). This way, you can save space and the element has an expected affordance most users will recognize ...


0

Use Radio Buttons Here is an example that may seem more aesthetically appealing and fits your requirements. download bmml source – Wireframes created with Balsamiq Mockups Here are the Cons to the above design There are now 2 click actions instead of 1 It is slightly more difficult to mentally associate the radio buttons to the "Add" action ...



Top 50 recent answers are included