Design och konstruktion av grafiska gränssnitt



Relevanta dokument
Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Layout och Navigation

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Vad utmärker ett bra användargränssnitt?

Vad utmärker ett bra gränssnitt?

TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215 - lösningsförslag

TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215/TIG091

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Om användare och designprocessen

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

Extra handledning för de som vill det på onsdag i ML1 - Drop in, inga tider behöver bokas - En lärare

Design och konstruktion av grafiska gränssnitt


Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215

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

Design och konstruktion av grafiska gränssnitt

Hållbar utveckling A, Ht. 2014

Design och konstruktion av grafiska gränssnitt. Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU

Design och konstruktion av grafiska gränssnitt


TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215

Föreläsning 4, Användbarhet, prototyper

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Grafisk form för användargränssnitt

Prototyper och användartest

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Interaktionsdesign och användbarhet Personas. Paper prototyping. » Metod för representation av användaren. » Metod för konceptutveckling

Människan och Tekniken. Fö 3 Människan och tekniken. Perception. Visuell perception

Den här veckan. Kapitel 7 och 11. Kom ihåg att boka tiden för handledning på fredag. Uppsamling av missade övningar på onsdag

Design av användargränssnitt

Design och konstruktion av grafiska gränssnitt

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

Design och konstruktion av grafiska gränssnitt

Föreläsning 3: Mer om utvärdering, Inspektionsmetoder kan man utvärdera utan användare?

Utvärdering av prototyp: Frågedatabas av Mårten Cronander. Innehållsförteckning

Föreläsning 7: Kognition & perception

Design av användargränssnitt. Vad behöver man veta? Generella designprinciper. Vad är ett användargränssnitt? Några egenskaper hos människan

Kvalitativ Analys. Utvärderingsmetoder inom MDI DH2408

Vilken version av Dreamweaver använder du?

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?

Nyheter och ändringar Adelanet 4.8.0

Boken. Kapitel 10. Kapitel 11. Kap Ej Kap 10.7, det tar vi senare Resten, läs själva

Granskning av gränssnitt. Mattias Arvola

Kursplan Gränssnittsdesign, 100p Läsår

Projektrapport - Live commentary

TDDC74 - Projektspecifikation

Uppdrag 2 Individuell rapport Jonas Möckelström

Nätkurs Design & konstruktion av användargränssnitt 1MD113 Sid 1 (5) Lektion 11 Användare, uppgifter och krav del

Projektet. TNMK30 - Elektronisk publicering

Laboration: Grunderna i MATLAB

Bonus Rapport Kommersiell Design KTH

Symmetry: Bortsett från menyn har innehållet av sidan viss symmetri när det kommer till videoklippen som är upplagda på sidan.

Efterlysning! Kognitiv design 1. Mitt mål för er med idag. Idag. Mål. Vad exakt är problemet?

Nya funktioner i InPrint 3

Vad påverkar designen?

Interaktionsdesign som profession. Föreläsning Del 2

Objektorienterad programmering Föreläsning 2

Föreläsning 12 Inspektionsmetoder. Rogers et al. Kapitel 15

GRÄNSSNITTSDESIGN. Ämnets syfte. Kurser i ämnet

Programmeringsteknisk översiktskurs för yrkeshögskoleprogram

Bra överblick. Bra överblick. Bra överblick h<p:// Konceptuell design

Kursplan Gränssnittsdesign och Webbutveckling 1 Vårtermin 2014

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.

TiS 2017 Inkluderande koppelkodning. Tomas Jonsson Maria Adlerborn

Individuell inlämningsuppgift TEK210

ANALYS & KONCEPT ETT DOKUMENT FRÅN NOC WEBBYRÅ

Interaktion 2 STYRDON, PEKDON OCH ANNAN INTERAKTION ATT RÄKNA MED

Design och konstruktion av grafiska gränssnitt

Objektorienterad programmering med Java Swing: Händelser, lyssnare och applets

DD

Min individuella uppgift om hamnens Webbsida

TDDD26 Individuell projektrapport

