New answers tagged

1

Even though this is an older post, the core issue remains. ChrisF makes a valid point--core functionality of the Web browser shouldn't be disabled unless absolutely necessary. Also, adding text instructions may often be overlooked/ignored by users. A good possible solution is to incorporate some JavaScript that will alert the user if they attempt to use ...


0

Depending on a couple of factors: Assuming the user lands on a study case only from within your website, you can omit the title in the "Previous" and eliminate the repetitive entities in the next, e.g "Next: Brand 2" instead of "Next: [CASE STUDY BRAND 2]" Assuming that you go social and there is a case that the user lands on the study case from other ...


0

Symbols on the buttons warn of mutable state Some clickable things in web pages and applications, like hyperlinks, are immutable. Meaning: you can undo clicking a link (back button) clicking the link again has the same result (go to same page again) By contrast, certain other clickable things mutate persistent state somewhere (often in a database). ...


1

How about having a "bookmarks" panel, with a means of setting a particular bookmark as a default, and then having a "play bookmark" button on the scrubber control? If there is a default bookmark at the start of the piece and no other bookmark is set, "play bookmark" would replay from start. If, however, any other bookmark is set as the default, "play ...


1

I propose having three symbols. If other action-symbols are appearing in buttons, then place all three of these symbols into a single button a button (a circle or (square) rectangle). A vertical line, and a left arrow (as seen in , Kevin's answer, Samuel Kelemen's answer) A comma A right arrow This may be cramming things a bit, which could be ...


0

When you combine the play and pause buttons, technically what you are doing is removing the play button. The play button is traditionally supposed to start playback from the beginning of a track. The pause button can both pause playback and restart playback from the current position. The combination play/pause button just does what the pause button does.


2

