JoshKTasnuvai

= =
 * //Research and Wiki creation done by Josh Kugler & Tasnuva Islam//**

=**I. Overview **= In today’s world, people are more frequently accessing businesses and other organizations through websites or are using a software product created by them. This means that users (consumers) are spending lots of time with interfaces created by businesses and other organizations. Since so many people are spending so much time with these interfaces, isn’t it in the organization’s best interest to devote time and effort to design good interfaces for their users?  When an organization creates an interface they have to focus on a few specific areas: user interface design, usability design, and usability testing (these are all closely related). Without good user interface design, users won't like your product, whether it's a software, hardware, or a website. Without usability design and testing, you'll never know if your design is useful until you receive input from the public. If your user interface is a flop, you will have to spend time, money, and effort fixing interface problems that could have been fixed during the development process, not to mention all the customer service headaches you’ll have to endure.  In the long run, it is definitely beneficial for organizations to devote sufficient resources to create easy to use interfaces for their users.

**Specific reasons for spending time and effort to design a great interface for the user.** __**Savings to the organization:**__ 
 * Greater customer retention
 * Avoid painful customer service headaches/costs and potentially even lawsuits
 * Good design helps reduce both short-term and long-term production costs
 * If interface is good now, it will cost less in the future to make minor improvements
 * Don’t have to pay people to fix everything later on

<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; vertical-align: baseline; white-space: pre-wrap;">__**Benefits for the end user:**__
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Easy to accomplish tasks
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Don’t have to worry about looking up how to do things
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Spend more time being productive
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Using interface is enjoyable, and not stressful

=<span style="background-color: #ffffff; color: #ff0000; font-family: Arial,Helvetica,sans-serif; font-size: 125%; font-style: normal; line-height: normal; margin: 0px; vertical-align: baseline;">**II. 5-7 Critical Principles to consider in user interface design and rubric** = = = =<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Consistency:** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> It is very important to maintain real world, internal and external consistency in the interface. Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent commands should be employed throughout = = = = = =<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Here we can see the buttons are totally mixed up. The "page up" and "page down" keys scroll through a page like you'd expect the arrow keys to do, while the up and down arrow keys scroll one page up, and one page down like you'd expect the page up/down keys to do. This is very uncommon and quite confusing for every user. = = = =<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Here is an application of GIF construction. Here the cut and paste functions are the same as other applications, but for the copy function they are using <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**ALT+E+C+ENTER** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> instead <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;"> **of ALT+E+C.** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Again for the cut function, <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;"> **GIF** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">is using <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;"> **ALT+E+ENTER** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> or <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**ALT+E+C+C+ENTER** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">but the whole world is using <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;"> **ALT+E+T.** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">This violates the efficiency principle of UI design. = = = =<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Focusing user attention:** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">It is very important to catch the user’s attention. The text cursor is a good example of a highly eye-attractive object. Changing its appearance can signal a number of different and useful state changes. = = = =<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">AST Software came up with the name for their In/Out whiteboard application <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-weight: normal; text-decoration: none; vertical-align: baseline;">//who’s Where?// <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Is the individual 'in' or 'out'? Obviously, given the bright green color and the raised appearance of the in button, the individual is 'in'. Obvious, that is, to most people, but not to the application's developers. Actually, the individual is 'out'. = = = =<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">It's a good bet that the users will understand that clicking them (“Save” and “Cancel”) will perform the respective function, but otherwise there is no other indication that they are controls: the cursor does not change when over the labels, and when clicked, there is no visual change to the label to indicate that it has been clicked. = = = = = =<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Efficiency:** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">A well designed interface helps the user to use it quickly and without running into frustrating issues. To do this, the interface might have shortcuts (hot keys, etc.) to speed up accessing functionality as users become familiar with the interface. = = = =<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Under the Windows operating system, the <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Help** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> menu should be the right-most menu title. This does not mean that it should be placed all the way to the right, as shown above. In a relatively small window, the distance is not very significant, but on a maximized window, the menu could be missed. this is not efficient for user. For me, when i first saw the photo, I missed the help menu. After reading the summary I discovered there is, indeed, another menu = = = <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The toolbar icon for the Delete command appears remarkably similar to the Window Close button (in the upper right corner), and is exactly the same as the Cancel icon in the widely-used but frowned-upon Borland-style command buttons <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Familiarity/Metaphor:** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The designer has to design the interface so that it resembles systems already in use. As an example, we are using Google Docs which is very similar to Microsoft Word. The options for bold, text font, and size are all similar. The icons resemble what users would already be familiar with in other text editing applications. <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;">

