I m going to be introducing you to ergonomics More specifically ergonomics in terms of designing touch interfaces for mobile devices I m going to be

Similar documents
Your . A setup guide. Last updated March 7, Kingsford Avenue, Glasgow G44 3EU

Wacom Tablet. start-up guide. Nina Mingioni

Windows 8.1. Tiles come in four shapes: small, medium, wide, and large. The red outlined tiles are live tiles.

Heuristic Evaluation of igetyou

Midterm Exam, October 24th, 2000 Tuesday, October 24th, Human-Computer Interaction IT 113, 2 credits First trimester, both modules 2000/2001

Software Compare and Contrast

QUICK START GUIDE NTS HOSTED PBX CALL MANAGER. Welcome. Getting Oriented

Tips & Tricks on Ipad

Excel Basics Rice Digital Media Commons Guide Written for Microsoft Excel 2010 Windows Edition by Eric Miller

Responsive Design and Mobile Patterns

ipad Training Field Management

HughesFlex Cloud PBX Quick Start Guide

FAQs. A guide for school app administrators

Team : Let s Do This CS147 Assignment 7 (Low-fi Prototype) Report

Thank you for purchasing your new Moochies Watch. We hope you, and more importantly your kids will love it as much as we did creating it.

Spend less time dealing with timesheets.

25 Hidden ios 7 Features

M.A.M System. Final Report. Apper: Jingdong Su Programmer: Jianwei Xu and Yunan Zhao. Wordcount: Mobile Aided Manufacturing

Using PowerPoint - 1

Section 1. System Technologies and Implications. Modules. Introduction to computers. File management. ICT in perspective. Extended software concepts

Mobile Technologies. Mobile Design

Starting from. An Introduction to Computing Science by Jeremy Scott LEARNER NOTES

AAG Mobile App User Manual

Controlling Windows with gestures

iphones for beginners

COMPUTER DESCRIPTION...

Part Tablet, Part Laptop: Make Your Next Computer a Slate PC

Taskbar: Working with Several Windows at Once

Where Did I Save That File?

WINDOWS 8.X SIG SEPTEMBER 22, 2014

10 Most Important Feature Improvements to Apple s ios 11

Tutorial on Using Windows 8

Assignment 1 What is a Computer?

Showcase Workshop QuickStart Viewer Guide

This tool is actually pretty unique and has evolved over the last 7 years. I have been working with Adobe Connect for quite awhile now and one of the

Art of the Apps Monthly Membership. SEPTEMBER 2018 Mobile App: LetterGlow. at Scrapaneers.com. Companion Handouts

Ryan Parsons Chad Price Jia Reese Alex Vassallo

Task Bar and Start Menu

FOCUS: Fusion Experience for ipad. 1 of 10 FOCUS: Fusion Experience for ipad. Class Handout

S A M P L E C H A P T E R

Common iphone problems, tips and tricks

HAPPY HOLIDAYS PHOTO BORDER

RBdigital eaudiobooks and emagazines for iphone, ipad, and ipod Touch. Contents

Phone Tilt. Dynamic UI Adaptations for single-handed smartphone interaction. Fasil Negash Mtr No.:

Introduction to Programming with JES

Making a PowerPoint Accessible

On the Web sun.com/aboutsun/comm_invest STAROFFICE 8 DRAW

Computer Basics. Need more help? What s in this guide? Types of computers and basic parts. Why learn to use a computer?

Adding content to your Blackboard 9.1 class

Getting to Know Windows 10. Handout

Mobile UI. Device, Input, Interaction Characteristics. Mobile UI 1

MEAP Edition Manning Early Access Program Android UI in Action MEAP version 1

CHAPTER NINE. Messaging and texting. Introduction. Messaging is accessible

DOWNLOADING OFFICE 365 TO YOUR HOME COMPUTER

25 WAYS TO MAKE YOUR MOBILE E-COMMERCE REVENUE SKYROCKET

TenKei The Simple Rule Based Strategy

