Mike+and+Casey

There are many reasons why we must spend a large portion of time and effort designing our interfaces. User interfaces should be designed in such a way that they are easy to use, are robust, and are efficient. In the long run spending more time and effort designing interfaces will save the organization money and also will benefit the end user. Designers can accomplish this by following simple guidelines and techniques. Poorly designed interfaces can cost organizations a lot of money. If there are faults in an interface, the cost to fix the fault can be enormous, averaging $2800 per 1000 lines of code. For this reason, it is very important for interface designers to spend extra time, and effort on their interfaces. A well designed interface holds many benefits for the end user. First, end users can do tasks faster and more efficiently, which could make their business more profitable. Most well designed interfaces can be used by novice users with little or no training (3). These interfaces are very easy to use, and typically have very good help and documentation. Another benefit is that users’ productivity can increase.
 * Overview**

Below is a rubric describing 5 Critical Principles to consider when critiquing and building user interface designs. In priority from most important to least important, they are: Consistency, Help and Documentation, Navigation, Error Prevention and Handling, and Component Grouping. The rubric can be used to score a particular interface into 4 different categories according to how well it exhibits the specific Critical Principle. The best category displays a score between17-20 and the worst category shows a score from 0-8.


 * Five - Seven Critical Principles to Consider In User Interface Design and Rubric **

** Grouping ** || Score:8-10 || Score: 5-8 || Score: 2-5 || Score: 0-2 ||
 * ** Critical Principle ** || ** Best Scoring Category ** || ** Second Highest Scoring Category ** || ** Second Lowest Scoring Category ** || ** Worst Scoring Category ** ||
 * ** -Consistency ** || Score:17-20 || Score: 14-16 || Score: 9-13 || Score: 0-8 ||
 * || The application is internally, externally, and real-world consistent. || The interface is consistent in 2 of the 3 types (real-world, internal, external) || The interface is somewhat consistent in 2 of the 3 types. || The interface has issues with 2 or 3 of the types of consistency. ||
 * ** Help and Documentation ** || Score:17-20 || Score: 14-16 || Score: 9-13 || Score: 0-8 ||
 * || Help and documentation is available for all parts of the application || Help is available for most parts of the application || Some help is available || There is very little or no help available ||
 * ** Navigation ** || Score:17-20 || Score: 14-16 || Score: 9-13 || Score: 0-8 ||
 * || The application is very easy to navigate and doesn’t confuse the user || Most parts of the application are easy to navigate || The application is not very easy to navigate || The application is very hard to navigate and often leaves the user confused. ||
 * ** Error Prevention and Handling ** || Score:13-15 || Score: 8-13 || Score: 4-8 || Score: 0-4 ||
 * || Errors are handled appropriately. Gives good feedback to the user on how the error happened. || Errors are handled appropriately. Gives nominal feedback to the user on how the error happened. || Most errors are handled appropriately. Nominal feedback is given to the user. || Errors aren’t handled majorly disrupts the use of the program (e.g. program crashes) ||
 * ** Component **
 * || Components are grouped very nicely and are easy to navigate between them || Most components are grouped nicely and are fairly easy to navigate between them. || Components aren’t grouped very nicely and it is hard to navigate. || Components aren’t grouped at all and it is very hard to navigate. ||

Consistency in user interfaces is very important (1). Whether it is internal, external, or real-world consistent, consistency plays a huge role in interface design. Interfaces should have consistent layouts, coloring, button locations, and also use consistent wording in messages and labels (1). Building consistent user interfaces helps users build a mental model of the way it works (1). MSUM’s website doesn’t have consistent menus.
 * Consistency**

Cisco VPN Client – This program is not externally consistent in the way that there is no file menu bar. First time users can become very confused.

