AndrewDMattK

CSIS 335 - Fall 2010 User Interface Design Paper Andrew Dahl, Matt Kava November 16th, 2010

Table of Contents

 * 1) Overview
 * 2) Six Critical Principles
 * 3) Rubric
 * 4) Consistency
 * 5) Intuitive
 * 6) Error Prevention
 * 7) Feedback
 * 8) Documentation / Help
 * 9) Aesthetics
 * 10) New Developments in User Interface Design
 * 11) Android OS
 * 12) Chrome
 * 13) Windows Aero
 * 14) KDE
 * 15) Critique of NetBeans User Interface Design
 * 16) Reference List

**I.) Overview**
When discussing user interface, or UI, design, there is the need to understand what an interface is in the first place. An interface is the different ways that a user can interact with any particular hardware or software. With computers, the keyboard and mouse are the input devices that act as the primary interface between what the user wants to do and the operating system and applications. The graphical interface with computers is the presentation, or aesthetics, of the applications that show the user’s progress. These two types of interfaces make up what is referred to as the user interface.

Hardware interfaces are what a user can physically interact with through sight, sound, or touch. Keyboards, mice, monitors, microphones, and speakers are how a computer interacts with the user. With video game consoles, the mouse and keyboard are replaced with dedicated controllers that serve the same purpose but usually with a more discrete number of inputs in comparison. More advanced interfaces for consoles can be seen in this current generation of video games with Xbox Kinect, PlayStation Move, and the Nintendo Wii. These are much more open interfaces with less discrete input but still serve the same purpose of interacting with the user to create a meaningful experience. Software interfaces are what controls are provided by the application for interaction. With a computer application, these controls can be buttons, text boxes, and check/radio boxes among others that allow the application to interact with the user. Depending on the software, the interface will look or act different but serve the same purpose of creating the meaningful experience between the user and application.

Interface design is the practice of creating hardware or software interfaces that create meaningful experiences with the user. A meaningful experience can be helping check for errors in the users input while balancing their checkbook or helping the user file their taxes or simply write a paper or create a slideshow presentation. The experience is dictated by the purpose of the application or hardware and that purpose transforms the interface into what it needs to be to meet the needs of the user. Imagine a calculator without an Equals button. How would the result of adding two numbers be found without being able to tell the hardware to compute the result? That button is paramount to meeting the needs of the user as they need to be able to get the result. If the purpose is not met, there is no meaningful experience therefore the interface failed its purpose. No matter how great the hardware or software is, a poor user interface will be a detriment. Interface design is about taking what needs to be done and making it possible for the user to do what they need to do.

A good UI can make or break an application’s potential and mean the difference between a good user experience and a poor one. Software that has a poor UI that makes the user take more time than needed to complete their work makes not only the user spend more time but could also waste the money of the business or organization that the user works for. The old saying of ‘time is money’ stands true when working with time critical information. What if a store clerk had to type in the cost of every single item a customer wanted to purchase instead of just being able to scan a barcode? A great deal of time would be wasted because the interface was poorly designed. With a scan of a barcode, the computer not only knows the price of the product but can also make a record of the sale. This UI not only saved the customer time but helps the business keep track of its stock thus making both the end user and the organization benefit from using a good interface design.

Included below is discussion on different interface design principles along with good and poor examples of both in real-world applications. Further down the page there is an example of using these principles to critique the interface for NetBeans, an integrated software development environment.

**Rubric**

 * Consistency || 18 - 25 || 10 - 17 || 0 - 9 ||
 * || Labels and Buttons are consistent. Interface shows internal, external, and real-world consistency. || Majority labels and buttons are consistent. Interface shows internal, external, and real-world consistency with few issues. || Labels and Buttons are not consistent. Interface doesn't or poorly shows internal, external, and real-world consistency. ||
 * Intuitive || 15 - 20 || 9 - 14 || 0 - 8 ||
 * || Program functions as expected. Icons easy to identify. || Program has few expected functionality issues. Icons are usually easy to identify. Labels are usually concise and unambiguous. || Program doesn't function as expected. Icons are hard to identify. Labels are hard to understand. ||
 * Error Prevention || 13 - 18 || 7 - 12 || 0 - 6 ||
 * || Buttons disabled until correct input. Always able to recover data. Confirmation before deleting data. || Buttons disabled until okay input. Sometimes able to recover data. Sometimes asked before deleting data. || Can give bad input. Can rarely recover data, if ever. Rarely or never asked before deleting data. ||
 * Feedback || 10 - 15 || 5 - 9 || 0 - 4 ||
 * || Program responds to input in a way the user can interpret as good or bad and is easily interpreted. || Program sometimes responds to input or always responds in a way that's sometimes hard to interpret. || Program rarely responds to input or the response is nearly impossible to understand. ||
 * Documentation / Help || 8 - 12 || 4 - 7 || 0 - 3 ||
 * || Many types of user documentation are available through help files and within the interface. Contextual help is abundant and clear. || Some types of user documentation are available. Most issues are covered somewhere. Some contextual help is present or what is available is unclear. || Virtually no user documentation exists, it's inaccurate, or it barely covers any issues. No contextual help available to the user. ||
 * Aesthetics || 7 - 10 || 3 - 6 || 0 - 2 ||
 * || Program appears visually pleasing and easy to use. || Program sometimes appears visually pleasing or looks a little complicated to use. || Program is difficult to look at or looks extremely complicated. ||

