Interactive User Interface Design Computer Science Essay

Published: Last Edited:

This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.

The rapidly changes of technology most of the traditional business management had transform to modern business whereby the transaction is carry out through computer system and Internet. For example the tuition centre management system is to keep track their management activities through computer system. Transformation of business model able to save cost on decrease amount of employee to employ for carry out the daily operation activities, increase company's profit with the efficiency of system performance, without time consuming the decision can be make and paperless not only help on organization operation it also help on prevent the global warming.

User interface play an important role on the system, with the intelligence and interactive design will help management system to increased employee's productivity. In another hand, with the poor design of interface will decreased employee's productivity. Besides that, proper arrangement of the interface design able to collect important information and data.

As we known tuition centre management system is use by different level of user and their background also different thus, know the user behaviour, working environment and management structure is needed. Because users are the one who using the system so developer should consider user's abilities. Business process or business management also an issue needed to be considered by developer because to make sure the system is match with the business flows.

The impossible mission for developer is developed a system that closely match with user's requirement and their behaviour, because structure of coding is different from user needs. User only touch on the surface without go to deep into it but developer have to go through the coding logic and they tried to create a system that match as much as to the user without affect the data processing.

Testing is require after the development is done, basically testing have a standard way to evaluate such as the usability testing, test the user experience, system layout, system performance and so on. The following topic will descript more on the technical using when develop an interactive user interface, issue that need to concern, and principal that might help on development an interactive user interface.

What is interactive user interface design

Interaction design mean by Sharp, Rogers & Preece (2007, p. 8) is "designing interactive product to support the way people communicate through computer system or Internet and interact in their life and working lives". In another way, creating an interaction design is focus on the user experiences and the way users communicate, work, and interact with computer system.

Interaction design mostly concern on the user experience because user is the people who will interact, communicate and work through the system. Besides that, interaction design mainly focus on practice and research for instance how to design the user experiences whereby it is more on techniques, methods and frameworks to design the interactive user interface. The following illustrate about disciplines fields on interaction design. interaction_design.gif

Disciplines fields on interactive design. (Truman, 2010)

Interaction design interpretation as design discipline(user interface engineering, information architecture, and usability engineering) that focus on digital design material which software, electronics and telecommunications commented by (Lowgren, 2008). The technique of design disciplines are exploring the possibilities of the future situation, design base on the situation and come out with a better solution or design, instrument and technical consideration, concern on task, user, problems, goal and instruction when design, and expressing the potential ideas in tangible forms or sketching.

Human-Computer Interface (HCI) has concern on design, evaluation and implementation of interactive computer systems for human use and with the study of major phenomena surrounding them (Sharp, Roger & Preece, 2007). Industrial design is focus on instrumental and technical as well as aesthetic and ethical qualities throughout the design process (Lowgren, 2008).

Communication design is focus on user's act, react and how they communication and interact with the system. Human factor will descript on how user's culture, living style, environment and behaviour. Eight of the factor and design integrated with interactive user interface. An interactive design not necessary only involved on the user, developer or designer also play important role on interactive design. "The presence or absence of good interaction design can make or break a company" noted by Sharp, Rogers & Preece (2007, p. 13). In another way, without good interactive design might harm an organization but with the good interaction design will help the company earn profit.

Usability of interactive interface design

A meaning of usability to developer and user is differed whereby developer is focus on the platform, language, design style, tools that used and follow the Microsoft windows style but user mainly focus on how user friendly the system is, attractive graphic or interface and easy to learn. As a competitor nowadays, product must be more usability then others. Usability allows more users interact on the system, save user time to perform their daily task, and different system also able to interact with each other. The following topic will explain more on the factors of usability, benefit and issue of usability.

Factors of usability

Usability factor is focus user's experience, because users are the one who used the system. Usability factor for developer to define the user's experiences went using system but developer is impossible to design high scored on system. The below six usability factors are noted by Soren Lauesen,(Lauesen,2005):

Fit for client or staff used; do the system functions match the user need? Basically it focuses on the system functionality where user needed. For example add new, edit existing delete, search are the basic functionality on a system and for tuition centre management system transaction, report, arrangement schedule functions is needed.

Ease of learning by the staff and client; how easy the system performs and learns by different groups of people? With the proper arrangement might help user easy to learn and understand the next steps they should go for instance group the related information together or categorize those related function together. On tuition centre management system add new function should including with add employee, add teacher and student on the same pages.

