Differences between revisions 14 and 15
Revision 14 as of 2011-05-11 02:58:58
Size: 12997
Editor: shoobe01
Comment:
Revision 15 as of 2011-05-11 12:03:18
Size: 13806
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 7: Line 7:

{{{#!wiki yellow/solid
I have a starTAC. Should we get a photo? If I can't power it on, I can fake that, I suspect.
}}}
Line 18: Line 22:
Despite my mobile needs, they’re not everyone’s. Mobile design is NEVER about us. It’s about all the other people who are using a range of multiple devices, with varying needs in limitless contexts. Despite my mobile needs, they’re not everyone’s. Mobile design is ''never'' about us. It’s about all the other people who are using a range of multiple devices, with varying needs in limitless contexts.
Line 20: Line 24:
Here are the things we must consider relating to this Screens, Lights & Sensors chapter in order to create an enriching user experience while considering everyone.  
 * Context of use
 * Display size
 * Display resolution 
 * Display technology
Here are the things we must consider relating to this '''Screens, Lights & Sensors''' chapter in order to create an enriching user experience while considering everyone.
 * Context of use.
 * Display size.
 * Display resolution.
 * Display technology.
Line 44: Line 48:
 1. Have the automatic brightness sensor picks up the ambient light around you and the phone (not your face which typically occurs). It recognizes the low level of light and automatically dim’s the screen to an appropriate level to minimize eye strain and maximize viewability.  1. Have the automatic brightness sensor picks up the ambient light around you and the phone (not your face, which typically occurs). It recognizes the low level of light and automatically dim’s the screen to an appropriate level to minimize eye strain and maximize viewability.
Line 46: Line 50:
But not all users like automatic brightness on... it can rapidly drain the device’s battery. But not all users like automatic brightness on, partly as it can rapidly drain the device’s battery.
Line 48: Line 52:
 2.  So as a UI designer, provide immediate access to brightness controls. Rather than have them buried in a system setting, consider using the physical keys (ex. volume) that can open up a menu to control the display settings. These physical controls have eyes-off functionality, and can be interacted with, without even looking at your device.  2. Provide immediate access to brightness controls. Rather than have them buried in a system setting, consider using the physical keys (ex. volume) that can open up a menu to control the display settings. These physical controls have eyes-off functionality, and can be interacted with, without even looking at your device.
Line 90: Line 94:
{{{#!wiki yellow/solid
Not loving this table. There are handsets with "tablet" resolutions, etc. Might be good to talk instead about how annoying it is. That size vs. resolution has huge overlaps. In order to counter the part where people STILL quote 44px as the touch target size. Oops! Even iPhone4 has double the resolution, so this is dumb.

Anyway, maybe toss it and transition the discussion to the density thing right here, to finish it off?
}}}

Line 97: Line 108:
Line 98: Line 110:
Mobile devices use a range of display technologies.  Some devices may use multiple technologies within a single device.  Each technology can serve a unique purpose in functionality – backlight, primary display, flashing indicators. Mobile devices use a range of display technologies. Some devices may use multiple technologies within a single device. Each technology can serve a unique purpose in functionality – backlight, primary display, flashing indicators.
Line 117: Line 129:
******Retro-reflective? STEVEN thoughts?******* === Input Overlays ===
layer messes with things

=== Retro-reflectivity ===
default for eInk, used to be universal for all displays, but not now due to perception it doesn't work well with extra layers... while true, it works /some/ so should be included... etc.

The Relationship

Let’s travel down memory lane. Take a moment to think back when you had your first date. Stop! Just kidding. That’s outside the scope of this book. But, do take a moment to bring up memories of when you bought your first cell phone. For some of us, that journey was a bit longer than others. Even though mine was some time ago, I clearly remember the exact year, the model, and reason why I bought it in the first place.

The year: 1997. College.

The model: Motorola StarTAC, 2G GSM. 4 x 15 character, monochrome graphic display.

I have a starTAC. Should we get a photo? If I can't power it on, I can fake that, I suspect.

The reason: Cool factor! A flip phone, and the smallest cell phone available. I could send and receive calls, SMS, and store up to a 100 contacts. And I could show it off ever so smoothly when I clamped in onto my belt. Back then, that was all of the functionality I could ever want! It was love at first sight!

The Break-up

Well, today, that phone is no longer with me, sad to say. I’ve had to keep up with the times and the technology. Since that StarTAC, I’ve gone through an extensive amount of mobile phones. I believe the count total now is eight. That number seems reasonable with the rate at which people get a new mobile phone today -– a new phone every 18 months.

