Design och konstruktion av grafiska gränssnitt
|
|
- Kristin Lindström
- för 7 år sedan
- Visningar:
Transkript
1 Design och konstruktion av grafiska gränssnitt Armin Nezirevic Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU
2 Denna vecka Onsdag Uppsamling av missade övningar Torsdag projektredovisning HC1 och HC2 Varje grupp får 10 minuter Visa programmet, berätta om processen, hur ni kom fram till era idéer osv Udda grupper i HC1 Jämna i HC2 Fredag demo av projekt enligt särskilt schema Varje grupp får 15 minuter Kom ihåg att boka era tider i doodle. Länkarna finns på hemsidan.
3 Idag Exempel på tentafrågor En del från tidigare tentor men också lite andra tänkbara frågor Jag frågar, ni svarar. ;)
4 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) Samma krav som innan 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
5 Tentafrågor Beskriv kort några viktiga principer att tänka på vid vid layout av GUI:n Gruppering av element Balans Grid & alignment
6 Grouping & Alignment 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 Hjärnan skapar större delar av mindre Boxar kan hjälpa men bara om layouten är logisk ändå
7 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
8 Likhet (Similarity) Saker som har samma form, färg, storlek eller orientering, uppfattas som att de hör ihop
9 Linjering (Continuity) Vi vill forma linjer och kurvor som skapas genom sammanslagning av mindre enheter Kan man hitta linjer blir det snyggare
10 Closure Vi grupperar saker i enkla slutna former som rektanglar även om de inte finns explicit representerade. Grupper uppfattas som slutna enheter.
11 Tentafrågor Förklara vad som avses med grid och alignment i GUI:sammanhang och vad man kan ha för nytta av dessa begrepp
12 Alignment & grid Tentafrågor Ett grid är helt enkelt ett (osynligt) rutnät som man l Förklara vad som avses med grid och alignment i placerar saker på GUI:sammanhang och vad man kan ha för nytta av dessa begrepp och a ignment (justering) är e hl t enkelt att försöka linjera saker längs rutnätet Ett grid a r helt enkelt ett (osynligt) rutna t som man placerar saker på... Alignment (justering) a r helt enkelt att fo rso ka linjera saker la ngs rutna tet
13 Tentafrågor Beskriv en typisk interaktionsdesignsprocess och ge exempel på olika aktiviteter som används i processens olika delar.
14 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?
15 Tentafrågor Förklara begreppen mental model, implementation model och represented model. Hur kan dessa påverka designarbetet?
16 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.
17 Implementation Model Hur programmet är implementerat Klasser Databaser Händelser
18 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
19 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
20 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
21 Structured Format
22 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.
23 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.
24 Gömma verktygsfa 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
25 Lösning
26 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
27 Exempel
28 Exempel
29 Exempel
30 Exempel Några mönster: structured input format wizard prominent done/next button input hints progress indicator cancelability kanske I ett tidigare steg men inte I denna skärm. Left alignment finns men Inte riktigt bra. Ni får poäng om ni nämner det.
31 Tentafrågor Nämn 5 saker man bör tänka på för att eliminera Excise i GUI:n
32 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
33 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. Fo 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. Fo r full poäng krävs att exemplen fo rklaras i viss utsträckning, det räcker inte att bara nämna ett problem eller en lösning. Lösningsförslag finns
34 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
35 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
36 Exempel
37 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
38 Exempel
39 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
40 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
41 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
42 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
43 Tentafrågor Vad menas med pre-attentive variables? Förklara och ge några exempel.
44 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
45 Hitta de blå prickarna
46 Hitta de blå prickarna
47 Forts preattentive
48 Tentafrågor Betrakta GUI:t i bilden nedan. Hitta 5 fel och beskriv vad problemet är.
49 Exempel
50 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.
51
52 Möjlig lösning
53 forts
54 forts
55 forts
56 Tentafrågor Vad menas med Sans-serif och Serif i GUI-sammanhang? Vad bör man tänka på ianslutning till detta.
57 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
58 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)
59 Tentafrågor Förklara förhållandet mellan menyer och toolbars
60 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.
61 Tentafrågor Vad menas med primary och secondary persona?
62 Tentafrågor Vad menas med primary och secondary persona? Primary Representerar den typiska målgruppen. Helst en Secondary Kompletterar primary med variationer
63 Tentafrågor Varför använder man personas vid design? Försök ge specifika exempel på fördelar med denna metod.
64 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
65 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
66 Tentafrågor Förklara begreppet heuristisk evaluering. Beskriv hur en cognitive walkthrough går till
67 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
68 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
69 Projektrapport Max 12 sidor (exklusive framsida etc) Minimum 10 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 Deadline 15/3 kl (projektrapport och koden)
70 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
71 forts 1 Inledning Sidan 1 Startar berättelsen Hellre I dagens samha lle erbjuds alltfler tja nster på internet.. a n Detta a 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
72 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
73 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
Design 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 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 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 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 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 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 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 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 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 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 1 Idag Lite av varje Projekt Kapitel 7 i Tidwell Kapitel 6 nästa gång Tenta
Läs merTENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215
TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215 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 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 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 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 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 Data- och informationsteknik Chalmers/GU 1 Idag Lite av varje Utvärdering Rapport JComboBox? Tenta 55% av betyget Hjälpmedel
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 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 1 Idag Lite av varje Utvärdering Rapport JComboBox? Tenta 55% av betyget Hjälpmedel
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 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 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 Några gyllene regler Projektintro Idag 1 GETTING INPUT
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 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 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. 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 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 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 merGrafisk design Varför grafisk design? öka synligheten ge klar affordance stödja en god mappning ge god feedback Varför grafisk design? skapa en smidig interaktion kan göra gränssnittet visuellt mer
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 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 Data- och informationsteknik Chalmers/GU 1 Idag Lite av varje Resten av Tidwell Små skärmar Kodtips för projekt Tenta Hjälpmedel
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 merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1 Idag Fortsatt om användare Mentala modeller vs implementationsmodeller Personas
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 merGrafisk design Varför grafisk design? öka synligheten ge klar affordance stödja en god mappning ge god feedback Varför grafisk design? skapa en smidig interaktion kan göra gränssnittet visuellt mer
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 LayoutManagers Sista Tidwell Backend projekt (Små skärmar)
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 merNya funktioner i InPrint 3
Hemsida: www.symbolbruket.se Telefon: 013-712 70 E-post: support@symbolbruket.se Nya funktioner i InPrint 3 InPrint 3 är en helt omgjord version av det gamla programmet InPrint 2. Allt du gjorde i In Print
Läs merDen här veckan. Kapitel 7 och 11. Kom ihåg att boka tiden för handledning på fredag. Uppsamling av missade övningar på onsdag
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 Making it look good Visuell design Färger Typografi Exempel och patterns Komplex
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 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 merProgrammeringsteknisk översiktskurs för yrkeshögskoleprogram
Programmeringsteknisk översiktskurs för yrkeshögskoleprogram Föreläsning 2 Våren 2005 Innehåll Hur skapar man formulär i Visual Basic, design av användarytor Vad är objekt? Egenskaper och metoder Läsanvisningar:
Läs merKursplan Gränssnittsdesign och Webbutveckling 1 Vårtermin 2014
Kursplan Gränssnittsdesign och Webbutveckling 1 Vårtermin 2014 Kurswebb: www.creativerooms.se/edu, välj Gränssnittsdesign eller Webbutveckling 1 Lärare: Aino-Maria Kumpulainen, aino-maria.kumpulainen@it-gymnasiet.se
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 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 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 mer1. Uppdateringsmodul (CMS)
Innehåll 1. Uppdateringsmodul (CMS)... 2 2. Artiklar... 3 2.1 Upprätta din första artikel... 4 2.2 Skapa innehåll i artikeln... 5 2.2.1 RUBRIK I ARTIKELN:... 5 2.2.3 INFOGA BILDER:... 7 2.2.4 CELLER...
Läs merEfterlysning! Kognitiv design 1. Mitt mål för er med idag. Idag. Mål. Vad exakt är problemet?
Efterlysning! Kognitiv design 1 Hur man gör en användare glad Kursrepresentanter? Maila! Webbaserat system för gruppindelning. Idag Inledande exempel Vad är användbarhet? Hur gör användaren? Normans sjustegsmodell
Läs merGrafiska användargränssnitt
Grafiska användargränssnitt VT-10 GUI - VT10 Martin Blom 1 Kursens upplägg Teori Principer och koncept Föreläsningar Fönstersystem Konstruktion av GUI Design av GUI Praktik Göra på riktigt Laborationer
Läs merGrafisk form för användargränssnitt
Grafisk form för användargränssnitt Petra Dryselius Designer, digitala plattformar Digital Communica.on Linköping AB Kompetens och lösningar inom digitala medier. Intranät, externwebb, webbsystem, digitala
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 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 merIC1007 Människa-dator interaktion: Principer och Design 7,5 hp
IC1007 Människa-dator interaktion: Principer och Design 7,5 hp Human-computer Interaction: Principles and Design Kursplan för IC1007 gäller från och med HT11 Betygsskala: A, B, C, D, E, FX, F Utbildningsnivå:
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 merDesign och konstruktion av grafiska gränssnitt
Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1 Idag Menyer och verktygsfält Swing Application Framework & Actions Organizing
Läs merGRÄNSSNITTSDESIGN. Ämnets syfte. Kurser i ämnet
GRÄNSSNITTSDESIGN Ämnet gränssnittsdesign behandlar interaktionen mellan dator och människa med fokus på designaspekterna i utveckling av användbara, tillgängliga och tilltalande gränssnitt. Det innehåller
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 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 merSnabbguide. ITP Whiteboard har 3 nivåer bas, medel och avancerad. Detta gör att det är enkelt att börja jobba med ITP Whiteboard.
ITP Whiteboard har 3 nivåer bas, medel och avancerad. Detta gör att det är enkelt att börja jobba med ITP Whiteboard. Verktygsfunktioner i BAS Snabbguide Klicka på det verktyg du vill jobba med. Det verktyg
Läs merINSTRUKTION Specifikation E modul.doc
1 (13) Syfte Detta är en instruktion för hur det är tänkt att specifikationen ska fyllas i vid beställning av en E modul. Förhoppningen är dock att specifikationsmallen är självinstruerande så att detta
Läs merNätkurs Design & konstruktion av användargränssnitt 1MD113 Sid 1 (5) Lektion 11 Användare, uppgifter och krav del
Nätkurs Design & konstruktion av användargränssnitt 1MD113 Sid 1 (5) Del 3 Uppgiftsanalys Av Stefan Blomkvist Uppgiftsanalysen ska svara på frågor om vilka uppgifter användarna utför och hur dessa genomförs.
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 merDesign av användargränssnitt
Design av användargränssnitt Vad är ett bra användargränssnitt? Vad påverkar designen? Utvärdering viktig Praktiska rekommendationer - Heuristik Exempel på bra och mindre bra design Vad är ett användargränssnitt?
Läs merArbeta i Qlikview. Grundkurs i Qlikview- enkel Exempel och beskrivning av grundläggande funktioner
Arbeta i Qlikview Grundkurs i Qlikview- enkel Exempel och beskrivning av grundläggande funktioner Ekonomi- och planeringsavdelningen/ Qlikview Systemförvaltning Innehåll 1 Sammanfattning... 3 2 Lär känna
Läs merObjektorienterad programmering med Java Swing: Händelser, lyssnare och applets
GUI (forts) Objektorienterad programmering med Java Swing: Händelser, lyssnare och applets Sven-Olof Nyström Uppsala Universitet 18 mars 2005 Skansholm: Kapitel 6 Användaren kan kommunicera med programmet
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 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 merWindows Forms Winstrand Development
2013-01-23 1 Winstrand Development Användargränssnitt Hittills har vi skapat program för kommandoraden. Den bakomliggande koden fungerar som den ska, men vi upptäcker snabbt att programmen är begränsade
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 merViktigt! Glöm inte att skriva tentamenskod på alla blad du lämnar in.
Interaktionsdesign Provmoment: Ladokkod: Tentamen ges för: TEN 21ID2B SV16 7,5 högskolepoäng Tentamenskod: Tentamensdatum: 30 maj 2017 Tid: 9-13 Hjälpmedel: Färgpennor är tillåtna. Totalt antal poäng på
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 merInnehållsförteckning
Innehållsförteckning Tillgänglighet i praktiken Hur skapar man tillgänglighetsanpassade dokument? Hur gör vi då? Dagens mål Tillgänglighet i det dagliga arbetet en arbetsprocess Hur får vi skribenten medveten
Läs merGrafiska användargränssnitt i Java
TDDD78, TDDE30, 729A85 jonas.kvarnstrom@liu.se 2018 Grafiska användargränssnitt i Java En genomgång av de viktigaste begreppen Alternativ 2 Från början fanns AWT, Abstract Window Toolkit Stora delar har
Läs merDesign av användargränssnitt. Vad behöver man veta? Generella designprinciper. Vad är ett användargränssnitt? Några egenskaper hos människan
Design av användargränssnitt Vad är ett bra användargränssnitt? Vad påverkar designen? Utvärdering viktig Praktiska råd och tips - Heuristik Exempel på bra och mindre bra design Några egenskaper hos människan
Läs merObjektorienterad programmering Föreläsning 2
Objektorienterad programmering Föreläsning 2 Copyright Mahmud Al Hakim mahmud@webacademy.se www.webacademy.se Agenda Inläsning av data via dialogrutor Repetitioner (While-satsen och For-satsen) Nästlade
Läs mer1
www.itpedagogeek.se 1 Innehåll INNAN DU KÖR IGÅNG... 3 DET HÄR ÄR KLASSANTECKNINGSBOKEN... 3 ATT SPARA I ONENOTE... 3 MENYERNA... 3 ANTECKNINGSBOK FÖR KLASSEN... 4 STRUKTUR... 4 BYGG UPP DIN KLASSANTECKNINGSBOK...
Läs merSELLOUT. Version 2.5. eyescream information ab
SELLOUT Version 2.5 av eyescream information ab Detta verk är skyddat av upphovsrättslagen och får ej helt eller delvis mångfaldigas! Sigurdsgatan 6 721 30 VÄSTERÅS 021-14 62 00 Artikelnummer: 5XXX PA9
Läs merExcel kortkommando. Infoga rad, kolumn eller cell Ta bort rad, kolumn eller cell
Excel kortkommando Kommando Allmänt F10 Ctrl + B eller Skift + F5 Ctrl + G Ctrl + H Ctrl + i F1 Ctrl + N Ctrl + O Ctrl + P Ctrl + S F12 eller Alt + F2 Ctrl + W eller Alt + F4 Skift + F1 Skift + F10 Ctrl
Läs merSymprint Snabbstartsguide
Symprint Snabbstartsguide Artikelnummer: 12020, 12021, 12022 v.1 0.10 1 Innehåll Välkommen till SymPrint... 3 Installation av medföljande mjukvara:... 3 Komma igång... 4 Skapa nytt dokument från mall...
Läs merCarl-Oscar Hermansson WEBB DESIGN
Carl-Oscar Hermansson WEBB DESIGN Del SKAPA DIN WEBBPLATS MED HTML. Öppna ett HTML-dokument... 8 6. HTML grundkod... 9 7. Färger... 0 8. Textformatering... 9. Listor... 0 0. Bilder.... Bakgrundsbilder...
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 merProgramutvecklingsprojekt Projektgrupp Elvin. Detailed Design Document
Programutvecklingsprojekt 2003-04-24 Projektgrupp Elvin Detailed Design Document Björn Engdahl Fredrik Dahlström Mats Eriksson Staffan Friberg Thomas Glod Tom Eriksson engdahl@kth.se fd@kth.se d94-mae@nada.kth.se
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 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 merUtveckling av Läsaren
Utveckling av Läsaren Projektet steg för steg Läsaren har utvecklats sucessivt till att bli den anpassningsbara och situationsoberoende tjänst den är idag. Tabellen nedan visar hur utvecklingen har skett
Läs merLaboration: Grunderna i MATLAB
Laboration: Grunderna i MATLAB 25 augusti 2005 Grunderna i MATLAB Vad är MATLAB? MATLAB är ett interaktivt program för vetenskapliga beräkningar. Som användare ger du enkla kommandon och MATLAB levererar
Läs merbehövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.
1 2 3 Grafisk profil reglerar grunddragen i utseendet (logga, färger, typsnitt) en helhet skapas Vi ska känna igen oss, vi ska förstå vad som avsändaren vill kommunicera. Kan vara svårt att direkt applicera
Läs merFöreläsning 10: Gränssnitt och webbdesign
Föreläsning 10: Gränssnitt och webbdesign FSR: 6 Att läsa: Kapitel 6 i Rogers et al.: Interaction Design 1501006 Gränssnitt och webb 2 Översikt Gränssnitt historiskt Kännetecken olika gränssnitt Designutmaningar
Läs merSymmetry: Bortsett från menyn har innehållet av sidan viss symmetri när det kommer till videoklippen som är upplagda på sidan.
WorkShop II Checklistor 1.2 Överordnad Struktur Balance: Gränssnittet har just nu viss balans i innehållet, men menyn behöver justeras i förhållande med innehållet samt en fast container för innehållet
Läs merGrafiska användargränssnitt i Java
jonas.kvarnstrom@liu.se 2017 Grafiska användargränssnitt i Java En genomgång av de viktigaste begreppen Alternativ 2 Från början fanns AWT, Abstract Window Toolkit Till stor del ersatt av Swing: Mer omfattande,
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 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 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 merCREATING VALUE BY SHARING KNOWLEDGE
CREATING VALUE BY SHARING KNOWLEDGE PROJEKTLEDNING 101 Nidzara Dellien, Lund September 2017 PROJEKT En formell definition på projekt är följande (enligt Wikipedia): En temporär satsning för att framställa
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 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 merWebbutveckling Laboration 1: HTML5 och CSS3.
Institutionen för 2015-11-30 Tillämpad fysik och elektronik Karin Fahlquist Webbutveckling Laboration 1: HTML5 och CSS3. Målsättning Att skapa en webbplats genom att först skapa en Lo-fi prototyp och sedan
Läs mer