SlideShare a Scribd company logo

Human Computer Interaction (HCI) _2024-2025

Download as PPT, PDF
A
AbbassHassin

HCI

Business
1 of 58
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
chapter 21 hypertext, multimedia and the world-wide web
hypertext, multimedia and the world-wide web • understanding hypertext – text escapes linearity, words and the page • finding things – navigating hyperspace • web technology – how it all works • web content – static: unchanging pictures and text – dynamic: interaction and applications on the web understanding hypertext finding things web technology static: dynamic:
understanding hypertext what is the hyper? rich content: graphics, audio, video, computation and interaction
Text • imposes strict linear progression on the reader • the author’s ideas of what is best • often good :-) … but not always! this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell page 1 page 2 page 3 page 4 this is text or is it hypertext only links can tell
Hypertext - not just linear • non-linear structure – blocks of text (pages) – links between pages create a mesh or network – users follow their own path through information this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell home bookmark external link this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell back link
Hypermedia – not just text • hypertext systems + additional media – illustrations, photographs, video and sound • links/hotspots may be in media – areas of pictures – times and locations in video • also called multimedia – but term also used for simple audio/video
animation • adding motion to images – for things that change in time • digital faces – seconds tick past or warp into the next • analogue face – hands sweep around the clock face • live displays: e.g. current system load – for showing status and progress • flashing carat at text entry location • busy cursors (hour-glass, clock, spinning disc) • progress bars
animation (ctd) – for education and training • let students see things happen … as well as being interesting and entertaining images in their own right – for data visualisation • abrupt and smooth changes in multi-dimensional data visualised using animated, coloured surfaces • complex molecules and their interactions more easily understood when they are rotated and viewed on the screen – for animated characters • wizards and help
video and audio • now easy to author – tools to edit sound & video and burn CDs & DVDs • easy to embed in web pages – standard formats (QuickTime, MP3) • still big … but getting manageable – memory OK … hand held MP3 players, TiVo etc. – but download time needs care – tell users how big! • very linear – hard to add ‘links’ often best as small clips or background
audio issues • formats – raw sound samples • huge … used for mixing and editing – MIDI • just which notes played and when – MP3 • uses psychoacoustics - how the ear hears • issues – annoying if unwanted – even more annoying for others!
using animation and video • potentially powerful tools – note the success of television and arcade games • but … – how to harness the full possibilities of such media – different from ‘standard’ interfaces – this technology when we have much more experience. • so … – need to learn from film makers, dramatic theory, cartoonists, artists, writers
computation, intelligence and interaction • computers?? don’t just show things … do things • examples: – search – the HCI book web site • not just exercises, table of contents … also search – interaction • embedded applications (e.g, puzzle square) – adaption: • e-commerce sites suggest other things to buy
interacting in hypertext Professor Alan’s puzzle square @ http://www.hiraeth.com/alan/misc/game/game.html user clicks arrows to move squares icons to reset arrangement hot links to other puzzles
delivery technology • on the computer – help systems installed on hard disk with applications – CD-ROM or DVD based hypermedia • on the web – really ubiquitous! • in many countries, near universal internet access – not just web pages! • e.g. many applications have web-base documentation • … and on the move …
delivery (ctd) … on the move • platforms – mobile phones, PDAs, laptop computers • delivery – CD-ROM or DVD (like desktop) – cached content (e.g. AvantGo) – WiFi access points or mobile phone networks – WAP – for mobile phone, tiny web-like pages • context – who and where – tourist guides, directed advertising
application areas • rapid prototyping – create live storyboards – mock-up interaction using links • help and documentation – allows hierarchical contents, keyword search or browsing – just in time learning • what you want when you want it (e.g. technical manual for a photocopier) – technical words linked to their definition in a glossary – links between similar photocopiers
application areas (ctd) • education – animation and graphics allow students to see things happen – sound adds atmosphere and means diagrams can be looked at while hearing explanation – non-linear structure allows students to explore at their own pace – e-learning • letting education out of the classroom!! • e.g. eClass
eClass (formerly Classroom 2000) an ordinary lecture? slides, pen marks, video are ‘captured’ ... available later through web interface
finding things lost in hyperspace structure and navigation history and bookmarks indices, directories and search
lost in hyperspace • non-linear structure – very powerful … – but potentially confusing • two aspects of lostness – cognition and content • fragmentary information – no integration … confusion – navigation and structure • hyperlinks move across structure – where am I? • no easy solutions – but good design helps!
designing structure • ideas for structure – task analysis to for activities and processes – existing paper or organisational structures • going non-linear – paper and organisation single structure – hypertext – multiple structures • problems with common material, inconsistencies etc. • clarity of cross structure links v. important • scent – do hot spots for links make it clear where they are going to??
making navigation easier • maps – give an overview of the structure – show current location – you are here! • recommended routes – guided tour or bus tour metaphor – linear path through non-linear structure • levels of access – summary then progressive depth • supporting printing! – needs linearised content, links back to source
history, bookmarks, etc. • revisiting – ‘hub and spoke’ access – click-back-click-back – lots of revisiting of pages – ‘back’ is 30% of all browser navigation – but multi-step back and history used less – bookmarks and favourites for longer term revisiting • deep links – bookmarks and external links – into heart of site – are pages self explanatory? what site? where in it? • e.g. breadcrumbs for context • frames – difficult to bookmark, search and link to – but some good reasons for use (see /e3/online/frames/)
indices, directories and search • index – often found ion help, documentation, … even books – selective: not an exhaustive list of words used • directories – on web index would be huge! so hand chosen sites • e.g. open directory project, Yahoo! • web search engines – ‘crawl’ the web following links from page to page – build full word index (but ignore common ‘stop’ words) – looks up in index when you enter keywords to find pages
complex search • too many pages for single word … need to be more selective: • Boolean search – combine words with logic: e.g. ‘engine AND NOT car’ • link structure – Google uses richness of in and out links to rank pages • recommender systems – use other people’s choices to guide other people • being search engine friendly – add ‘Meta’ tags, relevant title, keywords, description – hard to index generated pages … the hidden web
finding research literature • special portals and search sites: e.g. citeseer <citeseer.nj.nec.com> – searches web for papers – scans the papers for bibliography – uses this to build up citation index syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a bibliography backwards in time citation forwards in time
web technology and issues protocols and browsers web servers and clients networking
web basics … • the ‘web’ – protocols and standard – HTTP – to carry information over the internet – HTML, XML and graphics formats for content – browsers to view the results … plus plug-ins • changing use – initially research (CERN - high energy physics) – now corporate, government, commerce and entertainment, advertising, community • challenges – lost in hyperspace, information overload
web servers and clients • the web is distributed – different machines far across the world – pages stored on servers – browsers (the clients) ask for pages – sent to and fro across the internet syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a web client (browser) web server (stores pages)  user clicks link GET /e3/authors.html HTTP/1.1  server sends page back  browser sends request communicate with HTTP syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a  browser displays it syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a  server finds page syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a
network issues - timing • QoS (quality of service) – bandwidth • how much information per second – latency • how long it takes (delay) – jitter • how consistent is the delay – reliability • some messages are lost … need to be resent … increases jitter – connection set-up • need to ‘handshake’ to start
bandwidth, latency and jitter send receive time bandwidth how much latency how long jitter how variable
design implications • bandwidth  think about download time – e.g. 100K image: 1 sec – broadband, 18 secs – 56K modem – save graphics in appropriate format and size – reuse the same graphics • in the browser cache after first load • connection time – one big file may be better then several small ones • beware of ‘fit on one screen’ rule – scrolling is fast! • think before breaking big graphic into bits • latency  think about feedback
feedback and feedthrough • network delays too slow! so … • feedback – think: – immediate local feedback – something has happened – slower semantic feedback – what has happened • feedthrough between users: – hard – cannot avoid network user interface immediate feedback semantic feedback environment
syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a WAP - web on the phone • very small screen – scrolling painful  small ‘pages’ – GSM connection slow  big chunks • WML (wireless mark-up language) – content delivered in ‘stacks’ of ‘cards’ – cards are the ‘pages’ the user views – but navigation within the stack fast errata: book says stacks of ‘notes’, cards is correct syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a server sends whole stack using WAP protocol syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a navigation within stack fast syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a server stores ‘stacks’ of cards N.B. larger screens and faster connections mean WML giving way to small HTML pages syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a
static web content medium and message text, graphics, movies and sound
the message and the medium • “content is king” – the catch phrase of dot.com era … but widely ignored • the message … content should be – appropriate to the audience, timely, reliable , …. – generally worth reading ! • the medium … page and site design – good design – essential to attract readers … but won’t hide bad material! – bad design – may mean good material never seen – printable!
text • text style – generic styles universal: serif, sans, fixed, bold, italic – specific fonts too, but vary between platforms – cascading style sheets (CSS) for fine control … but beware older browsers and fixed font sizes – colour … often abused! • positioning – easy .. left, right justified or centred – precise positioning with DHTML … but beware platforms … – screen size • mathematics … needs special fonts, layout, … arghhhh
graphics • use with care … – N.B. file size and download time … this image = 1000 words of text – affected by size, number of colours, file format – backgrounds … often add little, hard to read text • speeding it up – caching – reuse same graphics – progressive formats: • image appears in low res and gets clearer
graphics (ctd) • formats – JPEG – for photos • higher compression but ‘lossy’ • get ‘artefacts’ – GIF for sharp edges • lossless compression – PNG supported by current web browsers • and action – animated gifs for simple animations – image maps for images you can click on JPEG quality=20
icons • on the web just small images – for bullets, decoration – or to link to other pages – lots available! • design … just like any interface – need to be understood – designed as collection to fit … • under construction – a sign of the inherent incompleteness of the web – or just plain lazy ??
web colour • how many colours? – PC monitors – millions – 24 bits per pixel … but the ‘same’ colour may look very different • N.B. usually only 72–96 dpi – older computers, PDAs, phones … • perhaps only 16 bits or 8 bits per pixel … 256 colours • or even greyscale • colour palettes – choose useful 256 colours – different choices, but Netscape ‘web safe’ 216 are common – each GIF image has its own palette – use for fast download
movies and sound • problems – size and download… like graphics but worse! – may need special plug-ins – audio not so bad, some compact formats (MIDI) • streaming video – play while downloading – can be used for ‘broadcast’ radio or TV (i) page loads user’s machine web server movie plays syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a (ii) user watches
dynamic web content what happens where technology and security local interaction, search remote & batch generation dynamic content
the active web • early days of the web – static pages … mostly text – some gateways (ftp, gopher) – usability … easy - one simple model (except frames break the model!) • dynamic content – what is the model/metaphor ??? • passive pages or active interface • each leads to different user understanding – no easy answers!
what happens where? • architectural design is about what happens where • this affects: – feedback • seeing results of one’s own actions – feedthrough • seeing effects of other people’s actions – also affects complexity of implementation and hence maintenance
user view • what changes? – media stream, presentation, content • by whom? – automatic, site author, user – other users - feedthrough • how often? – pace of change: days, months, seconds
technology where does it happen client • applets , Flash, JavaScript & DHTML server • CGI scripts, Java servlets , JSP, ASP, PHP, etc, another machine • author’s machine, database server, proxy people • socio-techncal solutions
security • for computation – code and data at same place! • problem – data - needs to be secure – web-server - least secure machine – client machine even worse … and networks!
local interaction (at client) • fixed content • use Java applets, Flash, JavaScript+DHTML • pros: rapid feedback • cons: only local, no feedthrough • after interaction … what does ‘back’ do ?? (i) page loads once user’s machine web server script / Java running in client syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a (ii) user interacts locally
examples • … TO DO … … coin race uses JavaScript dancing histograms are a Java applet
search • create indices off-line • fast lookup when needed see http://www.hcibook.com/e3/search/ (ii) search results returned user’s machine web server web page with text field for search words CGI script looks up words in index (i) user fills field in form syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a index file pre-computed
automatic generation • dilemma; – hand crafting … leads to web stasis!! – so need database driven sites • early days ad hoc, now many tools • options: – client-end applet or Flash access remote DB – server-end CGI driven by web forms (limited UI) • hybrid solutions – CGI generated pages can contain JavaScript etc. – JavaScript can ‘write’ web pages on the fly!
Java applet & JDBC • pros: interactive DB access • cons: bandwidth, security JDBC accesses database user’s machine web server Java applet
CGI script accesses database • pros: up-to-date, use existing DB • cons: not proxy/index friendly (iii) server returns generated pages (ii) CGI script accesses database using SQL/JDBC user’s machine web server generated pages syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a CGI script (i) request to server
batch generation • for slow varying data – update local database – periodically generate pages and upload • many technologies – C, Java, HyperCard, Visual Basic Set db = openDatabase("C:test.mdb"); sql = "select Name, Address from Personnel;" Set query = db.OpenRecordset(sql) Open "out.html" For Output As #1 Print #1, "<h1>Address List</h1>" query.MoveFirst While Not query.EOF Print #1, "<p>" & query("Name") & " ” & query("Address") query.MoveNext Wend Close #1 query.Close
batch generation of web pages • pros: indexable, secure • cons: slower turnaround (iii) server returns generated pages (ii) pages copied to web server via ftp (i) pages generated off-line from database user’s machine web server third machine syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a generated pages
dynamic content • really ‘active’ web pages … – data updated as well as presented on the web • presentation – any of the previous means: CGI, applet-JDBC • update – web form/interface -> server script -> update db • e.g. book theatre seats • issues – authentication and security – multiple transactions due to ‘back’ button – right pace/control – do we want human in the loop?
n-tier architecture • one or more intermediate layers • ‘business logic’ in layers • web standard components and protocols database enterprise server JEB web server JDBC XML HTML JSP

