Design och konstruktion av grafiska gränssnitt
|
|
- Kristin Forsberg
- för 8 år sedan
- Visningar:
Transkript
1 Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Getting input from users Några gyllene regler Projektintro Idag 1
2 GETTING INPUT FROM USERS Allmänt Design bör ta hänsyn till alignment, grouping etc för att skapa ett harmoniskt och förståeligt intryck För val av specifika kontroller kan uppställningen i Tidwells bok (s ) vara nyttig En av flera? Flera av flera? Tal i intervall? Sen finns det några principer till 2
3 Principer Se till att användarna förstår vad som efterfrågas och varför Använd språk som är anpassat till användarna Om det är en massa information förklara varför den behövs Använd tooltips för t ex knappar som används för input Om det går ställ inte frågan alls Detta är samma som Cooper säger Man kanske avbryter flow Det kanske går att gissa eller fylla i ett standardvärde för att minska arbete Principer, forts Kunskap i världen är mer korrekt än kunskap i huvudet Går det att erbjuda en lista att välja från så gör det Kan man ha en visuell presentation så använd den Måste man ha ett visst format, visa det tydligt Se upp för direktmappningar från implementationsmodellen Glöm inte användarens mentala modell Data i implementationen kanske inte passar Designa först mappa mot implementationen sen Användartesta Gäller för allt Ofta räcker det med ett ganska litet antal personer (typ 5) 3
4 Principer, forts Valet av kontroll påverkar vad användaren förväntar sig så välj rätt Radiobox flervalsalternativ Textfält kort öppet svar Ge inte möjlighet att skriva fel T ex 15 när bara 1-10 är tillåtet Få aldrig användaren att känna sig dum Välja kontroll Boken tar upp ett stort antal möjliga kontroller för olika situationer Kontroller för att välja en av två möjliga Kontroller för att välja N objekt där N är litet Kontroller för att välja N objekt i godtycklig ordning Kontroll för att skriva en rad text Läs tillräckligt för att ha god uppfattning om möjligheter sen kan man slå upp i en designsituation 4
5 Faktorer att ta hänsyn till Tillgängligt utrymme Platskraven varierar mycket mellan olika kontroller Användarnas allmänna datorkunskap Textfält förståeligt för alla Dubbelslider eller lista med flervalsmöjlighet mycket svårare Användarnas domänkunskap Vet man att bara vissa intervall är tillåtna så måste man inte designa lika noga Det kanske är mindre viktigt att bara ha givna alternativ att välja mellan Men det blir lätt fel även om man är kunnig forts Förväntningar från andra program The applications that are easy to use are designed to be familiar Bold/Italic/Underline vanligt som butcons, radioknappar blir konstigt Dvs man måste kunna sin verktygslåda Tillgänglig teknik Alla plattformar har inte samma kontroller Web begränsad iphone specialdesignade 5
6 Några mönster Allmänt Mönster är förslag på fungerande lösningar Måste anpassas efter situationen Nytta Kan man många är chansen större att man hittar något lämpligt för en given situation Ger en vokabulär för att diskutera design Studera/reflektera kring program man använder Är beprövade Forgiving Format 6
7 Forgiving Format Vad Tillåt användaren skriva lite vad som helst och låt sedan programmet tolka det intelligent När Programmet efterfrågar data som kan skrivas på många olika sätt, blandningar av format, tecken, stora/små bokstäver etc Varför Användaren vill bara få något gjort utan att fundera på format det blir helt enkelt mycket enklare Hur Se Vad. Sen måste man se till att det går att förutse tillräckligt bra vad användaren kan tänkas skriva så att det går att tolka Exempel 7
8 Structured Format Structured Format Vad Använd flera textfält istället för ett för att visa strukturen på data När Inmatning av med ett givet och känt format. T ex kreditkortsnummer. Funkar inte om det kan finnas variation. Varför Strukturen visar för användaren vad som ska matas in Hur Använd ett antal textfält som motsvarar strukturen. Dessa bör inte vara längre än vad som behövs. När användaren matat in allt i ett fält flyttas man automatiskt till nästa. 8
9 Exempel forts bra? 9
10 Fill-in-the-Blanks Fill-in-the-Blanks Vad Ordna en eller flera inputkontroller i en fras, där inmatning innebär att man fyller i hål i frasen. När Man ska mata in något och detta blir tydligare och snyggare än vanliga label/inputarrangemeng. Varför Metoden är självförklarande. Användare klarar intuitivt av att fylla i hål i fraser. Tydligare än en massa förklaringar. Hur Jobba ordentligt med frasen. Mönstret funkar bäst med textfält, dropdowns o dyl som passar bra in i en text visuellt. 10
11 Exempel Input Hints 11
12 Input Hints Vad Placera en text eller ett exempel bredvid ett inmatningsfält för att visa hur det ska användas När Det är inte helt självklart hur vad man ska skriva i ett fält och man vill inte skriva en lång förklarande label Varför Användarna slipper gissa. Vet man vad det ska stå behöver man inte kolla på input-hinten Hur Placera en kort text under eller bredvid inmatningsfältet. Det kan vara bra att använda en mindre font än för fältets label Exempel 12
13 forts bra? Illustrated Choices 13
14 Illustrated Choices Vad Använd bilder istället för ord för att visa tillgängliga val När Användaren skall välja mellan ett antal objekt som skiljer sig visuellt Varför En bild säger mer än tusen ord + det blir snyggare Hur Visa bilder som motsvarar vad användaren får. Tekniken kan användas i bl a menyer, listor, knappar, tabeller osv. Borta ur kapitel 8 Exempel 14
15 Good Defaults Good Defaults Vad När det är möjligt fyll i sannolika värden i förväg När I alla fall när man begär in information från användaren. Speciellt då det finns sannolika svar, eller då det är troligt att systemet vet vad som borde vara mest lämpligt. Varför Minskar användarens arbete. Kan också göra det mycket enklare om användaren är osäker och bara behöver bekräfta systemets val. Hur Ange default-värden för textfält, comboboxar etc. Kan göras dynamiskt eller statiskt. Var noggrann med att inte fylla i värden som sannolikt måste ändras. 15
16 Exempel forts 16
17 Same-Page Error Messages Same-Page Error Messages Vad Placera felmeddelanden direkt på inmatningssidan. Placera ett meddelande överst och helst också nära de faktiska felen När Designen tillåter att man faktiskt kan skriva fel eller utelämna information. Gör det så enkelt som möjligt att rätta till när det inträffar. Varför Den traditionella metoden är att slänga upp en dialogruta med ett felmeddelande (ofta modal). När man stängt den är informationen borta Bättre med information i kontext Hur Se Vad. Om felmeddelandena finns vid felet behöver man inte leta och fundera. 17
18 Exempel NÅGRA HCI-BEGREPP 18
19 Shneidermans gyllene regler Syfte: samla ihop en användbar mängd principer som kan tillämpas i de flesta sammanhang. Lite allmänbildning att känna till Bra att ha i bakhuvudet Låter självklara, men man kan kolla om man uppfyller dem (1) Strive for consistency. Försök alltid vara konsekvent, använd samma terminologi överallt, använd konsekventa färger, former, fonter, designmönster etc (2) Cater to universal usability Försök ta hänsyn till användarnas olikheter inklusive kompetens och eventuella funktionshinder forts 8 gyllene regler (3) Offer informative feedback För varje sak användaren gör ska systemet ge feedback. För vanliga och mindre saker kan den vara mindre markant, för ovanliga och större mer tydlig (4) Design dialogs to yield closure Följder av handlingar ska designas med en början, mitt och slut. Tydlig feedback vid avslut gör att användarna kan spänna av och veta att de är klara (och börja förbereda sig för nästa handling). T ex så för e-handelssajter användaren från val av produkter till checkout med en tydlig bekräftelsedialog som avslutar transaktionen. 19
20 forts 8 gyllene regler (5) Prevent errors Så långt det är möjligt designa systemet så att användaren inte kan göra fel. T ex disabla olämpliga menyval, tillåt inte text i sifferfält, välj från dropdowns istället för att skriva etc. Om man gör fel ska det vara enkelt att korrigera felet och man ska inte behöva ge all information igen. Felaktiga handlingar bör lämna systemets tillstånd oförändrat. (6) Permit easy reversal of actions Så långt det är möjligt ska det alltid gå att reversera handlingar. Detta lugnar användarna då de vet att de går att ordna misstag och uppmuntrar därför till utforskande. Forts 8 gyllene regler (7) Support internal locus of control Erfarna användare vill känna att de har kontroll över GUI:t och att det svarar på deras handlingar. De vill inte ha överraskningar i form av oväntade beteenden och irriteras över långa inmatningar, svårighet att hitta information och att inte kunna uppnå önskat resultat. (8) Reduce short-term memory load Människans korttidsminne kan hålla typ 7+-2 saker. Detta är inte mycket. Därför måste man t ex se till att man inte måste hålla saker i minnet från en sida till en annan. 20
21 Jakob Nielsens heuristics Jakob Nielsen välkänd usability-guru, se Detta är en annan uppsättning principer det är allmänbildning att ha hört talas om. Tänkta bl a för att kunna användas i utvärdering Fungerar också som designprinciper Visibility of system status Systemet ska alltid hålla användaren informerad om vad som sker Match between system and real world Systemet ska alltid följa användarens modell och termer istället systemmodell och terminologi. Följ real-world conventions. User control and freedom Användare väljer ofta fel väg och behöver nödutgång för att komma tillbaka enkelt. Stöd undo och redo. Nielsens heuristics, forts Consistency and standards Man ska inte behöva fundera på om saker betyder vad de brukar. Följ platformskonventioner. Error prevention Ännu bättre än felhantering är att se till att inga problem uppstår. Leta efter problemsituationer och begär konfirmation för farliga handlingar Recognition rather than recall Minimera användarens minnesbelastning genom att visa det som kan utföras. Man ska inte behöva komma ihåg saker från en dialog till en annan. Instruktioner ska vara synliga eller lättåtkomliga när det behövs. 21
22 Nielsens heuristics, forts Flexibility and efficiency of use Shortcuts o accelarators kan ofta snabba upp interaktionen för erfarna användare. Erbjud möjlighet att anpassa vanliga actions. Aesthetic and minimalist design Dialoger ska inte innehålla information som är irrelevant eller sällan behövs. Varje bit onödig information slåss om uppmärksamhet med den relevanta informationen och minskar dess synlighet Nielsens heuristics, forts Help users recognize, diagnose and recover from errors Felmeddelanden ska uttryckas på vanligt språk (inga felkoder), tala om precis vad problemet är och föreslå en konstruktiv lösning Help and documentation Även om det är bäst om systemet kan användas utan hjälp så kan den behövas. Hjälp ska vara lätt att nå, lätt att söka i, fokuserad på användarens uppgift, lista konkreta stega att göra och inte vara för stor. 22
23 Projekt Start idag Sista inlämningsdag för rapport 16 mars Betygsgrundande Design 35% Prototyp 35% Rapport 30% Grupper finns på hemsidan Uppgift Designa och prototypa en online-mataffär Målgrupp Folk i karriären med mycket begränsad tid för handling Givna personas Stefan Svantesson 36, säljare och foodie Alexandra Rodriquez 35, systemutvecklare 23
24 Resurser Backend Färdigt sortiment Krav Applikationen ska vara designad för den givna användargruppen Funktioner som ska finnas Användarna ska kunna ange sina uppgifter inklusive adress och betalningssätt och att dessa sparas tills nästa gång man använder programmet. Man ska kunna välja varor att köpa ur affärens sortiment. Man ska kunna genomföra ett köp av de valda varorna. Programmet ska kunna visa en historik över tidigare inköp. 24
25 Extensions Man kan förstås ha fler funktioner, t ex Att man kan spara och återanvända inköpslistor Att man kan markera produkter ur sortimentet som favoriter och sedan få fram dessa Att man kan välja bort ointressanta produkter så att de inte visas nästa gång man ska handla Backend API:t presenteras senare för att undvika implementationstänk. Features man kan förvänta sig inkluderar Spara användaruppgifter Lista alla produkter Lista olika slags urval av produkter Söka bland produkter Plocka fram bilder som visar produkter En varukorg där man kan lägga valda produkter Sparande av utförda inköp. Backenden vet ingenting om GUI:t utan hanterar bara data. 25
26 Deadlines etc Utvecklingen sker i 2 iterationer Framtagande av pappersprototyp Framtagande av mjukvaruprototyp Tider att tänka på Onsdag 12/2 maila kort rapport om arbetsplaner, se hemsidan Fredag 15/2 handledning på labbtiden. onsdag 20/2 - test av pappersprototyp på övningstiden. Det ska alltså finnas en färdig pappersprototyp då som kan testas. fredag 22/2 visa slutgiltig design på labbtiden Läsvecka 7 demo och användartest av prototypen. Lördag16/3 - inlämning av projektrapport Det tillkommer möjlighet till handledning under arbetets gång Att tänka på Läs hela texten om projektet på hemsidan Glöm inte att designa för givna personas Kan vara bra med en primary persona Rekapitulera vad som gåtts igenom i kursen och ta med det i designprocessen Snart gått igenom hela boken Diskutera hur ni ska jobba skolan, hemma etc? Arbetsroller kan vara bra t ex Projektledare Designansvarig Mjukvaruansvarig Grafikansvarig Rapportansvarig 26
27 Avslutningsvis Räkna inte med att detta går att genomföra på schemalagd tid Har man inte jobbat 25 timmar/vecka hittills så är det dags nu Har man inte läst ordentligt kan det bli mer Mer om rapporten kommer vid ett senare tillfälle Enjoy! Frågor? Att göra Jobba med design Analysera uppgiften Informationsarkitektur Visual framework Skissa Pappersprototyp Visa gärna denna nästa fredag Läsa Kapitel 8 i Tidwell Många mönster läs alla Uttömmande uppställning av olika kontroller 27
Design och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Getting input from users Några gyllene regler Projektintro Idag Obs extra redovisningsmöjlighet
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Getting input from users Exempeldesign Paper prototyping Idag CHARM ingen övning
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 Lite av varje Projekt Kapitel 7 i Tidwell Kapitel 6 nästa gång Tenta
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1 Idag Lite av varje Pappersprototyper Kapitel 7 i Tidwell NetBeans-exempel Tenta
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Några gyllene regler Doing Things Projektintro Idag Övningarna start 9.00 Vi
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 Lite av varje Doing things Golden rules Heuristics Intro usability Tenta
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Paper Prototyping Lite kodtips Lists of Things Designexempel Onsdag övning
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1 Idag Lite av varje Lab1 kod Doing things Golden rules Heuristics Intro usability
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 Lite av varje Utvärdering Rapport JComboBox? Tenta 55% av betyget Hjälpmedel
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 merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Project Backend Evaluering Idag Kom på övningen på onsdag med prototyp Boka
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Project Backend Evaluering Idag Boka tid för handledning på fredag! 1 http://ixdcth.se/courses/2015/dat216/backend
Läs merFöreläsning 5 Konceptuell design och designprinciper. Kapitel 8-9 i Stone et al.
Föreläsning 5 Konceptuell design och designprinciper Kapitel 8-9 i Stone et al. Från föregående föreläsning Användbarhetskrav att ta hänsyn till Användarnas förväntningar En uppgift i taget Struktur för
Läs merFöreläsning 6 Konceptuell design och designprinciper. Kapitel 8-9 i Stone et al.
Föreläsning 6 Konceptuell design och designprinciper Kapitel 8-9 i Stone et al. Från krav till design hur gör man Work reengineering, dvs. att omstrukturera, konstruera om befintligt sätt Task allocation,
Läs merOlika syften. TDDD60 användbarhetstest. När passar vilken typ? Med eller utan användare
TDDD60 användbarhetstest Olika syften Olika typer av metoder Mått på användbarhet/kravuppfyllelse Olika syften Hitta användbarhetsproblem för att förbättra (mål: åtgärda problem, förbättra produkten) Formativ
Läs merSAMBRUK. Tentativa förslag för arbete med interaktionsdesign vid utveckling av kommunala e-tjänster. Jonas Sjöström (
SAMBRUK Tentativa förslag för arbete med interaktionsdesign vid utveckling av kommunala e-tjänster Jonas Sjöström ( sjjo@ihh.hj.se ) Agenda 1.Designprocess för användbara e-tjänster 2.Designideal för e-tjänster
Läs merPraktiskt användande av användbarhetstekniker 1 (58)
Praktiskt användande av användbarhetstekniker 1 (58) Vem är jag? Lise-Lotte Thuse, Software Developer & Usability Expert, Industriell IT Kand. & Mag. i Informatik, inrikt. Systemutveckling & Usability
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 merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Project Backend Evaluering Onsdag test pappersprototyp Alla grupper måste
Läs merUtvärdering av prototyp: Frågedatabas av Mårten Cronander. Innehållsförteckning
1 (6) Mottagare: Åsa Cajander Mårten Cronander Utvärdering av prototyp: Frågedatabas av Mårten Cronander Innehållsförteckning 1 Inledning 2 1.1 Ten usability heuristics 2 1.2 Severity ratings for usability
Läs merFöreläsning 5 Konceptuell design och designprinciper
Föreläsning 5 Konceptuell design och designprinciper Kapitel 8 9 i kursboken 080415 Interak@onsteknik 1 Från krav @ll design hur gör man Work reengineering, dvs. af omstrukturera, konstruera om befintligt
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 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 merDatavetenskap. Beteendevetenskap MDI. Design
Designprocessen 1 Datavetenskap Beteendevetenskap MDI Design Två betydelser The final solution/plan (e.g. proposal, drawing, model, description) or the result of implementing that plan in the form of the
Läs merTENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215/TIG091
TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215/TIG091 DAG: 5 mars, 2012 TID: 8.30 12.30 SAL: Hörsalsvägen Ansvarig: Olof Torgersson, tel. 772 54 06. Institutionen för tillämpad informationsteknologi.
Läs merHandlingsbarhet kan innefatta
Handlingsbarhet vs. användbarhet Göran Goldkuhl Forskningsgruppen VITS IEI Linköpings universitet Handlingsbarhet kan innefatta användbarhet användbarhet avbildning 1 Kvalitet hos IT-system Handlingsbarhet
Läs merGranskning av gränssnitt. Mattias Arvola
Granskning av gränssnitt Mattias Arvola 2 Att skapa interaktiva system Identifiera krav Utforma alternativ Ta fram prototyper (eller annan illustration av system) Utvärdera 3 Mål med utvärderingen Revidera,
Läs merHeuristisk utvärdering
Interaction design, industrial design, design management, service design, information design, experience design, graphic design, furniture design, destination design, product design, ergonomics design,
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Information om projekt och rapport Exempel på tentafrågor En del från
Läs merVad utmärker ett bra användargränssnitt?
Vad utmärker ett bra användargränssnitt? Att kommunicera med användarna Feedback och Pliancy Excise kontra Flow GUI = Graphic User Interface GUI = Graphic User Interface GUIn, eller grafiska gränssnitt
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Sjuk Kortföreläsning Idag Torsdag intro till projekt Kom då! 1 MENYER OCH TOOLBARS
Läs merUTVÄRDERING AV JÖNKÖPING KOMMUNS INTRANÄT - med fokus på användbarhet
UTVÄRDERING AV JÖNKÖPING KOMMUNS INTRANÄT - med fokus på användbarhet My Ljungberg Susanna Westerblad EXAMENSARBETE 2009 DATATEKNIK UTVÄRDERING AV JÖNKÖPING KOMMUNS INTRANÄT - med fokus på användbarhet
Läs merStöd för att skapa intuitiva användargränssnitt
Stöd för att skapa intuitiva användargränssnitt Russinen ur kakan Isabella Scandurra Centrum för ehälsa, Uppsala Universitet SAMTIT, Agenda Användbarhetsstandarden ISO 9241-11 Utvecklingsmetoder/utvärderingsmetoder
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 Missad övning 5? Kontakta mig på peter.borjesson@ait.gu.se för att få en kompletteringsuppgift.
Läs merMAMN25 Interaktionsdesign (7,5 HP)
MAMN25 Interaktionsdesign (7,5 HP) Vad är interaktionsdesign? Vilken fjärrkontroll hade ni valt? Definition av interaktionsdesign Designing interactive products to support the way people communicate and
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 merVad är interaktionsdesign?
MAMN25 Interaktionsdesign (7,5 HP) Vad är interaktionsdesign? Vilken fjärrkontroll hade ni valt? 1 Definition av interaktionsdesign Designing interactive products to support the way people communicate
Läs merPrototyping medium/high fidelity Användarupplevelse Interaktionsflöde och flow Användbarhetsutvärdering - Usability testing Tillgänglighet
martin östlund 2008 Prototyping medium/high fidelity Användarupplevelse Interaktionsflöde och flow Användbarhetsutvärdering - Usability testing Tillgänglighet Medium fidelity prototyping/testning» Använda
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 merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Peter Börjesson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Information Projekt Projektplanering in 11/2 Projekthandledning Möjlighet till
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Armin Nezirevic Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Denna vecka Onsdag Uppsamling av missade övningar Torsdag projektredovisning
Läs merKonverteringsskola Del 3: Vad är användbarhet?
Konverteringsskolans andra del behandlade vikten av att lära känna sina besökare. Vi kommer nu att arbeta vidare med besökarna i åtanke och fokusera på hur pass väl de kan använda webbplatsen. Om webbplatsen
Läs merVad utmärker ett bra gränssnitt?
Vad utmärker ett bra gränssnitt? Kommunikation med användarna Feedback och Pliancy Excise kontra Flow GUI = Graphical User Interface GUIn, eller grafiska gränssnitt hittar vi på alla sorters skärmar I
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 Pappersprototyper Designexempel Listor (Tidwell kap.5, List of Things)
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 merExtra handledning för de som vill det på onsdag i ML1 - Drop in, inga tider behöver bokas - En lärare
Den här veckan Extra handledning för de som vill det på onsdag i ML1 - Drop in, inga tider behöver bokas - En lärare Kom ihåg att boka tiden för handledning på fredag när doodles kommer upp. Handledning
Läs merTENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215
TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215 DAG: 14 mars, 2011 TID: 8.30 12.30 SAL: Hörsalsvägen Ansvarig: Olof Torgersson, tel. 772 54 06. Institutionen för tillämpad informationsteknologi.
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Exempel på tentafrågor En del från tidigare tentor men också lite andra
Läs merProjektet. TNMK30 - Elektronisk publicering
Projektet TNMK30 - Elektronisk publicering Gruppindelning projekt Valfria grupper ~4 per grupp TNM088 - Digitala media-grupperna är ok Projektgrupper 4 personer Jämna par Lika arbete för små grupper Anmäl
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1 Idag Lite av varje Utvärdering Rapport JComboBox? Tenta 55% av betyget Hjälpmedel
Läs merVanliga frågor för VoiceXpress
Vanliga frågor för VoiceXpress 1) Hur stort ordförråd (vokabulär) innehåller VoiceXpress? VoiceXpress innehåller ett mycket omfattande ordförråd, och svaret på frågan varierar en aning beroende på hur
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Kursutvärdering Organizing content Tidwell kap 2 Menyer verktygsfält Doing
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 merGrafisk formgivning. Användarens checklista
1-1 Grafisk formgivning Gränssnittet utformning skall på ett naturligt sätt stödja användarens interaktion mot programsystemet Komponenter måste utformas och användas på ett konsekvent och enhetligt sätt.
Läs merLayout och Navigation
Layout och Navigation Layout Layout Det är tre saker som definierar formen på ett GUI Gruppering av element Balans Grid & alignment (dvs hur komponenter är utlagda på ett osynligt rutnät) och som sagt,
Läs merGränssnittets påverkan på användbarhet
Gränssnittets påverkan på användbarhet En studie om de avgörande designprinciperna och designmönstren för ökad användbarhet The Interface Impact on Usability A study of the key design principles and design
Läs merGrafisk formgivning. Gränssnittet utformning skall på ett naturligt sätt stödja användarens interaktion mot programsystemet
1-1 Grafisk formgivning Gränssnittet utformning skall på ett naturligt sätt stödja användarens interaktion mot programsystemet Komponenter måste utformas och användas på ett konsekvent och enhetligt sätt.
Läs merUsability- användbarhet
Usability- användbarhet Tekniker, metoder och annat vi måste känna till för att kunna använda oss av usability som ett framgångsrecept i design av IT & digitala medier. cwiberg@informatik.umu.se Veckans
Läs mer1. (3p) Inom MDI-området framhåller man att människor lär sig via metaforer. Hur menar man att detta går till?
1. (3p) Inom MDI-området framhåller man att människor lär sig via metaforer. Hur menar man att detta går till? Att lära sig via metaforer innebär att man drar nytta av kunskap som användaren redan har,
Läs merElektronisk publicering TNMK30
Elektronisk publicering TNMK30 Muddycards ERD MySQL Säkerhet. Förra gången Idag Muddy cards resultat MySQL-kopplingar mellan tabeller Usability - användbarhet Interaktionsdesign Projektuppgift. Muddy Cards
Läs merVad påverkar designen?
Vad påverkar designen av ett gränssnitt? Vi ser arbetet med design av ett användargränssnitt som något som liknar en arkitekts arbete. En arkitekt ska i sin utformning av en ny byggnad se till att: Byggnaden
Läs merProjektuppgift.
Projekt Projektuppgift Designa och implementera ett webbaserat gränssnitt för att söka information i en befintlig databas. Webssidan ska vara komplett med navigering, överblick, sökning och strukturerad
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 merSLUTRAPPORT RUNE TENNESMED WEBBSHOP
SLUTRAPPORT RUNE TENNESMED WEBBSHOP -05-30 Abstrakt Under 10 veckor har jag och Oskar Norling arbetat med att ta fram en webbshop-applikation till företaget Rune Tennesmed i Kalmar. I denna rapport tänker
Läs merIndividuell inlämningsuppgift TEK210
Individuell inlämningsuppgift TEK210 Den individuella inlämningsuppgiften består av två delar. Del 1 Kognitiv design är obligatorisk och för att bli godkänd på kursen krävs att denna, tillsammans med skriftlig
Läs merFöreläsning 4, Användbarhet, prototyper
Föreläsning 4 Användbarhet och prototyper Kapitel 5-7 i Stone et al. Mer om användbarhet Psykologiska principer avseende: Förväntningar En uppgift i taget Struktur för förståelse Känna igen eller komma
Läs merFöreläsning 7: Kognition & perception
Föreläsning 7: Kognition & perception FSR: 3, 4 Att läsa: Kapitel 2-3 i Rogers et al.: Interaction design Översikt Att kunna om perception och kognition Konceptuella modeller Metaforer Paradigm, teorier,
Läs merIndividuell inlämningsuppgift del 1: Kognitiv design.
Individuell inlämningsuppgift del 1: Kognitiv design. Den individuella inlämningsuppgiften består av två delar. Del 1 Kognitiv design är obligatorisk och för att bli godkänd på kursen krävs att denna,
Läs merSänk kostnaderna genom a/ ställa rä/ krav och testa effektivt
Sänk kostnaderna genom a/ ställa rä/ krav och testa effektivt Kravhantering / Testprocess - Agenda AGENDA Grundläggande kravhanteringsprocess. Insamling, dokumentation, prioritering, Test och förvaltning
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 Menyer och verktygsfält Organizing the page Kod bakom lab 1? Observera
Läs merMetodisk programutveckling
2-1 Metodisk programutveckling Analys» krav analys - hur ska programmet användas?» domän analys - hur måste programmet vara strukturerat? Dialogmodellering» Dialogmodeller - Vilka fönster består dialogen
Läs merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Exempel på tentafrågor En del från tidigare tentor men också lite andra
Läs merInteraktionsdesign, grundkurs INTERAKTION 1
Interaktionsdesign, grundkurs INTERAKTION 1 Dagens föreläsning Vad är interaktion? Interaktionsmodeller Typer av användargränssnitt Översikt, orientering, navigering Felhantering Vad är interaktion? 1.
Läs merDD2458-224344 - 2014-12-19
KTH / KURSWEBB / PROBLEMLÖSNING OCH PROGRAMMERING UNDER PRESS DD2458-224344 - 2014-12-19 Antal respondenter: 26 Antal svar: 18 Svarsfrekvens: 69,23 % RESPONDENTERNAS PROFIL (Jag är: Man) Det var typ en
Läs merFö 4: Utvärdering. Gästföreläsning. Muddy-cards resultat. Varför och vad? Varför? Vad? Mot vad? (Krav) Hur? IMPACT
Varför? Vad? Mot vad? (Krav) Hur? IMPACT Fö 4: Utvärdering Gästföreläsning Computer Supported Collaborative Work flera användare. Live Help Systems Johan Åberg Vecka 10 Måndag 3/3 kl 10 i sal C3 Muddy-cards
Läs merSmå förändringar. Stora resultat.
FileMaker Developer Conference 2017 Presenter Series Små förändringar. Stora resultat. En guide till ett perfekt gränssnitt. Martha Zink, Soliant Consulting, Inc. FileMaker Developer Conference DevCon
Läs merAnvändbarhetsutvärdering och genomgång
Användbarhetsutvärdering och genomgång Varför och hur? Varför? Iterativ design Prototyping Mäta användbarhet Objektiv/subjektiv återkoppling Quick and dirty Slow and clean Med eller utan användare 1 Utvärdering
Läs merAnvändarvänlighet? Användbarhet. Användbarhet! De vise männen. Användbarhet enl. ISO Bakom varje framgångsrik man
Användbarhet TNMK31 Användbarhet Användarvänlighet? Åtkomlighet Förenligt med och stöd för människans mentala funktionssätt Individualisering Hjälpresurser Är tätt kopplat till användargränssnitt, speciellt
Läs merManual för Readsoft Online- Admin användare
Hogia Performance Management AB Manual för Readsoft Online- Admin användare Användarinstruktion för administratörer i Readsoft Online 0 Innehåll Administratör i Readsoft Online... 2 Välkommen till Readsoft
Läs merUsability analysis and inspection
Usability analysis and inspection Why and how? Design och konstruktion av användargränssnitt 1MD113 Why? Iterative design Prototyping Measuring usability Objective/subjective feedback Quick and dirty Slow
Läs merINTERAKTIONSDESIGN: VAD & HUR?
INTERAKTIONSDESIGN: VAD & HUR? Interaktionsteknik & Design, HT-13 Evelina Fagertun evelinafagertun@gmail.com VAD? Vad är interaktionsdesign? HUR? Hur skapar vi bra design? INTERAKTION Wiki: Interaktion
Läs merVälj affärssystem & partner i 5 steg. En guide för dig som ska välja, upphandla & implementera ett affärssystem
Välj affärssystem & partner i 5 steg En guide för dig som ska välja, upphandla & implementera ett affärssystem Att byta affärssystem är en utmaning, men ofta ett nödvändigt steg för att lyfta verksamheten
Läs merMotionera med mera. Sammanfattning. Klass: Te2c, Polhemskolan i Lund Av: Viktor Joelsson Kristoffer Korén Harry Larsson
Klass: Te2c, Polhemskolan i Lund Av: Viktor Joelsson Kristoffer Korén Harry Larsson Motionera med mera Sammanfattning Vi har valt att skapa en tjänst. Tjänstens syften är att minimera energiförbrukningen
Läs merAgenda. Inledning, teoretiska metoder Hierarkisk uppgiftsanalys, HTA Cognitive walkthrough CW Heuristisk evaluering
Agenda Inledning, teoretiska metoder Hierarkisk uppgiftsanalys, HTA Cognitive walkthrough CW Heuristisk evaluering Teoretiska metoder Inspektionsmetoder Teoribaserade Olika typer av walkthroughs Uppgiftsanalysmetoder
Läs merBeställa varor från webbutiken för provtagningsmateriel, remisser och övrigt materiel.
1 (14) 2017-06-14 Beställa varor från webbutiken för provtagningsmateriel, remisser och övrigt materiel. Innehållsförteckning Inloggning... 2 Regelverk för lösenord:... 2 Felmeddelanden vid inloggning...
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 merRelease Notes. Vad är nytt i Easy Planning 6.31. Programmet nu Vistakompatibelt. Ny html hjälpfil anpassad för Vista
Vad är nytt i Easy Planning 6.31 Nya funktioner som tillkommit: 1. Programmet nu Vistakompatibelt. 2. Ny html hjälpfil anpassad för Vista. 3. Skapa egna rapporter i Access. 4. Databasen uppgraderas till
Läs merMänniskan och Tekniken. Fö 3 Människan och tekniken. Perception. Visuell perception
Fö 3 Människan och tekniken Fö1 om Användbarhet och svårigheter med det. PACT som ett ramverk för att beskriva problemet. Fö 2 om metoder för att genomföra PACT-analys, dvs användarstudie och ev. analys
Läs merKom i gångg. Med vår Webshop
Kom i gångg g Med vår Webshop Välkommen till vår Webshop! För att effektivisera dina inköp lägger vi stor vikt på att erbjuda smarta lösningar inom logistik, IT och kommunikation, detta i kombination med
Läs merTENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215 - lösningsförslag
TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215 - lösningsförslag DAG: 8 mars, 2010 TID: 8.30 12.30 SAL: V-huset Ansvarig: Olof Torgersson, tel. 772 54 06. Institutionen för data- och informationsteknik.
Läs merSlutrapport uppgift 2
7 SEPTEMBER 2016 Slutrapport uppgift 2 UX-16 Nackademin Uppdrag: Utveckling av webbtjänst med personas och skisser. Grupp 3 Alexander Lindqvist, Majah Disland, Linnea Molinder, Rasmus Hammarlund. Scenario
Läs merNågra exempel. Principer för design. Vilka problem medför den här designen? Vilken av följande placeringar av piltangenterna är bäst?
Några exempel Principer för design Hur många kan ställa in klockan på sin video utan manual? Hur ofta vrider man på fel platta på spisen eller glömmer vrida av den när man är klar? Hur ofta knuffar man
Läs merFöreläsning 7: Kognition & perception
Föreläsning 7: Kognition & perception FSR: 3, 4 Att läsa: Kapitel 2-3 i Rogers et al.: Interaction design Översikt Vad är kognition, perception? Vad har kognition och perception med interaktionsdesign
Läs merDesign och konstruktion av grafiska gränssnitt. Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU
Design och konstruktion av grafiska gränssnitt Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Making it look good: Visual Style and Aesthetics Visuell design Färger Typografi Exempel
Läs merFöreläsning 8, Design
Föreläsning 8: Design och prototyper FSR: 1, 4, 5, 6 Att läsa: Kapitel 11 i Rogers et al.: Interaction Design Översikt Konceptuell design (Fysisk design) Uppgiftsallokering Prototyper Typer av prototyper
Läs merNyheter och ändringar Adelanet 4.8.0
Nyheter och ändringar Adelanet 4.8.0 Adelanet är nu uppdaterad för att kunna hantera hela flödet från ansökan till uppsägning av plats i barnomsorgen. Uppdaterad och förbättrad funktion på Arenan, ett
Läs merProjektarbete 2: Interaktiv prototyp
Projektarbete 2: Interaktiv prototyp Jonatan Hilmarch (Grupp 13) 880427-5595 hilmarch@skip.chalmers.se Kurs: Människa-Datorinteraktion TIG061 HT 2010 Projekt 1 - en tillbakablick Enligt projektets systemdefinition
Läs merPrinciper för interaktionsdesign
Designtrappan och GDK Principer för interaktionsdesign Mattias Arvola Institutionen för datavetenskap Designtrappan är framtagen av Dansk Design Center och vidareutvecklad av SVID. 2 Dagens föreläsning
Läs merVilken version av Dreamweaver använder du?
Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser
Läs merTre kursblock. av användargränssnitt. Inledningsvis. Hittills. Dags att fylla på med det som saknas! Människa dator interaktion Del 1. 1.
Tre kursblock Grundläggande teori för design av användargränssnitt Människa dator interaktion Del 1 1. Design 2.Human factors & Ergonomics 3. Human computer interaction Inledningsvis Interaktiv produkt/system
Läs mer