User Interfaces in the Mobile Industry

friendlybathMobile - Wireless

Nov 12, 2013 (3 years and 9 months ago)

61 views

User Interfaces in the Mobile Industry

October 2010

2

Open
-
Plug Confidential & Proprietary

Open
-
Plug key facts


Founded in 2002


France (Sophia
-
Antipolis), Romania (Bucharest), Taiwan
(Taipei)


~ 50 people



Open
-
Plug provides

the first open software
framework
for
mass market wireless phones


Open
-
Plug key facts


Mobile industry
veterans


Experts in
embedded software
for mobile phones


H.Q. based in
Sophia Antipolis,
the French ‘telecom
valley’

Experts in mobile
software
development
environments

3

Open
-
Plug Confidential & Proprietary

4

Open
-
Plug Confidential & Proprietary

Introduction and
background

5

Open
-
Plug Confidential & Proprietary

User Interface



What is a User Interface ?



Display things



Receive inputs


6

Open
-
Plug Confidential & Proprietary

6

Open
-
Plug Confidential & Proprietary

Window

List

toolbar

Btn right


Btn

mid


Btn

left


Widget

Tree


Send

events


To

widget

tree


Process

events


From

widget

tree


Gmain

loop

control

point


Drawing engine

(GDK/DFB/nCore)


Services

(Databases,…)


Example

of GTK, but
it

applies

to all

7

Open
-
Plug Confidential & Proprietary

7

Open
-
Plug Confidential & Proprietary

State

2

State

1

State

3

Notion of states

8

Open
-
Plug Confidential & Proprietary

8

Open
-
Plug Confidential & Proprietary

Actors definition

Interaction Designer


Defines Screens and UI Flow


High level application logic


Defines UI Data to be presented


Screen Layouts




Graphical Designer


Creates Graphical Assets «

what the
screens look like

»


Transitions and animations




Software Engineer


Connects data services to middleware.


Integrates application logic with middleware
and events




Different actors, different knowledge …. So different
technologies and different tools!




Tech Expertize

Artistic Talent

9

Open
-
Plug Confidential & Proprietary

2 years ago…


UI is designed by Graphic Designers on paper, and
put in place by Engineers.



UI is developed in C/C++/Java, using GTK, QT, or
proprietary technologies.



Result is often not exactly what designer wanted.

OK

OK

10

Open
-
Plug Confidential & Proprietary

2 years ago…



On the Customer side:


Software is not important


People only look at the hardware design


People don’t buy a phone because UI is pretty

11

Open
-
Plug Confidential & Proprietary

2 years ago…



On the Phone Makers side:


Operators focus on functionality instead of ergonomics


No code reuse between platforms, lot of time is lost
rewriting the UI for each phone


Screen size adaptation means rewriting the UI
(engineers)


12

Open
-
Plug Confidential & Proprietary

The turn
-
over

13

Open
-
Plug Confidential & Proprietary

Change of mind


New handset comes out



UI is pretty and easy to use



Many features are missing (MMS…)




But it is a success !

14

Open
-
Plug Confidential & Proprietary

Change of mind


People realize that software is important



Phone companies wants beautiful UIs, quickly



UI shouldn’t be developed by engineers, but by
graphic designers



Graphic Designers should be free to do what they
want, and not limited by technology

15

Open
-
Plug Confidential & Proprietary

What industry wants


Sexy mobile phones with beautiful UI



Create new variants of a mobile phone easily



Let graphic designers handle the UI

16

Open
-
Plug Confidential & Proprietary

NextGen UI

17

Open
-
Plug Confidential & Proprietary

Open
-
Plug Confidential & Proprietary

UI technologies are trendy on phones….


iPhone





Samsung Player





HTC Touch





Flash Phones (LG Prada) etc…


18

Open
-
Plug Confidential & Proprietary

UI technolgies are trendy on the web and desktop

RIA

Runtime

UI

Control

Tools

Adobe
Flex


Flash
Plugin

MXML

Action

Script
3 (= JS 2)

Adobe
Flex

Builder

MS
Silverlight

(WPF/E)

Silverlight

Brower

Plugin


XAML
(
subset
)

Javascript
,

C#, VB#, all
.NET
languages

Expression
line + VS

OpenLaszlo


Flash or
DHTML

LZX

Javascript

No

XUL

XULRunner

(
mozilla
)

XUL

Javascript

No

18

Open
-
Plug Confidential & Proprietary

RDA

Runtime

UI

Control

Tools

Adobe AIR

AIR

(flash
+
webkit
)

MXML

Action

Script
3 (=
JS

2)

Adobe
Flex

Builder

WPF

.NET FWK


XAML

.NET
languages

Expression
line + VS

Prism

XULRunner

XUL

JS

NO

19

Open
-
Plug Confidential & Proprietary

Next Gen UI


New UI technologies focus on :


Productivity


Easy access for designers


Reusability


Componentization (widgets)

20

Open
-
Plug Confidential & Proprietary

Adobe Flex


What is Flex ?


UI technology from Adobe


One of the most productive Framework of the industry (10
times more productive than Flash, as said by Adobe)


