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. Mattias Arvola, examinator Mathias Nordvall, lärare Till vilken sorts värld vill du bidra? Vems röst är viktig att lyssna på? Vilka normer förstärks och bryts? Håll koll på: http://www.ida.liu.se/~729g44 Vilka maktaxlar spelar in i designsituationen? 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 INL3 Prototyp: Visuell utformning och tänka-högt-protokoll 14 http://www.ida.liu.se/~729g44/assignment2/ index.sv.shtml http://www.ida.liu.se/~729g44/assignment3/ index.sv.shtml 15 16 Deadlines INL1: Fredag 6/10 (17:15) via matar63.liu snabel-a analys.urkund.se INL2: Skisstavlan redovisas på anvisad kritiksession vecka 42/43. Deadline för inlämning av idélogg med tillhörande reflektion är fredag 23/10 kl. 17:15 (lämnas i låda utanför Mattias kontor). INL3: Rapport skickas in senast 10/11 (kl. 17:15) via matar63.liu snabel-a analys.urkund.se. Prototyp demonstreras vid anvisad session vecka 45. Kompletteringsdeadline är fredag 2017-01-19, kl. 17.15. Missas kompletteringsdeadline så görs istället nästa kursomgångs uppgifter. Skisstavla i INL2 Skisstavla i INL2
22 Idélogg av Matilda Zetterblom 24 Kursinnehåll Människa datorinteraktion Skissning av gränssnitt Användarupplevelse (eng. user experience, UX) och användbarhet Granskning av gränssnitt Tjänstedesign Kontextuella undersökningar Uppgiftsanalys Typer av användargränssnitt Gränssnittsmönster Informationsgrafik och visuell utformning av användargränssnitt Prototypning av gränssnitt Tänka-högt-protokoll Verktyg för enkla gränssnittsprototyper.
25 26 Kursen bygger vidare på Programmering Teknisk psykologi Fortsättningskurser Interaktionsdesign (kandidat) Interaktionsprogrammering (kandidat) Avancerad interaktionsdesign (master) Interaktionsdesign studio (master) Tjänstedesign studio (master) Användbarhetstestning (master) Designforskningsmetod (master) 27 28 Läs kursinformationen noga och fråga om ni undrar! Människa-datorinteraktion Ett forskningsfält med rötter i teknisk psykologi och datavetenskap och med en nära relation till kognitionsvetenskap 29 30 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 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
Use and Context 31 U1 Social Organization and Work U3 Human-Machine Fit and Adaptation U2 Application Areas Human Computer H1 Human Information Processing H2 Language, Communication and Interaction D3 Evaluation Techniques H3 Ergonomics C1 Input and Output Devices C2 Dialogue Techniques C4 Computer Graphics C3 Dialogue Genre C5 Dialogue Architecture D4 Example Systems and Case Studies Dåtid Framväxten av gränssnittsdesign D2 Implementation Techniques and Tools D1 Design Approaches Development Process Grudin & Poltrock (2012) Grudin (1990) 33 34 CHI 90 Ptmeedim Figure 1. THE TRAJECTORY OF INTERFACE AND DEVELOPMENT The Shifting Focus Of Computer The five foci of interface RESEARCH Development Twenty years ago, hardware remained the undisputed monarchof computer development. The major computer companies produced hardware and lived or. died by its success. Simple processingbenchmarkswere the critical measureof new products. Microcoders were soft [ 161. This changed in the late 1970s and early 1980s with the successof the spreadsheet,word processing,and licensed operating systems. True, this software primarily drove hardware sales,where the profits remained highest -- the major beneficiarieswere IBM, Wang, and Digital, whose proprietary hardware was the hardware of choice for key softwareproductsin theseareas. 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! the saleof proprietary hardware,but the myriad third-party Macintosh developers have used the interface to drive software sales. Software alone is profitable enough to justify a shift of attention to the user interface as a means of accelerating sales. This process is still at an early stage. The userinterface draws more attention in mature software product areas. The appearanceof new markets, where unadorned functionality oft.enpredominates, will slow the overall shift of focus toward the user interface. But the movementin that direction is inexorable. The Shifting Focus Of Interface Development Of course, systemshave always had user interfaces: how have they evolved, prior to and since attracting attention? Again we find a seriesof changesin the focus of research and design, influenced by the changing backdrop of computer development. Figure 1 summarizesthe shift in the principle focus of interface work. Initially, the user Hardware innovation has a considerable future. Many interface was located at the hardware itself -- most users computer companies still compete primarily at the level were engineersworking directly with the hardware. The of hardware,accepting foreign,compegtionand declining focus then moved to the programm:ingtask -- higher-level 36 margins. But many companies that established programming languagedand environments progressively themselves in the 1980s sell primarily software: freed usersfrom the needto be familiar with the hardware. Microsoft, Lotus. Ashton-Tate, and others. Debates go Next, with the widespread appearance of interactive on within major companies over the wisdom of relying systems and non-programming end users, the user exclusively on profits from sales of iron. For many interface shifted to the display and keyboard, with early companies, the business is changing. A manager of attention to perceptual and motor issues. Recent years hardware engineering at a major computer company have seen increasing research focus on the users conhded, I wouldn t say this to my people, but a lot of conversational dialogues with systemsand applications, cp meriter.txt ~/personligt hardwareengineering thesedays consistsof knowing how involving deepercognitive issuesunderlying the learning to usecatalogs. The.spreadof workstationsand standard and use of systems: the user interface is extending past platforms will extend the software focus that already the eyes and fingers, into the mind. Finally, with the exists in the PC world to more powerful machines. advent of groupware and systems to support Software iskopiera moving to center stage.meriter.txt till organizations, we are beginning to see the focus of user filen interface design extend out into the social and work The last five years have seen the beginning of the next environment, reaching even further from its origin at the katalogen step: a shift of marketplaceattention to the user interface. heart of the computer. The Macintosh interface produced first by driving personligt i profits hemkatalogen 35 development. Kommandogränssnitt 262
Menygränssnitt 37 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 38 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. 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. 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 WEB AS SOFTWARE INTERFACE WEB AS HYPERTEXT SYSTEM Concrete Completion Visual Design 45 Web Mobile Phone Store Interface Design Navigation Design Information Design Interaction Information Design Architecture Functional Content Specifications Requirements time user experience User Needs Site Objectives Abstract Conception UX Design Garret 2000 47 48 Vad är en UX-vision? 1. Plan the human-centred process 2. Understand the context of use Hur vi vill att användare ska uppleva vår produkt eller tjänst och hur den upplevelsen ska skilja sig från konkurrenterna. Meets the requirements 5. Evaluate against requirements 3. Specify user and business requirements A Human-Centered Design Process (ISO 9241-210, 2010) 4. Produce design soludons
49 50 The Task-Artifact Cycle Adoption, appropriation and use Task 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 Requirements and design ideas 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 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). 52 53 Mobila gränssnitt 54 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 Briteback Uniform Integrations Interface
55 56 Inmatning i mobila gränssnitt Pekskärm med en eller flera punkters interaktion Mjukt tangentbord Fysiskt tangentbord Mikrofon Fysiska knappar Sensorer 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 57 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