Desenho De Interfaces Joao Jose Saraiva Da Fonseca

Desenho de Interfaces João José Saraiva da Fonseca http://joaojosefonseca1.blogspot.com/ Apresentação elaborada no âmbito de estudo sobre a temática

Designing the User Interface

Ben Shneiderman

3rd edition - Addison Wesley, New York, U.S. 1998.

companion web site: htttp://www.aw.com/DTUI maintained by Blaise Liffick

3 pointers to www resources on the topics of the book are:

http://usableweb.com/hciel (Keith Instone)

http://is.twi.tudelft.nl/hci/ (Hans de Graaf)

http://www.ida.liu.se/labs/aslab/groups/um/hci (Mikael Ericsson)

João José Saraiva da Fonseca

Chapter 18 Designing User Interfaces Systems Analysis and Design Kendall and Kendall Fifth Edition João José Saraiva da Fonseca

The User Interface

The user interface is the system which helps users communicate with the computer system and/or the application system

João Jose Saraiva da Fonseca 18- João José Saraiva da Fonseca

Present Situation

computer pervasiveness implies many, ≠ users

which, in turn, means many, ≠ interfaces

web, games, databases, simulation, business, training, education, etc. are but a few of the applications

impacting on: info organization, query languages, 3d representations, animation, direct manipulation, telepresence, virtual realities...(sw)

novel keyboards, high resolution colour displays, speech i/o, gestural inputs, force-feedback devices, touchscreen & stylus...(hw)

Goals of User-Interface Design

If the previous issues have been addressed then developers must focus on design and testing

Careful determination of the user community and benchmarks for testing

five measurable human factors:

time to learn

speed of performance

rate of errors by users

retention over time

subjective satisfaction

Motivations for Human Factors Design

Life critical systems

Industrial and commercial uses

Office, home and entertainment applications

Exploratory, creative and cooperative systems

CSCW, distance learning, videoconferencing...

high motivation but also high expectation...

Context awareness

Ubiquitous computing

Wearable computing

the computer should vanish...

User Interface Design Objectives

To design a better user interface, use the following objectives:

Effectiveness as achieved through design of interfaces that allow the user to access the system in a way that is congruent with their individual needs

Efficiency as demonstrated through interfaces that increase speed of data entry, and reduce errors

Joao Jose Saraiva da Fonseca 18- João José Saraiva da Fonseca

User Interface Design Objectives

Further interface design objectives

User consideration as demonstrated in designing suitable interfaces, and providing appropriate feedback to users from the system

Generating usable queries

Productivity as shown through following sound principles of design for user interfaces and work spaces

Components of the User Interface

The user interface has two main components

Presentation language, which is the computer-to-human part of the transaction

Action language that characterizes the human-to-computer portion

Types of User Interfaces

There are several types of user interfaces:

Natural-language interfaces

Question-and-answer interfaces

A menu interface

Form-fill interfaces

Command-language interfaces

Graphical User Interfaces (GUIs)

Natural-Language Interfaces

Natural-language interfaces permit users to interact with the computer in their everyday or "natural" language

Question-and-Answer Interfaces

Question-and-answer interfaces

The computer displays a question for the user on the screen

The user enters an answer via the keyboard

The computer acts on that input information in a preprogrammed manner

New users may find the question-and-answer interface most comfortable

A Menu Interface

A menu interface, which provides the user with an onscreen list of available selections

A nested menu is a menu which can be reached through another menu

Advantages of Nested Menus

The advantages of nested menus are

Nested menus give a less cluttered screen

Nested menus eliminate menu options which do not interest a user

Nested menus allow users to move quickly through the program

Graphical User Interface (GUI) Menus

GUI menus guidelines

The main menu is always on the screen

The main menu uses single words

The main menu should have secondary menus grouped into similar features

Graphical User Interface (GUI) Menus

Further GUI menus guidelines

The secondary drop-down menus often consist of more than one word

Secondary options perform actions or display additional menu options

Menu items in gray are unavailable for the current activity

Form-Fill Interfaces

Form-fill interfaces are onscreen forms displaying fields containing data items or parameters that need to be communicated to the user

Form-fill interfaces may be implemented using the Web

Advantages and Disadvantages of Web Forms

Advantages of using a Web-based form

User enters the data

Data may be entered 24 hours a day, globally

Disadvantages of a Web-based form

The user may not know what to enter if the form is not clear

User might be nervous about using a credit card over the Internet

Command-Language Interfaces

Command-language interfaces are more popular than the previous ones

