One of the most frustrating things users can experience on mobile sites is a modal window. On desktop, modals display without issue because of the large screen size. But on mobile, modal windows get cut off because of the small screen size. Users only see part of the modal window and can’t exit nor view it with ease.
Viewing is even more difficult if users have to use an onscreen keyboard. The keyboard will pop up and cover a chunk of the screen, forcing users to have to scroll awkwardly to see the what they’re typing. If you want users to view your modal window content with ease, avoid using modal windows on your mobile site. Use an inline accordion instead.
An inline accordion displays the content within the page. It doesn’t overlay it on top of the page like a modal. This prevents the window positioning and scrolling issues that users experience with modals. Not only that, but users never lose their context because inline accordions open on the same page. Modals take users out of their context when it covers up the screen.
The way an inline accordion works is when the user taps the button, a panel collapses below it. The panel content is fully displayed on the mobile screen. Users no longer have to deal with partial viewing or awkward scrolling.
The button should highlight so that users know what they tapped. The panel should have a title label that matches the button label. It should have an ‘X’ icon in the corner to close the panel just like closing a modal window.
Stop making users struggle to view your modal windows. Use inline accordions in place of modal windows on your mobile site. When users can view the content on their screen with ease, they can complete their tasks without the frustration.