203

Cancel might be too vague. I always like to be more descriptive when asking users to perform a quite destructive task. This often reduces any anxiety users might have. download bmml source – Wireframes created with Balsamiq Mockups Edit As LightnessRacesinOrbit made me realise in the comments, mixing up buttons with links that act like buttons (or in ...


107

Add the time of the last update. That way users have a better understanding how old or new the information is. But it only works if you can use the users system clock to determine the shown time. If you see that people don't think about refreshing the page, you can also provide a link for it:


98

There is no reason to calculate this for the user unless you truly believe they cannot tell time. "Your order will be ready at 18:12" should suffice; it does not matter how many minutes away that is. This allows the user to make a quick mental note of when to check on their order instead of forcing them to think "Oh, it's 18:10 right now and 9 ...


66

The problem with your buttons is that they are not raised above the background, so they don't seem clickable. I highly recommend the Material Design for details on how to choose between flat buttons and raised buttons, with exhaustive do's and don'ts. http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons


62

You're looking at the problem from the wrong angle. A user could also open a different browser, or use a second device, which means you can't rely on the idea of opening tabs(and preventing it), nor on IP address. Your solution needs to be server-side. Signing them out would just annoy them. Either make it so your website show them the same game no matter ...


55

Do what the Android browser does when you are trying to touch things too small to reliably resolve to a single location - zoom to confirm. On the first touch, zoom the area around the touch so that the individual seats are clearly separable, on the second touch select the seat you want within the zoomed area. Because this is part of the normal browsing ...


49

Have you considered giving the user an undo button instead? It reduces the cognitive overhead because no choice actually has to be made in the normal case and reduces the input from always having to do two actions (click cancel and then confirm/other) to only a single action when the user actually wants to cancel: Wireframes made in Pencil.


41

On any site, it is not ideal to break a user's expectations. As a user expects to be able to navigate the internet using tabs in their browser, you shouldn't break it.


32

From the A/B Testing (based on the article posted by keiwes) we can infer the following: download bmml source – Wireframes created with Balsamiq Mockups There seems to be a correlation between correctly identifying the hamburguer icon functionality and the age of the users. Hence from the usability perspective, you need to question yourself were is ...


30

Web design has always been about choosing an audience you care about. You could care about every single browser in use and either rely on the minimal set of common functionality or use progressive-enhancement/graceful-degradation techniques to take advantage of modern functionality where it's available. The later approach takes much resources. Personally ...


27

You can check book my show app they give the small window to show the overall seating and then the maximised view on the main screen which you can zoom in zoom out and select multiple seats by just one click.


24

How to display I would not scatter your UI with i-icons or question marks. Instead, use a dotted underline to make it clear that the user can interact with the work but to set it apart from a link. How to interact Keep in mind that on cursor-devices the tooltip is hidden again on mouse-out. You can't do that on touch devices, so make sure the tooltips are ...


24

I have opted to use a pointer element (similar to the text range selection brackets in the iOS and Android) that allows to select a group of seats. Visually, it looks like this: Pointer refers to the starting position of the seat selection, i.e. if user is buying 3 tickets, then the pointer will select 3 seats starting with the seat which the seat pointer ...


23

James Foster of Exis Web did an interesting A/B test on the hamburger icon: Tests on mobile showed a difference, though not all that significant, when the icon was used with a border (so it looks like a button): Perhaps more interestingly, the A/B test seemed to more clearly indicate that desktop users don't understand the icon: I tested 4 variations of ...


22

My company caters towards an older population, so we included text along with the hamburger icon. Here is an article that had similar results with the older population: http://mobile.smashingmagazine.com/2013/09/11/responsive-navigation-on-complex-websites/ Google defines a convention as "a way in which something is usually done, esp. within a particular ...


21

Showing a full page modal window on mobile devices means users may confusedly think they’ve been taken to a new page. Modal windows are typically boxes which contain information relevant to the current page but which don’t require the user to leave the page they’re on to view that information. Considering these facts, I think, it would be best if we ...


20

The UK site GOV.UK published some initial test findings about how users on mobile devices use a DOB field they were testing against. Initial reports suggested that having two dropdowns (one for day and one for month) followed by a text field for year was well received by users, although not exclusively. (emphasis mine). ...This tested much better, and ...


20

If you have a separate site for mobile and non-mobile then yes, most definitely yes, let them go to the full site to complete what they wish if it isn't offered on your mobile one. Mobile doesn't just mean 'people sat in a coffee shop for 2 minutes looking at their iPhone'. These days Mobile means 'anything that isn't a laptop/desktop' (and even that line ...


17

The problem is it's not flat enough Are they icons or buttons? This is a common problem with flat design (see other answers) but one possible solution I haven't seen here yet is to remove information until the only viable option is to click. Think tiles. ...And at this point it should also become obvious that </> never was a suitable icon.


13

Something I have gone with in the past is to takeover the whole screen for modals. We built a responsive modal so that on desktop you see the modal in a more traditional overlay, but on smaller viewports the content of the modal takes the place of the whole screen. Something like the 'JUST ME' example here: https://tympanus.net/Development/...


12

Google hangout has the same requirement as your application. You cannot do two hangouts at the same time. Yet Google does not shock the user by disconnecting the first call when a second call is attempted. Instead, you see an error message in the second call's window. Why don't you try the same approach?


12

i thought of something like showing the first skill and let the user figure it out himself, that the others are clickable / tapable aswell (sorry I din't have much time on my hands to do this, but it may help) download bmml source – Wireframes created with Balsamiq Mockups


11

How about using a visual cue that users are most likely used to: an underline? Below is an example with solid underline and a dashed one.


11

Stop using "user-scalable=no". Period. In the last 6 years, I cannot count the times that I've had to put away the iPhone and go to a desktop computer to examine something on a website because it simply wasn't visible and there was no way to increase its size because of this particular meta-tag. This is far and away the most useless tag. I wish it had ...


11

The first thing that came to mind given your example was: Cancel order Proceed with order One goes back, the other one forward. Maybe too forward-ey though?


11

Second choice is better to manage user expectations about estimated time. You can create background process auto refresh every X second for update estimated time left, so user don't need to refresh the browser manually. Make Optimistic UI with time display as countdown and give progress bar on circle.


10

I would argue that breadcrumbs used on a mobile site could in fact provide better usability, and share a multi-purpose. One of the things mostly seen today with responsive (mobile) sites is collapsing navigation that turns into a drawer/hamburger icon up top, once that navigation is hidden the only way to give a visual aid to the user of what page they are ...


10

I've done some quick analysis of existing applications to see what they do in such a situation. Facebook - Red message saying 'no internet connection' Vine - Greyscale sad smiley saying 'couldn't load posts' Safari - Greyscale icon saying 'cannot open the page because your iPhone is not connected to the Internet Flipboard - Empty (Grey) containers with 'No ...


10

First: You can have a great responsive site loaded with min-widths or max-widths or even mix them up in the same media rule. People have different approaches when writing a responsive style sheet. Having your media-queries all written with: @media screen and (min-width: 320px) { } @media screen and (min-width: 680px) { } @media screen and (min-width: 1024px) ...


9

The primary things that are most annoying (at least for me) with these banners are: I generally get the notifications even if I have the app already. I get notifications for sites that don't warrant their own apps in the first place (the main culprit here is discussion forum software, which seems to come bundled with nagware nowadays), or at best the site ...


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