Websites & Social Media
Ontwerpen van Interactieve Systemen Christof van Nimwegen, 19 maart 2015
Huishoudelijk: zalen/tijd eindpresentaties Stembiljet, Timecapsule, Onderwijssite Donderdag 16 april, 11:00- 13:00 BBG – 061, 065, 079 Game: Vrijdag 17 april, 13:15-16:00 RUPPERT- 033 2
Gerelateerd (sort of):
IUW (INFOB1IUW) Webtechnologie (INFOB2WT)
In OIS: UCD proces, stakeholders, requirements, evaluation Websites slechts één van de “interactieve systemen” NIET: wat moeten we precies doen en hoe, past niet in 1 college WEL: waar moeten we over nadenken, rekening mee houden 3
2014: Het web 25 jaar oud!
4
2014: Het web 25 jaar oud!
5
Voorloper: Hypertext (1963)
Hypertekst (Ted Nelson): tekst met direct activeerbare hyperlinks. De lezer hoeft voor het volgen van een verwijzing geen bladzijden, hoofdstukken of andere teksten op te zoeken en open te slaan, maar kan direct naar een specifieke tekst of een specifieke plek in de tekst doorspringen.
Hypermedia: als ook andere middelen, zoals geluid en bewegend beeld, integraal in het geheel zijn opgenomen 6
Websites in dit hoofdstuk 4 typen: Nieuws
Shopping
Informatie
Entertainment
Focus: Design / development, effective , learnable and accomodating
7
De
e 1
website ever
8
Trends: Vroeger…..
9
Trends: Vroeger en nu…..
10
Web trends: Flat design, Ghost buttons
11
Web trends: Card design
12
Web trends: Parallax scrolling
13
Web trends: Single page design
14
Web trends: responsive (al een tijdje)
…en nog veel meer, steeds veranderende trends... 15
Webtechnologie vandaag
and more…
16
Webtechnologie: Code kloppen of CMS
17
Verschillen met “normale” software
Web as a whole, niet “in” een applicatie Per definitie gedistribueerd, connected Je “koopt” het niet, geen distributie issues, builds Design, ook look & feel, esthetiek/identity zeer belangrijk Dynamisch, snel veranderende content Zeer gevoelig voor trends Je weet minder goed wie je gebruikers gaan zijn Maar je komt wel weer meer te weten over hen Sociaal! Minder controle over hoe men het gebruikt Je weet minder goed hoe iets er uit gaat zien looking different is a feature, not a bug” 18
Aanpak Webdesign Voor een groot deel zoals generiek besproken: PACT Persona’s, scenarios, evaluation Requirements: Understanding & Envisionment Usability notions/guidelines (H4) Evaluation Maar deels ook anders. Meer web specifiek: J.J. Garrett: Five elements 19
J.J. Garrett: Five elements
20
J.J. Garrett: Five elements
21
J.J. Garrett: Five elements Surface Skeleton Structure Scope Strategy 22
Diagram, structuur
23
Web content: leespatronen De “F-shape”
24
Web content: leespatronen bij tekst
Web copywriting is een discipline op zich zelf Kranten leveren andere teksten digitaal dan gedrukt We lezen niet woord voor woord online We “skimmen” veel (zeker als we niet zeker zijn dat we on op de juiste info-bron bevinden) In 1e 2 paragrafen moet het belangrijkste staan Vermijd lange zinnen (meer dan bij print). Formating, eikpunten (voor scrollen) Laat subkoppen, paragrafen en bullets informatierijke woorden hebben die opvallen ………….. 25
Informatie architectuur: Classificatie Voor
(een beetje) erna
Informatie architectuur: Geografisch
27
Informatie architectuur: Belangrijkheid
28
Informatie architectuur
Alfabetisch Chronologisch User preferences Doelgroep Laatst bekeken Meest bekeken
……………….
29
Structuur
30
Web navigatie
Adequate Labeling
Koppen Tekstlinks Buttons
Navigatie hulp
Menu’s (al dan niet met “waar ben ik” highlight) Search FAQ Sitemap
31
Web navigatie: Search
32
Web navigatie Box 14.5
33
Web navigatie
34
Navigatie: Hiërarchische structuur
35
Navigatie: Diepte
36
Navigatie: onder / boven paginagrens
37
Navigatie: dimensies gecombineerd
38
Navigatie: breed EN diep minder goed
39
Analytics als input voor beter webdesign
Hoeveel (unieke) bezoekers waren er Hoe vaak komt men terug Waar komt men vandaan Hoe lang blijft men Waar gaat men heen Hoelang ronddwalen tot bv. Kopen Niet kopen Vertoont men “lostness”? Waar gaan andere dingen fout? ……………. 40
Evaluatie: Analytics, A-B testing
41
Hoe het niet moet
42
Social media
43
Omnipresent
44
Socialnomics 2014 (Erik Qualman )
45
Social media: Web evolution
WEB 1.0 = ZENDEN
46
Social media: Web evolution
WEB 2.0
=
DELEN, NETWERKEN REAGEREN, INTERACTIE
47
Milestone: Smartphones
48
Social Media: typen
Social networking - Facebook, Google + Micro-blogging - Twitter, Tumblr, Posterous Publishing - WordPress, Blogger Collaboration - Wikipedia, WikiBooks Rating/Review - Amazon ratings Photo sharing - Flickr, Instagram, Pinterest Video sharing - YouTube, Vimeo, Viddler
49
Social Media: typen
Virtual worlds - Second Life, WoW Location based - Foursquare, Yelp Widgets- Profile badges, Like buttons Social bookmarking - Digg, Delicious Group buying- Groupon, Living Social
50
Wat DOEN we ermee?
Sociaal (vrienden, kennissen, familie) Meningen uiten Politiek, campagnes Commerce, reclame Bekendheid creeren Daten Games Overheid Recruitment Crowdsourcen …….. 51
Social Media: Crowdsourcing - Cerberus
52
Social Media: Crowdsourcing - Cerberus
53
Crowdsourcing: andere tweets
54
Social Media: Crossover gebruik
55
Wat kan MEN (nog meer) ermee
56
Wat is ermee, belangrijk voor design
Vormen uitdaging voor traditionele massa media Focus op eind gebruiker ipv. collectieve users Zeer gericht op participatie Direct of indirect Privé of publieke communicatie User interface is een sociale interface Users: hebben interesses i.p.v. “needs” We love it (too much sometimes?)
57
Natuurlijk…Social Usability
58
Social media design Omvat o.a.: User Interface, Interaction design, Experience design, Information architecture
UCD, wat we tot nu te hebben gezien Technology / Genius / Engineered design Activity based
Schiet eigenlijk tekort Nodig: Social interaction design In ontwikkeling 59
Aandacht voor sociaal-psychologische aspecten
Zelfperceptie Privacy Introversie / extraversie Groepsdynamiek Reputatie Groepslidmaatschap Populariteit Schaamte Aandacht Narcisme Erkenning ……. 60
Schrijven voor sociale media: vak apart
Juiste frequentie Schrijf voor het medium Begin krachtig Voorkom herhaling Gebruik images Gemakkelijk te begrijpen Eén onderwerp per bericht Actie werkwoorden zoals “doe mee”, “kom” Vermijd SMS lingo ….. 61
Non-social media krijgen social media aspecten
62
Non-social media krijgen social media aspecten
63
Social media: overal bij betrokken
64
Voor de liefhebber:
www.nngroup.com /reports/socialmedia-userexperience
65
The social web of things?
66
The social network
http://www.imdb.com/title/tt1285016/
67
The anti-social network
https://www.youtube.com/watch?v=e0H6AzEMHSc
68
En…
Alles wordt getrackt, gelogd, we pay with privacy 69
Vragen?
70