Today, my mobile needs of having a device to assist me managing my life require greater interactive control and highly visible functionality on a powerfully, crisp and color display. That original 4 x 15 monochrome graphic display used today, would be quite limiting and unsatisfying.

I’m not "everyman"

Despite my mobile needs, they’re not everyone’s. Mobile design is never about us. It’s about all the other people who are using a range of multiple devices, with varying needs in limitless contexts.

Here are the things we must consider relating to this Screens, Lights & Sensors chapter in order to create an enriching user experience while considering everyone.

  • Context of use.
  • Display size.
  • Display resolution.
  • Display technology.

Context of Use

One of the mobile design principles centered around this book is that mobile devices must work in all contexts. They must function properly and behave appropriate in variety of environments. Let’s consider the following contexts that can affect the way we interact with the mobile display.

Outdoors

The outdoors is the most complicated environment to design around. It’s highly unpredictable, constantly dynamic, and uncontrollable. External stimuli such as bright sunlight, cloudy days, moon light, darkness, street lights aren’t controlled by the user. We can’t just switch on and off the sun or blow the clouds away. All of these stimuli can make it more difficult to view the screen affecting the way our users interact with the device.

Indoors

The indoor environment may be more predictable, less dynamic, and controllable than the outdoors, but it is still highly complicated. External stimuli present may be natural light from windows, doors, skylights, or generated light from bulbs: florescent, incandescent light, LED, halogen, high-pressure sodium lamps.

Both

Mobile users are constantly transient which changes their environment. They may be using their device outside in daylight to read the news, while then walking inside a public building with dim lighting.

This change affects the amount of time it takes our rod receptors in the back of our retina to respond to light differences. The greater difference between the two environments, the longer it will take our eyes to appropriately adjust. This affects our ability to quickly detect and identify details in that time – such as text, small images, and even controls.

Imagine this scenario: A user takes his mobile smartphone into a movie theater. The lights inside are very dim. He wakes his phone to check the time. The screen display is excessively bright causing him to look away. This is not just a screen display technology issue, it’s a UI design problem.

Here are two solutions:

  1. Have the automatic brightness sensor picks up the ambient light around you and the phone (not your face, which typically occurs). It recognizes the low level of light and automatically dim’s the screen to an appropriate level to minimize eye strain and maximize viewability.

But not all users like automatic brightness on, partly as it can rapidly drain the device’s battery.

  1. Provide immediate access to brightness controls. Rather than have them buried in a system setting, consider using the physical keys (ex. volume) that can open up a menu to control the display settings. These physical controls have eyes-off functionality, and can be interacted with, without even looking at your device.

Displays

Mobile devices displays can range in size, resolution, and pixel density (ppi). As a mobile designer and developer, it’s helpful that you are become familiar with these differences so you can make appropriate decisions throughout the design process. Depending on the requirements of the project, you may be designing for one particular device or multiple devices with varying displays.

Screen sizes

Display sizes vary with the type of mobile device. They are measured diagonally from the display’s corners. Typically, smartphones have larger screen sizes then feature phones. A common misconception with mobile devices is that the screen sizes limit their ability to see the screen.

However, people automatically adjust the visual angle between the device and our eyes. Entirely aside from phones being hand-held, they get moved to the right distance to see things correctly.

Broadly speaking, video display ends up occupying the same field of view regardless of the device size. If we watch a movie on a 46” HDTV, we will distance ourselves enough so we are able to see the entire TV in our visual field. That visual angel can be similar when we view a movie on a phone. This is why people actually do watch video on phones, and will continue to do so.

Other factors that affect how we automatically adjust our visual angle to see the screen include:

  • Vision impairments a person might have.
  • The size of the display content, such as images, text, buttons, indicators.
  • The amount of light the device is giving off (illuminance).
  • The amount of light reflected from its surface (luminance).

Device Type

Screen Size

Screen Resolution

Pixel Density

46" HDTV

46"

1920 x 1080

48

iPad

9.7"

1024 x 768

132

Kindle

6"

800 x 600

167

HTC Evo 4G

4.3”

800 x 480

217

Nexus One

3.7”

800 x 480

252

iPhone

3.6”

320 x 480

160

Palm Pre

3.1”

320 x 480

186

Nokia E60

2.2”

416 x 352

240

Screen resolutions

The screen resolution is determined by the total number of physical pixels on a screen. The actual size of a pixel varies across devices as well as they type of technology being used in the display.

Below are common screen resolutions (pixels) across mobile devices: feature phones, smartphones, and tablets.

Small- 128, 176, 208, 220

Medium - 240, 320

Large - 320, 360, 480+

Tablet – 600, 800, 768, 1024

