Föreläsning 1 1ME403 Design av grafiska gränssni7, 7,5hp. Gränssni)ets sy-e. Rune Körnefors. Medieteknik Rune Körnefors
|
|
- Julia Bergman
- för 6 år sedan
- Visningar:
Transkript
1 Föreläsning 1 1ME403 Design av grafiska gränssni7, 7,5hp Gränssni)ets sy-e Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se
2 Områden Utvecklingsprocess Roller Användargränssni) Översikt av prototyper och användartest Målgruppsanalys (User Research) Olika metoder Intervjuer Användarmodell persona "Pa)erns" Behavioral Pa)erns Design Pa)erns 2 Bilder från freedigitalphotos.net
3 Li7eratur Tidwell, J. (2011). Designing Interfaces, 2nd edikon, O Reilly kap. 1. What Users Do Målgruppsanalys Design pa)erns (mönster, typexempel, goda föredömen, ) Behavioral pa)erns ( beteendemönster ) U.S. Department of Health & Human Services (2006). The Research- Based Web Design & Usability Guidelines, Enlarged/Expanded edikon. Washington: U.S. Government Princng Office. [ User Research Methods h)p:// to- and- tools/methods/user- research/index.html Intervjuer» h)p:// to- and- tools/methods/contextual- interview.html» h)p:// to- and- tools/methods/focus- groups.html» h)p:// to- and- tools/methods/individual- interviews.html Personas» h)p:// to- and- tools/methods/personas.html Användartest (usability test)» h)p:// to- and- tools/methods/usability- tescng.html 3
4 Utvecklingsprocess Idé Design Test Produkcon Underhåll Lansering, publicering Garre7s modell Garre), J. J. (2011) The Elements of User Experience, 2nd edikon, New Riders 4
5 Human- oriented design Förstå användares önskemål, behov, mocvering och omgivning. Förstå möjligheter, begränsningar och krav ucfrån verksamhet, område och teknik. Ucfrån de)a skapa en design av form, innehåll och beteende, så a) produkten blir användbar, önskvärd, ekonomisk och teknisk möjlig. Form Grafisk design Behavior Interakconsdesign Content Informacons- arkitektur Målinriktad design (Goal- Directed Design) Användarcentrerad design (User- Centered Design) - hänsyn tas Kll användares mål, behov och mokv 5
6 Personer som bidrar med och/eller lägger in innehåll Roller, olika intressenter "stakeholders" Beställare Informaconsägare System (program, webb applikacon, ) Målgrupp Olika grupper av användare Utvecklare Producenter Infrastruktur Underhåll - - Primära, sekundära användare Direkta, indirekta användare 6
7 Olika typer av program: - Desktop applicacon - Mobile applicacon - Help applicacon - Web Applicacon - Olika användning: - Upptar användarens huvudsakliga uppmärksamhet - Bakgrundsprogram - Tillfällig användning - Användare Användare har olika kunskap om programmet, webbplatsen, gränssni)et Beginners! Intermediates! Experts! Utveckla primärt för den största gruppen (intermediate users) Cooper, A., Reimann, R., Cronin, D. (2007) About Face 3: The EssenKals of InteracKon Design, Wiley Publishing, Inc. 7
8 Användarnas mål Upplevelsemål Hur man vill känna T.ex. ha kul, säker, effekcv, Slutmål Mocv cll a) usöra uppgi-er (cll a) använda programmet) T.ex. lära sig något, beställa en produkt, kontakta någon, Mål i livet Varför man vill uppnå slutmålen T.ex. karriär, högre lön, mer cd cll annat, 8
9 Andra mål Kunders mål Varför man skaffar en produkt, väljer webbplats, etc. T.ex. IT- chef köper/väljer produkter Verksamhetsmål (business, organizaconal goals) Vad man vill uppnå T.ex. ökad marknad, bä)re kundkontakt, effekcvare administracon, Tekniska mål (behov/krav) Krav på teknik för a) stödja användarmål och verksamhetsmål T.ex. fungera i olika webbläsare, responsiv, cllgänglighet, Se Kll a7 främst möta användarnas mål 9
10 Användargränssni7 User interface = Användargränssni) Människa- dator- interakcon Human Computer Interaccon (HCI) Computer Human Interaccon (CHI) Gränssni) mellan människan (användaren) och Användare Dator Program InformaKon Webbplats Människor OrganisaKon 10
11 Olika test Concept tescng Testa idéer, stämmer projektets mål med målgruppens behov? Prototyping Olika delar av systemet utvecklas och testas, o-a genom användartest Peer review / Expert review Kollegor (eller experter inom webbdesign eller interakconsdesign) ger synpunkter Usability test Test av användbarhet, kan användarna usöra sina uppgi-er? Field trial Test i användarnas naturliga miljö och med verkliga uppgi-er Acceptance test Slu)est för a) visa a) kravspecifikaconen är uppfylld. Godkänns av uppdragsgivaren. 11
12 Prototyper Prototyp Utkast eller enkel variant av systemet (programmet eller webbplatsen) Sy-e Testa olika alternacv Skapa en gemensam syn på systemet i utvecklingsteamet Usöra test med användare, t.ex. test av struktur/navigering, layout, vokabulär, Olika former av prototyper Pappersprototyp Skärmbilder i datorn Struktur, layout i t.ex. UXPin Struktur, layout i HTML och CSS (eller den teknik som systemet ska utvecklas i) 12
13 Olika sorters prototyper Requirements animacon Möjliga krav demonstreras i en prototyp Rapid prototyping Enkel implementering av en specifik del av systemet. Sy-et är a) testa prototypen mot användare och utvärdera testet. Prototypen slängs sedan bort. Incremental prototyping Systemet konstrueras inkrementellt, en del i taget. Passar för stora system som kan brytas ner i flera mer eller mindre självständiga delar. Evoluconary prototyping Prototypen utvärderas. Däre-er bygger man vidare för a) få fram en ny och bä)re prototyp, clls man cll slut har det färdiga systemet. 13
14 Tekniker för prototyper Low- fidelity prototype Billigare implementering än den slutliga versionen, t.ex. - pappersprototyp - skärmbilder i Powerpoint, Photoshop, etc. Verccal Innehåller funkconer på både hög och låg nivå för en begränsad del av systemet Horizontal Innehåller alla funkconer på hög nivå, men saknar detaljer High- fidelity prototype Hög kvalitet som demonstrerar upplevelsen, t.ex. - en video som visar hur det färdiga systemet kommer a) fungera - webbsidor med komple) funkconalitet (fast kanske sämre prestanda) 14
15 Användartest Användartest är ej test av användare, utan med användare! Användartest Test av användbarhet User teskng Usability teskng Test med användare Testa om målgruppen kan uppfylla sina mål, om behoven cllgodoses Testa anpassning cll målgruppen Rä) vokabulär, arbetssä), förståelse, etc. Testa upplevelse Upptäcka problem med ovanstående Utvärdering (test) som ej usörs av användare Är projektets mål uppfyllda? Validering mot kravspecifikaconen Teknisk kontroll Koden korrekt, funkar alla länkar, anpassning cll olika skärmstorlekar, näthascghet, etc. 15
16 KvalitaKv undersökning Olika akcviteter: Marknadsanalys Intervju med intressenter Intervju med ämnesexperter Intervju med användare och kunder Fältstudie av användare, observaconer (etnografisk metod) "Li)eraturstudie" (li)eratur i produktens domän) Utvärdering av konkurrerande eller liknande produkter 16
17 Intervju Fältstudie, observacon, contextual interview Studera hur användarna arbetar i sin naturliga miljö Ge inte testpersonerna någon uppgi-, utan observera och ställ frågor Kan observera typ av uppgi-er, problem, teknik, Fokusgrupp Intervju/diskussion med flera personer samcdigt Kan få fram atyder, önskemål, förväntningar, Individuella intervjuer Usörs med en enskild person face- to- face, via telefon, chat, Ger en djupare förståelse av den enskilde individens mål, beteende, Vem, varför, vad, hur, när? 17
18 Intervju med olika intressenter och ämnesexperter Bilder från EU- projektet Virtuella glasakademin,
19 Intervju med användare och observakon (fältstudie) 19
20 Rundvandring ( fältstudie) 20
21 Målgruppsanalys Fältstudie Intervjuer Analys av liknande produkter Resultat: En uppsä)ning beteendemönster med associerade mål Personas användarmodeller Scenarios, case studies Avvägning mellan användarnas, verksamhetens och teknikens krav Resultat: En kravlista på vilka behov produkten ska fylla 21
22 Personas Användarmodell Användarmodell för a) representera användarnas beteende tankar, a)ytyder förmågor önskemål mål och mocv Tidigare kund Åke 67 år, tre barn och sju barnbarn Bor i andra änden av stan, men tycker a) Gretas blommor har bra kvalitét och trevlig personal. Köper blommor c:a en gång i månaden. Lite fler cll helger. Har cdigare arbetat på kontor och har vana av a) arbeta med Word och Excel. Brukar också gå ut på nätet och söka e-er sådant som han vill veta mer om. Vill gärna c)a på webben och få inspiracon, innan han går cll bucken och handlar. Personas är e) hjälpmedel för a): avgöra vad produkten ska göra och hur den ska bete sig kommunicera med intressenter, utvecklare och designers skapa samförstånd och engagemang testa designval och mäta effekcvitet Cooper, A., Reimann, R., Cronin, D. (2007) About Face 3: The EssenKals of InteracKon Design, Wiley Publishing, Inc. 22
23 "Pa7erns" Beahavioral Pa)ern Beteendemönster Design Pa)ern Mönster, typexempel, goda föredömen, "best praccce", Tidwell, J. (2011) Designing Interfaces, 2nd edikon, O Reilly 23
24 Exempel från boken Behavioral Pa)erns Safe Exploracon Instant Gracficacon Sacsficing Changes in Midstream Deferred Choices Incremental Construccon Habituacon Microbreaks Spacal Memory Prospeccve Memory Streamlined Repeccon Keyboard Only Other People s Advice Personal Recommendacon Inte rädd för a) prova och se vad som händer Vill snabbt se resultat posicv feedback Chansar på det som verkar cllräckligt bra Användarens mål ändras cllfälligt Skjuta upp det som inte är nödvändigt cll e) senare cllfälle Lite i taget, i olika delar Det som funkar i andra program, borde också fungera här Har en kort stund över och vill göra något Kommer ihåg var det finns, men inte vad det heter Planerar för a) göra något vid e) senare cllfälle Vill skapa en "mall" för sådant som ska upprepas Gör all input via tangentbordet Vad har andra gjort i samma situacon? Dela med andra och kolla vad kompisarna gjorde Tidwell, J. (2011) Designing Interfaces, 2nd edikon, O Reilly 24
Föreläsning 1 1ME403 Design av grafiska gränssni7, 7,5hp. Gränssni)ets sy-e. Rune Körnefors. Medieteknik. 2014 Rune Körnefors rune.kornefors@lnu.
Föreläsning 1 1ME403 Design av grafiska gränssni7, 7,5hp Gränssni)ets sy-e Rune Körnefors Medieteknik 1 2014 Rune Körnefors rune.kornefors@lnu.se Områden Utvecklingsprocess Roller Användargränssni) Översikt
Läs merAnvändarcentrerad design Prototyper & användartest
Webbteknik Användarcentrerad design Prototyper & användartest Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Prototyp för en webbplats Utkast eller enkel variant av webbplatsen
Läs merPrototyper och användartest
Föreläsning i webbdesign Prototyper och användartest Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Prototyp för en webbplats! Utkast eller enkel variant av webbplatsen" Syfte"
Läs merFöreläsning 2 1ME403 Design av grafiska gränssni8, 7,5hp Gränssni)sdesign I. Rune Körnefors. Medieteknik Rune Körnefors
Föreläsning 2 1ME403 Design av grafiska gränssni8, 7,5hp Gränssni)sdesign I Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Områden Kapitel i boken ÖvningsuppgiC A Arkitektur, struktur
Läs merHTML & Projektstrategi
1ME321 Webbteknik 1 Lek0on 3 HTML & Projektstrategi Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 38 HTML UppgiG U1 U1=L1+L2+L3 UppgiG U3 Läsanvisningar
Läs merKommunicera design och utvärdering
Föreläsning 5 1ME403 Design av grafiska gränssni8, 7,5hp Kommunicera design och utvärdering Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Områden Kapitel i boken och andra källor
Läs merFöreläsning 4 1ME403 Design av grafiska gränssni7, 7,5hp. Gränssni)sdesign III. Rune Körnefors. Medieteknik Rune Körnefors
Föreläsning 4 1ME403 Design av grafiska gränssni7, 7,5hp Gränssni)sdesign III Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Områden Kapitel i boken ÖvningsuppgiC C Egenskaper för
Läs merHTML & Projektstrategi
1ME321 Webbteknik 1 Lek0on 3 HTML & Projektstrategi Rune Körnefors Medieteknik 1 2017 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen UppgiE U1 = L1+L2+L3 UppgiE U3 Läsanvisningar Exempel Påbörja
Läs merFöreläsning 3 1ME403 Design av grafiska gränssni7, 7,5hp. Gränssni)sdesign II. Rune Körnefors. Medieteknik. 2015 Rune Körnefors rune.kornefors@lnu.
Föreläsning 3 1ME403 Design av grafiska gränssni7, 7,5hp Gränssni)sdesign II Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Områden Kapitel i boken ÖvningsuppgiC B Affordance Formulärobjekt
Läs merIntroduktion Översikt av kursen och området webbteknik
1ME321 Webbteknik 1 Kursintroduktion och lektion 1 Introduktion Översikt av kursen och området webbteknik Rune Körnefors Medieteknik http://medieteknik.lnu.se/1me321 1 2019 Rune Körnefors rune.kornefors@lnu.se
Läs merFöreläsning i webbdesign. Interak*onsdesign. Rune Körnefors. Medieteknik. 2012 Rune Körnefors rune.kornefors@lnu.se
Föreläsning i webbdesign Interak*onsdesign Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Från föreläsning F1 Användarcentrerad design "Take the user into account every step of
Läs merAnvändarcentrerad design Structure plane (tredje nivån)
Webbteknik Användarcentrerad design Structure plane (tredje nivån) Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se " our concerns shi? from more abstract issues of strategy and scope
Läs merInteraktionsdesign och användbarhet Personas. Paper prototyping. » Metod för representation av användaren. » Metod för konceptutveckling
martin östlund 2008 Interaktionsdesign och användbarhet Personas» Metod för representation av användaren Paper prototyping» Metod för konceptutveckling Att designa för användbarhet» Forsknings- och tillämpningsområden»
Läs merKravspecifika.on, pappersprototyp & CSS
1ME321 Webbteknik 1 Lek0on 4 Kravspecifika.on, pappersprototyp & CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 39 UppgiI U2 = L4+L5+L6 UppgiI U3 Allmänna
Läs merAnvändarcentrerad design Strategy plane (första nivån)
Webbteknik Användarcentrerad design Strategy plane (första nivån) Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se "- What do we want to get out of this product? Strategy plane -
Läs merAnvändarcentrerad design Interak3on och informa3on
Föreläsning i webbdesign Användarcentrerad design Interak3on och informa3on Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Structure Plane our concerns shi9 from more abstract issues
Läs merSkeleton plane & Responsiv webbdesign med CSS
1ME321 Webbteknik 1 Lek0on 6 Skeleton plane & Responsiv webbdesign med CSS Rune Körnefors Medieteknik 1 2016 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen U2 deadline Exemplet Gretas Blommor
Läs merFormulär, textsträngar och en del annat
1ME322 Webbteknik 2 Lektion 6 Formulär, textsträngar och en del annat Rune Körnefors Medieteknik http://medieteknik.lnu.se/1me322 1 2018 Rune Körnefors rune.kornefors@lnu.se Agenda JavaScript Interaktion
Läs merWiTEC. vägen mot jämställdhet genom ett mentorskap
WiTEC - vägen mot jämställdhet genom ett mentorskap Namn: Anna Sonesson, Johanna Levall, Tim Gabrielsson Kurs: Designstudio - Webb Program: Digital Design och Innovation INNEHÅLLSFÖRTECKNING 1. 2. Inledning......5
Läs merLaboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter
Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter 1M321 Webbteknik 1, 7,5hp Medieteknik 2018 Rune Körnefors rune.kornefors@lnu.se 1. Skapa ett nytt HTML-dokument I denna laboration
Läs merOm användare och designprocessen
Om användare och designprocessen Målorienterad design. Olika typer av användare. Mentala modeller, metaforer med mera. Att designa The interaction framework. Förra veckan. Gör så här Men inte så Förra
Läs merBerättelser Scenarios Presentationer Skisser Formella modeller Mjukvaruprototyper Kartong modeller etc.
Karin Fahlquist Berättelser Scenarios Presentationer Skisser Formella modeller Mjukvaruprototyper Kartong modeller etc. Viktigt att se från andra personers perspektiv Abatrakta idéer kommer till liv Utforska
Läs merHi fi prototyping. Johanna Persson MAM nov 2014
Hi fi prototyping Johanna Persson MAM15 25 nov 2014 Dagens upplägg Hi fi prototyping Olika verktyg för hi fi prototyping Introduktion till ett urval av dessa Power point Balsamiq Mockups Just in Mind Praktisk
Läs merLabora&on 3 HTML och struktur övningar/uppgi:er
Labora&on 3 HTML och struktur övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Skapa em nym HTML-dokument I denna labora&on ska du skapa tre sidor, som
Läs merMappar och filer för webbsidor
Mappar och filer för webbsidor I de4a dokument illustreras det hur du kan arbeta med mappar och filer, då du skapar webbsidor och ska publicera dem för uppgi=erna. Det visas också hur du skickar in redovisningar
Läs merKursrapport för Formgivning av webbsidor 7,5 hp, HT2014, Campus (31KFW1)
Kursrapport för Formgivning av webbsidor 7,5 hp, HT2014, Campus (31KFW1) Kursansvariga: Linda Rydh & Ty Nilsson Nedanstående uppgifter hämtades från Ladok 2015 06 01: Antal registrerade studenter på kursen:
Läs merStruktur & Layout med CSS
1ME321 Webbteknik 1 Lek0on 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 40 Läsanvisningar Exemplet Gretas Blommor GarreKs
Läs merDesign för användbarhet
Design för användbarhet» Användbarhetsdesign, användbarhetsn och utvecklingsprocessen. Bengt Göransson användbarhets Bengt.Goransson@guide.se även avdelningen för Människa-datorinteraktion, Uppsala universitet
Läs merPrototypningsverktyg. A Human-Centered Design Process (ISO 9241-210, 2010) Mattias Arvola. @mattiasarvola Institutionen för datavetenskap
A Human-Centered Design Process (ISO 9241-210, 2010) Prototypningsverktyg 1. Plan the humancentred process 2. Understand the context of use Mattias Arvola Meets the requirements 5. Evaluate against requirements
Läs merVisuell design Bilder & färger
1ME321 Webbteknik 1 Lek0on 8 Visuell design Bilder & färger Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 43 Läsanvisningar UpphovsräPslagen Kort sammanfapning
Läs merOptimering av webbsidor
1ME323 Webbteknik 3 Lektion 7 Optimering av webbsidor Rune Körnefors Medieteknik 1 2019 Rune Körnefors rune.kornefors@lnu.se Agenda Optimering SEO (Search Engine Optimization) Sökmotor: index, sökrobot
Läs merSammanfattning av hantering av redovisning av uppgift U1
Sammanfattning av hantering av redovisning av uppgift U1 Hur du redovisar Hur svar ges Hur eventuell komplettering sker Hur restuppgifter hanteras Hur registrering av resultat görs 1M321 Webbteknik 1,
Läs merHi-Fi Prototyping + laborationsgenomgång & verktyg
Hi-Fi Prototyping + laborationsgenomgång & verktyg Karin Fahlquist 2015 Frågor att besvara Vad innebär prototyping? Vad är speciellt med hi-fi prototyping? Hur kan man använda dem? Hur väljer man nivå
Läs merTillämpad programmering CASE 1: HTML. Ditt namn
Tillämpad programmering CASE 1: HTML Ditt namn 18 [HTML] Din handledare vill se din skicklighet i att använda HTML-koden. Du ska utveckla en webbplats om ditt intresse, inriktning eller gymnasiearbete.
Läs merVad vi pratade om förra gången. Fast med andra ord
Designprocessen 2 Vad vi pratade om förra gången Fast med andra ord Användarcentrerad design Tidigt fokus på användarna och deras uppgifter Empiriska mätningar Iterativ design Hur samla in data och utvärdera
Läs merTentamen på kursen Webbdesign, 7,5 hp
Högskolan i Borås Sektionen för informationsteknologi Akademin för bibliotek, information, pedagogik och IT Malin Nilsson Tentamen Tentamen på kursen Webbdesign, 7,5 hp Tentamenstid: 2015-11-03, kl. 09.00-13.00
Läs merKlient/server. Översikt. Lektion 1: Webbtekniker från Microsoft. Webbteknik från Microsoft. Klient/server. Designmönster. Utrullning.
Klient/server Översikt Webbteknik från Microsoft. Klient/server. Designmönster. Utrullning. Lektion 1: Webbtekniker från Microsoft Microsoft webbtekniker. ASP.NET. Klientsidan. Internet Information Server.
Läs merGrupparbete ACSD Projektplanering för ett Patientjournalsystem
Grupparbete ACSD Projektplanering för ett Patientjournalsystem Uppsala Universitet Institutionen för Informationsteknologi Användarcentrerad Systemdesign Grupp 8, ht03 Christian Rick, rick@bahnhof.se Frida
Läs merInteraktionsdesign som profession. Föreläsning Del 2
Interaktionsdesign som profession Föreläsning Del 2 Vikten av att göra research Varför behöver vi göra research? En produkt blir aldrig bättre än den data som denna baseras på Men Vi har redan gjort en
Läs merIntroduktion till MDI
Introduktion till MDI Anna Swartling ast@kth.se Varifrån kommer MDI? Relativt ny vetenskap, håller fortfarande på och utvecklas Tvärvetenskapligt Kognitiv psykologi Datalogi Ergonomi Pedagogik Socialpsykologi
Läs merStrukturering med XML och DTD
Föreläsning i webbdesign Strukturering med XML och DTD Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se PresentaCon SCl Layout OrganisaCon/struktur InformaConsobjekt Länkar Innehåll/data
Läs merDesign för användbarhet Användarcentrerad utvecklingsprocess
Design för användbarhet Användarcentrerad utvecklingsprocess Bengt Göransson :: Användbarhetsdesigner Guide Redina AB :: Bengt.Goransson@guide.se Mina tillfällen 23 25 2 Onsdag 23/11 Användarcentrerad
Läs merFöreläsning 3: Mer om utvärdering, Inspektionsmetoder kan man utvärdera utan användare?
Föreläsning 3: Mer om utvärdering, Inspektionsmetoder kan man utvärdera utan användare? FSR: (1), 2, 5, (6), 7 Att läsa: Kapitel 14-15 i Rogers et al.: Interaction design 160405 Mer om utvärdering 2 Översikt
Läs merOn-line produktion TDDC61
On-line produktion TDDC61 Förra veckan Kursupplägg HTML FTP Validering Laboration 1. Deadlines Laborationer: 12/10, kl 08 Lämna in efterhand ni blir färdiga Vi rättar inom 4 arbetsdagar Portfolio, tillfälle
Läs merPortfolio Mathias Andelin www.webbformgivare.se mathias.andelin@gmail.com
Portfolio Mathias Andelin www.webbformgivare.se mathias.andelin@gmail.com 1 Innehåll Redesign.......................................................................3 Värvet........................................................................
Läs merFöreläsning 4: Designprocessen
Föreläsning 4: Designprocessen FSR: 2, 3, (6), 7 Att läsa: Kapitel 9 och 12 i Rogers et al.: Interaction design 4/e 150911 Designprocessen 2 Designprocessenöversikt Introduktion Att involvera användare
Läs merUtvärdering. Övergripande (1) Med/utan användare. Övergripande (2) Fredag 1 oktober F1. Ann Lantz - Anna Swartling -
Utvärdering Fredag 1 oktober 13-15 F1 Ann Lantz - alz@nada.kth.se Anna Swartling - ast@kth.se Övergripande (1) Av den verkliga världen: Hur agerar man, vad händer? Hur används teknik? Beteendevetenskapliga
Läs merProjektrapport för designstudio - webb 2/6-17
Projektrapport för designstudio - webb 2/6-17 Grupp 4: Max Lindroos (940424-8016) maxlin16@student.hh.se William Hedin (950609-9515) wilhed16@student.hh.se Minna Danielson (950718-5461) mindan16@student.hh.se
Läs merAnvändbarhet. Bryt rätt regler. Nils Ehrenberg nils.ehrenberg@mah.se
Användbarhet Bryt rätt regler Nils Ehrenberg nils.ehrenberg@mah.se Agenda Intro till Användbarhet Användbarhet på nätet Exempel Fyra dörrar Inlämningsuppgift Viktigt En skala Subjektivt Användbarhet /
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Armin Nezirevic Peter Börjesson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Vad utmärker ett bra användargränssnitt? Kort kursinfo
Läs merStruktur & Layout med CSS
1ME321 Webbteknik 1 Lektion 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2018 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Denna vecka Exemplet Gretas Blommor Garretts modell Structure
Läs merFöreläsning 2: Datainsamling - Observation, enkät, intervju. Att läsa: Kapitel 2 och 3 i Stone et al.: User Interface design and evaluation
Föreläsning 2: Datainsamling - Observation, enkät, intervju Att läsa: Kapitel 2 och 3 i Stone et al.: User Interface design and evaluation Stjärnmodellen Analys Utvärdering Implementation Prototyper Krav
Läs merUtvärdering. Användbarhet. + beställarperspektivet! Innehåll. Varför?
Användbarhet Användbarhetsutvärdering Stefan Berglund Den grad i vilken användare i ett givet sammanhang kan bruka en produkt för att uppnå specifika mål på ett ändamålsenligt, effektivt och för användaren
Läs merFocus on English Bedömningsstöd Maria Jones 1
1 1. Till läraren s. 3 Kor>a?at tankarna bakom materialet. 2. Vad betyder kunskapskraven för Läsa? s.4 Förklaringar Cll eleverna för a? hjälpa dem bä?re förstå vad som ejerfrågas i kunskapskraven. 2a.
Läs merLabora&on 4 CSS och validering övningar/uppgi9er
Labora&on 4 CSS och validering övningar/uppgi9er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna i denna
Läs merANVÄNDARTESTNING VID LULEÅ UB Ola Andersson Luleå universitetsbibliotek
ANVÄNDARTESTNING VID LULEÅ UB Ola Andersson Luleå universitetsbibliotek 2017-11-08 ANVÄNDARTESTNING UPPSTART Olika metoder för att testa användbarheten Expertutvärdering -En utvärdering som utförs av ett
Läs merMänniska-Datorinteraktion
Människa-Datorinteraktion Grundutbildnings-, forskarutbildnings- och forskningsämne som behandlar Gränssnitt och kommunikation människa-dator Kommunikation och samarbete människa-människa via (medierat
Läs merMetoder för datainsamling
Metoder för datainsamling Föreläsning 16/10-2002 Christina von Dorrien Kapitel 9.4, 12-13 Användarcentrerad designmetodik Analysera användare, användningssituation och uppgift Testa och utvärdera designförslag,
Läs merP r i s u p p g i f t e r
P r i s u p p g i f t e r Grafisk produktion -datum enligt hemsida eller överrenskommelse Uppdatering AdobeCS, 1dag InDesign grund, 2dgr InDesign steg2, 1dag InDesign automatisera, spara tid 1dag InDesign
Läs merUniversell användbarhet
Användbarhet definierar jag som ett samspel mellan användaren (målgruppen) och datorn (den tekniska lösningen). Människa - dator - interaktion "Med en alltmer omfattande datoranvändning har kraven höjts
Läs merKursplan Webbutveckling 2, 100p Läsår 2013-2014
Kursplan Webbutveckling 2, 100p Läsår 2013-2014 Kurswebb: www.creativerooms.se/edu, välj Webbutveckling 2 Lärare: Aino-Maria Kumpulainen, aino-maria.kumpulainen@it-gymnasiet.se Hösttermin 2013 Vecka Tema
Läs merVarför göra digitala årsredovisningar? Varför göra digitala årsredovisningar?
Varför göra digitala årsredovisningar? Offert 08-11 2017 Niam Creative Strategy & Concept PR & Social Media Humans first Design & Development Fördelar med digitala produkter: Funkar på alla skärmar Är
Läs merTest och utvärdering - introduktion. Systemering med användarfokus Malin Pongolini
Test och utvärdering - introduktion Systemering med användarfokus Malin Pongolini ACD metoden: faserna Analys Användaranalys Uppgiftsanalys Kravställande Användbarhetskrav Funktionalitetskrav Design Prototyping
Läs merInteraktionsdesign. Användbarhet ISO 9241. Usability goals. Interaktionsdesign, grundkurs (7,5 HP) Sammanfattande föreläsning
Interaktionsdesign, grundkurs (7,5 HP) Sammanfattande föreläsning Interaktionsdesign Designing interactive products to support the way people communicate and interact in their everyday and working lives.
Läs merSluta gissa börja testa workshop alla pratar ux, 28 nov 2013
Sluta gissa börja testa workshop alla pratar ux, 28 nov 2013 DAYTONA COMMUNICATION AB Riddargatan 17D, 114 57 Stockholm, Sweden Phone +46 8 579 397 50, Fax +46 8 579 397 55 www.daytona.se, info@daytona.se
Läs merFöreläsning 2: Datainsamling - Observation, enkät, intervju. Att läsa: Kapitel 2 och 3 i Stone et al.: User Interface design and evaluation
Föreläsning 2: Datainsamling - Observation, enkät, intervju Att läsa: Kapitel 2 och 3 i Stone et al.: User Interface design and evaluation Stjärnmodellen Analys Utvärdering Implementation Prototyper Krav
Läs merSå gör Vägledningen 24-timmarswebben dig till en bättre beställare. Funda Denizhan, Statskontoret Kommits 17 november, 2005
Så gör Vägledningen 24-timmarswebben dig till en bättre beställare Funda Denizhan, Statskontoret Kommits 17 november, 2005 Om IT och webb inte är en teknikfråga vad är det då? Är IT och webb en verksamhetsfråga?
Läs merWEBB PRODUKTION. Tillgänglighet och Användbarhet. 2010 Thomas Mejtoft. Thomas Mejtoft 2010-12-13 2
WEBB 2010 PRODUKTION Tillgänglighet och Användbarhet 2010-12-13 2 1 Tillgänglighet och Användbarhet Tillgänglighet (Accessibility) Användbarhet (Usability) 2010-12-13 3 Tillgänglighet och Användbarhet
Läs merWireframe när, vad, hur och varför?
Wireframe när, vad, hur och varför - 1 Wireframe när, vad, hur och varför? Arbetsflöde är ett samlande begrepp för alla steg som används för att göra en webbplats. Från första början till färdig sajt.
Läs merProjektsteg: Detaljdesign. Måldriven design. I praktiken? Vattenfallsmetoder. Designdriven utveckling. Agila metoder
Måldriven design Projektsteg: Detaljdesign 1. Projektplanering 2. Undersökning av användare och situation 3. Modellering (av undersökningsresultatet) 4. Kraammanställning 5. Ramverksdesign (övergripande
Läs merSpråk för webben introduk4on 4ll HTML
Föreläsning i webbdesign Språk för webben introduk4on 4ll HTML Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se En webbsidas beståndsdelar Text (formaterad, strukturerad) Länkar Inkluderade
Läs merAtt läsa: Sharp, Helen, Rogers, Yvonne & Preece, Jenny E. (2007) Interaction design. Wiley. Kapitel 11.
Prototyper, Riktlinjer och standarder Att läsa: Sharp, Helen, Rogers, Yvonne & Preece, Jenny E. (2007) Interaction design. Wiley. Kapitel 11. Prototyper behövs för att visa på designval för att designdokument
Läs merPrislista. Information. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet
Prislista Prislista Produkt Information Pris, SEK Kampanjsida 8.500 Nyhetsbrev 3.500 Banners 900-1200 Mobilwebapp 12.000 Logotyper 8.000-14.000 Informationswebbplats 13.500 Offertbaserade webbplatser Offertbaserade
Läs merAnvändbarhet. Datorbaserade verktyg används till att. Aspekter på användbarhet. uppfylla behov eller lösa problem! Användbarhet.
Innehåll Användbarhet Användbarhet När, hur och vem? Specificering av krav Utvärdering Stefan Berglund Användbarhet Den grad i vilken användare i ett givet sammanhang kan bruka en produkt för att uppnå
Läs merTillgänglighet som en naturlig del i våra projekt. Sid 1 Mars 2016 Tillgänglighet
Tillgänglighet som en naturlig del i våra projekt Sid 1 Mars 2016 Tillgänglighet Sid 2 Mars 2016 Tillgänglighet Responsiv webb Projektet Responsiv webb 28 nov 2015 Responsiva produkten v 1.0 Maj 2016 Responsiva
Läs merFrågetekniker. Föreläsning 3, Utvärderingstekniker MDI, Lena Palmquist 1. Än en gång: JEdit (Py Kollberg) Loggning. Tolkande dataanalys
Föreläsning 3, Utvärderingstekniker Än en gång: Frågetekniker Att läsa: Sharp, Helen, Rogers, Yvonne & Preece, Jenny E. (2007) Interaction design. Wiley. Kapitel 13-15. Mål, frågeställningar Teknik Hur
Läs merLabora&on 4 CSS och validering samt fråga D övningar/uppgi?er
Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna
Läs merWebbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0
Webbtillgänglighet Webbtillgänglighet Att göra webbinnehåll så att de är tillgängliga för alla oavsett vilka funktionsnedsättningar man har Att göra webbinnehåll tillgängligt oavsett vilken in- och utmatningsutrustning
Läs merPrototypning. Filmtajm. Prototypens roll: Evolutionär eller kasta bort. Dagens föreläsning. Detaljgrad. Detaljerad i vilket avseende?
Filmtajm Prototypning Sketch-a-move http://vimeo.com/5125096 Mattias Arvola Institutionen för datavetenskap 2 Dagens föreläsning Typer av prototyper Upplösning Pappersprototyper Datorprototyper Verktyg
Läs merFöreläsning 2: Introduktion till utvärdering varför ska vi utvärdera?
Föreläsning 2: Introduktion till utvärdering varför ska vi utvärdera? FSR: 1, 2, 5 Rogers et al. Kapitel 13 (e/3: 12-13) 160401 Intro utvärdering 2 Översikt Att kunna om utvärdering Observation, kort repetition
Läs merVägledningen 24-timmarswebben. Magnus Burell, Verva Uppdaterad: 2007-09-11
Vägledningen 24-timmarswebben Magnus Burell, Verva Uppdaterad: 2007-09-11 Vägledningen 24-timmarswebben Vad? Ca 150 riktlinjer för utveckling av webb och e-tjänster i offentlig sektor Senaste version 2006
Läs merProjektrapport - Live commentary
Projektrapport - Live commentary Linnéa Åberg - la222pp Beskrivning Vision och översiktlig beskrivning Det är en applikation för den som vill skapa intressanta diskussioner för live event eller program
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Peter Börjesson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Kort kursinfo Lab info Föreläsning - Vad utmärker ett bra användargränssnitt?
Läs merKursplan Gränssnittsdesign, 100p Läsår
Kursplan Gränssnittsdesign, 100p Läsår 2013-2014 Kurswebb: www.creativerooms.se/edu, välj Gränssnittsdesign Lärare: Aino-Maria Kumpulainen, aino-maria.kumpulainen@it-gymnasiet.se Hösttermin 2013 Vecka
Läs merFö 2: Designprocessen. Projektet. Design är... Forts. projektet
Fö 2: Designprocessen Metoder Mål: att förstå användaren, uppgiften, situationen och tekniken (PACT) Hur hänger det ihop? Men först: projektet Projektet Användarstudier och analys av befintligt system
Läs merVägledning för webbutveckling. webbriktlinjer.se
Vägledning för webbutveckling Kort om mig E-delegationen 20-25 % Augusti 2010 Teamledare för gruppen: e-tjänster Ingår i förvaltningsgruppen och det fortsatta arbetet Arbetsförmedlingen Januari 2012 Webb-
Läs merVad är design? Designmetodik. Varför en metodik? Samma (5!) huvudmoment. Härledning av form från specifikation. Användarcentrerad designmetodik
Designmetodik Vad är design? Föreläsning 11/9 2003 Preece: kap 1, 6.1-6.3 Härledning av form från specifikation Varför en metodik? Användarcentrerad designmetodik En metodik är tänkt att vara en hjälp
Läs merInteraktionsdesign och användbarhet Personas. Paper prototyping. » Metod för representation av användaren. » Metod för konceptutveckling
martin östlund 2008 Interaktionsdesign och användbarhet Personas» Metod för representation av användaren Paper prototyping» Metod för konceptutveckling Att designa för användbarhet» Forsknings- och tillämpningsområden»
Läs merIntroduktion till MDI
Introduktion till MDI Anna Stockhaus ast@kth.se Innehåll & mål för gränssnittsdelen! Interaktionsprogrammering & människa-dator interaktion (MDI) www.nada.kth.se/kurser/kth/2d1323/03_04/doa/index.html!
Läs merDesign av användargränssnitt. Processen snarare än produkten
Design av användargränssnitt Jan Gulliksen Design och konstruktion av användargränssnitt 1MD113 Processen snarare än produkten Analys -> Design -> Utvärdering -> Återkoppling -> Iterativ Inkrementellt
Läs merFöreläsning 2: Introduktion till utvärdering varför ska vi utvärdera?
Föreläsning 2: Introduktion till utvärdering varför ska vi utvärdera? FSR: 1, 2, 5 Rogers et al. Kapitel 13 (e/3: 12-13) Analys Utvärdering Implementation Prototyper Krav Design 150327 Intro utvärdering
Läs merIntroduk+on +ll JavaScript if- sats, funk+oner, bilder
Föreläsning i webbdesign Introduk+on +ll JavaScript if- sats, funk+oner, bilder Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se if- sats I en if- sats kan man kontrollera ee villkor
Läs merP r i s u p p g i f t e r
P r i s u p p g i f t e r Grafisk produktion -datum enligt hemsida eller överrenskommelse Uppdatering AdobeCS4/ CS5, 1dag InDesign grund, 2dgr InDesign steg2, 2dgr InDesign automatisera, spara tid 1dag
Läs merLabora&on 6 CSS och responsiv webbdesign övningar/uppgi:er
Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on
Läs merDe fem gyllene reglerna. Analys. Engagera dina användare. Känn dina användare. Lär av andra. Testa och korrigera designen
De fem gyllene reglerna Analys av användare och deras uppgifter Känn dina användare Engagera dina användare Testa och korrigera designen Lär av andra Samordna hela gränssnittet Känn dina användare Engagera
Läs merLabora&on 2 HTML och validering övningar/uppgi:er
Labora&on 2 HTML och validering övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det
Läs merLite info först. Kom ihåg! Deadline på lab1 på onsdag. Övning 2 på onsdag: gör en kalender för olika slags användare
Lite info först Kom ihåg! Deadline på lab1 på onsdag. Övning 2 på onsdag: gör en kalender för olika slags användare Förra veckan... GUI = Graphical User Interface (grafiskt användargränssnitt) Gör så här
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU 1 Idag Fortsatt om användare Mentala modeller vs implementationsmodeller Personas
Läs merLOGISTIKSYSTEM FÖR SNABBA HJULET AB UTVECKLINGSPROCESS BASERAD PÅ DR. DEBORAH J. MAYHEW S THE USABILITY ENGINEERING LIFECYCLE
LOGISTIKSYSTEM FÖR SNABBA HJULET AB UTVECKLINGSPROCESS BASERAD PÅ DR. DEBORAH J. MAYHEW S THE USABILITY ENGINEERING LIFECYCLE Uppsala Universitet 2005 Andreas Kjellgren (ankj3389@student.uu.se) Fredrik
Läs merWebbteknik för ingenjörer
Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera
Läs mer