Design och konstruktion av grafiska gränssnitt

Transkript

1 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 tänkbara frågor Tenta 55% av betyget Hjälpmedel 1 A4 (2 sidor) med egna anteckningar skrivna för hand eller på dator Texten ska gå att läsa utan hjälpmedel Innehåll (kort version) Allt som gåtts igenom på kursen Tidwell förutom kap om Social Media och Mobile Utdelat material Föreläsningar Resten av betyget projekt Viktigt att alla bidrar 1

2 Info Onsdag övning cognitive walkthrough Torsdag projektredovisning HC1 och HC2 Berätta 8 minuter för de andra Udda grupper i HC1 Jämna i HC2 Fredag demo av projekt enligt särskilt schema 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? 2

3 Tentafrågor Ge en kort (max 1 sida) beskrivning av det grafiska gränssnittets historia. Nämn viktiga milstolpar och varför de haft betydelse för utvecklingen Douglas Engelbart Född 1925, pionjär för GUI Ville stödja människans intellekt Tänkte sig ett system där man direkt interagerade med en grafisk representation Sökte patent för musen

4 1981 Alto + Smalltalk Nätverk E-post I princip som idag dollar flopp Xerox Star 4

5 Mer Xerox Star Några principer Se och peka Uniform design över program What You See Is What You Get En dator för alla dollar 9-tums skärm 512 * k minne Ingen multi-tasking Floppy-drive Reklam Framgång The rest is history The Mac

6 Windows 1985 Största skillnad menyer på varje fönster Tiled windows från början Microsofts första riktiga GUI Oerhörda säljsiffror Task bar Windows 95 6

7 Tentafrågor Förklara begreppen Sovereign och Transient posture och ge exempel på vad man bör tänka på vid design av dessa typer av applikationer. Posture Ungefär: inställning, attityd, (hållning) Ett programs posture är något som måste bestämmas tidigt Är det Försynt Kaxigt Neutralt Tråkigt Färgglatt Hjälpsamt? Oavsett vilket, så ska det vara det av en orsak baserat på användarstudier. 7

8 Postures enligt Cooper Soverign Posture Enväldig, härskande, suverän attityd/hållning Transient Posture Kortvarig, flyktig, övergående attityd/hållning Bara 2 kategorier, men kan vara användbart ändå Sovereign Posture Program som används under en längre tid med användarens fulla uppmärksamhet (helskärm) Utför ett antal relaterade uppgifter med dem under denna tid Exempel Word Excel NetBeans Vertical Applications Program för en smal niche (ofta specialbyggda) Journal och tidsbokning Videoaffär, bibliotek 8

9 Egenskaper Sovereign Intermediates vanligaste användare Optimera för fullscreen Körs under längre period Låt saker ta den plats som behövs Använd minimal visuell stil Konservativ stil Tröttnar på flärd/flashiga grejor Van -> saker kan vara ganska små Rich visual feedback Statusbar Titlebars etc Rich input Menyer, kortkommandon, drag&drop etc Exempel 9

10 Egenskaper Transient Kommer och går En väl avgränsad uppgift Kort tid Användargränssnittet måste visa tydligt vad man ska göra Simple clear and to to the point Utför biuppgift Ta inte upp mer plats än vad som behövs (från sovereign) Bright and clear Kan ha ett starkare visuellt uttryck Men se till att instruktioner finns och är tydliga Mer Keep it simple Ett fönster Inga små fippliga knappar etc Behövs det många dialogrutor har man designproblem Kom ihåg användarnas val Kort tid Enklare om allt är likadant nästa gång 10

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

12 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 El Mobiltelefoner Celler i Excel. 12

13 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 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 13

14 Exempel Boolean Logic Användare förstår inte matematiskt tänkande Exempel AND och OR Betyder inte samma sak i vanligt och formellt språk Visa alla studenter från Partille AND Kungälv Resultat tomt Visa alla studenter från Partille OR Kungälv Det man antagligen menar 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 14

15 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 Exempel Boolean Logic Användare förstår inte matematiskt tänkande Exempel AND och OR Betyder inte samma sak i vanligt och formellt språk Visa alla studenter från Partille AND Kungälv Resultat tomt Visa alla studenter från Partille OR Kungälv Det man antagligen menar 15

16 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 (69) structured format 16

17 (69) 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 Du deltar i utvecklingen av ett nytt program och har fått till uppgift att designa menysystemet. Följande funktioner ska finnas i systemet Spara + diverse andra funktioner Designa programmets menysystem. Gängse konventioner ska följas. Om du använder någon annan bas för designen än de som ges av Cooper så ska det anges i svaret. 17

18 Gömma verktygsfä ltet Göra aktuell text till fetstil Göra aktuell text till kursiv stil Infoga tag Klippa ut Klistra in Kopiera Lägga till en bild Lägga till en tabell Minska textstorleken Skapa ett nytt (HTML-)dokument Spara aktuellt dokument Spara aktuellt dokument under ett nytt namn Skriva ut aktuellt dokument Stänga aktuellt dokument Ångra senaste handling Visa dokumentet som kod Visa dokumentet i designläge Visa programmets hjälpfönster Visa programmets om-dialog Visa verktygsfältet Öppna ett existerande dokument Ö ka textstorleken Lösning 18

19 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. Kommer att ha avdrag för felaktiga mönster Exempel 19

20 Exempel 20

21 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 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 21

22 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 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 22

23 Tentafrågor Diskutera begreppen Flow och Excise i GUI-design. Beskriv vad de är och vad man bör tänka på vid design 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 23

24 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 Exempel 24

25 Stopping the proceedings Flow 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 Exempel 25

26 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 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 el designprinciper 26

27 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 27

28 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 28

29 Hitta de blå prickarna Forts preattentive 29

30 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

31 Möjlig lösning forts 31

32 forts forts 32

33 Tentafrågor Vad menas med Sans-serif och Serif i GUI-sammanhang? Vad bör man tänka på ianslutning 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 (illustrated choices) 33

34 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? Primary Representerar den typiska målgruppen. Helst en Secondary Kompletterar primary med variationer 34

35 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 35

36 Fördelar Personas kan användas för att 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. Beskriv hur en cognitive walkthrough går till Se uppgift 4 36

37 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 37

38 PROJEKTRAPPORT Allmänt Max 12 sidor (exklusive framsida etc) Minimum 12 sidor totalt kan vara en riktlinje Viktigast Reflektion kring arbetet och designen/resultatet Beskriva produkten Använd bilder för att visa designen 12 sidor försvinner lätt Deadline 10/3 kl

39 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 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 39

40 forts 3 Koncept Översiktlig beskrivning Konceptet är en online mataffär för äldre 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 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 40