ݺߣ

ݺߣShare a Scribd company logo

Eclipse Day India 2010 - UI Patterns in Eclipse

?Download as PPT, PDF?
?
D
deepakazad

The document discusses UI patterns and best practices for Eclipse. It covers several patterns such as progressive disclosure, hovers, pop-ups, and indicators. It also discusses properties views, context menus, wizards, views, and common UI mistakes to avoid like cryptic errors and poorly organized dialogs.

1 of 27
Downloaded 44 times
Deepak Azad IBM Bangalore lab, India [email_address] UI Patterns in Eclipse
Agenda Introduction UI Patterns and Best Practices UI Bloopers Q & A
What is a Pattern ? 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 Four elements of a pattern [1] Name Problem Solution Consequences
Pattern collections [2]
Agenda Introduction UI Patterns and Best Practices UI Bloopers Q & A
Progressive Disclosure Hovers pop-ups Present information that enriches the user's understanding Really lightweight Require very little user effort Think of granularity of the trigger elements !
Progressive Disclosure Sticky Hovers Richer mouse interaction Scroll, Resize, Move the widget Links to a dedicated editor or view !
Summary and Details Summary for browsing and Details for editing Context is not lost! Examples: Windows Explorer, Outline view, Breakpoints view
Progress Indicator A time-consuming operation interrupts the UI, or runs in the background, for longer than two seconds or so. Use Jobs API Allow the user to cancel !
Properties View Support both Tabs and a Table of Properties Keep Tab order as: General, . . . , All Avoid sub-tabs C Not easily discoverable!
Context Menus C Keep them lean! Should only contain commands which are appropriate for the selection. Gray out commands based on selected object state If needed use submenus Adopt a common order for commands Add Cut Copy Paste Delete Other Plugin Additions Show In Undo / Redo, Save
Wizard: Start with a prompt Place focus in the first field requiring information Use header to prompt the user for the first piece of required information. Note the feedback mechanism!
Wizard: If possible seed the fields Derive the initial state of the wizard from the context where it is opened
Wizard: Browse buttons Use Edit field and Browse... button combination whenever an existing object is referenced within a wizard For instance, in the New Java Class wizard, a "Browse..." button is placed beside the "Super Class" edit field.
View: Common commands in toolbar Any command on a toolbar must also appear in either the context menu or the view menu.
View: Context menu and View menu Fill the context menu with selection oriented actions Use the View menu for presentation commands
View: Integrate with Window Menu Bar and Toolbar If supported, global commands must be executable from the window menu bar and toolbar. Examples File menu: Revert, Move, Rename, Refresh, Print, Properties Edit menu: Undo, Redo, Cut, Copy, Paste , Delete, Select All, Navigate menu: Go Into, Back, Forward, Up One Level, Next, Previous, Back, Forward
View: Editor vs View Modifications made in an editor follow an open-save-close lifecycle model Editor opened -> unmodified contents (clean). Contents modified -> an asterisk appears in the editor tab and modifications buffered within the edit model Explicit Save by User -> modifications committed to model storage. Modifications made within a view should be saved immediately Example: changes made in the Outline view is committed immediately
Agenda Introduction UI Patterns and Best Practices UI Bloopers Q & A
Some UI Bloopers Low quality graphics or not consistent with the Eclipse style Using too many custom colors and fonts Poorly organized or sized dialogs and wizards Messages with concatenated strings Potential for losing their meaning on translation
some more UI Bloopers Cryptic error messages Not enough information Cryptic SQL error messages
and some more UI Bloopers Property pages that don't adhere to what platform uses where possible (normal and tabbed) Assuming more importance than other contributions over-use of global real-estate insert views into other perspectives, clutters popup menus with excessive object contributions, adds startup hooks to run user jobs on startup Processing in the UI Thread Process using a job and update with a UI Job Use IProgressService#busyCursorWhile
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
Whats new in JDT? Come to the JDT talk at 4:30
Legal Notice Copyright ? IBM Corp., 2007-2010. All rights reserved. This presentation and the source code in it are made available under the EPL, v1.0. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Eclipse and the Eclipse logo are trademarks of Eclipse Foundation, Inc. IBM and the IBM logo are trademarks or registered trademarks of IBM Corporation, in the United States, other countries or both. Other company, product, or service names may be trademarks or service marks of others. 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 "AS IS" 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
Credits http://nostalgicglass.org/projects/p16/hTMX-01-2-ext-night.jpg http://commons.wikimedia.org/wiki/File:Adapter_using_inheritance_UML_class_diagram.png
Questions