Not loving this table. There are handsets with "tablet" resolutions, etc. Might be good to talk instead about how annoying it is. That size vs. resolution has huge overlaps. In order to counter the part where people STILL quote 44px as the touch target size. Oops! Even iPhone4 has double the resolution, so this is dumb.

Anyway, maybe toss it and transition the discussion to the density thing right here, to finish it off?

Pixel density

Pixel density (ppi) is based on the screen resolution. It equals the number of pixels within an area, such as a square inch (units do vary, so refer to numbers you find very carefully).

A screen with a lower pixel density has fewer available pixels spread across the screen width and height. A screen with a higher density has more pixels spread across the same area.

When designing for mobile displays, it’s important to be aware of the targeted device’s pixel density. Images and components that are designed in a particular height and width in screen pixels, appear larger on the lower density screen and smaller on the higher density screen. Objects that become too small will affect legibility, readability, and detail detection.

Mobile Display Technology

Mobile devices use a range of display technologies. Some devices may use multiple technologies within a single device. Each technology can serve a unique purpose in functionality – backlight, primary display, flashing indicators.

As a designer and developer, it’s important to understand that each of these technologies have limitations such as affecting the device’s battery life, lifespan, creating glare, or restricting orientation modes. Therefore, we need to create UIs that can maximize the user experience around these limitations. Below are descriptions of some common types.

  • LED – or Light Emitting Diodes are a superconductor light source. When the diode is switched on, the electrons move within the device where they recombine with electron holes. This causes a release of photons.
  • OLED – or Organic Light Emitting Diode contains an organic semiconductor film which emits light in response to an electrical current.
  • AMOLED – or Active-matrix OLED, is a technology that stacks cathode, organic, and anode layers on top of a Thin Film Transistor. This allows for line-scanning control of pixels.
  • Super AMOLED – A variation of AMOLED that now has the layer, which detects touch, integrated into the screen rather than being overlaid on top.
  • ePaper - ePaper generally relies on reflected, not emitted light, by suspending particles in a liquid; a charge causes the dark particles to rise and be visible, or bi-color particles to rotate from light to dark (technologies vary) and display dark areas on a lighter surface, much like ink on paper.

Type

Used In

Benefits

Limitations

LED

Annunciator illumination

Low power consumption. Small. Efficient and fast switching.

Single channel single bit devices. Communicate one piece of information at a time.

OLED

Primary display

Functions without a backlight. Thin. Can achieve a high contrast ratio. When inactive, does not produce light or use power.

Uses a lot of power consumption to display an image with a white background, such as black text. May develop screen burn-ins over time.

AMOLED

Primary display

Functions without a backlight. Can be used for large screen displays.

Problems with glare and readability in direct sunlight

Super AMOLED

Primary Display

Brighter screen display. Has less sunlight reflection. Reduced power consumption.

Higher power consumption to display a white screen.

ePaper

Primary Display

Low power consumption. Reduced glare. High contrast ratio.

Slow refresh rates. Color technologies are just emerging.

OLED and AMOLED displays are lit-pixel displays (without a backlight). White text on black will, unlike a backlit display, use much less power than black text on white. This may be a key design consideration for those devices.

Input Overlays

layer messes with things

Retro-reflectivity

default for eInk, used to be universal for all displays, but not now due to perception it doesn't work well with extra layers... while true, it works /some/ so should be included... etc.

Sensors

Another important concept that will be discussed later in this chapter are location based services used by operators and GPS satellites. These services identify tracking sensors in your mobile device to determine your location with varying degrees of precision and accuracy. Location services can provide an enriching user experience for a multitude of reasons.

They can work tangently with your devices OS and existing applications to trigger notifications or create appropriate device state changes without compulsory user interaction.

Example: You are driving to the airport to catch a flight. Your mobile “Itinerary travel application” has you scheduled for a 3:00pm departure at ORD.

As you get within a particular range of the airport, location services identify your current location and proximity to the airport. Sending that information you’re your Itinerary application, a notification pops-up mentioning the latest departure time, and any occurring gate changes.

Patterns for Screens, Lights & Sensors

The patterns within this chapter describe how Screens, Lights, and Sensors can be used to increase visual and device performance, provide additional notifications, and incorporate location base services with native applications. The following patterns in the chapter will be discussed.

LED– Notice of status should have a visual component that does not require use of the primary display.

Display Brightness Controls – Displays are the most critical output on smartphones. A method to control the display settings must be easily accessible, easy to use, and allow for manual adjustments.

Orientation – Devices must allow for orientation changes to display content in the manner most readable and comfortable to the user.

Location – Availability of location based service, and the actual location of the handset must be easily and accurately communicated.

Screens, Lights, and Sensors (last edited 2012-02-04 00:34:55 by shoobe01)