Gränssnittsdesign Introduktion

Transkript

1 Gränssnittsdesign Introduktion Mattias Institutionen för datavetenskap Linköpings universitet 1

2 SAOL gräns snitt s. -et; pl. = förbindelselänk mellan en dator och dess kringutrustning; program som underlättar kontakten mellan dator och användare 2

3 Merriam-Webster in ter face noun \ˈin-tər-ˌfās\ : the place or area at which different things meet and communicate with or affect each other : a system that is used for operating a computer : a system that controls the way information is shown to a computer user and the way the user is able to work with the computer : an area or system through which one machine is connected to another machine 3

4 SAOL deısign [-saj n] s. -en -er konstnärlig formgivning deısigna [-saj na] v. -de formge 4

5 Merriam-Webster de sign verb \di-ˈzīn\ : to plan and make decisions about (something that is being built or created) : to create the plans, drawings, etc., that show how (something) will be made : to plan and make (something) for a specific use or purpose : to think of (something, such as a plan) : to plan (something) in your mind 5

6 Merriam-Webster Origin of DESIGN Middle English, to outline, indicate, mean, from Anglo-French & Medieval Latin; Anglo-French designer to designate, from Medieval Latin designare, from Latin, to mark out, from de- + signare to mark more at sign First Known Use: 14th century 6

7 Design som professionell praktik (Löwgren, 2008) Utforskar möjliga framtider Förbättrar situationen genom en produkt eller tjänst Inbegriper praktiska, tekniska, etiska och estetiska kvaliteter Förståelsen för designproblemet utvecklas samtidigt som förståelsen för möjliga läsningar Idéer gestaltas konkret i skisser och modeller 7

8 Designetik All design bygger på ett personligt ställningstagande om hur du vill se på världen, vad som är viktigt och för vem. Till vilken sorts värld vill du bidra? 8

9 Vi som gör kursen Mattias Arvola, examinator Anna Holm, kursassistent! Håll koll på: 9

10 Lärandemål för INL1 skissa och motivera utformningen av användargränssnitt tillämpa och motivera metoder för granskning av användargränssnitt: heuristisk utvärdering eller kognitiv genomgång. tillämpa grundläggande principer för informationsgrafik och visuell design i användargränssnitt 10

11 Lärandemål för INL2 använda verktyg för att konstruera enkla datorbaserade gränssnittsprototyper formativt testa med användare genom tänka-högt-protokoll 11

12 Lärandemål för INL3 redogöra för metoder för skissning och granskning av användargränssnitt redogöra för grundläggande principer för informationsgrafik och visuell design i användargränssnitt redogöra för verktyg för att konstruera enkla datorbaserade gränssnittsprototyper redogöra för formativ testning med användare genom tänka-högt-protokoll 12

13 Examination För att få G på kursen krävs minst G på alla tre uppgifterna och för att få VG på kursen krävs VG på två av de tre uppgifterna. INL1 och INL2 är gruppuppgifter som görs i grupper om ca. 5 studenter. obligatorisk gruppdel som betygssätts G/U valfri individuell del som görs för chans till VG på uppgiften. INL3 är en helt individuell skriftlig uppgift. 13

14 14

15 15

16 16

17 17

18 För VG på den INL1 och INL2 krävs individuell skissbok (INL1) och screencast från individuellt byggd körbar prototyp (INL2) 18

19 Skissbok av Matilda Zetterblom 19

20 Därutöver introduceras Människa-datorinteraktion Användarupplevelse (eng. user experience, UX) och användbarhet Typer av användargränssnitt Gränssnittsmönster Prototypning av gränssnitt 20

21 Individuell litteraturgranskning Kritisk granskning på 3000 ord Huvudpoänger Resonemang, bevisföring och logik (trovärdighet) Relevans Stöd: Seminarier (ej obligatoriska) 21

22 Kursen bygger vidare på Programmering Teknisk psykologi 22

