KyleDAndrewW

=toc=

=Overview= Creating a consistent, efficient GUI to solve non-trivial problems is an expensive endeavor. There is much design work needed to ensure that the principles of good GUI design are upheld. When coding a GUI, the details one needs to consider are numerous. Despite the work involved, a well-coded GUI can pay for itself. With a good GUI, debugging, updating, and m aintaining the program become much easier. The creators of the GUI also save time and money on customer support - customers can avoid many problems themselves, and can diagnose simpl e problems with the user help. With a well designed GUI, end users see many benefits. They run into fewer errors, and when errors do occur, user help is available and easily accessed. The program seems easier, more suited to their needs, and more enjoyable to use. Overall, time spent in building a quality GUI is time well spent. = = = = =Rubric= Consistency - How well the user's preexisting knowledge (of this program and other programs) relates to the functions in this program. Intuitiveness - For an expert in the field, does the program have all required functionality? For a user new to the field, how easy is it to find the functionality they are looking for? Efficiency - How much user input is required for certain functionality? (Number of clicks, correct focus on text boxes, etc.) Cognitive Load - The manageability of a program's content, structure, and current options available User Help - For any problem with the program, is there documentation that satisfies the users questions? Navigation - The ability to move through the contents of a program in an interactive manner. Aesthetics - The look and image of the program - how pleasing is it to the user?


 * Consistency || 15-20 || 11-14 || 0-10 ||
 * || The interface demonstrates internal, external, and real-world consistency || The interface is mostly consistent, with few notable problems || The interface lacks consistency ||
 * Intuitiveness || 15-20 || 11-14 || 0-10 ||
 * || The program satisfies the functional expectations of expert users and new users easily access simple functionality || The program satisfies most expected functionality, simple functions for average users are mostly intuitive || The program lacks functionality, new users are easily confused ||
 * Efficiency || 12-15 || 8-11 || 0-7 ||
 * || The program delivers functionality with a minimum amount of user input || The program functions with an acceptable amount of user input || To use the program, an excessive amount of user input is required ||
 * Cognitive Load || 12-15 || 8-11 || 0-7 ||
 * || The program displays content and options the user wants at the time needed, hides all others || The program displays too much or not enough information at any given time || The program displays so much information the user is overwhelmed, or not enough information so the user has to search for all functions ||
 * User Help || 8-10 || 5-7 || 0-4 ||
 * || For any problem, multiple forms of help and documentation are available || All common problems and some advanced topics have help available || Help is inaccurate, incomplete, or missing ||
 * Navigation || 8-10 || 5-7 || 0-4 ||
 * || Program navigation is easy, intuitive, and displayed informatively to the user || Navigating the program is mostly intuitive, navigation information displayed somewhat informatively to the user || Navigating the program is confusing, navigation information not displayed to the user ||
 * Aesthetics || 8-10 || 5-7 || 0-4 ||
 * || Program looks very pleasing, informative, and easy to use || Program looks somewhat pleasing, informative, and easy to use. || Program can be described as ugly, hard to look at. ||

=Examples of Poor UI Design=

Consistency
__**Ulfn Helden**__



If you can take a look at this GUI's menu and tell me what half of these things do, then you deserve a medal. Almost no real world consistency, the internal consistency is non-existent, and the only thing that's externally consistent is the color scheme.

__**Nags Heed Darts**__



Another game GUI, because those usually tend to have some of the worst. This is the options menu, and although it's kinda cute how they have special dinner names for their option categories, that makes absolutely no sense to the end-user. That and the fact that the sound setup menu is a bar with boxes appended to it is very non-consistent with volume control on programs. And it just looks plain ugly.

