User Interfaces in the Mobile Industry

User Interfaces in the Mobile Industry

October 2010

2Open-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



Introduction and background


User Interface

• What is a User Interface ?

Display things

Receive inputs

6Open-Plug Confidential & Proprietary 6Open-Plug Confidential & Proprietary

Window

List toolbar

Btn right

Btn mid

Btn left

Widget Tree

Send events To widget tree

Process events From widget tree

Gmainloop

controlpoint

Drawing engine(GDK/DFB/nCore)

Services(Databases,…)

Example of GTK, but it applies to all


State 2

State 1

State 3

Notion of states


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


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


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


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)


The turn-over


Change of mind

• New handset comes out

• UI is pretty and easy to use

• Many features are missing (MMS…)

But it is a success !


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


What industry wants

• Sexy mobile phones with beautiful UI

• Create new variants of a mobile phone easily

• Let graphic designers handle the UI


NextGen UI

17Open-Plug Confidential & ProprietaryOpen-Plug Confidential & Proprietary

UI technologies are trendy on phones….

• iPhone

• Samsung Player

• HTC Touch

• Flash Phones (LG Prada) etc…


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


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


Next Gen UI

• New UI technologies focus on :– Productivity– Easy access for designers– Reusability– Componentization (widgets)


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

http://www.adobe.com/go/air

http://labs.adobe.com/technologies/flex/


Adobe Flex Builder


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


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


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


What does Open-Plug offer ?

ELIPS Studio 3The next generation of development environment

for mobile applications

You are a Flex developer ?

Now you are a mobile expert !



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


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

MXMLYOUR APP

CODE

ELIPS MOBILE

FLEX SDK

ELIPS COMPILER

010101010101010



Tutorial


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 !

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


Thank you!


Internships


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)


ELIPS 3.0 Actors and Flow

Adobe Flex Builder

35

AdobeCS3

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

http://labs.adobe.com/technologies/flex/

User Interfaces in the Mobile Industry

Documents

Transcript of User Interfaces in the Mobile Industry