GUI Design for a BMI Calculator - 211CDE GUI Programming in Java - Jason Williams (3195604)
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
211CDE GUI Programming in Java
GUI Design for a
BMI Calculator
11th May 2012
Jason Williams (3195604)
GUI Design for a BMI Calculator Jason Williams
Table of Contents
Introduction ........................................................................................................................................... 3
GUI Design ............................................................................................................................................. 3
Design Idea 1 – Tabs .......................................................................................................................... 3
Design Idea 2 – Landscape ................................................................................................................. 5
Design Idea 3 – Portrait ....................................................................................................................... 6
Design Idea 4 – Final design ............................................................................................................... 7
Justification of final design................................................................................................................... 8
Software Design .................................................................................................................................. 10
Use of Library Classes ...................................................................................................................... 11
UML Diagrams ................................................................................................................................... 12
Code Development Process .............................................................................................................. 13
Final Development Screenshots ....................................................................................................... 14
Usability Testing ................................................................................................................................. 15
Observation ....................................................................................................................................... 15
Questionnaire .................................................................................................................................... 16
Evaluation ............................................................................................................................................ 19
References ........................................................................................................................................... 19
211CDE GUI Programming in Java Page 2 of 19
GUI Design for a BMI Calculator Jason Williams
Introduction
Tasked with the creation of a Graphical User Interface (GUI) for a Body Mass Index (BMI) calculator,
we were provided with an existing class (and corresponding JavaDoc documentation) that contained
the technical logic and algorithms needed for the program.
The program had to be able to have the user input in metric and imperial (both UK and US variants),
and show the results of calculation as a BMI figure, the ideal weight and the range name that the
inputted weight and height equate to. The design of the GUI itself was left entirely to our imagination;
however we had to go through the GUI design process.
This included completing a consideration of a range of alternative designs, an explanation of both the
software design and code development process, and a final usability test with users to discover if our
GUI was intuitive for the user and suitable for the purpose. Each of these aspects is explained in the
report.
The final application itself, including the corresponding source code, JavaDoc and jGRASP project
file, are included with this report.
GUI Design
Before the program design and code development processes can begin, it is important to consider a
range of designs that the GUI could possibly take. Whilst during these, the focus is on creating the
design of the individual screens, and not the mechanics of the interface. The low-fidelity designs of a
‘sketch’ or ‘storyboard’ of an application allows for a fast to modify and iterate design plan, whilst
requiring no large investment of time or cost (Galitz; 2007:772).
During this process for the BMI Calculator application, I designed simple mock-ups of four different
designs using a basic design software package. Each was critically reviewed for their effectiveness at
both inputting and relaying the information to the user before I made a final decision on which design I
would be going forward to development with.
Design Idea 1 – Tabs
This design uses tabs to split the information in two between the information the user needs to input
and the information the calculator outputs to the user.
211CDE GUI Programming in Java Page 3 of 19
GUI Design for a BMI Calculator Jason Williams
Screen 1 – Enter Height/Weight tab
Current tab Message updates
highlighted to show current
state information
or errors
Radio button list of
different measures
Big calculate ‘hit
Labels and text me’ button takes
boxes change user to BMI tab
depending on
measure selected
Screen 2 – Body Mass Index tab
Saying ‘you’/’your’
connotes
Important
personalisation of
calculation results
the application
in bold
All information
displayed via text
As this was the first design I created for the application, I feel happy with only half the design. I
believe the height and weight tab is roughly correct, with the usage of radio buttons, text boxes and a
message label area (for errors or dictate to the user what to do), however I don’t feel happy with the
segregation of the two tabs and the Body Mass Index tab itself.
I feel like the segregation of the two tabs creates a need for the user to go back a tab to discover what
height or weight values they inputted (if they forgot, or if they believe they made a mistake in typing),
and I believe the information shouldn’t be formatted in plain text (unless if it is necessary).
I will take these criticisms in to the next iteration of the design…
211CDE GUI Programming in Java Page 4 of 19
GUI Design for a BMI Calculator Jason Williams
Design Idea 2 – Landscape
This design takes the positive aspects of the previous (the height/weight tab) and moves it all on to
one screen, rather than two separate tabs.
Information
displayed
more clearly
Left hand-
side similar
to before
Coloured
range slider
indicates
BMI range
Although I feel like this design is better in terms of overall layout and information display, I feel as
though both aspects of the design are now worse than before.
The height and weight area seems to not look right in a landscape format, due to the portrait nature of
the design. It also seems peculiar to the eye how there isn’t a distinct separation between the area to
input data and the area to view outputs.
I also don’t like how the information is given very cleanly to the user. Although this may be easier to
see at a glance, it is has very cold connotations and lacks an environment in which the user feels
comforted, something that may be important for a BMI calculator if it has to give news the user wasn’t
expecting.
Despite this, I do like the range slider use (although the colours need changing to be less harsh), and
this will continue in to my following design.
211CDE GUI Programming in Java Page 5 of 19GUI Design for a BMI Calculator Jason Williams
Design Idea 3 – Portrait
This follows on from the previous design, but takes on the criticism of the landscape layout and
attempts to improve information display…
Height/Weight layout
still the same
Calculate button fits the
width of the screen
Information layout is
still clean, but highlights
important data
Range slider still in
place, but doesn’t
display text label of
range underneath
With this design, I feel the portrait orientation is a major plus, and I am happy with the majority of the
design, apart from the previously mentioned shortcomings with the information layout area.
I want to try and find a way to explain the information clearly, but also add some personalisation
options in there (semantic use of the lexis ‘you’ and ‘your’, etc.)
211CDE GUI Programming in Java Page 6 of 19GUI Design for a BMI Calculator Jason Williams
Design Idea 4 – Final design
Incrementing on the previous design, I will leave the majority of the design alone, however alter the
information display area to contain a more ‘personalized’ view. Java components used in this design
are noted alongside the element.
JLabel to display
JRadioButtons messages/errors
inside of a
ButtonGroup.
Number of
Labels change JTextFields/JLabels
depending on changes depending
JRadioButton on option selected
selected (3 or 4 needed)
JLabels to display JLabels and range
information slider update
following ‘calculate’
JButton click
JSlider used to
show range of BMI
This will be my final design going forward to the code development process. A justification for this
follows.
211CDE GUI Programming in Java Page 7 of 19GUI Design for a BMI Calculator Jason Williams Justification of final design The height/weight area I feel is very good in terms of what data needs to be inputted. The way the text box inputs dynamically change depending on what radio button option is selected is useful so the user doesn’t input information where it shouldn’t be. I also like how large the ‘calculate’ button is, as this calls prominence to it. During development, however, I will try and see if some elements of the design can be made horizontal rather than vertical (the radio buttons in particular). This removes a lot of the white space seen on the design. I’m sure I will also increment slightly on the information display area during development, however I feel like this the best design out of the four. It both personalises text display, however important information is larger than the rest of the text, and put in bold. Again, the range slider is a great idea due to the ease of reading the information; however again, colours need to be looked at during development. Functionality Based on the initial design specification, the following table shows the functionality required, and if it is met by the final design… Functionality required Implemented How/Where? Enter height/weight in metric √ Enter height/weight in imperial UK √ Radio buttons and dynamic text fields/labels. Enter height/weight in imperial US √ Results show absolute BMI √ Label, with BMI in larger font and bold Results show ideal weight √ Label, with weight in larger font and bold Results show a range indicator √ Label and coloured range slider Efficiency Finally, looking at the efficiency of the application, I believe it is incredibly efficient. No extraneous information is provided and no confusion exists between where information needs to be inputted and where information is outputted. Again, this is via the dynamically visible labels and text fields, and the formatting of the various results labels throughout the application. 211CDE GUI Programming in Java Page 8 of 19
GUI Design for a BMI Calculator Jason Williams
Usability
Usability wise, I believe that the design is friendly however it also affords the user to see the important
information clearly. The two tables on the following page will compare my design to the learnability
and ease of use aspects of the ‘Twelve Principles for Usability’ (Benyon; 2010). The robustness and
accommodation aspects will be reviewed and considered following the usability test results.
Learnability principles Justification
Everything is easily visible on one page. Label elements aren’t displayed
Visibility
unless if ‘calculate’ button is pressed, so doesn’t cause accidental visibility.
Created via the use of different measuring types, and the visibility of those
Consistency selected. Also through the bold-ness of important information and use of
colour on the range slider.
Language used and measurements are all familiar with real world
Familiarity
conventions.
The ‘calculate’ button, text fields and radio buttons look like they are there
Affordance
to be typed in, or selected as they follow general application standards.
Ease of use principles Justification
Navigation is not a concern, as all information is on a single page, and it
Navigation
follows a standard layout (top to bottom).
The input of data and the ‘calculate’ button allows the user to be in control.
Control Any inputs and outputs are also clearly labelled with text as to what they
do.
Feedback is outputted to the user when the ‘calculate’ button is pressed.
This includes all the necessary information. It can also output error
Feedback
messages if an incorrect value is entered in to a text field – keeping the
user informed throughout use of the application.
211CDE GUI Programming in Java Page 9 of 19GUI Design for a BMI Calculator Jason Williams
Software Design
My initial idea for the software design was to have a separate class for each JPanel used in the
application. In effect, this would make a JPanel (and class) for the unit selection, the height/weight
input and the various outputs. In practice, this wouldn’t be possible to implement efficiently due to the
use of the external BMIcalculator class.
Due to this, my idea changed to using a single class (BMIviewer) and having methods for particular
functions. These methods would usually be called from inner-classes that implement the Java
ActionListener class when a button press event (ActionEvent) has occurred.
Two JFrames will be used to get the user’s choice of measurements, and for the user input of
height/width entries. These will be given a titled border to instruct the user of what needs to be done
for that frame. Once the program begins, only these two JFrames are visible. None of the output fields
are visible till the calculate button has been pressed.
The measurement choice frame will contain a trio of radio buttons, linked together in a button group,
one each for the three types of measurement available (metric/imperial UK/imperial US). It will
automatically set the default value to metric, and this will be displayed. Once the user has selected a
radio button, this will call the relevant inner ActionListener class, which will itself call a method in the
main BMIviewer class. This method will begin by setting the relevant text fields and labels to visible,
then set the relevant values and instruct the BMIcalculator instance to what units will be used.
Once this is done, the height/width frame will contain the relevant labels and text boxes for the user to
input their height and weight how they require it. When the user presses the calculate button, its
method (called by the ActionListener) will first validate the data inputted. This will firstly check if any
values were entered, then it will verify that these are within the allowable range. For instance, you
can’t have over 100 centimetres, or 12 inches.
This then calls another method to set the height and width in the BMIcalculator instance. Following
this, the method sets the BMI label to the value returned from the BMIcalculator’s getBMI method, and
calls the setRange and setTarget methods.
The setRange method takes the String value returned from the getRange method in the BMIcalculator
as a parameter. Depending on the value of this, it converts it to a numerical value (between 1 and 5),
and sets the range slider to this value and gives it a background colour depending on which value is
returned (normal is green; obese/severely underweight is red).
The setTarget method takes the target weight from the BMIcalculator as a parameter and sets the
target value label to this value. Due to the BMIcalculator class returning the value as kilograms,
conversion needs to take place, and for kilograms, the number will be rounded to two decimal places
using the DecimalFormat functions.
Finally, the program will ensure that all relevant labels and elements are set to visible.
Late on in development (following early feedback in the usability tests), I added two buttons for ‘reset’
and ‘exit’ functions. The ‘exit’ button had an ActionListener that called a method to dispose and exit
the application, and the ‘reset’ button’s relevant method returned text field values to blank and set all
visibility settings back to its original state. This mostly consists of setting the output labels to invisible.
211CDE GUI Programming in Java Page 10 of 19GUI Design for a BMI Calculator Jason Williams Use of Library Classes The elements from the javax.swing library used in the application are… Element Where used BorderFactory Set borders of the JPanels. ButtonGroup Used to link together the three different radio buttons. GroupLayout Layout of the various elements, usually given a relative placement and size. JButton Used for the ‘calculate’, ‘reset’ and ‘exit’ buttons. JFrame The viewer is inherited from the JFrame class. JLabel Used throughout to instruct the user, show errors and report any output to the user. JPanel The unit selection and height/width input panels. JRadioButton Allows the user to select the type of measurements. JSeparator Used to separate the different sections of the application. JSlider The range slider. JTextField Used to get user input for the measurements. Other library classes used include… Class/Import Where used java.awt.ActionEvent Used as a parameter in the below to indicate which event to look out for. java.awt.ActionListener Inherited from inner-classes to listen for button clicks on buttons. java.awt.Color The range slider background and font colours. java.text.DecimalFormat Convert BMI value to 1 decimal point; kg values to 2 decimal points. 211CDE GUI Programming in Java Page 11 of 19
GUI Design for a BMI Calculator Jason Williams
UML Diagrams
The UML class diagram created by the jGRASP project can be found below, followed by a more
extensive class diagram beneath, including attributes and methods (designed using StarUML).
Notes:
javax.swing elements are not included in the attributes description of BMIviewer.
Listener classes are all inner classes of BMIviewer.
BMIcalculator class definition is taken from the provided JavaDoc.
Values for final double attributes in BMIcalculator are not provided, as they are not in the
JavaDoc.
211CDE GUI Programming in Java Page 12 of 19GUI Design for a BMI Calculator Jason Williams
Code Development Process
Development on the application took place in both NetBeans and jGRASP. NetBeans was mostly
used for the Swing GUI Builder, and jGRASP for implementation of the BMIcalculator class in to the
code produced from the GUI builder.
Previous research (and experience) had showed that use of a GUI builder would make a more
professional looking product, whilst staying close to Java code structures (Stuart; 2005). I would have
used NetBeans for integrating the BMIcalculator class, however I am more experienced with jGRASP,
and wasn’t sure how to perform some operations in NetBeans – such as compiling a .jar file.
NetBeans proved to be very useful as it allowed for positioning and sizing of elements without the
strenuous trial and error pixel points method of coding a GUI by hand. The click and drag nature of
the GUI builder allowed for quick positioning of items, and it allowed me to quickly recreate the design
diagram I had previously created.
It also allowed me to better position elements than I would have the ability to. One of my original aims
for the application was for it not to leave lots of white space on the screen if it was maximised, and
use of the NetBeans positioning tools allowed me to create a relative layout which would stretch to fit
the window if the window size was changed by the user. Of course, it still looks better at its default
size; however this is a step in the right direction.
The one problem the two-tier approach (NetBeans and jGRASP) left me was that it left a lot of code
that I hadn’t wrote myself and I had to carefully read it to ensure I knew what each fragment was
responsible for. In order to document me doing this, I commented each segment of code to explain
what it does, and created JavaDoc comments for each method.
Whilst developing the BMIcalculator integration in jGRASP, I had difficulty with comparing strings
(used in the setRange method), however use of the provided equals() method solved these. There
were also some difficulties with the error checking of user input, however testing with relevant test
data helped me iron out any of these problems. It was also tricky ensuring that elements were visible
when they should be – but this just required me to carefully look over the code for correct placement
of the many setVisible method calls.
Throughout development, the Java API Specification documentation came in handy as it showed
what each imported package did, with an explanation of any methods and values held.
Once I had finished, I compiled and ran the program to test it and ensure all functions were working
correctly. Testing was mostly completed white box during development, and consisted of equivalence
partitioning in order to find valid, invalid, and borderline data with their corresponding outputs.
After I was happy with it, I created the JavaDoc documentation; however had difficulties with
compiling it to a .jar file. Online troubleshooting showed that this was due to jGRASP looking for the
32-bit version of the Java Development Kit; but I only had the 64-bit version installed. A quick install of
the 32-bit version solved this and the .jar file compiled as expected.
Versions of software used in development:
Java SE 7u4 32-bit
NetBeans IDE 7.1.2 (Java SE edition)
jGRASP 1.8.8_15
211CDE GUI Programming in Java Page 13 of 19GUI Design for a BMI Calculator Jason Williams
Final Development Screenshots
Initial State Following Calculation
Error handling example 1 Error handling example 2
211CDE GUI Programming in Java Page 14 of 19GUI Design for a BMI Calculator Jason Williams
Usability Testing
The aim of usability testing isn’t to create a test on whether the item you’re testing is user friendly, it’s
to see if it’s usable within a certain set of defined criteria. As already described in the report, I will be
using Benyon’s ‘Twelve Principles of Usability’ (2010) to test my project against. This is a full and
comprehensive set of principles that form the basis of analysing the usability of a product.
In order to test the application against these, and in the real world, I will complete two phases of
testing. The first will be a small set of users to observe using the application, and then ask those (and
more via online methods) to complete a questionnaire on their experiences. An analysis of the
combined results follows at the end of this section.
Observation
Observations on users using the application were completed with three users. Each was given 5
minutes with the application to perform a range of tasks. From previous experience, this allowed
myself to see how the users interacted with the application in the same way I have time and time
again but not realised. This shows their process of using it compared to mine, and can highlight key
issues or areas of concern within the application.
The observations were completed in a room with a laptop, mouse and keyboard. Only the tester and I
were present in the room. This wasn’t the optimal environment for a usability test, as the tester may
have reacted differently to usual as they were aware they were being observed.
The tasks provided mostly consisted of selecting a measurement type and inputting data and seeing
their thoughts and reaction times to information received, in particular the error messages. There
were also tasks for things such as exiting the application, however these were secondary aims.
Due to the small focus of the application, none of the users suffered difficulties whilst using the
application and none of the users took more than 2 minutes to complete two different BMI
comparisons and close the application. None of the testers seemed frustrated at any time, and mostly
displayed a placid expression. This could be due to the arguable fact that one of the testers
mentioned of “is a BMI calculator really that interesting?”
As well as the following questionnaire response, I asked the users for feedback on how to improve the
application following their short use of it. Criticisms included:
Possible addition of a way to hide data once calculated to aid privacy.
Colour scheme a bit bland.
Could there be a way to save/export data following calculation?
211CDE GUI Programming in Java Page 15 of 19GUI Design for a BMI Calculator Jason Williams
Questionnaire
As part of the usability test, I created a questionnaire to be completed following the test. Although not
a confirmed method of accurate testing, a questionnaire allows quick, quantifiable feedback of a
relatively large scale with minimum effort. Questions on the test were iterated using the advice from
Sauro on creating and implementing standardized usability questionnaires (2012:185).
As well as the paper version of the test, I also created an online form (using Google Docs) and asked
friends to download (and use) the application and then complete the form. Unfortunately, this only
received 4 responses. Including this and the questionnaires completed following the observations, this
equated to 7 responses to work from.
A copy of the paper questionnaire follows on page 17. The online questionnaire form can be found at:
https://docs.google.com/spreadsheet/viewform?formkey=dElIRkIzbHAxd1EwbFloQ1E2MEtES1E6MQ
Quantitative data
This data looks at the numerical fields, where 0 was classed as no experience, and 3 as very good. A
selection of important results has been collated below.
How easy was the application If you received any, were
to learn how to use? the error messages helpful?
Was the application Would you use this
visually appealing? application again?
211CDE GUI Programming in Java Page 16 of 19GUI Design for a BMI Calculator Jason Williams
Qualitative data
This information is textual data which refers to a description based on quality or characteristic. The
two questions requiring a text answer and the responses gained are shown below.
Would you use this application again? If no, please explain why…
“No need for a bmi calculator” (online) (observation)
“already have iphone app” (online)
Any other comments…
“a bit grey and the colour of the slider thing was a bit harsh” (online)
“made accident in typing, app pointed it out to me – useful” (online)
“boring colour scheme, otherwise calc works as expected” (online)
“Could do with a way to hide results if you don’t want people seeing your results”
(observation)
Reflection
Following the completion of both the observations and the questionnaire feedback, I began to collate
and reflect upon those.
In evaluation, it would appear that most people who used the application claimed it was highly
functional and did the job well. Most people also reflected on how easy it was to use, however some
people marked slightly lower for this. Maybe more prominent use of labels to indicate what the user
has to input would be useful, as people seemed to like the label usage for error messages.
Quite a few users bemoaned the lack of an enticing colour scheme due to the several grey panels
present in the application. This is due to the Java frameworks, and grey being the default colour,
however given more time and practice, I’m sure it would be possible to experiment with other colour
schemes and complete further usability testing on those colour schemes.
Looking at improvements to the program, two users suggested adding a function to hide results which
I managed to implement following the completion of the usability testing (in the form of the reset
button), and several users liked the idea of being able to save results. Whilst this would be possible, I
didn’t have sufficient time in order to implement this feature in to the program before the deadline.
211CDE GUI Programming in Java Page 17 of 19GUI Design for a BMI Calculator Jason Williams 211CDE GUI Programming in Java Page 18 of 19
GUI Design for a BMI Calculator Jason Williams
Evaluation
Overall, I believe this project went well. Through the initial GUI design process, I iterated upon the
design until there was a design I believed would be the most usable for users of the application and
the development time showed that I was able to implement the functionality required by the
application and the design work.
This was the first time I had used NetBeans as a GUI designer, and I found their tools to be very
useful in being able to quickly prototype designs to get a feel for what they would be like if the full
application code was implemented. In future tasks, I would also use NetBeans to implement the code
itself as this proved to be tricky in using both NetBeans and jGRASP simultaneously. Due to the fact
my initial design and the final product look so similar, I understand that NetBeans is a powerful IDE
and tool for designing (and creating) graphical user interfaces.
I also think that the usability testing (although small scale) went well. It could have been performed in
a more professional environment, however as the application it has an individual purpose; I don’t think
this was too much of a worry on the outcome and results of the testing. The usability test proved
valuable, as it allowed me to add extra features that were indicated to me by the users to the
application post development.
References
Benyon, D. (2010) Designing Interactive Systems: A Comprehensive Guide to HCI and Interactive
nd
Design, 2 edition. Pearson Education, Ltd.; Essex, UK.
Galitz, W. O. (2007) The Essential Guide to User Interface Design: An Introduction to GUI Design
rd
Principles and Techniques, 3 edition. Wiley Publishing, Inc.; Indianapolis, IN.
Oracle (2012) Java Platform, Standard Edition 7 API Specification [online] available at
[6 May 2012]
Sauro, J. and Lewis, J. R. (2012) Quantifying the User Experience: Practical Statistics for User
Research. Elsevier, Inc.; USA.
Stuart, M. (2005) Java GUI Builders [online] available at [5 May 2012]
211CDE GUI Programming in Java Page 19 of 19You can also read
