SoftwarePractice.org: Home | Courseware | Wiki | Archive

Essay - HIC - Creating a HAL Hell or Neuromancer Nirvana

From SoftwarePractice.org

Creating a HAL Hell or Neuromancer Nirvana

Graphical User Interface Design in 1st Year Software Design


Achieving the both an excellent interface (form) as well as all the design specifications of the software (function) in one package is a difficult prospect for a first-time Software Engineer, especially without being given good reason to build a functional, easy to use interface.

Too often the GUI is regarded as a last minute addition, superfluous to the running of the program and completion of the user’s tasks. The interface is the only way that the user can recognize and interact with the program, making it the most vital. That is not to say that all the focus should be on making the GUI aesthetically pleasing, the focus should be making it functional, guided by the KISS principle, Keep It Simple Stupid.

To reinforce this principle an integration of good GUI design should be integrated into current methods of program design, which will be explained through: a demonstration of why first year Software Engineers need to know, the use of prototyping and iterative development (e.g. MUP) and GUI design, the current tools and libraries and how they can be integrated and give better comprehension, general principles on GUI design, and finally how to measure the success of the GUI produced.


Software engineers need to understand more than just the programming and design principles behind creating a program, they also have to go beyond this and understand how it will be used and implemented in the relevant environment to ensure that the chosen design will be successful.

Everyday life is rife with examples of poor interface design, and not just in computer programs, the VCR remote being an example of where over-design and too many options left the common user bamboozled at how to access common functions. It should be shown to students that GUI design, while at its deepest level is a multidisciplinary study of psychology, graphic design and software design, at the common level which they will be accessing it is straightforward and logical.

They need to remember KISS (and not just for GUIs), and that the simple interface will usually be the most usable and have the easiest learning curve. This will result in great bonuses for the user (and the associated company), but also as the simplest interfaces are often the easiest to implement. Some students would surely argue that the command line interface is the simplest one, programmatically and for a user as the text input and output is quite direct and can be verbose however this intuitive conclusion can be shattered with experience and study.

This isn’t the case because of the GUI libraries and tools that now exist, the object-orientated nature of GUI design and implementation, the intuitive point-and-click nature of GUIs, and finally the ability to easily filter the types of inputs allowed through the use of specialized GUI objects such as drop-down boxes rather than having to filter and sanitize text inputs. Finally a functional GUI allows the efficient, effective use of a functional program, which should be a part of the requirements definitions in every step of the program development, as standards and expectations rise to this level in software.


One approach to software design in first year subjects is that of iterative development, often using the Miniaturized Unified Process combined with the Unified Modelling Language to document the stages of development, the relative amount of work in each section of the development (i.e. requirements, design, implementation and testing).

This process lends itself easily to the prototyping development style, in which one element of functionality such as the GUI is designed and shown to the user to establish firmer definitions of requirements.

This means that we can easily integrate these two processes to ensure that GUI development is towards the start of the Elaboration stage (MUP) rather than slapped onto the end of the Construction stage which harms the quality of the overall project.

One method of doing this is after establishing the project objectives and inputs and outputs, draw paper prototypes and/or storyboards of how the program will get input, give output and flow throughout its general execution cycle. As this is an iterative approach obviously these will not be set in stone however they will help establish a clearer picture in both the user and engineers minds of how the program will function. Paper prototypes and storyboards can be redrawn over and over, even mock-up GUI’s developed on the computer to see how it would actually look under one particular implementation (an easy task using tools mentioned later).

It will also ensure that the GUI implementation has a longer period in which it can be iterated, tested and improved which it does not get when at the end of the construction phase.

Also over this time the engineers will be subject to a variety of ideas, tools, and tutorials that will give them different ideas and methods of approaching the problem, leading to a better considered and well-rounded GUI.


Students of Software Engineering now have plentiful support for developing GUI’s, with a variety of books, white papers, tools and code libraries easily accessible through either educational institutions or various online repositories.

While various books have been written on the GUI design, there needs to be a focus of the first year software engineering textbooks to have an integrated approach to GUI design and software development.

In regard to tools, typically the first tool being introduced is that of the Integrated Development Environment (IDE) that helps project management as well as creating skeleton structures of classes to help new users get started. Beyond the IDE’s there are special tools designed specifically to build GUI’s, a Java example being JVider, which integrates into IDE’s such as IBM’s Eclipse. Another benefit not considered is that the environments themselves are object-orientated, thus reinforcing the concepts of the program development and allowing students to consider and comprehend the ideas in a different context.

