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 av?» Fönster och menyutformning - Hur ska fönstren utformas? Design» Hur ska programmet anpassas till utvecklingsmiljö, mjuk- och hårdvara?» Dialoger - utformning av prototyper Programmering Testning av programmet - klarar det uppställda krav 2-2 Dialogmodellering Dialogmodellen» Dialogmodellen syftar till att beskriva hur olika fönster hör ihop» Beskrivningen görs på fönsternivå» Dialogmodelleringen bör ske i seminarieform tillsammans med både användare och programutvecklare» Till dialogmodellen hör en modell-specifikation» Dialogmodell och modell-specifikation används som underlag när fönsterutformningen görs
2-3 En dialogmodell Start Meny Utskrift kund-aktiviteter Till Dialogmodell Kunder Registrera kund Kundaktivitet Sök kund Kundstatistik 2-4 Navigerings- och meddelandelinjer, start av en dialog, utgång till en annan dialogmodell Navigeringslinje» En navigeringslinje anger vilka andra fönster som användaren kan öppna från ett fönster. Meddelandelinje» En meddelandelinje används för att visa beroende mellan olika fönster Start av en dialog Start» Markerar ingången i en dialogmodell Utgång till annan dialogmodell Till» Används för att markera att det går att navigera till en annan dialogmodell
2-5 Tillämpningsfönster Det är det vanligaste fönstret Endast ett exemplar av fönstret kan vara öppet 2-6 Multipla tillämpningsfönster Ett multipelt tillämpningsfönster har samma egenskaper som ett tillämpningsfönster Det kan finnas flera sådana fönster samtidigt på skärmen
2-7 Tillfällig, modal, dialogruta När en tillfällig dialogruta är aktiv så kan inte användaren aktivera ett annat fönster Används ofta för att fråga om kompletterande information 2-8 Varaktig, icke modal, dialogruta En varaktig dialogruta låser inte tillämpningsföntren Fungerar ofta som ett tillfälligt extra fönster, kan även användas för att visa paletter, verktygslåder, lösa menyer och så vidare.
2-9 Dialogmodell specifikation Beskrivning» Beskriver dialogen Namn på» Dialogmodell» System» Rutin eller användarfall Varifrån dialogen initieras Fönstrens» namn» fönstertyp» Beskrivning / syfte 2-10 Dialogmodell specifikation
2-11 Avancerad dialogmodellering Meddelande till en annan tillämpning Kundaktivitet Excel Meddelande till en annan tillämpning fönstret kan öppnas Kundaktivitet Excel Meddelande till och från en annan tillämpning, den andra tillämpningen öppnar inte något fönster Kundaktivitet Excel Meddelande till den egna tillämpningen Kundaktivitet 2-12 Fönster- och menyutformning Detta arbetssteg syftar till att utforma de olika fönster som skall ingå i tillämpningen Utformningen av fönster och menyer dokumenteras i Fönster och komponentspecifikation samt menyspecifikation Börja alltid med att bestämma vilka standarder och mallar som skall användas. Har programmeringsverktyg valts får dess möjligheter och begränsningar vägas in
Checklista före fönster- och menyutformning 2-13 Är ambitionsnivå bestämd? Är dialogmodeller förankrade och godkända? Är Style Guide bestämd? Är knapparnas placering bestämd? Är egna symboler (ikoner) definierade? Är registerhanteringstekniken bestämd (nyupplägg, ändringar, borttag)? är en standard bestämd för sökdialoger? Finns standard för användning av färg, felmeddelanden och utseenden på bakgrunden? Är det bestämt vilka dialoger som skall ingå i prototypen? Är dialogmodelleringen gjord? Är fönstermallar gjorda? 2-14 Menyutformning En meny består av menyrubrik, menykommandon och undermenyer Undvik att ha allt för många undernivåer i ett menyträd Välj lämpliga kortkommandon
2-15 Menyspecifikation 2-16 Fönster och komponentspecifikation Indata» Beskrivning indata Fönster/Dialog» Fönsternamn» Program eller system» Rutin eller användarfall Utdata» Beskrivning av utdata Beskrivning av fönstret Fönstertyp Komponenter» Komponentens namn» Typ av komponent» Beskrivning av komponenten
2-17 Fönster och komponentspecifikation 2-18 Prototyp, del 1» Innan kodningen av programmet påbörjas, bör en prototyp utvecklas» En prototyp är en modell av det tänkta programmet» Fördelen med en prototyp är att användarna, beställarna och andra intressenter kan få en uppfattning av hur den slutgiltiga lösningen kommer att gestalta sig i ett tidigt skede» En prototyp är ett enkelt sätt att stämma av lösningsförslaget Slutanvändarens roll» Det är viktigt att slutanvändarna är med vid utformning av prototypen» Det är viktigt att man gör upp i förväg med slutanvändaren, hur mycket tid som hon skall avsätta för deltagande vid utformning, testning och utvärdering av prototypen Syftet med en prototyp» Få bekräftelse att fönster och dialoger är riktiga och innehåller rätt information» Testa om gränssnittet är lätt att använda» Kontrollera att rätt terminologi används» Utvärdera lösningen
2-19 Prototyp, del 2 Omfattningen på en prototyp» Överarbeta inte prototypen! Det kan handla om något så enkelt som att användargränssnittet representeras av papperslappar och utvecklaren agerar dator.» Det viktiga är att på ett tidigt stadium få återkoppling från användarna, revidera prototypen, utvärdera igen, och så vidare.» Det kan vara en poäng att inte ha allt för avancerade prototyper. Användaren har lättare att komma med invändningar mot en modell som inte känns färdig Invändningarna riskerar inte att fastna i detaljer om knappars centrering eller dyligt Synpunkterna kommer styras mot hur gränssnittet ska utformas för att ge användaren ett bra stöd vid sitt arbete» Det är viktigt att klargöra för samtliga intressenter vad syftet med prototypen är. Radioknapp 2-20» Radioknappar är en grupp av två eller flera knappar för en viss inställning. Endast en knapp i gruppen kan vara aktiverad. En händelse bör inte initieras av att en radioknapp aktiveras.» Riktlinjer» Använd aldrig fler än 6 radioknappar i en grupp» Det mest troliga valet ska vara förinställt» Om ingen av radioknapparna behöver välja så ska en knapp läggas till med t ex Inget» Om valet av radioknapp är irrelevant så ska hela gruppen nedtonas» Radioknapparna ska placeras rad- eller kolumnvis så att de bildar en tydlig grupp» Texten skall alltid vara till höger om knappen» Knappens text skall alltid börja med en versal och texten får inte avslutas med en punkt» Undvik meningar, använd ord» Radioknappar är utrymmeskrävande och kan göra dialogen rörig» En grupp radioknappar bör vara statisk. Om man dynamiskt vill lägga till eller ta bort alternativ så är listruta, popupmeny eller kombinationsruta bättre att använda.
2-21 Kryssruta» Kryssrutor används för att markera om något är falskt eller sant (av eller på)» En händelse bör inte initieras till följd av att en kryssruta markeras Funktion» Kan användas i grupp eller fristående» Varje ruta kan vara på eller av» Använd aldrig fler än 8 kryssrutor i en grupp» Det mest troliga valet skall vara förinställt» Tona ner en kryssruta om valet är irrelevant» Lägg kryssrutorna rad- eller kolumnvis så att de bildar en tydlig grupp» Texten ska alltid placeras till höger om rutan» När en kryssruta ändras får ingen annan kryssruta förändras» Knappens text skall alltid börja med en versal och texten får inte avslutas med en punkt» Undvik att använda meningar» En grupp av textrutor bör vara statisk Popupmeny 2-22» En popupmeny är en rullgardin med ett antal val. Endast ett val kan göras. I jämförelse med radioknappar och listrutor spar popupmenyn plats på skärmen. En popupmeny ska ha en rubrik som förklarar innebörden av popupmenyn» Det valda värdet ska alltid vara markerat» Popupmenyer bör inte ha undermenyer» Max 20 stycken val per popupmeny» Ett val ska vara alltid vara förinställt» Om inget relevant val kan finnas bör valet Inget finnas med i menyn» Endast de för stunden relevanta val bör visas» Valen på popupmenyn bör vara sorterade på lämpligt sätt» Tänk på att valen kan bli för många om de hämtas dynamiskt från en lista» Användaren måste aktivera popupmenyn för att se valbara allternativ
2-23 Listruta» Listrutor används för att markera en eller flera rader i en lista» En listrutas storlek skall vara statisk» Om alla rader syns i en listruta inaktiveras rullningslisten» Bestäm om det skall gå att markera en eller flera rader i en listruta» Listrutor tar plats. Skall endast ett val väljas kan kombinationsruta vara ett alternativ Kombinationsruta 2-24» Kombinationsruta är en kombination av ett textfält och en listruta Funktion» Det finns olika varianter av kombinationsrutor. Själva fältet kan vara låst eller inmatningsbart» Valen i listan skall vara sorterade i lämplig ordning» Om antal val är få och textfältet är låst är ofta en popupmeny ett bättre val» Kombinationsruta som ska fällas ner döljer information för användaren men spar plats.
2-25 Menyer, del 1» En meny har alltid en rubrik. När denna aktiveras visas vilka valmöjligheter som finns. Val kan vara kommandon, inställningar, val av dokument/fönster etc.» Menykommandon är ofta verb eller adjektiv.» De menyrubriker som är standard för aktuellt gränssnitt skall alltid finnas med i tillämpningen» Gruppera de val som hör ihop och avgränsa grupperna med linjer» Det ska alltid framgå om kortkommando finns» Menykommandon som leder till en undermeny markeras med 4» Menykommandon som kräver komplettering markeras med Menyer, del 2 2-26» De vanligaste menyvalen skall placeras överst på menyn» Menyer skall alltid finnas kvar på menyraden även om de inte är aktuella för tillfället» Vissa menyval är standard för det aktuella gränssnittet. Är dessa val irrelevanta kan de tas bort» Bokstäver för kortkommandon, som är reserverade i det aktuella gränssnittet, får ej användas» Varje val skall inledas med en versal och inte sluta på punkt» Ett menyval bör inte ha mer än en undermeny» En meny skall innehålla minst 2 val och maximalt 15» Namnet på menyn skall bestå av ett ord. Det sk börja med en versal. Ingen punkt» Menyval skall placeras i följande ordning: Arkiv, Redigera, Visa, x, y och Hjälp» Egna menyval för tillämpningen kan läggas under gränssnittets egna menyrubriker. T ex Rensa under Redigera-menyn» Om det finns en knapp med samma text som ett menykommando så ska samma funktion utföras» Menyer bör användas i stället för knappar om programmet skall användas av erfarna användare
2-27 Förloppsindikator» En förloppsindikator används för att visa hur långt en process har kommit» Den används när användaren måste vänta» Använd en förloppsindikator om en process, tar mer än 5 sekunder» En knapp märkt Stopp kan användas för att kunna avbryta operationen» Det är viktigt att förloppsindikatorn ger en riktig bild om hur stor del som är kvar av förloppet» Om en process tar mindre än 5 sekunder bör man inte använda en förloppsindikator utan i stället ett timglas, en klocka eller dylikt Symboler / Ikoner 2-28» Symboler används för att de säger mer än text och tar mindre utrymme» Det är viktigt att en symbol verkligen beskriver det som den är ämnad för» När användaren klickar på symbolen bör den inverteras, så att det syns att den är vald» Ibland används obegripliga symboler. Detta är mer förvillande än till nytta» Symboler får inte bli ett självändamål» I många fall kan det vara bättre med en text än med en symbol
2-29 Pekare» Det är väsentligt vilken typ av pekare som används» Beroende på tillämpning och läge på skärmen kan pekaren ha olika utformning» Om tvekar inför valet av pekare bör standardpekaren (pilen) användas» Tvetydiga pekare bör undvikas» Man bör vara konsekvent vid användandet av olika pekare» Endast undantagsvis får pekaren förflyttas på skärmen av något annat än användaren» Det är pilspetsen som är pekarens exakta position» Klocka eller timglas bör användas när användaren väntar på att en funktion skall slutföras» Undvik att hitta på egna pekare