Netbeans IDE Design Issues

thrillukrainianΛογισμικό & κατασκευή λογ/κού

7 Ιουν 2012 (πριν από 5 χρόνια και 2 μήνες)

342 εμφανίσεις

Ond
řej

Linda, X36NUR
, 14.5.2008

Netbeans IDE


Design Issues


Cognitive W
alkthrough


Final Report


1

Executive Summary


The cognitive walkthrough evaluation of the Java Platforms Manager, Templates
Manager, Libraries Manager, Plug
-
in Manager, Options and
Help showed that users should be
able in most cases to achieve the desired result
s
. Components are mostly well design and the
user interface is more or less intuitive. However

several unusual action flows have been
detected. Although the user should be abl
e to achieve his desires after all, it might be a little bit
difficult for him and more time consuming, thus making the user frustrated in some cases. Also
several minor design errors and GUI dysfunctionalities have been detected. These should not
have a d
irect impact on the functionality of the Managers, but might be harm
ful to

the overall
user’s view of the whole IDE.


The most important problems included:



Creating and saving new Template.



Preview of chosen Fonts and Colors style



Creating and saving new F
ont
s

and Colors style



Saving
a new Code T
emplate


2

Introduction


The intention of this testing was to reveal design issues in the assigned components of
the NetBeans IDE. By design issues we mean flaws that could be obstacles on the user
’s way to
achieve wh
at he wants
. As a methodology for the testing we have chosen the Cognitive
Walkthrough methodology. Its biggest advantage is that it does not require any testers. Likely
user cases and scenarios are design and then a virtual walkthrough is performed, caref
ully
evaluating the current state of the IDE and the user’s knowledge and information that he has or
he is missing.
This evaluation should reveal possible design issues and flaws.


3

Cognitive Walkthrough


The most important things to do before a cognitive
walkthrough could be performed is
to precisely specify who the user is, what does the GUI of the application being tested looks like
and what scenarios will the user go through.

In each step of the cognitive walkthrough the tester, who substitutes the virt
ual user, ask
s four

basic questions:




Will the user try to achieve the effect that the subtask has? (Does the user understand
that this subtask is needed to reach the user’s goal?)



Will the user notice that the correct action is available?



Will the user un
derstand that the wanted subtask can be achieved by the action?



After the action is taken, will user understands the feedback he gets?

The answer to these questions should clearly identify the possible flaws and design issues.

4

Description of the user


Base
d on preliminary meetings and discussions the user was identified as a beginner
with the NetBeans IDE but having some knowledge
of

working with other Java programming
frameworks. More or less he matches a college student trying out a new framework.


5

Scena
rios’ description
s


The scenarios have been designed to cover the most likely cases of the user’s interaction
with the assigned components of the IDE.
They try not only to follow user’s successful flow
through the necessary sub
-
steps but in some cases also

to look at the possibilities for the user to
take few steps back and start over if he has done something wrong. This is the list of the
components and a basic description of the scenarios designed for them:




Java Platforms Manager


Register a New Platfor
m



Templates Manager


Create a New Template Based on an Existing Pre
-
set Template



Libraries Manager


Add/Remove New Library



Plug
-
in Manager


Install and Activate a New Plug
-
in



Options


Change the Font
s

and Color
s

Formatting of the Code.



Options


Change

a Specific Code Template.



Options


Add a New Keyboard Shortcut.



Help


Find helpful information about some specific topic.

A detailed description of the scenarios could be found in the Scenarios document.

6

Grading Policy


In each sub
-
step of the cognitive

walkthrough scenario we have to ask all of the questions
described in section 3. The answer to these question is a score and a
n

explanation of why was
that particular score assigned. In our tests I used the scale of grades from 1 to 5, 1 being the
best. T
he following table summarizes the grades and the
ir

appropriate
interpretation.



Grade

Interpretation

1

Yes

2

Likely Yes

3

50/50

4

Likely Not

5

No


7

Results


In this section the actual results of the tests are presented. For each component a table
summarizing the cognitive
walkthrough
results is presented. Consequently the most important
flaws and design issues are described in detail and a possible solution is

proposed. In each part,
user is referred to the appropriate section in the Testing document (the document contains a
detailed description of all
the
steps of all the cognitive walkthroughs performed).


7.1

