Tag Info

Hot answers tagged

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 ...


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 ...


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.


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 ...


4

You've got it almost right. The Enter key and the OK button Enter is the access key for the OK button, by default. As with all defaults, the user's actions can modify this. In the case of Enter and OK, users can only modify this temporarily, because the dialog box will (is supposed to) revert to the default. At times the OK button cannot be accessed by ...


4

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


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 ...


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 ...


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 ...


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 ...


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 ...


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 ...


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 ...


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 ...


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 ...


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 ...


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 ...


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 ...


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 ...


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 ...


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

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

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 ...


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 ...


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 ...


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 ...


1

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


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 ...



Only top voted, non community-wiki answers of a minimum length are eligible