Föreläsning 9: Gränssnittsdesign och webbdesign. Rogers et al. Kapitel 6

HTML
DOWNLOAD

Storlek: px

Starta visningen från sidan:

Download "Föreläsning 9: Gränssnittsdesign och webbdesign. Rogers et al. Kapitel 6"

Klara Viklund
för 6 år sedan
Visningar:

1 Föreläsning 9: Gränssnittsdesign och webbdesign Rogers et al. Kapitel 6

2 Paradigm Handlar om en viss ansats inom en grupp På 80-talet designades användarcentrerade applikationer för enskilda användare framför en dator Ett skifte under 90-talet mot virtuell verklighet, multimedia, agentbaserade gränssnitt, ubiquitous computing Att förflytta interaktionsdesignen bort från kontoret medförde nya utmaningar, frågeställningar och intressanta fenomen Interaktionsdesign 2

Typer av gränssnitt 1980-talet: kommandon WIMP/GUI 1990-talet Advancerad grafik (multimedia, virtuell verklighet, informationsvisualisering) Webb

3 Typer av gränssnitt 1980-talet: kommandon WIMP/GUI 1990-talet Advancerad grafik (multimedia, virtuell verklighet, informationsvisualisering) Webb Tal/naturligt språk Penna, gester, pekande 2000-talet mobilitet multimodal gripbar (tangible) förstärkt verklighet wearable computing; robotic Interaktionsdesign 3

4 WIMP/GUI interfaces Xerox Star första WIMP Windows skrollning, dra, överlappning, öppna/stänga, flytta Icons representerade applikationer, objekt, funktionalitet och redskap, åtkomst via klickande Menus listor med möjliga val som skrollas Pointing device (pekdon) en mus som kontrollerar pekaren relaterat till fönster, menyer, ikoner Interaktionsdesign 4

5 GUI grafiskt användargränssnitt Samma element som i WIMPs, men mer varierade färg, 3D, ljud, animering, olika typer av menyer, ikoner, fönster Nya grafiska element verktygsfält, docka, rollovers Interaktionsdesign 5

6 Fönster i gränssnitt För att komma tillrätta med de fysiska begränsningarna med skärmar (som var små). Mer information kan representeras. Rullningslister (scroll bars) I fönster har samma syfte Många fönster öppna kan bli svåröverskådligt. Löses med Listor, ikoner, krympa Interaktionsdesign 6

7 Utmaningar för design Fönsterhantering enkelt röra sig mellan olika fönster Växla uppmärksamhet mellan dem för att hitta den information som behövs utan att bli distraherad Designprinciper för avstånd, gruppering och enkelhet Interaktionsdesign 7

8 Menyer Olika menytyper platta listor, drop-down, pop-up, kontextuell, and expanderande, t.ex., skrollande och överlappande Platta menyer bra för att visa ett litet antal alternativ samtidigt när storleken på displayen är liten, t.ex. ipod Expanderande menyer möjligör fler val flexiblare navigering flera nivåer kräver musprecision, lätt att välja fel Interaktionsdesign 8

9 Kontextuella menyer Ofta använd funktionalitet, men ska vara rimligt i sammanhanget Högerklickning spara, kopiera, öppna osv. Ett sätt att komma tillrätta med navigeringsproblem för överlappande menyer Interaktionsdesign 9

10 Designutmaningar, menyer Vilken terminologi passar bäst? Placering i menyerna Stäng och spara ej i närheten Det finns många riktlinjer kring detta avseende djup/bredd, struktur mm. ISO Interaktionsdesign 10

11 Ikondesign Matchningen mellan ikon och det den representerar kan vara: avbildande (similar), dvs. en bild av en mapp för att representera en mapp analog/symbolisk, ett glas representerar att något är skört godtycklig (arbitrary), X kan betyda ta bort Avbildande ikoner är effektivast Men allt är inte objekt; handlingar svårare att representera (ta bort t.ex.) kombinera objekt och symboler som kan stå för det mest framträdande i en handling Interaktionsdesign 11

12 Övning Skissa på enkla ikoner för följande funktioner (för en kamera t.ex) : Ta bort senast tagna bild Ta bort alla lagrade bilder Interaktionsdesign 12