System performs task efficiency; how effectiveness and efficiency the system can be perform for the frequent user's task? With the few clicks done the transaction procedure or with few steps the task easy to be done. For example search student name then display all the transaction details after that enter the amount paid, pressing on pay button and transaction done.

Memorable by staff or client; how does the system able to let user have impression when using? The attractive and simple design are the most easy to remember by the staff or client. Icon that used on interface is simple, attractive, meaningful, and known by everyone, arrangement of interface as well can help user easy to memorize.

Subjective satisfaction by staff or client; how user satisfaction with the system? This is focus on user's opinion to the system. For instance how system able to help staff on reduce their job task and user friendly.

Understandable by client or staff; how the system help user to easy understand the system function. Usually this factor is base on user's understanding with the system, for instance the error message, steps, system failure and the sequences of the system.

Benefit of usability

Usability user interface brings advantages to an organization and system performance. The below list of benefit is commented by Lauesen,(Lauesen,2005):

Speed of learning by staff and client; with the usability interface help staff easy to learn, speedup the learning progress, and they able to handle without training. For example the interface design simple, meaningful icon, consistent design and sequence arrangement on the steps of performing the task on tuition centre management interface can help clerk learn faster on how to use the system.

Speedup staff's daily task; traditional work environment staff needed drop down every single records and produces as black and white, but with management system staff able to skip those paper work by just enter raw data, then record will auto generate and store on database therefore it speedup the employee's daily tasks.

Fewer errors occur on system; mistake will make by everyone especially non-IT user because they might enter mismatch data or accidentally deleted the records. Thus, usability program able to reduce error occur. For example provided staff chosen better then let them enter the content.

Motivated and reduce pressure staffs; easy to used might reduce user's pressure because less error make and they confident to performing tasks. Usability system will increase user confidentiality and motivation on doing their job, for instance they won't refuse to use system to perform their tasks.

Allow more staffs or clients involved on the system; system able to allow multiuser access for instance few clerks accessed at the same time performs their task and event different department also able to access.

Conduct system to world wide area; through Internet connections system is able connect to different branch and communicate to each other. This mainly talking about saving transportation cost and transaction cost. For example the branch of tuition centre able to communicate to each other, data also shared.

Let customer hands off; customer can tried by themselves to gain the user experiences. Time for data entry reduced because customers do it by themselves. For example registration can be done through tuition centre web site.

The only issue on usability is costly; development cost on user friendly system is high, because software house added higher bill for mock-ups and usability tests. The small tuition centre might not affordable to purchase a system to carry out their management task.

Users experience

Above interaction design topic had clearly defined the interaction designs. How the system behaves interact with user in the real world will be descript on the following. A design for user experiences consider about the user feel about the system and pleasure, satisfy when used, looking on it, impression of the system and sequence of module.

Developers not only needed to imagine about the user experience and possibilities problems occur, they also require to acting as user to gain more user experiences. To success develop a tuition centre management system should do an analysis through the users category such as the age between, gender, and knowledge background. Because by the following case study, "Self-observation collective an exemplar for design research?" created by D.P. Dash. He has noted how to get more accurate user experience result by participate on the user testing process and act as the user. With the way developer able to know more about how user experience. On this case proved that accurate result been made by self-observation.

User cognition and behaviour

Knowledge, thinking, memory, learning, specking, reading, writing, seeing are user's cognition. Cognition basically is talking about the user abilities on doing the daily activities of some specific tasks for instance think about the reason or decision making. The following specific terms of cognition is commented by Sharp, Rogers, & Preece.(Sharp, Rogers, & Preece, 2007).

Get client's or staff's attention; enable us to concern on information that is relevant to what system doing. Goals and information presentation was the consideration area on this process. We should clearly know our goals, for instance expectation on the screen displayed and attractive content to get the attention. Besides that, influences easy or difficult to attend appropriate information such as a pieces of document full of words and another is on point form style but both is contain of same information. The example of illustrated on appendix are two sets of same records but with the different arrangement to display. (refer to appendix figure 1.1)

Client's perception; involved with human sense, the way of express the information or meaning affected user understanding. With general known icon to prevent user misunderstand and understanding with the meaning of it. The following illustrate two sets of name list with different representation format, the good represent name list will be set A. (refer to appendix figure 1.2)