<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">It is the first such dialog to utilize a VCR metaphor to control a printer. The Stop and Pause buttons, while not defensible, are at least somewhat understandable. But for the rewind button, the user wonders whether it could rewind the paper and erase what was already printed. <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;">

=<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The Macintosh trashcan is a perfectly intuitive metaphor. Suddenly the designer decided to extend this metaphor to include the completely counter-intuitive function of ejecting diskettes: drag an image of the diskette to the trashcan to eject it from the computer. They gave the trashcan magical powers that are completely incompatible with the established metaphorical association of deleting files. This is what Apple’s operating system uses to this day. = = = = = =<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Notifications:** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Everyone needs notifications since users don't know everything about the interface. If someone closes the interface window without saving the file then it should show a message asking you if you want to save the document or not. If it doesn’t do this, then the user will have to redo the work again. That is not a good design implementation and is a reason why it is very important to have notifications. = = = <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">One of the users of an interface was downloading a 400MB file. He accidentally hits the windows close button in cuteFTP and the application shows him a confirmation message. But none of the developers had ever looked at the message. The most insidious aspect of the dialog is that it does not provide a clear way out. There is no “Cancel” button. = = =<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">One of the users received this message when he was using a freeware hex editor A.X.E. He received the message upon accidentally saving (via CTRL-S) a document he had opened but not edited. But this message doesn’t mean anything. There is no cancel button or anything that says “I don’t want this”. Why should I overwrite my work? = = =

=<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Help/Documentation:** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">As I mentioned earlier, users don’’t know everything about an interface even though they may be using it everyday. Interfaces should have help, documentation, tool tips, FAQs, etc. That way, if the user needs help about how to save a document in the interface, then he can use the help option of the save button and then learn how to do this. This is another important principle good user interface design. =

= = <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">This message appears when generating a Word document from an online help project. It's great that the program offers the option of viewing the results, but in this case, it's the only option; the user cannot elect to <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-weight: normal; text-decoration: none; vertical-align: baseline;">//not// <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> view the document. One would have thought that the message shown would have been sufficient indication that the conversion had completed and that the user wouldn’t be forced to view the results. <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">This may be looks like a joke but it isn’t. It supposed give help information and it it does have help information, but there is something added (“idiot”) that the user doesn’t need. For this mistake, the company sent out thousands of letters of apology to its customers. Perhaps someone got fired as well? <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> =<span style="background-color: #ffffff; color: #ff0000; font-family: Arial,Helvetica,sans-serif; font-size: 125%; font-style: normal; line-height: normal; margin: 0px; vertical-align: baseline;"> III. New Developments in UI Design = =<span style="background-color: transparent; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;">**<span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 14pt; font-style: normal; vertical-align: baseline;">Wix.com ** = <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"><span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;"> **Wix.com in one sentence:** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> a fun way to create rich/interactive Flash websites. <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**A bit more:** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Wix offers a new, simple, and enjoyable way to build Flash-based websites. Through it’s intuitive interface, users are able to finally build whatever type of site they can dream of without any knowledge of HTML or CSS. Users can build online stores, photography galleries, or a place to share their favorite songs. A plethora of animations, backgrounds, textures, etc. are available for use, plus the user can upload whatever media they want as well. Plus it’s free! <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;">media type="youtube" key="UAYJVPm8uC8?fs=1" height="385" width="480" <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;"> <span style="background-color: transparent; display: block; font-family: 'Times New Roman'; font-size: medium; line-height: normal; margin: 0px;">
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Consistency** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**28/30** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The site is very consistent with its internal and external design implementation throughout. The general “look and feel” of the interface is kept when navigating in the main site. When in editing mode, the interface is clean and the options/tools all follow the same behavioral rules. This mode also displays good real world consistency. It’s like an artist’s work station with the artwork in the center and the tools arranged around the perimeter. The site’s consistency with colors, dialogs, and icons is well kept and one doesn’t get the feeling that there’s anything strange about the interface; it seems consistent with other websites of its type. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Focusing user attention** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**23/25** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Overall, the site does a great job of making sure you’re looking where you're supposed to be looking. Hovering the mouse over buttons causes either a color change or a size change of the option being hovered upon. These simple changes cause the user’s eyes to focus on the correct part of the interface at all times. The site loses just a couple points for being a bit too cluttered in certain areas, but ultimately <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__wix.com__] <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> is a shining example of how websites should handle focusing the user’s attention. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Efficiency** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**19/20** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The site is very easy to navigate; the main functions are listed at the top of the page (home, create, my account, etc.) and more options are presented once the user clicks on one of those categories. The editing interface is well designed, with tools/options on the perimeter of the screen and the workspace in the center. Hovering over the tools to add something to the page brings up subcategories of that option. For example, hovering over the “Media” tool brings up options to add pictures, video, music, or your own files. The site can be a bit slow, however, depending on your Internet connection speed since it’s all Flash based. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Familiarity/Metaphors** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**7/10** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The site is familiar to other websites. Main options/categories are listed at the top of the page, with more specific options listed when the user selects one of those categories. Familiar buttons are used throughout, such as the red “X” for deleting items. There is nothing strange about this site that users would have a hard time adjusting to. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Notification** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**8/10** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Notifications are only necessary on a few occasions for this site, but they are used well when they are implemented. For example, when in editing mode, if you try to close the window, a dialog box appears ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Help/Documentation** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**5/5** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">There is a full featured help wiki <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__(http://support.wix.com/index.php/Wixpedia)__] <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> that one can search and find help on how to handle any part of the website creation process. Also, a short description appears along with each editing option within the site editor explaining how to use it. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; margin-bottom: 0pt; margin-top: 0pt; text-align: right; text-decoration: none; vertical-align: baseline;">**Score** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**90/100** ||  ||