More Related Content

PPT
E3 chap-21
Welly Dian Astika
 
PPT
World wide web and Hyper Text Markup Language
Jayaprasanna4
 
PPT
Hypertext, multimedia and www
PhD Research Scholar
 
PDF
Digital Libraries and the quest for information curation
Luis Borges Gouveia
 
PPTX
Designing to be used adoption appropriation
Alan Dix
 
PPT
E learning getting started with online learning reduced for uploading
Martin Bazley
 
PDF
Interaccion2014 semanticwebendusertasks v2
Alfons Palacios
 
PPTX
Managing your library's online presence
Suhui Ho
 
E3 chap-21
Welly Dian Astika
 
World wide web and Hyper Text Markup Language
Jayaprasanna4
 
Hypertext, multimedia and www
PhD Research Scholar
 
Digital Libraries and the quest for information curation
Luis Borges Gouveia
 
Designing to be used adoption appropriation
Alan Dix
 
E learning getting started with online learning reduced for uploading
Martin Bazley
 
Interaccion2014 semanticwebendusertasks v2
Alfons Palacios
 
Managing your library's online presence
Suhui Ho
 

Similar to Human Computer Interaction (HCI) _2024-2025 (20)

PPTX
Internet and Its Applications
Vijayalakshmi Murugesan
 