Consistency
Consistency involves everything graphical within an application. An application that is consistent provides similar buttons, similar naming conventions for everything, and the placement of various UI objects are similar and consistent. In the event there's a framework widely used, such as QT4 or .NET, all of the objects should act and look the same on every part of the program. Lastly, real-world consistency should be demonstrated. For example, a contact list should picture a group of people or a directory of some sort.



The above image shows the "Add Fonts" dialog from Windows Vista. The area that shows the folders and drives do not match what other dialogs within Vista use. This demonstrates a horrible use of consistency.



This example isn't as bad as the first; however, again we get a flashback to Windows 95. The "Offline Web Pages" folder icon is extremely old and does not match the look of every other folder in Vista. This isn't such an issue, since you can change it if you really want to, it's still an oversight of consistency.

The above two examples have been fixed in Windows 7.

**Intuitive**
For a program to be intuitive, it must be easy to use. When you interact with the interface, it should respond in a predictable manner. For example, if you click a button that says "Submit", it should submit. If the "Submit" button moves you along in a form, a better label would have been "Next". Generally, intuitive interfaces are somewhat efficient as the user can easily find functionality and execute tasks quickly.



This interface is quite scary. From a user's perspective of sitting down and seeing this, the first question that comes to mind is "Where do I start?" While, this interface may act the way you expect when you click various buttons and interact with it, there aren't any parts of it that say "start here" or direct the user in any way. Overall, this interface is very confusing and would most likely slow the user down.



Another interface that does a poor job of being intuitive for the user is the wGet interface. The first step is simple enough: enter a URL. From there, the options aren't the most clear, such as the Allow or Reject list under Hosts. What hosts are allowing or denying? Because a lot of these options are questionable, this will most likely slow the user down and not act in a manner that the user expects. This is also a good example of lack of help.

Error Prevention
Error prevention involves being forgiving to the user and preventing the user from making mistakes. This would include things like buttons that could have more than one meaning, allowing the user to use a button before the proper input is selected, or allowing the user to delete data without a way to recover it.



The above image shows a good example of a question that makes no sense. Are they asking Yes|No to saving my work, or are they asking Yes|No to losing it forever. While, it may be obvious to GUI designers that they are asking the user whether they want to save their work or not, this is poor wording and could easily result in disaster.



This example shows two buttons that don't answer the question. The 'Okay' option seems like it would be an alright choice; however, a "Yes" would have worked better in this instance. And the "cancel" button has a questionable meaning. Does cancel mean that it won't continue and the user will lose their work, will it save the document, or will it do the same as Okay? Definitely not clear enough.

Feedback
Feedback is anything that tells the user that they are doing something right, doing something wrong, or just letting them know that the application is working. Types of feedback involve red or green check marks next to input fields that change as you type, auto-complete drop down menus that change as you type, dialogs that ask questions, or in the case of cellular phones, the phone vibrates or lights up when you slide your finger across tactile buttons.



This is an example of Google's auto complete search bar. As you type, the list updates. This shows an example of feedback in that as you type, the interface updates.



In this example, as the user types, the asterisks turn from red to green to indicate proper input.

Documentation / Help
Documentation and help come in many different forms. Common types of help are help documents that are indexed, in which you can search, and have many topics to them. Other forms involve frequently asked question pages, tool tips, and help within the form you're completing.



In this example, while they do have a Help menu at the top, they lack form help, which this application obviously needs. All of these form options would most likely confuse the user, so an added level of user help would be extremely beneficial.



In the above interface, there appears to be no available help. At the top, there's no help menu; within the forms, there are no hints; and most likely, there are few or no tool tips. Overall, this is a very poor example of good documentation.

Aesthetics
Aesthetics involves an interface that looks good to the eyes and has a sleek interface that doesn't get in the way of usability.



