1 / 32

Java Graphical User Interface Building: HCI Approach

Learn human-computer interaction and Java GUI design, implementation, & client technologies at University of Belgrade's Faculty of Mathematics. Explore functional models, UML, UX storyboards, JavaFX, prototyping, design patterns, data transfer, observer pattern, and client technologies. Discover GUI implementation details, separating presentation elements, data transfer objects, observer pattern, and various client technologies such as form-based, web-based, and mobile. Gain insights into Java GUI building trends and HCI practicalities.

burton-brennan
Download Presentation

Java Graphical User Interface Building: HCI Approach

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. University of Belgrade, Faculty of Mathematics Human-Computer Interaction and Java Graphical User Interface Building AleksandarKartelj kartelj@math.rs

  2. Outline • Introduction • Functional models for GUI, UML… • GUI Design (Java) • Implementation details • Clients and technologies • Concluding remarks

  3. Resources • Kraemer, Elieen, A Java-based Course in Human-Computer Interaction, PDPTA, 2000. • Lazar, Johathan, Jinjuan Heidi Feng, and Harry Hochheiser, Research Methods in Human-Computer Interaction, Wiley.com, 2010. • Marinilli, Mauro et al., Professional Java User Interfaces, New York: John Wiley & Sons, Inc., 2006. • Weaver, James et al., Pro JavaFX 2: A Definitive Guide to Rich Clients with Java Technology, Apress, 2012. • Programming Paradigms Course, Faculty of Mathematics, University of Belgrade.

  4. Introduction • 1980s shifts in visual technology: • raster graphics, • specialized graphic memories, processors • I/O devices • But, GUI design issues remained: • User happiness • Effectiveness • Complexity • …

  5. Design perspective • User-centric vs development-centric design • Focusing on human details is critical: • Perception • Memory • Learning capabilities • Central issues: • User • Task

  6. Functional models

  7. Standard abstract UI model

  8. Layers

  9. Team

  10. Early design phase • UML use case diagrams • Typical (happy path) scenario analysis

  11. Lifecycle approaches • Rational Unified Process (RUP) • User experience (UX) storyboards: enriching use cases with GUI design info • Extreme programming and agile approaches • Evolutionary prototyping

  12. GRAPHICAL User interface design

  13. Skipping theoretical parts • Short term memory and cognitive modelling • System response time and user • Compromising between human control and automation • Presenting the user with internal state of application

  14. User-centered design Single rule: “Know the user.”

  15. GUI example

  16. Component costs

  17. Design guidelines

  18. Iterative development • Prototyping • Refactoring • User interface testing • Software testing • Usability testing • Profiling

  19. Prototyping

  20. Design patterns inside Java GUI Implementation details

  21. Java GUI underlying patterns

  22. Separating Presentation • Elements that need to be separated: • Look and Feel (how the components are drawn) • Some interaction styles (one or two clicks) • Fonts • Color and themes • Provided by Swing by pluggable look and feel • SWT and AWT enforce certain modularization • JavaFX uses separate FXML source files

  23. Data Transfer Object (Data I/O) • Holds business data in transactions between service providers and clients • Single method to send and receive DTO • Decreases bandwidth • Simplifies communication • Usually contains only necessary information

  24. Observer Pattern (Control) • Event-based communication • Publish and subscribe mechanism

  25. Form-based, web-based, mobile clients CLIENTS AND Technologies

  26. Form-based rich clients (1) • Microsoft technologies (Window Forms), Flash (Flex), Java based,… • Java differences: • Full object-oriented approach • Multi-platform execution • Highly collaborative community • JRE • SWT sacrifices a part of portability for performances

  27. Form-based rich clients (2) • Usual strategy: • Content first • Data second (simulate moving back and forth) • Plain Old Java Object (POJO) object • Commands third • AWT • Swing • SWT • JavaFX

  28. Web-based clients (1) • Web environment • Client display size, connection types, different browsers • No state • Cannot operate when disconnected from server • Attention to bandwidth and interaction issues • Web pages are defined in non-object-oriented languages • No installation needed

  29. Web-based clients (2) • Typical business implementations: • Servlets • JSP • JSF (Spring, Struts,…) • Example of online game scenario: • Data: Postgresql + JPA (Hibernate) • Logic: Tomee+ Rest Services • Presentation: JavaScript + AJAX + JQuery

  30. Mobile based clients • J2ME MIDlets • Limitations: • Low hardware resources • Simplified application lifecycle • Cost-driven design • Other problems…

  31. Concluding remarks • HCI – design, implementation and evaluation of interactive systems for humans • GUI building is its practical part: design, software architecture, code tactics • Java has good GUI related stuffs: • Widely used and well documented • Architecture-neutral, available • High level GUI packages • Growing importance on the internet

  32. THANK YOU FOR ATTENTION. kartelj@matf.bg.ac.rs aleksandar.kartelj@gmail.com www.math.rs/~kartelj

More Related