Chapter 10

Human Computer Interaction Layer Design

Explain three important user interface design principles.

The authors list six principles of user interface design:

Layout – the interface should be a series of areas on the screen that are used consistently for different purposes.

Content Awareness – the user is always aware of where they are in the system and what information is being displayed.

Aesthetics – interfaces should look inviting and should be easy to use.

User Experience – experiences users prefer ease of use, while inexperienced users prefer ease of learning.

Consistency – users can predict what will happen before a function is performed.

Minimize Effort – interface should be simple to use.

What are three fundamental parts of most user interfaces?

Navigation mechanism – the way the user gives instructions to the system and tells it what to do.

Input mechanism – the way in which the system captures information.

Output mechanism – the way the system provides information to the user or to other systems.

Why is content awareness important?

Content awareness means that the interface makes the user aware of the information delivered through the interface with the least amount of user effort. This is important because if the user is constantly aware of where he is and what he is seeing, he will find the system much easier to use and his satisfaction will be high.

What is white space and why is it important?

White space refers to areas on an interface that are intentionally left blank. The more white space on an interface, the less dense the information content. Designer need to try and strike a balance between information content and white space. Some white space is necessary to help the users find things on the interface. Generally, more experienced users need less white space than novice users.

Under what circumstances should densities be low? High?

Low densities are preferred by infrequent or novice users of an interface. These users will be unfamiliar with the interface and will be helped by having a balance of information and white space on the interface. High densities can be acceptable to experienced users of the interface, because they are highly familiar with the information on the interface and do not need as much white space to help them find what they are looking for.

How can a system be designed to be used by experienced and first time users?

Experienced users prefer systems that focus on ease of use, while novice users prefer systems that are easy to learn. These two goals are not necessarily mutually exclusive. Generally, systems should be set up so that the commonly used functions can be accessed quickly, pleasing the experienced users. To assist the novice users, guidance should be readily available, perhaps through the “show me” functions that demonstrate menus and buttons.

Why is consistency in design important? Why can too much consistency cause problems?

Consistency means that all parts of the same system work in the same way. This enables the users to predict what will happen because a function in one part of the system works the same way in other parts of the system. Users will be confident as they work with different parts of the system if they can predict the behavior of functions throughout the system. The problem with too much consistency is that sometimes the users don’t differentiate forms or reports that look very similar to each other, and inadvertently use the wrong one. So, in these cases, there should be enough unique characteristics to distinguish each form and report from the others.

How can different parts of the interface be consistent?

The navigation controls can be consistent, using the same icon or command to trigger an action throughout the system. Terminology can be consistent throughout the interface. The content portion of the screen that contains forms and reports should also present consistently designed reports and forms. Messages and information in the status area should be specified consistently throughout the system.

Describe the basic process of user interface design.

First, identify ‘use cases’ that describe commonly used patterns of actions that users will perform. These use cases will be valuable in ensuring that the interface permits the users to enact these use cases quickly and smoothly. Next, develop the interface structure diagram, defining the basic structure of the interface (screens, forms, and reports) and how the interface components connect. Third, develop interface standards, the basic design elements that will be used throughout the interface. Fourth, create prototypes of the various interface components (navigation controls, input screens, output screens, forms, and reports). Finally, evaluate the prototypes and make changes as needed.

What are use scenarios and why are they important?

Use scenarios describe commonly used patterns of actions that users will perform. Use cases describe how users will interact with the system. Use cases are developed for the most common ways of working through the system. These use cases will be valuable in ensuring that the interface permits the users to enact these use cases quickly and smoothly

What is a window navigation diagram (WND) and why is it used?

A window navigation diagram defines the basic structure of the interface. These diagrams show all the screens, forms, and reports in the system, how they are connected, and how the user moves from one to another. The diagram helps depict the basic components of the interface and how they work together to provide users the needed functionality. The structure of the interface depicted in the WND can be examined using the use cases to see how well the use cases can be performed. This is an important early step in developing simple paths through the most common activities performed in the system.

Why are interface standards important?

Interface standards help define the basic, common design elements in the system. These standards help ensure consistency throughout the system.

Explain the purpose and contents of interface metaphors, interface objects, and interface actions, interface icons, and interface templates.

The interface metaphor provides a concept from the real world that helps the user understand the system and how it works. If the user understands the metaphor being used, he will probably be able to predict where to find things and how things will work even without actually using the system.

Interface objects are the fundamental building blocks of the system. Object names should be based on the most understandable terms.

Interface actions specify the navigation and command language style and the grammar of the system. Action terminology is also defined.

Interface icons are pictures that are used to represent objects and actions in the system, often shortcuts, that are available throughout the system.

