Multichannel User Interfaces

592 views
509 views

Published on

UI Development

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
592
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Multichannel User Interfaces

  1. 1. Multichannel User Interfaces Pedro J. Molina, PhD. pjmolina@icinetic.com @pmolinam Rubén Jiménez rjimenez@icinetic.com @rubenjmarrufo
  2. 2. Contents Introduction UIs and multichannel UI Technologies UI Model & Code Generation Demos Conclusions Q&A © Icinetic 2012 2
  3. 3. Introduction We do MDSD Tools for developers Focused on .NET technologies & Architecture services HQ in Seville, Spain, EU © Icinetic 2012 3
  4. 4. Introduction Pervasive User Interfaces Contextual Services across devices Costs of making and distributing Software © Icinetic 2012 4
  5. 5. UIs and multichannel © Icinetic 2012 5
  6. 6. UIs and multichannel One day in the future:  There could be a unique SW language  And a unique HW platform  Able to drive all your gadgets and devices  Contextual  Able to follow you across changing your context, location or device © Icinetic 2012 6
  7. 7. UIs and multichannel However, in the meanwhile, we have:  Many devices  Many HW choices  Many SW platforms to build for Difficult choice: Where to invest? © Icinetic 2012 7
  8. 8. UIs and multichannel Businesses need to provide  Access to product and services to the great market- share as possible  Different platforms: fragment the market when launching a new product or service  Technology is just a commodity  Technology diversity increases the costs of market acquisition © Icinetic 2012 8
  9. 9. UI Technologies Choose your flavour: ? Smartphone Smartphone Tablet Tablet v 3.1.3 v 4.2.1 v 5.1 © Icinetic 2012 9
  10. 10. UI Development Then  Hire a good development team  Don’t forget designers and UX  Keep them focused and happy! © Icinetic 2012 10
  11. 11. Required UI programming skills Main platforms:Platform Languages IDEThe Web HTML5 + CSS3 + JavaScript None/Many + Server side lang.Windows XAML + C# Visual Studio, Expression BlendApple Objective-C + Cocoa XCodeJava / Android Java + UI toolkit Eclipse Difficult to master all of them! © Icinetic 2012 11
  12. 12. UI Technologies Variable and moving target  Hardware: new devices every 6 months  Software: new OS mobile versions every year  APIs: new APIs, all the time!  Not an easy train to follow! © Icinetic 2012 12
  13. 13. UI Style-guides iOS Android WP7 / W8 Metro © Icinetic 2012 13
  14. 14. UI Style-guides Each platform provides a differentiated one  Involving not only aesthetics aspects  But also UX aspects on device accordingly to the style of interaction  Application on a device should behave coherent with the platform  Not all applications fits well on each device © Icinetic 2012 14
  15. 15. Is there space for modelling and code generated UIs? Probably  not for “radically original” games  and not for new interaction styles But convenient and efficient for day to day  Information Systems  Information production / consumption needs  Business Software © Icinetic 2012 15
  16. 16. Once again: Art or Engineering? © Icinetic 2012 16
  17. 17. Once again: Art or Engineering? Both! © Icinetic 2012 17
  18. 18. © Icinetic 182012
  19. 19. © Icinetic 192012
  20. 20. UIs and plumbing Behind a good User Interface  There is a lot of plumbing Definition: (Developer) Plumbing  Repetitive infrastructure code with small variations  Boring to write, source of bugs  Low added value  But: needed to run the full application © Icinetic 2012 20
  21. 21. Plumbing samples: UI Architecture UI frameworks  MVC  MVVM  MVP  Supervising Controller  Passive View © Icinetic 2012 21
  22. 22. Plumbing sample: Comms Service invocation  RPC / Binary  Web Services / SOAP  REST / JSON  HTTP / HTTPS / SPEEDY / WebSockets © Icinetic 2012 22
  23. 23. UI Modelling Hypothesis So: 1. Can we raise the level of abstraction and capture the essence of the UI in a model? 2. Can we alleviate the developers plumbing pain? 3. Can we expose this UI on multiple channels and technologies? © Icinetic 2012 23
  24. 24. What’s changes in a UI? Technology Style guides Widgets and concrete interaction Plumbing: platform/tech specific © Icinetic 2012 24
  25. 25. What’s remains immutable in a UI? Patterns & UX principles  A Master-Detail will be always a Master-Detail  A Filter  A collection of objects  Navigation  Command  Selection  Task … © Icinetic 2012 25
  26. 26. Conceptual UI Patterns  Login  Instance  Population  Master/Detail  Service  Wizard  Filter  … pjmolina.com/cuip © Icinetic 2012 26
  27. 27. CUIP: Population Set of objects  Rendering  Filter  Grid  Order criteria  Table  Display set  List  Actions  Navigation © Icinetic 2012 27
  28. 28. CUIP: Population Set of objects  Rendering  Filter  Grid  Order criteria  Table  Display set  List  Actions  Navigation © Icinetic 2012 28
  29. 29. CUIP: Population Set of objects  Rendering  Filter  Grid  Order criteria  Table  Display set  List  Actions  Navigation © Icinetic 2012 29
  30. 30. CUIP: Population Set of objects  Rendering  Filter  Grid  Order criteria  Table  Display set  List  Actions  Navigation © Icinetic 2012 30
  31. 31. A sample: Personal Banking Oriented to: banking end users  Easy to use Targeting frequent operations  Check accounts balance  Order a transfer  Review account entries Multi-device: pc, mobile, tablet, etc. © Icinetic 2012 31
  32. 32. Structure: Class Model © Icinetic 2012 32
  33. 33. UI Navigational Model © Icinetic 2012 33
  34. 34. Code Generation © Icinetic 2012 34
  35. 35. Demo Time Modelling domain Generated Services Modelling UI Generated UI © Icinetic 2012 35
  36. 36. So far, we have seen: Default UI/Inferred (when nothing was specified) Graphical and textual notations combined for UI Services consumption and composition  From a model exposed by a system in runtime Device independent UI modelling WYSIWYG modelling approach © Icinetic 2012 36
  37. 37. Applications UI prototyping  “Wizard of Oz” Technique Rapid multichannel Service delivery UIs via Service composition (Mashups) Ubiquitous & contextual interfaces © Icinetic 2012 37
  38. 38. Multi-channel Datatabase Data Access Layer Business Logic Layer Services Layer App 1 User Interface User Interface Layer Layer Views Views Controllers Controllers View Models View Models UI-1 UI-2 © Icinetic 2012 38
  39. 39. MD Composed UIs (Mashups) Datatabase Datatabase Data Access Data Access Layer Layer Business Logic Business Logic Layer Layer Services Layer Services LayerApp 1 App 2 User Interface Layer Views Controllers View Models Composed App UI © Icinetic 2012 39
  40. 40. Conclusions Pervasive devices are already here to stay While we found “the platform” to rule them’all  we need to deal with diversity of HW, SW and APIs © Icinetic 2012 40
  41. 41. Conclusions So far, today we have seen: 1. How to raise the level of abstraction and capture the essence of a User Interface in a model 2. How to alleviate the developer plumbing pain 3. How to target multiple channels and technologies © Icinetic 2012 41
  42. 42. Conclusions MDSD applied to UI  can makes the difference in terms of time to market, quality & productivity  provide new forms of UIs not possible in the traditional way i.e. contextual ones © Icinetic 2012 42
  43. 43. Conclusions Looking for flights to Seychelles on the bathroom Finishing the purchase, later, in the car © Icinetic 2012 43
  44. 44. Questions & (might be) Answers www.radarc.net pjmolina.com/essential pjmolina.com/cuip © Icinetic 2012 44

×