![\"Two](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-selfcheckout.jpg\")
<\/p>\nHave you ever struggled to buy a metro ticket at a kiosk? Or been frustrated at a self-checkout counter at a supermarket? Or struggled with self-check-in at an airport?<\/p>\n
Have you ever wondered how those experiences were created, and why they sometimes seem poorly designed? What tools and methods do we need to design for things in the physical world? This is the unique area of UX for ergonomics that sits in a small niche between traditional UX and industrial design.<\/p>\n
<\/p>\n
We are Mariana<\/a>, senior strategist, and Kevin<\/a>, principal interaction designer, at frog<\/a>. We\u2019ve worked on a number of projects combining physical and digital elements and think that human factors or ergonomics can sometimes be undervalued or taken for granted when designing digital products that live beyond traditional devices, such as phones or computers.<\/p>\n We know good design for websites and apps, but what is good design for digital interfaces within physical products? Many things we rely on don\u2019t apply, and there are many new things to consider. In this article, we\u2019ll explore what\u2019s different and\/or new, as we explore the ergonomics of these devices and the physical\/digital design challenges involved.<\/p>\n We\u2019re going to talk about a few things:<\/p>\n In recent years, with the emergence of larger and larger phones, people have been discussing ergonomics more than before.<\/p>\n Here you can see the recommended screen areas and distribution for mobile\/web application design. These areas help to ensure the designed interactions remain comfortable in relation to how the person will hold the device and navigate. But when do these differences matter?<\/p>\n It\u2019s not only about size. It\u2019s about how people hold their device when using an app. Some apps, like maps, need to designed to be used on-the-go, so they need to support one-handed navigation, whereas other apps, like Netflix, are used primarily while stationary, and so we can expect two-handed usage.<\/p>\n We also need to consider the difference in usable areas between reading and interacting. What are the actions to be used and their frequency? The two modes of usage are not the same.<\/p>\n Takeaway:<\/em> Find out how people are holding a device when using your app, for what purpose they\u2019re using it, and design accordingly.<\/p>\n One of the few UX laws related to ergonomics is called Fitts\u2019s Law. We won\u2019t go into details, you can read more about it in Kevin Hale’s “Visualizing Fitts’s Law”<\/a>; but the gist of it is that it\u2019s easier to click or tap on bigger items that seem closer than it is on items that are smaller. While that might seem obvious, there are interesting implications worth exploring.<\/p>\n The combination of a mouse and monitor adds an interesting variation to this law, as these have corners. Any targets located at the corner are incredible easy to fit, as they are like infinitely big buttons. This means that each monitor has four giant buttons that anyone can hit easily. This is why Microsoft Windows uses the bottom left point for the Start Menu, and the top right for the close button.<\/p>\n On touchscreen devices it\u2019s a little different, however, because using a mouse is different to using your finger. Instead of infinite corners, we have infinite edges<\/em>. These four edges can be used to swipe in or out. Usually they are reserved for system level interactions. For example, swiping from the bottom in iOS brings up the Control Center, and swiping down from the top on Android brings down the Settings screen.<\/p>\n Takeaway:<\/em> Understand how Fitts\u2019s Law creates special areas on your device, and how you can use them to create new and unique interactions.<\/p>\n Building on these principles, when we have a unique form factor, what different aspects of it are in play? Where is the screen positioned, low or high? Is the screen flat, angled, or upright? Is it big or small?<\/p>\n Putting the digital ergonomics principles and form factor characteristics together, we get a better understanding of how the digital principles relate to and leverage the physical characteristics and vice versa.<\/p>\n We should also then consider physical ergonomics or human factors, besides the hand size and thumb position in relation to the screen. The device form and position in relation to the human body.<\/p>\n How do you experience a museum app compared to interacting with a museum exhibit? You navigate your phone, going through the main menu, scrolling through or swiping images of a collection; by using your hand to hold the phone and your thumb or index finger. This is different from being at the museum and interacting with a kiosk as part of the exhibit, by standing in front of it and using your arm\u2019s full movement to go around a screen and observing by moving your head.<\/p>\n In assessing the characteristics of the form factor, there are also technical aspects to evaluate. What are the hardware restrictions or constraints of the chosen form factor? How do people interact with the position, shape and size of the form factor?<\/p>\n How are people physically engaging with the devices? We often talk about lean-forward devices like smart watches or phones, or lean-backward devices like TVs. Lean-forward devices can have smaller fonts, higher information density, whereas lean-backward devices require lower density of information. Depending on a person\u2019s position towards the screen, the perception of size is also different. We need to keep this in mind when assessing our form factor.<\/p>\n Many screens which are used in the public space have unusual properties that we don\u2019t see on things like tablets or phones. This is due to a few reasons, such as the fact that devices often need to be vandalism-proof, suitable for outdoors, and are not mass-produced at the same level as mass-consumer devices. This means screens often have different properties, and we need to design for them specifically.<\/p>\n For screens on ATMs and public transport kiosks, often the glass is extra thick. This causes perception problems between what the user sees and what they touch, causing mis-taps, which could result in long queues at peak times and frustration.<\/p>\n Every screen has a viewing angle, which means at what angle you can see the screen contents correctly and clearly. Most commonly, this is how far to either left or right you can move and still see the screen. Many cheaper screens have a lower viewing angle range, and this can affect situations when two people are using the screen at the same time sitting side by side. For example checking-in to an airline. Ideally, as a designer, you can be involved in or influence the purchase process of a given screen and buy something that\u2019s right for the needs to be addressed, but if not, it might affect the design solutions you come up with.<\/p>\n Takeaway:<\/em> The viewer or viewers might not necessarily see the images and\/or text the same way as you see them while designing (in front and centre of your computer screen).<\/p>\n The second aspect of this is a vertical viewing angle in order to cater for a variety of heights of users as well as the position of the device or screen in relation to the viewer.<\/p>\n Takeaway:<\/em> This issue can be minimised by using more vertical spacing than normal in text and menu items.<\/p>\n For devices with screens that are positioned at a low height, it\u2019s important to a) make hit areas very large, and b) position text, so the user\u2019s own finger doesn\u2019t obscure the text they are trying to tap.<\/p>\n Any product doesn\u2019t just live in a lab or controlled environment, so when we design products for the public space, we need to consider the context. For example, is the device indoor or outdoors? What kind of clothing is the user wearing (maybe related to the weather or special gear)? Is there a single user or are there multiple ones?<\/p>\n For example, people interact with public display terminals in multiple ways. We call this the three-read experience. A person has a different experience beside the terminal, near it and far away from it:<\/p>\n Beside<\/strong> Near<\/strong> Far away<\/strong> Often, we define a user group or persona. But it\u2019s as important to know in which ways you as the designer are not like the user(s).<\/p>\n First learn about yourself. What type of user are you? In which percentiles are you within your \u201cpopulation\u201d? There are many charts showing population distributions, so check your proportions and figure out how similar or different you are. Also, explore how different your \u201cpopulation\u201d reference is from the people for which the device is intended; not necessarily other nationalities but you may be designing for children.<\/p>\n Many public installations have accessibility requirements. A shopping centre may not, but we still recommend you consider how these kind of requirements might change the system or device you are designing.<\/p>\n Designing for inclusivity and accessibility doesn\u2019t just require looking at a few individuals that may represent different types of users, or referring to \u201cthe user\u201d as an abstract concept that represents one set of parameters. It requires looking at a bigger population to understand the relevance of dimensions, defining criteria that account for different interaction needs (visibility, voice, body movement) and using representative anthropometric data<\/a>, which will drive the design.<\/p>\n Additionally, it\u2019s important to consider the adjustability potential. This will allow you to fit a product to a wider range of users. You may want to adapt the product to a specific user, for example, and make the product adjustable or create different sizes of the same product. However, there is a trade off to make between costs, available space and fit (see Inclusive Design and Making in Practice<\/a>).<\/p>\n A couple of years ago one of us worked on a project to design a line of big luxury smart fridges. The team had a more regular fridge size available to test out ideas and understand the dimensions and distribution of cold areas (also drawers and shelves). We were trying to decide whether to put the control display in the middle or at the top of the fridge. So we made a foam square with the real dimensions of the fridge. Two of the industrial designers were quite tall, maybe 1.85m (6 ft), but another team member was 1.6m (5.2 ft). It became clear, when all were standing in front of the model, that if the display was going to be at the top, it had to have an inclination of 45 degrees, so that shorter people could see and actually use it in a comfortable way. We could not have seen this so clearly without having a real size foam fridge and such different team members.<\/p>\n While figuring out what\u2019s possible and feasible in terms of digital interactions and physical form factor and who the user(s) is, we define and refine design principles. However, to make these even more helpful, so that we can eventually judge if this is a good design, we need to consider what is important for the user(s) in this experience. There is no better way to understand these principles, especially when dealing with physical products, but to act things out. Here are some fun and interesting examples of prototyping.<\/p>\n![\"Six](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-displayinterfaces.jpg\")
<\/p>\n\n
The basics of ergonomics and UX<\/h2>\n
Reachability<\/h3>\n
![\"Two](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-smartphonereach.jpg\")
(Source: Luke Wroblewski’s Designing for Large Screen Smartphones<\/a>)<\/small><\/p>\nHand position<\/h3>\n
![\"Three](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-smartphonereach2.jpg\")
(Source: Luke Wroblewski’s Designing for Large Screen Smartphones<\/a>)<\/small><\/p>\nInteraction vs reading<\/h3>\n
![\"Two](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-tabletreach.jpg\")
\n(Source: Luke Wroblewski’s Defining Mobile: 4-5.5 Inches, Portrait & One-Thumb<\/a>)<\/small><\/p>\nFitts\u2019s Law<\/h3>\n
![\"Chart](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-fittsslaw.jpg\")
<\/p>\nInfinite corners and edges<\/h4>\n
![\"An](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-corners.jpg\")
<\/p>\n![\"Animation](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-iphone.gif\")
<\/p>\nWhat\u2019s unique about this form factor?<\/h2>\n
![\"Three](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-threedisplays.jpg\")
How might people react to and interact with these three displays differently?<\/small><\/p>\nExample: Exploring a museum<\/h3>\n
Posture<\/h3>\n
![\"Devices](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-posture.jpg\")
\n![\"Two](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/reach-e1524064545457.png\")
<\/p>\nWhat\u2019s unique about this hardware?<\/h3>\n
Thickness of glass<\/h4>\n
![\"Illustration](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-distortedview.jpg\")
\n(Source: Bridge’s Touch Screen Ergonomics: The key to seamless usability<\/a>)<\/small><\/p>\nViewing angle<\/h4>\n
![\"The](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-viewingangle.jpg\")
\n(Source: Bridge’s Touch Screen Ergonomics: The key to seamless usability<\/a>)<\/small><\/p>\n![\"Illustrations](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-touchscreen.jpg\")
\n(Source: Bridge’s Touch Screen Ergonomics: The key to seamless usability<\/a>)<\/small><\/p>\n![\"Illustration](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-verticalspacing.jpg\")
<\/p>\nWhat\u2019s unique about this context?<\/h2>\n
![\"Illustration](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-devicecontext.jpg\")
<\/p>\n
\nStandard interactions like navigating and finding information.<\/p>\n
\nReading headlines or smaller pieces of information (non solicited), such as general directions or larger images.<\/p>\n
\nAttracting people to the device. How can they understand the value of it, and whether it\u2019s interactive or not?<\/p>\nFind out how you\u2019re not like your user and define an accessibility strategy<\/h2>\n
![\"Photo](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-hands.jpg\")
<\/p>\n![\"An](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-accessibility.jpg\")
<\/p>\n![\"Illustration](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/ergonomics-adjustability.jpg\")
<\/p>\nExample: Designing home appliances for all family members<\/h3>\n
How do we prototype this?<\/h2>\n
Example: How do you test a rear seat UI quickly?<\/h3>\n