Materials for SOS Workshop No. 1 Getting more out of Microsoft Office Word

Device study 2010 The US results Presentation

Apps Every College Student Should Have

Lesson 2. Introducing Apps. In this lesson, you ll unlock the true power of your computer by learning to use apps!

The 21 WORD . That Can Get You More Clients. Ian Brodie

ArcMap Online Tutorial Sarah Pierce How to map in ArcMap Online using the Fresh Prince of Bel Air as an example

Mayhem Make a little Mayhem in your world.

ebird 201: tips and tricks for entering data

Samsung Galaxy S3 Repair Video Call Apple Tv

How to Attend a DiscoverSkills Webinar

First Unitarian Online Photo Directory Frequently Asked Questions

Mobile 3.1 ios & Android v2

BETTER TIPS FOR TAPS LIBRARY TECHNOLOGY CONFERENCE 2017 JUNIOR TIDAL WEB SERVICES & MULTIMEDIA LIBRARIAN NEW YORK CITY COLLEGE OF TECHNOLOGY, CUNY

SOILMATE MOBILE USER GUIDE

Eanes ios5 Upgrade Guide

17655: Discussion: The New z/os Interface for the Touch Generation

Library Website Migration and Chat Functionality/Aesthetics Study February 2013

Mobile Devices and Smartphones

SolidWorks 2½D Parts


3. Surfing with Your ipad

Mechanical Turk and AWS Workshop

Lines of Symmetry. Grade 3. Amy Hahn. Education 334: MW 8 9:20 a.m.

The Benefits of SMS as a Marketing and Communications Channel From The Chat Bubble written by Michael

Tips & Tricks for Microsoft Word

Using apps You interact with ipad using your fingers to tap, double-tap, swipe, and pinch objects on the touchscreen.

How to Make a Book Interior File

Basic Computer and Mouse Skills Windows 10

Using the Mobile App for Defense Connect Online

How Do I Sync My Iphone To Another Computer Without Losing Everything

Lesson 2 page 1. ipad # 17 Font Size for Notepad (and other apps) Task: Program your default text to be smaller or larger for Notepad

You can keep pretty much any type of content in a note. Here are some ideas:

D E S I G N A N D M A N U F A C T U R E : C O U R S E M A T E R I A L

The Institute of Computer Accountants 27, N. S. Road, 4th & 5th Floor, Kolkata Windows 10 Updates

Intro. Scheme Basics. scm> 5 5. scm>

Trash in the Dock. May 21, 2017, Beginners SIG The Dock (Part 3 of 3)

Human-Computer Interaction: An Overview. CS2190 Spring 2010

Mac OSX Basics. Spring 2014

IMPORTANT WORDS AND WHAT THEY MEAN

Using Tiny ebook Reader Online

Zello Quick Start Guide for Kyocera TORQUE

Reference Manual. Archipad version 5.0.7

How mobile is changing and what publishers need to do about it

Free Fall. Objective. Materials. Part 1: Determining Gravitational Acceleration, g

Transcription:

I m going to be introducing you to ergonomics More specifically ergonomics in terms of designing touch interfaces for mobile devices I m going to be talking about how we hold and interact our mobile devices And how you can use this information to create ergonomically sound mobile designs 1

4

So what is Ergonomics? This is what Wikipedia has to say It s the study of designing equipment and devices that fit the human body, rather than the other way around You probably associate the term with desk set-ups and physical things 5

I like to think about ergonomics as the art of designing things that fit the human body, rather than the other way around 6

So why is ergonomics important? This is my cutlery draw at home And this is always the last fork left in the draw. Why? Because it s horribly uncomfortable to use I m always reminded of this fork when I think about the importance of ergonomics because good design is not just about creating things that are useful, usable and beautiful, but comfortable too 7

Ergonomics is important for a lot of things, from desk set-up, to designing dashboards and jet fighters But it s never really been a consideration when it comes to designing digital interfaces The ergonomics has always been someone else s job, or simply wasn t considered at all In the very early days of punch cards and then terminals input was very limited The user had to work around the computer, not the other way around 8

