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

4. Pattern collections [2] 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 Not easily discoverable!

11. Context Menus 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

AddCut Copy Paste Delete Other Plugin AdditionsShow InUndo / 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 JeniferTidwell 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

26. 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

27. Questions