The interface template defines the general appearance of all screens in the information system and all forms and reports that are used. The template consolidates all the other major interface design elements – metaphors, objects, actions, and icons.

Why do we prototype the user interface design?

Prototyping helps the users and programmers understand how the system will perform. Prototypes can be very useful in helping the users conceptualize how they will actually work with the system, and prototypes can help identify problems or misconceptions in the interface before it is actually implemented.

Compare and contrast the three types of interface design prototypes.

Storyboards are really just pictures or drawings of the interface and how the system flows from one interface to another. HTML prototypes are web pages that show the fundamental parts of the system. Users can interact with the system by clicking buttons and entering data, moving from page to page to simulate navigating through the system. Language prototypes create models of the interface in the actual language that will be used to implement the system. These will show the user exactly what the interface will look like, which is not possible with the other two methods.

Why is it important to perform an interface evaluation before the system is built?

An interface assessment is important before the system is built because we need to do as much as we can to improve the interface design prior to implementation. It is wasteful to wait until after implementation to evaluate the interface because it will be expensive to go back and modify the interface at that point.

Compare and contrast the four types of interface evaluation.

These techniques vary in terms of the degree of formality and the amount of user involvement. Heuristic evaluation involves assessing the interface based on a checklist of design principles. Team members, who independently assess the interface and then compare their assessments, usually perform this assessment. Weaknesses that are common in all the evaluations then point to areas that need modification. Users are not involved in this process. In a walkthrough evaluation, the users see the interface at a meeting presentation, and they are “walked-through” the parts of the interface. The interactive evaluation can be used when the prototype as been created as an HTML or language prototype. The users can actually interact with the interface as if they were using the system, and can give direct comments and feedback based on their experience. Problems or areas of confusion can be noted and corrected by the team. Formal usability testing has the users interacting with the interface without guidance from the project team. Every move made by the user is recorded and then analyzed later in order to improve the interface.

Under what conditions is heuristic evaluation justified?

Heuristic evaluation is probably justified in situations where the interface is well understood. When there is little uncertainly about how the interface should function, then it is probably sufficient to just assess it internally by comparison to a checklist of design principles. It would be dangerous to use this technique (which does not involve users) if there was uncertainty about what should appear in the interface or how it should function.

What type of interface evaluation did you perform in the Your Turn 10-1?

This is an example of heuristic evaluation, since the interface is being compared to a set of design principles.

What are Krug’s three design principles?

First, the user should never have to think about how to navigate the user interface.

Second, he suggests that the number of clicks that a user must perform to complete their task is somewhat irrelevant.

Third, minimize the number of words on the screen.

Describe three basic principles of navigation design.

The navigation component of the interface enables the user to enter commands to navigate through the system and perform actions to enter and review information it contains. The three basic principles of navigation design are:

Prevent Mistakes: The first principle of designing navigation controls is to prevent the user from making mistakes. Mistakes can be reduced by labeling commands and actions appropriately and by limiting choices.

Simplify Recovery from mistakes: No matter what the system designer does, users will make mistakes. The system should make it as easy as possible to correct these errors.

Use consistent grammar order: One of the most fundamental decisions is the grammar order. The grammar order should be consistent throughout the system, both at the data element level as well as at the overall menu level.

How can you prevent mistakes?

Mistakes can be reduced by labeling commands and actions appropriately and by limiting choices. Too many choices can confuse the user, particularly when they are similar and hard to describe in the short space available on the screen. When there are many similar choices on a menu, consider creating a second level of menu or a series of options for basic commands.

Explain differences between object-action order and action-object order.

The fundamental goal of the navigation design is to make the system as simple to use as possible, by preventing the user from making mistakes, simplifying the recovery from mistakes, and using a consistent grammar order. One of the most fundamental decisions is the grammar order. Most commands require the user to specify an object (e.g., file, record, word), and the action to be performed on that object (e.g., copy, delete). The interface can require the user to first choose the object and then the action (an object-action order), or first choose the action and then the object (an action-object order).

Describe the four types of navigation controls.

There are two traditional hardware devices that can be used to control the user interface: the keyboard and a pointing device such as a mouse. There are three basic software approaches for defining user commands: languages, menus, and direct manipulation.

Languages: With a command language, the user enters commands using a special language developed for the computer system (e.g., UNIX and SQL both use command languages). Command languages sometimes provide greater flexibility than other approaches because the user can combine language elements in ways not predetermined by developers.

Menus: The most common type of navigation system today is the menu. A menu presents the user with a list of choices, each of which can be selected. Menus are easier to learn than languages because a limited number of available commands are presented to the user in an organized fashion.

Direct Manipulation: With direct manipulation, the user enters commands by working directly with interface objects.

