software interfaces marek milosz professional network of master’s degrees in informatics as a...

PROfessional network of Master’s degrees in Informatics as a Second Competence – PROMIS (544319-TEMPUS-1-2013-1-FR-TEMPUS-JPCR)

1

SOFTWARE INTERFACES

Marek MiloszHMI - 2


2

Agenda

HMI - 2

Types of software interfaces Material for interacting Interaction mechanisms

3


Text-based Interface, Text User InterfaceGraphical User Interface

Types of software interfaces

HMI - 2


4

Text User Interface

TUI The characters displayed on the monitor

in line or lines (text) Semigraphics or pseudographics Until today: emoticons (SMS, Skype, e-

mail,...) Encoding: ASCII ASCII art

HMI - 2


5

TUI - Emoticons

:) :-) ;-) :D :*

HMI - 2


6

TUI - ASCII art (1)

HMI - 2


7

TUI - ASCII art (2)

HMI - 2


8

Graphical User Interface

GUI Uses: graphics objects User interaction with graphical objects Methods:

Graphics cursor + Keyboard Mouse Touch screen Light pen ...

HMI - 2

9


Interface objects

Material for interacting

HMI - 2


10

Line of text

Type using a keyboard (physical or virtual)

Command line or text box Elements of I/O:

Forms Questions/answers Command line

HMI - 2


11

Menus

HMI - 2

Set of options displayed on the screen Options visible

less recall - easier to use rely on recognition so names should be meaningful

Selection by: numbers, letters, arrow keys mouse combination (e.g. mouse plus accelerators)

Options often hierarchically grouped sensible grouping is needed


12

Forms to fill

HMI - 2

Primarily for data entry or data retrieval Screen like paper form Data put in relevant place Requires

good design obvious correction

facilities


13

Windows

HMI - 2

Areas of the screen that behave as if they were independent: can contain text or graphics can be moved or resized can overlap and obscure each other, or can be

laid out next to one another (tiled) Scrollbars – allow the user to move the

contents of the window up and down or from side to side

Title bar – describes the name of the window


14

Icons

HMI - 2

Small picture or image Represents some object in the interface

– often a window or action Windows can be closed down (iconised) Icons can be many and various

highly stylized realistic representations standarisation in a particular environment

Hard to develop in many industrial cases


15

Icons – standards

HMI - 2


16

Pointers – cursors

HMI - 2

Shows point of input device activity

Texts vs. graphics Important component WIMP

style relies on pointing and selecting things

Uses mouse, trackpad, joystick, trackball, cursor keys or keyboard shortcuts

Wide variety of graphical images


17

Menus – kinds

HMI - 2

Menu Bar at top of screen (normally), menu drags down pull-down menu - mouse hold and drag down menu drop-down menu - mouse click reveals menu fall-down menus - mouse just moves over bar!

Contextual menu appears where you are pop-up menus - actions for selected object pie menus - arranged in a circle

easier to select item (larger target area) quicker (same distance to any option)

… but not widely used!


18

Menus - extras

HMI - 2

Cascading menus hierarchical menu structure menu selection opens new menu and so in ad infinitum

Keyboard accelerators key combinations - same effect as menu item two kinds

active when menu open – usually first letter active when menu closed – usually Ctrl + letter

usually different in different applications


19

Menus – design issues

HMI - 2

Which kind to use? What to include in menus? Words to use (action or description) How to group items? How to order items? Choice of keyboard accelerators

(possible conflicts)


20

Buttons

HMI - 2

Individual and isolated regions within a display that can be selected to invoke an action

Special kinds radio buttons

– set of mutually exclusive choices check boxes

– set of non-exclusive choices Parts of windows/forms


21

Toolbars

HMI - 2

Long lines of icons Fast access to common actions Often customizable:

choose which toolbars to see choose what options are on it


22

Ribbons

HMI - 2

Kind of toolbars Form of a set of toolbars placed on

several tabs Group and speed using of icons Mainly used in MS Office

23


Palettes and tear-off menus

Problem:menu not there when you want it!

Solution: tear-off and pin-up menus

– menu ‘tears off’ to become palette

palettes – little windows of actions – shown/hidden via menu option e.g. available shapes in drawing package

HMI - 2


24

Dialogue boxes

HMI - 2

Information windows that pop up to inform of an important event or to request information

Dirrerent types: alert, error, informational

Different icons used Modal windows


25

Dialogue boxes - symbols

HMI - 2

25


26

Other window objects

HMI - 2

Text field Choice field Label List …


27

Physical objects for interacting

HMI - 2

