Crossing the Resolution Divide spanning an application across multiple devices

James Ketrenos

Cyrene Domogalla

2

Cyrene Domogalla

Intel Interaction and Graphics Designer

James Ketrenos

Intel Software Architect and Developer

Who we are

3

Handset

800x480 – 4” – 233PPI

864x480 – 3.67” – 269PPI

960x640 – 3.5” – 326PPI

MeeGo can run on a variety of resolutions and display sizes -Some examples-

Tablet

1024x768 – 10” – 119PPI

1360x768 – 11.6” – 135PPI

So many choices…

4

So what?

5

Status bar is 30px tall and designed

for 150PPI

Seen on target 150PPI screen: ~5mm

(25.4mm/inch * 30px / 150px/inch)

Seen on 330PPI screen: 2.3mm

Seen on 110PPI screen: ~7mm

150PPI

110PPI

330PPI

Impact Graphics

6

Impact Layout

7

Touchable areas

Higher PPI devices makes buttons smaller and hard to hit

Gesture: Tap vs. Pan

“Tap” – 'down' and 'up' within a specific period of time and little movement

“Pan” – 'down' and more than a little movement

If movement threshold is defined in pixels then on high PPI handsets, triggering the “Tap” becomes difficult.

Impact Interaction

8

Fonts... similar to the graphics problem

Compounded by device usage – reading distance

“96DPI” desktop world defined to make fonts look (roughly) the same size as on paper given recommended viewing distance

Impact Legibility

9

What's the solution?

10

Specify the graphics and layout in physical units

Write your app using MeeGo.Ux.Units

Density Independence

11

QML element which ties into the display density (similar to QtMobility DisplayInfo)

Uses QX11Info::appDpiX()

Assumes square pixels – developers interested in non-square pixels can base similar code on DisplayInfo's full display metrics

What is MeeGo.Ux.Units?

12

real mm - Pixels per millimeter

real inch - Pixels per inch

real vp - Pixels per "virtual-pixel"

MeeGo.Ux.Units properties

13

The properties returned by Units are non-integer

units.mm is 4.3307087 on a 110PPI display

Working directly with units.mm = non-integer #s

Introduces crawling and inconsistent pixel layout

A note on rounding

14

Solution?

15

Use MeeGo.Ux.Units' conversion functions

16

int mm2px (real millimeters)

int inch2px (real inches)

int vp2px (real virtualPixels)

MeeGo.Ux.Units functions

17

A virtual pixel is the size of a pixel on a normalized 330PPI device.

Allows graphics to be designed “pixel perfect” while maintaining density independence

A single pixel border specified in mm/inches can introduce too much rounding error

What is a virtual pixel?

18

$ git clone git://meego.gitorious.org/meego-ux/meego-ux-components $ cd meego-ux-components $ qmake $ make && sudo make install

Getting MeeGo.Ux.Units

19

import Qt 4.7 import MeeGo.Ux.Units 0.1 Rectangle { Units { id: units } width: units.mm2px(100.0) height: units.mm2px(50.0) }

Example!

20

But... units only get you so far!

21

„Scaling up‟ preserves layout but not aesthetics

Scaling and Layout

22

A UI can‟t always just be scaled to fit the device specs.

Scaling and Layout

23

The paradigm likely will not fit

The UI may need to be completely redesigned

Scaling Down

www.funny-cat-pictures.com/

24

It is better to have a higher resolution image and scale

down than be stuck with an inflexible low res image

The problem with scaling

25

Sometimes you just have to make pixel perfect sized graphics for a larger or smaller design.

This is especially important when dealing with icons.

The problem with scaling

26

Separate your graphics from your icons

Icons are typically fixed size and connote a contextual meaning.

Graphics are used to create your layout - they provide the backgrounds, borders, and color but do not add any specific meaning.

Use BorderImage with sci files

Design Theme

27

BorderImage breaks images into 9 blocks

Border dimensions specifies which region of graphical asset to scale when filling

BorderImage with 4 pixel border on each side

Result when applied to a 200x32 element

Crash course on „BorderImage‟

28

QML allows you to specify the border dimensions directly in the QML

Crash course on SCI

29

However this is not designer friendly and could require code change with a graphics

update

Crash course on SCI

30

Instead – use SCI files

Crash course on SCI

31

SCI example

Instead of:

BorderImage { source: “frame.png” border.top: 4

border.right: 4 border.bottom: 4 border.left: 4 }

BorderImage { source: “frame.sci” }

and in frame.sci: source: frame.jpg border.top: 4

border.right: 4 border.bottom: 4 border.left: 4

Use:

Crash course on SCI

32

Generating Assets

33

Make sure your graphics are as scalable as possible.

Vector based graphics

Benefits of a vector graphic are -- super powers. They're based on math instead of pixels. You can easily manipulate them; they are easily update-able.

You can use scripts to pull them out of the application they are in.

Vector graphics

34

Regardless of your ability to use SVGs in MeeGo currently, graphics

made as SVG standard compliant will help you in the long run

The pretty pieces

35

Commercial:

Photoshop and Illustrator

Open source

Gimp and Inkscape

Illustrator and Inkscape are your vector programs

Gimp and Photoshop are better for layout

Tools

Interaction Best Practices

36

37

Interaction Best Methods

Think about how the user would hold the device

Does this effect your layout?

Does it need to change when the orientation changes

Where are the fingers likely to be?

Sides and bottom work well

Top is often a good spot for actions used less often

38

Interaction Best Methods

Keep your user in the know. Do your best to keep the

context of the interaction

How can you use animations to describe the touch

interaction?

39

Interaction Best Methods

Negative Space is your ally.

40

If you can, prototype.

Interaction Best Methods

41

Being clever can be brilliant or it can be trouble, so be

carefull!

Basically stick to the paradigms. It is tempting to re-invent,

but if it is confusing it is useless.

Use the components; they're there to help!

Interaction Best Methods

42

MeeGo Future

SVG support in theming

Automatic change if device density changes (screen migration)

Enhance BorderImage to support virtual pixel borders in .sci files

Pixel perfect size preference vs. automatic scaling

User and device specified font scaling support

Input resolution properties

43

Demo!