Copyright © 2014, Oracle and/or its affiliates. All rights reserved. Confidential – Oracle Internal 1

Copyright © 2014, Oracle and/or its affiliates. All rights reserved.

Safe Harbor

The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle.!!!

UX Directions with HTML 5

Noel Portugal, Principal UX Developer

March 18, 2014 Nieuwegein, NL

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. Confidential – Oracle Internal

Extensibility Tailor the user experience to best fit your company’s identity and business processes.

Simplicity!Easily access the essential information and actions to support your work. !!

Oracle’s User Experience Strategy is About …

Mobility!Optimized UIs for wherever and however you work. !!

4

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. Confidential – Oracle Internal 5

Faster Prototyping with HTML5

§  Backend: Use Fusion WS to do our (Business Logic) bidding §  Frontend: “plain” HTML5 Web Application

–  Ajax calls to interact with Backend (REST services provided by CRM-Server)

–  CSS (FUSE Bootstrap) to make it look like an ADF build application §  Advantages

–  Leverage ALL web technologies, even if not available in ADF

§  Example 1: V 0 -> V 0.1 -> V0.2 §  Example 2: V1!

Using off-the-shelf components

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. Confidential – Oracle Internal

Faster Prototyping with HTML5

§  Using HTML5 Speech API §  Demo §  < 50 lines of code, demo-able in a day §  Leverage off-the-shelf components

–  Wolfram|Alpha for brains –  HTML5 Speech API!

Siri in your browser (iriS)

6

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. Confidential – Oracle Internal

Better UX Using HTML5

§  Get to know the user, his device and his surroundings –  Is your user on a Broadband connection? How strong is the signal? (demo) –  How much battery does the user have left? (demo) –  How bright is it where the user is? (demo) –  Where in the world is the user? (demo) –  Where is the device in relation to the user (orientation and proximity)? –  Is the page visible? (demo)

§  Adapt the user experience accordingly!

Beyond Responsive Design

7

Copyright © 2014, Oracle and/or its affiliates. All rights reserved.

HTML5 Demo!DEMO

8

Copyright © 2014, Oracle and/or its affiliates. All rights reserved.

•  Oracle.com/UsableApps

•  Blogs.oracle.com/VoX

•  Blogs.oracle.com/UsableApps

•  Twitter.com/@usableapps

Learn More About Oracle Apps UX Online

9

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. Confidential – Oracle Internal 10

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. Confidential – Oracle Internal 11