Why are menus the mostly commonly used navigation control?

The most common type of navigation system today is the menu. A menu presents the user with a list of choices, each of which can be selected. Menus are easier to learn than languages because a limited number of available commands are presented to the user in an organized fashion. Clicking on an item with a pointing device or pressing a key that matches the menu choice (e.g., a function key) takes very little effort. Therefore, menus are usually preferred to languages.

Compare and contrast four types of menus.

The types of menus are Menu bar, drop-down menu, pop-up menu, tab menu, tool bar, and image map.

Menu bar: This is the main menu of the system. It gives a list of commands at the top of the screen and is always displayed on the screen.

Use the same organization as the operating system and other packages.

Menu items are always one word, never two.

Menu items lead to other menus rather than perform action.

Never allow users to select actions they can’t perform

Drop-down menu: This is the second level of menu often from the main menu. This is the menu that drops down immediately below another menu and disappears after one use.

Menu items are often multiple words

Avoids abbreviations

Menu items perform action or lead to another cascading drop-down menu, pop-up menu, or tab menu.

Pop-up Menu: This mainly serves as a short cut to commands for experienced users. This menu pops up, floats over the screen and then disappears after one use.

Pop-up menus often (not always) invoked by a right click in Windows-based systems.

These are often overlooked by novice users so usually they should duplicate functionality provided in other menus.

Tab Menu: This menu is often used when the user needs to change several settings or perform certain related commands. This is a multipage menu with one tab for each page that pops up and floats over the screen and continues to remain on the screen until it is closed.

Menu items should be short to fit on the tab label.

Avoid more than one row of tabs, because clicking on a tab to open it can change the order of the tabs and in virtually no other case does selecting from a menu rearrange the menu itself.

Under what circumstances would you use a drop down menu versus a tab menu?

The drop down menu can be used if the user is new or in experienced. This is mainly used since the tab menu is used more often when the user needs to change several settings in order to perform several related commands and more over since it is multi-page menu, this could often lead to confusion when the user is new.

Drop down menu being the second level of menu is more elaborate and has no abbreviations in it and it performs action or leads to another cascading drop down, pop up or tab menu. This menu is comparatively much more user friendly as compared to the tab menu.

Under what circumstance would you use an image map versus a simple list menu?

An image map is used only when the graphic image adds meaning to the menu. In other words, it is commonly used when a graphic image has certain area linked to the actions or other menus.

The list menu is the second level menu after the menu bar and performs action or leads to another cascading drop-down menu, pop-up menu or tab menu.

Describe five types of messages.

Messages are the way in which the system responds to a user and informs him or her of the status of the interaction. There are 5 types:

Error message: This pops up when the user does something that is not permitted to inform the user that he or she has attempted to do something to which the computer cannot respond.

Confirmation message: When a user selects a potentially dangerous operation such as deleting a file, a confirmation message asks the user if he or she is sure of performing this operation.

Acknowledgment message: Seldom used this informs the user that the operation or task was successfully completed.

Delay message: More common when the action requested is delayed and informs the user that the computer is working properly.

Help message: This is present in all systems and provides additional information about the system and its components.

What are the key factors in designing an error message?

All messages should be crafted with care, especially the error messages. The key factors, which need to be kept in mind while designing an error message, are:

Should always explain the problems in polite succulent terms

Should explain corrective action as clearly and as explicitly as possible

In case of complicated errors, the error message should display what the user has entered and suggest probable causes for error.

When in doubt provide either more information than the user needs or ability to get additional information.

Error message should provide error number

What is context-sensitive help? Does your word processor have context-sensitive help?

Context sensitive help provides information that is dependent on what the user was doing when the help was requested. Word processors do have context sensitive help.

How do an essential use case and a real use case differ?

An essential use case is one that only describes the minimum essential issues necessary to understand the required functionality. A real use case will go further and describe a specific set of steps. The primary difference is that essential use cases are implementation independent, while real use cases are detailed descriptions of how to use the system once it is implemented. As such, real use cases tend to be used only in detailed design, implementation, and testing.

What is the relationship between essential use cases and use scenarios?

An essential use case is a major process that the system will perform that benefits an actor in some way and is labeled using a descriptive verb-noun phase. There are times when a use case includes, extends, or generalizes the functionality of another use case on the diagram.

On examining the use case and sequence diagrams analysts interviewed the users to develop user scenarios that describe commonly employed patterns of actions the users will perform so the interface enables users to quickly and smoothly perform these scenarios. A use scenario is an outline of the steps that the users perform to accomplish some part of their work. A use scenario is one path through an essential use case.

