1 / 11

Mastering UI Design: Tips and Tricks for Effective User Interface Creation

This lecture provides insights and practical advice on mastering UI design, covering topics such as algorithms, data structures, graphic design, O-O design, low-level design, development cycle, components, layouts, and best practices. Learn about UI mastery, graphic design techniques, low-level design principles, and effective layout strategies that involve using components and layouts with familiar metaphors and visual "logic" Panels. Discover the importance of harmony in layout, handling resizing behaviors, and utilizing various UI components like radio buttons, checkboxes, JComboBoxes, and JTables for grouping related data. The lecture also emphasizes the significance of user interface customization, avoiding clutter, and enhancing user experience through proper data visualization techniques.

kemal
Télécharger la présentation

Mastering UI Design: Tips and Tricks for Effective User Interface Creation

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