1 / 11

CSCI E-70 Lecture #12

CSCI E-70 Lecture #12. UI design: comments & perspective. Daniel Bromberg 20 Apr 2005. UI Mastery: General. Algorithms: Recursion; nested loops; searching Data structures: 2-D arrays; Hash tables; Graphs Graphic design: Font technicals; Color science and perception Graphical algebra

kemal
Download Presentation

CSCI E-70 Lecture #12

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSCI E-70 Lecture #12 UI design: comments & perspective Daniel Bromberg 20 Apr 2005

  2. UI Mastery: General • Algorithms: • Recursion; nested loops; searching • Data structures: • 2-D arrays; Hash tables; Graphs • Graphic design: • Font technicals; Color science and perception • Graphical algebra • trigonometry; linear transforms • O-O design: • message passing • data synchronization, centralization & distribution

  3. UI Mastery: Nuts & Bolts • Thorough dialect knowledge • AWT/Swing; HTML/CSS; .NET/VB/C# • Standards familiarity • Java: http://java.sun.com/products/jlf/ed2/book/index.html • Microsoft: http://www.microsoft.com/hwdev/windowsxp/downloads • Versatility with complex IDEs • JBuilder; Emacs; VisualAge • Glue packages • JDBC library; XML parsers; Java/JavaScript callbacks; remote objects: RMI/Corba

  4. Low-level Design • Development cycle sketch: from high-level to concrete (assume dev. platform fixed) • Goals selection / Initial Customer Research • Design Proposal / Prototype construction • Data modeling / User task flow analysis • Now it’s time to build using your component library • Avoiding JEverythingPanel and JWhicheverWorksWidget • Selecting components and layouts using familiar metaphors and visual “logic”

  5. Panels • Use to organize layout into manageable, unbreakable, rectangular areas of control • They’re cheap • Not unusual for a simple window to have 3-4 panels • Use titled, drawn borders • visually offset: avoid screen anarchy • clarify purpose: individual controls in context • Cousin: GridBagLayout • Appropriate for exact alignments within a JPanel • Don’t wrestle the GridBag into doing entire layout: avoid interference effects from disparate components

  6. Layouts • GridBagLayout: • Control alignment of complex form • wizard – user preference area – multiple text entries • Cousin: GridLayout • Only when every cell is of same nature: • grid-type game • spreadsheet • PowerPoint: slide sorter view • BorderLayout: • Allocate central focus; allow for tearable toolbars and status lines • Cousin: JSplitPane • When user determines ratio of focus between 2 foci • Often used in collaboration: one within the other

  7. Layout/Panel/Frame harmony • Be sparing with setPreferredSize • lowest-level display areas (scroll panes, drawing areas) • fancy custom-drawn CellRenderers • Let size propagate outward • JFrame will determine containment size through nested requirements • Use sensible hierarchy from frame to component • Takes time and maybe revision • Test resizing behavior! Refine GridBagConstraints • Notice complexity of IE decoration resizing – demoette

  8. Choice Choices • Radio buttons • Four or fewer mutually exclusive options • Cousin: CheckBoxes • Use when choices are independent (but also limit; 2-6) • Guess which app fails this test  • JComboBoxes • Five to 50 mutually exclusive options • Comprehensive rather than common or individualized • Cousin: JList • Use only when contents are fundamental to presentation and/or navigation; usually means changes frequently • PowerPoint gets this one right: slide picker

  9. Actions • Days of individual JButtons are gone • Think: toolbars (users do!) -- identify all on JBuilder • Manage wizards & modal dialogs (often built-n already) • Extend AbstractAction, set properties • Separate application logic from components • Cousin: ToolBar buttons • Common administrative tools; not specialized to app • help; show print dialog; italicize text; cut/copy/paste • icons are small; use standard visual vocabulary • Common menu commands; separate app-specialized section(s) • customer avoids menu-hunting; learns essentials quickly

  10. Grouping related data • JTables • Information quantity is intimidating to most users • Limit rows to relevant range and columns to focused scope • Larger tables • Avoid writing a database veneer: • Is better visualization possible? A flow-chart? A “map”? • Only when precise numeric/textual view of data is critical • E-mail programs: message #, date, sender • Probably for engineers, scientists, database admins • Allow for full customization: add/remove columns, select rows • Cousin: JTree • Don’t pack a tree node with lots of attributes; use a table to show multiple attributes of objects, one object per row. Good Hybrid example: Windows Explorer: side-by-side tree/table

  11. Branching out • Custom Swing Widget •  Real creativity and challenge •  Long lead time and costly • Use when standard UI facilities do not fit need • FamilyTree view • Cousin: re-use, tweaking, UI Manager properties • Improve resourcefulness with existing widgets • Many customization hooks • Look up all properties • cell renderer used in all lists/trees/tables • Use commercial modules if possible • You’re expensive: managers love efficiency • Charts: Buy a graphing suite; avoid NIH syndrome

More Related