Layout och Navigation

Transkript

1 Layout och Navigation

2 Layout

3 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, när man skapar formen ska man sträva efter att skapa flow.

4 Gruppering Vi grupperar saker för att visa att de hör ihop (duuh!) På så vis blir det enklare för användarna att hitta relaterade funktioner Ett exempel är menyer, ett annat grupperingen av ikoner på the ribbon

5 Gruppering Vi kan använda oss av flera olika egenskaper för att visa att saker hör ihop eller är av samma sort vilka då?

6 Gruppering: 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

7 Gruppering: Likhet (similarity) i form, färg, orientering, storlek etc

8 Gruppering: Linjering (continuity) Vi vill forma linjer och kurvor som skapas genom sammanslagning av mindre enheter Kan man hitta linjer blir det snyggare

9 Gruppering: Closure Vi letar efter former och kan fylla i det som saknas. Fullkomligt begriplig text

10 Balans Det finns olika sätt att balansera en sida/skärm Man ska kunna tänka sig att det går en balanslinje någonstans genom layouten Det måste finnas lika mycket grafisk tyngd på ömse sidor om balanslinjen

11 Balans vilket är svårare än man kan tro! Men det finns knep!

12 Balans så det så! Dessa knep för oss omedelbart över till.

13 Alignment & grid Ett grid är helt enkelt ett (osynligt) rutnät som man placerar saker på och alignment (justering) är helt enkelt att försöka linjera saker längs rutnätet

14

15

16 Vikta och gruppera information Att gruppera och skapa flow i hur man läser en sida har mycket med viktning att göra! Du är bjuden till Ayahs stora födelsedagskalas! Kom klädd som du tycker passar bäst för tillfället. Barn och respektive är också välkomna. Vi serverar middag, och tårta senare på kvällen. När: 1 mars, kl Var: Kalles hus. Om du behöver vägbeskrivning så ring gärna och fråga. Meddela om du kan komma eller inte till Kim ( ) senast 1 februari. Välkommen!

17 Du är bjuden till Ayahs stora födelsedagskalas! Barn och respektive är också välkomna. Vi serverar middag, och tårta senare på kvällen. Kom klädd som du tycker passar bäst för tillfället. När: 1 mars, kl Var: Kalles hus. Om du behöver vägbeskrivning så ring gärna och fråga. Meddela om du kan komma eller inte till Kim ( ) senast 1 februari. Välkommen!

18 Du är bjuden på Ayahs stora födelsedagskalas! Barn och respektive är också välkomna. Vi serverar middag, och tårta senare på kvällen. Kom klädd som du tycker passar bäst för tillfället. När: 1 mars, kl Var: Kalles hus. Om du behöver vägbeskrivning, ring! Meddela om du kan komma eller inte till Kim ( ) senast 1 februari. Välkommen!

19 Du är bjuden på Ayahs stora födelsedagskalas! Barn och respektive är också välkomna. Vi serverar middag, och tårta senare på kvällen. Kom klädd som du tycker passar bäst för tillfället. När: 1 mars, kl Var: Kalles hus. Om du behöver vägbeskrivning, ring! Meddela om du kan komma eller inte till Kim ( ) senast 1 februari. Välkommen!

20 Du är bjuden på Ayahs stora födelsedagskalas! Barn och respektive är också välkomna. Vi serverar middag, och tårta senare på kvällen. Kom klädd som du tycker passar bäst för tillfället. När: 1 mars, kl Var: Kalles hus. Om du behöver vägbeskrivning, ring! Meddela om du kan komma eller inte till Kim ( ) senast 1/2. Välkommen!

21 Några principer för viktning och layout Viktigast överst! Och indenterade saker är alltid mindre viktiga och hör ihop med det som det är indenterat under Visual flow är typiskt från övre vänstra hörnet ner till nedre högra Tomrum är viktiga för att ge ögat lite vila, och för att skapa naturliga grupperingar

22 Fokalpunkter/fixpunkter Vissa saker är helt enkelt mer synliga än andra Ha inte för många såna på en sida, då tar de ut varandra

23 Några designmönster (design patterns) Allmänt Nytta Mönster är förslag på fungerande lösningar Måste anpassas efter situationen Kan man många är chansen större att man hittar något lämpligt för en given situation Ger en vokabulär för att diskutera design Studera/reflektera kring program man använder Är beprövade De vi ska prata om nu kommer ur Tidwells bok

