67

Add the same text as a small label near the disabled button. This won't rely on any on any additional user action in order to show this additional information, which is good, because users tend only to scroll and tap when using touch screen devices. This pattern is also not a bad thing to do on desktop also. Personally, I don't usually expect a disabled ...


16

Do not disable buttons. Disabled buttons predate modern touch screen usage and don't work in this environment. Solution 1 For the 'I agree' or 'I have read' required checkboxes, when there is only one: Simply put all the text on the screen. The users will see it's a TOS screen, see the scrollbar and will scroll down. At the bottom of the screen, await them ...


5

The problem with "desktop" and "mobile" is that there's no standard size for either one. Is it a small laptop screen? A huge retina monitor? Landscape tablet? Portrait phone? Responsive design allows your design to work at any screen size, regardless of the dimensions by shifting and stacking content in the way you determine is best for ...


4

Don't make users think! Golden rule for usability is to not make users think. The more they have to make decisions the more "decision fatigue" they experience. After a certain amount of brain power usage they are likely to go elsewhere. Asking them which version of a site they want to view (which is effectively what we are doing) will damage your ...


4

Mixing Everybody's good ideas into one answer for your situation: Little real-estate on a device with no hover capability. User @Evil Closet Monkey was on the right track: why isn't it obvious? Good design involves minimizing "cognitive load", so as a general rule you should ask yourself why it's not already obvious to the user. More specifically: ...


3

There simply aren't that many people using their mobile in landscape (or narrow their browser screen). Also, once you're logged in, you don't see that screen anymore, so I guess they focus their attention on other areas of the site which are more often visited. Most smartphones are used in portrait orientation, with the most popular size (6 to 6.5”) showing ...


3

It can be solved for mobile devices and non-visual users (because what you propose is actually problematic for them too, as screen readers will interpret it incorrectly) using two simple steps: Offset from the button but next to it and in it’s own HTML element (probably <div> or <span> in most cases), add a dedicated description of why the ...


3

I don't know if is too difficult implement this in your context, but here is an option.


2

oh you have stumbled upon a bit of a rabbit hole there! This is a (as far as I am aware only proposed) method to allow interfaces to be simplified and or adapted for people using Augmentative and Alternative Communication (AAC) devices and or software. If you have ever implemented schema.org or microformats as part of SEO efforts this concept will be ...


2

If you are including these messages in the application itself, then no, don't reference the position of elements unless you know for sure they are fixed (e.g. they use static/absolute positioning). Responsive design isn't the only thing that can effect positions. There could be many other compatibility, accessibility or even localisation conflicts that cause ...


2

Based on the UIKit Size on Apple HIG (see https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/), the largest pixel width is 1024. So I think your lead is correct in a sense that there should be 2 designs one below 1200px for mobile and the other above 1200px for desktop. The visual estate and effects of UI ...


2

Thank you for your answers. They helped me to find my solution. Sorry for the German language :-) It says Food can only be ordered until 8am I just don't disable the [+] [-] buttons which can be used to order food. I show a Lock symbol and a Bootstrap5 Popover. If the user wants to know why the row is locked, he can click on the lock-symbol to see the ...


2

The maximum number of columns you should show is = to the number of columns that would be important to the user when using data to make a decision. If only three of the data columns are important then the maximum number of columns should be three. I do not believe there is a "hard" number on maximum number of columns because tables are a utility, ...


2

Well if you talk about recommendations or guidelines, you should check miller's law which states that a human mind can remember up to 7(+-2) items once. so based on that min of 7 and max of 9 coloums would be sufficient for them to recall and perceive information. link- https://uxdesign.cc/millers-law-is-there-a-magical-number-in-ux-design-7999f92ef7b8#:~:...


1

I suggest responsive buttons with two-line text for small screens and an animated auto-saving alert.


1

It depends on the columns widths and content type (long words, large font sizes etc). Maintain min and Max width to each column, for a bit of fluid layout. If the table has fixed widths then it is easy to know where the table can overflow and handle by having a responsive layout breakpoint. If there are too many columns then better to show max 5 main columns ...


1

Unfortunately Adobe XD will not trigger switching to different artboards upon resizing the browser window. This is where its roots as a mobile app prototyping tool show through. You can submit a request for this feature at: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests


1

I'm not sure this would be a bad pattern on the surface of it, but I don't believe it's very common to ask the users if they want to download additional resources. I can however cite two similar approaches. Many sites these days perform lazy or deferred loading of resources through technical approaches such as code splitting (breaking down a large package ...


1

A common approach is to limit the max page width. This is a very popular solution and you can see that StackExchange itself has a max width of 1100px for its div#content. For aesthetic reasons you might want to choose a value a bit larger than the max table width. A bit more exotic alternative could be to try to fit two columns of content in the screen.


1

I personally use this website call statcounter. I find it quite useful to decide with the team what viewports we should support, what breakpoint we should take into account, and what's the smallest mobile display we should focus on when building mobile experiences. You can also filter by country, region, and other interesting parameters.


1

I would like to show two different approaches from known companies. Nike In their landing page we can see the different categories in the top. Once the user hover on one of them we can see then the subcategories displayed. Please see that with one hover they are displaying all the sub subcategories. That's very good, from an user perspective, because they ...


1

I had been designing at 375 for many years then recently started designing for 320 and I totally hate it. It's just so narrow! Though I like to make sure everything looks alright and the messaging is clear for the worst possible scenario. The argument that people can still take their desktop browser and size it down to 320 isn't really valid to me. Regular ...


1

I'd do two things: 1.- I'd place the input directly above the preview. 2.- Also, I'd use scrolling to keep view centered on current highlighted information. That way the customer can know exactly where their input will go in the document, and they won't need to go back and forth to the form and back to the preview, which can get annoying very fast, ...


1

From my experience, whenever I tested this functionality I learned that the number in the Filter button is always expected to represent the number of filters applied. When the user reaches the list/grid of products they usually expect a sort and a filter button. The filter button has no number next to it initially. After one filter is applied, the number (1) ...


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