Visual interface design, Website design, Social Media

Transcriptie

1 Visual interface design, Website design, Social Media Ontwerpen van Interactieve Systemen Christof van Nimwegen, 13 maart 2017

2 Visual Interface Design (14.5 niet) Design twee betekenissen (zie ook college 1) ontwerpen: het proces waarin iets nieuws wordt bedacht ontwerp: de specificatie ( representation ) van dat nieuwe vaak specifiek bedoeld: visueel ontwerp, stijl, artisticiteit design volgens Powerpoint

3 User interface (UI) alles aan het systeem waarmee een mens in contact komt interactie verloopt fysiek: het apparaat wordt bediend door menselijk handelen: aanraken, toetsen indrukken perceptueel: mens ontvangt waarneembare signalen van apparaat conceptueel: het mentale model van het systeem: wat is het, hoe werkt het, wat kun je ermee doen vormen samen de experience

4 Visual Interface design: aspects hoe gaat je design language eruit zien? hoe ga je design language elementen combineren om je ontwerp te realiseren? representational design interaction design plan user interfaces en widgets ontwerpprincipes, perceptie en cognitie

5 Evolution

6 Evolution: Command line interface user interacteert via commando s: woorden, syntax om operations (opdrachten) uit te voeren

7 Evolution: Command line interface Nog steeds onderdeel van vele systemen, b.v. Nadeel Windows command shell exacte syntax noodzakelijk, soms onduidelijk/onlogisch (cognitie: ontwerp voor Recognition ipv. Recall) Voordeel Als je het begrijpt en je eigen maakt kan het zeer snel en krachtig zijn (expert mode) Filosofisch belangrijk verschil met GUI computer doet complete taak op instructie (leren; recall) vs. samenwerking (intuitie, recognition)

8 Evolution: B.v. Eerste spreadsheet

9 Evolution: De muis

10 Evolution: Apple Lisa (1983) $9.995 toen $ vandaag

11 Graphical user interfaces (GUIs) Originated in academia (Stanford, MIT) and research institutes (Xerox PARC) Often described as WIMP interfaces Windows Icons Menus Pointers Key characteristic: Direct manipulation (in contrast to e.g. command line interfaces) Not only for desktop computing, but also, e.g., mobile phones kiosk system (kaartjesautomaat), interactive menus on your TV set

12 Direct manipulation Ben Shneiderman, The future of interactive systems and the emergence of direct manipulation (1982) direct manipulation veronderstelt een interface met: continue representatie van objecten fysieke acties i.p.v. commandos omkeerbare operaties op objecten Shneiderman verder belangrijk voor: informatievisualisatie usability guidelines in interface design

13 WIMP interfaces Windows windows screen divided into areas that act as separate input/output channels

14 WIMP interfaces Icons used to represent features and functions considered useful to help people to recognize which feature they need to access design approaches: Metaphor: transferring knowledge from one to another domain Direct mapping: creating a more or less direct image of what icon must represent Convention: arbitrary design that has been accepted over time

15 Metafoor, direct mapping of conventie?

16 WIMP interfaces Icons important design issues: legibility discriminating between icons Understandable understanding the meaning to avoid misinterpretation: label Horton s icon checklist: Understandable Unambiguous Informative Familiar Memorable Few Attractive Distinct Legible Attractive Compact Coherent Extensible

17 WIMP interfaces Menus commands grouped into menu topics contextual menus hierarchically organized (cascading) special cases: and: popup menu contextual menu keyboard shortcuts for experienced users (origin: pre-wimp) cascading menus keyboard shortcuts

18 WIMP interfaces Pointers traditional mouse (or track pad on laptops) alternatives remote control: track pad, joysticks, trackballs, direct touch: pen/stylus, finger, remote pointer: Wii controller, infrared mouse, newer trends: multitouch gesture interaction