Help and documentation are also very important to consider when designing and interface. This is directly related to how consistent the interface is (1). If the interface is very consistent, help doesn’t need to be created for multiple different parts of the interface. Help and documentation should be made available for every part of the application. A user that has never used the application before should be able to learn how to use it from the help. WinSCP doesn’t contain any help within their program. If you click on “About” you can find more information about the version number and copyright information. - Cisco doesn’t supply any help or documentation within their VPN User interfaces must be robust and handle errors appropriately. Designers must plan for users to make mistakes (1). If bad input is entered into an application, there should be an error message explaining why the input is wrong. Also, the application should never unexpectedly quit because of bad input; it should be able to handle any input.
 * Help and documentation**
 * Error prevention and handling **

Microsoft Windows will crash leaving a blue screen with a stop code. Although this is sometimes a good way to handle an error, the blue screens can be caused by something as simple as an outdated driver. The blue screens typically leave little or no information about what caused the system failure.

WinSCP – The program abnormally terminates when you don’t add a username and password. User interfaces should be very easy to navigate. Users shouldn’t get confused or have to guess how to use the interface. It should be fairly straightforward to use. If interfaces are hard to navigate, users will become frustrated (1). Appropriate focus should be set to reduce the strain on the user. The application should be built in a way that the users will immediately be familiar with it (1). When Microsoft office introduced the ribbon interface many users had difficulty navigating. I feel that this change was good because the components are grouped nicely. Although Windows Media Center has a very simple interface, we find it hard to navigate.
 * Navigation**

** Component Grouping ** Related components should be grouped in a way that they are visually appealing and efficient (1). If components aren’t grouped nicely, the user can get very confused and frustrated. Components in the putty interface are very cluttered. In help scribble, the components are very cluttered. Although most of them will be utilized by advanced users, all of the components make the interface overwhelming for new users. 1.) [] 2.) [] 3.) []
 * References**

** New Developments in UI Design **

The information age has started a boom of technology that continues to compound upon itself. The introduction of the personal computer started the crack in the damn of new potential for technology. On the foundation of the computer, the Internet brought a wrecking ball unleashing even more seemingly endless possibilities. With the flood gates now open and the waters of the information era picking up speed, all technologies related can’t help but be swept up into this momentum of great change. This even includes the way users interact with the technologies, how the users “interface” these existing potentials. With the need for faster and more perfect computer hardware, comes the need for faster and more intuitive user interfaces (UI’s). If one interface is superior to another, the tides will carry the superior UI to new levels while sinking the obsolete amidst the bottom feeders.

Because of this technology flood, UI’s are being designed with a much greater effort to be the best, especially more so than in the past. New ideas and approaches to making the new technologies more interactive, more easily are boldly emerging with very shiny bells and exceptionally pretty sounding whistles. However, amidst the newest paint jobs lies critical principles that can determine the longstanding success of a particular interface or its nearly immediate down fall. Five of these principles are described in the rubric displayed earlier in this article. They consist of utilizing the elements of Consistency, Help and Documentation, Navigation, Error Prevention and Handling, and Component Grouping. For the purposes of this composition they have been relatively ranked from the most important to the least, respectively to the order in which they were mentioned. The following describes each of these five critical principles in greater detail while applying them to current existing user interface designs. For ease of understanding, the format for each interface investigation will be elaborated within a table where each table is a different interface and each row consists of a critical principle describing how well that interface implements that particular principle. The user interfaces to be examined will be TagGalaxy.de, Prezi.com, and notebook.Zoho.com. Microsoft Word will also be investigated by comparing its previous versions with its most recent versions. The Netbeans IDE user interface will then conclude the investigation and elaboration of each UI for this particular writing. To begin, let us observe TagGalaxy.de.

