SlideShare a Scribd company logo
1 of 3
Page 1 of 2
User Interface Designfor Touch ScreenDisplays
By Josh Toland,ProgramManagerfor NewVision Display,Inc.
With projected capacitive touch technology (PCAP) it has become increasingly common to include
a capacitive touchscreen in almost every new product that contains a display. Today many, if not most,
users expect a device to be touch enabled and want the user experience to be good. When designing
software for touch screen displays, any designer should be aware of some best practices.
Know Your Users
Anytime a new product is created, a key part of the design process is defining the target users of the
system. You make assumptions about what country the user will be in, what language they will speak, and
even with which hand they will touch the display. Let’s assume for this article that you are designing a
product for the US English speaking market. By defining this user group you can now assume that when a
user looks at a device their eyes will naturally go to the top left corner of the display. You can also assume
that about 90% of users will be right-handed.
Page 2 of 2
Navigation
Users do not want to read a manual or have to “figure out” how to use an application. Navigation elements
should be kept as simple and consistent as possible. Luckily there has been a lot of research into designing
software for mobile devices that has trained the users what to look for.
1. Use Common Elements
1. Items like navigation bars on top of the screen or a home button requires no explanation for
a user to understand.
2. Don’t Hide Navigation
1. Nothing is more frustrating than trying to find a way off a page or to go back. Keep
navigation elements always available and easy to access.
3. Minimize Touches/Clicks
1. A goal for any application should be to minimize the number of times a user must touch a
button or link in order to accomplish their task.
4. Visual Hierarchy
1. If possible a visual guide can help a user quickly and easily navigate an application.
Button Size and Placement
There are technical limitations and physical limitations that need to be taken into account when design a
good user interface. The technology is always improving and allowing for more precise input, but the real
problem is that the human finger is not. MIT did a study and discovered that the average human fingertip
measures roughly 8-10mm. This will naturally limit the precision a finger can have when using a capacitive
touchscreen.
1. How will your device be held?
1. The way a device is held will determine how a user will interact with it. Will they hold it like
a tablet and user their thumbs to click or more like a phone and have a free hand and use
fingertips to touch.
2. Gesture Support
1. Depending on the size of your display you may consider gesture support. The larger the
display the more a user expects simple gestures like scroll, zoom, and swipe to be supported.
If you choose to support these then the UI must have a “no fly zone” to allow the user
enough space to perform the gesture without clicking on another navigation element.
3. Button Size/Spacing
1. Apple recommends that 44pt x 44pt is the minimum size a button should be. Nokia says
7mm and Microsoft says 9mm. This data in combination that the human finger is roughly 8-
10mm is a guideline for minimum sizes, but there isn’t one for maximum sizes.
2. Some research suggests that if a button is too big a user can overlook the button and not
see that it is clickable.
4. Don’t Block Information
1. Users don’t have x-ray vision. Be mindful when designing the UI that a user will be blocking
portions of the screen with their hands and fingers while trying to click. If they are changing
values on the screen make sure they can still see the data while editing.
Thanks to companies like Apple and schools like MIT there is a wealth of knowledge online about design
user interfaces. Every application is different and every product is different. However there are a number
of common design elements that can be used to keep the user experience fast and easy.
Page 3 of 3
References:
1. User Interface Design Guidelines for Great Experience Design
https://software.intel.com/en-us/articles/user-experience-design
2. Mobile Web Application Best Practices
https://www.w3.org/TR/mwabp/
3. An MIT study, “Human Fingertips to Investigate the Mechanics of Tactile Sense,” discovered that an
average size fingertip measures 8-10 mm
http://touchlab.mit.edu/publications/2003_009.pdf
4. Apple iOS Human Interface Guidelines
https://developer.apple.com/ios/human-interface-guidelines/visual-design/layout/
5. Microsoft Windows Phone UI Guidelines
https://msdn.microsoft.com/en-us/library/windows/apps/hh202889(v=vs.105).aspx

More Related Content

Viewers also liked

MakYourHome Terrasse
MakYourHome TerrasseMakYourHome Terrasse
MakYourHome TerrasseRalf Böwing
 
first security services career_center
first security services career_centerfirst security services career_center
first security services career_centerMelindaWong11
 
Free female hand gestures video template
Free female hand gestures video templateFree female hand gestures video template
Free female hand gestures video templateTracey Meagher
 
Ninjagrafik Portfolio 5 Werbetechnik
Ninjagrafik Portfolio 5 WerbetechnikNinjagrafik Portfolio 5 Werbetechnik
Ninjagrafik Portfolio 5 WerbetechnikNina Just
 