Buttons Devices – controllers Accelerometer Cameras …..

28


Interaction mechanisms

HMI - 2

29

Direct and indirect interaction

HMI - 2PROfessional network of Master’s degrees in Informatics as a

Second Competence – PROMIS (544319-TEMPUS-1-2013-1-FR-TEMPUS-JPCR)

system

interface real system

immediate

feedback

real feedback


30

Initiative

HMI - 2

Who has the initiative?old question–answer –> computerWIMP interface –> user

WIMP exceptions …pre-emptive parts of the interface

Modal dialog boxes come and won’t go away! good for errors, essential steps but use with care


31

Type of interaction mechanisms

HMI - 2

Instructions Talk, conversation (usually with avatars) Direct manipulation of objects (virtual or

physical, visual objects) Exploration (virtual or physical

environment)


32

Type of interfaces

Command line (Command Line Interface, CLI)

WIMP (Windows - Icons - Menus - Pointer) Natural User Interface (NUI) Voice Touch Gesture Multimodal Augmented reality

HMI - 2


33

Interface: CLI (1)

Command line Character cursor - keyboard (including

special keys F…) Specific residues: enter the text fields or

CAPCHA

HMI - 2


34

Interface: CLI (2)

HMI - 2


35

Interface: WIMP

Windows – Icons – Menus – Pointer

HMI - 2

36


Interface WIMP – precursor

Xerox Alto 1973 One of the first PC

using the Desktop Metaphor

HMI - 2


37

Xerox Alto – file manager

HMI - 2


38

Interface WIMP – Windows

HMI - 2

W1.0 – 1985; W3.0 – 1990, W95, W2000 Graphical, 16-bit multi-tasking shell on

top of an existing MS-DOS installation


39

Windows 3.0

HMI - 2

1990


40

Evolution of interfaces

HMI - 2

• Codified• StrictCLI

• Metaphor• Explorato

ryGUI • Direct

• IntuitiveNUI


41

NUI – Natural User Interface

HMI - 2


42

MUI – Modern User Interface

HMI - 2


43

Voice interface

HMI - 2

Hands-free and Eyes-free Disadvantage:

Noise Errors in identifying the command Snooping (lack of privacy of communication)

User Requirements: Hands free I do not need to look Close to customers

Problems


44

Voice interface - Avatars

HMI - 2


45

Touch interface

HMI - 2

It uses the sense of touch It can work two ways: input and output Input:

Touchpad Touchscreen

Output: Gloves and clothes making pressure

Special I/O devices using the Braille alphabet


46

Touchpad

HMI - 2

Mouse replacement device The advantage - built-in and requires no

additional work surface as a mouse The alternative - trackball (inverted

mouse) or the trackpoint (joystick)


47

Touchscreen

HMI - 2


48

Touchscreen – gestures (1)

HMI - 2


49

Touchscreen – gestures (2)

HMI - 2


50

Braille devices

HMI - 2


51

Gesture interface

HMI - 2

It uses the human body to transmit commands

Devices: Gloves with sensors 2D cameras 3D cameras Cameras with structured light Motion controllers


52

Cameras with structured light

HMI - 2

Use structural lighting (e.g. points or grid) to obtain information about the environment (3D)

Examples: Kinect (2010) EyeTracker

Kinect: Cloud of points (infrared LED + infrared camera) ->

image depth The image -> an ordinary 2D camera Microphones (4) Head rotating by motor (vertical) Accelerometer


53

Kinect – cloud of points

HMI - 2


54

Gesture interface – applications

HMI - 2

Entertainment Medical (no touch) Processing of large number of visual

data / graphics / multimedia


55

Augmented reality

HMI - 2

Overlaping the real and virtual images


56

Augmented reality - welding technology training

HMI - 2


57

Groupware Interfaces

HMI - 2

Provide the simultaneous interaction of a large number of participants


58

Brain-Computer interface

HMI - 2

BCI Recognition signals the brain working and

using them to transfer commands to a computer

Electroencephalograph Threats:

The accuracy of reading and interpreting The variety of people Variability of states of a single man Ethics: reading thoughts, control his thoughts and

so on


59

BCI – first experiments

HMI - 2


60

Physical object design

HMI - 2

Many constraints: ergonomic – minimum button size physical – high-voltage switches are big legal and safety – high cooker controls context and environment – easy to clean aesthetic – must look good economic – … and not cost too much!

Physical vs. logical state (button: on/off)

61


Thank you for attention

Questions?

HMI - 2

software interfaces marek milosz professional network of master’s degrees in informatics as a...

Documents