Client's memory; abilities of human memories and recalling various kind of knowledge that allow user to take decision or action. Interface design should not contain unknown icon, image, menu or inconsistency placed objects because it cause the user overloaded their memories when carrying out complicated procedures task.

Client's learning skills; how many they can be gain from the system and how system guide client used. Interface is a guide for a user to act appropriate and it is an exploration with good design able to guide user learn complex system on short. For example make a student payment or auto generate the student's payment statement for following month.

Speaking, listening, reading by client; human have a different abilities on speaking, listening and reading therefore in interactive design interface must have a suitable length, font size between the text and colour as well. An interactive interface must be readable by user and user it's mean. For the speech-base menu, speech length must be standard and prevent hard spoke. The following interface shows the poor design because icons not clearly define the meaning. (refer to appendix figure 1.3)

Planning, decision making, solution, reasoning by client; mostly cover all in above but it included with the thinking of user and consequences that might carrying out a given action.

Behaviour of user included their personal attitude, way they think, life style, culture, gender, habit and age are closely influent a person. Accurate user experience must go through the self participate for developer to gain more accurate logic and management flow when develop an interactive interface.

Models and principle of interactive interface

Mental model, cognitive model, conceptual model and frameworks

Relationship of mental, cognitive, and conceptual model is related closely and sometime meaning of the terms is confusing. The following diagram illustrated the relationship of the three models by Lauesen (Lauesen, 2005 p.129).

mental model.jpg

The following are the description about mental model, cognitive model and conceptual model:-

Mental model basically focus on user's mind or something we can draw and show to others. We unable to read user's mind and even the user also not aware on his own model. If he aware of it also unable to describe it therefore we needed to self observing and try to infer what user mental is.

Cognitive model is observer's explanation of user's mental model. In another way, programmer try to analyse user mind or thinking or needs when they using system to perform their task.

Conceptual model is developer's explanation on the system functions. In short, programmers develop a system match with user's needs. This model actually is combination of cognitive model and mental model when on development process.

A framework is the working space or working environment that interact with human and computer system. With proper analysis of the working space might help programmer develop according to the user's needs in work environment.

Every system had it own differed, characteristic and user requirement therefore we should create a dynamic system without false use to follow developer's mind. For example of the success case is research by Natalie Ebenreuter, 2007; "The dynamic of design". The research have mention about how to create cybernetic framework, dynamic nature of the design process, impact, and better understand, and practices on cybernetic concept.

Principle of user interface

With the guide of creating an interactive interface able to reduce unnecessary module or function add on the system and prevent confuse. The following six-principle are noted by Ambler, Scott W.(Ambler, 2010):-

The design's and system's structure principle; is concern on the interface design such as group or add in the related or similar details or module at the same windows, used simple and understandable words, suitable font size, well arrange the function's sequence, consistency on the layout display, and so on.

The simplicity principle; is concern on function's abilities such as design make user understand and easily perform complex task, provide shortcuts to longer procedures, clear and simple language used, and with meaningful icon used. For example using general known icon to represent the text such as "Tick" can use the icon 14.png .

The data's visibility principle; is concern about appearance of the information, all needed task, options and material for a given task should appear without confusing and redundant. Prevent unnecessary option and material make user confuse and increase their work load.

The client's feedback principle; is concern about the explanation, informed actions, conditions, error occur, interest and mistake that make by user should explain in clearly, concise and ambiguous language familiar to users.

The tolerance principle; is concern on two side which programmer and business, user and programmer. Reducing development mistake and misuse cost by undoing and redoing. To preventing errors where provided verification.

The reuse data principle; is designing with reuse internal component, external component and user behaviour to maintain the consistency rather than merely arbitrary consistency because it might help user to easy handle without rethink and remember.

The Heuristic rules published by Shneiderman on 1986 with title "eight golden rules" for dialogue design. On 1990, Jakob Nielsen and Rolf Molich have list similar rules from Shneiderman's eight rules but it has been modify and extended to ten rules and published. A Heuristic rules can be apply on many ways such as guide designer while design process, evaluate, identify user interface problems and help designer to defined usability problems. The following are the ten rules published by Nielsen and Molich:-

Simple and natural dialogue used on the system; to avoid putting irrelevant information, and design according to the logic order and nature. For example payment process on tuition centre management system should attach with print receipt button because that is a nature order process.