Use scenarios are presented in a simple narrative description that is tied to the essential use cases developed during the analysis phase. The key point with using use cases for interface design is not to document all possible use scenarios within a use case. The goal is to document two or three of the most common use scenarios so the interface can be designed to enable the most common uses to be performed simply and easily.

What is the relationship between real use cases and use scenarios?

A use scenario is an outline of the steps that the users perform to accomplish some part of their work. A use scenario is one path through an essential use case. Real use cases are derived from the essential use cases. The design of the navigation for a system is done through the use of window navigation diagrams (WND) and real use cases. Real use cases are derived from the essential use cases (see Chapter 6), use scenarios, and WNDs. A real use case describes a specific set of steps that a user performs to use a specific part of a system. As such, real use cases are implementation dependent.

Explain three principles in the design of inputs.

Input design means designing the screens used to enter the information, as well as any forms on which users write or type information (e.g., timecards, expense claims). The goal of the input mechanism is to simply and easily capture accurate information for the system. The fundamental principles for input design reflect the nature of the inputs (whether batch or online) and ways to simplify their collection.

Online versus Batch Processing: There are basically two methods of entering inputs into a system online processing and batch processing. With online processing or transaction processing each input item is entered into the system individually usually at the same time as the event or transaction prompting the input. With batch processing, all the inputs collected over some time period are gathered together and entered into the system at one time in a batch.

Capture data at the source: Perhaps the most important principle of input design is to capture the data in an electronic format at its original source or as close to the original source as possible.

Minimize Keystrokes: Another important principle is to minimize keystrokes. Keystrokes cost time and money, whether a customer, user, or trained data-entry operator performs them.

Compare and contrast batch processing and online processing. Describe one application that would use batch processing and one that would use online processing.

There are basically two methods of entering inputs into a system online processing and batch processing. With online processing or transaction processing each input item is entered into the system individually usually at the same time as the event or transaction prompting the input. Online processing is most commonly used when it is important to have real-time information about the business process. For example, when you reserve an airline seat, the seat is no longer available for someone else to use.

With batch processing, all the inputs collected over some time period are gathered together and entered into the system at one time in a batch. Some business processes naturally generate information in batches. For example, most hourly payrolls are done using batch processing because time cards are gathered together in batches and processed at once. Batch processing also is used for transaction processing systems that do not require real-time information.

Why is capturing data at source important?

Perhaps the most important principle of input design is to capture the data in an electronic format at its original source or as close to the original source as possible. In the early days of computing, computer systems replaced traditional manual systems that operated on paper forms. Many business processes still operate this way today. For example, most organizations have expense claim forms that are completed by hand and submitted to an accounting department, which approves them and enters them into the system in batches. There are three problems with this approach. First, it is expensive because it duplicates work (the form is filled out twice, once by hand, once by keyboard). Second, it increases processing time because the paper forms must be physically moved through the process. Third, it increases the cost and probability of error, because it separates the entry from the processing of information; someone may misread the handwriting on the input form, data could be entered incorrectly, or the original input may contain an error that invalidates the information.

Describe four devices that can be used for source data automation.

Source data automation refers to using special hardware devices to automatically capture data without requiring anyone to type it. Four devices that can be used are:

Bar codes: These automatically scan products and that enter data directly into the computer system.

Optical character recognition: This can read printed numbers and text. (e.g., checks)

Magnetic stripe readers: This can read information encoded on a stripe of magnetic material similar to a diskette. (e.g., credit cards)

Smart cards: These contain microprocessors, microchips and batteries, very similar to credit card sized calculators.

Describe five types of input.

There are many different types of inputs:

Text: As the name suggests, a text box is used to enter text. Text boxes can be defined to have a fixed length or can be scrollable and can accept a virtually unlimited amount of text. In either case, boxes can contain single or multiple lines of textual information.

Numbers: A number box is used to enter numbers. Some software can automatically format numbers as they are entered, so that 3452478 becomes $34,524.78. Dates are a special form of numbers that sometimes have their own type of number box.

Selection Boxes: A selection box enables the user to select a value from a predefined list. The items in the list should be arranged in some meaningful order, such as alphabetical for long lists, or in order of most frequently used. The default selection value should be chosen with care. There are different types of Selection boxes

Check boxes

Radio buttons

Onscreen list boxes

Drop-down list boxes

Combo boxes

Sliders

Compare and contrast check boxes and radio buttons. When do you use one versus the other?

Check boxes are used when several items need to be selected from the list. This presents a complete list of choices each with a square box in front. These are not mutually exclusive.

Radio buttons are used when only one item is selected from a mutually exclusive item list. They are represented by a complete list of mutually exclusive items with a circle in front.

Compare and contrast on-screen list boxes and drop-down list boxes. When do you use one over the other?

