[ht] human computer interaction 1
TRANSCRIPT
IDM BLOK Eopen data
HT 1 periode 4vak HCI
HUMAN COMPUTERINTERACTIONKlaas Jan Mollema MSc
IDMDENHAAGInformatieDienstverlening &informatieManagement
HTDENHAAGHuman Technology
Klaas Jan Mollema MSc
Docent opleiding IDM InformatieDienstverlening en -ManagementOnderzoeker Open Data, eSociety Instituut, HHSAdviseur digitale content Bibliotheek Gouda
IDM BLOK Eopen data
HT 1 periode 4vak HCI
IDMDENHAAGInformatieDienstverlening &informatieManagement
HTDENHAAGHuman Technology
introductiehet vak HCI
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
INTRODUCTIE OP HET VAK HCI
introductiehet vak HCI
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
Human–computer interaction (HCI) is the study of interaction between people (users) and computers. It is often regarded as the intersection of computer science, behavioral sciences, design and several other fields of study. Interaction between users and computers occurs at the user interface (or simply interface), which includes both software and hardware; for example, characters or objects displayed by software on a personal computer's monitor, input received from users via hardware peripherals such as keyboards and mice, and other user interactions with large-scale computerized systems such as aircraft and power plants. The Association for Computing Machinery defines human-computer interaction as "a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them."[1] An important facet of HCI is the securing of user satisfaction (see Computer user satisfaction).
introductiehet vak HCI
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
interaction between devices
introductiehet vak HCI
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
interaction between devices
introductiehet vak HCI
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
HCI beroepen- interaction designer- user interface designer- visual interface designer- front-end developer- programmeur- onderzoeker- productontwerper
College 1 : INTRODUCTIE HCI & OUTLINE JESSY JAMES GARRETT
College 2 : STRATEGY PLANE & SCOPE PLANE
College 3 : STRUCTURE PLANE & SKELETON PLANE
College 4 : SKELETON PLANE (patterns) & SURFACE PLANE
College 5 : USABILITY TESTEN
IDM BLOK Eopen data
HT 1 periode 4vak HCI
IDMDENHAAGInformatieDienstverlening &informatieManagement
HTDENHAAGHuman Technology
interactie versus interfaceopdracht: ideal interface
interaction design for the weboutline van ‘the elements of user experience’
opdracht: community HT -> User Needs & Site Objectives
IDM BLOK Eopen data
HT 1 periode 4vak HCI
IDMDENHAAGInformatieDienstverlening &informatieManagement
HTDENHAAGHuman Technology
afsprakenhet vak HCI
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
contactmomenten- werkcolleges (3 uur met pauze)
vragen- liefst klassikaal- als het niet anders kan per mail- mailsubject HT: vraag- emailtekst zo kort mogelijk- [email protected]
afsprakenhet vak HCI
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
Kom op tijd!
Neem ingangsopdrachten mee
Hou je mail in de gaten
College 1 : INTRODUCTIE HCI & OUTLINE JESSY JAMES GARRETT- interactie- outline van Jessy James Garrett
College 2 : STRATEGY PLANE & SCOPE PLANE
College 3 : STRUCTURE PLANE & SKELETON PLANE
College 4 : SKELETON PLANE (patterns) & SURFACE PLANE
College 5 : USABILITY TESTEN
IDM BLOK Eopen data
HT 1 periode 4vak HCI
IDMDENHAAGInformatieDienstverlening &informatieManagement
HTDENHAAGHuman Technology
interfacedefinitie
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
Een interface is een intermediair waarmee twee systemen met elkaar communiceren
interfacedefinitie
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
Interaction is a response experience in which both actor and reactor are engaged in a mutually affecting experience. This means that the system is comprised of two interactive partners. In the case of interactive media, one partner may only be mildly interactive (such as a computer) and only programmatically so. While most of the computer actor's actions are the result of predetermined programming, if the variations are wide enough, it can be said that this actor is interactive (making it an interactor). Nathan Shedroff
interactiedefinitie
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
Interaction is a kind of action that occurs as two or more objects have an effect upon one another.The idea of a two-way effect is essential in the concept of interaction, as opposed to a one-way causal effect. […] Every action has a consequence.
interactiedefinitie
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
Interaction is a response experience in which both actor and reactor are engaged in a mutually affecting experience. This means that the system is comprised of two interactive partners. In the case of interactive media, one partner may only be mildly interactive (such as a computer) and only programmatically so. While most of the computer actor's actions are the result of predetermined programming, if the variations are wide enough, it can be said that this actor is interactive (making it an interactor). Nathan Shedroff
interface vs. interactiecasus
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
NS kaartjesautomaat
interface vs. interactiecasus
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
NS kaartjesautomaat
interface vs. interactiecasus
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
Human Joysticks
interface vs. interactiecasus
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
augmented reality
opdracht:ideale interface
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
ontwerp nu jullie ideale interface. Laat je hierbij niet remmen door technologische (on-)mogelijkheden
visualiseer de interface en de mens-machine-interactie die deze interface mogelijk maakt
wat is interaction design?definitie
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
Designing interactive products to support the way people communicate and interact in their everyday and working livesSharp, Rogers and Preece (2007)
The design of spaces for human communication and interaction Winograd (1997)
doelen van interaction design?waarom is het ontwerp van interactie nodig?
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
Ontwerp gebruiksvriendelijke producten- Makkelijk te leren- Effectief te gebruiken- Een plezierige ervaring opleveren
Betrek gebruikers bij het ontwerpproces
what do professionals do in the ID businessrollen
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
Interaction designers - people involved in the design of all the interactive aspects of a product
Usability engineers - people who focus on evaluating products, using usability methods and principles
Web designers - people who develop and create the visual design of websites, such as layouts
Information architects - people who come up with ideas of how to plan and structure interactive products
User experience designers (UX) - people who do all the above but who may also carry out field studies to inform the design of products
what do professionals do in the ID businessrollen
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
Interaction designers - people involved in the design of all the interactive aspects of a product
Usability engineers - people who focus on evaluating products, using usability methods and principles
Web designers - people who develop and create the visual design of websites, such as layouts
Information architects - people who come up with ideas of how to plan and structure interactive products
User experience designers (UX) - people who do all the above but who may also carry out field studies to inform the design of products
Jullie zijn alle rollen in één in dit blok
user experienceIDM-‐ E open data
INTERACTION DESIGN
HT 1 periode 4HCI
How a product behaves and is used by people in the real world.The way people feel about it and their pleasure and satisfaction when using it, looking at it, holding it, and opening or closing it. “Every product that is used by someone has a user experience: newspapers, ketchup bottles, reclining armchairs, cardigan sweaters.” (Garrett, 2003).
Can’t design a user experience, only a design for a user experience.
vraag:Waarom was de ipod user experience zo’n succes?
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
stel: je gaat een product (her)ontwerpenHoe weet je nu dat je als ontwerper goed bezig bent?
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
een goed houvast is planmatig ontwerpenmet behulp van gebruikers
hiervoor gebruiken we het boek:The elements of user experience : User centered design for the webJessy James Garrett
meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
SURFACE PLANEwhat you see
SKELETON PLANEplacement of buttons etc.
STRUCTURE PLANEthe infrastructure
SCOPE PLANEfunctionality
STRATEGY PLANEwho whants what?
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
STRATEGY PLANEwho whants what?
meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product
- Site Objectives- User needs
Oftewel:- Wat willen de makers met de site bereiken?- Wat willen de gebruikers met de site bereiken?
En: formuleer je eisen zo duidelijk mogelijk: SMART
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
SCOPE PLANEfunctionality
meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product
“Defining the scope: a valuable process that results in a valuable product”
Oftewel:Bepaal de omvang en grootte van je project en dat hangt weer af van de tijd en middelen die je hebt
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
STRUCTURE PLANEthe infrastructure
meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product
“Concrete expression of the more abstract structure of the site”
Oftewel: Hoe is de navigatie in de website opgebouwd, welke onderwerpen horen bij elkaar?
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
SKELETON PLANEplacement of buttons etc.
meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product
- Interface design zoals checkboxes etc- Navigation design zoals global navigation- Hulpmiddelen zijn een site map en een index- Een hulpmiddel bij het ontwerpen is een ‘wireframe’
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
SKELETON PLANEplacement of buttons etc.
meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product
- Interface design zoals checkboxes etc- Navigation design zoals global navigation- Hulpmiddelen zijn een site map en een index- Een hulpmiddel bij het ontwerpen is een ‘wireframe’
IDM-‐ E open dataINTERACTION DESIGN
HT 1 periode 4HCI
SURFACE PLANEwhat you see
meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product
“At the top of the five-plane model we find the Visual Design. Here, content, functionality and aesthetics come together to produce a finished design.”
Oftewel: Hier komen alle onderdelen samen die het volledige design vormen waar in de vorige planes naartoe gewerkt is.