Java Platforms Manager


Register new Platform


7.1.1

Evaluation table


No.

Subtask

C1

C2

C3

C4

Average

1

Review registered JDKs

1

1

1

1

1

2

Open Add Java Platform dialog

1

1

1

1

1

3

Add new Platform

1

1

1

1

1

4

Check for successful registration of new Platform

1

1

1

1

1


7.1.2

Design Issues:


No design issues

were detected.


7.2

Template Manager


Create a new Template based on an existing pre
-
set Template


7.2.1

Evaluation table:


No.

Subtask

C1

C2

C3

C4

Average

1

Find the basic template

1

1

1

3

1.5

2

Create a copy of the basic template

4

3

1

1

2.25

3

Modify the new

template

1

3

2

1

1.75

4

Store the new template

1

4

1

3

2.25


7.2.2

Design Issues:




Exploring the list of templates

(Testing: 2.2.1)


This is not a major design issue, but just a
minor functionality error. However the behavior of the application due to this
error could be
confusing for the user.


When user explores the list of available templates, they are grouped together in folders. The
folder has a usual “+” on its icon, which indicates that the folder can be further explored by
clicking on it. However if
the folder is empty, then this “+” is still presented, but clicking on it
results in no action
, just in the icon’s disappearing
.


The following figure shows the case:



The Template Manager before clicking on the Client folder.


The Template Manager
after clicking on the Client folder.

S
olution
:

S
imply not show the “+” icon when the folder is empty.




Creating and

storing a new copy of the base

template

(Testing: 2.2.2, 2.2.4)


This is a quite
serious flaw in the design of the component. It should not stop the user from achieving his
goal, but
it
might result in user’s having to restart his work with this component from the
beginning.


Usual way of creating a copy of something an
d then editi
ng it would be to open the base

template, edit it and then perform a “Save as …” action. In the Template Manager we have
to first choose the basic template, then click on
the
“Duplicate”
button
and then we can
start editing our new templa
te, wh
ich is a copy of the base

one. If we do not do this and we
simply and naturally start editing the basic template, with the intention of saving it as
another file later, we are not allowed to do this, because there is no option as “Save as… ”
but only an op
tion “Save”, which will overwrite the basic template.


Solution:

E
nable the user to first edit the template as he wants and then give him the
opportunity to perform the standard “Save as…” action. This will keep the former original
template unchanged as we
ll as create a new one with the changes that the users has done.




Deleting Templates

(Testing: 2.2.4)


This is also
a quite serious design issue
, which in some
cases can complicate the users interaction with this component

and cause him some
troubles
.


When
the
user wants to delete a template he can click on the button “Delete”. This will
immediately delete the marked template without asking for any confirmation. This might
have a lot
of
negative results if the user presses the button unintentionally. Th
is could
happen also because the button “Delete” is placed under the button “Move down”, which is
used to move the templates in the list. We usually want to press this button several times in
order to move the items. If we miss and accidentally press the “
delete” button, we might
lose several templates. A confirmation dialog should be therefore added. It is interesting
that if delete the template by pressing the delete key
-
button, a confirmation dialog appears.

The following figure shows the positioning of
the delete button:




Solution:

A
dd a confirmation dialog before the template is actually deleted.


7.3

Libraries Manager


Add/Remove new Library


7.3.1

Evaluation table:


No.

Subtask

C1

C2

C3

C4

Average

1

Create new Library folder

1

1

1

1

1

2

Open Add file
dialog and add files

1

1

1

1

1

3

Review added libraries

1

3

1

3

2

4

Remove one of the added library files

1

1

1

3

1.5


7.3.2

Design Issues:




Reviewing available libraries

(Testing 2.3.3)


This is not a major design issue that should
have an important impact
on the user’s ability to accomplish his goals. However it can
confuse him and make his work with the component more difficult that it has to be.


In most cases user should not have a problem exploring the list of available libraries.
However one quite unco
mmon problem can occur. Library folders are divided into several
library types and thus creating some kind of a tree structure. But this tree structure is
hidden to the user, because when the list is loaded, the slider is moved
slightly
to the right
,
so th
at the tree structure is not displayed
. But the names of the library types are still in the
list and it is not quite clear that they group together more library folders. If user clicks on
them (maybe not being aware that this not a library folder), the who
le right part of the
Library Manager disappears. This quite unusual behavior might confuse some users.