=Tag Galaxy= <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Tag Galaxy in one sentence:** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">search Flickr.com in 3D.

<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**A bit more:** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Tag Galaxy is a site in which users can <span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> explore Flickr photos via virtual planetary systems. You enter a tag, and the related galaxy appears on screen. Each planet contains the pictures of a certain tag, and when you click on them, the images are placed on a 3D rotating globe.

media type="youtube" key="yG2hny_1GUM?fs=1" height="385" width="480"
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Consistency** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**24/30** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The site displays good internal consistency. Its heavy use of black, grey, and white is kept throughout with the only color appearing when the user searches for pictures. Since this is a unique UI, the site isn’t comparable to many other websites, yet it shows good external consistency in it’s simplicity. Enter a term to search Flickr photos for and a planetary representation will appear of the term you searched for and also of related tags you can select to refine your search. Other picture search interfaces feature the same idea, its just that this particular interface has come up with a whole new way to represent it. While the planets may be real world objects, this aspect doesn’t make sense in terms of real world consistency other than the fact that smaller objects tend to rotate around larger objects. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Focusing user attention** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**23/25** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Tag Galaxy does a good job of focusing the user’s attention. The interface is very simple; there aren’t a whole lot of things to initially distract the user’s attention. The homepage screen is basically a black background and a white field in which to enter your search term (along with a few non-distracting elements). The use of color and motion to display tags related to the user’s search term heightens the site’s focusing of the user’s attention. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Efficiency** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**18/20** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The site is really simple to use, and thus quite efficient. The only real options you have are the following: search for an item, refine your search with tags, view the picture results of that search, view a larger sized version of the picture, and view the Flickr.com page that the picture is from. This keeps everything from getting enjoyable. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Familiarity/Metaphors** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**8/10** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The interface starts off with what the user is already familiar with from using other search interfaces: simply enter a term to search for in the search field. After pressing “GO” is when the UI changes to the unfamiliar on first glance. Yet, it’s intuitive to use and since there aren’t any other options but to click on a “planet”, it doesn’t take long for the user to figure out how the system works. After the first time using Tag Galaxy, users will know how to control it without any problems. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Notification** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**9/10** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">There weren’t any notifications that we could find in the interface except for when a gibberish search term was entered a message was displayed saying there were no pictures found for that term. One other notification appeared when the system couldn’t contact Flickr.com, saying that it couldn’t establish a connection. However, these two cases seemed to be the only time when a notification would be called for in this type of interface. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Help/Documentation** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**2/5** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">There isn’t any dedicated help area available. The first time you perform a search. 3 brief lines tell you how to use the interface; after the user’s first search, those lines don’t seem to appear again unless the site is reopened. It would be nice if there was a help section that explained how to get the most out of the system. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; margin-bottom: 0pt; margin-top: 0pt; text-align: right; text-decoration: none; vertical-align: baseline;">**Score** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**84/100** ||  ||