Prototyping medium/high fidelity Användarupplevelse Interaktionsflöde och flow Användbarhetsutvärdering - Usability testing Tillgänglighet

INTERAKTIONSDESIGN: VAD & HUR?

LATHUND FÖR PREZI. Sofia Bandelin Digital kompetens och lärande UMU Maj Uppgift IIP3.2 Att lära ut program

Viktigt! Glöm inte att skriva tentamenskod på alla blad du lämnar in.

Boken. Kap Kap 11.3

Olika syften. TDDD60 användbarhetstest. När passar vilken typ? Med eller utan användare

Föreläsning 10: Gränssnitt och webbdesign

Affärsmässig tjänstedesign och teknikutveckling, 7.5 hp Service Design and Business Models in an Engineering Context, 7.5 Credits

Agenda. Inledning, teoretiska metoder Hierarkisk uppgiftsanalys, HTA Cognitive walkthrough CW Heuristisk evaluering

Objekt-orienterad programmering och design. DIT953 Niklas Broberg, 2018

Transkript:

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. Undrar ni över status på inlämningar så kom fram och prata med mig i pausen eller efter föreläsningen.

Idag Information om projekt och rapport Exempel på tentafrågor En del från tidigare tentor men också lite andra tänkbara frågor Jag frågar, ni svarar!

Denna vecka Torsdag projektredovisning HC1 och HC3 Varje grupp får 10 minuter Visa programmet, (berätta om processen, hur ni kom fram till era idéer osv ) HC1 Udda grupper, HC3 Jämna grupper Fredag demo av funktionalitet enligt särskilt schema Varje grupp får 15 minuter Kom ihåg att boka era tider i doodle. Länkarna finns på hemsidan. Visa upp saker ni implementerat

Nästa vecka Måndag Tenta 14.00 Lördag Projektrapport + kod Körbar kod

Projektrapport Max 12 sidor Exklusive framsida, innehållsförteckning, bilder m.m. Ungefär 8-12 sidor totalt kan vara en riktlinje Viktigast Reflektion kring arbetet och designen/resultatet Beskriva produkten Beskriv idéerna som ni inte hann implementera Använd bilder för att visa designen 12 sidor försvinner lätt

Innehåll Man måste inte organisera rapporten på ett visst sätt. Men följande är en möjlighet Titelsida Abstrakt Innehållsförteckning 1 Inledning 2 Bakgrund (kanske inte behövs) 3 Koncept (översiktlig beskrivning av imat) 4 Realisering (design och implementationsprocessen) 4.1 Pappersprototyp 4.2 Test och utvärdering 4.3 Mjukvaruprototyp 4.4 Cogntive walkthrough. 5 Resultat (beskrivning av slutresultatet) 6 Diskussion

forts 1 Inledning Sidan 1 Startar berättelsen Hellre I dagens samhälle erbjuds alltfler tjänster på internet.. än Detta är en projektrapport på kursen Sammanfattar lite om problemställning och arbete 2 Bakgrund Kanske inte behövs Här kan man berätta lite av varje som sätter rapporten i ett sammanhang Kan också behandla liknande andra saker som gjorts

forts 3 Koncept Översiktlig beskrivning Konceptet är en online mataffär för en specifik grupp Någon bild 4 Realisering Beskriv hur arbetet genomfördes 4.1 Pappersprototyp Om pappersprototypen och hur den utvecklades 4.2 Test och utvärdering Om testning och vilka eventuella ändringar som gjordes 4.3 Mjukvaruprototyp Om byggandet av programmet 4.4 Cognitive Walkthrough

forts 5 Resultat Beskriv er prototyp och de tankar och designmönster som ligger bakom 6 Diskussion Diskutera er prototyp och arbetet med att ta fram den. Reflektera kring vad som är bra och mindre bra Ta upp förslag på förbättringar

