Deepak Azad IBM Bangalore lab, India [email_address] UI Patterns in Eclipse
Agenda <ul><li>Introduction </li></ul><ul><li>UI Patterns and Best Practices </li></ul><ul><li>UI Bloopers </li></ul><ul><...
What is a ‘Pattern’ ? <ul><li>“ Each pattern describes a problem which occurs over and over again in our environment, and ...
Pattern collections [2]
Agenda <ul><li>Introduction </li></ul><ul><li>UI Patterns and Best Practices </li></ul><ul><li>UI Bloopers </li></ul><ul><...
Progressive Disclosure <ul><li>Hovers pop-ups </li></ul><ul><ul><li>Present information that enriches the user's understan...
Progressive Disclosure <ul><li>Sticky Hovers </li></ul><ul><ul><li>Richer mouse interaction  </li></ul></ul><ul><ul><li>Sc...
Summary and Details <ul><li>Summary for browsing and Details for editing </li></ul><ul><li>Context is not lost! </li></ul>...
Progress Indicator <ul><li>A time-consuming operation interrupts the UI, or runs in the background, for longer than two se...
Properties View  <ul><li>Support both Tabs and a Table of Properties </li></ul><ul><li>Keep Tab order as: General, . . . ,...
Context Menus – Keep them lean! <ul><li>Should only contain commands which are appropriate for the selection. </li></ul><u...
Wizard: Start with a prompt <ul><li>Place focus in the first field requiring information  </li></ul><ul><li>Use header to ...
Wizard: If possible seed the fields  <ul><li>Derive the initial state of the wizard from the context where it is opened  <...
Wizard: ‘Browse’ buttons  <ul><li>Use ‘Edit field’ and ‘Browse...’ button combination whenever an existing object is refer...
View: Common commands in toolbar <ul><li>Any command on a toolbar must also appear in either the context menu or the view ...
View: Context menu and View menu <ul><li>Fill the context menu with selection oriented actions </li></ul><ul><li>Use the V...
View: Integrate with Window Menu Bar and Toolbar <ul><li>If supported, global commands must be executable from the window ...
View: Editor vs View <ul><li>Modifications made in an editor follow an open-save-close lifecycle model </li></ul><ul><ul><...
Agenda <ul><li>Introduction </li></ul><ul><li>UI Patterns and Best Practices </li></ul><ul><li>UI Bloopers </li></ul><ul><...
Some UI Bloopers  <ul><li>Low quality graphics or not consistent with the Eclipse style </li></ul><ul><li>Using too many c...
… some more UI Bloopers <ul><li>Cryptic error messages  </li></ul><ul><ul><li>Not enough information </li></ul></ul><ul><u...
… and some more UI Bloopers <ul><li>Property pages that don't adhere to what platform uses where possible (normal and tabb...
References [1] Design Patterns by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides (The Gang of four) [2] A Pa...
What’s new in JDT? Come to the JDT talk at 4:30
Legal Notice <ul><li>Copyright © IBM Corp., 2007-2010. All rights reserved. This presentation and the source code in it ar...
Credits <ul><li>http://nostalgicglass.org/projects/p16/hTMX-01-2-ext-night.jpg </li></ul><ul><li>http://commons.wikimedia....
Questions
Upcoming SlideShare
Loading in …5
×

Eclipse Day India 2010 - UI Patterns in Eclipse

2,429 views

Published on

Slides for talk delivered at Eclipse Day India 2010.

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

  • Be the first to like this

