GUI Design for a BMI Calculator - 211CDE GUI Programming in Java - Jason Williams (3195604)

Page created by Sally Jordan
 
CONTINUE READING
GUI Design for a BMI Calculator - 211CDE GUI Programming in Java - Jason Williams (3195604)
211CDE GUI Programming in Java

            GUI Design for a
             BMI Calculator
                    11th May 2012

       Jason Williams (3195604)
GUI Design for a BMI Calculator - 211CDE GUI Programming in Java - 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 - 211CDE GUI Programming in Java - Jason Williams (3195604)
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 - 211CDE GUI Programming in Java - Jason Williams (3195604)
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 - 211CDE GUI Programming in Java - Jason Williams (3195604)
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 19
GUI 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 19
GUI 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 19
GUI 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 19
GUI 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 19
GUI 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 19
GUI 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 19
GUI 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 19
GUI 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 19
GUI 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 19
GUI 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 19
GUI 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 19
You can also read