19 WIMPs and widgets WIMP = Building blocks of modern GUIs but how to build intuitive, useful interfaces with these? at smaller level of detail: widgets individual interactive components radio buttons, checkboxes, toolbars, list boxes each with their own specific function(s)

20 A miscellany of widgets buttons Command button Radio button Checkboxes

21 A miscellany of widgets list boxes List-box Drop-down list Multiple-select box list box Combo-box Text box

22 A miscellany of widgets value selection Drop-down list box Combo-box Spin box Slider For selecting continuous values Also for navigation (e.g. timeline!)

23 A miscellany of widgets others Tab control Cues (Elements without interaction)

24 Guidelines: waarop gebaseerd? Richtlijnen van ontwikkelomgevingen en besturingssystemen Esthetiek, trends Ergonomie Psychologie: cognitie en perceptie Gestalt theorie, ontwikkeld 1e helft 20e eeuw (Wertheimer) ordening waargenomen eenheden tot grotere gehelen The whole is more than the sum of its parts

25 Gestalt principes voor- en achtergrond continuïteit gelijkenis geslotenheid nabijheid

26 Nabijheid in Interface design nabijheid = proximity Objects that appear close together in space or time tent to be perceived together Application in interface design, e.g.

27 Continuiteit in Interface design We tend to perceive continuous patterns rather than disjoint Application in interface design, e.g.

28 Gelijkenis in Interface design gelijkenis = similarity Similar figures tend to be grouped together Similarity can be shape, size, color, texture, orientation, Application in interface design, e.g.

29 Geslotenheid in Interface design geslotenheid = closure We tend to see complete figures even when part of the information is missing

30 Color conventions Table 5.1 Some Western color conventions. Source: Marcus, A. (1992) Graphic Design for Electronic Documents and User Interfaces

31 Cultuur en kleur

32 Cultuur en kleur

33 46

34 David McCandless Colour Wheel A: Western /American B: Japanese C: Hindu D: Native American E: Chinese F: Asian G: Eastern European H: Muslim I: African J: South American 3:Authority 2: Art/Creativity 1: Anger 84: Wisdom 83: Warmth 82: Virtue

35 Geheugen en cognitie werkgeheugen, beperkte capaciteit chunking lange-termijngeheugen: vrijwel onbeperkte capaciteit herkennen (recognition) makkelijk, actief herinneren (retrieval) moeilijk leerbaarheid, consistentie zie ook college Usability

36 Working memory: capaciteit capaciteit is 4-5 items richtlijn voor ontwerp: vermijd overbelasting

37 Korte termijn geheugen: chunking capaciteit working memory wordt vergroot door chunking groeperen componenten, als in richtlijn voor ontwerp: groepeer verwante items bij elkaar, gebruik hiërarchische structuur

38 Lange-termijngeheugen design for recognition rather than recall computers are good at remembering, people are not Promote recognition over recall, e.g. menus (instead of command lines), choice dialog boxes, icons,

39 Zero UI?

40 Zero UI?

41 Zero UI?

42

43 Zero UI?

44 Future InteractionTechnology Inventions?

45 Designing Websites

46 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 En: 14:5 is GEEN stof

47 Websites: in dit hoofdstuk 4 typen Badre (2002)!!!!! Nieuws Shopping Informatie Entertainment Dekt dit het anno 2017? Focus: Design / development, effective, learnable and accomodating

48 Trends: Vroeger..

49 Trends: Vroeger en nu..

50 Web trends: Flat design, Ghost buttons

51 Web trends: Material Design

52 Web trends: Card design

53 Web trends: Parallax scrolling

54 Web trends: single page design

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

56 Webtechnologie vandaag and more

57 Webtechnologie: Code kloppen of CMS

58 Websites: verschil 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

59 Aanpak Webdesign Voor een groot deel zoals generiek besproken: PACT Persona s, scenarios, usecases Requirements: Understanding & Envisionment Usability notions/guidelines Evaluation Maar deels ook anders. Meer web specifiek: J.J. Garrett: Five elements

