Ch 14 - Human Computer Interaction and UX Design

HCI

Means ensuring system functionality and usability, providing effective user interaction support, and enhancing a pleasant user experience.

User Experience (UX) Design

A customer-first method for designing software

How Fit Affects Performance and Well-Being

• Fit

• Task

• Performance

• Wellbeing

Fit

A good fit between the HCI elements of the human, the computer, and the task that needs to be performed leads to performance and well-being.

Task

Tasks can be structured and routine, or they can be ill defined and without apparent structure

Performance

It refers to a combination of the efficiency involved in performing a task and the quality of the work produced by the task

Well-Being

A concern for a human’s overall comfort, safety, and health

Usabiliy

Exploring usability through an HCI lens, we focus on usability as a way for designers to evaluate the systems and interfaces they create with an eye toward addressing as many HCI concerns as thoroughly as possible

Designing for the Cognitive Styles of Individual Users

• Pivot Tables

• Visualizations

Pivot Tables

Visualizations

• Visualization is the representation of data as a chart, graph, or other image. Innovative visual displays of data have existed for quite some time, even as early as the eighteenth century.

Physical Considerations in HCI Design

• Vision

• Hearing

• Touch

Considering Human Limitations, Disabilities, and Design

Implementing Good HCI Practices

1. Matching the user interface to the task.

2. Making the user interface efficient.
3. Providing appropriate feedback to users.

4. Generating usable queries.

5. Improving the productivity of computer users.

Types of User Interfaces

• Natural-Language interfaces

• Question-and-answer interfacees

• Menus

• Form fill interfaces

• Command language interfaces

• Graphical user interfaces

• Variety of web interfaces for use on the internet

Natural Language Interfaces

The dream and ideal of inexperienced users because they permit them to interact with the computer in their every day, or natural, language.

Example: Apple Iphone, Siri

Question-and-Answer Interfaces

Computer displays a question to the user on the display

• User must enter an answer

Menus

Limited to the options displayed

Nested menues

Allow the screen to appear less cluttered, which is consistent with good design

Form-Fill Interfaces

Onscreen forms or web-based form-fill interfaces that allow users to input data in a structured format, often used for collecting information or processing transactions.

Choosing and Evaluating Interfaces

1. The necessary training period for users should be acceptably short.

2. Early in their training, users should be able to enter commands without thinking about them or without referring to a help menu or manual. Keeping interfaces consistent throughout applications can help in this regard.

3. The interface should be seamless so errors are few and those that do occur are not occurring because of poor design.

4. The time users and the system need to bounce back from errors should be short.

5. Infrequent users should be able to relearn the system quickly.

UX Design (user experience design)

• A customer-first method for designing software that observes the behavior of customers and strives to enhance customer satisfaction and loyalty

UI or GUI (user interface design)

Designing for smooth itneraction with emphasis on layout, menus, and buttons for input and graphs, charts, and tables for output

Traditional Design vs User Experience (UX) Design

In traditional design, strategic objective motivate the design effort, whereas in user experience design, the user motivates the design effort

The UX designer considers these issues:

1. Have the user’s needs been met without any complications?

2. Does the workflow proceed without requiring any extra or duplicate steps?

3. Is the user able to complete the task without being forced to recall something from an earlier step?

4. If the user makes a mistake, can it be corrected easily?

5. Is the interaction natural to the user?

6. Can the user be more efficient by using shortcuts?

7. Does the user feel in control of the system?

Do’s and Don’ts of UX Design

Do’s

• Do create simple and stress free sign-ins

• Do make the default choices user friendly

• Do design to specs that describe the majority of users

• Do provide a way out

• Do keep your eye on users

Don’ts

• Don’t masquerade ads as content

• Don’t clock the users from seeing the content

• Don’t ask the user for too many permissions

• Don’t spring surprises at checkout

• Don’t stop texting

UX Design Guidelines: An Ecommerce Example

1. Explain the shipping costs early and make them easy to discover.

2. Update the prices in a Save for Later area dynamically and provide a note to users. A change in price (either up or down) can remind users to act.

3. Allow customers to remove items from their shopping cart or bag and to easily change the quantities of items in the cart.