Then came the personal computer revolution But input was still almost exclusively through a keyword 9

Then this happened 10

The original Mac was the first mainstream personal computer with a mouse Of course the mouse has been around since the 1960s, but it was the Mac that brought it into the mainstream Suddenly the interface wasn t just about a keyboard, but a mouse as well But computers were still something we sat down to use at a desk And ergonomics was still something that related to the keyboard, the mouse, and the desk set-up 11

Then came more portable computers like the Palm PDA These came with a stylus as we were still very attached to our mouse like interactions Ergonomics certainly came into play but as a stylus was used interaction was still quite predictable 12

Then everything changed when the iphone came about in 2007 Of course the iphone wasn t the first Smartphone, or the first touchscreen phone But arguably more than anything else it popularised the full screen touch interface that pretty much every Smartphone and Tablet now utilises Now designers had to really think about designing for these things (hold up hands and fingers) 13

And physical touch interfaces are now everywhere, from smart watches to touch enabled laptops Ergonomics has now become a very key consideration for interface design Not just creating interfaces that are usable and beautiful, but comfortable to use too 14

And in our increasingly digital world we are using mobile and touch screen devices more and more (spot the one guy not on their phone) 15

How many times on average do you think that someone looks at their mobile? There s a lolly pop available for everyone that guesses correctly 16

According to a 2015 study at the Uni of Lincoln which logged smartphone use using an app So with mobiles being used so much, and so often it s pretty important that interfaces are comfortable to use An interface that is not very comfortable to use is bad enough once or twice a day, times that by 10 and you have a real problem 17

Predominately mobile, could be tablet or even desktop 18

If you go out and observe people using mobile devices You find lots of different ways that people use their mobiles and tablets The beauty of mobile devices is that they re er mobile They can be used at home, at work and out and about Someone might be using their mobile whilst waiting for a bus 19

Or a particular bug bear of mine while riding their bike 20

Or even in the bedroom Apparently 1 in 9 Americans have used their mobile during sex And as you might guess how you hold your mobile is going to differ depending on whether you re waiting for the bus, on your bike or having a bit of rumpy pumpy 21

In 2013 Steven Hoober did just that and carried out over 1300 observations of people using their Smartphone He found the following three main grips One handed, two handed with fingers and two handed with thumbs Mind that this was a few years ago when mobiles were perhaps a bit smaller, so it s likely that two handed use is now more common And how we hold a device impacts where on the screen we can comfortably touch 22

And even though about 90% of people are right-handed, left handed use is quite high Makes sense as people often doing something with their dominant hand e.g. holding coffee 23

A separate study in 2014 found that 88% of ipad use is whilst seated Usually propped up on table or holding with two hands 24

Unsurprisingly people will change how they hold a mobile device depending on what they re doing And as we ll see it also depends on the sort of device they re using And this is tricky, because it makes it harder to predict how someone will be interacting with your mobile design But the good news is that you can make some educated guesses 25

Firstly that they are likely to be holding the device vertically, rather than horizontally A study a few years ago by Steven Hoober found that we use mobiles vertically about 90% of the time In a different study Hoober and Patti Shank found that tablets are used vertically about 60% of the time 26

So we can say that whilst orientation might change depending on task e.g. view a video or photos Usually people hold their device vertically And for this 90% of the time, how do people hold their device vertically? 27

These graphics show the tap areas depending on the hold Green is most comfortable to tap, unless you have exceeding large hands the red is hard to impossible to tap 28

And as mobile devices get larger the red area increases (show own mobile) This is probably why we re likely to see more two handed use as mobiles get larger 29

You should place frequently used controls in this easy to reach area You should also place them together to avoid having to reach all over the device 30

We can see that Facebook do this for their mobile app For a friend the common controls are in the middle and bottom of the screen where they are relatively easy to reach 31

Going back to our different grips we can see that hand placement also affects what is visible on the screen For example the one hand grip obscures the bottom right of the screen 32