Intuitiveness
__**FileMatrix**__ I would give this GUI a 0 on the intuitive meter, because without these helpful (almost) icons, this interface would be a complete and absolute mess that is sure to confuse even the most expert user, let alone a new user. Too much content on one page, and little indication as to what they do (at least the had the audacity to give you abbreviations of the words, but even still it's almost insulting as to how many there are).

__**SSF Order Menu**__



Another UI that suffers from just an abhorrent amount of clutter that would surely confuse any new user when directly looking at it, as well as navigating through it. Have something wrong in the program? Good luck finding it quickly.

Efficiency
__**Windows Environment Variable Editor**__



Once upon a time, variables were set with a textbox... Which creates very inefficient variable declaration.


 * __Browser Toolbars__**



Any program that will let their GUI go to hell like this has a major problem with efficiency. Especially when it hinders the actual program itself, like it's doing in this picture. The entire purpose of the program is shadowed by the tons of toolbars that cloud it. Surely not a bad interface by itself, it turns into one of the worst when it's allowed to look like this.

Cognitive Load
__**Old Microsoft Word Options Menu**__



It seems like they just threw everything into the options menu with no regard to the fact that they actually have a menu bar! Way lot of overhead for just a simple options menu. Even a preferences menu would have sufficed!

__**Form in Access Application**__



The picture is small, but I think you get the point. Another case of over-tablature that makes in effect no sense and way too much information with poor organization. This could easily be solved by a menu bar and then a secondary bar under it with some icons for each subsequent function, but instead they decide to barrage it with tabs, creating a very ugly and very messy selection screen.

User Help

 * __Control Box Settings__**



Do you even see a menu bar here? Or a help button? OR ANY SORT OF HELP WHATSOEVER?

__**wGetGUI v1.0**__



It seems that this program has everything... Except for Help... Therefore it gets zero points because it has no help integrated into the GUI itself at all.

Navigation
__**A Poor Elevator**__



Not necessarily an application, but a user interface none the less. There are absolutely no context clues as to which buttons do what, and to me it just looks like a random gambit on which one you pick! Not easy to navigate at all, because there is no indication of how to navigate, and even if there was one, the buttons are aligned as to the point where it wouldn't make any sense still!

__**Microsoft Office 2010 Format Text Tab**__



Overall our Microsoft Office 2010 has a really nice interface with clean colors and setup, but something that's ridiculous about this UI is the fact that the zoom feature is under the... Format Text tab? if I was navigating and I wanted to zoom in my screen, the Format TEXT tab would be the last place I would look!

Aesthetics
__**Havenworks**__



No color scheme whatsoever. Brutal on the eyes. All that needs to be said.



This is an interface that came with Windows Media Player at one point in it's life. Although it may be perceived as neat, as far as the elements of design go, this UI is no where near a masterpiece.

=Interesting UI design= Here we have two examples in a video, the Nintendo Wii interface, and a touch screen Smartphone interface. media type="youtube" key="OXTRtZOBgxA?fs=1" height="385" width="480"

__**Nintendo Wii**__
Firstly, the Nintendo Wii has a very intuitive and new interface that hasn't been seen before in its market. The Wii uses a single controller, and motion sensing for user input across their own television. This interface my seem daunting at first, but the clean and bright visual aspect that the Wii brings to the T.V. makes it easy and fluid to use.

//Pictured above is the Nintendo Wii's default interface, which is navigated by using the controller to point and click on certain icons directly on your T.V.//

The Wii is actually a brilliant piece of interface design, where most all of the design principals we've talked about are used flawlessly, or with little error. Structurally it's very solid and organized, with likewise things grouped together (such as 'Channels' and 'Settings') so that navigating isn't a chore. When it comes to simplicity, I believe the screenshot shows that the interface is about as simple as you can get! Very easy to understand, and almost no overhead with redundancy and such. Focus is given to highlighted areas or certain messages, and the Wii itself (on the physical console) will even glow bright blue when the system has an available update ready to download. Sadly this isn't explained on the main page itself, and so thusly that feature itself may confuse some users (I.E. why the balls is my Wii glowing?). The Wii most always uses separate splash screens for different menus, so it's safe to say you won't be selecting anything you don't want without the ability to go back. Lastly, the whole interface follows a nice while consistency and uses the same icons for the same functionality almost all of the time. Prompts on screen for controller buttons are universal, and pop up messages are everywhere telling you what you are doing.

__**Touch-screen Smartphones**__
Our second interface that we are presented with is the touch screen smartphone. Mostly universal in their designs, smartphones follow a standard main icon page, with deviant pages for applications and different functionalities. Certainly the new thing these days, touch screen interfaces on smart phones are usually very well designed, but can be a bit dirty at times.

//This is a picture of a standard Android phone, by Verison. For examples sake, when we talk about the integration of UI design, we will use this phone's interface as the comparative.//

Overall, the first thing we can say about this interface is that it's 'cool'. Easy to read text, color depth in the icons, toolbars where toolbars need to go. The whole interface is strong and easy to navigate (albeit hopefully you don't have huge fingers). That being said, there is only so much simplicity you can achieve with a touch screen smartphone that needs to serve a million different functionalities quickly and efficiently. To a young person who grew up with technology, one may be able to navigate an Android with ease, however, I could predict problems with an older generation getting a hold of one of these machines just out of the sheer scope that they hold. A quick glance at the main screen will show us all the functionalities a basic phone would need, with extra content cluttering the middle. That being said, a smartphone's organizational scheme is usually user dependent, so a lot of the organization comes from where the user wants their icons and what icons where, etc. etc., which is an excellent move on the developers part and makes the interface that much more flexible. Highlights, as always, scatter under your fingers as you select different things, and notifications pop up when you've received a text or a call or any of the multiple status changes the phone can have happen. One thing the Android does fail at as well as most smart phones, however, is tolerance. If you select an application it will instantly load. There is no forgiveness for user error in this respect, and can lead to multiple programs going at once, drastically slowing down other applications and the phone itself. A fatal bug to anyone non-tech savvy and are not conscience of this.

__**10-Finger Touch**__
(view video from 6min) media type="youtube" key="zWz1KbknIZk?fs=1" height="385" width="640"

