We’re rewarding the question askers & reputations are being recalculated! Read more.
59

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 by observing thousands of mobile phone owners remotely. Dark Orange / Red - percentage of people who use their phone using thumb alone Violet - Percentage of ...


35

When a person dials an actual phone number with their phone, do they type 1-555-555-555 or do they type 15555555555? The only reason for forcing a fixed format is because your back-end can't determine the format it needs. Which is an implementation problem and you're forcing the lack of technical nous onto the end user. That's like saying "we aren't capable ...


20

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. Moreover most people won't be expecting a toggeable component to remain open when you click outside it and even if someone expect this, redoing the action won'...


16

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 should not be activated when tapping off the menu. But I think the correct answer, providing the best UX—which is your real goal, isn't it?—is: don't use a ...


14

I could not find any UX research about PDF and mobile but this article from Jakob Nielsen about PDF usage applies: http://www.nngroup.com/articles/avoid-pdf-for-on-screen-reading/ Just to highlight some key ideas from the article concerning PDF usage: Forcing users to browse PDF files makes usability approximately 300% worse compared to HTML pages. Only ...


12

The answer you are looking for is the difference between responsive and adaptive web design. Simply said, responsive is where you can resize your browser window and the website/app resizes with it. Adaptive is exactly as you said: designed for a couple of viewports, so maybe for an iPhone, a tablet, and 15" computer screen. However, adaptive might not be ...


11

May I suggest that when the viewport gets too small you'll simply remove the margins around the lightbox, remove the close button and switch over to what Apple refers to a "full screen modal view"? Pretty much like this:


10

I think your approach to handle this must be two pronged The need for mobile optimized websites I would recommend looking at the ton of literature and articles that are there which highlight the need for a mobile optimized websites. To quote some articles and references Here are five great reasons it matters: People can read mobile–optimized ...


10

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 design your web property once, get a good experience anywhere. But responsive design has its drawbacks, and is arguably a compromise solution that works best ...


9

We need to quit thinking "mobile friendly" and start thinking "device independent". Even mobile devices have resolutions and physical sizes once only found on desktop computers and some cannot be detected as mobile or not. You cannot point to any one width based on resolution where you can be sure it will fit most devices and, even then, that may all change ...


9

I wrote about some deliberations that were made over design and usability of responsive lightboxes. The main things to keep in mind are: Be aware that lightboxes are intrusive! Only use a lightbox if there's no other way to showcase a piece of content. If you must use one, make it as easy as possible for the user to understand that they're still on the same ...


9

The whole point of a responsive design is that it just works. You shouldn't have to announce the fact that it works as intended on whatever you're using right now - it is apparent by looking at it. "Optimized for" notices are never good practice, but especially not when it is "Optimized for everything". If your goal is to advertise the fact that you are ...


8

"Profile" "Account" "Settings" Any of these or anything similar if you're worried about users inputting long names. Possibly with an icon in front that corresponds to it, be it a silhouette, gears, or anything else you deem fitting. If that doesn't fit, just the icon, or even replace it with a user's avatar/user-icon. That probably fits best with your case,...


8

Responsive Web Design is a term coined by Ethan Marcotte to describe techniques that use CSS media queries, a fluid grid, and other techniques to adapt a web page to various screen resolutions (usually based on width breakpoints). Typically there will be 3-4 breakpoints as you describe (mobile, tablet, desktop, extra large desktop) in a given design, but ...


8

A single input field is always easiest for the user — whether it's for a phone number, first and last name, social security number, or any other value that you may think of as being divided into "parts". Luke Wroblewski has written many articles about this with plenty of data to back it up. Design your page for the user, not the database. If you ...


8

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 area. The same would apply to hamburger menus as well.


7

I think there's two good reasons to reduce the size of the buttons for larger displays. First, really big buttons on a bigger screens can be overwhelming and take over the visual hierarchy of the page, this can be distracting to the user. Also, they are not a common or familiar practice on most web apps and web sites so big buttons seem unfamiliar or ...


6

I would suggest you keep one input field, but use a mask for the text: -You can use Placeholder attribute from HTML5 (If you are working in a web App) for showing a example number.


6

Hmmm take a look at this: https://github.com/filamentgroup/tablesaw As width is reduced, the table converts over into a listing. You do lose the ability to do row comparisons, but it does ensure data remains accessible for small screen sizes.


5

how often are people printing pages outside of 8.5 x 11? I have never printed at 8.5 x 11. I assume this is a U.S. paper size and is in inches. I print at A4, it is the standard printer size in the UK. It is 210mm x 297mm. Don't try to assume what sizes people are printing at, instead make your print styles flexible enough to cater for everyone (...


5

Using the hamburger icon for lower navigation components it's not a good idea since most people already associate it with high level navigation. You could try using a different icon for the lower level navigation components like Wikipedia does: Closed Open Additional suggestion : Placing a "Menu" label next to the hamburger icon improves its recognition ...


5

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, when the menu is opened, the rest of the content is obscured: A notable example of how not to do it is github. Visit it on your mobile, click on the menu and ...


4

Logged out A very common way to symbolize the user account or login is an avatar icon. I haven't done any specific quantitative research on this but I'd say the vast majority of sites and apps uses an icon like this: Logged in Once logged in, there are two main things the icon symbolizes: I'm logged in and it's different to how it used to look like when ...


4

Websites that aren't designed with consideration of phone/tablet use are not only more difficult to use on a phone/tablet, they will be perceived as old fashioned and not up to date when accessed on a touch device. An immediate impression will be "old technology", like when one comes across a website that uses frames, or Java, or blinking text. And as more ...


4

My guiding principles for this are as follows, vis-à-vis users: Show them what you expect Take whatever they give you Show them what you’re taking The best way to accomplish all three with HTML5 and jQuery is to borrow this plugin. I’ve added type="tel" mainly to give mobile users a keypad instead of a keyboard, and placeholder="(999) 999-9999" as a ...


4

It is interesting to me that the problem with large multi-column tables is not being solved by creating better content and information architecture, because regardless of how responsive or accessible the table is the information is still going to be unusable to the reader if there is simply too much information. The question of how to fit a large amount of ...


4

It doesn't need to be a modal or a new window, you can use the footnote model - just allocate a special panel at the bottom of your screen for these annotations, and make sure to distinguish them visually from regular links. So when a user taps an annotated word, the panel would come up at the bottom and display the definition. On tap elsewhere on the screen ...


4

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 very hard for a user to interact with your site. Start with accessibility and good UX and then add the visual design and animation states. There are good ...


3

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) version 2 Level AA 1.4.4 requires that sites be scalable without assistive technology up to 200%. This means that the mobile browser’s pinch zoom feature must ...


3

I am not a hudge fan of dropdown menu for mobile apps because : • you don't see all the available options • you need at least 2 click/tap to change I am also working on an industrial web app and I have learnt that the users uses dashboard as a "report tool" and check each production line one after the other. They rarely go directly to one specific machine ...


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