Tag Info

New answers tagged

0

<< | >/|| | >> | O Back - Play/Pause - Forward - Stop From a UX perspective I see it this way. Keeping the stop button is necessary, its an easy way to start from the beginning again. At the same time it needs to be a little away from the play/pause button to avoid accidental stopping of media play. Color code the same as it used to be on the dvd ...


0

Download would be the more preferred term to use as when a use clicks an excel, word or file link, they are downloading a copy to their computer/device. Export is commonly used for software applications when converting a file into another format.


0

Yes. It is generally: |Back|Stop|Play/Pause|Forward| These roughly correspond to a timeline, as if one was scrolling horizontally through the video.


0

If the user only has the option to download in various file formats then all you need is "Download as [format]". In my experience the phrase Export is used in the phrase "Export to" and implies that the data is immediately going to be opened in another piece of software and then can be saved there to the Desktop or wherever else the user chooses.


0

"Export" is a more general term used to describe sending something somewhere else, but in software it very often involves downloading, like how exporting contacts to .csv will provide you with a .csv to download. When export does not require a download, it usually is phrased as "Export to [programname]" "Download" is specific to simply copy/saving a file ...


4

If you think of a video as a timeline, then for western cultures, the intuitive order would be: << | > | >> See one of my other answers for more information about direction as it relates to representing time in an interface and how the common left-to-right paradigm is representative of western culture's influence on technology. Back ...


0

Your animation is weird. I think it will confuse the user. The classic star/heart filled when you favorite the associated quote is the best way. For instance, if you see this icon: "♡", and then this icon "❤", you will understand that the second is favorites. The best way is always the most understandable way. If you want to add an animation, you can ...


2

For link colours: You should at least be consistent (stick to one colour). I would say you should also leverage the user's existing knowledge of what a link in text will look like, and follow the existing convention (although if you have a really strong design concept that this will clash with, the "following convention" rule is not set in stone). For ...


8

About links Here a fine article about consistency : http://www.uxbooth.com/articles/consistency-key-to-a-better-user-experience/ A few lines The design of your site should also be consistent. Users remember the details, whether consciously or not. For example, users will associate a particular color on your website as the “link color,” they’ll ...


0

A reasonable compromise would be to have the button not highlighted (have a neutral background color perhaps) when it's on the off state, and highlight it (change background color) when it's in the on state.


1

To the right. Nearly all users have an existing mental model of where things "should" be. I wouldn't break the scroll-control-on-the-right convention unless a very specific product or user goal demanded it. If that goal is too confuse and then annoy, go for it.


2

Supporting the case for placing it on the right: Normally a user would read, or at least scan, the content before thinking about scrolling. In that scenario it would make more sense to have the scroll buttons on the right side (assuming of course that the content is being read left to right). The scroll bar position for vertical scrolling is on the right ...


0

Your "checkbox button" seems to have the following function : allow the user to open a filters or options view with additional items that you do not want to keep on the main view, for instance because they are useful in certain rare cases only. Keeping the checkbox with no background and no caption is not an option because : it would be understood as ...


0

Ideally the buttons shouldn't be so small that they're difficult to click or you accidentally click the wrong button. Apple recommends 44x44px and Google 48x48px. Here is the Google link http://www.google.com/design/spec/usability/accessibility.html


0

How about a simple "Employees - tap to edit" header and table items that instantly go into edit mode when clicked ? The reasoning is the following : this is explicit it keeps short and will not result in overcrowding the interface and UI trends are such that most displayed elements now offer some sort of interactivity so it is likely that users will try ...


1

I'd go for: Option 3: Use a vertical ellipses to the right of the Call button that opens a flyout menu with two options: Edit and Delete. Mainly because this option is the one least likely to result in accidental deletes or unintentional entry to edit mode, but also because these are less common secondary actions but which still need to be ...


0

