Websites & Social media Ontwerpen van interactieve systemen Imke de Jong 22 maart 2018 Vandaag Websites Design trends User centered design: Five elements Informatiearchitectuur Navigatie Evaluatie Social media: Wie is de gebruiker? Social usability 1
Gerelateerd (sort of) Informatie uitwisseling (INFOB1IUW) Webtechnologie (INFOB2WT) User centered design (UCD) process NIET: wat moeten we precies doen en hoe WEL: waar moeten we over nadenken, rekening mee houden Evaluation OIS Stakeholders Focus: Design / develop website that are effective, learnable and accommodating En: 14:5 is GEEN stof Requirements Websites: in dit hoofdstuk 4 types Badre (2002)! Nieuws Shopping Informatie Entertainment Dekt dit het anno 2018? 2
Combinatie van types Trends: Vroeger.. 3
Trends: Vroeger en nu.. Web trends: Skeuomorfisme 4
Web trends: Flat design, Ghost buttons Web trends: Material Design 5
Web trends: Card design Web trends: Parallax scrolling 6
Web trends: single page design Web Trends: Responsive en nog veel meer, steeds veranderende trends... 7
Web technologie vandaag and more Webtechnologie: Code kloppen of CMS 8
Aanpak Webdesign Voor een groot deel zoals generiek besproken: o PACT o Persona s, scenarios, use cases o Requirements: Understanding & Envisionment o Usability notions/guidelines o Evaluation Maar deels ook anders. Meer web specifiek: J.J. Garrett: Five elements Websites vs normale software Minder controle: o Je weet minder goed wie je gebruikers gaan zijn o Minder controle over hoe men het gebruikt o Je weet minder goed hoe iets er uit gaat zien Meer controle: o je kan meer over gebruikers te weten komen o geen distributie issues, builds, meerdere versies Snel veranderende omgeving: o Gevoelig voor trends o Dynamisch, snel veranderende content 9
Websites: verschil met normale software Niet standalone : o Web as a whole, niet in een applicatie o Per definitie gedistribueerd, connected Design, ook look & feel, esthetiek/identity zeer belangrijk Sociaal! J.J. Garrett: Five elements http://adaptivepath.org/team/jesse james garrett/ http://www.jjg.net/elements/pdf/elements_ch02.pdf 10
Five elements Five elements: Strategy Product objectives Wat willen we met de site bereiken? business goals User needs Wat willen de gebruikers met de site bereiken? market research brand identity success metrics contextual inquiry en andere methoden voor understanding persona s voor verschillende user segments 11
Five elements: Scope Van Waarom maken dit naar Wat maken we (niet)? Duidelijke prioriteiten stellen (relatie met strategie) Uitdrukken in scenario s Functionele specificaties wat kun je met de site doen? Content requirements wat moet op site te vinden zijn? verschillende media content inventory hoe wordt de content onderhouden? Five elements: Structure Creëren van a conceptual structure of the site Interaction design Conceptuele modellen Information achitecture Structuur en navigatie Gebruik conventies en metaforen Classificatie Naamgeving Gerelateerd aan menselijke factoren, cognitie 12
Five elements: Structure 25 Five elements: Skeleton Concreet maken conceptuele structuur o information design: communiceren van ideeën, visualisatie van informatie o interface design: elementen voor interactie, widgets o navigation design: elementen voor navigeren o verschillende typen navigatie o menselijke navigatiestrategieën Maak wireframes (schematisch ontwerp) 13
Web content: leespatronen De F shape Web content: leespatronen bij tekst We lezen niet woord voor woord online. We skimmen en scannen veel (zeker als we niet zeker zijn dat we de juiste info bron hebben). Dus: o In 1e 2 paragrafen moet het belangrijkste staan o Vermijd lange zinnen (meer dan bij print). o Formating, eikpunten (voor scrollen) o Laat subkoppen, paragrafen en bullets informatierijke woorden hebben die opvallen Web copywriting is een discipline op zich zelf. Kranten leveren andere teksten digitaal dan gedrukt. 14
Five elements: Surface Visual design, visueel ontwerp o Wat trekt de aandacht? o Esthetiek Denk aan: o gebruik contrast voor aandacht onderscheid o grid gebaseerde layout o consistentie tussen design elementen o kleuren en fonts zorgvuldig kiezen Design comp(osite): Visuele mock up J.J. Garrett: Five elements 19 Surface Skeleton Structure Scope Strategy 15
J.J. Garrett: Five elements Informatie architectuur Belangrijk onderdeel in de structuur fase van de website design Bestaat uit: o Classificatie en organisatie van informatie / content o Structuur van de site o Navigatiestructuur 16
Informatie architectuur: Classificatie Alfabetisch Chronologisch Geografisch User preferences Doelgroep Belangrijkheid Laatst bekeken Meest bekeken. Informatie architectuur: Classificatie 17
Informatie architectuur: Classificatie Classificatie: Geografisch 18
Classificatie: Belangrijkheid Classificatie: Faceted classification dimensies facetten waarden 19
Structuur Web navigatie: Diepte 20
Web navigatie: onder / boven paginagrens Web navigatie 42 21
Web Navigatie Adequate Labeling Koppen Tekstlinks Buttons Navigatie hulp Menu s (evt met breadcrumbs) Search FAQ Sitemap Web navigatie: Search 22
Web navigatie Box 14.5 Evaluatie van Web navigatie: Trunk test What site is this? (Site ID) What page am I on? (Page name) What are the major sections of this site? (Sections) What are my options at this level? (Local navigation) Where am I in the scheme of things? ( You are here indicators) How can I search? 23
Evaluatie van Web navigatie: Trunk test Site ID You are here Page name Search Local navigation Evaluatie Analytics o Hoeveel (unieke) bezoekers waren er o Hoe vaak komt men terug o Waar komt men vandaan o Hoe lang blijft men o Waar gaat men heen o Hoe lang ronddwalen tot bv. kopen of niet kopen o Vertoont men lostness? o Waar gaan andere dingen fout? o.. 24
Evaluatie A B testing Hoe het niet moet http://www.webpagesthatsuck.com/ 25
Social Media Voorbeelden en wat DOEN we ermee? 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 Virtual worlds Second Life, WoW Location based Foursquare, Yelp Social bookmarking Digg, Delicious Group buying Groupon, Living Social.. 26
De gebruiker? Social Technographics Ladder (Forrester Research) Designing Social media Zeer gericht op participatie User interface is een sociale interface Privé of publieke communicatie Identity staat centraal Users: hebben interesses i.p.v. needs Focus op eind gebruiker ipv. collectieve users We love it (too much sometimes?).. 27
Designing Social media Ook hier weer: PACT, Persona s, scenarios, use cases, Requirements, Usability notions/guidelines, Evaluation Schiet eigenlijk tekort Want: veel meer gebruiksvormen, contexten, foci Wat is er nodig? Social interaction design (SxD)? Social Media Design (SmD)? Social media User experience (SuX)? Social Usability? Social Usability: RICE (niet in boek!) Social Usability is a quality attribute that assesses how easy social interaction are to make (Giacoma & Casali, 2008) 28
Social Usability: RICE (niet in boek!) Social Usability is a quality attribute that assesses how easy social interaction are to make (Giacoma & Casali, 2008) Social Usability: RICE (niet in boek!) Social Usability is a quality attribute that assesses how easy social interaction are to make (Giacoma & Casali, 2008) 29
Social Usability: RICE (niet in boek!) RICE: 4 properties Relations Identity Communication Emergence of Groups http://intenseminimalism.com/wp content/uploads/2010/03/social Usability Checklist 1.0.pdf Social Usability: RICE Relations How easy is it to find other people and connect to them? How easy is it to keep those connections active? How relevant are those connections? 30
Social Usability: RICE Identity How rich is one s personal identity expression? How much are interests and passions expressed? How much are personal distinctive traits show? How much is privacy management detailed? Social Usability: RICE Communication How fast can a message reach the other person? How many messages can one handle efficiently? How easy is it to handle conversations (1 to 1, 1 to some, 1 to many)? 62 31
Social Usability: RICE Emergence of Groups How easy is it to create groups, aggregate and talk around a common interest? How active are groups once established? How long do they last? How much is important to be part of a group? 63 Schrijven voor sociale media: vak apart o Juiste frequentie o Schrijf voor het medium o Begin krachtig o Voorkom herhaling o Gebruik plaatjes o Gemakkelijk te begrijpen o Eén onderwerp per bericht o Actie werkwoorden zoals doe mee, kom o Vermijd SMS lingo o.. 32
Social Media Design? Social media User experience (SuX) www.nngroup.com/reports/social media user experience Vragen? 33