Tenta Tenta 55% av betyget Betygsgränser: 3:a 24p, 4:a 36p, 5:a 48p, maximalt 60p. Hjälpmedel En fusklapp med namn på alla designmönster och var de finns i boken (kan laddas ner från hemsidan) Distribueras med tentan. Innehåll (kort version) Allt som gåtts igenom på kursen (se läsanvisningar på hemsidan) Tidwell förutom kap om Social Media och Mobile Utdelat material & vissa delar av Cooper Föreläsningar Resten av betyget projekt

Tentafrågor Vad är ett designmönster och vilken nytta har man av dem?

Tentafrågor Vad är ett designmönster och vilken nytta har man av dem? Designmönster Mönster är förslag på fungerande lösningar Måste anpassas efter situationen Nytta Kan man många mönster ä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

Tentafrågor Beskriv kort några viktiga principer att tänka på vid layout av GUI:n Gruppering av element Balans Grid & alignment

Gruppering Förklara kort vad som menas med gruppering och några av de principer man kan följa när man grupperar.

Gruppering Vi grupperar saker för att visa hur de hör ihop Gestalt-psykologi Det finns vissa funktioner inbyggda i hur vi ser saker Tänker man på dessa så får man bättre GUI:n Helheten större än delarna, Hjärnan skapar större delar av mindre Boxar, ramar kan hjälpa men bara om layouten är logisk ändå Närhet, Likhet, Linjering, Förslutning

Närhet (Proximity) Saker som är nära varandra uppfattas som att de hör ihop Placera saker som hör ihop nära varandra

Likhet (Similarity) Saker som har samma form, färg, storlek eller orientering, uppfattas som att de hör ihop

Linjering (Continuity) Vi vill forma linjer och kurvor som skapas genom sammanslagning av mindre enheter Kan man hitta linjer blir det snyggare

Förslutning (Closure) Vi grupperar saker i enkla slutna former som rektanglar även om de inte finns explicit representerade. Grupper uppfattas som slutna enheter.

Balans Förklara vad som menas med balans vid design av grafiska gränssnitt

Balans Det finns olika sätt att balansera en sida/skärm Man ska kunna tänka sig att det går en balanslinje någonstans genom layouten. Det måste finnas lika mycket grafiska tyngd på båda sidor om linjen

Grid och alignment Förklara vad som avses med grid och alignment i GUI:sammanhang och vad man kan ha för nytta av dessa begrepp

lignment & grid Tentafrågor t grid är helt enkelt ett (osynligt) rutnät som man acerar saker på Ett grid är helt enkelt ett (osynligt) rutnät som man placerar och alignment saker på... (justering) är helt enkelt att försöka jera saker längs rutnätet Alignment (justering) är helt enkelt att försöka linjera saker längs rutnätet

Tentafrågor Beskriv en typisk interaktionsdesignsprocess och ge exempel på olika aktiviteter som används i processens olika delar.

Tentafrågor Beskriv en typisk interaktionsdesignsprocess och ge exempel på olika aktiviteter som används i processens olika delar. Fastställ behov och krav loop Utveckla alternativa designförslag Bygg interaktiva prototyper för kommunikation och analys Utvärdera designen baserat på prototyperna end loop Vad gör man i olika faser?

Tentafrågor Förklara begreppen mental model, implementation model och represented model. Hur kan dessa påverka designarbetet?

Implementation Model Hur programmet är implementerat Klasser Databaser Händelser

User Mental Models Eller Conceptual models Hur användarna tänker på systemet Skiljer sig ofta från hur det faktiskt funkar

Represented Models Eller presenterad modell Den modell programmet faktiskt visar för användaren Denna måste ligga så nära användarens som möjligt Hur tänker man Vad kan man Vilka förutfattade meningar har man etc.

Implementation Model (0,102,204)

Mental Model

Representad Model Blå

Representad Model Blå

Implementation vs Mental Mjukvara byggs alltför ofta på implementationsmodellen Designerns uppgift är att ta reda på användarens mentala modell Designa efter den Se till att detta implementeras Ju närmare desto bättre

