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

Storlek: px

Starta visningen från sidan:

Download "Föreläsning 9: Gränssnitt och webbdesign"

Bernt Dahlberg
för 5 år sedan
Visningar:

1 Föreläsning 9: Gränssnitt och webbdesign FSR: (1), 4, 6 Att läsa: Kapitel 6 i Rogers et al.: Interaction Design

2 Gränssnitt och webbdesign 2

3 Översikt Gränssnitt historiskt Kännetecken olika gränssnitt Designutmaningar Webben historiskt Kännetecken för webben Designutmaningar Riktlinjer och tips Gränssnitt och webbdesign 3

Att kunna om gränssnitt och webbdesign Känna till olika element och ansatser man kan använda för att bygga upp gränssnitt och interaktion Förstå att gränssnittdesign är

dess framväxt Redogöra för vad som kännetecknar webbsidor och vad det får för konsekvenser för vad man bör tänka på i webbdesign Känna till vad man kan göra för att

4 Att kunna om gränssnitt och webbdesign Känna till olika element och ansatser man kan använda för att bygga upp gränssnitt och interaktion Förstå att gränssnittdesign är förenat med olika utmaningar, och kunna ge några exempel på sådana utmaningar, specifikt för fönster, menyer och ikoner Redogöra för webbens historia, och vad som inspirerat dess framväxt Redogöra för vad som kännetecknar webbsidor och vad det får för konsekvenser för vad man bör tänka på i webbdesign Känna till vad man kan göra för att uppmärksamma olika delar av en webbsida Redogöra för vad man ska tänka på vad gäller design av innehåll och hur man kan strukturera innehållet på olika sätt Gränssnitt och webbdesign 4

Typer av gränssnitt 1980-talet: kommandon WIMP/GUI 1990-talet Avancerad grafik (multimedia, virtuell verklighet, informationsvisualisering) Webb Tal/naturligt språk

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

6 Kommandon Oftast i form av enkla tangentkombinationer Kännetecknas av snabbhet och effektivitet Men de kräver inlärning och regelbundet användande Gränssnitt och webbdesign 6

WIMP Xerox Star första WIMP (1981) Windows skrollning, dra, överlappning, öppna/stänga, flytta Icons representerade applikationer, objekt, funktionalitet och redskap, åtkomst via

7 WIMP Xerox Star första WIMP (1981) 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 Gränssnitt och webbdesign 7

8 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 Direktmanipulation Gränssnitt och webbdesign 8

9 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 Gränssnitt och webbdesign 9

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

10 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, indikationer för vilket som är aktivt Designprinciper för avstånd, gruppering och enkelhet Ännu ett fönster är inte alltid lösningen Gränssnitt och webbdesign 10

Menyer Olika menytyper platta listor, drop-down, pop-up, kontextuell, och 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.

11 Menyer Olika menytyper platta listor, drop-down, pop-up, kontextuell, och 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. på en smartphone Expanderande menyer möjliggör fler val flexiblare navigering flera nivåer kräver musprecision, lätt att välja fel Kontextuella menyer ofta använda funktioner högerklicka Gränssnitt och webbdesign 11

12 Designutmaningar, menyer Vilken terminologi passar bäst? enstaka ord eller kort mening? Placering i menyerna Stäng och spara ej i närheten Det finns många riktlinjer kring detta avseende djup/bredd, struktur mm. ISO Gränssnitt och webbdesign 12

Ikondesign Matchningen mellan ikon och det den representerar kan vara:

en bild av en mapp för att representera en mapp analog/symbolisk, ett glas

Avbildande ikoner är effektivast Men allt är inte objekt; handlingar svårare

13 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 Gränssnitt och webbdesign 13

14 Ö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 Gränssnitt och webbdesign 14

15 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 Gränssnitt och webbdesign 15

16 Webb, historiskt: hypermedia Rötterna i Vannevar Bushs framtidvision från 1945: As we may think (Memex) Ted Nelson myntade begreppet hypertext 1963 Genombrottet i WWW, Tim Berners Lee, CERN Gränssnitt och webbdesign 16

17 Webben Kännetecknas av: Flexibilitet föränderligt browser[o]beroende Tillgänglighet växer med nya apparater plattforms(o)beroende Var mans egendom allt görs på webben begränsning: webbläsare, apparat Gränssnitt och webbdesign 17

18 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 begränsas Skrollning Typografi typsnitt utan seriffer (med seriffer) storlek, anpassningsbar Gränssnitt och webbdesign 18

19 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 Gränssnitt och webbdesign 19

kontra vidd, optimera (utvärdera) Veens designprinciper 1. Var är jag?

20 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) Veens designprinciper 1. Var är jag? 2. Vart kan jag gå? 3. Vad finns här? Gränssnitt och webbdesign 20

21 Gränssnitt och webbdesign 21

22 Organisation av innehåll Exakta alfabetiska kronologiska geografiska mottagare Godtyckliga ämne uppgiftsorienterade slump Gränssnitt och webbdesign 22

23 Bilbolaget Gränssnitt och webbdesign 23

24 Gränssnitt och webbdesign 24

Att diskutera Räkna upp de interaktionsstilar du kommer på. Utgå ifrån PACT-modellen och föreslå interaktionsstilar för olika värden för PACT-parametrarna.

25 Att diskutera Räkna upp de interaktionsstilar du kommer på. Utgå ifrån PACT-modellen och föreslå interaktionsstilar för olika värden för PACT-parametrarna. Börja gärna att utgå från uppgift (Activity). Hur skulle du koppla olika interaktionsstilar till användbarhetsmålen? Ge exempel på hur man kan organisera webbsidor, vilka principer kan man följa? Ge exempel på vad som kan styra vilken princip man väljer? Ge exempel på hur man kan styra användarens uppmärksamhet på webbsidor Gränssnitt och webbdesign 25

26 Övning 1 Vilken interaktionsstil passar bäst när man är frekvent användare man är nybörjare säkerhet är viktigt när det finns kopplingar till naturliga handlingar man ska stödja användbarhetsmålen: effective efficient säkerhet nytta lätt att lära lätt att använda Gränssnitt och webbdesign 26

Synpunkter på dagens föreläsning Gå till webbsidan www.govote.

andra viktiga synpunkter Ni kan skriva in flera kommentarer Endast en fråga för

27 Synpunkter på dagens föreläsning Gå till webbsidan ange koden: Ni kan kommentera dagens föreläsning eller framföra andra viktiga synpunkter Ni kan skriva in flera kommentarer Endast en fråga för dagens föreläsning men ni kan ändå skriva det ni vill ge synpunkter på Gränssnitt och webbdesign 27

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