PDF
Wollongong 090408232854-phpapp01
Neo Ntlhokoa
 
PPT
From bit-streams-to-life-streams-ajai-narendran-srishti-bangalore-stff-2011
ajai
 
PPTX
Introduction about wireframing and responsive webdesign
ipmindthegap
 
PPT
IWMW 2002: Portals and CMS:" Why You Need Them Both
IWMW
 
PPTX
Practical Information Architecture
Rob Bogue
 
PPSX
INNOVATION AND ‎RESEARCH (Digital Library ‎Information Access)‎
Libcorpio
 
PPT
Interaciton desing lect05.ppt Human Computer Interaction
TalhaNoor25
 
PPTX
Digitization
Lee Cafferata
 
PPTX
Internet and its applications
Burhan Ahmed
 
PDF
Implimenting and Mitigating Change with all of this Newfangled Technology
Indiana Online Users Group
 
PPTX
Ordering the chaos: Creating websites with imperfect data
Andy Stretton
 
PPT
Web Science: the digital heritage case
Guus Schreiber
 
PPTX
Social Semantic (Sensor) Web
David Crowley
 
PPTX
UNIT - 5 INTERFACE APPLIATIONS GROUP WARE SYSTEMS
mohanrajm63
 
PPTX
Deep Web and Digital Investigations
Damir Delija
 
