Websites & Social Media

Transcriptie

1 Websites & Social Media Ontwerpen van Interactieve Systemen Christof van Nimwegen, 19 maart 2015

2 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

3 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

4 2014: Het web 25 jaar oud! 4

5 2014: Het web 25 jaar oud! 5

6 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

7 Websites in dit hoofdstuk 4 typen: Nieuws Shopping Informatie Entertainment Focus: Design / development, effective, learnable and accomodating 7

8 De 1 e website ever 8

9 Trends: Vroeger.. 9

10 Trends: Vroeger en nu.. 10

11 Web trends: Flat design, Ghost buttons 11

12 Web trends: Card design 12

13 Web trends: Parallax scrolling 13

14 Web trends: Single page design 14

15 Web trends: responsive (al een tijdje) en nog veel meer, steeds veranderende trends... 15

16 Webtechnologie vandaag and more 16

17 Webtechnologie: Code kloppen of CMS 17

18 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

19 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

20 J.J. Garrett: Five elements 20

21 J.J. Garrett: Five elements 21

22 J.J. Garrett: Five elements Surface Skeleton Structure Scope Strategy 22

23 Diagram, structuur 23

24 Web content: leespatronen De F-shape 24

25 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 1 e 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

26 Informatie architectuur: Classificatie Voor (een beetje) erna

27 Informatie architectuur: Geografisch 27

28 Informatie architectuur: Belangrijkheid 28

29 Informatie architectuur Alfabetisch Chronologisch User preferences Doelgroep Laatst bekeken Meest bekeken. 29

30 Structuur 30

31 Web navigatie Adequate Labeling Koppen Tekstlinks Buttons Navigatie hulp Menu s (al dan niet met waar ben ik highlight) Search FAQ Sitemap 31

32 Web navigatie: Search 32

33 Web navigatie Box

34 Web navigatie 34

35 Navigatie: Hiërarchische structuur 35

36 Navigatie: Diepte 36

37 Navigatie: onder / boven paginagrens 37

38 Navigatie: dimensies gecombineerd 38

39 Navigatie: breed EN diep minder goed 39

40 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

41 Evaluatie: Analytics, A-B testing 41

42 Hoe het niet moet 42

43 Social media 43

44 Omnipresent 44

45 Socialnomics 2014 (Erik Qualman ) 45

46 Social media: Web evolution WEB 1.0 = ZENDEN 46

47 Social media: Web evolution WEB 2.0 = DELEN, NETWERKEN REAGEREN, INTERACTIE 47

48 Milestone: Smartphones 48

49 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

50 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

51 Wat DOEN we ermee? Sociaal (vrienden, kennissen, familie) Meningen uiten Politiek, campagnes Commerce, reclame Bekendheid creeren Daten Games Overheid Recruitment Crowdsourcen.. 51

52 Social Media: Crowdsourcing - Cerberus 52

53 Social Media: Crowdsourcing - Cerberus 53

54 Crowdsourcing: andere tweets 54

55 Social Media: Crossover gebruik 55

56 Wat kan MEN (nog meer) ermee 56

57 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

58 Natuurlijk Social Usability 58

59 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

60 Aandacht voor sociaal-psychologische aspecten Zelfperceptie Privacy Introversie / extraversie Groepsdynamiek Reputatie Groepslidmaatschap Populariteit Schaamte Aandacht Narcisme Erkenning. 60

61 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

62 Non-social media krijgen social media aspecten 62

63 Non-social media krijgen social media aspecten 63

64 Social media: overal bij betrokken 64

65 Voor de liefhebber: /reports/socialmedia-userexperience 65

66 The social web of things? 66

67 The social network 67

68 The anti-social network 68

69 En Alles wordt getrackt, gelogd, we pay with privacy 69

70 Vragen? 70