Using real world's languages on system; use common language avoid confuse used when using system. Some time designer and user have different understanding on wording because both of them come from different background. Usually designer will use more technical words to represent the words but user might not understand technical words. For instance, "INSERT" and "ADD" is similar meaning but on register a new student, the word "add" will more suitable compare to "insert".

Reduce user's memory load; avoid design interface that needed user to memory from the 1st interface layout until next interface. System should able to reuse the information and reduce user input or using list box/combo box to let user choose rather than let user enter the commands. For example country's name can be use drop down list to let user choose when add new or edit student's profile.

System contains consistency and standard design; the system interface should use same terminology, procedures to develop, and follow the windows conventions. Consistent layout, same set of icons design, same font type and interface structure also an important issue when design an interactive interface.

Feedback from system; system should always informed user the system's status and informed user what is the next steps or what they going to do. This rules can explain on tuition centre management system problems for instance user had completed the payment task but the system couldn't view feedback to user whether the task is completed add on to database or not.

User control on system; user might make mistake frequently or reverse the process therefore the "Exit" or "Cancel" icon or button should clearly stated on every platform. Another example, cancel or exit the system by providing the "Logout" button to let user exit the whole system.

Provided shortcut key or way to client; reduce user input or steps when using system. Through observation on user's experience, developer should develop a complex function to simple and understanding way. For example, automatic calculate the fees should pay by the students and payment only take a few button to done. Another example will be the shortcut keys such as "ctrl+P" skip the process directly go to payment page.

System able to provide meaningful error message; when user enter incorrect input or make a mistake, error message must be display on friendly, precise and constructive way. For example, user enter a redundant record, then error message on message box should mansion on kindly way for instance "The record is exists, please enter a new record." rather than using "Enter wrong data.".

Error prevention; provide verification on user input and use list box to reduce error data entered, and also prevent redundant data input or meaningless data entered. For example when enter a new teacher's record on tuition centre system, should provide validation on the information before save the record to database.

Help and documentation; user need help when facing problems or needed to know how was the system's functions. On Microsoft word or other application has provide help on the menu toolbar to let user know more the possibilities and abilities on the application. Provide user guide or hand book to users who using the tuition centre management system, to give user have a brief idea and know more about the system flows.


After go through the analysis with user, framework and business flow mention on above, we can start develop the virtual windows by following the design procedure and rules to implement interactive interface.

Design procedure

Planning is important before proceed to next state so the following is the steps of procedure on how to make the plan:-

Frequent task perform by staff or client; how frequent the task will perform by the user and imagine the data user wish to see when perform the task. For example when tuition centre having the new intake for every year and the user on the system will prefer have a short cut key or default page to let him/ her speedup their perform.

Data grouping; group the related data into a few virtual windows and outline the usable content of each windows. On tuition system, registration module can be separate to three different parts because group of data is different; however the content might similar but it should clearly separated.

User's preference; the information user wanted to see after accomplish and look on the next task. When search a particular student's details on tuition system user prefer to see not only student's details, they also prefer to view on their parent's information, subject student involve and so on.

Reuse data appear on others windows; the similar data can be reuse and reduce the redundant or similar windows. Staff and teacher's profile can be reuse because the windows details almost the same, the only different is on subject that teacher involved but staff couldn't involve on it.

Add necessary windows on system; if additional task logically related to the windows should extend else data should define on the new windows. For example user click on "PAY" button on the system then new windows should prompt up for search the particular student by their id and the window should display student's fees that need to pay.

Defined others task from the first step until all data supported by the system; continue designing the follow plan step by step to defined all task. For example after design the module registration for new student and then the following module will be design the transaction module such as the payment and subject charges.

Variation will occur on design, tasks and results. Variation on design usually will occur on content of the virtual window and graphical outlining. In another way, the system is match with the user need but the developer might not able to create. Variation task occur when too many steps or kinds of data need user to do. Therefore developer need to simplify the steps of task such as by clicking three buttons to done a transaction. Lastly, variation results occur on the final virtual windows look too complex and messy therefore, plan should redo until the task simplify to be complete. The poor design might be too many steps need user to enter and go through for instance, add a new student's record need take insert a list of record and more than two windows needed to go through.

Design rules

Develop an interactive windows interface by following the designing rules to prevent unnecessary data and information adding or display on. It also helps on decrease cost of development because reuse the related data reduces the unnecessary data including. The rules might not suitable apply on the graphic design because it might cause the confusion on designing a graphic interface. The following rules are implemented by Lauesen (Lauesen, 2005).

