Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
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