PPT
From adaptive hypermedia to the adaptive Web
Peter Brusilovsky
 
PDF
Future-Proofing the Web: What We Can Do Today
John Kunze
 
PPTX
Ideas for using Web 2.0 tools in the classroom - updated September 2016
talkPrimaryICT
 
PPT
eBooks for Everyone: Inclusive Publishing
DAISY Consortium
 
Internet and Its Applications
Vijayalakshmi Murugesan
 
Wollongong 090408232854-phpapp01
Neo Ntlhokoa
 
From bit-streams-to-life-streams-ajai-narendran-srishti-bangalore-stff-2011
ajai
 
Introduction about wireframing and responsive webdesign
ipmindthegap
 
IWMW 2002: Portals and CMS:" Why You Need Them Both
IWMW
 
Practical Information Architecture
Rob Bogue
 
INNOVATION AND ‎RESEARCH (Digital Library ‎Information Access)‎
Libcorpio
 
Interaciton desing lect05.ppt Human Computer Interaction
TalhaNoor25
 
Digitization
Lee Cafferata
 
Internet and its applications
Burhan Ahmed
 
Implimenting and Mitigating Change with all of this Newfangled Technology
Indiana Online Users Group
 
Ordering the chaos: Creating websites with imperfect data
Andy Stretton
 
Web Science: the digital heritage case
Guus Schreiber
 
Social Semantic (Sensor) Web
David Crowley
 
UNIT - 5 INTERFACE APPLIATIONS GROUP WARE SYSTEMS
mohanrajm63
 
Deep Web and Digital Investigations
Damir Delija
 
From adaptive hypermedia to the adaptive Web
Peter Brusilovsky
 
Future-Proofing the Web: What We Can Do Today
John Kunze
 
Ideas for using Web 2.0 tools in the classroom - updated September 2016
talkPrimaryICT
 
eBooks for Everyone: Inclusive Publishing
DAISY Consortium
 
Ad

Recently uploaded (20)