Landscape_Design_Portfolio_Selma
Landscape_Design_Portfolio_SelmaLandscape_Design_Portfolio_Selma
Landscape_Design_Portfolio_SelmaSelma Mufaddal, PMP
 
Gfk Think Tank Berlin Next Generation Food
Gfk Think Tank Berlin Next Generation FoodGfk Think Tank Berlin Next Generation Food
Gfk Think Tank Berlin Next Generation FoodDr. Robert Kecskes
 

Viewers also liked (10)

JM Transcription Sample
JM Transcription SampleJM Transcription Sample
JM Transcription Sample
 
MakYourHome Terrasse
MakYourHome TerrasseMakYourHome Terrasse
MakYourHome Terrasse
 
first security services career_center
first security services career_centerfirst security services career_center
first security services career_center
 
Free female hand gestures video template
Free female hand gestures video templateFree female hand gestures video template
Free female hand gestures video template
 
OLED
OLEDOLED
OLED
 
Ninjagrafik Portfolio 5 Werbetechnik
Ninjagrafik Portfolio 5 WerbetechnikNinjagrafik Portfolio 5 Werbetechnik
Ninjagrafik Portfolio 5 Werbetechnik
 
Sosyal Medya Yönetmeni
Sosyal Medya YönetmeniSosyal Medya Yönetmeni
Sosyal Medya Yönetmeni
 
Landscape_Design_Portfolio_Selma
Landscape_Design_Portfolio_SelmaLandscape_Design_Portfolio_Selma
Landscape_Design_Portfolio_Selma
 
Présentation cockpit group
Présentation cockpit groupPrésentation cockpit group
Présentation cockpit group
 
Gfk Think Tank Berlin Next Generation Food
Gfk Think Tank Berlin Next Generation FoodGfk Think Tank Berlin Next Generation Food
Gfk Think Tank Berlin Next Generation Food
 

Similar to User interface design for touch screen displays

13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design 13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design BugRaptors
 
Android Design Guidelines 4.0
Android Design Guidelines 4.0Android Design Guidelines 4.0
Android Design Guidelines 4.0Brandon Nolte
 
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdfBest UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdfHarssh Trivedi
 
User Interface Design
User Interface DesignUser Interface Design
User Interface DesignJason Hando
 
Importance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- StackonImportance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- Stackonnajam gs
 
UX Design - Lecture # 2.pptx
UX Design - Lecture # 2.pptxUX Design - Lecture # 2.pptx
UX Design - Lecture # 2.pptxZaid227349
 
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docxhoney725342
 
Experience-Interface-Interaction.pdf
Experience-Interface-Interaction.pdfExperience-Interface-Interaction.pdf
Experience-Interface-Interaction.pdfHasseyWijetunge
 
The User Interface-Introduction .ppt
The User Interface-Introduction .pptThe User Interface-Introduction .ppt
The User Interface-Introduction .pptssuserd67eb9
 
The User Interface-Introduction .ppt
The User Interface-Introduction .pptThe User Interface-Introduction .ppt
The User Interface-Introduction .pptssuserb7947f
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile appsIvano Malavolta
 
UIUX Design - report on summer training.docx
UIUX Design - report on summer training.docxUIUX Design - report on summer training.docx
UIUX Design - report on summer training.docxbhawnamangla2
 
Best Mobile UX Trends 2019
Best Mobile UX Trends 2019Best Mobile UX Trends 2019
Best Mobile UX Trends 2019Vani Jain
 

Similar to User interface design for touch screen displays (20)

New to the touch
New to the touchNew to the touch
New to the touch
 
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design 13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
 
Android Design Guidelines 4.0
Android Design Guidelines 4.0Android Design Guidelines 4.0
Android Design Guidelines 4.0
 
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdfBest UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
 
User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
Importance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- StackonImportance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- Stackon
 
UX Design - Lecture # 2.pptx
UX Design - Lecture # 2.pptxUX Design - Lecture # 2.pptx
UX Design - Lecture # 2.pptx
 
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
 
Experience-Interface-Interaction.pdf
Experience-Interface-Interaction.pdfExperience-Interface-Interaction.pdf
Experience-Interface-Interaction.pdf
 
iOS Human Interface Guideline
iOS Human Interface GuidelineiOS Human Interface Guideline
iOS Human Interface Guideline
 
The User Interface-Introduction .ppt
The User Interface-Introduction .pptThe User Interface-Introduction .ppt
The User Interface-Introduction .ppt
 
The User Interface-Introduction .ppt
The User Interface-Introduction .pptThe User Interface-Introduction .ppt
The User Interface-Introduction .ppt
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile apps
 
