Scarica Human Computer Interaction: HCI e più Appunti in PDF di Sviluppo di Applicazioni Web solo su Docsity!
HCI
USER INTERFACE
Human–computer interaction HCI → is research in the design and the use of computer technology, which focuses on the interfaces between people (users) and computers.
HCI researchers observe the ways humans interact with computers and design technologies that allow humans to interact with computers in novel ways (approcci innovativi).
GOAL of HCI Allow effective operation and control of the machine from the human end (user) while the machine simultaneously feeds back information that aids the operators' (user) decision-making process.
User Interface UI The space where interactions between humans and machines occur.
GUI Graphical User Interface):
Employs graphical elements like windows and icons for interaction. Utilizes menus for commands and a pointer for navigation. WIMP interaction was developed at Xerox PARC (see Xerox Alto, developed in 1973 and popularized with Apple's introduction of the Macintosh in 1984 Defines the desktop metaphor of user interfaces.
Touch-Based Interfaces
Allow direct interaction through touch gestures. Common in mobile devices and tablets.
Desktop Metaphor
Support multi-touch gestures for complex commands.
Systems: Client-Server
Architecture where client requests resources, server provides them. Separates user interface (client side) from data processing (server side). Enables centralized data management and distributed access. Access from any device, anywhere
Multiple Interfaces: GUI, voice controlled interface, gesture-based interface…
Various UIs for one system (e.g., desktop, web, mobile app, voice- controlled, gesture-based). Ensuring consistent user experience across different platforms. Synchronizes data and user actions across devices for a seamless experience.
Guidelines
Multiple Users
Concurrent access and interaction to one system by multiple users. UI facilitates collaboration and shared access to resources. Essential for collaborative platforms and shared environments. CSCW Computer-Supported Cooperative Work): UI enables group work and collaboration.
WIDGETS
RADIO BUTTONS, PULLDOWN MENUS
Single select options, including radio buttons and pull-down menus, let users choose one option from a list. Radio buttons are best for a small number of options visible at once, while pull-down menus save space for longer lists.
CHECKBOXES, SWITCHES, MULTISELECT MENUS
Multiple select widgets, enable selection of more than one option. Checkboxes are straightforward for short lists, while multi-select menus are better for space conservation with longer option lists. Provide clear indicators for selected options and ensure the interface supports easy selection modification.
Visible or Not
The choice between making options always visible (radio buttons, checkboxes) or hidden (pull-down menus) impacts usability and space utilization. Visible options are immediately discoverable but can clutter the interface; hidden options save space but require an extra click to view. Consider user task flow and context to decide which approach enhances user experience.
PROGRESS BARS
Progress bars visually indicate the completion status of a task or process, enhancing user feedback. They should be used for actions with a noticeable duration to set user expectations about waiting times. Different styles (linear, circular) can be chosen based on the aesthetic and spatial constraints of the interface.
CHIPS
Chips are compact elements that represent input, attribute, or action tags, often used for selections, filters, or as entry tokens. They should provide clear labels and, if applicable, an easy way to deselect or remove the chip. Use chips to summarize user selections or to offer filter options in a condensed format.
FILTERS (e.g., Cursors, Calendars/Datetime)
GESTURES
Content: set of informations that are part of the system and that have meaning and utility for the user. GID (graphical input device): mechanism to communicate with the system a certain location or choice of an object (typically the cursorʼs position). GID button: main button for the GID
GIDs
Mouse Trackpad Pen Graphics tablet Trackball (old)
Tap: the action of pressing and releasing a button (which automatically goes back to its original state) Click: choose the position of the GID and then tap the GID button Drag: press the GID button without releasing it, move the GID, and then release the button
GESTURE A sequence of human actions that is automatically completed once started. E.g., writing a common word (like “andˮ) or pressing the “return" button/key.
A gesture is an input for the computer and produces an action.
MOUSE GESTURES
TRACKPAD
Tap (on the whole surface) = [left] click Double tap = double click Double tap without releasing the finger + swipe + release = drag & drop Tap with two fingers = right-click Swipe with two fingers = scroll Swipe, swipe from the border, swipe with more fingers
FITTSʼ LAW
Predicts that the time required to move to a target area is a function of the ratio between the distance to the target and the width of the target.
ID index of difficulty; D distance; W width (allowed error tolerance).
Magnification = ingrandimento.
Touch-based gestures
ID = log 2 ( )
W
2 D
Cancel or Undo an Action
Pages navigation: back, history
Users in control
HIERARCHICAL VIEWS
Traverse an information tree-structure Animated transitions: horizontal right-to-left Navigation Bar: Current screen title,back button (with title of prev screen) Disclosure indicators > Swipe right from left-edge = back
TABS
Tabs for different views on the data Hierarchy divided at the root level Forest of trees. Hierarchical navigation inside. Tab bar always visible Touch tab to go back to its root view
PYRAMID PATTERN
Navigate between sibling views at the same level
Low-friction modals User-solicited To dismiss: Swipe down, touch X, touch Cancel, touch outside
NONMODAL OVERLAYS
Cover a portion of the screen They donʼt block the interface e.g., notifications, toasts, volume indicator Interactive Can disappear automatically Often go unnoticed The user can dismiss them (e.g., swiping on a notification)
NAVIGATION in PRODUCTIVITY APPS
Experience focused on the execution of a task
Typical tasks: creating or manipulating objects, e.g.:
posts, messages, contacts, phone calls bank transactions
APPROACH
List of objects Hierarchical levels (n-ary tree) Tasks
ex. Gmail
Lists of conversations
Tap the conversation to see all mails from that conversation in a different view (moving through the tree, from the root to a branch node/leaf) Swipe to do other actions on the conversation (e.g., ‘postponeʼ or ‘archiveʼ) Tap the “composeˮ button to create a new conversation
ACCESSING the OBJECTS NOUNVERB
The typical approach is noun-verb You choose an object (e.g. a conversation) and then you choose an action (e.g., archive it). The object (e.g. list element) is represented in greater detail in a child view.
VIEW ANIMATIONS
The child view comes from the right, on top of the parent view (hierarchical navigation) The child view has a back button on the top left to go back to the parent view Touching ⟵ (back), we see the animation of the child view going right, revealing the parent view Itʼs as if the views were stacked on top of each other (the last to enter will be the first to leave, LIFO
ADDING an OBJECT VERBNOUN
Adding an object is instead verb-noun Example: you press ‘composeʼ (the button with the pencil) and then you can start writing (i.e. creating the new email) A modal view is opened: we are in a mode since all we can do is writing an email Modal views come from below, covering the current view When we touch the done button (e.g., Send) the modal view closes, disappearing from below and revealing again the view that we were in before
Mode : creating a new message
SINGLE LOCUS of ATTENTION
We can only focus on one of the things that we perceive contemporarily.
INTERFACE
Trying to execute simultaneously two tasks that require our locus of attention:
will only worsen the performance of both they will be executed alternately, simulating the contemporaneity
ENGAGED
When youʼre engaged in something, youʼre not paying attention to the other things that are happening
An event (internal or external) can shift the locus of attention
Frequently scanning the environment to notice events that would be missed otherwise: when youʼre fully engaged, this scanning is not repeated
GETTING USERʼS ATTENTION
Focusing increases with stress. Challenging or delicate task: the user tends to focus only on some essential aspects of it, warnings and hints given by the interface are ignored.
Exploiting userʼs attention predict the locus of attention ⟶ modify other parts of the UI without the user noticing
AUTOMATION TASKS
We can do other tasks that do not require our locus of attention. We do them automatically —“without thinking.ˮ We can take care of multiple automatic tasks at the same time. All the tasks that we do simultaneously are automatic except one - the one requiring our locus of attention.
E.g., walking while eating and thinking about the solution to a mathematical problem (which is non-automatic?
HABITS
Tasks done several times create a (positive) habit that allows the user to execute them without thinking.
Trying to concentrate the train of thought on the details of the execution can make it impossible to do such tasks.
E.g., walking, driving, playing the piano, etc.
Itʼs tough to break a habit with a gesture of will (e.g., driving on the right for the first time)
Sequence of actions ⟶ automatic task
A sequence of actions executed several times becomes an automatic task Breaking an automatic sequence requires shifting the locus of attention to it
HABITS and UI DESIGN
Use of a UI creates habits.
e.g., imperfect confirmation of intents:
Delete file: “Are you sure? y/nˮ
The designer can take advantage of this, favoring those habits that help facilitate the userʼs work.
INTERRUPTED WORK
CHANGE of CONTEXT
Preparing for the following task:
a previously interrupted task a new task
Usually, a change of context requires seconds. If it becomes a habit, it can take less.
Help resume a previous task → go back to the previous locus of attention
UI can help: showing the last displayed screen, moving the cursor where it was left off
START a NEW TASK
Button to activate or deactivate the alarm Bell icon to show the alarm state (on/off) Display without backlight In the dark, you canʼt see the display: not knowing the system state, you canʼt determine the effect of pressing the button
CAPS LOCK yet another example
The Caps lock button creates a mode oFTEN YOU START WRITING, AND ONLY LATER YOU NOTICE THE MISTAKE And yet a green LED on the button is clearly showing the system state Furthermore, some applications have another indicator for the caps lock in the status bar So why do we make this mistake? How can we prevent it?
The indicators for capital letters are not in the userʼs locus of attention
MODE ERRORS
You want to go to a new line, but you submit the form You want to switch on your car, but you switch it off (not realizing it is already on) You think you switched on the alarm clock, but the next morning it does not wake you up You write a text in all caps
Inexperience doesnʼt help. Experience doesnʼt protect from errors, too: the expert has acquired habits.
How to MINIMIZE the MODE ERRORS
Do not have modes Make sure that the modes are distinctively marked Make sure that the commands required by different modes are not the same so that a command issued in the wrong mode will not lead to difficulty
DEFINITION
A UI is modal regarding a given gesture when:
The current state of the UI is not the locus of attention of the user
AND
The UI will react to the gesture with one between N possible replies, depending on the state
A non-modal interface is non-modal with respect to all possible gestures.
TEMPORARY MODES and QUASIMODES
Temporary mode: a mode that disappears after use (e.g. brush in Word, activated with only one click). Quasi-mode: a mode obtained activating and maintaining physically a control: e.g. capital letter buttons, CTRL button.
NOUNVERB VERBNOUN
Executing actions (verbs) on objects (nouns)
Noun-verb: first you select the object Verb-noun: first you select the action
ex. Change font and Tool palette are Noun-verb
PROS and CONS
The style “verb-nounˮ creates a mode In the “noun-verbˮ style: You select an object while it is in the locus of attention The locus of attention moves on the action and then... Interrupting the action doesnʼt require another action (cancel or escape)
IMPLICIT INTERACTION
CONTEXT
Understanding context is essential for usability design-time vs use-time How many different contexts?