The following figure shows this case




The Library Manager before clicking on the Server Libraries
label
at the bottom of the list.



The Library Man
ager after clicking on the line Server Libraries

label
.


Solution:

D
isplay the structure of the tree in which the libraries are stored. If so, then the
user would be aware that this is a folder of libraries and not a library itself.




Removing library files

(Testing 2.3.4)


This design issue might results in quite serious issues
if the user is not aware of what he is doing or if he accidentally miss
-
clicks at the wrong
button.


There is no confirmation question before removing the wanted files. These are re
moved
right away. Hence user can quite easily remove some files that he wasn’t planning on
removing.


Solution:

A
dd a confirmation dialog, which should ask for a user’s permission before actually
removing the selected file.


7.4

Plug
-
in Manager


Install and
Activate new Plug
-
in


7.4.1

Evaluation table:


No.

Subtask

C1

C2

C3

C4

Average

1

Find available plug
-
ins

1

1

1

1

1

2

Choose available plug
-
in to be installed

1

1

1

4

1.75

3

Install the plug
-
in

1

3

3

1

2

4

Uninstall the plug
-
in

1

3

3

1

2

5

Choose and install

another one

1

3

3

1

2

6

Check if the new plug
-
in is active

1

1

1

1

1


7.4.2

Design Issues:




Review information about available plug
-
ins

(Testing 2.4.2)


This is design issue does not
directly
impact the functionality of
this component, but it might have a
strong impact on the
user’s view of the whole application.


User can easily see that the description of the selected plug
-
in appears in the right part of
the plug
-
in manager. But in some cases, the description is too long and it cannot all be
displayed in
the sub
-
window. However there is no slide
-
bar presented and the text cannot
be rolled up. This might look very unusually to the user and cause him problems if the
information about the plug
-
in are not displayed. (If the window is resized, then a slide
-
bar
appears.)

The following figure shows this case:


The Plug
-
in Manager with description of the selected plug
-
in that does not fit into the window.

S
olution:

Add

a slide bar that could roll down the window and so display the covered part of
the description.




Installing and Uninstalling plug
-
ins

(Testing 2.4.3, 2.4.4)


This is again not a very serious
design issue, but it might complicate the user

s interaction with GUI of this component.

The plug
-
ins have to be checked in the left column of the manager windo
w in order for the
install button to become active. This might be a little bit uncommon for some users. User
might expect that the c
urrently selected plug
-
in,
info

of which

appears in the right part of
the window
,

might be the one that is supposed to be in
stalled. But only when the check
button is checked, the plug
-
in can be installed.

The following figure shows the Plug
-
in Manager, with marked checked buttons:


Solution
:

A
ctivate the install button for the currently selected plug
-
in, unless more plug
-
ins
are checked. Or maybe check the plug
-
in when we double click on it.
Also a label saying
“Check plug
-
ins that you wish to install” would help.


7.5

Options


Change the font and color


7.5.1

Evaluation table:


No.

Subtask

C1

C2

C3

C4

Average

1

Find the right tab for

Fonts and Colors

1

1

1

1

1

2

Review pre
-
set styles

1

1

1

4

1.75

3

Choose the right style

1

1

1

1

1

4

Make changes to the chose style

1

1

1

4

1.75

5

Save the style as a new preset

1

4

3

1

2.25


7.5.2

Design Issues:




Preview of preset styles

(Testing 2.5.2,
2.5.4)


This is a quite serious design issue that can
be very unpleasant for the user. It can make his work with the component more difficult and
make him actually redo several times the same task from the beginning.


The preview window does not show the a
ccurate preview of the style. For example the color
of the background is not shown and the preview only uses the current background color for
all styles, despite of their own color. The background color is very important for the user to
see how the style l
ooks and also to see if the other colors match. User might be quite
disappointed when he selects a style profile according to the preview and then something
very different is used for the code editor. This also happens when user makes some changes
to the s
tyle.


The following figures show the comparison between the preview and the actual style used.




The Fonts and Colors Tab in the Options component showing the preview of the chosen
style
.



The actual Fonts and Colors used for the code formatting.


Solution:


Make

the preview consistent with the style that will be used later.




Saving the new style

(Testing 2.5.5)