Allow the user to control the application with a series of keystrokes, commands, phrases, or some sequence of these

Graphical User Interfaces (GUIs)

GUIs provide a strong metaphor of the application

Allow direct manipulation of the graphical representation on the screen

Can be accomplished with keyboard input, joystick, or mouse

Requires more system sophistication than other interfaces

Dialog

Dialog is the communication between a person and the computer

Three key points to be considered

Meaningful communication

Minimal user action

Standard operation and consistency

Communication

Communication means that the user understands the information that is being presented

Users with less skill require a greater amount of communication

Provide easy to use help screens

Often these contain hyperlinks to other related help topics

Minimal User Action

Minimal user action is achieved by

Entering codes instead of code meanings

Enter only data that are not stored on files

Not requiring users to enter editing characters

Supplying default values on entry screens

Providing inquiry programs with short entry fields

Minimal User Action

Further key points

Providing keystrokes for selecting menu options that are normally selected using a mouse

Selecting codes from a pull-down menu on a GUI screen

Provide context-sensitive menus, displayed when the right mouse button is clicked on an object

Standard Operation

Standard operation is achieved by

Keeping header and footer information in the same locations for all screens

Using the same keystrokes to exit a program

Using the same keystrokes to cancel a transaction

Using a standard key for obtaining help

Standard Operation

Further key points

Standardized use of icons when using graphical user interface screens

Consistent use of terminology within a screen or Web site

Providing a consistent way to navigate through the dialog

Consistent font alignment, size, and color on a Web page

Tab Control Dialogue Boxes

Tab control dialog boxes are a feature of GUI design

They should have logically grouped functions on each tab

Each tab dialog box should have OK, Cancel or Apply, and perhaps Help buttons

Joao Jose Saraiva da Fonseca 18-

Voice or Speech Recognition

Voice or speech recognition systems are developing rapidly

There are two different types of voice recognition:

Continuous speech systems, allowing for dictation

Speaker independence, so people can enter commands or words at a given workstation

Joao Jose Saraiva da Fonseca 18-

Evaluating User Interfaces

The five useful standards in evaluating the interfaces are

The training period for users should be acceptably short

Users early in their training should be able to enter commands without thinking about them, or referring to a help menu or manual

Evaluating User Interfaces

Continued evaluation guidelines

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

Time necessary for users and the system to bounce back from errors should be short

Infrequent users should be able to relearn the system quickly

Feedback

All systems require feedback in order to monitor and change behavior by

Comparing current behavior with predetermined goals

Giving back information describing the gap between actual and intended performance

Types of Feedback

Feedback to the user is necessary in seven distinct situations:

The computer has accepted the input

The input is in the correct form

The input is not in the correct form

There will be a delay in processing

The request has been completed

The computer cannot complete the request

More detailed feedback is available

Program Help

Program help comes in a variety of ways:

Pressing a function key, such as F1

A GUI pull-down menu

Context-sensitive help, specific for the operation being performed

Iconic help, obtained when a cursor is left over an icon for a few seconds

Program Help

Program help options, continued

Wizards, which provide a series of questions and answers when trying to perform an operation

Telephone help desks provided by the software manufacturer

Software forums on nation wide bulletin boards

Ecommerce Dialog

Extra considerations are needed when developing ecommerce Web sites

Feedback needs to be solicited from customers, using either of two methods:

Launch the user’s email program

Create a blank feedback template with a submit button labeled “feedback”

Intuitive Navigation for Ecommerce Sites

Intuitive navigation should be designed

Creating a rollover menu

Building a collection of hierarchical links

Placing a site map on the home page and emphasizing the link to it from every page on the site

Placing a navigational bar on every inside page that repeats the categories used on the entry screen

Types of Queries

There are six different types of queries:

Obtain specified data for a particular entity

Find a group of entities that have certain characteristics

Find attributes for an entity for certain characteristics

Display all the attributes for a certain entity

Types of Queries

Different types of queries (continued):

Find all entities with a certain characteristic

List attributes for all entities for certain characteristics

Query Notation

V is value, E is entity, A is attributes, variables in parentheses are given:

Query type 1: V <--- (E,A)

Query type 2: E <--- (V,A)

Query type 3: A <--- (V,E)

Query type 4: V <--- (E, all A)

Query type 5: E <--- (V, all A)

Query type 6: A <--- (V, all E)

Methods for Implementing Queries

There are two methods for implementing database queries:

Query By Example (QBE), which allows users to select fields and specify conditions using a grid

