There are many User Interface screens that present information as choices. Often the user interface is using the wrong controls and wrong patterns. I’ll illustrate a number of these here using the iOS sharing UI:
Hide things that aren’t needed
You should hide interface elements that are non-functioning or that require someone else to perform an action. In the above example the AirDrop user interface is non-functional. The instructive text is written for “they” making the interaction confusing. Since there’s no action you can take it’s best to hide this as it’s visually confusing.
Prioritize the 80%
The most important elements should be shown first. AirDrop is certainly not the most common action. I’d estimate that it represents a single-digit percentage of the usage. Even if you’re standing in the same room, it’s often easier to send a text message. The important things need to be presented first in the user interface.
Take advantage of the screen canvas
The share controls scroll along the horizontal axis. If you scroll all the way to the left you’re given the option to see “More.”
The more design pattern is fantastic if there is a lot more. For example if there are 50+ options it would be annoying to have to keep scrolling. If there were 1000 options, the more can be used to filter and search.
In this UI the top row share options only lists 13 items total. In the second row the More actually doesn’t show any more items. There are only three options. Both controls are not needed. For lists less than 20+ you could just keep scrolling.
Unnecessary Personalization
If you tap the more icon on the previous screen it brings you to a customization menu for sharing actions. As previously stated the visibility checkboxes are not needed. In addition the re-ordering controls are likely also not needed. The UI could have easily presented the sharing options ordered by the most frequently used items. No More menu, no manual sorting, no switches in the UI to turn things off. Useless UI.
Other nits and issues:
- Clearly the sections have some meaning but it’s not clear what it could be because there’s no label.
- Horizontal scrolling isn’t as good as vertical scrolling. The thumb likes to scroll things vertically, plus it’s easier to read longer labels.
- The cancel button is giant and weird at the bottom. This could easily use the standard done button and perhaps a gesture to flick the panel away.
Quick Exploration of an update
- By default the AirDrop experience is hidden.
- The application menu is shown at the top and is labeled.
- The Done button is in a typical location and you could also use a “pull down” action to hide the action sheet without needing the button at all. I left it because drag based UI isn’t always intuitive.
- Share apps are ordered by frequency of use. Swipe delete can be used to hide an app from this menu.
When AirDrop is available it is shown within the table. Since it’s rare I put it above the “Apps” section, but it could just as easily go bellow. I also added an info button to get you to a better explanation.
Lastly, I’m using the vertical space to scroll the UI and show more of the interaction.
Tell me what you think, follow me online, and stop building useless UI!