24 Visual Framework Att det visualla utseendet (färger, fonter) och layout är någorlunda enhetligt i hela applikationen

25 Visual Framework När Applikationer eller sajter med många olika sidor (typ allt). Man vill att det ska sitta ihop Varför Hur Enhetlig design av varje sida gör att man känner igen sig och inte behöver anstränga sig lika mycket. Skapa en genomgående look-and-feel för alla sidor i applikationen Färger, fonter, stil på text Navigation Layout-grid

26

27 Center stage Att man har det centrala dokumentet i mitten

28 Center Stage Vad När Placera den viktigaste delen i den största delen av fönstret. Placera sekundära verktyg och innehåll runt om. Det finns en huvuduppgift som användaren jobbar med, redigera dokument, utföra en uppgift etc. Varför Led direkt användaren till den viktigaste delen av sidan. Sedan är det enklare att ta in vad som finns runtomkring.

29 Center Stage Hur Center stage-delen bör vara åtminstone dubbelt så bred och hög som något annat. Huvuddelen måste inte vara i mitten, bara den är stor nog

30 Grid of Equals Att man arrangerar liknande element /liknande innehåll i ett rutnät.

31 Grid of Equals

32 Grid of Equals När Sidan innehåller många objekt med liknande innehåll och vikt Varför Hur Rutnät som ger varje objekt samma utrymme understryker att de är likvärdiga. Ser snyggt och prydligt ut Designa varje element. Typiskt inte bara som ren text utan bilder, rubriker etc. Skapa ett rutnät med en eller flera rader

33 Titled Sections Att skapa olika grupper av innehåll genom att förse dem med en visuellt tydliga titel och sen placera alla på samma sida

34 Titled Sections När Det finns en massa innehåll på en sida och man vill göra det tydligare att förstå genom att gruppera det. Varför Hur Tydliga sektioner gör innehållet lättare att ta in. Visuellt tydliga titlar gör det också enklare att snabbt se det viktigaste. Se först till att få rätt indelning och ge dem bra namn. Sen väljer man representation boxar, titlar med särskilda färger, stor font, avgränsning med tomrum

35

36 Module Tabs Att placera innehåll på ett antal kort. Placera dem på varandra så bara ett syns. Använd t ex tabbar för att komma åt de olika delarna.

37 Module Tabs När Det finns för mycket material på en sida och det går att göra en uppdelning där det räcker att se en del åt gången. Varför Hur Uppdelningen i olika kort gör att varje enskilt kort kan göras enkelt att hantera. Tabbar är en vanlig konvention för användarna. Dela upp informationen i lämpliga delar. Se till att man inte måste byta fram & tillbaka. Välj lämpliga namn för varje sektion. Välj en presentation t ex tabbar, vänsterkolumn med val

38

39 Right/Left Alignment Att högerjustera labels i vänsterkolumnen och vänsterjustera objekten i högerkolumnen

40 Right/Left Alignment När Design av något där man har en kolumn med textlabels till vänster som leder till objekt till höger Varför Hur Detta ger en mycket tydligare gruppering än om vänsterkolumnen vänsterjusteras pga närhet (proximity). Skapar också en tydlig linje i mitten (continuity). Oftast tydligare och snyggare. Placera vänster- & högerkolumn nära varandra. Det funkar vanligen att vänsterkanten blir ojämn, Överväg att låta objekten i högerkolumnen vara lika breda,

41

42 Liquid Layout Att anpassa innehållet när sidans storlek ändras så att det tillgängliga utrymmet alltid fylls.

43 Liquid Layout När Närhelst man har en sida man kan tänka sig att man vill ändra storlek på, ofta för att kunna se mer information Varför För de flesta program kan man inte förutsäga hur stor yta de kommer att uppta pga olika fönsterstorlekar, andra fönster på skärmen etc. Därför bör programmet anpassa sig elegant. Hur Fundera ut hur fönstret bör anpassas. I center stage är det t ex lämpligt att huvudytan blir större och annat behåller sin storlek. När ytan blir för liten kan man ha scroll-bars. Java har rätt bra stöd.

44 Navigation