4. Clearly indicate credit card fees and transaction fees.

5. Allow customers to continue shopping or proceed to checkout after an item has been placed in the shopping cart or bag.

6. As customers move to the next page during Checkout, and before they enter payment information, remind them of the transaction details.

Benefits of UX Design

1. Tasks can be completed more quickly by the customer.

2. More tasks can be completed in a given amount of customer time.

3. Task results can be more accurate.

4. Less support is needed to address user complaints arising out of a poor user experience.

5. Users will complete the transaction rather than abandoning their cart and leaving the site.

6. Customers will remain loyal and not seek other websites or software.

7. The user will be more satisfied with the overall experience.

Designing Interfaces for Smartphones and Tablets

Touch-sensitive screens allow a user to use a finger to activate the display

The operating systems for these small devices use multitouch gestures (capacitive sensing featuring screens controlled with a human finger or a conductive stylus) for moving from one screen to another or from one state to another on the same screen.

• Gestures

• Alerts, Notices, and Queries

• Badges

Intelligent Personal Assistants

• Virtual assistants

• Software agents that can accept commands written or spoken from users and perform tasks based on that input

Virtual Reality

an artificial, totally computer-generated world. The user interacts with this artificial world and in doing so is completely immersed in the experience through vision and hearing.

Augmented reality

combines artificial elements with the real world.

Metaverse

A massively scaled and interoperable network of real-time rendered 3D virtual worlds which can be experienced synchronously and persistently by an effectively unlimited number of users with an individual sense of presence, and with continuity of data, such as identity, history, entitlements, objects, communications, and payments

Assisted reality.

Any technology that allows a user to view a screen and use hands- free controls to interact with it.

Meatspace.

An attempt at a humorous characterization of the actual physical world where humans spend the majority of their time. Human flesh and blood. The opposite of the internet. The antonym for cyberspace.

Mixed reality.

This has the real world as its setting, and then adds virtual objects that can appear and interact with users as if they are real.

Multiverse.

Refers to many distinct spaces operating as separate entities in the context of technology, the internet, and social media platforms. Users can congregate to mingle, play games, and take advantage of ecommerce shopping. Familiar examples are Facebook, Minecraft, and Instagram. One theory asserts that the Metaverse could bring all multiverses into one space.

Guidelines for Dialog Design

1. Meaningful communication, so that the computer understands what people are entering and people understand what the computer is presenting or requesting

2. Minimal user action

3. Standard operation and consistency

Dialog

Communication between a computer and a person.

Minimal User Action

1. Keying codes, such as airport codes when making a flight reservation, instead of whole words on entry screens.

2. Entering only data not already stored on files.

3. Supplying the editing characters (for example, slashes as date field separators).

4. Using default values for fields on entry screens.

5. Designing an inquiry (or change or delete) program so that the user needs to enter only the first few characters of a name or item description.

6. Providing keystrokes for selecting pull-down menu options.

7. Using radio buttons and drop-down lists to control displays of new web pages or to change web forms.

8. Providing cursor control for web forms and other displays so the cursor moves to the next field when the right number of characters has been entered.

Standard Operation and Consistency

1. Locating titles, date, time, and operator and feedback messages in the same places on all displays.

2. Exiting each program by using the same key or menu option.

3. Canceling a transaction in a consistent way, such as using the Esc key.

4. Obtaining help in a standardized way, such as using a function key.

5. Standardizing the colors used for all displays or web pages.

6. Standardizing the use of icons for similar operations when using a GUI.

7. Using consistent terminology in a display screen or website.

8. Providing a consistent way to navigate through the dialog.

9. Using consistent font alignment, size, and color on web pages.

Feedback

Compares current behavior with predetermined goals and gives back information describing the gap between actual and intended performance.

Types of Feedback

• Acknowledging acceptance of input

  • “You payment has been processed”

• Recognizing that input is in the correct form

  • a user inputs a command, and the feedback states “READY” as the program progresses to a new point.

• Notifying that input is not in the correct form

  • “The telephone number should be separated by dashes (-).”

• Explaining a delay in processing

  • An hourglass or rotating circle

