Grafisk formgivning. Gränssnittet utformning skall på ett naturligt sätt stödja användarens interaktion mot programsystemet

Transkript

1 1-1 Grafisk formgivning Gränssnittet utformning skall på ett naturligt sätt stödja användarens interaktion mot programsystemet Komponenter måste utformas och användas på ett konsekvent och enhetligt sätt. Låt funktionaliteten styra valet av komponent. Användaren skall medverka i utformningen av gränssnittet Enkelhet, försök att efterlikna verkligheten så mycket som möjligt 1-2 Prototyp, del 1 Allmänt» 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 utformningen av prototypen» Det är viktigt att man gör upp i förväg med slutanvändaren, hur mycket tid som hon ska avsätta för deltagande vid utformning, testning och utvärdering av prototypen Syftet med 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 1-3 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 centreringar eller dylikt 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 Dialogmodellering 1-4 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

3 Exempel på en dialogmodell 1-5 Start Till dialogmod. kunder Meny Skriv ut aktiviteter Registrera kundaktivitet Utskrift Kundaktiviteter Reg. kund Reg. kund Skriv ut en kunds aktiviteter Kund Reg. aktivitet Kundaktivitet Sök kund Sök kund Sökdialog kunder Visa kundstatistik Kundstatistik Dialogmodellens symboler 1-6 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 Start av en dialog» Markerar ingången i en dialogmodell Utgång till annan dialogmodell Till Dialognamn» Används för att markera att det går att navigera till en annan dialogmodell

4 1-7 Tillämpningsfönster Det är det vanligaste fönstret Endast ett exemplar av fönstret kan vara öppet 1-8 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, men endast ett kan vara aktivt

5 1-9 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 1-10 Varaktig, icke modal, dialogruta En varaktig dialogruta låser inte tillämpningsfönstren Fungerar ofta som ett tillfälligt extra fönster, kan även användas för att visa paletter, verktygslådor, lösa menyer och så vidare

6 Dialogmodell specifikation 1-11 Beskrivning» Beskriver dialogen Namn på» Dialogmodellen» Systemet» Rutiner eller användningsfall Varifrån dialogen initieras Fönstrens» Namn» Fönstertyp» Beskrivning / Syfte Avancerad dialogmodellering 1-12 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

7 Exempel på dialogmodell, NotisBlocket 1-13 Start HuvudDialog ListDialog Dialogmodell specifikation, exempel NotisBlocket 1-14 Dialogmodell specifikation Beskrivning Syftet är att hantera notiser. Det ska gå att skapa, söka, radera notiser. Notisernas rubriker ska gå att visa i en icke modal dialogruta. Dialogmodellens namn: NotisBlocket Ingår i systemet: NotisBlocket Användningsfall: Skapa, söka, radera och lista dialoger Initieras från: Operativsystemets skrivbord eller startmeny Fönster som ingår i dialogmodellen Namn Fönstertyp Beskrivning/Syfte HuvudDialog Tillämpningsfönster Startfönstret, det gå att skapa, söka och radera notiser ListDialog Icke modal dialogruta Listar alla notisers rubriker, uppdateras automatiskt

8 1-15 Tillämpniningsfönster,, del 1 Allmänt» Tillämpningsfönster kan ses som ett huvudfönster.» Till detta fönster kan andra fönster kopplas såsom dialogrutor» Det kan förekomma flera tillämpningsfönster, men endast ett kan vara aktivt. Riktlinjer» När ett fönster öppnas skall det placeras i det övre vänstra hörnet» Ett fönster skall inte vara större än nödvändigt» Öppnas flera fönster så ska de läggas omlott så att samtliga fönster syns Fallgropar» Tänk på hur olika skärmstorlekar inverkar på fönstret» Det kan bli svårt att hitta ett fönster bland många andra fönster. Detta kan lösas med en meny för val av fönster Tillämpniningsfönster,, del Stängningsruta» Om stängningsrutan användas för fönster som uppdaterar data, så måste användaren få möjlighet att spara data innan fönstret stängs! Titelrad» Titelraden utgör rubrik för fönstret. Den skall förklara fönstrets funktion» Titeln bör vara unik för fönstret

9 1-17 Varaktig, modeless, dialogruta Funktion» En varaktig, modeless, dialogruta är inte låsande, applikationen är tillgänglig trots att den visas.» Dialogrutan kan kan användas som ett tilläggsfönster som utnyttjas vid behov. Riktlinjer» Om tillämpningsfönstret som öppnade dialogrutan stängs så ska även dialogrutan stängas.» Det ska gå att flytta dialogrutan» Om användaren har en dialogruta öppen så ska han inte kunna öppna en till likadan Fallgropar» För många öppna dialogrutor kan göra det svårt att hitta... Tillfällig, modal, dialogruta 1-18 Funktion» En tillfällig, modal, dialogruta är låsande och måste stängas innan applikationen blir tillgänglig igen.» Dialogrutan kan ge användaren information, och fråga om information.» Dialogrutan ska användas när applikationen behöver kompletterande information från användaren Riktlinjer» En avbryt-knapp skall alltid finnas på en dialogruta» En dialogruta bör alltid placeras så att den går att hänföra till det aktiva fönstret» Undvik att använda flera tillfälliga dialogrutor samtidigt Fallgropar» Öppna inte ytterligare en tillfällig dialogruta från en tillfällig dialogruta

