Interaktion och Informationsstruktur navigation729G44/assignment2/fo5-intnav-GD...Interaktion och navigation Mattias Arvola Informationsstruktur Navigation Layout Listor Handlingar

InteraktionochnavigationMattiasArvola

InformationsstrukturNavigationLayoutListor

HandlingarInmatningMobil

3

• Baserad på kap 2-6, 8, och 10 i Tidwells bok Designing Interfaces, 2:a upplagan (O’Reilly, 2011).

Informationsstruktur

Informationsstruktur

5

• Informationsarkitektur – konsten att organisera en informationsrymd

• Styra användaren till den del som uppfyller deras mål • Enskilda sidor eller skärmbilder gör något av detta:

• Visar en enda sak • Visar en mängd av saker • Erbjuder verktyg för att skapa något • Stödjer en uppgift

Puff,sökochbrowsa 6

http://www.naturkompaniet.se

Nyhetsström 7

http://www.corren.se/nyheter/

Bildhanterare

8

https://www.flickr.com/explore

Kanvasochpalett 9

https://www.draw.io https://static1.squarespace.com/static/52cf190ce4b05933e864f776/t/5305410ce4b09336654f3f16/1392853260596/setupassistant1.jpg Wizard 10

https://www.google.se/maps

Alternativavyer 11

Navigation

Navigation

13

• Skyltar (sign posts) hjälper folk att förstå sin direkta omgivning

• Hitta vägen (wayfinding) handlar om att närma sig sitt mål

• Bra skyltning (signage) innebär tydliga och entydiga benämningar, och uppmaningar till handling

• Ledtrådar i omgivningen bygger på konventioner • Kartor ger en mental bild av hela informations- och

handlingsutrymmet

Navigationsmodeller

14

• Global navigation • Bra-att-ha-navigation (utility navigation) • Associativ navigation (inline navigation)

Navochekrar

15

Heltsammankopplad

16

Fleranivåer

17

Stegvis

18

Pyramid

19 Modalpanel 20

https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html

Tydligaingångar 21

http://www.apple.com/se/ipad/

Menysida 22

http://www.moma.org/explore

Nödlucka 23

https://www.sj.se

Stormeny 24

https://www.dustinhome.se

Länkstig(brödsmulor) 25

https://liu.se/utbildning/program/kognitionsvetenskap?l=sv

Animeradövergång 26

https://dribbble.com/shots/1209082-Vk-Concept-for-iOS7

Layout

Visuellhierarki

28

• Densitet • Bakgrundsfärg • Position • Storlek • Rytm

Relationermellansaker

29

• Närhetsprincipen • Likhetsprincipen • Kontinuitetsprincipen • Av-/omslutning (closure)

Visuelltflöde

30

• Implicerade linjer att följa • Uppmaningar till handlingar

• I flödet • Utanför flödet

Visuelltramverk 31

http://www.mercedes-benz.se

Iblickpunkten(centerstage) 32

https://www.openstreetmap.org/#map=12/67.1564/20.6708

Rutnätmedgelikar 33

http://www.svtplay.se/program

Namngivnaavdelningar 34

https://www.forsakringskassan.se

http://www.linkoping.se/bygga-bo-och-miljo/

Moduleriflikar 35 Dragspel 36

http://www.linkoping.se/bygga-bo-och-miljo/

Hopfällbarapaneler 37

http://kartor.eniro.se

Flyttbarapaneler 38

https://my.yahoo.com

Höger–vänster-justering39

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/WindowDialogs.html

Diagonalbalans40

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/WindowDialogs.html

Listor

Olikaanvändningsfallförlistor

42

• Få en översikt • Bläddra objekt för objekt • Söka efter ett visst objekt • Sortera och filtrera • Ändra ordning, lägga till, ta bort, kategorisera om

objekt

Enlistasegenskaper

43

• Längd • Ordning • Gruppering • Objekttyp • Interaktion • Dynamiskt beteende

Väljaitvåpaneler 44

authenticjobs.com

Borranedsigiettfönster 45 Rutnätmedminiatyrer 46

http://cdon.se/spel/topplistor/

Karusell

47

https://www.amazon.co.uk/This-Service-Design-Thinking-Stickdorn/dp/1118156307/ref=sr_1_1?s=books&ie=UTF8&qid=1476637340&sr=1-1&keywords=this+is+service+design+thinking

Kaskadlistor

48

Trädtabell

49

Handlingar

Hurerbjudergränssnittethandlingar?

51

• Knappar • Menylister • Pop-upp-menyer • Nedfällbara menyer • Verktygslister • Länkar

• Handlingspaneler • Hovra över objekt • Dubbel-klicka objekt • Tangentbord • Drag-och-släpp • Skrivna kommandon

Inmatning

Principerförattdesignaformulär

57

• Säkerställ att användaren vet vad den ska göra och varför • Undvik att ställa frågan överhuvudtaget, om du kan

• bra skönsvärden • Kunskap i världen är ofta mer rätt än kunskap i huvudet

• autoifyllning och inmatningstips • Var så förlåtande som möjligt för felaktig inmatning • Se upp för ordagrann översättning från underliggande

programmeringsmodell • Användbarhetstesta • Val av kontroller påverkar vad användaren förväntar sig måste

göra

Attväljakontroller

58

• Utrymme • Användarens datorvana • Användarens domänkunskap • Förväntningar utifrån andra applikationer • Teknisk plattform

Kontroller

59

• Se vilka som finns tillgängliga i plattformens gränssnittsriktlinjer: • iOS • Android • Windows • MacOS

Mobil

Utmaningarförmobilaplattformar

63

• Små skärmar • Olika skärmstorlekar • Pekskärmar • Svårigheter att mata in text • Utmanande fysisk omgivning • Social påverkan och begränsad uppmärksamhet

Designansats

64

• Vad behöver användarna verkligen i den mobila kontexten?

• Kapa ned webbplatsen eller appen till dess kärna • Använd den mobila enhetens hårdvara • Linjera innehållet • Optimera de vanligaste handlingssekvenserna • Reducera scrollning och sidodrag • Reducera antal knack

authenticjobs.com

Vertikalstack 65 Filmremsa 66

https://dribbble.com/shots/1700136-Swipe-Tutorial-Animation

www.facebook.com

Pekverktyg 67

https://vimeo.com/62664233

Botten-navi 68

http://www.moma.org

https://news.google.se/

Miniatyr-och-text-lista 69 Oändliglista 70

www.facebook.com

InformationsstrukturNavigationLayoutListor

HandlingarInmatningMobil

www.liu.se

@[email protected]