23 Fortsättningskurser Interaktionsdesign (kandidat) Interaktionsprogrammering (kandidat) Avancerad interaktionsdesign (master) Interaktionsdesign studio (master) Tjänstedesign studio (master) Utveckling av interaktiva system (master) Användbarhetstestning (master) Designforskningsmetod (master) 23

24 Läs kursinformationen noga och fråga om ni undrar! 24

25 Människa-datorinteraktion Ett forskningsfält med rötter i teknisk psykologi och datavetenskap och med en nära relation till kognitionsvetenskap 25

26 MDI / HCI / CHI Ett tvärvetenskapligt ämne som handlar om design, utvärdering och konstruktion av interaktiva system för mänskligt bruk, vilket t.ex. inkluderar: Vad människor och datorer kan åstadkomma tillsammans som ett system Hur människor och datorer kommunicerar med varandra Människans förmåga att hantera datorer (inklusive lärbarhet för gränssnitt) Algoritmer i gränssnitt Specifikation, design och implementation av gränssnitt Kompromisser i design 26

27 Delvetenskaper Datavetenskap: applikationsdesign och utveckling av användargränssnitt Psykologi: kognitiva processer och analys av användares beteende Sociologi och antropologi: interaktion genom teknik, arbete och organisation Industridesign: interaktiva produkter och tjänster 27

28 Use and Context U1 Social Organization and Work U3 Human-Machine Fit and Adaptation U2 Application Areas Human Computer H1 Human Information Processing C2 Dialogue Techniques C4 Computer Graphics H2 Language, Communication and Interaction H3 Ergonomics C3 Dialogue C1 Input and Genre Output Devices C5 Dialogue Architecture D3 Evaluation Techniques D4 Example Systems and Case Studies D1 Design Approaches Development Process D2 Implementation Techniques and Tools 28

29 Dåtid: Framväxten av gränssnittsdesign 29

30 30 Grudin & Poltrock (i tryck)

31 Grudin (1990) HI 90 Ptmeedim Figure 1. The five foci of interface development. HE TRAJECTORY OF INTERFACE RESEARCH ND DEVELOPMENT 31 the sale of proprietary hardware, but the myriad third-part Macintosh developers have used the interface to drive

32 Batch Computing Sätt ihop en hög med hålkort Lägg dem i kön och vänta Operatören kör dem när det är din tur Sedan får du vänta lite till Låter det bekant? Fyll i ett formulär på nätet Skicka in dina kommandon till servern Sedan skickar den tillbaka ditt resultat Vi gör fortfarande batch computing då vi inte kan få realtidsinteraktion! 32

33 Kommandogränssnitt cp meriter.txt ~/personligt!! Kopiera filen meriter.txt till katalogen personligt i hemkatalogen 33

34 Fördelar och nackdelar med kommandogränssnitt + Om användaren bara vet och kommer ihåg rätt kommandon så är detta det snabbaste gränssnittet för många uppgifter + Gränssnittet kräver mindre minne än andra gränssnitt + Det kräver mindre CPU än andra gränssnitt + En lågupplöst billig skärm kan användas + Remote access + Går att skripta + Upplevd kontroll när man väl behärskar det. - För någon som aldrig använt ett CLI så är det förvirrande - Kommandon måste vara exakt rätt inmatade - Om man skriver fel så måste man ofta börja om från början - Man måste lära sig massvis av kommandon vilket leder till hög investeringskostnad för att komma igång 34

35 Menygränssnitt Interaktionen sker genom att man stegar sig igenom en hierarki av menyer eller skärmar Man får en meny, gör ett val och får nästa meny ur vilken man gör ett val osv. Menyer kan vara endimensionella eller tvådimensionella Exempel: Mobiler, bankomater, informationskiosker, TV-gränssnitt 35

36 Fördelar och nackdelar med menygränssnitt + Man behöver inte lära sig några kommandon + Man får val presenterade steg för steg och behöver inte komma ihåg något + Även om man inte vet vad man ska göra så kan man gissa + Menyer behöver inte vara visuella utan kan läsas upp + Kräver inte så mycket CPU eller minne! - Ett dåligt designat menygränssnitt blir lätt ineffektivt - Många menyer eller skärmar att gå igenom kan vara irriterande - Oftast kan man inte gå direkt dit man vill i menyhierarkin 36