=[|uvLayer]= =<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**uvLayer in one sentence:** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">a creative way to organize media. =

<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**A bit more:** This site’s interface allows for a new way to group media such as pictures and video and share them with others. Uvlayer makes it easy and fun to organize video, photos, and games so you can enjoy them with your friends wherever you are. You can discover and collect media from places like YouTube, Flickr, Hulu, Revision3 and many more. Uvlayer enables you to create collections of media and store them the way you want and where you want.

media type="youtube" key="uLqkeIsYhgM?fs=1" height="385" width="640"
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Consistency** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**29/30** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">this is really a cool interface. all the icons and options are familiar to me. when i clicked on a games it has some options like play that has universal sign, a letter sign that tells me i can send it via email and menu button. all the buttons are descriptive that i didn’t have any hard time to find it. very consistent design. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Focusing user attention** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**25/25** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">when i however on the files it expands a little bit. that is easy to take user attention.and sometime it changes color too. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Efficiency** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**18/20** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">it is very organized and efficient. i didnt find any new button or anything unfamiliar to me. if anyone familiar with computer then he can easily use this application. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Familiarity/Metaphors** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**10/10** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">this is the first time i’m using this interface. so far i didn’t face any problem to understand the options. the search option is same as all google, bing and whatever we are using everyday. i would give highest mark for familiarity. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Notification** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**8/10** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">I tried to go to Facebook through this application, then i decided not to go there and I hit cancel. then it showed me a easy option that i want to go to the main page or not. so i think notifications are pretty easy and user friendly. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Help/Documentation** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**1/5** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Here i had a hard time to find the help and documentation. in the about option minimal explanation exists. but here i would say all the options are itself descriptive and as a first time user i didn't face any problem. so it doesn't matter actually. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; margin-bottom: 0pt; margin-top: 0pt; text-align: right; text-decoration: none; vertical-align: baseline;">**Score** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**91/100** ||  ||