Joining the brainstorm... I feel this should be more of a comment to some of the previous ideas. Borrowing from music notation and the general idea of the beginning of a score: Or, more correct maybe but less recognizable (Da capo): [ edit [ Or even with the 'real' note bar? In my opinion, the second one works strongest and connects best to ...


1

The icon should visually represent the action(s) performed when clicked. In this case, the action is: Go Back (to the beginning) Play (or continue playing) The icon below is the most clear representaion of these two actions in sequence.   This shows 'go back' leading directly into 'play', and nothing following play. Other icons that do not show ...


4

So many good ideas here... I think the most intuitive ones incorporate the concept of the scrubber/timeline combined with the play button. Here's my take: EDIT: A refined version... This is a fascinating exercise. Great question.


2

I would suggest the above or something similar to: |-> "Start at the beginning and play." Or: Edit: I realize this could be interpreted in ways that you might not want. Update: I did an image search on "play from beginning icon" and saw some of the samples from this page, but also an example using a bar like this: Here the Play button could toggle ...


2

Well there are many things you can do. aria-label and visually hidden text are the first to come to mind. Aria-label example: <button aria-label="primary (or other meaningful text)">Button text here</button>. Visually hidden text, only "visible" to screen readers: <button><span class="visually-hidden">Primary Action</span> ...


2

I think that my idea may give you a little different view of this button. Basically, my idea is very similar to the v1 of Chris Spittles's version, but the button should contain the progress bar (e.g. when you are around 50% of the progress, the button should look like in v2, but when you reach 90-95% of progress, it should look like in V1. Of course, when ...


4

As this is a take on the skip back control which is a standard media playing control. You could incorporate a progressive disclosure icon into that skip backwards icon. When held the additional options would appear. Example: When single clicked the main action would initiate i.e. normal skip to start and would stay paused if currently paused. When ...


3

After reading some of the comments and answers and realising you want this button to skip to the start and start playing even if paused I realised maybe youre trying to invent a control that isnt necessarily needed by the majority of users (an assumption) and also would add more elements to the UI and potentially cause confusion and clutter. From my ...


1

[► Opening bracket [ for the beginning, ► for playing. Also, there's a Home button on most keyboards that does what you'd expect.


9

Traditionally, the 'previous button' is used. 1 click returns to the beginning of the clip, and a double click goes to the beginning of the previous clip. Holding could also jog back.


29

IEC 60417 is a standard for symbols to put on electrical devices (TVs, VCRs, washing machines, MRIs etc.) and ISO 7000 collects these. Each costs around 100 bucks, but there is a free preview PDF. It’s the closest I could find that would standardize the common playback controls like play ▶️, pause ⏸, play/pause ⏯, stop ⏹, fast forward ⏩, rewind ⏪, skip/next ...


2

To answer the keyboard UX question, HOME is often used to go to the beginning of a media clip. Show then it would be HOME SPACE to skip to the beginning and play.


3

In products that play multiple items (videos, songs, etc.), you often have skip buttons, with icons like these: In theory, these are used to navigate between items. In practice, skip backwards more often means "go to the beginning of the current item, and if we're already there, go to the beginning of the previous item instead." You could eliminate the ...


5

How about this.. It shows 00:00 , meaning the beginning of the clip. This probably IMO is easiest to understand for a general user.. without using loop symbols etc. Edited based on comment from Crissov.


63

v1 I would suggest that the play button stays the same as it always has - a triangle to begin then a pause once playback begins. But, once playback has started, a new button appears like this: The circle encapsulating the easily recognisable play triangle is pointing in an intuitive direction: anti-clockwise, implying that we are going back in time. The ...


5

Play .. play from "where the head is now". We're still in edit concept. You need to use the icon that has to toggle between pause and play, something like However, I want to have a "Play, but from beginnning" button. Try this icon for simply restarting from the beginning. Try .. Leave edit concept (so, things could happen like "widgets ...


28

you can use a restart / reset button, here's an example from YouTube, the leftmost button


1

"How do I make it so that the images look like you can interact with them by clicking on them?" Answer: You don’t. This answer is already given by @dan1111 but I like to add the following: Is it really an issue? Then rethink your navigation. If you don’t use this as “functional" navigation, then there is no real issue here as long as the "real" ...


3

As per our friends here at UX.SE, I suggest using a drop shadow. It perhaps relies on the fact that it's surrounded by links anyway - but they indicate that there is something 'special' about the image by adding a drop shadow. This is not hugely different from Michael Zuschlag's answer, but turning an image into a button didn't feel right. A drop ...


0

I think your approach is really correct if you want to limit the user from clicking it again. Having the process loading in the same area where he clicked last time is think is a good practice. This way you don't load another screen with a progress loading bard. Also maybe you musth think how will you display an error or a success message. Maybe with a ...


0

For Most Use Cases - 2 Steps The best way to communicate "we got your request, we're working on it right now, so please don't touch anything," is to: 1. Make the spinner the focal point Place in the center of page: draw their eye (sidenote: make sure it's as smooth as can be - nothing pisses people off like a janky spinner that keeps freezing) Darken ...


1

General practice seems to be the following for "loaders" / "spinners" these days: Loader in the center of the screen with blurred / dark / whitened background Loader on button is great as well, if you don't need to reload the whole page. But instead of using only a "spinner" you should indicate the progress with words as well, like: "Saving", "Saved" / ...


0

This is a nice idea to put the spinner in the button itself. However, I think this will be useful in case the page does not reload and stays the same. In the case where the page reloads, I think placing the spinner in the center of the screen or the web form container would do a better job. It will ensure that more users will notice it and be aware of the ...


0

I would advise you to place it in the upper left or right corner of the page near the settings button. Try both and see how it looks. It should be positioned on the black background so it is easily spottable. Also, use "+" icon only to support visual processing and save screen space.


0

From your Image, I would recommend placing the Add car button with a small car icon with a + next to it below the "cars" text counter, grouping things together like this makes the user more likely to understand what it is they are doing, either that or under the Gear icon and a clear text option that says "add car" or "add my car". From the above answer I ...


1

My humble thoughts. Align the left side better and add a sort of '+' sign in the top right. Maybe make it subtle though so as to not distract the eye too much?


23

You should NOT rely on hover states. Even if you’re not developing a responsive website, now that we have touch devices, the days of relying on hover states to imply "interactability" are gone. I think you have 3 options here: 1. As long as you don't have other animations, subtle movement is all you need to draw attention to the UI elements—and a user will ...


11

Movement might provide you with an option. The human eye is so attuned to it that it need only be subtle. On completion of the page load you could consider a rolling increase in image size and shadow depth on each image, across the chevron from right to left. This would draw a user attention in without having to "feel" the site. You then apply the same ...


8

Hover-over Highlighting on hovering is worth doing, but, as you discovered, it’s not adequate by itself since the user has to make an effort to “feel” the interface to see what it can do, rather than just look at it. Hover effects also don’t do much for tablet users. “Rectangular Arrows” If you’re sure the problem is the non-rectangular shape, then work ...


23

NNG Has a great article on Making Clickable Elements Recognizable specifically for images: Ensure smaller images enlarge when clicked. Make all elements (e.g., picture, icon, text) that are associated with each other clickable. Doing so increases the target size and improves the probability of capturing an intended click. Avoid multiple calls to ...


11

These images simply don't look like navigation (as you admit) and won't be perceived as such. Users just don't expect oddly shaped images to be clickable. I don't think there is any magic solution to overcome that. It may be worth rethinking your design in order to better conform to user expectations rather than trying to put a band-aid on the problem. ...


0

The issues listed in the original question can be eliminated by separating the new content that's being created (the activity) from the existing content (existing documents). The scrollbars on the description and exiting attachment region allow their content to grow.


0

I'd use a circle. Off is a plain black border, on but unselected is a thicker, colored border, and on and selected is a solid color. Simple, and should be usable by anyone. Should scale fairly well, unless you want to use two dozen on a mobile UI (but then, I think most options will give you trouble in this case).


1

If you're trying to accomplish that on canvas and configuration buttons at the same time, i think it'd be best to lower A (OFF) opacity to like .5 or .3, then use color code for B & D (ON & Selected) and C (ON & Unselected). As of the part where you input values, it would be almost the same, but using the toggle concept to switch between ON - OF. ...


1

A proposition from me is to use the #3 option starting the message with apology, then briefly explain why the action is unavailable and finally provide instructions on how to fix the error if possible. Sorry, the action is unavailable due to this. Go here and change this. Ideally the error message will be concise with red colored and should point to ...


14

There are 3 cases. The destructive action Do you want to delete this file? Don't. Just do the action, and display a confirmation snackbar (non-blocking small widget somewhere where it is visible but not in the way of operating) that allows to cancel (then, either delay the action, or make sure you can revert it easily). The question can only be ...


0

Tabs are usually used to divide a large content into sections and then alternate its views within the same context. Nielsen Norman Group has a very good article on its proper usage. They are usually placed next to each other (without spacing) to form a single component. The reason for this UI pattern is to let user know that the information the individual ...


8

I'm a big proponent of not showing messages blocking users from doing what they intended to do. The UX solution with confirmation popups came from the Stone Age of computer UX practices. It originates from a correct assumption that if we have a critical resource, we should not let users damage it by an accident. However, an accident is called that way ...


26

I'm surprised nobody brought up the Mac OS X shut down dialog. It presents you with an "Are you sure?" window, but has a timer so that if the user walks away, expecting the computer to have shut down, it will while still allowing the user time to cancel.


135

Yes. There is a very simple, effective heuristic that adjusts to the preference of each user. Place a check box in the warning message dialog that says: Don't show this message again Which can be improved further by stating where that dialog can be reenabled.


60

These are Confirmation messages - Windows have a fairly detailed page on their guidelines. The whole of that page is pretty useful but here's some excerpts (emphasis mine): Confirmations are most useful when the action requires the user to make a relevant and distinct choice that can't be made later. That choice often involves some element of risk that ...


1

I would choose the 2 buttons approach, for these reasons. 1) The "Book" label gives the impression that you are booking a private ride service, more often associated with a personal car ride. It will be slightly inappropriate to say that you are booking a bus service assuming you will be sharing the bus ride other commuters. 2) As one of your team member ...


1

How about having two separate tabs, one for booking a car, another for buying a bus ticket. Both tabs would be laid out as similarly as possible. The button at the end would then say "BOOK CAR" or "BUY TICKET" as appropriate. That way, the user knows which option they have chosen, but the UI is the same. Consider what Google Maps does when you ask for ...


2

My answer could be a litle of topic, but I want to share my thougts to this anyway. The first question is, what does the user want. Does she want to book a car od buy a bus ticket or does she want to get from location A to location B an choose the better service. To choose the better service she would have to know the time it takes an the costs for each ...



Top 50 recent answers are included