On-screen list boxes: Seldom or rarely used, this is only availed when there is insufficient room for check boxes or the radio buttons. This presents the list on the form of a box and helps in making a single or multiple choices. The advantage is that since the box represents the choices to be scrolled on this occupies less space on the screen.

Drop-down list boxes: Being the last resort when there is insufficient room to display all choices, drop-down list box comes handy where the selected item is displayed in one-line box that opens up to reveal the list of choices. This is more compact and hides the choices unless it is opened by the user. This type of box simplifies design if the number of choices is unclear, because it takes only one line when closed.

Why is input validation important?

Input validation is important as all data which is entered into the system needs to be validated in order to ensure their accuracy.

Describe five types of input validation methods.

There are six types of validation methods. Five of which are described below:

Completeness check: When several fields need to be entered before the form can be processed, completeness check ensures that all required data have been entered. If the completeness check is not done and the information provided id incomplete then the form is returned to the user unprocessed.

Range check: A range check permits only numbers between correct values. It ensures that all numeric data entered are within correct minimum and maximum values.

Consistency check: Data fields are often interrelated. When this happens, consistency check ensures that the combination of the data is valid. Although it is impossible for the system to know which data are incorrect, it can report the error to the user for correction.

Format check: When fields are numeric and contain coded data, format check ensures that the data are of right type. Ideally numeric fields should not permit users to type text data but if this is not possible, then the data entered should be checked to ensure that it is numeric.

Database checks: Usually data are compared against information in the database to ensure that they are correct. When this occurs, the database check ensures that the comparison of the data against the data base is correct.

Explain three principles in the design of outputs.

The fundamental principles for output design reflect how the outputs are used and ways to make it simpler for users to understand them.

Understand Report Usage: The first principle in designing reports is to understand how they are used. Reports can be used for many different purposes. In some cases—but not very often— reports are read cover to cover because all information is needed.

Manage information load: Most managers get too much information, not too little (i.e., the information load that the manager must deal with is too great). The goal of a well-designed report is to provide all of the information needed to support the task for which it was designed. This does not mean that the report needs to provide all the information available on the subject—just what the users decide they need in order to perform their jobs.

Minimize Bias: No analyst sets out to design a biased report. The problem with bias is that it can be very subtle; analysts can introduce it unintentionally. Bias can be introduced by the way in which lists of data are sorted because entries that appear first in a list may receive more attention than those later in the list.

Describe five types of outputs.

There are many different types of reports, such as detail reports, summary reports, exception reports, turnaround documents and graphs.

Detailed report: Lists detailed information about all the items requested.

Summary report: Lists summary information about all items

Turn around document: Turn around documents is a special type of report that is both outputs and inputs. In other words, outputs which turn around and become inputs.

Graphs: Charts that are used in addition to and instead of tables of numbers.

Exception report: Lists detailed information about certain specific items.

When would you use electronic reports rather than paper reports and vice versa?

There are many different types of media used to produce reports. The two dominant media in use today are paper and electronic.

Paper report: Being more traditional and permanent, paper is easy to use and is accessible in most situations. Highly portable at least in short reports. Considering the fact that they are inflexible, once information printed of any changes done then the entire report needs to be reprinted which is expensive affair. They also require large storage space and are hard to be moved quickly on long distances.

Electronic report: Considering the above-mentioned drawbacks about paper, more organizations are moving to electronic production of reports where reports are printed but stored electronically on file servers or web servers. Electronic reports can be produced on demand; they also enable users to search for certain words. They also provide a means to support ad-hoc reports where users customize the contents of the report at the time the report is generated. Some users still print the electronic report on their own printers, but the reduced cost of electronic delivery over distance and the ease of enabling more users to access the reports than when they were only in paper form usually offsets the cost of local printing.

What do you think are three common mistakes that novice analysts make in navigation design?

One of the hardest things about using a computer system is learning how to manipulate the navigation controls to make the system do what you want. Analysts usually think that:

The users have read the manual

The users have attended proper training classes

The users can seek or rather have external help readily available.

What do you think are three common mistakes that novice analysts make in input design?

Failure to perform proper input validation.

Use of overly cumbersome forms

Using the wrong controls for a given input item

What do you think are three common mistakes that novice analysts make in output design?

Presenting the user with too much information

Using reports that are inconsistent with existing business processes

Using reports that are difficult for the user to read

How would you improve the form in Figure 10-4?

The form shown in Fig 11-4 is very unpleasant to users and makes it difficult as its density is too high and it has too much information packed into too small of space.

It is important to have a good font size, which is no less than 8 points, and it’s often preferred to be 10 points. Never use all capital letters, except possibly for titles. Color and patterns should be used carefully and sparingly and only when they serve a purpose. (About 10 percent of men are color blind, so the improper use of color can impair their ability to read information.)