However if the student did not want to use tools like JVider in order to gain a better understanding of how it works, the libraries (such as Advanced Window Toolkit or Swing) with their extensive documentation and related tutorials allow a student to self-study the system and develop GUI’s to suit themselves, including extending on the existing libraries.


While not even the above tools and libraries can give a sure fire solution to what is the best possible GUI, there are some tips that will help guide all first year students in their GUI development.

For collection of inputs (often the most important task for a GUI) the interface can be a useful filtering and directing device for the engineers and user respectively.

For instance you could allow a user to type a metal type into a program, however if the case was that there was a limited number (under 10) of valid inputs, a drop-down box is more appropriate than a text input box as it ensures spelling mistakes are not made, gives the user the full amount of choices without having to read elsewhere and removes the need for string comparisons to decide on what was really inputted.

A combo-box could be used for beyond 10 choices, allowing the user to type in the first few characters and it would filter down the choices to those with the same first characters.

These general ideas can be extended to any inputs, with the focus on minimising what the user has to do and the choices they have to make (thus reducing mistakes that can be made). This shouldn’t be done at the sake of flexibility, i.e. not allowing a user to input data of a particular type because it cannot be easily filtered, but simply as a guide for the user into what correct input is like.

On layout, the most important elements (or those needing attention first) be in the top-left hand corner (except for Chinese/Japanese/Arabic users who read from the top-right first), as well as trying to maintain an uncluttered, direct interface. Grouping inputs that are similar or related together will also help a user gain comprehension faster. For design considerations such as the colour scheme it is best to stick with the standard Java look and feel, which is supported by years of research and development.


The final task in GUI design is evaluating the effectiveness of the design, and should not be done simply by the student who developed it, and peer checking (between engineers) is an excellent way to utilize the various specialities and viewpoints of each engineers. It also gives the team an idea of how an experienced user would interact and “see” the system and its functionality, and this constant use will lead to the small improvements that increase productivity and reveal bugs.

This however should not be the basis as untrained users need to be tested as well to see how useable and the type of learning curve to be expected to ensure that the interface is truly functional for a variety of users. While sometimes a steep learning curve is unavoidable, mitigating this should be investigated. The untrained users can be drawn from the families or friends of the engineers, with the desire that they have a range of computing experience, from very little to an expert user (but not expert in the system). Another excellent source if available is the users themselves as they know which tasks are most important and can ask the GUI is changed to reflect this. Engineers will also be able to start developing their user documentation from these tests, thus doing two tasks with one test.

Finally in this evaluation would be the comparison of the GUI design to look and feel guides for operating systems, guides for particular language GUI’s, company standards and guidelines, international standards and guidelines (such as the ISO standards), and similar programs (if applicable).

These comparisons should reveal any further deficits in the GUI design that were not discovered in the previous tests, and also helps guide the engineers directly into the solution as the alternative is already laid out for them.


In conclusion the graphical user interface should not be the final frontier for the first year student, rather a vital part of program functionality that needs to be addressed as the program proceeds in its development cycle.

Also it should not be seen as an impossible, Herculean type undertaking due to the extensive amount of tutorials, tools, libraries and books on the subject, covering Java as well as general concepts, examples being listed in the bibliography. This wealth of resources gives an extensive base upon which the most important elements can be drawn from in order to place them with the relevant software development concepts in university courses.

Education and testing on understanding about Graphical User Interfaces needs to be conducted side by side with program development, as they are not independent tasks in building a software application, but an integrated one. A greater understanding on one topic enhances the other.

Finally by enhancing the focus on this topic the quality of software being produced will be raised as a whole, bringing with it an enhanced professional image and approachability for the Software Engineering profession.

1,857 words

Bibliography

Bennett, McRobb, Farmer 2006, ‘Human- Computer Interaction’, Object-Orientated Systems Analysis and Design Using UML, McGraw Hill, Berkshire, pp. 440 – 462

http://www.jvider.com/ - JVider Homepage

Marinilli, M 2006, Professional Java User Interfaces, Wiley & Sons, Indianapolis


http://java.sun.com/j2se/1.5.0/docs/index.html - Java JDK 5.0 Documentation Homepage (Java Development Kit)

Personal tools