The above example shows various skins for Windows Media Player. While, they do look pleasing



Android OS


The Android OS is the newest operating system to be installed on smart phones, PDAs, eBook readers, MP3 players, tablets, and much more. It is based on the Linux operating system and is designed to interface with a touch screen. The above image shows that lower menu being slid up to show the mass of applications installed. Applications are opened by tapping them with your finger. The upper bar shows notifications and can also be slid down, similarly to the lower menu, to show notifications. On the desktop, icons for applications and folders can be created, as well as a plethora of widgets added.


 * Consistency -** Overall, the consistency of the Android OS is excellent. Everything uses the Android framework, so all of the interfaces look very similar. Icons reflect the applications well (ex. clock icon for Alarm Clock, Amazon logo for Amazon MP3, etc.) However, anyone can design applications for Android, so consistency among user-created applications tends to be questionable. For that reason, we give consistency a **21/25**.


 * Intuitive** - The Android OS is very quick and easy to figure out. You can tap things to select them, hold your finger on them to select them for dragging or for more options, or slide objects around. Most of the time, these three methods of interaction are defined and their actions are very consistent, so predicting what will happen is easy. If you tip the phone, the screen usually tilts with it. However, not all application employ this functionality. For that reason, and the reason that not every object has the three methods of interaction defined, we give intuitive a **17/20**.


 * Error Prevention** - Before deleting files, Android prompts you with very clear dialogs asking to make sure you want to delete files. When entering text; however, the Android OS is not as forgiving. A user can accidentally type "Alt" to get special characters, and then forget they did that and press "Del" for delete, which has no special character listed next to it. This causes all the text in the current text box to be deleted. For that reason, we give error prevention a **9/18.**


 * Feedback** - Feedback is excellent on an Android enabled device. These devices are very responsive and offer tactile feedback for when you slide your finger across the buttons and it vibrates or when you use the interactive keyboard and the buttons change color and the character you're pressing is displayed. The devices can get bogged down; however, this is a very rare occurrence. But, during these times, the phone becomes nearly unresponsive outside of the vibration functionality. Because of this, we give feedback a **13/15**.


 * Documentation** / **Help** - Within the Android OS, there are some troubleshooting options for the OS itself on the phone; however, it is extremely limited. For most applications, it is nearly non-existent on the phone. You can get help and documentation for most things on the Internet. However, this method generally requires a lot of added effort. For this reason, we give Documentation and Help a **5/12**.


 * Aesthetics** - The Android OS employs a beautiful set of icons with a beautiful interface that's exceptionally easy on your eyes and easy to interact with. We give the aesthetics of the Android OS a full **10/10**.

Chrome


Google Chrome is the latest in web browsers to hit the market. It's drive is to be extremely lightweight, simple, and easy to use. The interface is a true hit among most users and Firefox 4 seems to be moving in the same direction.


 * Consistency -** This application isn't a huge one, so there are a lack examples for consistency; however, within the main app it remains completely consistent. Tabs can be drug across and rearranged by snapping back into place. Bookmarks and other tool bars are always in the same spots and the icon set is very consistent internally and in a real-world sense. The only lack of consistency is when a user opens the preferences menu, as this offers a very basic interface, completely different from the rest of the Chrome browser. For this reason, we give consistency a **19/25.**


 * Intuitive** - How Chrome works is very obvious to the users. The look of the tabs also seems to scream "move us!" Everything within Chrome seems to say that it can be moved and user interaction is a breeze. The only issue we found was when editing the preferences, option placements weren't where we expected. For this reason, we give intuitive a **15/20.**


 * Error Prevention** - While there isn't much you can mess up in Chrome, it does provide an excellent feature set. Before changing anything "under the hood", as Chrome refers to it as, it prompts the user to make sure they understand what they are doing. Closing the browser allows the saving of currently open tabs and when the browser crashes, a "restore" option is displayed to restore it to its previous state. There's also a listing of previously opened tabs and history. We give error prevention an **18/18**.


 * Feedback** - Where applicable, auto-complete options are displayed and tabs are immediately created when told to do so. When web pages are loading, the tabs have a green background that shows how close they are to done, as well as a status bar at the bottom. Downloads also provide a nice green bar with the download at the bottom, or on the downloads page, a very nice interface for showing how downloads are progressing. We give feedback a **15/15.**


 * Documentation** / **Help** - Chrome provides a complete indexed help menu that you can easily search, as well as occasional help for first use and when you create new tabs. Overall, it's a rare situation where a user is left wondering what to do. Adding extentions and menus isn't the most easy to understand thing, nor is it easy to find help for it. For this reason, we gave documentation a **10/12.**


 * Aesthetics** - Chrome has a very beautiful and sleek interface that strives for simplicity and ease of use. In that mission, it succeeds greatly. Firefox 4 is moving in the direction of Chrome's layout due to its success in this area. Overall, the browser is easy on the eyes. For this, we give it a **10/10**.