37 Grafiska gränssnitt Vårt vanligaste gränssnitt idag Använder sig ofta av WIMP Windows, Icons, Menus, Pointers Baseras på principen WYSIWIG What you see is what you get Direktmanipulation Spatiala representationer Visar handlingar med markören 37

38 38

39 Fördelar med grafiska gränssnitt + Man behöver inte lära sig någon syntax eller kommandon + Multitasking: Gör det lätt att flytta data mellan olika program + Uppenbara kontrolldon + Snabb och synlig respons + Enkelt att ångra + Synligt handlingsutrymme + Lätt att skapa alternativ och jämföra + Tydligt vad som sker + Noviser lär sig snabbt + Experter jobbar snabbt + Mellanbra användare behåller sin kunskap + Felmeddelande behövs sällan + Användare upplever mindre oro + Användare kan se om handlingarna för dem närmare målet + Användare utvecklar självförtroende och expertis 39

40 Nackdelar med grafiska gränssnitt - Kräver mer hårddisk, minne och CPU än många andra gränssnitt - Spatiala eller visuella representationer kan bli för utspridda så att man tappar överblicken - Flödesscheman på hög abstraktionsnivå och databasscheman blir förvirrande komplexa - Vissa designlösningar kan tvinga bort viktig information från skärmen - Användarna måste lära sig de grafiska representationerna - Den visuella representationen kan vara missvisande - Att skriva kommandon kan vara snabbare 40

41 Nutid: Design bortom gränssnitt 41

42 IxD Löwgren & Stolterman 1998 Den process som ordnas inom begränsade resursramar för att skapa, forma och fastställa de bruksorienterade egenskaperna (strukturella, funktionella, etiska och estetiska) hos en digital artefakt för en eller flera uppdragsgivare. 42

43 IxD Ottersten & Berndtsson 2002 Den process där samspelet mellan användaren och produkten utformas. 43

44 IxD (Arvola, 2005; Buchanan, 2001; Hernwall & Arvola, 2008) Interaction design does, however, not only involve shaping conditions for the interaction between people and artifacts. It also involves shaping conditions for the interaction between people by means of artifacts. 44

45 UX Design Norman (1998) I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person s experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual. Since then the term has spread widely, so much so that it is starting to lose it s meaning e

46 WEB AS SOFTWARE INTERFACE Concrete WEB AS HYPERTEXT SYSTEM Completion Web as hypertext sys f interface el") Visual Design Visual Design: visual treatment of text, graphic page elements and navigational components CI: ilitate sense: mation Interface Design Information Design Navigation Design Navigation Design: design of interface elements to facilitate the user's moveme through UX the information DESIGN architecture Information Design: in the Tuftean sense designing the presentation GARRET 2000 of information to facilitate understanding f tasks, h Interaction Information Design Architecture time Information Architecture: structural desig of the information space to facilitate intuitive access to content set": ity the site needs Functional Content Specifications Requirements Content Requirements: definition of content elements required in the site in order to meet user needs ls r research, or other User Needs Site Objectives User Needs: externally derived goals for the site; identified through user resea ethno/techno/psychographics, etc. Site Objectives: business, creative, or oth internally derived goals for the site Abstract Conception information-orien he model outlined here does not account for secondary considerations (such as those arising during technical or content development) 46 s during user experience development. Also, this model does not describe a development process, nor does it define roles within a

47 Web Mobile Phone Store user experience 47

48 Vad är en UX-vision? Hur vi vill att användare ska uppleva vår produkt eller tjänst och hur den upplevelsen ska skilja sig från konkurrenterna. 48

49 Personas Precisa beskrivningar av hypotetiska individer baserat på fakta om potentiella användare. Porträtteras som en riktig levande person med ett namn och ansikte för att öka empati. Ger delad förståelse för vem man designar för Ett verktyg för kommunikation i teamet och med kunder 49

