Elaine Chen: Mobile Touchphone UI Design 101

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

more share options
Embed For WordPress.com

Without related presentations

Elaine Chen, art director at Sapient’s interactive studio in Toronto.

Been there for nearly 3 years.

Before then I worked at the Ontario Science Centre as their web designer.

Until recently background has been mostly web except for a bit of mobile I did a year ago.

Which is how I ended up getting sent to a Sapient office in the States to work on the UI for a new mobile touchphone.

I worked with IAs from both Sapient and the client side.

Unfortunately the work we did is NDA, so this presentation is a high-level look at what to keep in mind when you design for a mobile touchphone.

I don't actually have quantitative evidence of this, but I was blown away by how much experience a couple of the American Sapient IAs had in mobile design.

Phones in Canada don’t ship with Flash Lite, or QR code-reading software.

Frustrating when you’re a designer in experience marketing because you see all these interesting campaigns around mobile web, but you never get to work on one.

The first thing you need to know when you design for mobile is the form factor.

Is it a candy bar? Is it a flip? Does it have a slider?

If it has a slider, is it a numeric keypad or a qwerty keyboard?

Does anything happen to the screen when you flip the phone 90 degrees?

If so, will your app need to be in both portrait and landscape mode?

And what happens if there's a slider?

This means you have to think through the UX of up to 3 versions of the same screen.

All phones have hardkeys for power and volume, but otherwise it varies.

You need to know because it affects the navigation you put in your UI.

If there's a hardkey Back button, or a dedicated Home button like the iPhone, you don't need to put a Back button in your screen interface unless you've drilled down a few levels.

PPI = pixels per inch - refers to pixel density or resolution

These screens are accurate in terms of pixel dimensions, but not physical dimensions.

HTC screen is very high resolution so it shows up very large on a computer screen - but it's physcially the smallest screen of the lot.

The device I worked on was extremely high res. I ended up printing out my designs to get a better idea of what the screen would look and feel like.

There are two main types of mobile touchscreen technology: resistive and capacitive.

Resistive screens use pressure, so they can be used with a stylus and in theory, with gloves on .

This technology is common in Asia where gesture recognition needs to be precise.

Resistive screens are also cheaper than capacitive screens.

Capacitive screens use a surface material that stores a slight electrical charge.

Because our bodies conduct electricity, we change that charge at the point of contact when we touch the screen with our finger.

That's why you can't use a stylus with your iPhone (unless it's a special stylus that's been designed for that purpose).

The iPhone, btw, has a grid of sensors which is why it's so sensitive and multi-touch works really well.

Multi-touch - only possible on capacitive screens. (I believe Apple has it patented up the wazoo.)

Good to know how it works on the device you're designing for. When you touch two spots at once, how is it interpreted? Do both spots register or does the phone just calculate the equidistant point between them?

It's important to know which gestures are at your disposal, and how precise they are.

Hardest to reach areas for one-handed use - and if you're in the right-handed majority - is the top left corner, and the bottom left corner.

Which is kind of interesting because our instinct as North Americans who read top to bottom, left to right is to move the most used apps to the top of the screen.

This makes establishing standard places for buttons difficult if an application switches from portrait to landscape, because in landscape, you're holding the phone in both hands and all of a sudden the rules change.

Designing for mobile is a paradigm shift.

5-way - refers to navigation on non-touch cell phones - up down left right and enter.

Metaphors change. On this project I would get wireframes with scrollbars in them. On a touch screen you don't need a dedicated area for scrolling, you can just grab the whole screen.

Layout conventions change. Unlike web, main menus tend to sit at the bottom rather than the top because it's easier to reach with one hand.

Visual target should be at least 5mm.

Actual touch area should be at least 7-10mm.

Touch areas should be separated by at least 1mm.

Users have better precision horizontally than vertically, so it helps to put extra space between rows of touch targets.

Buttons need to be large so that they can hit precisely.

And of course, whenever you have a touchscreen, whether it's a kiosk or a phone, buttons need to look like 3-dimenstional buttons.

Buttons, whether on a touchscreen or the web, need feedback to let the user know that it's been successfully pressed.

I believe the Samsung Instinct has haptics so you do get physcial feedback when you press a button, but otherwise you need an auditory and/or visual cue.

However, that visual cue that you've pressed an active area can't just be a colour change, like a rollover on the web.

Because your fingertip covers up the target area, feedback has to visible outside of it.

Glows seem to be popular for icons and small buttons, and signpost popups seem to get used for qwerty keyboards or monthly calendar views, any interface with smaller than normal touch areas crammed together.

When you're coming up with a colour scheme for a UI, this is something to think about:

A dark palette will use less battery power because the screen doesn't need to illuminate as brightly.