=[|Image Swirl]= =<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Google Swirl in one sentence:** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> a new way to search for images. = =<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**A bit more:** <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Google Swirl provides a very simple interactive way to search for images and is one of the many experiments Google is conducting in their digital lab. Instead of continuously tweaking your search term to get more detailed results, you simply have to enter in a broad category (such as “car” <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://image-swirl.googlelabs.com/html?q=car#__] <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">), and results will be returned in several categories (such as “sports car”, “concept car”, and “smart car”). Clicking on a picture category causes that section to “swirl out”, branching out related pictures to that category. Clicking on the middle picture of a category will open up the web-page from which it was found. Selecting any of the surrounding pictures results in a new branch of pictures to appear. Further related categories are listed at the top of the page from which you can see what’s related to the category the user chose. =

media type="youtube" key="_5YLzrpP2bs?fs=1" height="385" width="480"
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Consistency** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**18/30** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The interface is very simple and follows it’s own internal consistency very well. It also makes use of real world consistency by displaying “stacks” of pictures for the initial categories just as one would have stacks of physical pictures. However, the interface doesn’t resemble much external consistency. There’s a field at the top of the page where you can enter in search terms, which is similar to virtually any other site’s way of entering in search terms, but beyond that Google Swirl presents its own creation with its own characteristics which might be confusing to beginning users. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Focusing user attention** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**22/25** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Google Swirl does a good job of focusing the user’s attention through the use of fading and size. When the user hovers their mouse over a main category (such as “concept cars”), the top image in the stack will enlarge and be surrounded by a blue outline showing that is what you will select if you click. When you do click on a category, the new branching group of pictures appears and becomes larger than the root category (from which the color fades as well). ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Efficiency** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**17/20** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The way that Google Swirl presents information results in an efficient way of navigating the interface. The user can access large amounts of pictures and narrow their choices with only a few clicks. The unique way that results are presented also allows for quick navigation of all the results of a query. The only issue is if you want to actually view the original picture. To view the original you have to make the picture you want to view be the center of a group. You do this by clicking on that picture until it’s in the center. Then you click again, bringing up a new tab or window within the browser with the web-page that image appears on. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Familiarity/Metaphors** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**7/10** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The site presents it’s own original interface that hasn’t been widely used by other sites. Circular groups are used to arrange pictures and branches are created the further the user digs into a category. This branching concept is a familiar one to many people and most likely wouldn’t cause any problems with most users. The top of the site is very basic with a field to enter new search terms in and, depending upon the search term, other related categories may be listed in text form that the users can click on to perform a new search. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Notification** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**5/10** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The only time a notification is presented is when you enter a search query the system doesn’t presently have included within it. So if one enters a really random query, a message will appear saying “sorry, this query not included within the demo”. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Help/Documentation** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**0/5** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">There’s no help or documentation provided within the interface. ||
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; margin-bottom: 0pt; margin-top: 0pt; text-align: right; text-decoration: none; vertical-align: baseline;">**Score** || <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**69/100** ||  ||


 * <span style="background-color: #ffffff; color: #ff0000; font-family: Arial,Helvetica,sans-serif; font-size: 170%; font-style: normal; vertical-align: baseline;">Evolution of Microsoft Windows **

<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> The Microsoft Window operating system has been around for more than 25 years. It has undergone significant changes during that time in regards to its UI design and overall features. Design changes have been both for cosmetic reasons and have enhanced the program’s usability. From looking at the various screenshots displayed below, one can see just how drastically the UI has changed from the earliest version to today's Windows 7. The improvements have greatly enhanced UI usability and have created a better area in which users can work and play.

<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Features such as the 3D window flip introduced in Windows Vista provide an intuitive way for users to stay organized and work efficiently in Windows.

<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">media type="youtube" key="IuQC4pey0v4?fs=1" height="385" width="640"
 * <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">3D window flip: **

media type="youtube" key="6jd_xt8Q9Ow?fs=1" height="385" width="480"
 * Windows OS over the years:**

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 120%;">It's amazing to see how much has changed in such a short period of time.
==<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Windows 1.01** <span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; text-decoration: none; vertical-align: baseline;">//**(1985)**// == <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Officially released on November 20, 1985, this 16-bit OS cost less than 1MB in overall space and is Microsoft’s very first operating system that allows multitasking with a graphical user interface on a PC platform running on MS-DOS 5.0.



==<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Windows 1.03** <span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; text-decoration: none; vertical-align: baseline;">//**(1986)**// == <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Introduced in 1986, <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; text-decoration: none; vertical-align: baseline;">Windows 1.03 <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> is an upgrade to its previous predecessor <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; text-decoration: none; vertical-align: baseline;">Windows 1.01 <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">. The entire operating system cost about 2.2Mb hard disk space.



==<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Windows 2.03** <span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; text-decoration: none; vertical-align: baseline;">//**(1987)**// == <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Taking advantage of the speed of Intel 286/386 processor at that time, Windows 2.03 is a replacement for Windows 1.x. It also starts the era where users are able to overlap windows, customize screens, etc. Still the entire operating system cost no more than 2.5Mb.



==<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Windows 3.0** <span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; text-decoration: none; vertical-align: baseline;">//**(1990)**// == <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">This is the third major released of Microsoft Windows with an improved set of Windows icons and applications like File Manager, Program Manager which are still being used today. This May 22, 1990 released operating system is then replaced by Windows 3.1 two years later.



==<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Windows 3.1** <span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; text-decoration: none; vertical-align: baseline;"> //**(1992)**// == <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Windows 3.1 is probably the earliest Windows most of us are familiar with. Windows 3.1, and later Windows 3.1x, is an upgrade to Windows 3.0 with bug fixes and multimedia support.



==<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Windows NT 3.1** <span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; text-decoration: none; vertical-align: baseline;">//**(1993)**// == <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The first Windows New Technology (NT) introduced. It maintains consistency with Windows 3.1, a well-established home and business operating system at the time, the new Windows NT operating system began with version 3.1. Unlike Windows 3.1, however, Windows NT 3.1 was a 32-bit operating system.

==<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Windows 3.11** <span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; text-decoration: none; vertical-align: baseline;">//**(1993)**// == <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">A superset of Windows 3.1, Windows for Workgroups 3.11 added peer-to-peer workgroup and domain networking support. For the first time, Windows–based PCs were network-aware and became an integral part of the emerging client/server computing evolution.



==<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Windows NT 3.51 Workstation** <span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; text-decoration: none; vertical-align: baseline;">//**(1995)**// == <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The Windows NT Workstation 3.5 release provided the highest degree of protection yet for critical business applications and data. With support for the OpenGL graphics standard, this operating system helped power high-end applications for software development, engineering, financial analysis, scientific, and business-critical tasks.



==<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Windows 95** <span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; text-decoration: none; vertical-align: baseline;">//**(1995)**// == <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Previously code-named <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; text-decoration: none; vertical-align: baseline;">Chicago <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">, <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; text-decoration: none; vertical-align: baseline;">Windows 95 <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> is a successor to all the existing Windows operating systems so far. It gave full GUI support, integrated a 32-bit TCP/IP (Transmission Control Protocol/Internet Protocol) stack for built-in Internet support, dial-up networking, and new Plug and Play capabilities that made it easy for users to install hardware and software.



==<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Windows NT 4.0** <span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; text-decoration: none; vertical-align: baseline;">//**(1996)**// == <span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Windows NT Workstation 4.0 included the popular Windows 95 user interface and provided improved networking support for easier and more secure access to the Internet and corporate intranets.



<span style="font-family: Arial,Helvetica,sans-serif; font-size: 140%;">Windows 98 (1998)
<span style="background-color: #ffffff; color: #000000; font-size: 13pt; font-style: normal; font-weight: normal; vertical-align: baseline;">Windows 98 was the upgrade from Windows 95. Described as an operating system that "Works Better, Plays Better," Windows 98 was the first version of Windows designed specifically for consumers.



<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Windows 2000 //(2000)//**
<span style="background-color: #ffffff; color: #000000; font-size: 13pt; font-style: normal; font-weight: normal; vertical-align: baseline;">More than just the upgrade to Windows NT Workstation 4.0, Windows 2000 Professional was also designed to replace Windows 95, Windows 98, and Windows NT Workstation 4.0 on all business desktops and laptops. Built on top of the proven Windows NT Workstation 4.0 code base, Windows 2000 added major improvements in reliability, ease of use, Internet compatibility, and support for mobile computing.



<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">

<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Windows ME //(2000)//** <span style="background-color: #ffffff; color: #000000; font-size: 13pt; font-style: normal; font-weight: normal; vertical-align: baseline;">Designed for home computer users, Windows Me offered consumers numerous music, video, and home networking enhancements and reliability improvements.



<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Windows //XP (2001)//**
<span style="background-color: #ffffff; color: #000000; font-size: 13pt; font-style: normal; font-weight: normal; vertical-align: baseline;">Windows XP Professional brought the solid foundation of Windows 2000 to the PC desktop, enhancing reliability, security, and performance. With a fresh visual design, Windows XP Professional included features for business and advanced home computing, including remote desktop support, an encrypting file system, and system restore and advanced networking features.



<span style="background-color: transparent; color: #121212; font-family: Arial; font-size: 18pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Windows Vista //(2006)//**
<span style="background-color: #ffffff; color: #000000; font-size: 13pt; font-style: normal; font-weight: normal; vertical-align: baseline;">Came more than 5 years after its predecessor Windows XP, Vista is the longest timeline break for Microsoft between two operating systems.



<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 13pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Windows 7 features a vastly revised UI, even when compared to the previous OS (Windows Vista). Better management of system notifications and handling of multiple open applications in the taskbar mark several of the changes Microsoft made.



=<span style="background-color: #ffffff; color: #ff0000; font-family: Arial,Helvetica,sans-serif; font-size: 125%; font-style: normal; line-height: normal; margin: 0px; vertical-align: baseline;"> IV. Critique of NetBeans UI Design =

<span style="background-color: transparent; color: #000000; font-family: Calibri; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">For me the NetBean IDE is a well-structured user interface. It has lots of options with easy ways of handling these options. If I just want to create a project, it’s not going to be a problem to add elements on the frame from the built-in pallet. It has another option to add elements; right click on the frame or tab and choose option add from the pallet. It is easy to change visual aspects and make it more beautiful to look at.

<span style="background-color: transparent; color: #000000; font-family: Calibri; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Consistency** <span style="background-color: transparent; color: #000000; font-family: Calibri; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">: The NetBean IDE maintains a real world, internal and external consistency. It has menus similar to other interfaces so we know which menu helps us in which way. The entire interface is composed of very mild colors, so it’s easy on the eyes. Most of the menus are the same as Microsoft Word or some application like that. Overall, it’s really easy to handle.

<span style="background-color: transparent; color: #000000; font-family: Calibri; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Focusing user attention:** <span style="background-color: transparent; color: #000000; font-family: Calibri; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">The interface definitely it focuses the user’s attention. When we add a frame on the design mode, there is a gray colored box that specifies a frame and it has a red border; we can increase its size or decrease it. If we increase its size, then the gray colored square becomes larger. When the user hovers their cursor over the pallet, then it changes its color that shows me that it is going to be selected if the user clicks.



<span style="background-color: transparent; color: #000000; font-family: Calibri; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Efficiency** <span style="background-color: transparent; color: #000000; font-family: Calibri; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">: It is amazingly efficient. All the menus and options are organized nicely. This interface helps the user to use it quickly without running into many frustrating issues. However, there are so many options buried within menus, right-clicks, etc. that there is a somewhat steep learning curve to using the software. It may do lots of things automatically for users, but it can be difficult to find specific tools within the software if they aren’t common and aren’t presented on the main interface.



<span style="background-color: transparent; color: #000000; font-family: Calibri; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Familiarity and metaphor:** <span style="background-color: transparent; color: #000000; font-family: Calibri; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">All the menus are familiar to other interfaces like Microsoft Word or notepad. Some examples include the Redo and Undo icons, and the Save All icon. However, some symbols aren’t quite so familiar from other interfaces. The hammer icon for instance, was confusing for me at first, that is, until I hovered my cursor over it. Another area which displays familiarity is the properties section of the design interface. The side panel has options to change or modify the elements and has descriptions so the user can read and quickly understand how to use it. The picture shown above has some good examples of familiar icons. People wouldn't have to know anything about NetBeans to know how to save, undo, and redo using the interface.

<span style="background-color: transparent; color: #000000; font-family: Calibri; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Notifications** <span style="background-color: transparent; color: #000000; font-family: Calibri; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">: When the user types code and does something wrong, NetBeans shows us that we are doing something wrong with a red sign that appears on the left side of the problematic line of code. Clicking on the sign brings up an explanation of what needs to be done to correct the error. Again, if the user wants to run a project and it has some kind of error, NetBeans displays an error message that it has a problem but asks if the user still wants to continue running the program or not. This is definitely a good notification. And after running the program, if the system has problems with our coding, it shows the errors and in which line the error is. This is very user friendly overall. However, sometimes error messages can be long and confusing, making it hard for the user to figure out what part of their code is wrong.



<span style="background-color: transparent; color: #000000; font-family: Calibri; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Help/documentation** <span style="background-color: transparent; color: #000000; font-family: Calibri; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">: It has very useful help/documentation options. As an example, if the user doesn’t know how the frame works and what it is, he or she can go to the help option and enter a search query for “frame”. Help links will be displayed about frames (in this instance) and how to use them, what is the code behind it, and everything else the user may need to know about them.



=<span style="background-color: #ffffff; color: #ff0000; font-family: Arial,Helvetica,sans-serif; font-size: 125%; font-style: normal; line-height: normal; margin: 0px; vertical-align: baseline;">V. Reference List =

<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Links to Resources:** <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://www.azarask.in/blog/post/good-interfaces-create-good-habits/__] <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://www.ambysoft.com/essays/userInterfaceDesign.html__] <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://www.usernomics.com/user-interface-design.html__] <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://www.informit.com/articles/article.aspx?p=726420__] <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://www.hongkiat.com/blog/evolution-of-microsoft-windows-1985-2009/__] <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://www.theoligarch.com/microsoft_vs_apple_history.htm__]

<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Examples of Interesting User Interfaces** <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://www.outlawdesignblog.com/2009/20-examples-of-great-user-interface-design/__] <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://www.smashingmagazine.com/2008/08/17/10-futuristic-user-interfaces/__] <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://www.smashingmagazine.com/2010/11/11/designing-memorable-websites-showcase-of-creative-designs/__] <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://www.wix.com/__] <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://taggalaxy.de/__] <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://www.uvlayer.com/__] <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://image-swirl.googlelabs.com/__]

<span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; text-decoration: none; vertical-align: baseline;">**Example of Bad User Interfaces** <span style="background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; vertical-align: baseline;">[|__http://homepage.mac.com/bradster/iarchitect/__]