PDF
kom-180-proposal-for-a-directive-amending-directive-2014-45-eu-and-directive-...
nlusch08
 
PDF
Laughter Yoga Basic Learning Workshop Manual
yeechensee
 
PPTX
Dragon_Fruit_Cultivation_in Nepal ppt.pptx
UmeshTimilsina1
 
PPTX
Probability Distribution, binomial distribution, poisson distribution
gayusakktivel
 
PDF
BsN 7th Sem Course GridNNNNNNNN CCN.pdf
ZAMANYousufzai1
 
PPT
Chapter four Project-Preparation material
argachewbochena1
 
PDF
Traveri Digital Marketing Seminar 2025 by Corey and Jessica Perlman
Corey Perlman, Social Media Speaker and Consultant
 
DOCX
unit 2 cost accounting- Tender and Quotation & Reconciliation Statement
MANJU N
 
PPTX
ICG2025_ICG 6th steering committee 30-8-24.pptx
AtiarRahaman5
 
PDF
How to Get Funding for Your Trucking Business
Jake Thornhill
 
PDF
Business model innovation report 2022.pdf
pradvapal
 
PDF
Elevate Cleaning Efficiency Using Tallfly Hair Remover Roller Factory Expertise
farsookmon97766765
 
PPTX
AI-assistance in Knowledge Collection and Curation supporting Safe and Sustai...
Barry Hardy
 
PDF
DOC-20250806-WA0002._20250806_112011_0000.pdf
dhanusriss08
 
PDF
Roadmap Map-digital Banking feature MB,IB,AB
Alemayehu
 
PDF
SIMNET Inc – 2023’s Most Trusted IT Services & Solution Provider
sidnik500
 
DOCX
Euro SEO Services 1st 3 General Updates.docx
AmirNazir49
 
PPTX
CkgxkgxydkydyldylydlydyldlyddolydyoyyU2.pptx
DSAISUBRAHMANYAAASHR
 
PPTX
5 Stages of group development guide.pptx
keerthanashanmugam201
 
PDF
pdfcoffee.com-opt-b1plus-sb-answers.pdfvi
thaoonguyenn2311
 
kom-180-proposal-for-a-directive-amending-directive-2014-45-eu-and-directive-...
nlusch08
 
Laughter Yoga Basic Learning Workshop Manual
yeechensee
 
Dragon_Fruit_Cultivation_in Nepal ppt.pptx
UmeshTimilsina1
 
Probability Distribution, binomial distribution, poisson distribution
gayusakktivel
 
BsN 7th Sem Course GridNNNNNNNN CCN.pdf
ZAMANYousufzai1
 
Chapter four Project-Preparation material
argachewbochena1
 
Traveri Digital Marketing Seminar 2025 by Corey and Jessica Perlman
Corey Perlman, Social Media Speaker and Consultant
 
unit 2 cost accounting- Tender and Quotation & Reconciliation Statement
MANJU N
 
ICG2025_ICG 6th steering committee 30-8-24.pptx
AtiarRahaman5
 
How to Get Funding for Your Trucking Business
Jake Thornhill
 
Business model innovation report 2022.pdf
pradvapal
 
Elevate Cleaning Efficiency Using Tallfly Hair Remover Roller Factory Expertise
farsookmon97766765
 
AI-assistance in Knowledge Collection and Curation supporting Safe and Sustai...
Barry Hardy
 
DOC-20250806-WA0002._20250806_112011_0000.pdf
dhanusriss08
 
Roadmap Map-digital Banking feature MB,IB,AB
Alemayehu
 
SIMNET Inc – 2023’s Most Trusted IT Services & Solution Provider
sidnik500
 
Euro SEO Services 1st 3 General Updates.docx
AmirNazir49
 
CkgxkgxydkydyldylydlydyldlyddolydyoyyU2.pptx
DSAISUBRAHMANYAAASHR
 
5 Stages of group development guide.pptx
keerthanashanmugam201
 
pdfcoffee.com-opt-b1plus-sb-answers.pdfvi
thaoonguyenn2311
 
Ad

