Hyper Mesh Code analyzer ABSTRACT Hyper Mesh Code Analyzer (HMCA) is a text based programming environment, designed for programmers to write their source code in a more organized and manageable fashion. To examine and evaluate issues of HMCA user interface, I have conducted a heuristic user interface evaluation. During the heuristic evaluation of the software interface, a small group of usability experts (e.g. designers, programmers, students, professors) was asked to look for problems in the interface by judging how far it complies with a small set of usability guidelines. The result of this evaluation has led me into the following conclusions: Visibility of system status needs more improvement The system is not self-explanatory and must be equipped with a useful manual or on-line help The system can not cater to inexperienced users Error handling capabilities of the system must be more carefully designed More flexible and natural way of doing some operations is required Keywords Hyper Mesh Code Analyzer, source code, text editor, hyper text, Anchor, External Link, Comment, Variable definition, Object, function body, function definition, and class definition.. INTRODUCTION As a software programmer have you ever been asked to review someone else s code and perform an enhancement in a project based on a pre written source code? If you had such an experience, you had probably found this much harder than writing the code from the beginning. My major goal was to build a software tool to help programmers to write their code in a more manageable and Sima Soudian Department Of Electrical and Computer Engineering University of British Columbia 2111 Lower Mall Vancouver, BC V6T 1Z4 +1 604 827 4059 simas@ece.ubc.ca readable way and to reorganize their previously written code by cleaning it up from extra information. So instead of putting all information as a big chunk of code in one source file, you can simply decompose its components and put each part in a separate file and make a link between them when it is appropriate. Figure 1: Main Screen My methodology was to build the system and perform a heuristic evaluation and gather feedback from users. Practical experiences have shown that a relatively small number of evaluators can detect a significant amount of usability problems. My intention of writing this paper is to describe my experiences of developing this software and feedback that I have got from the user subjects through heuristic evaluation. I didn t perform any statistical or numerical data analysis of surveys. Hyper Mesh Code Analyzer This system combines some functionality that has been provided in text editors with the capability of making relationships between different pieces of texts which in this context is meant to be source codes. In this section of the paper I provided a brief overview of the system s features and then discussed some of the issues resulted from my heuristic evaluation. System Overview The design of the system was focused on providing a text based environment exposing some of the text editor s
formatting features accompanied with a new capability of defining relationships between separate pieces of texts. The later feature is the core concept of HMCA and distinct this type. Each link type has a special color (e.g. Commented texts have green color). If the colorized texts overlap, a different color rather than any of the 6 predefined colors in the color pallet would specify the overlapped section. The overlapped section of the code represents multi-links associated with it. If the user clicks on the overlapped part, the system asks the user to select a link type amongst all link types that could be associated with the multi-link text. When the user loads a file which already has some linking information associated with it in the database, it won t get colorized until the user selects the modes from the color pallet. The user can also be in more than one mode by pressing multiple mode buttons at the same time. To switch between modes the code must be first reset by pressing the reset button and then a new mode can be selected. Figure 2: Comment Screen application from other text editors and programming environments. The user starts from the main screen as shown in Figure 1. He can either open a file or create a new file by typing in the screen and save the file. The initial setting of text color is black that is not changeable by the user. This restriction is necessary to prevent conflicting between a regular text and a sensitive colorized hyper text. The user can simultaneously open up to 7 windows and work on them at the same time. Toolbar push buttons provide the user with all system s functionality. These buttons has been equipped with a tool tip text, which helps the user to remember the function of each button. The heart of the system is linking process. Link objects can be simply an anchor which links pieces of code in the same source file, or External links that represent relationships between components in different modules. These components consist of comments, variable definitions, function definitions, function body, and class definition. Before making any relationship, the user must specify an appropriate mode and select a piece of code from the current window. Defining a comment is simply done by pressing the Define Comment button from the toolbar on top of the screen. This action leads the user into another screen as shown in Figure 2. In this window the user can type a message or record a voice message and save it as a.wav file. To define other types of links rather than comment, the user has to select an appropriate mode from the small color pallet on the top left side of the main screen. Selecting the mode for comment definition is not an obligation because the system would do this automatically, but for the other types of links it is a mandatory step of link definition process. After the mode has been specified, to create the link, External Link button from the toolbar must be pressed. Windows shown in Figure 3 pop ups and asks for proper information that are required to define the link. Once a link has been defined the highlighted text in the original window is colorized to reflect the specified link Figure 3: External Link Screen Heuristic Evaluation Heuristic Evaluation is a discount usability engineering method for quick, cheap, and easy evaluation of user interface design. During a heuristic evaluation of a software interface, a small group of usability experts (e.g. designers, programmers, students, professors) are asked to look for problems in an interface by judging how far it complies with a small set of usability guidelines. Usually the experts are trusted to decide which guideline applies and whether it makes sense in a particular context. Practical experience has shown that a relatively small number of evaluators can detect a significant amount of the usability problems. This is due to the fact that different people find different problems and that even inexperienced evaluators can detect problems that their experienced colleagues overlook. A list of 10 usability heuristics are grouped according to usability guidelines that were derived from an analysis of 249 usability problems by (Nielson, 1994).
1. Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. 2. Match between system and the real world The system should speak the user s language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. 3. User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. 4. Consistency and Standards Users should not wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. 5. Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. 6. Recognition rather than recall Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. 7. Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. 8. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. 9. Help users recognise, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. 10. Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. Lessons Learned The lessons that I have learned from the usability inspection through heuristic evaluation are summarized bellow. 1. Visibility of the system status One of the main problems with the system is that it is not clear what the current mode or modes of the system are. When the user selects a mode, he clicks the mode button and nothing more happens to visualize and expose this action in the screen. One good solution for this problem is to make the button remain pressed once clicked. This makes difference between the selected mode button/buttons and those are not selected. In this way the user can be aware of current modes. If the user clicks on a pressed button the system removes the specified mode from its current status and the button becomes unpressed. This would also eliminate the significance of using reset button. 2. Match between system and the real world The way that the system creates links between different components is not very natural. Users hardly remember to set the mode or highlight the text before pressing the External link button. Their expectation of this button is to initiate the linking process rather than preparing the text by choosing the mode and highlighting the text in advance. The natural mental model for this action is to press the External link button and follow a wizard which lets the user pickup the appropriate components and connect them by arrows and lines, the same way Microsoft Access creates relationship between tables in a relational database. 3. User control and freedom One common mistake that basically is caused by unclear mode status of the system is to make a wrong link type. The user intends to make a link between a function call in one module and the function body in another module but the current mode of the system is Variable definition instead of function body definition. This would lead into a wrong linking. Unfortunately the system doesn t provide any facility to undo this action. 4. Consistency and standards I found that users who are specifically familiar with Windows platform don t have any problem with following the conventions of some parts of the system, like open file, save, new and exit. These buttons are similar to those of other windows based standard applications. One of the problems that have been found in terms of consistency of
the operations, is two different ways of making a comment link and other types of links. There was a question for most of the users that why these two actions has been separated and should be done in two distinct ways. One of the reasons for this separation was the difference of comment with other links in terms of recording a voice message. But this problem could be resolved by providing a common way of linking for all types of links including comment and adding an extra functionality in the form of a button for comment link type to record a voice message. This button could be disabled for other types of link. 5. Error prevention The system is not very strong in terms of capturing all semantic errors. In some cases it doesn t prevent the user of doing a wrong action like making a link without selecting the mode. 6. Recognition rather than recall Although the system is not very complicated but users can not easily remember how to work with it properly. The procedure of creating a link, which consists of 4 steps, is very hard to memorize. This problem arises from the unnatural way of doing this action. 7. Flexibility and efficiency of use System doesn t support the novice users. They feel frustrated after working with the system and the concepts of Anchor, External link and Comment are some vague notions which doesn t make sense to them in compare to other familiar concepts which they had seen before. 8. Aesthetic and minimalist design The External Link screen has two text boxes labeled with From and To which are supposed to be used to specify the start and end point of the linked text. However the user never fills out these fields directly but should first find the appropriate source file by clicking the browse button, select the appropriate text and press OK. This would automatically fills those two boxes so their being enabled and visible on the screen is not necessary and confuses the user. 9. Help users recognize, diagnose and recover from errors As it was mentioned before, the error capturing and messaging is not very strong in this application. Future Work At the end of the heuristic evaluation, I have prepared a list of things that I like to change, improve, or add to the HMCA. The most important issues listed are: Improvement in system visibility specially with mode states of the system More flexible and natural way of linking Adding the capabilities of redoing and undoing operations Strengthen the exception handling and error messaging capabilities of the system to make the system interact better with the user Equipping the application with user manual and possibly on-line help Removing the extra and irrelevant information from dialogues Conclusion In summary, the idea of Hyper Mesh Code Analyzer is very attractive and interesting to computer specialists and those who has been working as a programmer and experienced the problems related to wick communication and management. This system offers a new approach to communication that is more useful than traditional paper based documentation and can be also expanded to cover more functionality and become a complete development environment that covers whole life cycle from the requirement specification to coding and compiling. ACKNOWLEDGEMENTS I would like to thank Dr. Sidney Fels for his help on the basic idea of the project and also for his useful hints and comments on improving the work. REFERENCES 1. Nielsen, J. (1994). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods. John Wiley & Sons, New York, NY. 10. Help and documentation The application is not self-explanatory and there is no online help available for the system at this moment. By considering the fact that users can not work with the system without any help or user manual, it is necessary to provide them with help and proper documentation.