2 Introduktion till gränssnittsdesign Mattias Arvola 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 (SAOL) 3 4 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 (Merriam-Webster) deısign [-saj n] s. -en -er konstnärlig formgivning deısigna [-saj na] v. -de formge (SAOL) 5 6 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 (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 (Merriam-Webster)
7 8 Design Archer 1965 1.Det måste finnas en ritning eller modell för ett färdigt arbete innan dess färdigställande 2.Ritningen eller modellen måste förverkligas i / som en artefakt 3.Det måste finnas ett kreativt steg i processen 4.Det måste ha ändamål. Syfte före utforskning. 5.Det är intuitivt, men inte spontant 6.Det måste börja med ett behov 7.Det måste förlika/ överensstämma 8.Det måste vara holistiskt och tänka igenom en artefakt i ett system och inte i sig sjäv 9.Dess problem är komplexa 10.Det handlar om optimering av lösningar Design som professionell praktik 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 Designetik, genus, normkritik, stereotyper, och intersektionalitet 9 Vi som gör kursen 10 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? Mattias Arvola, examinator Eva Ragnemalm, lärare Ove Jansson, kursassistent Vems röst är viktig att lyssna på? Vilka normer förstärks och bryts? Vilka maktaxlar spelar in i designsituationen? Håll koll på: http://www.ida.liu.se/~729g44 Genus Etnisitet Ålder Examination 11 12 INL1 Skrivbordsapplikationer: Granskning och uppgiftsanalys Tre individuella uppgifter (INL1, INL2 och INL3) om vardera 2 hp. För G krävs minst G på alla tre uppgifterna För VG krävs VG på 2 av 3 INL2 och INL3 har obligatoriskt redovisningstillfälle. Om du absolut inte kan närvara ska du kontakta examinator i förväg. Bedömningskriterier anges i uppgiftsbeskrivningarna. Om någon central del av uppgiften saknas eller om arbetet håller för låg designmässig eller akademisk kvalitet så underkänns det. http://www.ida.liu.se/~729g44/assignment1/ index.sv.shtml
INL2 Mobil och webb: Skissning och motiverad utformning 13 14 INL3 Prototyp: Visuell utformning och tänka-högt-protokoll http://www.ida.liu.se/~729g44/assignment2/ index.sv.shtml http://www.ida.liu.se/~729g44/assignment3/ index.sv.shtml 15 Deadlines 16 Skisstavla i INL2 INL1: Fredag 7/10 (17:15) via matar63.liu snabel-a analys.urkund.se INL2: Skisstavlan redovisas på anvisad kritiksession vecka 43. Deadline för inlämning av idélogg med tillhörande reflektion är fredag 28/10 kl. 17:15 (lämnas i låda utanför Mattias kontor). INL3: Rapport skickas in senast 11/11 (kl. 17:15) via matar63.liu snabel-a analys.urkund.se. Prototyp demonstreras vid anvisad session vecka 45. Kompletteringsdeadline är fredag 2017-01-20, kl. 17.15. Missas kompletteringsdeadline så görs istället nästa kursomgångs uppgifter. Skisstavla i INL2
22 Idélogg av Matilda Zetterblom 24 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
Kognitionsvetenskaplig Kognitiv Forskningsmetod och statistik v44-v3 Kognitionspsykologiska datorlabbar v4-v8 Språkvetenskaplig databehandling v14-v23 26 introduktions- psykologi kurs v39-v43 Lingvistik Kvalitativa forsknings- Teknisk psykologi v34-v38 v44-v3 Programmering och diskret matematik v34-v3 metoder v9-v13 v14-v23 Programmering och logik v4-v23 Kursen bygger vidare på Kognitiv neurovetenskap* Gränssnittsdesign v34-v43 v44-v3 Artificiell intelligens v34-v3 Distribuerad och situerad kognition* v34-v3 Språkteknologi* v4-v11 block 24 Social kognition* v4-v11 block 13 Medvetandefilosofi v12-v17 block 24 Tillämpad kognitionsvetenskap* v12-v23 block 13 Programmering Teknisk psykologi Fördjupningskurs i människateknikinteraktion* v34-v45 block 3 Interaktionsdesign och user experience Kvasiexperiment och statistisk analys v46-v3 block 4 Språk, kultur och kognition* v4-v13 block 1 Avslutn.-kurs för kog.vet. på grundnivå v14-v23 block 1 Interaktionsdesign* v34-v39 block 1 Interaktionsprogrammering* v40-v45 block 2 Interaktionsanalys* v46-v3 block 1 Kandidatuppsats v4-v23 block 24 Språk- och informationsteknik Webprogrammering Lokalisering, och databaser översättning och v34-v39 block 2 terminologi v40-v45 block 4 Människa-maskinsystem och human factors Kognition och Sammansatta funktionshinder kognitiva system v34-v39 block 4 v40-v45 block 1 Välj 1 av 3 Välj 1 av 3 Kognitiv modellering v46-v3 block 2 Välj 2 av 3 Kursansvariga med samtidiga kurser koordinerar examinationstillfällen så att samtidiga arbetstoppar undviks. Termin 5 har valbara tillämpnings- och metodfördjupningskurser. Studenterna väljer 2 av 3 metodkurser och 2 av 6 tillämpningskurser. Dessutom läser alla MTI som är hälften metod och och hälften tillämpning. * Kursen ges på engelska vid behov. 27 28 Fortsättingskurser Interaktionsdesign (kandidat) Interaktionsprogrammering (kandidat) Avancerad interaktionsdesign (master) Interaktionsdesign studio (master) Tjänstedesign studio (master) Utveckling av interaktiva system (master) Användbarhetstestning (master) Designforskningsmetod (master) Läs kursinformationen noga och fråga om ni undrar! 29 30 Människa-datorinteraktion Ett forskningsfält med rötter i teknisk psykologi och datavetenskap och med en nära relation till kognitionsvetenskap 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
31 Use and Context 32 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 U1 Social Organization and Work Human H1 Human Information Processing H2 Language, Communication and Interaction D3 Evaluation Techniques U2 Application Areas H3 Ergonomics C1 Input and Output Devices D4 Example Systems and Case Studies D1 Design Approaches Development Process U3 Human-Machine Fit and Adaptation Computer C2 Dialogue C4 Computer Techniques Graphics C3 Dialogue Genre C5 Dialogue Architecture D2 Implementation Techniques and Tools Grudin & Poltrock (2012) 34 Dåtid Framväxten av gränssnittsdesign Grudin (1990) 35 36 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!
37 Menygränssnitt 38 Kommandogränssnitt cp meriter.txt ~/personligt Kopiera filen meriter.txt till katalogen personligt i hemkatalogen 39 Grafiska gränssnitt (GUI) 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 42 IxD Löwgren & Stolterman 1998 Nutid Design bortom gränssnitt 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.
43 44 IxD Ottersten & Berndtsson 2002 Den process där samspelet mellan användaren och produkten utformas. 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. 45 WEB AS SOFTWARE INTERFACE Concrete WEB AS HYPERTEXT SYSTEM Completion 46 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 http://www.adaptivepath.com/ideas/e000862 Visual Design Interface Design Navigation Design Information Design Interaction Information Design Architecture Functional Content Specifications Requirements User Needs Site Objectives time Abstract Conception UX Design Garret 2000 Web Mobile Phone Store Vad är en UX-vision? 48 user experience Hur vi vill att användare ska uppleva vår produkt eller tjänst och hur den upplevelsen ska skilja sig från konkurrenterna.
49 50 1. Plan the human-centred process 2. Understand the context of use The Task-Artifact Cycle Meets the requirements 5. Evaluate against requirements 3. Specify user and business requirements Adoption, appropriation and use A Human-Centered Design Process (ISO 9241-210, 2010) 4. Produce design soludons Task Requirements and design ideas Artifact 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 51 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å masterprogrammet i computer science och hoppas kunna doktorera i Sverige. Li är från Kina bor sedan ei 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äiare texter på svenska, men ejersom han är dukkg på engelska använder han ibland det när han söker informakon. Han har gåi ei par kurser i svenska, och vill gärna lära sig mer, så när han har goi om kd söker han ibland informakon på svenska för ai träna på läsningen. Då föredrar han tekniska texter ejersom många termer är samma på många olika språk. När han läste kurser i svenska kpsade läraren om ai använda svt.se och sr.se för ai lyssna kll svenska och läsa kortare texter, vilket han tycker fungerar väldigt bra. Han lär sig även genom ai se engelska TV-program och läsa den svenska textremsan. Om han har ont om kd låter han browsern översäia webbplatserna kll engelska, men deia fungerar inte allkd, särskilt på bankrelaterade webbplatser. Då måste han ibland översäia ord för ord i Google translate eller slå upp i lexikon, och deia tar lång kd. Li är på universitet större delen av dagarna, och har då med sig sin egen laptop som han använder kll det mesta. Undervisningen ä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 kd i Linköping använder han gärna Facebook och Skype för ai hålla kontakten med dem, speciellt de som flyiat från Sverige. Li har mycket god datorvana och det finns egentligen ingenkng som han inte skulle använda datorn kll eller inte leta ejer 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 53 54 Tjänstedesign Segelström (2013, s. 27) the use of a designerly way of working when improving or developing people-intensive service systems through the engagement of stakeholders (such as users and frontline staff). 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, 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
Mobila gränssnitt 55 56 Inmatning i mobila gränssnitt Pekskärm med en eller flera punkters interaktion Mjukt tangentbord Fysiskt tangentbord Mikrofon Fysiska knappar Sensorer Briteback Uniform Integrations Interface 57 58 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 Interaktiva system Erbjuder folk att 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 Människor 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 http://www.ida.liu.se/~729g44/ index.sv.shtml www.liu.se