Framework and tools to build dynamic, interactive rich
Internet applications delivered on the web (Flash Player) or
to the desktop (
Adobe AIR
)


Very popular in web and desktop environments:


Google


Volkswagen


Oracle


HP


eBay


Leverages Adobe tools penetration with graphics/designers



21

Open
-
Plug Confidential & Proprietary

21

Open
-
Plug Confidential & Proprietary

Adobe Flex Builder

22

Open
-
Plug Confidential & Proprietary

22

Open
-
Plug Confidential & Proprietary

Adobe Flex on mobile phones ?


Adobe Flex can bring a lot to Mobile Phones


In term of productivity



In term of graphical standard



But


Flex requires a Flash 10 or AIR runtime


Not yet available for mobile phone (announced 2010)


Flash/AIR runtime faces performance/memory constraints on
mid
-

and low
-

end platforms


No standard industrial flow is defined between all actors in the
mobile phone product lifecycle


Flex suits only single application design and not complex
system design

23

Open
-
Plug Confidential & Proprietary

23

Open
-
Plug Confidential & Proprietary

Mass market phone specifications



Processor: ARM7 ~100MHz to ARM9 ~200MHz



RAM: 1MB to 4MB



Flash: 4MB to 16MB



Screen: 16bits, 176*220 to 240*320

24

Open
-
Plug Confidential & Proprietary

NextGen UI on platform

Rich

Interface

Runtime

UI

Control

Tools

TAT

TAT
Cascade

Cascade

XML

C

TAT Motion
Lab

Digital Airways

Kreb


KIDE XML

C

KIDE

Google
Android


Java

Android

XML

Java

No

JavaFX

JavaFX

Mobile +
VM

JavaFX

Script

JavaFX

Script

No

SVG

Ikivo

(and
other
)

SVG

JS

Ikivo

24

Open
-
Plug Confidential & Proprietary

What does Open
-
Plug offer ?

ELIPS Studio 3



The next generation of development environment

for mobile applications



You are a Flex developer ?

Now you are a mobile expert !



25

Open
-
Plug Confidential & Proprietary

26

Open
-
Plug Confidential & Proprietary

Open
-
Plug Solution


Open
-
Plug ELIPS 3.0


ELIPS 3.0 reuses Adobe
tools


ELIPS 3.0 allows to
transform

scripted Flex applications into
native code


ELIPS 3.0 allows
Designers
to be in charge of UI, not Engineers


ELIPS 3.0 makes a clear separation of Presentation from Logic and
Data


Model
-
View
-
Controller pattern


ELIPS 3.0 relies on OP’s commercical
-
grade graphics rendering
engine


Excellent performance on feature phone platforms, even low
-
end


Advanced features


Touchscreen support


Transition effects


ELIPS 3.0 can be introduced easily on an existing platform


Thanks to OP Companion Framework

Flex is your new mobile SDK


Code your application in Flex Builder with our mobile
Flex SDK


Test it in our phone simulator


Build it natively and deploy it on today’s handsets


27

Open
-
Plug Confidential & Proprietary

How do we do this ?


Flex Framework internal AS code has been optimised


Unique build technology “transcodes” AS3/MXML into native code


Application is executed natively on the “bare metal”


Compact and efficient execution libraries are packaged in the app

assets

AS3

MXML

YOUR APP

CODE

ELIPS
MOBILE
FLEX SDK

ELIPS
COMPILER

01010
10101
01010

28

Open
-
Plug Confidential & Proprietary

29

Open
-
Plug Confidential & Proprietary

Tutorial

30

Open
-
Plug Confidential & Proprietary

Tutorial


Step 1: Setup


Install Adobe Flex Builder


Install Open
-
Plug ELIPS Studio 3


Setup Flex Builder’s Workspace



Step 2: Flickr Application


Create AIR app


Simulate on PC



Step 3: Bring to device


Build for Windows Mobile or Android


Run on device

Join the ELIPS Studio 3 Developer Program


Go to
http://www.open
-
plug.com/developers




It’s free for students, just enroll !


Download ELIPS Studio 3 and be the first
to make Flex applications for mobiles


Learn more through videos and samples


Share your experiences with our experts
and other users on our Forum


Influence the commercial product spec



And enjoy the mobile world !

32

Open
-
Plug Confidential & Proprietary

Thank you!

33

Open
-
Plug Confidential & Proprietary

Internships

34

Open
-
Plug Confidential & Proprietary

Open
-
Plug Internships


Open
-
Plug recruits interns!


Design User Interfaces


Write

JavaScript

applications


Optimize drawing algorithms


Develop MXML to C++ compiler


Adapt graphic stack for new devices (Android, iPhone)


35

Open
-
Plug Confidential & Proprietary

35

Open
-
Plug Confidential & Proprietary

ELIPS 3.0 Actors and Flow

Adobe Flex
Builder

35

Adobe

CS3

Photoshop /
Illustrator


Visual Studio

-
Connect data services to
middleware.

-
Integrate application
logic with middleware
and events

-
Define Screens
and UI Flow

-
High level
application logic

-
Define UI Data
to be presented

-
Screen Layouts

-
Transition and
animations




-
Graphical assets
creation