Windows Aero


Windows Aero was a new feature in Vista that shows off the graphical abilities of Windows in a useful fashion for displaying windows and shifting between them in a simple manner.


 * Consistency -** Windows Aero shows a great example of real-world consistency, as it displays the windows in a format such that you were looking at cascaded papers on your desk (assuming they could float!) When the windows are displayed, they maintain their size quite well and don't appear to be skewed at all. We give consistency a **25/25.**


 * Intuitive** - Aero is exceptionally intuitive, once you figure out the key combination to use it. The front-most window is the one that is displayed and you use the tab key to cycle them. The key combination makes sense as Alt+Tab is the usual for switching between open windows, and the Windows key is right next to Alt. We give Aero a **20/20.**


 * Error Prevention** - There really is minimal error to prevent in Aero. There is currently no way to back out of the menu without swapping windows, unless you find your original window again. Nor is there a marker so you know which window you were on before going into this window swapping mode. Because of there being no safeguards to back out of it, we give error prevention a **6/18.**


 * Feedback** - Feedback is great as the windows align themselves as soon as Windows+Tab is pressed. When tab is hit again, the windows cycle immediately and you know exactly which window will open. We give feedback a **15/15.**


 * Documentation** / **Help** - Help is available for Aero through the Windows help menu. There is no help available while using it though. For this reason, we give help a **5/12**.


 * Aesthetics** - The purpose of Aero was to show of graphics and be beautiful at the same time. It pulls this off perfectly in a way that's exceptionally easy on your eyes (easier than alt+tab, in fact). We give Aero a **10/10**.

KDE




The above two images show the KDE window manager for the X.Org graphical interface of Unix/Linux. The first image shows the original 1.0 release, while the second shows the current 4.6 release. In terms of components, the only real addition to 4.6 is the notification icons on the bottom right. Otherwise, both employ a main menu (K in 1.0, F in 4.6 due to this being a Fedora release), icons for applications, windows having a spot in the menu bar for minimizing and showing which is open, and a calendar.

One major change that is noticeable, as far as functionality goes, is the desktop. In 1.0, and most window managers, the desktop is made for icons and folders as it's a directory. Not so much in KDE 4.6. The desktop is not a directory anymore! The "Desktop Folder" widget in the top left corner is a widget of a folder. If you place icons on the desktop, outside of that widget, they become widgets themselves. There are hundreds of available widgets you can add for additional functionality as well. This is definitely something that 1.0 did not have, and something that many other window managers have been attempting to implement. How useful they are depends on the user and the widget though.

Outside of that, the obvious change is in aesthetics. The sleek design of 4.6 compared to the boxy design of 1.0. This is due to the increase in power of computers, as well as the demand for easy to use and nice looking interfaces. Out of all window managers, I think that KDE is the best. 4.6 also provides Windows Aero like features for displaying windows without opening them, without the hardware intensive requirements of Windows Aero.

One final change is with the main menu itself. Prior to 4.0, the main menu was a listing of applications and categories of application. In 4.0 and above, the start menu is broken into 5 sections, which include Favorites, where you can put your favorite applications; Applications, which shows all installed applications; Computer, which shows mounted devices and points of interest on the hard drive as well as system info; Recently Used, which includes applications that you have recently opened; and Logout, which includes options to log off, suspend, shut down, and restart your computer.

Comparing the direction that KDE has taken from 1.0 to 4.6 to what other window managers have done, I would say it seems to be in the right direction. If anything, I would have to say that KDE seems to be leading the way with some of the features that it offers (such as Window's famous "Snapping Windows", which KDE had first.) Looking at all the aspects of UI design, KDE seems to strive towards a better interface. It uses the QT4 framework so that all of the KDE specific applications look just like the desktop and maintains an excellent set of icons. Additionally, in each release it becomes smaller, sleeker, and easier to use.

**IV.) Critique of NetBeans User Interface Design**
This sections critiques the NetBeans IDE user interface using the principles rubric.

Consistency




Netbeans shows a great deal of consistency with its icons. The icon used for a class in one section of the application is reused time and time again with other parts of the IDE as well. This is helpful for creating visual cues and makes development much easier for visually-oriented programmers.



The biggest oversight of the Netbeans IDE with consistency is its Build, Run, and Debug button icons. The only icon that is similar to other development applications, such as Microsoft Visual Studio 2008, is the Run icon. But the other icons are not consistent with other applications throughout the development world.

