For example, the placement of the OK and Cancel buttons is so uniform and well placed in our minds that if a dialog holds these buttons in a reverse sequence Cancel , then OK ; instead of OK , then Cancel —you just might hit Cancel instead.
After using a particular standard for doing things—Windows-based applications for example—for more than a year, habits develop. Following industry standards however unstated they may be makes your software easier to use. In one of the early Windows Vista preview builds, the Minimize , Maximize , and Close buttons of any window became different. In previous versions of Windows especially when using a single monitor , you develop a habit of moving the cursor in the top-right corner of the screen and clicking.
This always resulted in the window closing. Now in this particular build of Windows Vista, there were approximately 8 pixels worth of space between the Close button and the right-most border of the window.
The extra space did make it look cool and was probably necessary for the cool glow animation the button sported , but was irritating because it did not allow users to close open windows as easily.
Reconditioning your mind can be tough. Thankfully, in the following build, this issue was addressed. Now, there still is space between the border of the window and the close button, but clicking that space also causes the window to be closed. A very important factor of intuitive design is the amount of 'mental bandwidth'—the amount of time it might take our mind to comprehend something—it uses. The lower the 'bandwidth' usage, the better your user experience. These are small things that contribute to the "experience" of using a software application.
The following examples provide tips on improving your applications with real-world tips and tricks. The goal of a better user experience is to have a simpler, easier, functional UI that also looks good. These tips will help you shape your UI to be more effective. The established standards of any software environment—whether on the operating system level, brand level, or application level—are very important.
Besides the branding, the standards act as a proverbial schema in the user's mind. When the user spends long periods of time working with a software application, he or she will automatically increase productivity because of the growing familiarity. Before discussing standards, let's first discuss what exactly these standards are.
The standards include everything from the layout of controls in a particular manner on the dialog boxes—like the OK and Cancel buttons, the user interface's shape—rounded-corners of the top of the window as in Windows XP dialogs, styles of icons, styles of any other graphics, interactive behavior of your application, and the like. If your application falls into a specific niche, then it may fare better to follow a different set of standards.
For example, if your application supports, application or an add-on for, Office OneNote , it is wise to follow the styles of UI and interactivity standards of Office—and OneNote itself, in particular. This includes using the Office-style command bars instead of the standard toolbars, and other such things— both visual and behavioral. If your application is to be part of the Microsoft Visual Studio. NET category, then you have a separate set of standards.
In fact, for such add-on or support applications, companies such as Microsoft do release written guidelines. Also note that sometimes graphics and design concepts are protected intellectual properties.
Always check the proper documentation to make sure you have the license to create such designs. A third example of standards would be the Tablet PC environment. These standards cross the boundaries between operating system guidelines and application guidelines. In contrast to theOffice or Visual Studio guidelines, these design recommendations directly affect how the user will interact with your application and how it should behave in turn.
For instance, if you have docking windows in your application, the documentation recommends that you make sure it can detect when the screen orientation is changed, and that the docking windows properly reorganize themselves in a portrait or landscape orientation as needed.
Even if you are not designing your application to be Tablet-specific, you should go over these guidelines. Each situation calls for a different or additional set of standards to be followed.
When applications share the operating system-level or application-level standards, the users feel more at home with the software, which makes it easier to learn and use. This results is a direct boost to productivity. Users want to be able to become productive with new software as quickly as possible. Sometimes you need to direct the user to the most important buttons even when you have four or five other buttons lying around it. If you experiment with the size, color, or font, you would break standards—which is not recommended.
Instead, you can use a couple of simple tricks to accomplish this. The first is to convert the other non-critical buttons into LinkLabels as shown in the following image. This way, the user knows that these links will perform a task, but their attention will go first to the button that stands out—without breaking standard design guidelines. The second is to put the critical button first in line—either on the left for horizontal layouts as shown in the following image, or on top for vertical layouts.
Do note that this may change depending on the target user's culture—you may fare better if you place the button in question on the far right if your application is any language that is written from right-to-left. The recommended option is to set to receive focus by default.
For example, on a delete confirmation dialog, the No option should be highlighted, as this prevents the user from accidentally deleting something. Icons—especially the Windows XP and Office icons and toolbar bitmaps—help speed up cognition of the UI and the task the user has to perform. For example, when you see the exclamation icon most often seen on the Message Box, you instantly become aware of the level of risk associated with the controls next to that icon.
Similarly, when your application puts up a lot of controls—no matter how properly arranged—it can be daunting to find the set of controls you are looking for. There are four options present—automatically download updates, download updates but let the user decide when to install them, notify the user if updates are available but do not start download, and disabling automatic updates completely.
A new PC user may not be aware of what these updates are and might not know which option would be best to choose. So, Microsoft has put a green shield icon with a big check mark on it next to the most recommended that signifies a "safe" option, and a red shield icon with a big "x" on it next to the one that would be potentially harmful to the user.
This is very helpful in critical situations—especially when the user does not have time to read too much text.
In the same System Properties applet, each tab has multiple GroupBoxes with different controls for different tasks. A relative graphic is placed next to each group that would easily signify the task of the control group.
This type of graphical code is similar to color-coding in physical files or parking lots. This also works on the same principle of having at least some visuals in a magazine article—it keeps the reader's interest.
Choosing the right icon is also important. Microsoft provides many standard graphics as part of Visual Studio These would be the best choice. If you create your own icons, it is highly recommended that you follow the operating system-level or application-level standards for these graphics as mentioned in the Use Standards section above. Headers are the perfect way to explain the entire dialog in a single sentence and optionally a graphic.
Sometimes, headers can even help you accommodate navigation and commands within them as well. Headers work more effectively than normal description labels because they are the first thing that a user sees when the dialog pops up.
The Windows Installer wizards are perhaps the most popular headers: a simple icon in the far right; a title label describing the dialog for example, Select Installation Folder ; and a sub-heading that describes the purpose of the dialog for example, Select the folder where the software files will be installed. Let's say we have a typical business application with an accounts section. Following the design paradigm championed by Windows Vista, we can supply mission-critical information and related commands in the header or footer, if the scenario calls for it itself.
Our user has opened the account file for "Big Company," and the header would look something like that shown in the following screen shot.
Similarly, you can avoid having to add Windows XP-style task panes—especially when you have just a few commands, which would waste a lot of vertical space— by moving these commands to the header. The options available in the standard Windows message box are very limited. Windows applications are now becoming simpler to use because of the high volume of non-technical users.
Sometimes, it can be much simpler to provide buttons with friendlier texts and even some additional controls—LinkLabels, for instance—to make it easier to accomplish the task at hand. The Microsoft. NET Framework makes it easy to implement custom dialogs. By just assigning a couple of properties on your custom dialog form, or with a single line of code, your form can work just like a standard message box.
In a button-click event, set the dialog's DialogResult property to DialogResult. Ok or DialogResult. Use the ShowDialog [OwnerForm] method from the parent form. This method method returns the DialogResult value.
You can use all DialogResult members. Click the icon to select or deselect. The user can also drag the window to the right place, which is comfortable to the user. In a multitasking environment, multiple windows can get opened simultaneously and, they all have different functions. The menu contains a list of options for the user to choose from.
The menu bar appears horizontally on the screen, just like a menu. Click a choice in this menu and open the drop-down menu. Other types of menus are only displayed if the user has performed a specific action in the context menu—for example, right-click. When you had done, a menu will appear below the cursor. Small images files , programs, web pages , etc. This image is called an icon. Clicking on the icon gives you instant access, so you can use the icon to open a document or launch the program quickly.
You can also use graphical commands to read and manipulate information about the application. Also called a widget. Usually, widgets are get used to view a list of similar items and navigate the system using the Connections tab—data processing via logos, switches etc.
The label is get connected to the display window. It normally includes a text label or a graphic icon. If you are interested in a tabbed widget, several tabs allow you to edit the widget. Users can open multiple web pages in a web browser and edit pages with tabs. Excellent graphical interfaces for technicians or beginners often simplify life. For example, users can quickly complete an activity with a few clicks of a button. Non-technology can also effectively manage in-store products and software used to calculate the inventory.
Also, it is easy for everyone to listen to music in the car. Most software has a drag and drops function to manage complex tasks easily. This type of UI often contains multiple menus and other elements that are unique to the GUI, such as keyboard and mouse interactions.
It should work quickly and consistently, take up an adequate amount of system resources, have predominantly understandable elements to inexperienced users, and meet a number of other requirements. The Touchscreen Graphical User Interface requires users to interact with the device with their fingers.
It has become a commonly used option due to the popularity of portable devices. You come across touchscreen GUI when you look at almost anything on your phone or tablet. Overall, there are multiple pointing actions that users can utilize: length of motion, change in direction, change in velocity, lack of motion, path start and endpoints, pointing, tapping, looping, and time-based motions. Touchscreen Graphical User Interface can be used in a variety of ways, except for the forms that involve entering a lot of text, which is highly inconvenient for users.
Use UI elements like drop-down select and bullet-select, switch, or others similar that act similar to a button. Appropriate scaling is also important.
UI elements should not look huge on bigger displays; at the same time, users should be able to press the buttons comfortably on smaller devices. Make sure to space out buttons to prevent accidental clicks. Lastly, use touch-related design patterns such as swipe-to-delete or a shortcut to the menu by swiping from the left. An example is the settings menu on your phone.
All you can do is scroll the menu and tap items; no other interaction is available. Accordingly, it is used in applications with a familiar, limited, and uniform set of functions.
Menus are a very intuitive interface because of its limitations. You can scroll through the top completely and get a rough idea of what you can do. However, this is what you can build theoretically. In practice, one could mess it up. Speech recognizers convert human spoken audio into readable text strings and files. You should use SAPI if you want to implement a UI that enables the user to interact with your application through TTS and speech recognition in addition to the standard input devices such as the keyboard, mouse, and display.
This API is primarily intended for assistive-technology applications that enlarge parts of the screen to make them easier to see. It is intended for developers who are familiar with graphics programming concepts. For more information, see Magnification API. The Microsoft Windows Resource Compiler is an application development tool used to add UI and other resources to a Windows-based application.
A resource is any non-executable data used by an application, and includes such things as dialog boxes, menus, strings, cursors, icons, bitmaps, and so on. For more information, see Resource Compiler. This section describes the Microsoft technologies for developing UIs for managed Windows applications that run in the context of the. NET Framework. For more information, see. NET Development. Windows Forms is a graphical application programming interface for creating managed Windows applications that are based on the.
In Windows Forms, a form is a visual surface on which you display information to the user, and through which you receive input from the user. You build Windows Forms applications by adding controls to forms and developing responses to user actions, such as mouse clicks or key presses.
A control is a discrete UI element that displays data or accepts data input. Windows Forms contains a variety of controls that you can add to forms: controls that display text boxes, buttons, drop-down boxes, radio buttons, and even Web pages.
Windows Forms also supports creating custom controls. For more information, see Windows Forms. WPF is a presentation system for building and rendering user interfaces in Windows-based client applications and browser-hosted applications.
0コメント