Few windows templates on system; number of window templates keep on the small number and try to reuse the related data. By few windows templates it easier to grasp few window. Instance, interface for add a student's and edit student's windows can be reuse because all the records will be the same.

Few windows instances per task; the related data should not separate to two windows because the related data should combine and display on one windows to improve task support.

Data in one window instances only; avoid the data redundant display or edit on the different windows and avoid confusion. Such as teacher's profile cannot edit on other windows form such as reporting module.

Rooted in one thing; the design should including with related record and record from another windows as well. For example, student's fees bill have including with student's details, subject taken and amount needed to pay.

Virtual windows close to final screen size; the screen abilities of every user different so virtual screen should not vastly larger than the physical screen. Design according to the standard physical screen layout example size will be 14" inch or 15" inch for laptop and 17" - 19"inch for desktop.

Necessary overview of data; provide overview data rather than only a part of the data or records. For example teacher's records view on list of information with complete records details.

Things-no action; the window names nouns, persistent data or things to dialog the windows or naming prevent confusion on user and developer as well. Because developer might misunderstand the meaning of the window and assign the different data to the interface. Example "Transaction" and "Payment" somehow the meaning is almost same but every people got a different opinion with both words.

All data accessible; data from the module must be visible and modifiable otherwise task and windows will lack. For instance, add, edit, deleted and search module.

Usability testing

The purpose of conduct usability testing is to test did the system meet user's requirement or not and how user friendly is. Usability testing is a technique for ensure the system perform carry out task in efficiency, effectively, and user satisfaction. (Gaffney, 1999)

Testing method can through questionnaire, interview and user test measures human's performance on specific task. Examples of the user test are the reaction time of response when pressing the key, navigation on a different type of menu and information searching. Questionnaire is to define the satisfaction of users or how the actual feel when using the system.

Usually questionnaire carries out through asking user to rate by number of scales after interact and the result will be analyzed to determine whether the system is effective and efficiency or not. Interview is to observe more on user experience, satisfaction and opinion.(Sharp Rogers & Preece, 2007)

Measurements mainly play on time and numbers of errors, based on Sharp Rogers & Preece.(2007) quantitative performance measures are obtained during testing procedure are time taken to complete a task, timing setting on complete a task, number and type of errors on each task, number error per unit of time, number of navigation provided, numbers of users making errors, and numbers of user success completed the task. Experiment and laboratory evaluation also a testing method can be carrying out.

Plan of usability testing

The testing technique on window-based application and web-based application is slightly different because web-based application can have an automated usability testing tools to quantitative performance measurement. The following are the window-based planning on usability testing:-

Users involved, determine the amount of users involve on the testing, gender and age. Example on tuition centre management system testing the users will be around 10-20 people, 10 female and 10 male, and age between 18-35 years old.

Level of user; background or knowledge on user such as non-IT background user, professional of Information Technology and user that have a basic IT knowledge. For testing the user on tuition system the level of user will be fresh graduate from secondary school or fresh graduate from university or college and also the worker without higher education.

Venue to conduct test; place that conduct the experiment or case study on, the example venue is classroom or public. For testing tuition system, class room will be the suitable venue because involvement is cover only on the class room.

Roles on test; should test on different position of user, different position of user might have a different experience and comment. For example supervisor and clerk opinion might different.

Testing task; implement ten heuristic rules for testing on how user integrated with the system, error occur and system's abilities. Module testing also an important part to test the system is functional or not.

Report; collect a data or opinion from user come out with a chart or figure to analyse the system is success or failure. By calculate the survey or interview result that get from different user to produce an average figure to evaluate value of system.

Critical evaluation on tuition centre management system

The following is critical evaluation on two different tuition centre management system or learning management centre. Interface A is product of Proficient IT Solution and interface B is product of School Management System. Evaluation is based on ten heuristic rules and some of the development rules.

Interface A, main page (Softpedia, 2010):-

Please refer to appendix figure 5a.

Interface B, main page (TechRepublic, 2006):-

Please refer to appendix figure 5b.

Ten heuristic rules:-

Simple and natural dialogue used on the system.

Interface A: Complex interface design with all buttons and irrelevant button put at the same page as well. Report Management, Payment Management and Rate Management should not put in same page to confuse staff.