Structured Query Language (SQL), which uses a series of keywords and commands to select the rows and columns that should be displayed

Parameter Queries

A parameter query allows users to enter a value to select records without changing the query syntax

Web Searches

Web searches use search engines to answer a query

Guidelines for searching the Web

Decide whether to search or surf the Web

Think of the key terms before searching

Construct the search questions logically, with attention to the use of AND and OR search logic

Web Searches

Further guidelines for searching the Web are:

Use a search engine that saves your searches

Use a search engine that informs you of changes in the Web sites you select

Look for new search engines periodically

Data Mining

Data mining is gathering a large amount of information about a person and their habits and using that information as a predictor of future behavior

It must be carefully and ethically used to avoid infringing on an individual’s privacy

Ergonomics

Systems analysts should consider an ergonomically sound working environment even though they usually don't have much control over the design of the workspace

Ergonomics

Some of the important working environmental variables to be considered are

Room color and lighting

VDT or LCD screens

User keyboards

Computer desks

User seating

Accomodation of Human Diversity

Physical abilities and physical workplaces

American National Standard for Human Factors Engineering of Visual Display Terminal Workstations

Work-surface and display support height

Clearance under work surface for legs

Work-surface width and depth

Adjustability of heights and angles for chairs and work surfaces

Posture-seating depth and angle, back-rest height and lumbar support

Availability of armrest footrest and palmrests

Use of chair casters

Room layout and sociology of human interaction

multiple workstations - encourage/hinder social interaction

privacy versus open space office

physical design of workplaces belongs to ergonomics

Cognitive and perceptual abilities

Ergonomics Abstracts:

Short-term memory

Long-term memory and learning

Problem solving

Decision making

Attention and set (scope of concern)

Search and scanning

Time perception

Factors affecting perceptual and motor performance

Arousal and vigilance

Fatigue

Perceptual (mental) load

Knowledge of results

Monotony and boredom

Sensory deprivation

Sleep deprivation

Anxiety and fear

Isolation

Aging

Drugs and alcohol

Circadian rhythms

Personality Differences

Men/women

Interaction styles

Pace of interaction

Graphics versus Text

Dense versus sparse

Step-by-step versus all-at-once

Myers-Briggs Type Indicator

Extroversion vs introversion

Sensing versus intuition

Perceptive versus judging

Feeling versus thinking

Many other psychological scales have been suggested...

Risk taking versus risk avoidance

Internal versus external locus of control

Reflective versus impulsive behaviour

Convergent versus divergent thinking...

Cultural and international diversity

Cultural, ethnical, racial, linguistic background

User interface design concerns for internationalization include:

characters, numerals, special characters

left to right vs right to left (vertical vs horizontal)

date and time formats

numeric and currency formats

telephone numbers and addresses

names and titles (Mr., Mrs., Mme., Dr.)

Social security, national identification, passport #

capitalization and punctuation

...plus

sorting sequences

icons, buttons, colours

pluralization, grammar, spelling

etiquette, policies, tone, formality, metaphors

Companies should run usability studies in each country, culture and language community

Users with disabilities

for low vision (even blind)

for hearing impairments

for mobility impairments

can all be acomodated

special i/p devices

speech recognition

eye-gaze control

head-mounted optical mouse

were pioneered for disabled users

Elderly users

growing population of senior citziens

Writing, accounting, education, entertainment, social interaction, communication and challenge

increased access of the society

increased participation through networks

improved chances for productive employment

government agencies, universities, medicalcenters, law firms could use senior experience

e-mail connection enriches family life

4 aprile 2003

examples

larger street signs

brighter traffic lights

better nighttime lighting

larger fonts

higher display contrast

easier-to-use pointing devices

louder audio tones

simpler command languages

golden age software + kidware: large opportunities

Human Interfaces

need to understand and measure human performance

awareness to human-factors issues

knowledge and techniques of traditional psychology to be used for studying human-computer interaction

information science, business and management, education, sociology, anthropology are allcontributing and benefitting by their study of human-computer interaction

Directions of Study I

Reduced anxiety and fear of computer usage

Graceful evolution

methods to smooth the transition from novice to knowledgeable user to expert

adaptation and evolution are open topics addressed in the re-design of control panels

Specification and implementation of interaction

building tools reduce 10% if the tool is adapted to the task

Specification and implemtation of interaction

building tools for interface construction

Directions of Study II

Direct manipulation - which is the “best” metaphor? - new forms: visual languages, spatial visuallization, remote control, telepresence, virtual reality