Multichannel User Interfaces

5,352 views
5,376 views

Published on

User Interfaces can be modeled in a technology agnostic way using Conceptual User Interface Patterns. This talk shows how to take advantage of this approach and shows how to generate code to different devices and technologies.

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
  • Could anyone help me creating my multi-channel UI app for android 2.3?
    my idea app is about live streaming with embed codes and media players for live tv ,streams from popular website.
    please help
    info@liveandroidtv.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,352
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
1
Likes
5
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

×