KF5008 Program Design & Development Lecture 1 Usability GUI Design and Implementation
Types of Requirements Functional Requirements What the system does or is expected to do Non-functional Requirements How well the sytem provides functional requirements Usability Requirements Match between functional requirements and the tasks the users of the system are going to undertake Definitions derived from Bennet Chapter 6
Usability Requirements Major impact upon system acceptance Weak interface = System Failure Complex and involved discipline Number of factors Nature of tasks Type of user Amount of user training Frequency of use Hardware and software employed Large and complex area only scratching the surface
Typically a prototyping approach is required Use scenario development Interface Evaluation Prototype development Derived from Dennis (2010), Bennet (2011), Rogers(2011)
Use Scenario development Classic requirements capture Interviews Focus groups Observation Questionnaires Analysis of existing systems Story driven Could document in the form of Use case model Who are the users? What are their goals? ( Use cases?) What steps do the users want? ( Use case descriptions)
Prototype development Architectural decisions Interface standards Corporate / System policy? Layout Content awareness (what information can I get?) Aesthetics (white space, colour, fonts etc) User experience ( ease of learning and ease of use) Consistency Minimising user effort ( 3 click rule?) Accessibility? Web Accessibility Initiative - http://www.w3.org/wai/
Types of prototype Storyboard use a pen Windows Layout diagram use a drawing tool or just draw it HTML / Language prototype use an IDE or be an alpha coder Many IDEs support visual form creation
Example Given the use case diagram below. Using a Java Swing metaphor attempt to create a story board for View students on module. This should take 10 minutes. If you have time do the other use cases The more conscientious you do this the more you will get from this session
One solution Click to select module Click to exit system Click to see register (once module selected) Click to exit system
One solution Page 2 Click to return to main menu
Example ctd I did not use a pen. What would have been the benefits of me doing so? What is missing from the example storyboards? Modify the story boards to include the additional information Possible answers: If this was in pen it might look less fixed and hence more open to change? Is an authentication (login) implied? More info on page 2 attendance, grades, student id Other options from page 2 email student?
HTML / language prototype A limping prototype of final system showing how the system will operate Completed by experienced developers More commonly by experienced developers using appropriate development tools Care must be taken with managing user expectations That s great when can I have it?
GUI Builders Eclipse can function as a GUI builder WindowBuilder add-on Google Summer of code project Not all developers like this approach as: Hand tools before power tools Produce code you do not understand Some tools produce odd / poorly structured code Tool tie in? See http://charlespetzold.com/etc/doesvisualstudiorotthemind.htm l
Types of Prototype Evaluation Modelling users task performance Observing users Asking users their opinions Asking experts their opinions Testing users performance
Walk through Walking through the tasks in the system AND Identifying any problematic usability features Could be By developer With users Without experts Formal and less formal
Heuristic evaluation - Nielsen Visibility of system status Match between prototype and the real world Simple / Familiar language? User control and freedom Escape? Consistency and standards Help users to recognise and recover from errors Error prevention Recognition rather than recall Is it clear what you can do and how? Flexibility and efficiency of use Aesthetic and minimalist design Help and documentation
Designing GUIs How do we design GUIs? Using storyboards and some form of screen layouts Often as quick to generate the real thing as use Visio or similar There are lots of GUI builders, depending on the language and environment For Java, you can choose NetBeans or Eclipse to develop the GUI These slides focus on using Eclipse
Implementing GUIs in Java There are various approaches AWT ( Abstract Windowing Toolkit ) Uses native layout components Limited to lowest common denominator but some Java additions Considered outdated SWT ( Standard Widget Toolkit ) IBM Native components and requires native libraries Used to implement Eclipse itself Doesn t run everywhere but covers Windows, Mac OSX and Linux/GTK
Implementing GUIs in Java Swing 100% Pure Java implementation Wide range of widgets Pluggable look and feel Some look and feels are platform-specific (Windows/Mac) Default is Metal except on Mac Had a reputation for slowness in past, better now
Swing Basics import javax.swing.*; Most class names start with a J The main class representing a window is a JFrame The controls/widgets are subclasses of JComponent so are sometimes called components
Event handling in Swing Java is an object-oriented language. What would be a good OO way of implementing event handling? Example: Suppose we have a button. We want to be able to have lots of buttons each of which behaves differently when clicked.
Event handling in Swing Java makes use of the concept of listeners. A listener is an object that listens for the occurrence of an event and does something when that event happens. Many-to-many relationship between listeners and events. Also makes use of inner classes (optional) to reduce the number of classes needed. A bit controversial when first created.
A Very simple GUI public class HelloGUI extends JFrame implements ActionListener { private JButton btnclickme; private JLabel greeting; public HelloGUI() { //constructor super("hello GUI"); btnclickme = new JButton("Click Me"); add(btnclickme, BorderLayout.NORTH); btnclickme.addactionlistener(this); greeting = new JLabel(); add(greeting, BorderLayout.CENTER); } setsize(100,100); setvisible(true); setdefaultcloseoperation(jframe.exit_on_close); public void actionperformed(actionevent evt) { greeting.settext("hello World!"); } }
A Very Simple GUI
More on Listeners ActionListener is actually an interface. This applies to all of the listeners. So the Listener we pass to addactionlistener (and its equivalents) can be: An anonymous inner class which implements the interface. Any class which implements the interface. Can be a class we create specially, or we can use the JFrame subclass itself by passing this assuming the class does implement the interface concerned.
Listeners and Adapters Many listeners like ActionListener only have one (perhaps two) methods that we need to implement. But some (MouseListener) have several, and it would be tiresome to have to implement all of them. In these cases Swing makes use of adapter classes (e.g. MouseAdapter) Implement the interface Each method implementation does nothing
Layout Managers By default, content panes use BorderLayout and JPanels use FlowLayout. We can set our own layout manager See generated constructor code (earlier) We can avoid using one at all by passing null to setlayout(). We have to position each component individually. GUI builders call this absolute layout. Why is it NOT a good idea?
Layout Managers BorderLayout FlowLayout GridLayout more See http://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html
BorderLayout The places round the sides used to be called NORTH, SOUTH, EAST and WEST. Eclipse still uses these names but those shown are preferred (i18n, l10n). The central component takes up all free space.
FlowLayout Arranges children in a single row starts a new row if it runs out of space
GridLayout Makes all children the same size (cf. BoxLayout) Then arranges them in the requested number of rows and columns.
Recommended Work Revision of Swing will be a major part of this week's practical class.