13 Talande gränssnitt Kombinationer av användare och system som pratar Används mest för att ta reda på mycket specifik information, som flygtider, köpa biljetter via telefon mm. Även för personer med funktionshinder Ingen inlärning Interaktionsdesign 13

14 Design för mobila enheter Små skärmar, få knappar och andra inmatningsmöjligheter Extra viktigt att vaska fram det viktigaste, vad som är nödvändigt Extra viktigt att fundera på synlighet Hänsyn till stela fingrar och därmed gränssnittens känslighet Interaktionsdesign 14

15 Ubiquitous computing ubiquitous = allestädes närvarande Det uppstod ett helt nytt sätt att tänka kring hur datorer kan användas Datorer införlivas i omgivningen på olika sätt Hur påverkar det vårt sätt att tänka kring design av interaktion? Hitta böcker I biblioteket Dra kundvagnen genom kassan Förstärkt verklighet (augmented reality) bilruta, karta Interaktionsdesign 15

Tangible interfaces Sensor-baserad interaktion, fysiska objekt, som klossar, har kopplats till digitala representationer När man flyttar klossarna får det även digitala konsekvenser, animering t.

16 Tangible interfaces Sensor-baserad interaktion, fysiska objekt, som klossar, har kopplats till digitala representationer När man flyttar klossarna får det även digitala konsekvenser, animering t.ex. De digitala effekterna kan utspela sig I olika medier, och på olika platser, men även i själva det fysiska objektet Kräver speciella tekniska lösningar (sensorer) Interaktionsdesign 16

17 Designutmaningar Utveckla nya konceptuella ramverk, kan leda till helt nya funktioner Vilken typ av koppling man väljer mellan fysisk handling och digital effekt Inlärning tydlig koppling Underhållning, oväntade effekter kan önskas Vilken typ av fysiska objekt ska användas Klossar kan vara flexibla och fungera I många sammanhang, men kräver kanske fantasi Klisterlappar kan enkelt fästas på olika ytor Interaktionsdesign 17

18 Bärbara gränssnitt För år sedan handlade det främst om hjälmar/glasögon för att ta del av digital information Även handskar för inmatning Nu finns ett stort utbud med specialvävt tyg i jackor och andra kläder, till och med skor stödjer interaktion även när man rör sig ute interaktion via t.ex. gester Applikationer kan vara automatiska dagböcker och guider Ska vi även räkna Wii och andra underhållningsprodukter hit? Interaktionsdesign 18

Nelson myntade begreppet hypertext 1963 Genombrottet

19 Historiskt: hypermedia Rötterna i Vannevar Bushs framtidvision från 1945: As me may think (Memex) Ted Nelson myntade begreppet hypertext 1963 Genombrottet i WWW, Tim Berners Lee, CERN Interaktionsdesign 19

20 Webben Kännetecknas av: Flexibilitet föränderligt browser[o]beroende Tillgänglighet växer med nya apparater Var mans egendom allt görs på webben begränsning: webbläsare, apparat Interaktionsdesign 20

21 Design av innehåll Försök vara kortfattad Korrekturläs Undvik långa textmassor scannability Första meningen viktigast En idé per stycke Radlängd om tecken Skrollning Typografi typsnitt utan seriffer storlek, anpassningsbar Interaktionsdesign 21

22 Att styra uppmärksamhet Storlek anger viktighet Kontrasten har betydelse Närhet Spatial närhet Samma stil (typsnitt, färg mm) Ramar Animeringar Färger mörk text på ljus botten tvärtom endast mycket begränsat Interaktionsdesign 22

23 Struktur Bör avspegla eventuella konceptuella modeller för aktuellt sammanhang Strukturen ska stödja överblick och enkel navigering Djup kontra vidd, optimera (utvärdera) Interaktionsdesign 23

24 Organisation av innehåll Exakta alfabetiska kronologiska geografiska mottagare Godtyckliga ämne uppgiftsorienterade slump Interaktionsdesign 24

25 Bilbolaget Interaktionsdesign 25

Relevanta dokument

Föreläsning 10: Gränssnitt och webbdesign

Föreläsning 10: Gränssnitt och webbdesign FSR: 6 Att läsa: Kapitel 6 i Rogers et al.: Interaction Design 1501006 Gränssnitt och webb 2 Översikt Gränssnitt historiskt Kännetecken olika gränssnitt Designutmaningar