Interface B: Combination of meaningful icons and label to evaluate the buttons function. The search for employee and teacher's button missing and "Today's Birthday" should be an alert for employee to check.teacherCategory.jpg

Using real world's languages on system.

Interface A: "Category" and "Detail" is confusing staff. On the following interface mean category is mainly on create a new and edit category/ type of user.

Interface B: Label "Look for a student" can be replace with more meaningful and understandable words which "Search a student".

Reduce user's memory load.

Interface A: Tab of the interface is messy up the interface because a lot of irrelevant and relevant function included in. User needed to search around the tab for finding needed function.


Interface B: In student's profile is not included with parent details so staff unable to found parent details about the student.stdInfor.png

System contains consistency and standard design.

Interface A: The next, to last, to beginning, and back buttons appear on top of the header. It might confuse the user who wanted to view previous data.School-Management-System_5.png


Interface B: The unnecessary Print button is provided for print the new classes.

Feedback from system.

Interface A: The record able to view directly on the top without turning to other pages. (Please refer to appendix figure 5c).

Interface B: New records created not able to should on the same window form, it needed to click on chosen icon only will display it.

User control on system. previouse.png

Interface A: staff can reverse back to the task by clicking on the following button.


Interface B: System allowed staff to modify or delete classes. After the editing user is provided with "Close" button to exit following window.

Provided shortcut key or way to client speedup performance.

Interface A: did not provide any shortcut key to user because the system dint mention about the shortcut key can be used.

Interface B: Option on the attendance list is a shortcut way, be right click on the table column and possibilities option such as Present, Late, Sick, Absent and description will appear for staff to set.formClassJournalMenu.PNG

System able to provide meaningful error message.

Interface A: without proper validation checking message.


Interface B: highlight with red colour mandatory fields but did not mention about

Error prevention function.

Interface A: provided validation checking.

Interface B: provided validation checking.

Help and documentation

Interface A: did not provide any documentation or help on the interface.

Interface B: provided online help on the top of toolbar named "HELP".

Case Study: Implication or user of interactive user interface design applied on Prima Didik Tuition Centre Management System.

This topic is discussed about how interactive user interface applied on Prima Didik Tuition Centre Management System. Way to evaluation the interactive interface is by using Heuristics rules.

Simple and natural dialogue used on the system to avoid putting irrelevant information, and design according to the logic order and nature. On the transaction tab below included statement/invoice, make payment, credit payment and auto generate the monthly statement button. All represent on simple way and according with sequences of task. tabGen.JPG

Using real world's languages represent on layout; use common language avoid confuse used when using system. Because technical words user might not understand. Based on above transaction tab screen short, the content is represent by using simple English language like invoice, pay, credit, and statement.

Reduce staff's memory load; avoid design interface that needed user to hardly memory. Provided search function which able to let staff choose the search by student's name or ID numbers, because most of the student or their parent is unable to memorize ID numbers. After search button is press the possible student's name, ID and information will show on the table. Then staff is allowed to select one of the record to edit.

Possibilities record display.

Enter name or ID numbers

Search by ID or namesearch student1.JPG

Tab control will appear on every page.System contains consistency and standard design; Consistent layout, same set of icons design, same font type and interface structure also an important issue when design an interactive interface. The same group of data will group together such as below interface, all is the user and user is divided to three types which student, staff and teacher. Tab is the header of the interface and bottom part will change based on user clicking on which button.

Content changed based on user option.addstd.JPG

Feedback from system; system always informed user system's status and informed user what is the next steps or what they going to do. The arrangement of tab header is based on user experience to create. Why user will be on first tab, because in a year have a few intake for register so the "Add Student" will be on first column. Tooltips also provided when user mouse over the button. toolbar.JPG


User control on system; user might make mistake frequently or reverse the process therefore the "Exit" or "Cancel" icon or button should clearly stated on every platform. Credit button is to deduct the amount of payment that staff accidentally entered wrongly. tabGen.JPG

Choose the date wanted to generate.

And click on "Generate" button.Provided shortcut key or way to client; reduce user input or steps when using system. Every month staff have to create every single invoice/bill to students with auto generate module it able to save up staffs time instant of produce one by one. The following page screen is help user to have a shortcut way to product statement.

All statement will list on the table.autogen.JPG

System able to provide meaningful error message; when user enter incorrect input or make a mistake, error message must be display on friendly, precise and constructive way. For example, with invalid data entered, system able to detect and prompt up a message box "Please enter numbers only.".