The application is internally, externally, and real-world consistent. || This UI is mostly click and action. Where a user may type, they are clearly prompted to do so. This interface is very different in some aspects and very consistent in others. The display is unique and new, where as the associations are consistent to real world metaphors. A solar system as displayed above has relating planets “organized” together. This is also true of the tag word “blue” that I entered. Blue could also be related to “green” and “nature” depicted above by other planets. For this consistency, although a lot of mouse actions are performed the way one would expect, it is some what intuitive and thus a score of 15 out of 20 will be presented. || 15/20 || Help and documentation is available for all parts of the application || This is the only help menu I could find. Although this is simple and clear, it is short. 10 out of 20 points will be awarded || 10/20 || The application is very easy to navigate and doesn’t confuse the user || As seen in the displayed in the consistency row, this applications is pretty simple with nested sub solar systems after each click of a planet. It is easy to map in a users mind, and does display a bread crumb path that historically displays where a user has been in the lower left hand corner (see photo). Because the navigational is simple and not confusing, 17 out of 20 points will be awarded. || 17/20 || Errors are handled appropriately. Gives good feedback to the user on how the error happened. || As far as my investigation could conclude, I couldn’t instigate any errors. Thus a 15 out of 15 score is given. Cheers || 15/15 || ** Grouping: ** Components are grouped very nicely and are easy to navigate between them || Yes. The solar system metaphor, again, nicely groups the components and nests them in a logical manner. Also once reaching the bottom level, a sphere “groups” the pictures associated to the tag search. Nine out of 10 scored. || 9/10 || 66/85 ||
 * ** TagGalaxy.de ** ||
 * ** Critical Principle ** || ** Exploration of UI and Critical Principle ** || ** Score for Critical Principle ** ||
 * ** Consistency: **
 * ** Help and Documentation: **
 * ** Navigation: **
 * ** Error Prevention and Handling: **
 * ** Component **
 * ^  ||^   || Total =

** Grouping ** || Component grouping is well done. The main menu is grouped at the top, the main controls are in the upper left hand corner and a zoom in at the right. Consistent and clear use of grouping. 10 points. || 10/10 || 76/85 ||
 * ** Prezi.com ** ||
 * ** Critical Principle ** || ** Exploration of UI and Critical Principle ** || ** Score for Critical Principle ** ||
 * ** Consistency ** || [[image:controls.JPG width="800" height="365"]]Prezi is very different from other UI interfaces. It consistes of a circular structor for controls. It is similar to other controls in image based programs in the functions that it can perform, but it is also different in the way these functions are performed. Because of these differences, a 14 out of 20 is granted. || 14/20 ||
 * ** Help and Documentation ** || [[image:PRhelp.JPG]] Help and documentation is readily available in this UI. When a user first enters the editing screen, a video displays a quick tutorial. Very helpful this is, would say Yoda. There is also a help button on the top of the screen for use when the video is closed. 20 out of 20 || 20/20 ||
 * ** Navigation ** || Navigation is straight forward. A user ether zooms in or zooms out, never leaving the “page.” Also, the zoom in or out is located easily visible on the right side of the screen. 17 out of 20 || 17/20 ||
 * ** Error Prevention and Handling ** || Again, it was difficult to culminate an error. This give prezi a 15/15. || 15/15 ||
 * ** Component **
 * ^  ||^   || Total =

Consistency is very well visible within this application. The interface represents a digital notebook with tabs, text tools, new pages, and common text editors familiar to any experience computer user. Use of such terms and very commonly used metaphors and idioms make this interface extremely consistent to both internal and external standards. 20 out of 20 || /20 || Navigation is superb with a top tab displaying what notebook is open and side tabs showing what page is open. Great and simple way to visually mark navigation. 20 points || 20/20 || ** Grouping ** || Component grouping is excellently and appropriately displayed on the left side of the interface. Adding media such as audio, video and text is grouped together and yet separated from adding, say, a writer page. || 10/10 || 84/85 ||
 * ** Zoho.com ** ||
 * ** Critical Principle ** || ** Exploration of UI and Critical Principle ** || ** Score for Critical Principle ** ||
 * ** Consistency ** || [[image:Zconsistency.JPG width="800" height="350"]]
 * ** Help and Documentation ** || [[image:Zhelp.JPG]] Help is readily available at the top of the screen as well as a search bar. 19/20 || 19/20 ||
 * ** Navigation ** || [[image:Znavigation.JPG width="800" height="129"]]
 * ** Error Prevention and Handling ** || Errors were hard to come by. Well programmed. || 15/15 ||
 * ** Component **
 * ^  ||^   || Total =