Tentafrågor Ge en beskrivning av designmönstren X,Y,Z och W och illustrera dem med skisser som exemplifierar användning. Se godtycklig beskrivning av mönster som diskuterats på föreläsning Glöm inte skisser

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.

Tentafrågor Betrakta skärmdumpen nedan och fundera över vilka designmönster du kan hitta. Illustrera var i GUI:t designmönstren finns och beskriv de ingående mönstren kortfattat. Identifiera designmönster i GUI:t nedan. Illustrera var de finns och vad de heter. Du behöver inte ge några beskrivningar av ingående mönster.

Exempel

Exempel

Exempel

Tentafrågor Nämn 5 saker man bör tänka på för att eliminera Excise i GUI:n

Tentafrågor Nämn 5 saker man bör tänka på för att eliminera Excise i GUI:n Don t stop the proceedings with idiocy Minimera navigation Tvinga inte användarna att gå till ett annat fönster för att göra något som påverkar nuvarande fönster Minska antalet ställen att gå till Undvik hierarkier Ha meningsfulla mappningar från kontroller till funktioner

Tentafrågor Diskutera begreppen Flow och Excise i GUI-design. Beskriv vad de är och vad man bör tänka på vid design. 2010-03-08 Cooper talar om Flow och Excise. Fö rklara dessa begrepp och ge minst 3 exempel på vad man kan göra för att underlätta flow och 3 exempel på vad man kan göra för att undvika excise. Fö r full poäng krävs att exemplen fö rklaras i viss utsträckning, det räcker inte att bara nämna ett problem eller en lösning. Lösningsförslag finns

Eliminating Excise Excise a tax levied on certain goods and commodities produced or sold within a country and on licenses granted for certain activities : excise taxes on cigarettes. the excise on liquor duty, tax, levy, tariff. Typ ta bort onödigt arbete (skatt) från program Program som skattar sina användare med kognitiv (psykisk) eller fysisk ansträngning varje gång de används Excise är saker användaren måste göra för att nå sitt mål men som egentligen inte bidrar till det Man gör det för programmets skull inte sin egen

Visual Excise Arbete användaren måste utföra för att lyckas avkoda visuell information Var ska man börja? Vad kan man klicka på? Vad är bara dekoration? Överdesign För mycket visuella grejer som dränker det som ska kommuniceras Utmattning Användare av sovereign posture tröttnar på för mycket visuell design

Stopping the proceedings Flow är målet! Ibland måste man avbryta Men Don t stop the proceedings with idiocy! Typexempel Onödiga dialoger Dåligt designade felmeddelanden Problemet är att de inte för arbetet framåt

Vanliga problem Tvinga inte användaren att gå till ett annat fönster för att utföra saker som påverkar det nuvarande fönstret Tvinga inte användarna att komma ihåg var i det hierarkiska filsystemet något finns Tvinga inte användarna att ändra storlek på fönster i onödan. Fönster som poppar upp bör ha lämplig storlek från början Tvinga inte användarna att flytta fönster i onödan Tvinga inte användarna att upprepa sina personliga inställningar

Vanliga problem Tvinga inte användarna att fylla i fält för programmets skull. Har man lämnat fält tomma finns det antagligen en orsak Tvinga inte användarna att be om tillstånd t ex för att ändra uppgifter Be inte användarna att bekräfta sina handlingar kräver undo förstås Låt inte användarna handlingar leda till att fel uppstår

Flow Tillstånd av avskärmning och produktivitet Kan uppnås när man jobbar med program Underlätta detta Och stör inte En uppsättning guidelines eller designprinciper

Basregler No matter how cool your interface is less of it would be better Bästa antagligen inget alls Well-orchestrated user interfaces are transparent GUI:n som uppfyller detta tar inte upp uppmärksamhet utan låter användaren fokusera på sina mål