The goal is to have a pleasant readability, not art; color and patterns that are use to strengthen the message, not overwhelm it. It’s important to focus on:

User Experience

Consistency and

Minimize user efforts

What are some of the nonfunctional requirements that can influence the design of the human computer interaction layer?

Perhaps more so than any other aspect of the system, the human-computer interface is affected by a host of nonfunctional requirements. Among them are the following.

Operational requirements, such as choice of hardware and software platforms

Performance requirements

Security requirements such as access controls implemented to protect the objects from unauthorized access

Cultural and political requirements that include multilingual requirements and unstated social norms

52. What are the six challenges you face when developing mobile applications?

Tidwell identifies six challenges that a mobile user interface designer must face. First, the screen size of a phone is tiny. There simply is not a lot of “real estate” available to use (see Figure 10-B). Second, not only are the screens tiny, but they come in different sizes. What works on one screen, may not work on another screen. Third, some screens have haptic abilities, i.e., they respond to touch, orientation, and in some case, they vibrate. Obviously, these abilities are not available on all mobile devices. However, they do provide interesting possibilities for user interface design. Fourth, virtual and actual physical keypads are tiny. Consequently, too much typing can be challenging for the user to input the right information. Fifth, people use their mobile devices, especially their phones, in all kinds of environments. They use them in dark places (like a poorly lit classroom). They use them in bright sun light. They use them in quiet places (like the library or movie theater) and they use them in noisy places (such as at a Virginia Tech football game). These devices are simply used everywhere today. Sixth, because these devices are used everywhere, the users can be easily distracted from the device.

53. What are the six suggestions to address the mobile computing challenges?

Based on these challenges, Tidwell provides a set of suggestions that you should follow in designing a user interface for these devices. First, given the mobile context, you really need to focus on what the user needs and not what the user may want. In other words, you really should go back to business process and functional modeling (Chapter 4). In this case, only focus on the tasks that the user will need to perform when they are in the mobile context. This is a good example of a non-functional requirement (mobile computing) impacting the possible functional requirements.

Second, if you are porting an application or web site to a mobile device, remove all “fluff” from the site. By that we mean, strip the site down to its bare essentials. If for some reason, the user needs access to the full site, be sure to provide a link to it in an obvious location. Alternatively, you could provide a complete mobile version of the application or web site to the user. Obviously, the design of the user interface will be different, but the functionality should be the same.

Third, whenever possible, take advantage of the unique capabilities built into these devices. Some of the devices will have GPS built-in. Depending on your application, knowing where the user is could change the results. In other cases, devices such as the iPadTM, have an accelerometer that allows the app to “know” the orientation of the device. Many of devices have speech recognition capabilities, cameras that can be used for scanning, touch screens that allow sophisticated gestures to be used, and haptic feedback, such as bumps and vibrations. All of these capabilities could prove useful in developing different mobile applications.

Fourth, when considering a phone, you tend to have a limited width from which to work. Consequently, you should try to linearize the content of the application (see Figure 10-25). By that we mean, take advantage of vertical scrolling and try to minimize, if not eliminate, horizontal scrolling. It is simply more natural for users to scroll up and down instead of left to right on these devices.

Fifth, optimize your mobile application for the user. This will include minimizing the number of times the device must interact with a server to download or upload information with a server. Not everyone will have access to 3G, alone true 4G, networks. In many cases, uploading and downloading is still very slow. Optimization also includes the user’s interaction with the device. Instead of using a lot of typing, scrolling, and taps on a touch screen, consider using the speech recognition capability. It’s a lot easier to speak slowly to a smartphone than it is to have to type a lot into a virtual or physical keyboard.

Finally, Tidwell provides a set of reusable patterns that have been customized for mobile devices. These include things such as a vertical stack, filmstrip, and bottom navigation to name a few.

54. With regards to social media, what is the difference between “push” and “pull” approaches to interacting with customers?

If the user must come to you to find out something, then you are using a pull-based approach. On the other hand, if you put the information out to the user, then you are using a push-based approach. When it comes to social media, you really need to use a combination of the approaches. For example, in Facebook if someone posts on your wall or sends you a request, Facebook will send you an email message to try an entice you back to the Facebook site. The act of posting to your site was a pull-based action, while the email message sent to you is a push-based action. In a nutshell, you want to focus on more of a push-based approach. You want your content to get to your customers in as an effective manner as possible. You don’t want them to have to come looking for you. Encourage them to opt-in for update notifications to come to them in a form that they prefer. Some may prefer email notifications, while others may prefer you post to their Facebook or Twitter accounts. Also, be sure to include links to your social media sites on your home page. But, be sure not to overwhelm the customer. Not every customer wants to know every tidbit regarding the firm. Only give the customer what the customer wants. Remember, Krug’s first principle: Don’t Make Me Think! A corollary to this principle for social media would be: Don’t Make Me Work! So, make it easy for the customer to find only what they want (or maybe what we want them to want).