This is a quite serious flaw in the design of the
component. It should not stop the user from achieving his goal, but
it
might result in
user’s
having to restart his work with this component from the beginning. It is very similar to the
design issue described in 7.2.2.


User might have similar problems as when he wanted to create a new template. The
philosophy of the IDE, does not allow him

to save the new c
hanges as a new style. User has
to first duplicate the pre
-
set style and only then he can edit it and keep the changes in it, if
he wants to keep the original pre
-
set style unchanged. (However, user might duplicate the
style he has modifi
ed and then restore the first one to the original settings, but this would
be quite an unusual workflow
.
)


Solution
:

Add
the option “Save as…”, so that the user can save the changes he has done to
the pre
-
set style as a new one.


7.6

Options


Change a
specific Code Template


7.6.1

Evaluation table:


No.

Subtask

C1

C2

C3

C4

Average

1

Find the right tab for adding Code Templates

1

3

3

1

2

2

Choose the right language

1

1

1

1

1

3

Find the right Code Template

1

1

1

1

1

4

Change the Code Template

1

3

3

1

2

5

Store the new Code Template

1

4

4

4

3.25



7.6.2

Design Issues:




Locating the right tab for Code Templates
in the Options window

(Testing 2.6.1)


This is
not a serious design issue, which should stop the user from achieving his goal. However it
will make it for him more difficult and more time consuming to achieve what he wants.


User might have difficulties finding the right tab for changing the C
ode Templates. He might
get distracted by other tabs, which are labeled “Java Code” or “C/C++” and look for the Code
Templates settings there. On the other hand when he selects the right “Editor” tab, he
should not have any problems finding the right tab,
which is
appropriately
labeled “Code
Templates”.


The following figure shows the tabs in the Option window:



Sol
ution:
Better and more explanatory labeling of the tabs should be used. Possibly
different grouping of the
components together would help.



Editing a Code Template

(Testing 2.6.4)


This is
a
design issue that should not prevent the
user from achieving his goal, but it will cause him to spend extra time on trying to figure out
how the GUI actually works.


It might not be apparent to the user,
that he can change the code template right in the
display window. He will be quite likely looking for some “Edit button”. He might simply have
problems with identifying the “Expanded Text” window as the place where he can change
the code template.


Solutio
n
: When we are looking through various code templates and their detail appears in
the “Expanded Text” window, a blinking cursor could be added to the window. This should
reveal to the user the possibility of changing the code template right in the “Expand
Text”
window.




Storing the new Code Template

(Testing 2.6.5)


This could be quite serious design issue.
Although the user should be able to fulfill his goals, he will probably not know what to do
when he wants to save the new modified Code Template and he

will be looking for
appropriate control instrument.


User might get stacked here, because there is no button or other item that would store the
template that he has just changed. The only way how to save it is to click on the “Ok”
button. But this will c
lose the whole Option window. Therefore user cannot even observe
that the changes he made were stored and that they are now in the list of available code
templates. To do this he has to start Options dialog again, select the right language and find
the par
ticular template. The component does not provide the user with the most likely
wanted button and if the user finds the “Ok” button as the one he has to press, the
component does not provide him with appropriate feedback about whether he has
accomplished wh
at he wanted.


Solution
: Add a classic “Save” button for storing the changes done to the new Code
Template. Pressing this button would only save the changes without closing the window.
Thus the user could observe that he has indeed stored the changes he ha
s done.


7.7

Options


Add a new Keyboard Shortcut


7.7.1

Evaluation table:


No.

Subtask

C1

C2

C3

C4

Average

1

Find the right tab for adding Keyboard Shortcuts

1

1

1

1

1

2

Find the functionality for the new shortcut

1

1

1

1

1

3

Add new keyboard shortcut

1

1

1

1

1


7.7.2

Design Issues:


No design issues have been found.


7.8

Help


Find information in the Help


7.8.1

Evaluation table:



No.

Subtask

C1

C2

C3

C4

Avarage

1

Open the Help window

1

1

1

1

1

2

Review possible way of searching for help

1

1

1

1

1

3

Choose the most suitable way of searching

1

1

1

1

1

4

Try to find the desired information

1

1

1

1

1

5

Review the found information

1

1

1

1

1



7.8.2

Design Issues:


No design issues have been found.