Designing Harmonious Interactions 1. Follow users mental models 2. Less is more 3. Enable users to direct, don t force them to discuss 4. Keep tools close at hand 5. Provide modeless feedback 6. Design for the probable; provide for the possible 7. Provide comparisons 8. Provide direct manipulation and graphical input 9. Avoid unnecessary reporting 10. Reflect object and application status 11. Avoid blank slates 12. Differentiate between command and configuration 13. Provide choices 14. Hide ejector seat levers 15. Optimize for responsiveness; accomodate latency

Tentafrågor Vad menas med pre-attentive variables? Förklara och ge några exempel.

Tentafrågor Vad menas med pre-attentive variables? Förklara och ge några exempel. Saker som direkt uppfattas visuellt av människor utan vidare tänkande De finns inbyggda i vårt kognitiva system Bra att känna till vid design

Hitta de blå prickarna

Forts preattentive

Tentafrågor Betrakta GUI:t i bilden nedan. Hitta 5 fel och beskriv vad problemet är.

Exempel

Tentafrågor Betrakta GUI:t i bilden nedan. Gör en bättre design med samma funktionalitet. Namnge och beskriv eventuella designmönster du använder.

2010-03-08

Möjlig lösning

forts

forts

forts

Tentafrågor Vad menas med Sans-serif och Serif i GUI-sammanhang? Vad bör man tänka på i anslutning till detta.

Tentafrågor Vad menas med Sans-serif och Serif i GUI-sammanhang? Vad bör man tänka på i anslutning till detta. Serif och Sans-serif är två olika typer/klasser av fonter. Serifer har små krokar på en del ställen Serifer gör sig inte bra i små storlekar på skärm

Tentafrågor Designa ett GUI enligt följande specifikation: (beskrivning) Om några designmönster används så ska de identifieras. Gör en liten applikation med för att skicka blommor till någon Följande funktioner ska finnas Välja mellan butikens 9 olika buketter Skriva en hälsning Ange adressuppgifter till mottagaren Bekräfta köp

Tentafrågor Förklara förhållandet mellan menyer och toolbars

Tentafrågor Förklara förhållandet mellan menyer och toolbars Menyer bör vara en karta över alla funktioner som finns i ett program. Allt man kan göra ska finnas där. Toolbars är till för att ge snabb åtkomst till vanliga funktioner utan att behöva gå in i någon meny. Alla funktioner som finns i en toolbar ska alltså finnas i menyn men det behöver inte vara tvärtom.

Tentafrågor Vad menas med primary och secondary persona?

Tentafrågor Vad menas med primary och secondary persona? Primary Representerar den typiska målgruppen. Helst en Secondary Kompletterar primary med variationer

Tentafrågor Varför använder man personas vid design? Försök ge specifika exempel på fördelar med denna metod.

Personas Vad gör man med resultatet från användarstudier? Anteckningar, inspelningar Hela poängen är att det ska hjälpa design Modell Vanligt inom allt möjligt Ekonomi Fysik Ger en bild av verkligheten som ökar förståelse En modell av en användare skapad utifrån användarstudier kallas persona

Personas kan användas för att Fördelar Bestämma vad en produkt ska göra och hur den ska fungera. Personas mål utgör grunden för design. Kommunicera med stakeholders, utvecklare, andra designers. Stärka konsensus och engagemang inom gruppen lättare att relatera till än feature-lists och flödesdiagram Mäta hur bra designen är utgå ifrån vad personan skulle tycka och prova Bidra till utveckling av marknadsföring och försäljningsplaner Hjälper till att undvika The elastic user Self-refential design Edges cases

Tentafrågor Förklara begreppet heuristisk evaluering.

Heuristic Evaluation Man identifierar en uppsättning användbarhetskriterier (heuristics) Vi har t.ex. tagit upp Nielsens 10 heuristics Sen låter man experter utvärdera designen och undersöka om de principer man valt följs Flera utvärderare som testar oberoende 3-5 utvärderare fångar 75% av problemen Kan användas på specifikationer, prototyper och färdiga system Enkelt och billigt

Tentafrågor Ge 3 exempel på metoder som kan användas vi utvärdering av GUI:n. (och förklara minst 2 av dem) Cognitive walkthrough Think-aloud Intervjuer