55. Why is it important to keep your social media sites synced?

Be sure that your home page and your social media sites are all synced together so that when one is updated, the other sites “know” about the update. This will make your job of maintaining the different sites much easier and it will allow your customers to have a consistent experience across all sites. However, don’t overdue this. It is obvious that different sites have different media and, potentially, different audiences. You aren’t going to use FacebookTM in the same way you would use TwitterTM, YouTubeTM, or a blog. Also, be sure to include crosslinks between the different sites. This will enable your customer to easily navigate through your different sites. For example in Figure 10-27, we see that Wiley has supported the ability to join email lists and the ability to link to Apple’s iTunes store to download apps produced by Wiley on their home page. However, they do not provide links to either their Facebook or Twitter sites.

56. How can you keep your customers engaged with your social media sites?

You can include buttons that allow them to email the content to their closest “friends” or other followers in their own social network. You also should provide a means to gather feedback from your customers regarding your content. One way is to include the ability for customers to make and share comments regarding your content. Another way is to provide a voting or “like” mechanism to encourage the customer to become engaged with your site.

57. What are some of the multilingual issues that you may face when developing for a global audience?

Global applications often have multilingual requirements, which means that they have to support users who speak different languages and write using non-English letters (e.g., those with accents, Cyrillic, Japanese). One of the most challenging aspects in designing global systems is getting a good translation of the original language messages into a new language. Words often have similar meanings but can convey subtly different meanings when they are translated, so it is important to use translators skilled in translating technical words

58. How important is the proper use of color when developing web sites for a global audience? Give some examples of potential pitfalls that you could run into.

The meaning associated with a color is totally culturally dependent. In fact, black and white isn’t necessarily black and white; they could be white and black. In most Western cultures, black is associated with death, mourning, and grief or with respect and formality. For example, in the US, we typically wear black to a funeral or you would expect to see religious leaders in black (think about the robes typically worn by a Catholic priest). While in many Eastern cultures, white is associated with death or the color of robes worn by religious leaders. In an example reported by Singh and Pereira, when senior citizens in the US and India were asked to “visualize the following statement: A lady dressed in white, in a place of worship,” the results that came back were as near to the opposite as one could get. In India, the lady would be a widow, while in the US she would be expected to be a bride.

Other colors that have meanings that are culturally driven include green, blue, red, yellow, and purple. In the US, red implies excitement, spice passion, sex, and even anger, in Mexico, it indicates religion, in the UK, authority, power, and government, in Scandinavian countries, strength, while in China, it means communism, joy, and good luck; quite a diversity of meanings. The color blue is associated with Holiness in Israel, cleanliness in Scandinavia, love and truth in India, loyalty in Germany, and in the US, it represents trust, justice, and “official” business. In Ireland, the color green signifies nationalism and Catholicism, while in the US, it denotes health, environmentalism, safety, greed, and envy. To say the least, green is a very confusing color for Americans. While in the Arab Middle East, green is a sign of Holiness, in France, green represents criminality, and in Malaysia, it signifies danger and disease. The color yellow also has many culturally dependent meanings. In the US, it is associated with caution and cowardice, in Scandinavia, warmth, in Germany, envy, and in India, commerce. Finally, the color purple signifies, death, nobility, or the Church in Latin America, US, and Italy, respectively. Obviously, when building a web site for a global audience, colors must be chosen carefully. Otherwise, unintentional messages will be sent.

59. Name the three cultural dimensions that are relevant to user interface design identified by Hall. Why are they relevant?

Hall identified three dimensions that are directly relevant to user interface design: speed of messages, context, and time. The speed of messages dimension deals with how fast a member of a culture is expected to understand a message and how “deep” the content of a typical message will be in a culture. The deeper the message content, the longer it will take for a member of a culture to understand the message. For example, two different approaches to describe a historical event would be a news headline (fast and shallow) and a documentary (slow and deep). According to Hall, different cultures will have different expectations as to the content of and response to a message. This particular dimension has implications for the content of the message contained in the user interface. Krug’s third design principle turns out to be culturally driven. For a Western audience, minimizing the number of words contained in a user interface makes sense. Westerners prefer to get to the point as fast as possible. However, this is not true for Eastern cultures. Consequently, for a firm like Amazon.com, providing detailed reviews and short excerpts from a book provides support for a slow and deep culture, while providing bullet point types of comments supports the fast and shallow culture. By providing both, Amazon.com addresses both needs.