UIUX Design - report on summer training.docx
UIUX Design - report on summer training.docxUIUX Design - report on summer training.docx
UIUX Design - report on summer training.docx
 
Usability thinking
Usability thinkingUsability thinking
Usability thinking
 
Best Mobile UX Trends 2019
Best Mobile UX Trends 2019Best Mobile UX Trends 2019
Best Mobile UX Trends 2019
 
Droidcon2014 - Android UX
Droidcon2014 - Android UXDroidcon2014 - Android UX
Droidcon2014 - Android UX
 
09-UX.pdf
09-UX.pdf09-UX.pdf
09-UX.pdf
 
Ux
Ux Ux
Ux
 
Touch Technology: MIS Case study
Touch Technology: MIS Case study Touch Technology: MIS Case study
Touch Technology: MIS Case study
 

Recently uploaded

My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 

Recently uploaded (20)

My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 

User interface design for touch screen displays

  • 1. Page 1 of 2 User Interface Designfor Touch ScreenDisplays By Josh Toland,ProgramManagerfor NewVision Display,Inc. With projected capacitive touch technology (PCAP) it has become increasingly common to include a capacitive touchscreen in almost every new product that contains a display. Today many, if not most, users expect a device to be touch enabled and want the user experience to be good. When designing software for touch screen displays, any designer should be aware of some best practices. Know Your Users Anytime a new product is created, a key part of the design process is defining the target users of the system. You make assumptions about what country the user will be in, what language they will speak, and even with which hand they will touch the display. Let’s assume for this article that you are designing a product for the US English speaking market. By defining this user group you can now assume that when a user looks at a device their eyes will naturally go to the top left corner of the display. You can also assume that about 90% of users will be right-handed.
  • 2. Page 2 of 2 Navigation Users do not want to read a manual or have to “figure out” how to use an application. Navigation elements should be kept as simple and consistent as possible. Luckily there has been a lot of research into designing software for mobile devices that has trained the users what to look for. 1. Use Common Elements 1. Items like navigation bars on top of the screen or a home button requires no explanation for a user to understand. 2. Don’t Hide Navigation 1. Nothing is more frustrating than trying to find a way off a page or to go back. Keep navigation elements always available and easy to access. 3. Minimize Touches/Clicks 1. A goal for any application should be to minimize the number of times a user must touch a button or link in order to accomplish their task. 4. Visual Hierarchy 1. If possible a visual guide can help a user quickly and easily navigate an application. Button Size and Placement There are technical limitations and physical limitations that need to be taken into account when design a good user interface. The technology is always improving and allowing for more precise input, but the real problem is that the human finger is not. MIT did a study and discovered that the average human fingertip measures roughly 8-10mm. This will naturally limit the precision a finger can have when using a capacitive touchscreen. 1. How will your device be held? 1. The way a device is held will determine how a user will interact with it. Will they hold it like a tablet and user their thumbs to click or more like a phone and have a free hand and use fingertips to touch. 2. Gesture Support 1. Depending on the size of your display you may consider gesture support. The larger the display the more a user expects simple gestures like scroll, zoom, and swipe to be supported. If you choose to support these then the UI must have a “no fly zone” to allow the user enough space to perform the gesture without clicking on another navigation element. 3. Button Size/Spacing 1. Apple recommends that 44pt x 44pt is the minimum size a button should be. Nokia says 7mm and Microsoft says 9mm. This data in combination that the human finger is roughly 8- 10mm is a guideline for minimum sizes, but there isn’t one for maximum sizes. 2. Some research suggests that if a button is too big a user can overlook the button and not see that it is clickable. 4. Don’t Block Information 1. Users don’t have x-ray vision. Be mindful when designing the UI that a user will be blocking portions of the screen with their hands and fingers while trying to click. If they are changing values on the screen make sure they can still see the data while editing. Thanks to companies like Apple and schools like MIT there is a wealth of knowledge online about design user interfaces. Every application is different and every product is different. However there are a number of common design elements that can be used to keep the user experience fast and easy.
  • 3. Page 3 of 3 References: 1. User Interface Design Guidelines for Great Experience Design https://software.intel.com/en-us/articles/user-experience-design 2. Mobile Web Application Best Practices https://www.w3.org/TR/mwabp/ 3. An MIT study, “Human Fingertips to Investigate the Mechanics of Tactile Sense,” discovered that an average size fingertip measures 8-10 mm http://touchlab.mit.edu/publications/2003_009.pdf 4. Apple iOS Human Interface Guidelines https://developer.apple.com/ios/human-interface-guidelines/visual-design/layout/ 5. Microsoft Windows Phone UI Guidelines https://msdn.microsoft.com/en-us/library/windows/apps/hh202889(v=vs.105).aspx