111
Karsten Lentzsch • JGoodies First Aid for Swing

First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Karsten Lentzsch • JGoodies

First Aid for Swing

Page 2: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

It's easy to program Swing ...

Page 3: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

It's easy to program Swing badly.

Page 4: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 5: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Learn how to quickly improve the appearance of your applications

Goal

Page 6: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 7: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 8: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

AgendaIntroductionDon'tsDosGallery

Page 9: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

AgendaIntroductionDon'tsDosGallery

Page 10: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Problems● Poor, ugly or horrible UI● Swing is difficult to learn● Tutorials, books show poor design● Good design is difficult to implement● Hard to find good source examples

Page 11: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

TargetThe “average” desktop project:● No training● No time● No UI budget● Customers don't pay for good design

Page 12: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Focus● Good design you can do● Things you can improve quickly● Form-oriented design● Compete with native apps● More design fun

Page 13: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 14: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Principles● Small changes can break the design ● Small things add up● Attention to content, not the design● Change only what you understand!

Page 15: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

AgendaIntroductionDon'tsDosGallery

Page 16: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Colors● Do not add colors to the desktop● Do not add colors to the Swing L&F● Avoid heavily saturated colors

Page 17: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 18: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 19: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 20: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 21: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 22: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Fonts● Use native fonts● Use native sizes● Use native weight (normal vs. bold)● Use native raster type

(pixel, anti-aliased, subpixel-AA)

Page 23: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 24: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 25: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Icons● Use icons that work well with the

OS, w.r.t. design, size, color scheme● Consistent icon set● Remove questionable icons

Page 26: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 27: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 28: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 29: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

AgendaIntroductionDon'tsDosGallery

Page 30: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Clutter● Remove clutter and visual noise● Remove duplicate borders● Favor separators over (titled) borders● Write short texts

Page 31: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Design Essence● Does it add information?● Check every: pixel, line, border● Remove unnecessary:

components, panels, dialogs

Page 32: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 33: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 34: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Critical Components ● Avoid nested borders● JSplitPane● JScrollPane● BevelBorders● EtchedBorders● TitledBorders

Page 35: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 36: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 37: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

TitledBorder ● Often has 3 unnecessary lines● Difficult to align● Difficult to align its content

● Favor separators over TitledBorders● Don't nest TitledBorders

Page 38: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 39: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 40: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 41: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 42: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 43: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

White Space● White space is not wasted space● It's a powerful tool for design

● Isolate and separate groups● Wrap components with white space● Favor white space over separators

Page 44: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 45: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 46: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Alignment● Align component bounds● Consider using a grid and grid system

Difficult:● Align fonts along the baseline● Align component bounds and the

baseline

Page 47: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 48: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 49: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Poor Micro Design● Inconsistent component sizes● Inconsistent component insets● Font baselines not aligned, or

component bounds● Poor or wrong pseudo 3D effects

Page 50: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

.Net 2.0

Page 51: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Java (baselines aligned with Matisse)

Page 52: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 53: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 54: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Group and Relate● Learn to group● Make similar content equally wide● Make similar content equally high● But again: avoid the TitledBorder

Page 55: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 56: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 57: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Balance● Perceived axes and visual weight● Find the optical balance point● Consider to center a single view● Consider to use symmetry

Page 58: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 59: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 60: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Consistency● Button sizes, order, gaps● Dialogs, panels, button bars● L&F micro design● Icons● Fonts

Page 61: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 62: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 63: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 64: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 65: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 66: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 67: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Meta Design● Goal: get consistency quickly● Coarse grained: dialog layout● Fine grained: sizes, gaps

Page 68: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 69: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 70: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 71: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 72: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Aspect Ratio● Stable aspect ratios:

● 5:3● 16:9● 4:3● 1:1

● Use a few aspect ratios

Page 73: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Unstable Stable

Page 74: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Resolution Independence

● Scale with font and resolution (dpi)● Layout does not retain proportions

Page 75: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Flexibility● Use static design where possible● Add flexibility where necessary● Static, splitted, multi-splitted, docking,

windows

Page 76: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Contrast● Equalize contrasts● Add white space where necessary● Avoid large dark areas● Use large white panels judiciously

(otherwise the user gets tired)

● Learn the squint test

Page 77: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Spicing Up● Until now we've only reduced the UI● Now you can carefully add

● Color● Advanced typography● Images● Animation

Page 78: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 79: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 80: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 81: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Powerful JFC● Advanced graphics operations ● Translucency● Glass pane● Pluggable look and feel● Enables high-level abstractions

Page 82: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 83: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 84: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

AgendaIntroductionDon'tsDosGallery

Page 85: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 86: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 87: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 88: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 89: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 90: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 91: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 92: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 93: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 94: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 95: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 96: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 97: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 98: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 99: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 100: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 101: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 102: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 103: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 104: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good
Page 105: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Summary● Use appropriate fonts, colors, icons● Remove clutter● Reduce to its essence● Align, group, relate, balance● Be consistent

Page 106: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Libraries● JGoodies Looks - looks.dev.java.net● JGoodies Forms - forms.dev.java.net● Sun's Swinglabs/Swingx

Page 107: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Icons● Tango icons - www.tango-project.org● Eclipse icons - www.eclipse.org

Page 108: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Books● Scott Delap: Desktop Java Live● Mullet & Sano: Designing Visual Interfaces● Jeff Johnson: GUI Bloopers

Page 109: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

More Information● Mac Aqua Guide● Vista UX Guide● JGoodies Articles -

www.JGoodies.com/articles

Page 110: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Questions & Answers

Page 111: First Aid for Swing aid for...Problems Poor, ugly or horrible UI Swing is difficult to learn Tutorials, books show poor design Good design is difficult to implement Hard to find good

Karsten Lentzsch • JGoodies

First Aid for Swing