59
votes
Accepted
Should the hamburger menu close only on icon click or on click outside as well?
Some facts:
The image below is from the article How Do Users Really Hold Mobile Devices?. You can find plenty of other articles on the web about how users use a mobile phone. The data was collected ...
- 2,094
20
votes
Should the hamburger menu close only on icon click or on click outside as well?
Let's evaluate the scenarios
Users expect clicking on menu to close
If it closes on menu clicking => good
Whether it closes touching
outside or not=> don't care, because they'll use the button.
...
- 10.5k
16
votes
Should the hamburger menu close only on icon click or on click outside as well?
If you're going to use a hamburger menu, then it should collapse when you click or tap elsewhere (on desktop too, if the menu sticks instead of responds to unhover). Also on mobile other elements ...
- 693
14
votes
Accepted
Why is the Google Search Results page not responsive?
Responsive design is best practice, except for the most high-end websites
Responsive, mobile-first design gets you the most “bang for the buck” for most web sites or applications. Effectively you can ...
- 3,941
8
votes
Should the hamburger menu close only on icon click or on click outside as well?
The hamburger "menu" belongs to the menu class of UI patterns. therefor if you look how menus behave, they close in both instances when the user clicks/touches it again or somewhere outside its hit ...
- 10.6k
6
votes
Accepted
Suggestion required for max width of a form
First, you should consider that optimal legibility principles applies to everything. A 45 to 75 characters width is considered as good, with 66 characters being optimal.
However, some research has ...
- 37.3k
5
votes
Should the hamburger menu close only on icon click or on click outside as well?
As the developer of Picnic CSS, I have been wondering the same for a long time. I decided on closing it when clicked outside, but in any case, the action should be made obvious.
To make it obvious, ...
4
votes
Browser zoom in/out optimization vs. responsive design
This will depend on your specific issue, but specific implementation issues are off topic here at UX.SE, so I will go with the usability part of your question.
In general, and barring some specific ...
- 37.3k
4
votes
Accepted
Best way to make a menu responsive
I think your best option is to throw away the current design and start over, I can't see how the UX can ever be anything other than terrible. Sorry.
This is not a user-friendly solution and makes it ...
- 412
3
votes
Should the hamburger menu close only on icon click or on click outside as well?
Seems we're all in agreement here. I'll add another perspective on it.
Fitts' Law indicates that a larger tap target is easier to hit than a smaller one. So if you can make the entire background a ...
- 9,034
3
votes
Accepted
RWD - Drag to background
When the item is being dragged, the panel could hide itself or move out of the way. Check out these demos from Codrops for inspiration. (Your interaction would be the opposite of most of these, but ...
- 2,473
3
votes
Pinch/Zoom: evidence for bad UX
It is stunning to me that this is still a question. Any developer worth his salt is designing to W3C standards and W3C/WCAG is very clear on this.
The W3C/Web Content Accessibility Guidelines (WCAG) ...
- 31
3
votes
Huge data in table in responsive email
You can try two different UX behaviors:
1. What we call "Information rows or cards" with information hierarchy defined with client by a simple card sorting.
The information cards can contain several ...
3
votes
Accepted
Should I include a "back" button on a responsive website?
It's important to recognize the difference between an "back in hierarchy" button (also called an "up button") and a "back in time" button.
A "back in time" button is what you find in web browsers and ...
- 2,776
3
votes
Accepted
Footer menu same as Menu
I see the footer and header links like the pagination of a data table. If you need to scroll to the top every time to get to the next page, that is a problem for the user. So you define a second ...
- 200
2
votes
Acceptable length of video for mobile?
According to Wistia video analytics, the longer the video, the more likely user attention span will lower.
I think anything between 0 to 1 minute is perfect. A little more would also be okay if you ...
- 7,371
2
votes
How to provide navigation on Responsive sites
It depends on the type/importance of the item and the total number of items you're dealing with.
Case 1
You have now 6 items on the list. Is the final item: "user profile" of similar ...
- 8,561
2
votes
Why are websites center aligned instead of stretched to fit?
If you let if run full width, the text will be very annoying to read. The ideal line length is somewhere between 50 and 100 characters. You could increase the font, sure, but then you'd have to move ...
- 8,311
2
votes
How many breakpoints for mobile devices in responsive design and mobile native apps?
Bootstrap, a very popular framework, uses 4 breakpoints, as below:
/* Extra small devices (phones, less than 768px) /
/ No media query since this is the default in Bootstrap */
/* Small ...
- 6,547
2
votes
Why is the Google Search Results page not responsive?
TL;DR: A different design, even if more convenient, might make the user loose the familiarity with Google brand.
Very interesting question.
Even when a design might be more convenient, user-...
- 16.8k
2
votes
How should a download button be deprecated for mobile?
It completely depends on the data you are serving to users. Let's suppose you're offering them to download simple PDFs/Word Docs/Spreadsheets – then the user should be allowed to download that data, ...
2
votes
Huge data in table in responsive email
Sounds like 2 separate problems.
The boss doesn't understand the purpose of email or the concept of User Experience. See other questions and answers for that, e.g. How do you persuade an organization ...
- 146
2
votes
Accepted
How can I make a mobile app responsive for desktop?
Use the grid system to line the cards and set breakpoints.
Because you're using Semantic UI, you've got the tools right there. Instead of your cards flowing way too wide, add the right breakpoint. On ...
- 24.6k
2
votes
Comfortably legible base font-size?
The Web Content Accessibility Guidelines recommend that any web font sizes be adjustable by the user.
For large fonts WCAG says:
"The actual size of the character that a user sees is dependent both ...
- 1,529
2
votes
Navigating a double top bar
An interaction I have seen in such a case is that your 2nd nav bar disappears as the user is scrolling down, but re-appears as soon as they start scrolling back up again, no need to scroll all the way ...
- 1,549
2
votes
Which is best alternative design of a table which having only 2 column to display in UI with one edit button. Please advice me
If you have a 2 column list with key-value pairs then you could use a ‘description list’ (<dl>).
Something like this:
It gives you the layout you're after while also being able to adapt nicely ...
- 717
2
votes
Feedback - does designing for 2 layouts (mobile plus desktop above 1200px) seems appropriate?
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 ...
- 669
1
vote
How should a download button be deprecated for mobile?
Disclose what the file is. Users will be able to make a decision, or simply try and see if their phone supports the format.
Don't take away your visitors' agency by saying "We don't think you have ...
- 119
1
vote
How should a download button be deprecated for mobile?
I would go for option 2.
You should also manage the users expectations. If the downloading functionality is not available on a mobile, displaying a 'download' button, even if disabled, will convey to ...
- 11
1
vote
Accepted
Responsive Date & Time Picker
For the date, it depends on the context of what sort of dates people will be entering. If the date is around the present or near future, you can't go wrong with the tried and tested calendar picker. ...
- 439
Only top scored, non community-wiki answers of a minimum length are eligible