45 Navigation Navigation är (nödvändig) excise Idealet vore att inte ha någon navigation alls men Då kan man inte göra komplexa programvaror Eller hålla sig med komplexa informationsstrukturer Navigation är som att gå in i ett nytt rum Man måste reorientera sig Det hjälper om man varit där förr Det hjälper om där ser ut ungefär som man förväntat sig (coherency)

46 Navigation: att tänka på Ju mindre navigation desto bättre Ha så få fönster som möjligt Ha important tools close at hand Undvik långa navigationskedjor Och tillhandahåll genvägar särskilt tillbaka/hem Försök alltid eliminera onödiga steg

47 Navigationsmodeller Det finns många olika sätt att organisera navigationen Hur kan man till exempel sätta ihop det här?

48 Hub and spoke

49 Hub and spoke (ja, jag vet, det finns andra sätt, men Hub and spoke är den huvudsakliga navigationsstrukturen hos en iphone och dess appar)

50 Fully connected

51 Stepwise

52 Pyramid << Back Home Next >>

53 Multi-Level

54 Flat allt i samma vy

55 och så finns det ett par till men dem får ni kolla själva i Tidwell! Ok, nu har jag en struktur, vad gör jag nu då?

56 Igen: Om design mönster (design patterns) Allmänt Nytta Mönster är förslag på fungerande lösningar Måste anpassas efter situationen Kan man många är chansen större att man hittar något lämpligt för en given situation Ger en vokabulär för att diskutera design Studera/reflektera kring program man använder Är beprövade

57 Global Navigation Att använda en liten del av varje sida/skärm till att visa en uppsättning knappar/länkar som leder till programmets olika delar

58 Global Navigation När När man har ett antal olika avdelningar /sidor/ verktyg /modes och där man kan vilja byta mellan dessa Varför Hur Det ger användaren en översikt och hjälp att utforska. På webben är detta en konvention, men det är även användbart i vanliga gränssnitt. Organisera först upp innehållet. Det får inte finnas för många olika delar. Designa en navigeringspanel som är samma överallt och som finns på samma ställe. Markera var man är nu tydligt.

59 Global Navigation

60 Clear Entry Points Att bara ha några få ingångar till programmet. Dessa är uppgiftsorienterade och tydliga.

61 Clear Entry Points När (Uppgiftsbaserade) program som används sällan. Om uppgiften är uppenbar kan det bara vara ett irriterande extrasteg Varför När man startar ett program kan man mötas av ett komplicerat GUI med massor av möjligheter där det inte är uppenbart vad man ska göra. Hjälp användaren förbi detta steg.

62 Clear Entry Points Hur Visa ett antal tydliga dörrar när programmet startar. Därifrån går man vidare till det man ska göra. Dörrarna kan vara ikoner, text etc, men de ska kunna förstås av förstagångsanvändare

63 Clear Entry Points

64 Sequence-Map Visa på varje sida i en sekvens en karta över alla steg, med markering för var man är nu.

65 Sequence-Map När Man har en applikation där ett antal olika steg ska gås igenom. Navigationen är huvudsakligen linjär. Varför Hur Ge en bild både av vad man klarat av och hur mycket det finns kvar. Ge en känsla av sammanhang. Placera en liten karta nära någon kant (över, under, vänster ) på samma ställe överallt. Visa tydligt var man är nu och vilka delar man redan besökt.

66 Sequence map

67 Breadcrumbs Att visa hela den (hierarkiska) vägen tillbaka till huvudsidan

68 Breadcrumbs När Användarna navigerar runt, vanligen kombinerat med one-window drilldown. Kan kombineras med sökning Varför Hur Hjälper användaren att förstå var han/hon är. Spåret ger en bild av en del av applikationen. Fungerar även om man inte navigerat dit. Placera en sekvens av text eller bilder nära toppen på sidan som visar vägen från toppen till nuvarande sida. Man kan typiskt navigera till vilken sida som helst i sekvensen direkt genom att klicka.

69 Breadcrumbs

70 Exempel

71 Modal Panel Att bara visa en sida och kräva att användaren ska utföra vad det nu är som begärs på den sidan

72 Modal Panel När Programmet är i ett tillstånd där det inte kan fortsätta utan input från användaren I princip aldrig annars! Varför Hur Tvingar användaren att handla Typiskt en panel/dialog ovanpå det vanliga GUI:t. Allt annat blockeras för interaktion. Markera tydligt vägarna ut

73 Modal Panel

74 Modal Panel