The second dimension, context, deals with the level of implicit information that is used in the culture versus the information needing to be made explicit. In high context cultures, most information is known intrinsically and does not have to be made explicit. Therefore, the actual content of the message is fairly limited. However, in low context cultures, everything must be spelled out explicitly to avoid any ambiguity, and therefore the message will need to be very detailed. You will find this dimension causing problems when attempting to close a business deal. In most Western societies, the lawyers want everything spell out. In contrast, in most Eastern societies, it may, in fact, be considered insulting to have to spell everything out. From a web site design perspective Singh and Pereira point out that in a high context culture, focusing the design on aesthetics, politeness, humility will produce an effective web site, while in a low context culture, things such as the terms and conditions of a purchase, the “rank” of the product and firm, and the use of superlatives in describing the product and firm are critical attributes of a successful web site.

Hall’s third dimension, time, addresses how a culture deals with many different things going on simultaneously. In a polychronic time culture, members of the culture will tend to do many things at the same time, but be easily distracted, and view time commitments as something that is very flexible. Whereas with monochronic time cultures, members of the culture will solve many things by focusing on one thing at a time, being single-minded, and consider time commitments as something that is set in stone. When designing for a polychronic culture, the liberal use of “pop-up” messages might be “fun” and engaging, while in a monochronic culture, “pop-up” messages simply annoy the user. In the past, northern hemisphere-based cultures have been monochronic and southern hemisphere-driven cultures have been polychronic. However, with the use of email interrupts and text messaging, this could change over time.

60. Name the four cultural dimensions that are relevant to user interface design identified by Hofstede. Why are they relevant?

The first dimension, power distance, addresses how the distribution of social power is dealt with in the culture. In cultures with a high power distance, members of the culture believe in the authority of the social hierarchy. In low power distance cultures, members of the culture believe that power should be more equally distributed. Consequently, in cultures with a high power distance, emphasis on the “greatness” of the leaders of the firm, the use of “proper titles” for members of the firm, and the posting of testimonials on behalf of the firm by “prominent” members of society is important. International awards won by the firm, its members, or its products should also be posted prominently on the website.

The second dimension, uncertainty avoidance, addresses to what degree a culture is comfortable with uncertainty. A culture with a high uncertainty avoidance will have members who will avoid taking risks, value tradition, and be much more comfortable in a rule-driven society. The higher the culture is on uncertainty avoidance, the more customer service will need to be provided, the more important “local” contacts need to be available, an emphasis on the firm’s and product’s history and tradition is provided on the web site, and in the case of software, the use of free trials and downloads is critical. In other words, you need to build trust and reduce perceived risk between the customer and the firm. This can be supported through things such as product seals of approval or the use of WebTrust and SysTrust certifications for the Web site. Furthermore, merely translating a web site from a low uncertainty avoidance culture to a high uncertainty avoidance culture will not be sufficient. You also need to point out relationships between the local culture and the firm’s products.

The third dimension, individualism versus collectivism, is based on the level of emphasis the culture places on the individual or the collective, or group. In the West, individualism is rewarded. However, in the East, it is believed by focusing on optimizing the group, the individual will be most successful. In other words, it is the group that is the most important. In a collective society, presenting information on how the firm “gives back” to the community, supports “member” clubs, “loyalty” programs, and “chat” facilities, and provides links to “local” sites of interest are very important characteristics for a web site. In contrast, in an individualistic society, providing support for personalization of the user’s experience with the web site, emphasizing the uniqueness of the products that the user is viewing, and emphasizing the privacy policy of the site are critical.

Hofstede’s fourth dimension, masculinity versus femininity, does not mean how men and women are treated by the culture. But, instead this dimension addresses how well masculine and feminine characteristics are valued by the culture. For example, in a masculine culture characteristics such as being assertive, ambitious, aggressive, competitive are valued, while in a feminine culture, characteristics such as being encouraging, compassionate, thoughtful, gentle, cooperative are valued. In masculine cultures, a focus on the effectiveness of the firm’s products is essential. Also, clearly separating male and female-oriented topics and placing them on different sections of a web site can be critical. According to Singh and Pereira, feminine cultures will value a focus on aesthetics and using more of a “soft-sell” approach where the focus is on more affective, intangible aspects of the firm, its members, and its products is more appropriate.

Obviously, operationalizing Hall’s and Hofstede’s dimensions for effective user interface design is not easy. However, given today’s global markets, ignoring cultural issues in user interface design, whether it is for an internal system used only by employees of the firm or an external system that is used by customers, will most certainly cause a system to fail. This is especially true when you consider mobile and social media sites.