Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ICSEA 2007 - Environment for UI Evolution


Published on

We present an environment to conduct evolution of UIs.

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

ICSEA 2007 - Environment for UI Evolution

  1. 1. Software Environment for Research on Evolving User Interfaces Juan Quiroz , Anil Shankar, Sergiu M. Dascalu, Sushil J. Louis Department of Computer Science and Engineering University of Nevada, Reno USA
  2. 2. Outline <ul><li>Motivation </li></ul><ul><li>Background </li></ul><ul><li>Evolution environment </li></ul><ul><li>Improving research productivity </li></ul><ul><li>Transitioning from research to end-user tool </li></ul>
  3. 3. Motivation <ul><li>User interface design is a complex, expensive, time consuming process </li></ul><ul><li>Iterative process </li></ul><ul><li>Users and contexts of use are numerous </li></ul><ul><li>Streamline and improve UI design </li></ul>
  4. 4. IGA for UI Evolution <ul><li>IGA to explore the space of UIs </li></ul><ul><ul><li>Creativity and insight </li></ul></ul><ul><li>Evolution is guided by both the user preferences and coded guideline metrics </li></ul>
  5. 5. Genetic Algorithms <ul><li>Population based search technique </li></ul><ul><ul><li>Natural selection </li></ul></ul><ul><ul><li>Survival of the fittest </li></ul></ul>
  6. 6. Interactive Genetic Algorithms (IGAs)
  7. 7. Implementation Details <ul><li>Python </li></ul><ul><li>GUI – wxPython </li></ul><ul><li>Target language – XUL </li></ul>
  8. 8. XUL User Interfaces <ul><li>XML User Interface Language </li></ul><ul><li>Mark-up language for UIs </li></ul><ul><ul><li>Buttons, textboxes, sliders </li></ul></ul><ul><ul><li>menubars, toolbars </li></ul></ul><ul><li><button label=“Hello World” /> </li></ul><ul><li>Poor XUL rendering support in python </li></ul>
  9. 10. <ul><li>Investing Time on Development </li></ul><ul><li>vs. </li></ul><ul><li>Research Experimentation </li></ul>
  10. 11. Research Environment Improvements <ul><li>wxPython integration </li></ul><ul><li>Experiment runs manager </li></ul><ul><li>Data manager </li></ul>
  11. 12. wxPython Integration
  12. 13. Experiment Runs Manager
  13. 14. Data Manager
  14. 15. Future Productivity Improvements <ul><li>GUI definition in wxGlade or NetBeans </li></ul><ul><li>Integration of user interface definition in the environment </li></ul><ul><li>Higher level user interface specification </li></ul><ul><li>Code generation </li></ul><ul><li>User interface editing </li></ul>
  15. 16. Transitioning from Research to End-User Tool <ul><li>Users </li></ul><ul><ul><li>Researchers </li></ul></ul><ul><ul><li>UI designers </li></ul></ul><ul><li>Environment Modes </li></ul><ul><ul><li>End-user mode </li></ul></ul><ul><ul><li>Researcher mode </li></ul></ul>
  16. 17. User Modes <ul><li>End-user mode </li></ul><ul><ul><li>Minimalist interface </li></ul></ul><ul><ul><li>Reduce technical jargon </li></ul></ul><ul><ul><ul><li>“Variety” </li></ul></ul></ul><ul><ul><ul><li>“Creativity” </li></ul></ul></ul><ul><ul><li>Subset of functionality of researcher mode </li></ul></ul><ul><li>Researcher mode </li></ul><ul><ul><li>Advanced configuration </li></ul></ul>
  17. 18. √ Extended help 14 √ Run batch mode 13 √ √ Edit evolved UI 12 √ √ Redo evolution step 11 √ √ Undo evolution step 10 √ √ Select best and worst UI 9 √ √ Save IGA state 8 √ √ Open IGA state 7 √ √ Stop IGA 6 √ √ Start IGA 5 √ Customize low level IGA details 4 √ √ Customize high level IGA details 3 √ Load user interface definition 2 √ √ Define user interface 1 Researcher Mode End-User Mode Use Case
  18. 19. Summary <ul><li>UI evolution </li></ul><ul><li>Investing time on environment development </li></ul><ul><ul><li>Improves productivity </li></ul></ul><ul><ul><li>Less error prone </li></ul></ul><ul><ul><li>Reduces tedious tasks </li></ul></ul><ul><li>Transition from end-user to research tool </li></ul>
  19. 20. Questions? <ul><li> </li></ul><ul><li>[email_address] </li></ul>