• Acknowledging that a request is completed

• Notifying that a request was not completed

• Offering the user more detailed feedback

Soliciting Feedback from Ecommerce Website Customers

• The first way is to launch the user’s email program with the email address of the company’s contact automatically entered into the To: field.

• ake users to a blank message template when they click on Feedback

intuitive navigation

Navigating a site w/out having to learn a new interface

one-click navigation

• Roll Over Menus

• Hierarchical Links

• Site Map

• Navigation Bar

• Other Navigation Options

Roll over Menu

A roll-over menu (or roll-over button) can be created with cascading style sheets with JavaScript and HTML divisions. The rollover menu appears when the customer using the website moves the cursor over a link.

Hierarchical Links

Creating an outline of the content of the site through the presentation of a table of contents on the home page that enables users to navigate through different levels of information quickly and intuitively.

Site Map

Designing and then prominently displaying the link to a site map that helps users understand the structure of a website and navigate easily to various sections.

Navigation bars

Consistently displayed on the home page as well as at the top and on the left of all other pages that coomprise the site

Other Navigation Options

Designing a website with navigation for users with different cognitive processing or interests is desirable.

Mashups

Many mashups are open source, so developers can use an API from a site like Google Maps and combine it with an API that contains other data, resulting in a new website that creates an entirely new application.

application programming interface (API)

a set of small programs and protocols used like building blocks for building software applications. When two or more APIs are used together, they form a mashup

Cookie Compliance

ensures that a website uses cookies only in ways permitted by law. Cookies, as you may recall, are text files that are stored on a visitor’s browser in order to observe and track the visitor

1. Strictly necessary cookies, for example, those cookies that keep the user logged into the site or remember the contents of the visitor’s shopping cart.

2. Preference or functional cookies, for example, those that remember the visitor’s preferred language for future browsing sessions.

3. Analytics cookies, which compile statistics cookies that can track how visitors use a website so that the owner can improve the website’s performance

4. Marketing cookies that allow advertisers to display targeted ads. This may include giving permission to supply information to third parties for advertising purposes.

The following are general rules and practices that systems analysts should know that apply to cookie permissions.

1. Permission needs to be given before cookies are processed

2. Consent definitions need to be intelligible using plain English

3. Consent must be freely given

4. A record of the consent must be kept

5. A visitor has the right to reverse their consent decision

6. Content permission should be renewed every year, although some guidelines

   suggest every six months

Chatbot

A software that responds to human queries in conversational ways, answers questions posed, and also deals with specific requests for information

voice recognition

Designing queries

When users ask questions of, or communicate with, a database, they are said to query it.

Query Type 1

The entity and one of the entity’s attributes are given. The purpose of the query is to find the value. The query can be expressed as follows:

What is the value of a specified attribute for a particular entity?

Query Type 2

The intent of the second query type is to find an entity or entities when an attribute and value are given. Query type 2 can be stated as follows:

What entity has a specified value for a particular attribute?

Query Type 3

The purpose of this query type is to determine which attributes fit the description provided when the entity and value are given. Query type 3 can be stated as follows:

What attribute(s) has a specified value for a particular entity?

Query Type 4

Query type 4 is similar to query type 1. The difference is that the values of all attributes are desired. Query 4 can be expressed as follows:

List all the values for all the attributes for a particular entity.

Query Type 5

The fifth type of query is another global query, but it is similar in form to query type 2. Query type 5 can be stated as follows:

What employee(s) earned more than The notation for query type 2 is

In this case, three employees made more than the employee numbers for the three employees:

Query Type 6

The sixth query type is similar to query type 3. The difference is that query type 6 requests a listing of the attributes for all entities rather than a particular entity. Query type 6 can be stated as follows:

List all the attributes that have a specified value for all entities.

Building More Complex Queries

Arithmetic, comparative, and Boolean operators are processed in a hierarchical order of precedence unless parentheses are used.

Query methods

• Query by example (QBE)

• Structured query language (SQL)

Query by example (QBE)

Simple but powerful method for implementing queries in database systems, such as Microsoft Access.

SQL

It uses a series of words and commands to select the rows and columns that should be displayed in the resulting table.