Interaktion och navigation. Informationsstruktur. Puff, sök och browsa 6. Informationsstruktur

HTML
DOWNLOAD

Storlek: px

Starta visningen från sidan:

Download "Interaktion och navigation. Informationsstruktur. Puff, sök och browsa 6. Informationsstruktur"

Ola Arne Eriksson
för 8 år sedan
Visningar:

1 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 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

2 Nyhetsström Bildhanterare Kanvas och palett ce4b f3f16/ /setupassistant1.jpg Wizard 10 Alternativa vyer 11 Navigation

3 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) Nav och ekrar Helt sammankopplad Flera nivåer Stegvis

4 19 Modal panel 20 Pyramid Tydliga ingångar 21 Menysida 22 Nödlucka 23 Stor meny 24

5 Länkstig (brödsmulor) 25 Animerad övergång Visuell hierarki Layout Densitet Bakgrundsfärg Position Storlek Rytm 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

6 Visuellt ramverk 31 I blickpunkten (center stage) 32 Rutnät med gelikar 33 Namngivna avdelningar Moduler i flikar 35 Dragspel 36

7 Hopfällbara paneler 37 Flyttbara paneler Höger vänster-justering 39 Diagonal balans 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

8 43 Välja i två paneler 44 En listas egenskaper Längd Ordning Gruppering Objekttyp Interaktion Dynamiskt beteende authenticjobs.com Borra ned sig i ett fönster 45 Rutnät med miniatyrer Karusell Kaskadlistor s=books&ie=utf8&qid= &sr=1-1&keywords=this+is+service+design+thinking

9 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

10 Inmatning 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

11 Mobil 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 Vertikal stack 65 Filmremsa 66

12 Pekverktyg 67 Botten-navi Miniatyr-och-text-lista 69 Oändlig lista 70 Informationsstruktur Navigation Layout Listor Handlingar Inmatning

Relevanta dokument

Layout och Navigation

Layout och Navigation Layout 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,