Touch interfaces on mobiles are not new any more. Users have learned that a button behind a glass screen does not always have to look like a real button for it to be pushed. Therefore bevels, shadows and other graphical tweaks to enhance the affordance of buttons as such are more and more obsolet. Buttons still need space to be pushed due to the constraint ...


0

Every one is moving towards flat design,there is not much of rounded corners and shadows giving depth to the button.Even apple has moved from skeuomorphic designs to flat.Now we don't use background images for a button in native apps mostly.Buttons in native apps now are simple and elegant without much of gradients.I feel the move towards flat design makes ...


0

Buttons may appear smaller, but from a usability perspective you should ensure that they have a click target of at least 45 x 45 points, shown here by the grey box. This ensures that people are able to hit their intended target, it's worth noting that there doesn't have to be a visual indicator of the click target. It's also worth noting that I used ...


0

I wouldn't say that this is always an intentional design decision. People building interfaces with pixel-specific sized buttons are going to end up with smaller buttons on displays with a higher pixel density. Pixel density on phones, tablets, laptops, and now desktops, has increased a lot in the last few years. Older apps/sites aren't always designed to ...


2

I would show a "Skip" button. This reinforces that the step is optional. It aligns more readily with what the user is likely thinking. It might be worth being even more specific by labeling the button "Skip this step" or, even better, "I'd rather not share my mobile number." (Or, for you Melville fans: "I would prefer not to.") It would also be good, ...


7

Icons are a double-edged sword. A good icon is grokkable and serves as mental shorthand for a user, improving interactions. If they see the traditional save icon, they probably won't need to read the label, and in some cases the label could be omitted to save space. This mental shortcut reduces the user's mental load. Good icons match conventions, are ...


1

I think it's your second choice explanation for why everyone doesn't save automatically. . . "It's technical or technology limitations of the specific job and code language and architecure already in place. " Saved buttons are still used because lots of back end programers haven't learned to program auto saves well and haven't had experience with new ways ...


2

In a study for designing the UI for a dental system from 2007, they found: One lesson learned from this study is that interface itself, whether GUI or TUI does not correlate with good or bad user performance. Because users have different needs depending on the application and their technical skill level, there is no good answer for this as a general ...


2

Usage of auto save button is great but it should not be forces to user. It works like a charms in google doc, email etc scenario. But I'd never implement it with forms because 1: It takes control from user 2: Auto saving data will fire lots of server calls 3: With auto saving forms a false alarm might send to user that some one is storing data without ...


4

It really depends whether we're referring to Save as simply an action which persists the users data without any wider impact, or whether this could also apply to other scenarios. If my Save action has an impact on something wider (e.g. applying some settings that cause significant changes to a system), then losing manual control over this action could be ...


2

This reminds me of a discussion a while back about the current save icon, the floppy disk. The OP thought the floppy disk was outdated and youngsters didn't recognize the metaphor. The discussion consisted of people trying to come up with an alternative. My opinion on that matter was to remove the save button all together. Documents and such should be saved ...


1

The auto save is a great idea. Agree with you that Google docs and Gmail using the auto save are the best examples to save data/progress automaticaly. But this may not be ideal for every application. Imagine trying to play a game which autosaves every couple of minutes, it would be annoying. This would be more annoying if the saving time is more. Google docs ...


0

It sounds like you need to edit your buttons! Not so much to save space, but because that's more buttons than a user's attention can accommodate (even when there is space to show them all). In other words, if you are displaying 20+ buttons, they might as well be invisible most of the time because the user isn't constantly watching them all. So, your UI ...


0

Be wary of solutions that require the user to hover over a UI element: these won't work with touch-based UIs. Some extra visual strategies to explore: If few elements are interactive on your UI, increase the contrast for both active and inactive UI elements (e.g., a bright-coloured background for active elements and a light grey one for inactive ones) ...


0

There are a few strategies you can try: You can simply remove any hover-over or on-click style changes to show that something is not interactive You can remove any stylistic embellishment (e.g. borders, shadows) to indicate a different state to other active UI elements You can bring up a prompt or tooltip to show why the component is inactive You can use a ...