Human Computer Interaction (HCI) _2024-2025

  • 2. hypertext, multimedia and the world-wide web • understanding hypertext – text escapes linearity, words and the page • finding things – navigating hyperspace • web technology – how it all works • web content – static: unchanging pictures and text – dynamic: interaction and applications on the web understanding hypertext finding things web technology static: dynamic:
  • 3. understanding hypertext what is the hyper? rich content: graphics, audio, video, computation and interaction
  • 4. Text • imposes strict linear progression on the reader • the author’s ideas of what is best • often good :-) … but not always! this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell page 1 page 2 page 3 page 4 this is text or is it hypertext only links can tell
  • 5. Hypertext - not just linear • non-linear structure – blocks of text (pages) – links between pages create a mesh or network – users follow their own path through information this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell home bookmark external link this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell back link
  • 6. Hypermedia – not just text • hypertext systems + additional media – illustrations, photographs, video and sound • links/hotspots may be in media – areas of pictures – times and locations in video • also called multimedia – but term also used for simple audio/video
  • 7. animation • adding motion to images – for things that change in time • digital faces – seconds tick past or warp into the next • analogue face – hands sweep around the clock face • live displays: e.g. current system load – for showing status and progress • flashing carat at text entry location • busy cursors (hour-glass, clock, spinning disc) • progress bars
  • 8. animation (ctd) – for education and training • let students see things happen … as well as being interesting and entertaining images in their own right – for data visualisation • abrupt and smooth changes in multi-dimensional data visualised using animated, coloured surfaces • complex molecules and their interactions more easily understood when they are rotated and viewed on the screen – for animated characters • wizards and help
  • 9. video and audio • now easy to author – tools to edit sound & video and burn CDs & DVDs • easy to embed in web pages – standard formats (QuickTime, MP3) • still big … but getting manageable – memory OK … hand held MP3 players, TiVo etc. – but download time needs care – tell users how big! • very linear – hard to add ‘links’ often best as small clips or background
  • 10. audio issues • formats – raw sound samples • huge … used for mixing and editing – MIDI • just which notes played and when – MP3 • uses psychoacoustics - how the ear hears • issues – annoying if unwanted – even more annoying for others!
  • 11. using animation and video • potentially powerful tools – note the success of television and arcade games • but … – how to harness the full possibilities of such media – different from ‘standard’ interfaces – this technology when we have much more experience. • so … – need to learn from film makers, dramatic theory, cartoonists, artists, writers
  • 12. computation, intelligence and interaction • computers?? don’t just show things … do things • examples: – search – the HCI book web site • not just exercises, table of contents … also search – interaction • embedded applications (e.g, puzzle square) – adaption: • e-commerce sites suggest other things to buy
  • 13. interacting in hypertext Professor Alan’s puzzle square @ http://www.hiraeth.com/alan/misc/game/game.html user clicks arrows to move squares icons to reset arrangement hot links to other puzzles
  • 14. delivery technology • on the computer – help systems installed on hard disk with applications – CD-ROM or DVD based hypermedia • on the web – really ubiquitous! • in many countries, near universal internet access – not just web pages! • e.g. many applications have web-base documentation • … and on the move …
  • 15. delivery (ctd) … on the move • platforms – mobile phones, PDAs, laptop computers • delivery – CD-ROM or DVD (like desktop) – cached content (e.g. AvantGo) – WiFi access points or mobile phone networks – WAP – for mobile phone, tiny web-like pages • context – who and where – tourist guides, directed advertising
  • 16. application areas • rapid prototyping – create live storyboards – mock-up interaction using links • help and documentation – allows hierarchical contents, keyword search or browsing – just in time learning • what you want when you want it (e.g. technical manual for a photocopier) – technical words linked to their definition in a glossary – links between similar photocopiers
  • 17. application areas (ctd) • education – animation and graphics allow students to see things happen – sound adds atmosphere and means diagrams can be looked at while hearing explanation – non-linear structure allows students to explore at their own pace – e-learning • letting education out of the classroom!! • e.g. eClass
  • 18. eClass (formerly Classroom 2000) an ordinary lecture? slides, pen marks, video are ‘captured’ ... available later through web interface
  • 19. finding things lost in hyperspace structure and navigation history and bookmarks indices, directories and search
  • 20. lost in hyperspace • non-linear structure – very powerful … – but potentially confusing • two aspects of lostness – cognition and content • fragmentary information – no integration … confusion – navigation and structure • hyperlinks move across structure – where am I? • no easy solutions – but good design helps!
  • 21. designing structure • ideas for structure – task analysis to for activities and processes – existing paper or organisational structures • going non-linear – paper and organisation single structure – hypertext – multiple structures • problems with common material, inconsistencies etc. • clarity of cross structure links v. important • scent – do hot spots for links make it clear where they are going to??
  • 22. making navigation easier • maps – give an overview of the structure – show current location – you are here! • recommended routes – guided tour or bus tour metaphor – linear path through non-linear structure • levels of access – summary then progressive depth • supporting printing! – needs linearised content, links back to source
  • 23. history, bookmarks, etc. • revisiting – ‘hub and spoke’ access – click-back-click-back – lots of revisiting of pages – ‘back’ is 30% of all browser navigation – but multi-step back and history used less – bookmarks and favourites for longer term revisiting • deep links – bookmarks and external links – into heart of site – are pages self explanatory? what site? where in it? • e.g. breadcrumbs for context • frames – difficult to bookmark, search and link to – but some good reasons for use (see /e3/online/frames/)
  • 24. indices, directories and search • index – often found ion help, documentation, … even books – selective: not an exhaustive list of words used • directories – on web index would be huge! so hand chosen sites • e.g. open directory project, Yahoo! • web search engines – ‘crawl’ the web following links from page to page – build full word index (but ignore common ‘stop’ words) – looks up in index when you enter keywords to find pages
  • 25. complex search • too many pages for single word … need to be more selective: • Boolean search – combine words with logic: e.g. ‘engine AND NOT car’ • link structure – Google uses richness of in and out links to rank pages • recommender systems – use other people’s choices to guide other people • being search engine friendly – add ‘Meta’ tags, relevant title, keywords, description – hard to index generated pages … the hidden web
  • 26. finding research literature • special portals and search sites: e.g. citeseer <citeseer.nj.nec.com> – searches web for papers – scans the papers for bibliography – uses this to build up citation index syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a bibliography backwards in time citation forwards in time
  • 27. web technology and issues protocols and browsers web servers and clients networking
  • 28. web basics … • the ‘web’ – protocols and standard – HTTP – to carry information over the internet – HTML, XML and graphics formats for content – browsers to view the results … plus plug-ins • changing use – initially research (CERN - high energy physics) – now corporate, government, commerce and entertainment, advertising, community • challenges – lost in hyperspace, information overload
  • 29. web servers and clients • the web is distributed – different machines far across the world – pages stored on servers – browsers (the clients) ask for pages – sent to and fro across the internet syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a web client (browser) web server (stores pages)  user clicks link GET /e3/authors.html HTTP/1.1  server sends page back  browser sends request communicate with HTTP syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a  browser displays it syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a  server finds page syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a
  • 30. network issues - timing • QoS (quality of service) – bandwidth • how much information per second – latency • how long it takes (delay) – jitter • how consistent is the delay – reliability • some messages are lost … need to be resent … increases jitter – connection set-up • need to ‘handshake’ to start
  • 31. bandwidth, latency and jitter send receive time bandwidth how much latency how long jitter how variable
  • 32. design implications • bandwidth  think about download time – e.g. 100K image: 1 sec – broadband, 18 secs – 56K modem – save graphics in appropriate format and size – reuse the same graphics • in the browser cache after first load • connection time – one big file may be better then several small ones • beware of ‘fit on one screen’ rule – scrolling is fast! • think before breaking big graphic into bits • latency  think about feedback
  • 33. feedback and feedthrough • network delays too slow! so … • feedback – think: – immediate local feedback – something has happened – slower semantic feedback – what has happened • feedthrough between users: – hard – cannot avoid network user interface immediate feedback semantic feedback environment
  • 34. syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a WAP - web on the phone • very small screen – scrolling painful  small ‘pages’ – GSM connection slow  big chunks • WML (wireless mark-up language) – content delivered in ‘stacks’ of ‘cards’ – cards are the ‘pages’ the user views – but navigation within the stack fast errata: book says stacks of ‘notes’, cards is correct syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a server sends whole stack using WAP protocol syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a navigation within stack fast syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a server stores ‘stacks’ of cards N.B. larger screens and faster connections mean WML giving way to small HTML pages syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a
  • 35. static web content medium and message text, graphics, movies and sound
  • 36. the message and the medium • “content is king” – the catch phrase of dot.com era … but widely ignored • the message … content should be – appropriate to the audience, timely, reliable , …. – generally worth reading ! • the medium … page and site design – good design – essential to attract readers … but won’t hide bad material! – bad design – may mean good material never seen – printable!
  • 37. text • text style – generic styles universal: serif, sans, fixed, bold, italic – specific fonts too, but vary between platforms – cascading style sheets (CSS) for fine control … but beware older browsers and fixed font sizes – colour … often abused! • positioning – easy .. left, right justified or centred – precise positioning with DHTML … but beware platforms … – screen size • mathematics … needs special fonts, layout, … arghhhh
  • 38. graphics • use with care … – N.B. file size and download time … this image = 1000 words of text – affected by size, number of colours, file format – backgrounds … often add little, hard to read text • speeding it up – caching – reuse same graphics – progressive formats: • image appears in low res and gets clearer
  • 39. graphics (ctd) • formats – JPEG – for photos • higher compression but ‘lossy’ • get ‘artefacts’ – GIF for sharp edges • lossless compression – PNG supported by current web browsers • and action – animated gifs for simple animations – image maps for images you can click on JPEG quality=20
  • 40. icons • on the web just small images – for bullets, decoration – or to link to other pages – lots available! • design … just like any interface – need to be understood – designed as collection to fit … • under construction – a sign of the inherent incompleteness of the web – or just plain lazy ??
  • 41. web colour • how many colours? – PC monitors – millions – 24 bits per pixel … but the ‘same’ colour may look very different • N.B. usually only 72–96 dpi – older computers, PDAs, phones … • perhaps only 16 bits or 8 bits per pixel … 256 colours • or even greyscale • colour palettes – choose useful 256 colours – different choices, but Netscape ‘web safe’ 216 are common – each GIF image has its own palette – use for fast download
  • 42. movies and sound • problems – size and download… like graphics but worse! – may need special plug-ins – audio not so bad, some compact formats (MIDI) • streaming video – play while downloading – can be used for ‘broadcast’ radio or TV (i) page loads user’s machine web server movie plays syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a (ii) user watches
  • 43. dynamic web content what happens where technology and security local interaction, search remote & batch generation dynamic content
  • 44. the active web • early days of the web – static pages … mostly text – some gateways (ftp, gopher) – usability … easy - one simple model (except frames break the model!) • dynamic content – what is the model/metaphor ??? • passive pages or active interface • each leads to different user understanding – no easy answers!
  • 45. what happens where? • architectural design is about what happens where • this affects: – feedback • seeing results of one’s own actions – feedthrough • seeing effects of other people’s actions – also affects complexity of implementation and hence maintenance
  • 46. user view • what changes? – media stream, presentation, content • by whom? – automatic, site author, user – other users - feedthrough • how often? – pace of change: days, months, seconds
  • 47. technology where does it happen client • applets , Flash, JavaScript & DHTML server • CGI scripts, Java servlets , JSP, ASP, PHP, etc, another machine • author’s machine, database server, proxy people • socio-techncal solutions
  • 48. security • for computation – code and data at same place! • problem – data - needs to be secure – web-server - least secure machine – client machine even worse … and networks!
  • 49. local interaction (at client) • fixed content • use Java applets, Flash, JavaScript+DHTML • pros: rapid feedback • cons: only local, no feedthrough • after interaction … what does ‘back’ do ?? (i) page loads once user’s machine web server script / Java running in client syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a (ii) user interacts locally
  • 50. examples • … TO DO … … coin race uses JavaScript dancing histograms are a Java applet
  • 51. search • create indices off-line • fast lookup when needed see http://www.hcibook.com/e3/search/ (ii) search results returned user’s machine web server web page with text field for search words CGI script looks up words in index (i) user fills field in form syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a index file pre-computed
  • 52. automatic generation • dilemma; – hand crafting … leads to web stasis!! – so need database driven sites • early days ad hoc, now many tools • options: – client-end applet or Flash access remote DB – server-end CGI driven by web forms (limited UI) • hybrid solutions – CGI generated pages can contain JavaScript etc. – JavaScript can ‘write’ web pages on the fly!
  • 53. Java applet & JDBC • pros: interactive DB access • cons: bandwidth, security JDBC accesses database user’s machine web server Java applet
  • 54. CGI script accesses database • pros: up-to-date, use existing DB • cons: not proxy/index friendly (iii) server returns generated pages (ii) CGI script accesses database using SQL/JDBC user’s machine web server generated pages syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a CGI script (i) request to server
  • 55. batch generation • for slow varying data – update local database – periodically generate pages and upload • many technologies – C, Java, HyperCard, Visual Basic Set db = openDatabase("C:test.mdb"); sql = "select Name, Address from Personnel;" Set query = db.OpenRecordset(sql) Open "out.html" For Output As #1 Print #1, "<h1>Address List</h1>" query.MoveFirst While Not query.EOF Print #1, "<p>" & query("Name") & " ” & query("Address") query.MoveNext Wend Close #1 query.Close
  • 56. batch generation of web pages • pros: indexable, secure • cons: slower turnaround (iii) server returns generated pages (ii) pages copied to web server via ftp (i) pages generated off-line from database user’s machine web server third machine syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a generated pages
  • 57. dynamic content • really ‘active’ web pages … – data updated as well as presented on the web • presentation – any of the previous means: CGI, applet-JDBC • update – web form/interface -> server script -> update db • e.g. book theatre seats • issues – authentication and security – multiple transactions due to ‘back’ button – right pace/control – do we want human in the loop?
  • 58. n-tier architecture • one or more intermediate layers • ‘business logic’ in layers • web standard components and protocols database enterprise server JEB web server JDBC XML HTML JSP