More Related Content

Eclipse Day India 2010 - UI Patterns in Eclipse

  • 1. Deepak Azad IBM Bangalore lab, India [email_address] UI Patterns in Eclipse
  • 2. Agenda Introduction UI Patterns and Best Practices UI Bloopers Q & A
  • 3. What is a Pattern ? 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 Four elements of a pattern [1] Name Problem Solution Consequences
  • 5. Agenda Introduction UI Patterns and Best Practices UI Bloopers Q & A
  • 6. Progressive Disclosure Hovers pop-ups Present information that enriches the user's understanding Really lightweight Require very little user effort Think of granularity of the trigger elements !
  • 7. Progressive Disclosure Sticky Hovers Richer mouse interaction Scroll, Resize, Move the widget Links to a dedicated editor or view !
  • 8. Summary and Details Summary for browsing and Details for editing Context is not lost! Examples: Windows Explorer, Outline view, Breakpoints view
  • 9. Progress Indicator A time-consuming operation interrupts the UI, or runs in the background, for longer than two seconds or so. Use Jobs API Allow the user to cancel !
  • 10. Properties View Support both Tabs and a Table of Properties Keep Tab order as: General, . . . , All Avoid sub-tabs C Not easily discoverable!
  • 11. Context Menus C Keep them lean! Should only contain commands which are appropriate for the selection. Gray out commands based on selected object state If needed use submenus Adopt a common order for commands Add Cut Copy Paste Delete Other Plugin Additions Show In Undo / Redo, Save
  • 12. Wizard: Start with a prompt Place focus in the first field requiring information Use header to prompt the user for the first piece of required information. Note the feedback mechanism!
  • 13. Wizard: If possible seed the fields Derive the initial state of the wizard from the context where it is opened
  • 14. Wizard: Browse buttons Use Edit field and Browse... button combination whenever an existing object is referenced within a wizard For instance, in the New Java Class wizard, a "Browse..." button is placed beside the "Super Class" edit field.
  • 15. View: Common commands in toolbar Any command on a toolbar must also appear in either the context menu or the view menu.
  • 16. View: Context menu and View menu Fill the context menu with selection oriented actions Use the View menu for presentation commands
  • 17. View: Integrate with Window Menu Bar and Toolbar If supported, global commands must be executable from the window menu bar and toolbar. Examples File menu: Revert, Move, Rename, Refresh, Print, Properties Edit menu: Undo, Redo, Cut, Copy, Paste , Delete, Select All, Navigate menu: Go Into, Back, Forward, Up One Level, Next, Previous, Back, Forward
  • 18. View: Editor vs View Modifications made in an editor follow an open-save-close lifecycle model Editor opened -> unmodified contents (clean). Contents modified -> an asterisk appears in the editor tab and modifications buffered within the edit model Explicit Save by User -> modifications committed to model storage. Modifications made within a view should be saved immediately Example: changes made in the Outline view is committed immediately
  • 19. Agenda Introduction UI Patterns and Best Practices UI Bloopers Q & A
  • 20. Some UI Bloopers Low quality graphics or not consistent with the Eclipse style Using too many custom colors and fonts Poorly organized or sized dialogs and wizards Messages with concatenated strings Potential for losing their meaning on translation
  • 21. some more UI Bloopers Cryptic error messages Not enough information Cryptic SQL error messages
  • 22. and some more UI Bloopers Property pages that don't adhere to what platform uses where possible (normal and tabbed) Assuming more importance than other contributions over-use of global real-estate insert views into other perspectives, clutters popup menus with excessive object contributions, adds startup hooks to run user jobs on startup Processing in the UI Thread Process using a job and update with a UI Job Use IProgressService#busyCursorWhile
  • 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. Whats new in JDT? Come to the JDT talk at 4:30
  • 25. Legal Notice Copyright ? IBM Corp., 2007-2010. All rights reserved. This presentation and the source code in it are made available under the EPL, v1.0. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Eclipse and the Eclipse logo are trademarks of Eclipse Foundation, Inc. IBM and the IBM logo are trademarks or registered trademarks of IBM Corporation, in the United States, other countries or both. Other company, product, or service names may be trademarks or service marks of others. 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 "AS IS" 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