** New Developments in UI Design ** Very consistent to the operating system standards with the file, edit, view menu bar items. Save disk image is consistent with other systems and with real world metaphors. Other images that further show the excellent use of consistency are the open file image and print icon. 20/20 || 20/20 || ** Grouping ** || The grouping displays competent examples, not quite as well as zoho.com, but never the less, basic function that are related, such as opening a new file and opening a folder are grouped together. 8/10 || 8/10 || 80/85 ||
 * ** Microsoft Word 2003 ** ||
 * ** Critical Principle ** || ** Exploration of UI and Critical Principle ** || ** Score for Critical Principle ** ||
 * ** Consistency ** || [[image:W1consistent.JPG]]
 * ** Help and Documentation ** || [[image:W1help.JPG]] Great options for help with a search bar and also a help menu item. Wonderful || 20/20 ||
 * ** Navigation ** || [[image:W1nav.JPG]]Good use of navigation using the file open, browse options and also the recently opened files at the bottom of the file tier. An ok use of navigation. 18/20 || 18/20 ||
 * ** Error Prevention and Handling ** || [[image:W1error.JPG]] Great error prevention and handling notifying the user of possibly unwanted changes. || 14/15 ||
 * ** Component **
 * ^  ||^   || Total =

** Grouping ** || As mentioned in the Navigation section, Component grouping is fantastic. The parent tabs describes the general function of each of the children elements underneath on the ribbon. Great component grouping. || 10/10 || 68/85 ||
 * ** Microsoft Word 2010 ** ||
 * ** Critical Principle ** || ** Exploration of UI and Critical Principle ** || ** Score for Critical Principle ** ||
 * ** Consistency ** || [[image:WOhelp.JPG]]Consistency has changes since Word 2003, but there are still similar enough markings to help orient a user. One of the most drastic changes was the introduction of the ribbon interface. Although, I personally find this more beneficial overall, it brought a small learning curve with it by changing from the usual menu bar drop downs. Overall, there are many similar attributes of consistency as mentioned in Word 2003, but because of the ribbon change, a score of 17 out of 20 will be awarded. || 17/20 ||
 * ** Help and Documentation ** || [[image:WOhelp2.JPG]]Help is poor in Word 2010. A small help circle replaces the help search bar that was much more visible in 2003. Also the help takes a user to an online help. This eliminates a lot of helpfulness from users who may not have an internet connection. Poor help system. 5/20 || 5/20 ||
 * ** Navigation ** || [[image:WOnav.JPG]] Navigation is great. A ribbon is more icon intuitive with the overall tab above the ribbon telling the user what category they are in. Great Navigation. || 20/20 ||
 * ** Error Prevention and Handling ** || Error prevention is much the same as in Word 2003. Not many differences. 15/15 || 15/15 ||
 * ** Component **
 * ^  ||^   || Total =

Wonderful error prevention and handling. A dialog box and two error messages notifying me of an error here. || 15/15 || ** Grouping ** || Great Grouping as sceen with palettes and properties! || 10/10 || 85/85 ||
 * ** Netbeans IDE ** ||
 * ** Critical Principle ** || ** Exploration of UI and Critical Principle ** || ** Score for Critical Principle ** ||
 * ** Consistency ** || [[image:NBconsitency.JPG]]Good consistancey as related to external applications. Good use of descriptive icons as well || 20/20 ||
 * ** Help and Documentation ** || A standard set of help with the help menu item. Also Help is available through intelesence. Very helpful! || 20/20 ||
 * ** Navigation ** || [[image:NBnav.JPG]]Great bread crumb navigation! || 20/20 ||
 * ** Error Prevention and Handling ** || [[image:NBerror.JPG width="800" height="251"]]
 * ** Component **
 * ^  ||^   || Total =