0

For large applications like the one you are describing, I have seen a hybrid approach to navigation - navigation drawer AND drill down/back tree like navigation. You can use the drawer to navigate between the large sections of your app (the applications). Each application would have a "root" or "home". The hamburger menu icon would only be shown at this ...


2

A few suggestions: Show a clear button in each field. Focus on the field after clicking so it is possible to directly type something else. I don't know if my example is the best way for right aligned numbers though. As soon as one (and only one) field is left empty, show a question mark besides it. "Calculate empty field" in conjunction with the question ...


4

If the point of showing the image is some kind of walkthrough/instruction/tutorial overlay some arrows highlighting the relevant parts. Not only will it clarify it's an image it will also guide them what to look at.


0

You can have different cursors, like cross. Making the cursor to pointer would make it so that it's understood as link, yes. But the idea was to try some other cursor, like "crosshair" or "not-allowed". Try out cursors here: http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=not-allowed


2

adding a "photo frame" border (remember y'ole a img border?) blockqoute styling (establish the feeling of a "quote" as a chunk of foreign content by using horizontal offset or " styling) scaling it down to a (bigger) thumbnail, say 50%, that opens in a lightbox - the compressed graphics make it apparent it's an image, the lightbox re-confirms it and ...


1

After seeing the screenshot, I'd: Give the image a thicker border Retake the screenshot, snipping some of the button off rather than showing the entire thing Update the caption underneath the image to inform that it is a screenshot - use less copy. The purpose behind doing all 3 rather than just one of the three is to try and mitigate different types of ...


6

Skewing the image and putting it in a frame may be enough to break the illusion. This is an extreme example of this:


6

You can do several things in this case. For example, you could Photoshop the screenshot in a device (a notebook, iPad, whatsoever). People don't expect buttons in a picture of a device. Besides, it gives the screenshots a more realistic feel: the product is out there in the real world. What I would be worried about is the overused practice of using devices ...


0

Is this a help page or just an intro page? If it's an intro page, do you know for certain that the UI needs to have a page explaining this button? If so, are you then certain that the problem doesn't really reside somewhere else on that page? It seems to me that if you have to explain what a button does out of context of the actual button, you've got a ...


1

The image could be grayed out or has some pattern overlaying it and when user hovers the image, the images fades into a color one or the pattern disappears. Or the image is scaled down and resizes when interacted. This gives hint that the button is part of the image and not actual button


0

Try to think off and design journeys like this to be always going forward. (I'd lose the "congratualtions" screen and put this information on the summary page. On the sumarry page I'd put a "remove free subscription" link. This then takes the user to a summary page with the subscription removed and no "back" link.)


0

Most users click on the buttons habitually. They really don't read the texts. every button positioned in the right side (in English context) means Next. Changing the label of a button is a type of action which makes an experience without confirmation and most users are not aware about it. So you simply miss the target. Why not having both Next and Skip ...


1

The simple fact is that users don't look. If the button said next on all the previous screens they will never notice that the text has changed. I did a screenshot of a window for a "What's wrong with this?" example with the next and back button reversed, and it is always the last thing everyone notices. A better solution might be to have a checkbox on ...


0

From personal experience I say make them full width and put a decent amount of padding in them. I have big thumbs and It's really hard for me to press buttons and icons unless they are a decent size.


2

Are we talking native or web here? If native, all the OS vendors provide best practice specifications on touch targets as well as their implementation. Search for Windows / Android / iOS design guidelines. Otherwise minimal target averages at around 9mm with 2mm padding - see: http://www.lukew.com/ff/entry.asp?1085 (some good links in there) Since you ...


5

Reconsider the whole paradigm. No matter where you place those arrows, they will not offer a user friendly experience. First, placed outside the box, they are out of context... only slightly but still. Second. The click to move is not nearly as effective as a drag on the camera image to move it. I suggest you make the image draggable to set adjustment. This ...



Top 50 recent answers are included