10 1-19 Meddelanderutor Allmänt» Det finns tre olika typer av meddelanderutor Informationsruta Varningsruta Felmeddelanderuta Riktlinjer» Meddelanderutor måste avslutas innan det är möjligt att göra något annat» Informations- och felmeddelanderutor avslutas alltid med OK» Varningsrutor skall kunna godkännas eller avbrytas» Alla meddelanderutor bör följa gränssnittets standard» Felmeddelanden ska vara tydliga och beskriva felet, orsaken och utvägar» Skall placeras mitt i det fönster som meddelandet avser Fallgropar» Felmeddelanden som inte anger någon lösning eller utväg skall undvikas 1-20 Synas eller inte synas En komponent som inte för tillfället inte är användbar kan döljas eller tonas ner. Att dölja komponenten» Om man döljer den så kanske användaren inte får klart för sig att det normalt finns en sådan komponent.» Tekniken är bra om flera olika komponenter ska använda samma yta Att tona ner» En nedtonad komponent visar att det fortfarande saknas data.» Nackdelen är att användaren inte får någon ledtråd om vilka data som saknas Visa en meddelanderuta» Användaren får information om vad som saknas» Det kan bli jobbigt med allt för många meddelanderutor som poppar upp.

11 1-21 Metaforer och magiska effekter Metaforer är bilder från verkligheten som används för att tydliggöra en funktionalitet i gränssnittet. En bra metafor tjänar flera syften» Användaren förstår intuitivt syftet med tillämpningen» Användaren lär sig snabbt hur hur tillämpningen fungerar» Användaren kommer lätt ihåg metaforen och känner lätt igen den Magiska effekter» En del metaforer överträffar verkligheten. Till exempel en dokumentmapp som aldrig blir full är en metafor med magisk effekt Färger Färg är effektiv egenskap i grafiska gränssnitt» Med färg kan man betona delar i en information» Färg ger ytterligare en dimension att uttrycka data i, t ex i diagram» Återger foton och bilder på ett riktigt sätt» Ökar förmågan för användaren att minnas viktiga detaljer Olika färger associeras ofta med:» Rött Fara, fel, stanna, värme, minussaldo» Blått Kallt, vatten, rent, kliniskt» Grönt Rätt, OK, kör på, miljövänligt, trygghet» Gult Varning, förändring, sakta

12 1-23 Färger - riktlinjer Utveckla först tillämpningen fungerar i svart-vitt, lägg till färger därefter Använd maximalt sex färger i en applikation. Om den inte används så ofta så begränsa färgerna till fyra. Var konsekvent i användningen av färger! Välj nyanser med omdöme, Använd starka, grälla färger för att påkalla uppmärksamhet men lugna harmoniska färger för bakgrunder Använd inte blå färg på små ytor, såsom linjer eller text Ögat uppfattar lättare grönt och rött i mitten och gult, svart och vitt i periferin Använd bara färg på själva tillämpningen och ej på menyer, ramar, listrutor eller andra standardkomponenter Färger - fallgropar Att ständigt använda starka och grälla färger gör att användaren blir avtrubbad - Färgförgiftning! Många användare är färgblinda, svårast är oftast att skilja på färgerna rött, grönt och grått, använd därför också en en annan typ av markering för det du vill visa med en färg 1-24 Tänk på att vissa bildskärmar och de flesta skrivare endast kan återge grå nyanser, vad händer med de effekter som färgerna uttrycker? Var försiktig med färgsättning, det är lätt att åstadkomma veritabla julgranar!

13 1-25 Att vara konsekvent Var konsekvent och utforma alla dialoger på lika sätt Det är viktigt att dialogerna ser ut som användaren förväntar sig Man tröttnar snabbt på applikationer med allt för häftigt utseende Skapa i ett tidigt skede mallar för fönster och kom överens om terminologi Beteendet i dialogerna bör vara så lika som möjligt Använd ett konsekvent språkbruk Bestäm standardplacering av knappar och menyers ordning Sök det enkla! I längden uppskattar användaren en estetiskt tilltalande applikation före en med många specialeffekter 1-26 Användarens checklista Stöder gränssnittets funktionalitet effektivt arbete? Används en riktig terminologi? Är dialogerna utformade på bra sätt, är det lagom med information? Är det rätt ordning på inmatningsfälten? Är fönstren utformade på ett enhetligt sätt? Används färger och grafiska symboler på ett tilltalande sätt? Är svarstiderna acceptabla? Är tillämpningen användarvänlig? Är handböckerna lättlästa och uppbyggda på ett bra sätt? Finns det hjälp inbyggt i tillämpningen? Är felmeddelanden instruktiva och konstruktiva? Kan den utrustning som är önskvärd användas? Är det här den applikation som vi ville ha? Är det den här applikationen som vi fortfarande vill ha? Är det rätt ambitionsnivå?