New answers tagged

2

What is the ideal scenario for test and save buttons? Another way of approaching this is instead of having two separate buttons for 'test' and 'save', is to incorporate the test connection into the save functionality. This way it becomes more of a validation process (the system prevents you from failing) rather than putting the burden on the user to ensure ...


1

To answer one part of your question: Should I allow connection to be saved without testing? A good design would probably be to automatically test when the user presses save (if it hasn't been tested already). A related question is: should you allow the source to be saved even if the test fails? I probably would allow this (with a confirmation dialog ...


0

Having related dropdowns placed side by side is probably one of the more confusing UI pattern. You can never predict how a user would interact with 2 dropdowns and never assume the user will always select the first dropdown follow by the second. What if the user chooses the 2nd dropdown, would it affect the result? 2 dropdowns usually work best with an ...


0

I think Abhishek Sharma is on the right track. However, I also think the following isn't clear: When I look at the above, it's now clear to me that I've selected Create a live photo, but it's not clear to me what the Video | Photo option is for? I guess it wouldn't take long to figure out, especially if you're using it, but I do feel it's missing ...


0

See the color: At very first look to this image, I can't able to see "Create A live Photo" as it is in dark color over the dark BG. Read more about Colors You have logo in pink color you can use grey color for inactive links. if you want to remove this small triangle you can remove it, it will look good without this also. Hope you understood the ...


0

I think the cause of the confusion is your colour choice : the use of black and white is so mixed such that it is unclear to the user "including myself" which one is the highlight colour and which is the background colour. So, my advice : change highlight color, it should be unique and obvious .


1

There are serious usability flaws in the placement of your buttons that none of these answers address. Your Next and Previous buttons are too close together. Users can click one when they mean the other on accident. You should use directional mapping and place the next button to the right. This is what users expect and are used to when they paginate and it ...


0

Using two different words for the export (e.g., export, save) is a little confusing. It's better to be consistent; make both export or both save. If you're going to specify tag free, separate that from the action. Here are some formatting alternatives: EXPORT | TAG FREE or EXPORT (TAG FREE) EXPORT | WITH TAG or EXPORT (WITH TAG) Watermarks are fairly ...


0

All of your examples are verbs: sign, register, donate, be Regarding click-rates; any answer given will be results for a different user base. The only way to truly know what is more successful for your use case would be to do A/B testing with your users, and study the metrics/measures related to your site. Perhaps you could use general statistics if it ...


41

Be a voter > Vote now Christopher Bryan and Gregory Walton (2011) conducted a study for understanding if using a noun or verb statement have an influence on user motivation. According to the results of their study, participants in noun group expressed significantly more interest, 62.5%, in registering vote than participants in the verb group, 38.9%. ...


1

Why are you using 'Export' word in red button and 'Save' in text Button? I see a good approch. But Text Button looks very different, I thought it will have different funtionality. Both buttons belong to same group. So design keeping consistency. See above, it looks like both are clickable and are buttons.


2

What about simply do not use shapes for tags. Shapes evoke affordance (the idea that an object is usable in someway), while simple text does not. Check the image below. download bmml source – Wireframes created with Balsamiq Mockups


0

You should use the correct icon to convey the image of a tag. Some simple examples are below (to be scaled down). Personally I like the rectangle with a folded ear. I remember having seen a Stack Exchange site which uses them in a more stylized version (B&W), but I can't recall which one.


3

I think the main problem is, the shape of each tag (i.e. rounded corner with inverted color) and the way they are presented together, makes them look like they are clickable keyword tags that people. The only way to eliminate the possiblilty of people clicking on it is to get rid of that perception of affordance. Keep in mind, the inverted color also ...


0

From your observation there is clearly a disconnect between the way the tags are styled and the users' expectations of what the interaction with them should be. Without knowing what the rest of the UI styling looks like, the only suggestion is to align them to other static UI components to avoid the confusion. You can also change the mouse pointer behaviour ...


0

Imagine that you have dbl click on single click I mean your mouse need a repair i.e you click once but mouse behave like you made a double click so then what? Maybe if some object is valuable, to delete user must type the name to confirm? Inspiration from deleting repo on GitHub


0

RuneScape has a pretty good idea here, honestly. Items can be dropped by right-clicking and selecting the "drop" action. This would drop the item to the floor, which can then be picked up by yourself for the first minute, and after that by anyone for another minute. If the item was not tradable, it would just disappear after a minute instead. If the item ...


1

How about a right-click? Do you store the users control options? Maybe you could give them an option to use double-click (or maybe even right-double-click) without the warning from now on, after their confirmation.


4

Double-clicking buttons is odd. Usually, in the OS, double-clicking is a shortcut for clicking once (selecting the file) and selecting "Open." Rather than an "Are you sure?" confirmation I prefer an undo action. Confirming every action you take gets tedious real fast, and after a while users click the "Yes" button without thinking about it. Undo, on the ...


12

As you have pointed out, the double click is not a standard behaviour that your users are familiar with in the situation you are describing. It's not good practice to use non-standard interactions where you could use a standard one. Irreversible actions (such as deletion) are usually followed up with a 'sanity check' like "Are you sure? [Yes] [No]".


2

Header If you have a lot of records then probably good pattern is to keep the always header on the top of the screen and records to be scrolled "under" it. Action bar as a footer Then good place for actions and well as save/cancel button is bottom of the screen not a bottom of table. When you select item and scroll pane action bar remains. Multiple ...


0

The possibilities that I can think of : You can place all your actions on the fly that is, as and when you select a row or a cell have the actions dialogue box appear on top of the selection. If you have a fixed height for the table then it makes sense to keep all the actions at one place.


2

When do those buttons (Save and Cancel) appear? If they should appear when the user edits the table directly, then I think it would be a good idea to put buttons in the action menu. Save and Cancel are actions too, and the user already knows where actions appear. Maybe you can display buttons always in an action menu, but if a particular action isn't ...


1

There is always trouble when you start to let users design their own interface - whether they are experts or not. I'm guessing you already have a style in place for the UI that users are building (or a range of styles). If this is the case then you probably already have an idea of what primary (a "Save" button for instance), secondary (a "Cancel" button for ...


0

I'd naturally describe A & B as "filled text button, with border" and "unfilled text button, with border", which would make C "unfilled text button, no border". If your application happens to be targeted at Android UI designers, Android has a very specific term for D: a "floating action button". Otherwise, "Circular" or "Circular iconic button" seems ...


3

I tried to guess what the icon meant without looking at the hidden text. The first thing that popped to my mind was "go back in time", so I thought it was to restore a previous backup or a previous configuration. Nope. So, don't always assume the user will know what an icon is for -- especially if the screen already include a few dozens of them. Now, ...


0

A picture is worth a thousand words, at least when it is clear what the picture is (which it never is, as it is subject to interpretation and various domain specific, cultural or personal factors). There's no harm in incorporating words into the design (better still, use text labels), and once the users are used to it then you can either give them an option ...


5

Okay, to start with I'll say that it wasn't clear to me what your icon meant. For me, the first thing that popped into my head was "turn back time" which may have been totally appropriate for something like backup software. Other things that came to mind were "rewind", "replay", "restart", etc. I'm not saying that your icon couldn't signify "view history", ...


0

Yes there is. Swiping from the top activates an overpanel on both iOs and Android (I don't know about Blackberry). However, I don't think this is what you're looking for. The obvious reason against implementing it this way, is that it will conflict with the native behavior of your phone. Besides, how would the user know from where to swipe to trigger the ...


0

Have you tried shifting the values based on the number of digits? In other words, set the vertical offset for the single-digit numbers to remove the empty space and then move the numbers upwards as the number of digits increases. The plus side of this approach is that now, in addition to the visual- length-based sorting already present, height-based ...


12

One option you may try is to make the dark area variable, depending from the number of digits. This way the dark area will also work as a visual cue, indicating the magnitude of the number.


1

I'm working with an application that supports five languages, incl. Spanish and German (notorious for long words), here are some best practices we follow to accommodate all languages. Translators are encouraged to keep strings short. Often when a translator is inexperienced they try to translate the English copy literally. We ask them to look at the ...


2

Scaling of text according to the size of the sample, on comparable images, more often than not results badly. Lets try to work around that. Small numbers (as in single digit numbers) might look too isolated and unaesthetic when appearing on a bigger canvas. This can be avoided to an extent by making the ten's place hold a value by default (0 in our ...


20

Are you restricted to using an angled corner? If not, a box would be much more simple & sleek. Otherwise if you are stuck using the angled corner, aligning to the top right rather then center is probably your best bet!


0

It's better to have submit button at the bottom. There is no point having two buttons on same form. The bottom button will help user to fill out all the necessary details present on the form as it is scrollable.


1

To encourage user to click on your button, Use some highlighting colors suppose if your website is in Blue color, then use Orange color in order to gain users attention. Use creative labels for you buttons like for Sign Up button you can use "Why don't you join for fun?" Use Animation (LIKE THIS) Its good approch if you place it somewhere in left hand ...


1

There are multiple ways to work this out. If you don't want the user to be very much attracted to the button, choose a color for the button which is a bit more darker (say 5% - 10%) to the color of the background color that you have chosen. Sites like this will help you with that. In other way, you could solve this as @dimshik has proposed which would be ...


2

The vertical list option with right hand transitions into the category is the "correct" answer to your problem. In @adamsoh's answer this is the first image. Something to consider - the words in this list are, mostly, heavy on reading. Here are some possible improvements: Weekly shop & prep Leftover friendly Fit (and delicious!) Nutritionally Complete ...


2

Commendable attributes of Easter Egg UI: Subtlety Minimalism Discretion Nuance I considered the above deeply, and this came to mind:


5

I think a more inviting interaction should be not just a simple button :) I suggest that you use some kind of a slider element with a funny micro copy... Or if you have the time, create a rotating knob that goes up to 11. download bmml source – Wireframes created with Balsamiq Mockups


7

This is from the "advanced features" panel in the controls for Alfred Version 1: It's not intrusive, but anyone who's reading through the page will be tempted to click on it! In general, here are some questions to consider: Where in the user flow does the opportunity to click the button appear? Which users do you want to avoid distracting with it? ...


3

You seems to have a lot of links. I would usually reserve buttons for call-to-action and limit them to one or two. This is to prevent users from drowning in a sea of buttons and to differentiate them from normal links. The buttons show you a list of recipes for that category you would then click on them and drill down for the details If all the ...


3

The ambiguity of toggle buttons As for the pause button, this is part of the inherit state/action ambiguity that is inherent with toggle buttons. See this answer and this thread for more. Command vs Query From a cognitive perspective, the question a designer needs to ask is whether the user will be in query or command mode. In query mode, the user wishes ...



Top 50 recent answers are included