1. Use Natural Gestures<\/h2>\n
<\/a><\/p>\n There\u2019s a reason \u201cswipe right\u201d and \u201cswipe left\u201d are so popular \u2013 they are natural hand movements and gestures. <\/p>\n When thinking about oversized screens, consider more than finger actions. Think about the entire hand. Most users will have to reach out to tough larger touch screens because they will be affixed to a wall or table, rather than hand-held.<\/p>\n You want the screen to be comfortable to touch, and movements should happen as seamlessly as on a mobile device. But think about touch action. Swipes might be a little more exaggerated than on a smaller screen and taps might come with slightly more pressure or force. <\/p>\n Scrolling is a little less comfortable \u2013 moving arms up and down repeatedly can lead to fatigue \u2013 to think about ways to get users through the content without a lot of up and down motion.<\/p>\n Another natural \u201cgesture\u201d to think about is eye-scanning. Some oversized screens are too large for the user to take in all at once. Design for eye movement \u2013 top to bottom and left to right \u2013 to ensure that users see the most important information and understand how to engage with the design. <\/p>\n This doesn\u2019t happen as often as it should \u2013 designers have to dramatically scale-up visual elements to display on oversized screens. A bigger screen doesn\u2019t mean more stuff (the opposite can actually be true). Think of it as a different user experience. Content, including text and graphics, have to be scaled up for oversized screen design because:<\/p>\n Most users engage with oversized touchscreens from the same mindset as visiting a website for the first time. A design that mimics that experience will be easy for users to jump in and interact with.<\/p>\n Create a navigation pattern for these devices that is always accessible. Use a format that\u2019s similar to commonly-accepted website patterns, such as across the top of the screen or in a sidebar. <\/p>\n Make sure that navigation doesn\u2019t go away when different content is accessed. While the home screen design might just include large navigation buttons without a traditional navigation menu, all other screens should have the more traditional navigational format for ease of use. <\/p>\n Try to minimize typing-based inputs as much as possible on these screens. Keyboards can be awkward and slow, requiring extra physical effort on the part of the user. But if you do have keyboard-based inputs, include a keyboard toggle command in the navigation, so that users can easily show and hide the keyboard as needed. <\/p>\n The bigger the screen, the more overwhelming choices can be. Think of buttons and interactions as a game of this or that, which gives users one decision to make at a time. The trick here is that they pick between two elements.<\/p>\n One of the nice takeaways from this concept is that it makes you simplify the design. With only two choices per screen, design elements and visual clutter is reduced, creating a more usable interface. <\/p>\n When designing the choices, make sure the action is equally clear. How does a user select this or that? Buttons should be obvious and large enough to touch with ease. Use a small animation to help draw the eye to interactive elements, or to the more popular user selection. <\/p>\n Simplified choices are important due to the size of the screen as well. Remember that the entire screen may not always be in a user\u2019s field of vision, which can limit choices in itself. If you streamline choices ahead of time, you don\u2019t have to worry about the environment eliminating user options for you. <\/p>\n Just because a user walks up to a kiosk screen in a public place, doesn\u2019t mean that person wants everyone to know what he or she is doing. <\/p>\n Keep in mind that the bigger the screen, the more likely it is that others can see what the user is doing. That\u2019s a big consideration when it comes to asking for sensitive information or data on a touch display. <\/p>\n To combat this, often a touch-based design will include smaller pop-up boxes for forms or data entry so that content isn\u2019t as visible from a distance. <\/p>\n <\/a><\/p>\n This might be the most important design concern when it comes to oversized touch screens \u2013 they need to work with, and without an internet connection. <\/p>\n Think about it: Many oversized screens are in public locations or smaller ones such as movable kiosks or large tablets, are portable. This can impact access to the internet and whether a connection is working or not. The design has to work even when not connected.<\/p>\n Make sure that all of the tools to run the design, from JavaScript to font libraries to data collection, are stored locally. <\/p>\n <\/a><\/p>\n The design needs to show users how to interact with the screen. Not every user will immediately spot a touch screen at first glance.<\/p>\n Use visual cues such as animation and buttons to help guide users through the process. Most oversized screens are a one-time interaction or engagement point for users, and every interface is a bit different. The easier you can make it to use, with more commonly understood elements, the more likely users will be to engage in the design. <\/p>\n Many designs include screen areas that are fully activated on touch, such as a start screen. Include a button to cue the interaction anyway. It doesn\u2019t take away from the design and tells users how to work the device. <\/p>\n Use descriptive microcopy, such as \u201ctouch here to start,\u201d to guide users through the process. While these elements might seem overly obvious, how to use an interface isn\u2019t always second nature to all users. Make it easy.<\/p>\n Do any of your design projects require the use of oversized screens? They are becoming more popular everywhere. Even if you haven\u2019t had such a project yet, chances are you might get one in the future.<\/p>\n While most of the design principles are the same as other interface-based designs, adjusting for size and scale of large screens can be uncomfortable for many designers. When you see these screens in public, make a point to stop and interact with them to see what design elements and interactions appeal to you. <\/p>\n Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":" Touchscreens are everywhere. But they aren\u2019t just on your phones and tablets. Designing for the oversized versions of touchscreens \u2013 think desktop computer size and larger \u2013 can present a unique set of challenges. How do you design for something so big, when you are so accustomed to thinking about thumb regions for screen design?… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[],"tags":[],"class_list":["post-43659","post","type-post","status-publish","format-standard","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t![\"design](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/gergwerk.jpg?w=900\")
<\/div>\n<\/p>\n2. Scale Up Text and Graphics<\/h2>\n
\n
3. Make Sure Navigation is Always Accessible<\/h2>\n
![\"design](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/rawpixel-com-340968.jpg?w=900\"){kind=tracking}
<\/div>\n4. Don\u2019t Create Too Many Choices<\/h2>\n
5. Consider Privacy<\/h2>\n
![\"design](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/subway-screens.jpg?w=900\")
<\/div>\n6. Disconnect from the Web<\/h2>\n
![\"design](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/ideum.jpg?w=900\")
<\/div>\n<\/p>\n7. Design Buttons for Obvious Interaction<\/h2>\n
![\"design](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/fitness-screen.jpg?w=900\")
<\/div>\n<\/p>\nConclusion<\/h2>\n