Interaktion och navigation Mattias Arvola Informationsstruktur Navigation Layout Listor Handlingar Inmatning Mobil 3 Baserad på kap 2-6, 8, och 10 i Tidwells bok Designing Interfaces, 2:a upplagan (O Reilly, 2011). Informationsstruktur 5 Puff, sök och browsa 6 http://www.naturkompaniet.se Informationsstruktur 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
Nyhetsström 7 8 http://www.corren.se/nyheter/ https://www.flickr.com/explore Bildhanterare https://www.draw.io Kanvas och palett 9 https://static1.squarespace.com/static/52cf190ce4b05933e864f776/t/ 5305410ce4b09336654f3f16/1392853260596/setupassistant1.jpg Wizard 10 https://www.google.se/maps Alternativa vyer 11 Navigation
13 14 Navigation 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 Global navigation Bra-att-ha-navigation (utility navigation) Associativ navigation (inline navigation) 15 16 Nav och ekrar Helt sammankopplad 17 18 Flera nivåer Stegvis
https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html 19 Modal panel 20 Pyramid http://www.apple.com/se/ipad/ Tydliga ingångar 21 http://www.moma.org/explore Menysida 22 https://www.sj.se Nödlucka 23 https://www.dustinhome.se Stor meny 24
https://liu.se/utbildning/program/kognitionsvetenskap?l=sv Länkstig (brödsmulor) 25 https://dribbble.com/shots/1209082-vk-concept-for-ios7 Animerad övergång 26 28 Visuell hierarki Layout Densitet Bakgrundsfärg Position Storlek Rytm 29 30 Relationer mellan saker Närhetsprincipen Likhetsprincipen Kontinuitetsprincipen Av-/omslutning (closure) Visuellt flöde Implicerade linjer att följa Uppmaningar till handlingar I flödet Utanför flödet
http://www.mercedes-benz.se Visuellt ramverk 31 https://www.openstreetmap.org/#map=12/67.1564/20.6708 I blickpunkten (center stage) 32 http://www.svtplay.se/program Rutnät med gelikar 33 https://www.forsakringskassan.se Namngivna avdelningar 34 http://www.linkoping.se/bygga-bo-och-miljo/ http://www.linkoping.se/bygga-bo-och-miljo/ Moduler i flikar 35 Dragspel 36
http://kartor.eniro.se Hopfällbara paneler 37 https://my.yahoo.com Flyttbara paneler 38 https://developer.apple.com/library/content/documentation/userexperience/conceptual/osxhiguidelines/windowdialogs.html https://developer.apple.com/library/content/documentation/userexperience/conceptual/osxhiguidelines/windowdialogs.html Höger vänster-justering 39 Diagonal balans 40 42 Olika användningsfall för listor Listor 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
43 Välja i två paneler 44 En listas egenskaper Längd Ordning Gruppering Objekttyp Interaktion Dynamiskt beteende authenticjobs.com http://cdon.se/spel/topplistor/ Borra ned sig i ett fönster 45 Rutnät med miniatyrer 46 47 48 Karusell Kaskadlistor 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
49 Trädtabell Handlingar 51 Hur erbjuder gränssnittet handlingar? 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 57 58 Principer för att designa formulär 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 Att välja kontroller Utrymme Användarens datorvana Användarens domänkunskap Förväntningar utifrån andra applikationer Teknisk plattform 59 Kontroller Se vilka som finns tillgängliga i plattformens gränssnittsriktlinjer: ios Android Windows MacOS
Mobil 63 64 Utmaningar för mobila plattformar 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 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 https://dribbble.com/shots/1700136-swipe-tutorial-animation Vertikal stack 65 www.facebook.com Filmremsa 66
https://vimeo.com/62664233 Pekverktyg 67 http://www.moma.org Botten-navi 68 https://news.google.se/ www.facebook.com Miniatyr-och-text-lista 69 Oändlig lista 70 Informationsstruktur Navigation Layout Listor Handlingar Inmatning Mobil @mattiasarvola mattias.arvola@liu.se www.liu.se