Intuative


It is easy to pick up and start using Netbeans. This is great for the application and allows new users to start using it without too much start-up cost. The menus are laid out in a good layout and the standard “File Edit View” menus in the top menubar provide what the user expects.



Resizing of elements inside a form lacks consistency due to how Netbeans associates element sizes to other elements. It is not possible to delink the elements without manually setting a width, height, or position value for the element using the Properties window. And as soon as the button is moved or changed inside of the editor, this static state of the element will change to being dynamically changed again based on the surrounding elements. This can cause headaches when arranging items.

Error Prevention
Providing good error protection is vital when dealing with user input. Any invalid input in the above form will show a message at the bottom of the window stating what needs to be fixed. This shows good and bad error protection of the user’s input. It is great that the form will analyze what the user inputs but it does not show any indication of an issue in the text field that has the problem. This is more so poor feedback but shows Netbeans is protecting the user from hurting itself with error protection.

One example of where Netbeans has issues with error prevention is renaming a form element. When using the “Change Variable Name” option from the contextual right-click menu, a dialog pops up that allows the user to select a new variable name for the element. If the user provides an invalid name, there is no feedback stating this. Also, if the user provides a blank name and clicks OK, there is no notification that this was bad input and that the name of the element did not change. This shows poor error prevention and does not save the user any work.

Feedback
This is an example of Netbeans having good feedback. It is obvious that the selected item is the one with the box around it and is showing how it is aligned in comparison to the form itself. This may be incredibly simple but shows great feedback on the part of Netbeans.

Where Netbeans fails for providing feedback is when renaming a form element, such as a button. When using the “Change Variable Name” option from the contextual right-click menu, a dialog pops up that allows the user to select a new variable name for the element. If this new name is invalid, there is no feedback present in the dialog. After clicking OK to change the name, if the name is invalid, a dialog pops up saying it is invalid, but not how, and then goes back to the editor without reshowing the same dialog. The feedback came too late on the name being invalid and it made matters worse by not making the dialog reappear with the same name so that the user could correct it. The idea was there but late and did not save the user any work like it should of.

Documentation / Help


The help contents for Netbeans is either too vague or too specific, depending on the topic. It does not have a horrible help as it does provide a direct link to the online help manual and with the Javadoc packages installed, it provides useful help in Java projects. This is a good but not great help. It certainly serves its purpose but does not answer all questions, which is expected.

Aesthetics




The looks of Netbeans are plain and bland but tolerable. A development tool does not need to be full of added graphical fluff that detracts from the purpose of creating an application or code. This is one of the benefits of the aesthetics of Netbeans as it tries to stay out of the programmer’s way and not distract them with pretty graphics. The problem though is how the elements look in the editor and how the final result look are usually vastly different. It seems that Netbeans, at least with Java applications, is using two different generators to create the looks of the final product and what the programmer sees in the editor. This issue is obviously an issue that can cause many headaches and makes updating an application very difficult.

**V.) Reference List**

 * 1) http://www.james-blogs.com/2009/09/19/exclusive-look-at-windows-7-professional/
 * 2) http://forum.kde.org/viewtopic.php?f=16&t=32565
 * 3) http://www.codlug.info/history_of_linux
 * 4) http://www.intomobile.com/2008/11/10/t-mobile-g1-hands-on-review-life-with-the-android-os/tmobile-g1-android-screenshot-menu-3/
 * 5) http://www.hackersorigin.com/download-google-chrome-4-offline-installer/?mobile=1
 * 6) http://www.istartedsomething.com/20080531/windows-ui-taskforce-your-help-wanted/
 * 7) http://www.localoaf.org/2006/12/27/defeating-the-expectation-of-bad-ui/
 * 8) http://www.graphpaper.com/2008/12-01_how-bad-is-bad
 * 9) http://cfg.cit.cornell.edu/design/concepts.html
 * 10) http://support.sas.com/documentation/cdl/en/hostwin/63285/HTML/default/viewer.htm#sassession.htm
 * 11) http://chandoo.org/wp/2010/06/23/ui-prototyping-in-excel/
 * 12) http://montaraventures.com/blog/2009/04/25/the-supermodel-software-theory/
 * 13) http://www.interact-sw.co.uk/iangblog/2005/12/21/taskdialog
 * 14) http://alias-i.com/lingpipe/demos/tutorial/querySpellChecker/read-me.html
 * 15) http://www.dl4all.com/tdd/tag/sony+pmb+windows.html
 * 16) http://www.ambysoft.com/essays/userInterfaceDesign.html