In RGB colour, black is actually the absence of light (and you can see that by the way this slide is being projected).

When it comes to colour palette and colour contrast, you also have to consider environmental factors as well as normal rules of contrast and readability.

Touchscreens that use resistive technology have poorer visibility in sunlight because of light gets reflected between all the layers in the surface.

Similarly you may want to know what kind of finish the phone you're designing for has.

Lighting conditions can be simulated in Adobe Device Central, which ships with CS4. They have a stock library of existing device models. I've no idea if the iPhone or any of the new touchphones are included.

Transparency can affect a device's processing power, because the value of each pixel that's either transparent or semi-transparent needs to be calculated.

So if the PPI is very high, this means there are a lot of pixels that have to be accounted for if you have close-cropped icons, or rounded corners, or drop shadows and glows.

That was my biggest headache last fall. Client-side design department wanted a soft, fuzzy, layered aesthetic, but the software engineers said no, there had to be more square corners and hard edges and flat colours.

So that brings me to...

...the biggest lesson I learned about designing a mobile touchphone UI:

Designers want to create the best user experience. Teams of software engineers who are concerned about performance and want their application to get the attention it needs. We sat in a lot of meetings with them since they knew what was technically possible and what wasn't.

Carrier - equivalent in Canada would be Telus or Rogers - who want the product to meet their business requirements and their branding requirements. They have a lot of power, which we learned the hard way.

13 Favorites

kbfrench favorited this 1 month ago
Cathy Wang at Cathy Wang, favorited this 2 months ago
Tags mobile ui
aurobindo nayak, industrial designer favorited this 3 months ago
fgtseng favorited this 4 months ago
Tags mobile ui
Jakob Denk, graphic designer, web developer, Presenter, Student at Home, favorited this 5 months ago
graceathayde favorited this 5 months ago
Tags mobile
charcus favorited this 6 months ago
Actaman favorited this 6 months ago
Tags nice
dickypan favorited this 7 months ago
Tags mobile ui
Libin Pan, Ruby on Rails Expert at LearnHub.com, favorited this 7 months ago
Tags mobile design
Lucilla favorited this 7 months ago
Tags mobile user interface interaction design
Lee Dale, Culture, Inspiration & Community at Say Yeah!, favorited this 7 months ago
Tags mobile ux
Dre Labre, Creative Director at Tribal DDB, favorited this 7 months ago
Tags planning design ui ux mobile

Elaine Chen: Mobile Touchphone UI Design 101 - Presentation Transcript

Mobile Touchphone UI Design 101 or How I Learned to Stop Worrying and Love Designing Giant Buttons Elaine Chen | Art Director, Sapient StayFresh07 | MaRS Discovery District, Toronto | April 20, 2009
Why am I here? I’m not an expert. 2
The US is ahead of Canada when it comes to mobile. What’s a designer to do? 3
The ﬁrst thing you need to know... Is it a candy bar? Is it a ﬂip? Is it a slide? 4
Is there an accelerometer? Portrait orientation Landscape orientation What if it also has a slider? This may affect the number of screens you have to design. 5
What are the hardkeys? iPhone Samsung Instinct BlackBerry Storm HTC Diamond Home Back, Home, Call Call, Home, Back, Home, Back, Call, End Call End Call, 5-Way Nav They may affect the navigation standards you put in the UI. 6
No standard screen size or resolution. 2.8” 3.5” 3.25” 3.1” BlackBerry Storm Samsung Instinct iPhone HTC Diamond 360 x 480 240 x 432 320 x 480 480 x 640 184ppi 159ppi 163ppi 287ppi It’s difﬁcult to get an accurate idea of what the artwork will look like on the device just from looking at your computer. 7
Does it have a resistive touch screen? This part makes me sound really smart. 8
Or does it have a capacitive touch screen? And what about multi-touch? 9
Know your gestures. Tap Double tap Drag Flick Pinch (multi-touch) How precise are they on the device you have to design for? 10
Hardest to reach areas. Left-handed users are screwed. Sorry. 11
Visual design language changes. Mobile ≠ web. Touch ≠ 5-way. 12
Recommended touch target dimensions. Gutter 1mm Visual target 5mm Touch target 7-10mm Users have better precision horizontally than vertically. 13
Buttons. Fitts’s Law: targets that Big. Buttony. are big and close together are easier to hit. 14
Visual feedback standards change. Feedback needs to be visible outside of the touch area. 15
Dark palette = Light palette = less backlight = more backlight = less battery power more battery power 16
Environmental factors. Here comes the sun! 17
Transparent pixels. Minimizing the number of transparent pixels may help the phone’s performance. 18
And the most important lesson I learned... Like any other project, getting all your stakeholders on the same page can be a bitch. 19
Thank you! echen@sapient.com 20