This interface is one of those "hasn't been done before, here comes the future" examples. Ten finger touch screen is new and yet to be main-stream sort of interface that although on the outside looks fluid and easy to use, on the inside is very complex and hard to achieve.

Of course with our example interface we see that it's very bare-bones and dumbed down, being as the prototype it is, the functionality comes before the flair. However, it still looks nice! But the application itself will probably have many more bells and whistles when it's done. In this setup, we see that the principals of design solely come alive through the fingers. Almost no graphical interface, all of the functionality comes through placement and movement of the fingers. This ideology in itself is pretty groundbreaking because it takes a whole section out of a program, and leaves it to your hands to figure it out. Within' that is an interface that creates your interface, at least in this example. A navigation interface that you navigate with nothing but your fingers is still a very foreign concept, but from the looks of it the maneuverability will be top notch and it will be something that will take some time to learn

=UI Design Evolution=

iTunes GUI Evolution
One GUI that has been around for a while is that of iTunes. For as long as the program has been around, it still looks very similar to how it looked way back when it was first released. That being said, there are still a few key changes that have made it evolve over time and stay aesthetically pleasing to the eye.

First we will take a look at the iTunes 2 interface, which was released in 2001.



As you can see, the general setup is very similar to that of the most recent iTunes 10. You have categories on the left, and songs in the middle, play functionalities and volume control on the top left, search on the right, and the customary yellow plate in the top with the apple logo place inside.

A basic GUI, with a (now weird) metal textured background and a light blue color focus. This GUI was around for quite a long time, until iTunes 4 came about and added the music store, and the ability to show album art cover in the side bar (as denoted b the little thing with the arrow pointing upwards right next to the repeat button). This lead to extra icons dotted around the interface, and they also smoothed out the bevel around the play functionalities. The iTunes 4 GUI is shown below, and was released in 2003.



Small updates proceeded to dot iTunes life, and the next big update to the GUI that we get is when iTunes 6 is released in 2005. Four years after the first iTunes distribution, they finally got rid of the weird metallic background. That was then replaced with the common gray gradient that we see on todays iTunes. iTunes 6 is displayed below.



The iTunes 6 GUI was short lived, however, when in 2005 Apple released another big update to the interface. They started to add section for the program, being as the functionality was increasing to the point where it would have been unorganized if they kept everything grouped together. This is a very smart move on Apple's part, for their functionality and structure would look ten times nicer by not letting their program turn into a giant cluster of things to do. They also added an ability to view your songs in different setups, which required more icons (added next to the search function, top right), and thusly they moved the update icon down near the eject icon (bottom left). This is actually the last big UI update to date, and is still used five years from when it was initially released. The iTunes 7 UI is displayed below.



The iTunes GUI has evolved in a fashion that has kept up with the times, as well as it's own functionality. It should be noted that although the program's entire interface hadn't changed much at all, it can very easily show how small UI design tweaks can mean the difference between a user interface looking like it was ugly and developed in the 90's as opposed to a UI that is slick and modern.

=**Rating the Netbeans GUI**=

**Consistency**

 * 18/20**

Netbeans is very consistent with its UI design. An example is the Inspector frame, which shows the components added to the project in a hierarchical layout: One area where Netbeans may lack a little consistency is the design tab buttons:

The designers tried to translate operations like Selection Mode, Connection Mode, Preview Design with real-world consistency, but I feel they fell short on this task bar.

**Intuitiveness**
Netbeans is a complex IDE, it handles all the functional expectations of an expert user and displays most basic functions easily to new users. Since an IDE is a complex program, there may be areas where new users do not feel welcome. An example is the refactor tab:
 * 19/20**

**Efficiency**
Netbeans is a very efficient program. No function was found to require more than the minimum input, and no workflow that required extra clicks, so Netbeans got the maximum score of 15 for efficiency.
 * 15/15**

**Cognitive Load**
As a Java IDE, there are many options one can display at a given time. I found that the Netbeans GUI can be overwhelming at times, displaying too much information by default. A new idea needs to be introduced, where some of the information is hidden, but also easily available when the user requires it. An example screen of the cognitive load of Netbeans: Too much is displayed at one time.
 * 11/15**

**User Help**
Netbeans has help available for almost any topic imaginable: For being so comprehensive, Netbeans gets 10/10 for the user help category.
 * 10/10**

**Navigation**
Navigating Netbeans is fairly easy and intuitive. Navigation information is always displayed to the user informatively:
 * 9/10**

**Aesthetics**
While I find Netbean's layout pleasing to the eye, I believe the designers should have used more color to enhance the experience. One example area that looks particularly unpleasing is the palette tab: This tab is lacking in color (it has the same color scheme as everything else) and ends up being just various shades of gray.
 * 6/10**


 * Total: 88/100**

=References= http://www.ceismc.gatech.edu/mm_tools/UIRF.html http://www.techienuggets.com/Detail?tx=11217 []