Error prevention; provide verification on user input and use list box to reduce error data entered, and also prevent redundant data input or meaningless data entered. Before the user print and confirm the payment the following window will appear to make sure the payment on the layout is correct.

Preview of the receipt.printReceipt.JPG

Help and documentation; Help link or handbook is provided, handbook will be on word file and help will attach in "Setting" tab.

The example cases "Application of Personas in user interface design for educational software" created by Dantin, 2005. On the case also have mention about how to create an interactive interface on education fields. Tuition Centre Management System on Malaysia not that famous and less of developer will focus to develop on it because not so popular require from Malaysia market. But in emergence of technology the tuition centre management system will become famous, because nowadays tuition centre become more and more branches or centre opened. Therefore the interactive interface is an important issue when develop tuition centre management system.

Future trend of interactive user interface design terminology

21th century market is focus on the touch screen technology, virtual technology, and transforms things through Internet let user have better control. With the touch screen technology, interface design is slightly different on the size of the icon and view structure also different. Touch screen needed to concern about user's figure size and user preference when used the technology. Microsoft has build a multi-touch surface table called Microsoft Surface, it look like a table and allow user to integrate with computer task. The following illustrated the product of Microsoft Surface. The ability is providing multi-touch interface stunning perceptive pixels technology and it already available on market now. Microsoft Surface (Davies, 2009)microsoft-surface.jpg

Mobile phone and kitchens also support the multi-touch screen abilities such as iPhone 4 and kitchens that with multi-touch screen. Nowadays, iPhone known by everyone but the kitchen can be control through Bluetooth is the new information for the everyone this product haven't available on market but it will be the future product. The following picture is the multi-touch screen kitchen.miele_mini2.jpgmiele_mini.jpg

A multi-touchscreen kitchen. (Long, 2008)

Another advance technology will be the multi-touch without touching the screen, this technology called Oblong technology; everything is control by the user's specific glove, three-dimensional user interface pad, G-Speak spatial operating environment, and it enables a necessary new kind of work: data-intensive, embodied, real-time, predicted the humans expertise.


Oblong Technology (Fox News, 2008)

The future computers user interface will look like the following diagram, every browsing windows can be squeeze to small size and put beside, the interface is inspired by real-world organization of desktop that allow to create an organize piles, and toss around the screen. The prototype is using BumpTop 3D Desktop; this is product from Mozilla Lab called Aurora.

Aurora future browsing desktop interface. (Garrentt, 2008)

The Sifteo was produce product for gaming and education called tabletop, the physical design is like a small cube, the two cube can be communicate to each other for example mathematic question as below image. This design not only for gaming purpose it also concern on the education fields, with this tabletop platform help children easy to learn. siftables-1.jpg

Tabletop game platform. (Paperless Media, 2010)

The above only 5 examples of the future trend interface design platform still have a lot of example in today's market because the rapidly changes of technology and keep on improve Internet Technology. Therefore the more intelligences interface will appear in future for instance everything that might transform to digital devices and use remote control to control it. All equipment able to link together through Internet than user can get a better integration event not in.


In conclusion, interaction interface is important development a new system because usable system will bring a lot of benefit not only profit, it also reduce the complex task done easily, improve employees productivity, reduce the development cost, meet user requirement, and reuse the data module. The main concern when develop an interactive interface will be the user's interaction, user's experience, user mental model, framework and usability of the system to user. To know more user's action will help designer design more accurate interface that user's requirement, however interface design might not hundred percent match with the user's need but know more about user experience will increase the possibilities of matching user's need.

The following will be the development process how to develop and design an interactive system for user, with the rules and guideline mention above will help designer to focus on the important task should carry out and avoid missing up important module add on. After development will be the testing process there provided guideline on how to carry out the testing progress and get the accurate result to evaluate whether the system is usable or failure. On development process also have provide with few rules to guide the designer when develop a window based interface.

Lastly is the part critical evaluation on two existing learning management system/ tuition centre management system by using the usability rules to evaluate the value of the value of interactive. In the additional, evaluation on case study also applied on the last second chapters. How prima didik tuition centre management system interactive user interface overcome the existing system's limitations. The future we might not know what will happen but the emergence of the advance and intelligence user interface user might prefer more on three dimensional effects and four dimensional as well. In additional, user also focus more on virtual reality, this might be the future interactive user interface.

Fill up the information.