50 Bao Li Yrke: Student Ålder: 24 Jag försöker läsa svenska själv, men det är svårt att hitta bra texter.! Bao Li, går sista terminen på master-programmet i computer science och hoppas kunna doktorera i Sverige. Li är från Kina bor sedan ett par år i en korridor i Ryd i Linköping. Han är här som en så kallad freemover. Li pratar mycket bra engelska, och kan samtala på svenska så länge det inte går för fort eller dialekten är för svår. Han kan även läsa lättare texter på svenska, men eftersom han är duktig på engelska använder han ibland det när han söker information. Han har gått ett par kurser i svenska, och vill gärna lära sig mer, så när han har gott om tid söker han ibland information på svenska för att träna på läsningen. Då föredrar han tekniska texter eftersom många termer är samma på många olika språk. När han läste kurser i svenska tipsade läraren om att använda svt.se och sr.se för att lyssna till svenska och läsa kortare texter, vilket han tycker fungerar väldigt bra. Han lär sig även genom att se engelska TV-program och läsa den svenska textremsan. Om han har ont om tid låter han browsern översätta webbplatserna till engel-ska, men detta fungerar inte alltid, särskilt på bankrelaterade webb-platser. Då måste han ibland översätta ord för ord i Google translate eller slå upp i lexikon, och detta tar lång tid. Li är på universitet större delen av dagarna, och har då med sig sin egen laptop som han använder till det mesta. Under-visningen är på engelska, så den har han inga problem med, men han försöker använda svenska så mycket som möjligt i samtal med andra studenter. Då han lärt känna många utbytesstudenter under sin tid i Linköping använder han gärna Facebook och Skype för att hålla kontakten med dem, speciellt de som flyttat från Sverige. Li har mycket god datorvana och det finns egentligen ingenting som han inte skulle använda datorn till eller inte leta efter på internet.!!!!!!!!!!! Mål Bli bättre på svenska språket Snabbt hitta den information han söker Klara sin utbildning och njuta av tiden i Sverige 50

51 Tjänstedesign Segelström (2013, s. 27) the use of a designerly way of working when improving or developing peopleintensive service systems through the engagement of stakeholders (such as users and frontline staff). 51

52 Informationsarkitektur Rosenfeld & Morville (2006) 1. The structural design of shared information environments 2.The art and science of organizing and labeling Web sites, intranets, online communities, Text and software to support usability and findability 3.An emerging community of practice focused on bringing principles of design and architecture to the digital landscape 52

53 Mobila gränssnitt Små skärmar betyder mindre screen real estate: hårdare prioritering Den mobila brukssituationen ser annorlunda ut än den stationära Vad behöver man vet och göra i just denna användningssituation, vid denna tidpunkt? Används den vid besök, på resande fot, eller i en lokal? Vad händer när man vrider skärmen? Tänk location-based Minimal användarhjälp 53

54 Inmatning i mobila gränssnitt Pekskärm med en eller flera punkters interaktion Mjukt tangentbord Fysiskt tangentbord Mikrofon Fysiska knappar Sensorer 54

55 Gränssnitt till interaktiva system Webbsajter, intranät, och communities Interaktiva miljöer och utställningar Mjukvarugränssnitt Mobila appar och operativ Kontrollrumsdisplayer Gränssnitt för interaktiva konsumentprodukter och mediasystem 55

56 Interaktiva system Erbjuder folk att samverka och samspela med dem, genom dem eller med hjälp av dem Att samspela betyder här att brukare, produkter och tjänster samverkar på ett i bästa fall harmoniskt och lekfullt enkelt sätt Brukare och produkter eller tjänster handlar gemensamt i förening mot ett gemensamt mål och på ett samordnat sätt Datorbaserade produkter och tjänster kan svara på eller initiera handlingar vilket skapar en dialog i systemet i form av ett tidsmässigt flöde 56