No Downloads
Views
Total views
2,429
On SlideShare
0
From Embeds
0
Number of Embeds
173
Actions
Shares
0
Downloads
44
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Eclipse Day India 2010 - UI Patterns in Eclipse

  1. 1. Deepak Azad IBM Bangalore lab, India [email_address] UI Patterns in Eclipse
  2. 2. Agenda <ul><li>Introduction </li></ul><ul><li>UI Patterns and Best Practices </li></ul><ul><li>UI Bloopers </li></ul><ul><li>Q & A </li></ul>
  3. 3. What is a ‘Pattern’ ? <ul><li>“ Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice” </li></ul><ul><li>Four elements of a pattern [1] </li></ul><ul><ul><li>Name </li></ul></ul><ul><ul><li>Problem </li></ul></ul><ul><ul><li>Solution </li></ul></ul><ul><ul><li>Consequences </li></ul></ul>
  4. 4. Pattern collections [2]
  5. 5. Agenda <ul><li>Introduction </li></ul><ul><li>UI Patterns and Best Practices </li></ul><ul><li>UI Bloopers </li></ul><ul><li>Q & A </li></ul>
  6. 6. Progressive Disclosure <ul><li>Hovers pop-ups </li></ul><ul><ul><li>Present information that enriches the user's understanding </li></ul></ul><ul><ul><li>Really lightweight </li></ul></ul><ul><ul><li>Require very little user effort </li></ul></ul><ul><ul><li>Think of granularity of the trigger elements ! </li></ul></ul>
  7. 7. Progressive Disclosure <ul><li>Sticky Hovers </li></ul><ul><ul><li>Richer mouse interaction </li></ul></ul><ul><ul><li>Scroll, Resize, Move the widget </li></ul></ul><ul><ul><li>Links to a dedicated editor or view ! </li></ul></ul>
  8. 8. Summary and Details <ul><li>Summary for browsing and Details for editing </li></ul><ul><li>Context is not lost! </li></ul><ul><li>Examples: Windows Explorer, Outline view, Breakpoints view </li></ul>
  9. 9. Progress Indicator <ul><li>A time-consuming operation interrupts the UI, or runs in the background, for longer than two seconds or so. </li></ul><ul><li>Use Jobs API </li></ul><ul><li>Allow the user to cancel ! </li></ul>
  10. 10. Properties View <ul><li>Support both Tabs and a Table of Properties </li></ul><ul><li>Keep Tab order as: General, . . . , All </li></ul><ul><li>Avoid sub-tabs – Not easily discoverable! </li></ul>
  11. 11. Context Menus – Keep them lean! <ul><li>Should only contain commands which are appropriate for the selection. </li></ul><ul><li>Gray out commands based on selected object state </li></ul><ul><li>If needed use submenus </li></ul><ul><li>Adopt a common order for commands </li></ul>Add Cut Copy Paste Delete Other Plugin Additions Show In Undo / Redo, Save
  12. 12. Wizard: Start with a prompt <ul><li>Place focus in the first field requiring information </li></ul><ul><li>Use header to prompt the user for the first piece of required information. </li></ul><ul><li>Note the feedback mechanism! </li></ul>
  13. 13. Wizard: If possible seed the fields <ul><li>Derive the initial state of the wizard from the context where it is opened </li></ul>
  14. 14. Wizard: ‘Browse’ buttons <ul><li>Use ‘Edit field’ and ‘Browse...’ button combination whenever an existing object is referenced within a wizard </li></ul><ul><li>For instance, in the New Java Class wizard, a &quot;Browse...&quot; button is placed beside the &quot;Super Class&quot; edit field. </li></ul>
  15. 15. View: Common commands in toolbar <ul><li>Any command on a toolbar must also appear in either the context menu or the view menu. </li></ul>
  16. 16. View: Context menu and View menu <ul><li>Fill the context menu with selection oriented actions </li></ul><ul><li>Use the View menu for presentation commands </li></ul>
  17. 17. View: Integrate with Window Menu Bar and Toolbar <ul><li>If supported, global commands must be executable from the window menu bar and toolbar. </li></ul><ul><li>Examples </li></ul><ul><ul><li>File menu: Revert, Move, Rename, Refresh, Print, Properties </li></ul></ul><ul><ul><li>Edit menu: Undo, Redo, Cut, Copy, Paste , Delete, Select All, </li></ul></ul><ul><ul><li>Navigate menu: Go Into, Back, Forward, Up One Level, Next, Previous, Back, Forward </li></ul></ul>
  18. 18. View: Editor vs View <ul><li>Modifications made in an editor follow an open-save-close lifecycle model </li></ul><ul><ul><li>Editor opened -> unmodified contents (clean). </li></ul></ul><ul><ul><li>Contents modified -> an asterisk appears in the editor tab and modifications buffered within the edit model </li></ul></ul><ul><ul><li>Explicit Save by User -> modifications committed to model storage. </li></ul></ul><ul><li>Modifications made within a view should be saved immediately </li></ul><ul><ul><li>Example: changes made in the Outline view is committed immediately </li></ul></ul>
  19. 19. Agenda <ul><li>Introduction </li></ul><ul><li>UI Patterns and Best Practices </li></ul><ul><li>UI Bloopers </li></ul><ul><li>Q & A </li></ul>
  20. 20. Some UI Bloopers <ul><li>Low quality graphics or not consistent with the Eclipse style </li></ul><ul><li>Using too many custom colors and fonts </li></ul><ul><li>Poorly organized or sized dialogs and wizards </li></ul><ul><li>Messages with concatenated strings </li></ul><ul><ul><li>Potential for losing their meaning on translation </li></ul></ul>
  21. 21. … some more UI Bloopers <ul><li>Cryptic error messages </li></ul><ul><ul><li>Not enough information </li></ul></ul><ul><ul><li>Cryptic SQL error messages </li></ul></ul>
  22. 22. … and some more UI Bloopers <ul><li>Property pages that don't adhere to what platform uses where possible (normal and tabbed) </li></ul><ul><li>Assuming more importance than other contributions </li></ul><ul><ul><li>over-use of global real-estate </li></ul></ul><ul><ul><li>insert views into other perspectives, </li></ul></ul><ul><ul><li>clutters popup menus with excessive object contributions, </li></ul></ul><ul><ul><li>adds startup hooks to run user jobs on startup </li></ul></ul><ul><li>Processing in the UI Thread </li></ul><ul><ul><li>Process using a job and update with a UI Job </li></ul></ul><ul><ul><li>Use IProgressService#busyCursorWhile </li></ul></ul>
  23. 23. References [1] Design Patterns by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides (The Gang of four) [2] A Pattern Language: Towns, Buildings, Construction by Christopher Alexander, Sara Ishikawa, Murray Silverstein [3] *Eclipse User Interface Guidelines - http://wiki.eclipse.org/User_Interface_Guidelines [4] *Eclipse UI checklist - http://wiki.eclipse.org/UI_Checklist [5] Eclipse UI Best Practices v3.x - http://wiki.eclipse.org/UI_Best_Practices_v3.x [6] The User Interface Checklist for the Jazz Eclipse Client - http://jazz.net/library/article/28 [7] Designing Interfaces: Patterns for Effective Interaction Design by Jenifer Tidwell
  24. 24. What’s new in JDT? Come to the JDT talk at 4:30
  25. 25. Legal Notice <ul><li>Copyright © IBM Corp., 2007-2010. All rights reserved. This presentation and the source code in it are made available under the EPL, v1.0. </li></ul><ul><li>Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. </li></ul><ul><li>Eclipse and the Eclipse logo are trademarks of Eclipse Foundation, Inc. </li></ul><ul><li>IBM and the IBM logo are trademarks or registered trademarks of IBM Corporation, in the United States, other countries or both. </li></ul><ul><li>Other company, product, or service names may be trademarks or service marks of others. </li></ul><ul><li>THE INFORMATION DISCUSSED IN THIS PRESENTATION IS PROVIDED FOR INFORMATIONAL PURPOSES ONLY. WHILE EFFORTS WERE MADE TO VERIFY THE COMPLETENESS AND ACCURACY OF THE INFORMATION, IT IS PROVIDED &quot;AS IS&quot; WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, AND IBM SHALL NOT BE RESPONSIBLE FOR ANY DAMAGES ARISING OUT OF THE USE OF, OR OTHERWISE RELATED TO, SUCH INFORMATION. ANY INFORMATION CONCERNING IBM'S PRODUCT PLANS OR STRATEGY IS SUBJECT TO CHANGE BY IBM WITHOUT NOTICE </li></ul>
  26. 26. Credits <ul><li>http://nostalgicglass.org/projects/p16/hTMX-01-2-ext-night.jpg </li></ul><ul><li>http://commons.wikimedia.org/wiki/File:Adapter_using_inheritance_UML_class_diagram.png </li></ul>
  27. 27. Questions

×