Gränssnittsdesign Introduktion



Relevanta dokument
Introduktion till gränssnittsdesign

Introduktion och Humancentered. Jody Foo,

Introduktion till gränssnittsdesign

Introduktion och Human-centered design. Mattias Institutionen för datavetenskap Linköpings universitet

Användargränssnitt. Dagens föresläsning

Människa-Datorinteraktion

TDP022 Användargränssnitt

Tangible interaction &TUI KIRSTEN RASSMUS-GRÖHN

Kommandobaserad interaktion

Föreläsning i webbdesign. Interak*onsdesign. Rune Körnefors. Medieteknik Rune Körnefors rune.kornefors@lnu.se

Beijer Electronics AB 2000, MA00336A,

Att fastställa krav. Annakarin Nyberg

INTERAKTIONSDESIGN: VAD & HUR?

Writing with context. Att skriva med sammanhang

Från extern till intern på tre dagar Erfarenheter från externa lärares pedagogiska kompetensutveckling

Kursplan. FÖ3032 Redovisning och styrning av internationellt verksamma företag. 15 högskolepoäng, Avancerad nivå 1

Examensarbete Introduk)on - Slutsatser Anne Håkansson annehak@kth.se Studierektor Examensarbeten ICT-skolan, KTH

District Application for Partnership

Användargränssnitt. Mentala modeller i design (Norman, 1988) Det ska fungera som (Marcus, 1995)

LARS. Ett e-bokningssystem för skoldatorer.

Modellering av data med personor. Personor. Persona. Varför fungerar de? Bao Li

Granskning av gränssnitt. Mattias Arvola

Workplan Food. Spring term 2016 Year 7. Name:

RUP är en omfattande process, ett processramverk. RUP bör införas stegvis. RUP måste anpassas. till organisationen till projektet

Interaktionsdesign, grundkurs (7,5 HP)

Kursplan. MT1051 3D CAD Grundläggande. 7,5 högskolepoäng, Grundnivå 1. 3D-CAD Basic Course

Utvärdering SFI, ht -13

Introduktion och grunder

Datavetenskap. Beteendevetenskap MDI. Design

Protokoll Föreningsutskottet

Information technology Open Document Format for Office Applications (OpenDocument) v1.0 (ISO/IEC 26300:2006, IDT) SWEDISH STANDARDS INSTITUTE

IAK115 Kritiskt tänkande och teori inom arkitektur och design 1&2, 4 hp (H15)

Innehåll. Styrdon (ej i boken) Fitts lag (sidan ) Natural user interfaces. Kap 6.2.9, , Kap

Webbtillgänglighet. Tillgänglighet på webben. Hörselskadades behov. Synskadades behov. Kognitivt funktionshindrades behov. Rörelsehindrades behov

Klicka här för att ändra format

MÅLSTYRNING OCH LÄRANDE: En problematisering av målstyrda graderade betyg

Interaktionsdesign, grundkurs (7,5 HP)

Kursplan. EN1088 Engelsk språkdidaktik. 7,5 högskolepoäng, Grundnivå 1. English Language Learning and Teaching

Design för användbarhet

DH2622 MDI-fk Introduktion till kursen & ämnet. MDI på KTH. Kursen i sitt sammanhang

Blueprint Den här planeringen skapades med Blueprints gratisversion - vänligen uppgradera nu. Engelska, La06 - Kursöversikt, 2015/2016.

IAK116 Perception/Färg, Ljus, Rum 1, 6 hp (VT16)


Tjänster, design och innovation. Tjänstedesign, vad är det

Design för användbarhet Designexempel, hur tänkte man vid designen?

IC1007 Människa-dator interaktion: Principer och Design 7,5 hp

Förskola i Bromma- Examensarbete. Henrik Westling. Supervisor. Examiner

Principer för interaktionsdesign

The present situation on the application of ICT in precision agriculture in Sweden

Isolda Purchase - EDI

Dataförmedlad kommunikation och sociala medier, 7,5 hp

Swedish adaptation of ISO TC 211 Quality principles. Erik Stenborg

Immigration Studying. Studying - University. Stating that you want to enroll. Stating that you want to apply for a course.

Om oss DET PERFEKTA KOMPLEMENTET THE PERFECT COMPLETION 04 EN BINZ ÄR PRECIS SÅ BRA SOM DU FÖRVÄNTAR DIG A BINZ IS JUST AS GOOD AS YOU THINK 05

