Grafisk formgivning. Användarens checklista

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 Användarens checklista Stöder gränssnittets funktionalitet effektivt arbete? Används en riktig terminologi? Är dialogerna utformade på bra sätt, är det lagomt 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 uppbygda 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 forfarande vill ha? Är det rätt ambitionsnivå?

2 1-3 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 1-4 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

3 1-5 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å skä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-6 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!

4 1-7 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 forfarande 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. 1-8 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

5 1-9 Registervård Två vanliga förhållanden vid registervård är» Ett - till - ett - förhållande» Ett - till - många - förhållande Ett - till - ett - förhållande» Vanliga funktioner är: Lägg till, en post till infogas i registret Ändra, en post ändras ta bort, en post tas bort Ett - till - många - förhållande» Detta förhållande beskriver någon typ av samhörighet mellan en post och flera andra poster Urval i tabeller En tabell kan innehålla väldigt många poster. Därför krävs det ofta någon typ av selektering av intressanta poster. En sådan selektering kan resultera i ett stort antal poster, för stort för att det ska vara överblickbart Därför bör det finnas möjlighet för användaren att undersöka hur många poster som uppfyller ett visst sökvillkor innan överföreningen av data sker.

6 1-11 Några typer av komponenter Fönster» Tillämpningsfönster, tillfälliga och varaktiga dialogrutor, meddelanderutor, paneler Komponenter avsedda för hantering av tecken» Olika typer av textfält, kombinationsrutor Komponenter avsedda för val av tillstånd» Radioknappar, kryssrutor, popupmenyer, listrutor, menyer, bläddringsknappar, skjutreglage Komponenter som enbart initierar händelser» Knappar Passiva komponenter som inte sänder iväg händelser» Labels, förloppsindikatorer, olika typer av pekare 1-12 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.» När ett fönster öppnas skall det paceras 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» 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

7 1-13 Tillämpniningsfönster,, del 2 Stängningsruta» Om stängsrutan användas för fönster som uppdaterar data skall användaren ges 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 1-14 Tillfällig, modal, dialogruta 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» 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» Öppna inte ytterligare en tillfällig dialogruta från en tillfällig dialogruta

8 1-15 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.» 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 dialoguta öppen så ska han inte kunna öppna en till likadan» För många öppna dialogrutor kan göra det svårt att hitta... Meddelanderuta 1-16 Allmänt» Det finns tre olika typer av meddelanderutor Informationsruta Varningsruta Felmeddelanderuta» 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» Felmeddelanden som inte anger någon lösning eller utväg skall undvikas

9 1-17 Knappar Allmänt» En knapp kan endast sända iväg en händelse. Standard» Det är viktigt att bestämma vilka standardknappar som ska finnas, t ex OK och ÅNGRA» Ibland så kan det vara lämpligare med menykommandon eller en kombination av menykommandon och knappar» En knapps namn ska helst bestå av ett verb som beskriver knappens funktionalitet» Den mest relevanta knappen längst ner och längst ut till höger» När en knapp inte har någon funktionalitet ska den vara nedtonad» Knappen i fokus ska ha en ram runt om sig, ska vara den som normalt ska väljas» Och så vidare,... se sidan 36 i boken Grafiska användargränssnitt Textfält 1-18 Allmänt» Ett textfält är en komponent avsedd för att registrera och visa text Funktion» Texten i ett textfält ska kunna bearbetas med ett flertal funktioner såsom klipp och klistra, markera, redigera och andra funktioner som är giltiga för användargränssnittet» Proportionella typsnitt (t ex Helvetica) påverkar längden på den inmatade texten» Textfält som är längre än vad som visas, bör ha rullningslist» Det ska gå att förflytta sig mellan olika textfält med hjälp av mus eller tabulatortangent» Tänk på att åskådliggöra inmatningsordningen» Textpekare ska användas då pekaren befinner sig i textläge» Och så vidare,... se sidan 48 i boken Grafiska användargränssnitt