60 J.J. Garrett: Five elements

61 J.J. Garrett: Five elements 19 Surface Skeleton Structure Scope Strategy

62 Five elements: Strategy Strategy wat willen we met deze site bereiken? product objectives: business goals, brand identity, success metrics wat willen onze gebruikers ermee bereiken? user needs: market research, contextual inquiry en andere methoden voor understanding, persona s voor verschillende user segments

63 Five elements: Scope vertaalslag waarom maken we dit naar wat maken we precies dus ook: wat maken we niet 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? duidelijke prioriteiten stellen (relatie met strategie)

64 Five elements: Structure creëren van a conceptual structure of the site interaction design Interactie: mens en technologie conceptuele modellen gebruik conventies en metaforen information architecture structuur en navigatie content classificatie naamgeving gerelateerd aan menselijke factoren, cognitie

65 Five elements: Skeleton concreet maken conceptuele structuur information design: communiceren van ideeën, - o.a. visualisatie van informatie interface design: elementen voor interactie - widgets, bekend uit OIS navigation design: elementen voor navigeren - verschillende typen navigatie - menselijke navigatiestrategieën alles afwegen in wireframes schematisch ontwerp webpagina

66 Five elements: Surface visual design, visueel ontwerp best begrepen hoe bewegen je ogen over het interface? wat trekt de aandacht? esthetiek een paar principes gebruik contrast voor aandacht-onderscheid grid-gebaseerde layout consistentie tussen design elementen kleuren en fonts zorgvuldig kiezen design comp(osite): visuele mockup

67 Diagram, structuur 67

68 Web content: leespatronen De F-shape

69 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..

70 Informatie architectuur: Classificatie Alfabetisch Chronologisch Geografisch User preferences Doelgroep Belangrijkheid Laatst bekeken Meest bekeken.

71 Informatie architectuur: Classificatie Voor (een beetje) erna

72 Informatie architectuur: Geografisch

73 Informatie architectuur: Belangrijkheid

74 Classificatie: Faceted classification beschrijft content via 3 aspecten Dimensies (hoofdconcepten uit ontologie) per dimensie aantal facetten (attributen, eigenschappen) per facet aantal waarden

75 Structuur

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

77 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?

78 Web navigatie: Search

79 Web navigatie Box 14.5

80 Web navigatie 80

81 Navigatie: Diepte

82 Navigatie: onder / boven paginagrens

83 Analytics als input voor beter webdesign Adequate Labeling 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?

84 Evaluatie: Analytics, A-B testing

85 Hoe het niet moet

86 Social Media

87 Wat DOEN we ermee? Sociaal (vrienden, kennissen, familie) 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 Widgets- Profile badges, Like buttons Social bookmarking - Digg, Delicious Group buying- Groupon, Living Social

88 De gebruiker? Social Technographics Ladder (Forrester Research)

89 Wat is anders, belangrijk voor design? Focus op eind gebruiker ipv. collectieve users Zeer gericht op participatie Identity staat centraal Privé of publieke communicatie User interface is een sociale interface Users: hebben interesses i.p.v. needs We love it (too much sometimes?)..

90 Designing Social media Ook hier weer: PACT, Persona s, scenarios, usecases, Requirements, Usability notions/guidelines, Evaluation Schiet eigenlijk tekort Want: veel meer gebruiksvormen, contexten, foci Wat is er nodig? Social Usability? Social interaction design (SxD)? Social Media Design (SmD)? Social media User experience (SuX)?

91 Social Usability: RICE (niet in boek!)

92 Social Usability: RICE (niet in boek!) Giacoma & Casali (2008) Social Usability is a quality attribute that assesses how easy social interaction are to make RICE: 4 properties Relations Identity Communication Emergence of Groups

93 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? 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?

94 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)? 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? 94

95 Social Media Design? Social media User experience (SuX) social-media-userexperience

96 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..

97 Vragen?