So even if we don t know how a device is being held it s important not to obscure important information For example, notifications or key information 33

Another thing you ll see if you observe people using their mobiles Is that most of the time (70%) it s with a thumb, not a finger 34

Which is not very surprising when we go back to consider the main grips used 35

So design for fat fingers and thumbs Because if you design a nice big touch target, then it will be easier to tap 36

Microsoft carried out some research to see how easy it was to tap targets of increasing sizes Unsurprisingly it s much harder to accurately hit small targets At 3 mm up to 1 in 5 taps were missed and 1 in 30 missed at 5 mm 37

So your minimum should really be 44px by 44px Although if you really need to, you can get away with a narrower or shorter target You should also have at least 8px of spacing between targets (unless very large) 38

The bigger the touch target the better 39

Mail app for iphone is a nice example of maximise tap targets and supporting big gestures Can tap anywhere in message Can also swipe to perform actions and to bring up side menu 40

We ve been talking about finger and thumb sizes Anthropometry is an important part of ergonomics It s basically the measurement of people and their body size and shape It s used to ensure that a design fits a large percentage of the population 41

For example if you look at the height for a population you get a classic bell curve Relatively few very short people and relatively few very tall people 42

What you can do is design something that fits most people e.g. 95% of the population So if a design is comfortable for someone at the 97.5% and someone at the 2.5%, it should fit the rest Which is why it s often more useful to focus on making a design comfortable for the more challenging users 43

For example this sort of a scenario If you can create a mobile design that can be used one handed whilst walking down the street, it should be usable for most other scenarios 44

Which brings me to another rule of thumb Design with challenging users and scenarios in mind e.g. mobility impared Like designing to fit 95% of the population, if you can create a design that is comfortable and usable for challenging users and scenarios, it should work well for the rest 45

And when we re designing for challenging users we should consider eyesight as well as dexterity Important aspect of ergonomics is also being able to see a screen at holding distance Remember that a mobile might not always be very steady in the hand e.g. in motion 46

Bigger text, bigger buttons, bigger controls 47

Your base font should really be a minimum of 16px Your line height should be at least 200% 48

Is it a tap, swipe, button press? 49

It s no interaction at all 50

This is a great quote from Don Norman, who is one of the forefathers of usability and UX and indeed coined the UX term 51

You see the less interface there is, the less ergonomics you have to consider So try to keep taps and interactions to a minimum Think about things like notifications and alerts How can you utilise mobile capabilities like GPS and a camera to cut down interactions? How can you second guess the user so that they can leave their mobile device in their back pocket? 52

If you re interested in this I can recommend the book The best interface is no interface by Golden Krishna I ll provide a link to an article about this at the end of the presentation 53

So you have a design You re pretty happy with it You ve followed good mobile UX design practice But how do you know if the ergonomics are any good? 54

Prototype it For example Jeff Hawkins, one of the inventors of the Palm Pilot initially walked around with a wooden mock-up of the device to test the concept You can also of course quickly test paper prototypes, or quick mock-ups using one of the many mobile prototyping tools out there 55

So my penultimate and most important rule of the thumb is to test designs Try to test with a range of people, devices and scenarios Also try to test realistic scenarios and environment For a mobile device you want to get out of the usability lab for testing 56

Of course the only way to tell if a design works is to test it These are often referred to as field trials within ergonomics 57

So my penultimate and most important rule of the thumb is to test designs Try to test with a range of people, devices and scenarios Also try to test realistic scenarios and environment For a mobile device you want to get out of the usability lab for testing 58

So as you can see ergonomics is becoming increasingly important to UX designers And with more mobile devices, and more touch devices it s becoming increasingly important to consider the ergonomics of a design 59

So here once again are my 10 rules of thumb for good mobile UX ergonomics 60

61

If you want to find out more here are some articles I recommend I ll keep this slide up for a while in case you want to take a photo 62

And this is an excellent book to read Designing for touch by Josh Clark 63

Thank you once again for coming along I ll upload the slides over the next few days to both my website and to slideshare 64