Campuskurs Distanskurs Annan. Examinator Remigijus Gustas

Människa-datorinteraktion 7,5 p

6 th Grade English October 6-10, 2014

A metadata registry for Japanese construction field

Sara Skärhem Martin Jansson Dalarna Science Park

Kursplan. AB1029 Introduktion till Professionell kommunikation - mer än bara samtal. 7,5 högskolepoäng, Grundnivå 1

Stad + Data = Makt. Kart/GIS-dag SamGIS Skåne 6 december 2017

ISO STATUS. Prof. dr Vidosav D. MAJSTOROVIĆ 1/14. Mašinski fakultet u Beogradu - PM. Tuesday, December 09,

Kvalitetsarbete I Landstinget i Kalmar län. 24 oktober 2007 Eva Arvidsson

Självkörande bilar. Alvin Karlsson TE14A 9/3-2015

Design och konstruktion av användargränssnitt (distans) Mänsklig styrning av höghastighetsbåtar. Avdelningen för Människadatorinteraktion

Vad säger forskningen om programmering som kunskapsinnehåll? Karin Stolpe, föreståndare NATDID liu.se/natdid

Det finns en handledning till kortet på hemsidan. AVR STK500.

Webbregistrering pa kurs och termin

Goals for third cycle studies according to the Higher Education Ordinance of Sweden (Sw. "Högskoleförordningen")

Interaktionsdesign. Användbarhet ISO Usability goals. Interaktionsdesign, grundkurs (7,5 HP) Sammanfattande föreläsning

University of Nottingham ett internationellt campus med många inriktningar

Datavetenskapligt program, N1COS

Quick Start Guide Snabbguide

2.1 Installation of driver using Internet Installation of driver from disk... 3

Designdiscipliner. Tjänstedesigner, vad gör man

Socionomen i sitt sammanhang. Praktikens mål påverkas av: Socialt arbete. Institutionella sammanhanget

Interaktionsdesign, grundkurs (7,5 HP) Johanna Persson

UX Design. TDDD53 & 729A88 Mattias Arvola

Designmönster, introduktion. Vad är det? Varför skall man använda mönster?

#minlandsbygd. Landsbygden lever på Instagram. Kul bild! I keep chickens too. They re brilliant.

Design av användargränssnitt. Processen snarare än produkten

Interaktionsdesign, grundkurs (7,5 HP) Del 2

Lektion 3. Anteckningar

IT och funk0onshinder

Solowheel. Namn: Jesper Edqvist. Klass: TE14A. Datum:

Designmönster för sociala användningssituationer

Interaktionsdesign (7,5 HP)

Mönster. Ulf Cederling Växjö University Slide 1

Swedbank Mobile Loadtesting. LoadRunner Mobile App protocol

Engelska åk 5 höstterminen 2013

Politikerdag 2013 Från GIS till Geografisk förståelse. Lars Backhans

Kontextuell utforskning, 8 hp, H15 (IDK213 KONT)

PbD rent konkret. Från en insnöad forskares perspektiv. Tobias Pulls. 7 September Karlstads universitet

This is England. 1. Describe your first impression of Shaun! What kind of person is he? Why is he lonely and bullied?

User Experience Design. TDDD53 & 729A88 Johan Blomkvist

BOENDEFORMENS BETYDELSE FÖR ASYLSÖKANDES INTEGRATION Lina Sandström

Att stödja starka elever genom kreativ matte.

Health café. Self help groups. Learning café. Focus on support to people with chronic diseases and their families

Introduktion till människa datorinteraktion och interaktionsdesign

Enterprise App Store. Sammi Khayer. Igor Stevstedt. Konsultchef mobila lösningar. Teknisk Lead mobila lösningar

Transkript:

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

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

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

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

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

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

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

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

Vi som gör kursen Mattias Arvola, examinator Anna Holm, kursassistent! Håll koll på: http://www.ida.liu.se/~729g44 9

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

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

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

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

15

16

17

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

Skissbok av Matilda Zetterblom 19

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

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

Kursen bygger vidare på Programmering Teknisk psykologi 22

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

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

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

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

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

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

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

30 Grudin & Poltrock (i tryck)

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

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

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

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

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

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

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

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

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

Nutid: Design bortom gränssnitt 41

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

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

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

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 45

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

Web Mobile Phone Store user experience 47

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

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

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

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

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

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

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

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

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