ConfusingDataVisuallyAttractiveOracleAltaAMIS25
0 likes376 views
Frank Houweling presented a case study on how Oracle Alta was used to create a visually attractive data portal for an oil terminal customer. The old application lacked information and was not user friendly, resulting in low customer satisfaction. The new application followed Oracle Alta's 3 step design principle of thinking mobile first, having a "less is more" approach, and strong visual focus. Key screens included a dashboard, orders by transport, alerts, tank details, and usage of intuitive icons, colors, images and charts. An iterative prototyping process involved discussing designs with business users until satisfied.
Ad
More Related Content
What's hot (20)
Viewers also liked (13)
Ad
Similar to ConfusingDataVisuallyAttractiveOracleAltaAMIS25 (20)
Ad
More from Getting value from IoT, Integration and Data Analytics (20)
Recently uploaded (20)
ConfusingDataVisuallyAttractiveOracleAltaAMIS25
- 1. AMIS Oracle Conference Frank Houweling, June 2016 Case Study: How to Make Confusing Data Visually Attractive with Oracle Alta
- 2. Frank Houweling • Java / ADF / SOA specialist • AMIS (Netherlands) • Focus on performance diagnosis/management • Tech Lead of ADF Performance Monitor
- 3. 3 Agenda • Introduction • Old application • Why New Application • Demo • Implementation Alta Style
- 4. 4 About VTTI • Independent provider of energy storage worldwide • Connects tanks, pipes and vessels to make the world’s oil flow • Exploits oil terminals around the world in many countries
- 5. Context • POC: portal for oil terminal customers – Give relevant terminal information to customers – Replacement of old application
- 6. 6 Why New Application Current website doesn’t meets customer expectations. 1) Lack of information 2) Not user friendly As a consequence: 1) Customers are not up to date 2) Terminal was on the phone ‘trouble shooting’ all day Goal: To improve Customer satisfaction
- 8. ORACLE ALTA: 3 STEP DESIGN PRINCIPLE 8
- 9. 9 Our Approach • ‘Think’ mobile (mobile first) – Tablet first page template • ‘Less is more’ – Glance and Scan pages: only relevant information is present • Strong visual focus – Color indicators – Use intuitive images – Use ADF DVT charts – Inspired by Oracle Work Better app • Prototype – Discuss prototype design extensively with business and end-users – Update prototype - in iterations - until satisfied
- 10. 10 Intuitive Icons of Oil Transport Types
- 11. 11 Color of Transport Type Indicates a Status
- 12. Glance: DashBoard • Instant Glance of relevant customer information • 90% of the key information should be shown here
- 13. Jetty Occupation
- 14. Jetty Occupation (Zoomed In)
- 15. Orders by Transport • Oil Transport (Read from left to right) – Unloading/Loading Vessel/Barge to Tank – Also other transport types (Tank, Train, Truck, Pipeline) Four types of status for all transports
- 16. 16 Orders by Transport (2)
- 17. 17 Alerts Alert when program is not known
- 18. 18 Different ‘Stations’ for Different Types
- 19. 19 Click on tank or vessel to see order Details
- 20. Order Details – Time Sheet
- 21. Order Details – Time Line
- 22. Highlights – Current stock information
- 23. 23 Highlights – Current stock information (2)
- 24. Click on tank to see tank detail information
- 25. Tank information – in detail
- 26. Tank information – in detail
- 27. 27 Alta in ADF • Tablet First Page Template • Dashboard:Infolets • <af:masonryLayout>
- 28. 28 af:listView • Excellent for tablet (and desktop); scroll down vertically for more content • Meant for read-only Scan pages
- 29. 29 Icons are dynamic • Icon source name depends on two values • Could be also done in ViewObject Transient Attribute
- 30. 30 Clickable Charts • Clickable pieChart with <af:clientListener> that invokes an <af:link>
- 31. 31 Conclusions • Have a strong visual focus • ‘Think’ mobile (mobile first) • ‘Less is more’ mindset – Larger (and fewer) components • Tip: Make first a prototype – Glance and Scan pages: only relevant information is present – Color indicators – Use intuitive images – Use ADF DVT charts – Discuss prototype design with your business in several iterations until satisfied