- This topic is empty.
-
Posts
-
When developing applications for small displays (such as ELI displays), special care must be given to button size and spacing. Here are some questions a developer might ask when faced with some common issues.[hr]
[b][i]Q: When users try to press a button in my application, they frequently miss the button even when they appear to be touching it. What can I do to address this?[/i][/b][b]A:[/b] If buttons are too small, a user may find that their finger completely covers the button, which can make it hard to press accurately. A user should be able to see a small margin of the button even as they press it with their finger.
According to Anthony T, founder of UX Movement, [url=https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/]the average width of the index finger = 1.6 to 2 cm.[/url]
In terms of pixels, here is the average finger width on some of our ELI products:
[ul]
[li]ELI43-CP / ELI43-CR: 81-101 pixels[/li]
[li]ELI70-CR: 84-105 pixels[/li]
[li]ELI101-CPW / ELI101-IPHW: 94-118 pixels[/li]
[/ul][b][i]Q: When users try to press a button in my application, they frequently press nearby buttons accidentally. What can I do to prevent this?[/i][/b]
[b]A:[/b] If buttons are too close together, a user might accidentally press a different button than they intend to. Include spacing or padding around each touch control so that there is plenty of separation between them.
A design for a small display should stay as minimal as possible while accenting its primary features. [url=https://www.justinmind.com/blog/minimalism-in-interactive-design-dreaming-of-a-white-space-xmas/]This blog over at Justinmind[/url] suggests ways to implement minimal designs for applications.
[b][i]Q: I\’ve made my buttons larger and spaced them out, but users are still having some difficulty pressing buttons accurately. Is there anything else I can do to make buttons easier to press?[/i][/b]
[b]A:[/b] You can make a button easier to press by making the active area of the button larger than it appears.
In Qt, you can easily do this by adding a [i][b]border[/b][/i] to the button (normal property).
In Windows Presentation Foundation (WPF), increasing the margin doesn’t increase the active area; it only increases the visible space taken by the button. Also, you cannot unlink the button from the layout. You can review some of the solutions people have created for this issue by following these links.
[url=https://stackoverflow.com/questions/15928144/wpf-create-button-template-with-invisible-clickable-area]Solution at Stack Overflow[/url]
[url=https://social.msdn.microsoft.com/Forums/vstudio/en-US/04b7ebb6-613d-42a3-bdf0-72a8bfed78ad/custom-shaped-button-with-transparent-area-click?forum=wpf]Solution on Visual Studio forums[/url]
[url=https://forums.xamarin.com/discussion/104417/increase-touch-area-for-tapgesturerecognizer]Solution on Xamarin forums[/url]Finally, a fairly easy solution that works everywhere is to include a transparent “border” in your button image. In the example below, the whole image would be used as a button (the yellow region represents transparency).
[center][img]https://www.teamfdi.com/wp-content/uploads/button_with_border-300×171.png[/img][/center]
- You must be logged in to reply to this topic.