Vad utmärker ett bra gränssnitt?



Relevanta dokument
Vad utmärker ett bra användargränssnitt?

Extra handledning för de som vill det på onsdag i ML1 - Drop in, inga tider behöver bokas - En lärare

TENTAMEN: Design och konstruktion av grafiska gränssnitt DAT215

Grundläggande teori för användargränssnitt,del 2

TNM040 Kommunika3on och användargränssni< HT2015, FÖ3 TNM040 HT2015. Bra överblick. h<p:// anvandbarhet/metoder

Spel som interaktiva berättelser

Clicker 5. Lathund kring de vanligaste och mest grundläggande funktionerna för att komma igång med Clicker. Habilitering & Hjälpmedel

Grupp 7 s Analys På Två Olika Parkeringsautomater

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Föreläsning 3 1ME403 Design av grafiska gränssni7, 7,5hp. Gränssni)sdesign II. Rune Körnefors. Medieteknik Rune Körnefors rune.kornefors@lnu.

Interaktionsdesign, grundkurs INTERAKTION 1

Routerinställning. Denna guide tar dig genom de enkla steg som behövs för att ställa in routern så den fungerar trådlöst.

Efterlysning! Kognitiv design 1. Mitt mål för er med idag. Idag. Mål. Vad exakt är problemet?

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt

Människa-Datorinteraktion. HCI text

Kognition crash course

Design och konstruktion av grafiska gränssnitt

Objektorienterad programmering

Studentguide Adobe Connect Pro

Design och konstruktion av grafiska gränssnitt

Den här veckan. Kapitel 7 och 11. Kom ihåg att boka tiden för handledning på fredag. Uppsamling av missade övningar på onsdag

Föreläsning 7. Grafiska användargränssnitt

Innehåll. Användarstudier. Användarstudier enligt Microsoft. Varför? Aktivt lyssnande. Intervjuteknik. Intervju Observation Personor Scenarier Krav

Windows Forms Winstrand Development

Objektorienterad programmering Föreläsning 15. Grafiska användargränssnitt (GUI Graphical User Interface)

Migrera till Word 2010

När ReadHear är installerat på din dator, startar du det genom att klicka på programmets ikon.

Aldrig mer krångliga system

Projektrapport EDA095

Instruktion arbeta med rapportmallen

natur och miljö Syfte

Nya Medier. Gränssnitt, Interaktivitet och Digital kod

Att intervjua och observera

- en expertanalys. av Anna Olvenmyr

GYMKEEPER ANDREAS SÖDERSTRÖM

KURSKATALOG. qlikview.com

Godman redovisning 2012

Innehållsförteckning

Skriv in sökvägen sam.sll.se

Netwise CMG Voice , Rev 1.0, CJ 1(16)

LINDINSPECT Webbgränssnitt

1.2 Logotypens färgsättning

Användarhandbok OE/OSSpeaker V.10.3

Flexibel meny i Studentportalen

Design och konstruktion av grafiska gränssnitt. Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU

Projektarbete 2: Interaktiv prototyp

Användarmanual Phoniro App 3.4 för Android

Survey&Report steg för steg: Skapa rapport

Lite info först. Kom ihåg! Deadline på lab1 på onsdag. Övning 2 på onsdag: gör en kalender för olika slags användare

BICT:01 BICT. sv-se. Användarinstruktion Gäller från BICT Utgåva 5. Scania CV AB 2015, Sweden

Elisabeth Bejefalk IT-Assistent Avesta kommun

Realtid. eda040project2010 MANUAL. - Christoffer Olsson. - Daniel Lehtonen

HANDLEDNING ZENIT BILBOKNING

Interaktion 2 STYRDON, PEKDON OCH ANNAN INTERAKTION ATT RÄKNA MED

Grundat Nätverket Göran med Åsa Skogström

Handbok Kstuds. Tomasz Boczkowski Granskare: Eugene Trounev Översättare: Stefan Asserhäll

Lathund till Dexter IUP

Byta lösenord på en Ingate Firewall 1180/1190/SIParator 18/19. Lisa Hallingström Paul Donald Bogdan Musat Adnan Khalid

Scribus fortsättning

Instruktion Tibropresentation

Design och konstruktion av grafiska gränssnitt

Tjänsten Jing och lärande över Internet Författare: Sofia Sundgren sosu0002, Digitala Distributioner

Installationsanvisning för Su Officemallar 2003 För PC

Inlämningsuppgift 2. DA156A - Introduktion till webbutveckling Teknik och samhälle, Malmö högskola Oktober 2012

Betatestning - Solsystem

Handbok för knappexpansionsmodul (KEM) för IP-telefon. BCM Business Communications Manager

CANDY4 HD II

Selma Manual Utbildningsplan. Studentcentrum/Ladokgruppen

Virtuella doftspår på webbplatser

Här kan du välja befintligt upplägg eller skapa ett nytt. Klicka på edit uppe till höger för att redigera och/eller skapat nytt.

TABELLHANTERING. Formler, fungerar det att ha i tabeller?

Diagram. I detta kapitel lär du dig: m Diagrammets beståndsdelar. m Att skapa både inbäddat diagram och diagramblad. m Att ändra diagramform.

Problem: BOW Bowling. Regler för Bowling. swedish. BOI 2015, dag 1. Tillgängligt minne: 256 MB

Macromedia. Flash 8 Grundkurs.

Varför gör dom inte som vi säger?

Upptäcka och analysera. Qlik Sense 1.1 Copyright QlikTech International AB. Alla rättigheter förbehållna.

Mobilapplikation htp:/aktjon.argentum.se/activitymobile

2 SPD - ett realtidsystem för distansundervisning

Copyright 2008 Pausit AB medföljer programvaran pausit. Pausit version 1.2 Användarmanual

Handbok Artikulate. Andreas Cord-Landwehr Ondrila Gupta Översättare: Stefan Asserhäll

KeyControl Utskrifter och historik

Microsoft Windows 8 Grunder

Rhino3D. Schackbräde. Krav. Några detaljer som kan vara bra att känna till:

För en helt ny användare går det snabbare än tidigare att lära sig de funktioner som finns.

Detta är en kort Manual för Vecturas portal för presentation av inventeringar. Adressen till portalen är:

Stefan Nilsson

J A G T Ä N K E R, D Ä R F Ö R Ä T E R J A G.

Vid frågor kontakta oss på eller ring oss på

En Raggningsexperts Bekännelser

Resurscentrum för kommunikation Dako SymWriter 2. Minimanual

Nallelek Lärarvägledning

App-klient för smartphones Power BI Arbetsflöde CRM Online Webb-klienten Dokumenthantering Molnet...

Inledning till Wavesurfer av Christine Ericsdotter (Lingvistik, Stockholms universitet)

Grönt båtliv? EN ATTITYDUNDERSÖKNING BLAND FINSKA, DANSKA OCH SVENSKA BÅTÄGARE OM ÖSTERSJÖN, BÅTLIV OCH MILJÖ

Uppdrag undersökning

TRACOM Sneak Peek Excerpts from. Självskattnings-Guide

Egenskaper och inställningar för QuickScan och förhandsgranskningsfönstret

FileCentral Desktop. Användarhandledning Version

Transkript:

Vad utmärker ett bra gränssnitt? Kommunikation med användarna Feedback och Pliancy Excise kontra Flow

GUI = Graphical User Interface GUIn, eller grafiska gränssnitt hittar vi på alla sorters skärmar I den här kursen koncentrerar vi oss dock på allmänna principer rörande GUI design och hur man designar GUIn för dator-mus-tangentbord.

What is this?

What kind of software is this?

What is this?

Ledtrådar Så snart vi står inför något okänt letar vi efter ledtrådar Donald Norman kallar detta signifiers som visar oss vad vi kan göra (funktionalitet) och hur vi ska göra det (interaktion) En stor del av GUI-design handlar därför om att skapa dessa ledtrådar, dvs kommunicera till användaren vad GUIt är till för, och hur det fungerar.

Zookeeper: ett bra GUI!

Zookeeper: Zookeeper är väldigt lik Bejeweled men den har den några extra designfeatures http://www.2flashgames.com/f/f-231.htm

Väl genomtänkt grafik Djuren har distinkta former och färger Bakgrunden är rutig för att visa gridet Själva spelytan är ljusare än det runtomkring, vilket gör att den lyfts fram rent visuellt.

Feedback!

Det lilla extra Zookeeper använder anthropomorphism (att man tillskriver något mänskliga egenskaper) Djurens ansiktsuttryck ger ledtrådar Hur många olika uttryck finns det?

Jämfört med Bejeweled Hemläxa: Jämför med Candy Crush Saga och liknande

Ledtrådar: Vad kan man göra? Namngivning av knappar, menyval etc Ikoner Hur man grupperar och placerar Pliancy: Att indikera att någonting på skärmen är klickbart eller manipulerbart på annat sätt. Feedback: Reaktioner på vad användaren gör eller har gjort, att visa status etc

Att göra saker: manipulation Donald Norman använder term: affordance the perceived and actual properties of the thing, [ ] that determine just how the thing could possibly be used. Men, han talade om fysiska objekt

Att göra saker: manipulation Alan Cooper använder termen pliancy, manipulerbarhet - Alla objekt som kan manipuleras har pliancy MEN den måste fortfarande indikeras så kallad hinting så att användarna förstår att de kan interagera med objektet - (Detta är ett större problem med touch-interface än med vanliga desktop GUIn)

Att indikera manipulerbarhet Static object hinting Att ett objekt kommunicerar alltid sin manipulerbarhet. Ex att knappar är ritade i 3D Dynamic visual hinting Att ett objekt ändrar utseende när markören passerar över det Pliant response hinting Att ett objekt ändrar utseende när man interagerar med det

Att indikera manipulerbarhet Cursor hinting - Att markören ändrar utseende när den passerar olika typer av objekt

Olika typer av feedback Feedback kan vara visuell - Objekt ändrar utseende för att visa att de är valda eller för tillfället aktiva Feedback kan också ges via ljud - Ljud brukar typiskt indikera att någonting händer nu, och kan användas för att dra uppmärksamheten till något som för tillfället inte syns, som ett program i bakgrunden. - Email-plinget är ett typiskt exempel - Undvik negativ ljudfeedback

Olika typer av feedback Feedback kan också vara modal - Initierar ett nytt mode /läge, t.ex. att öppna ett nytt fönster eller en dialog eller modeless - Avbryter inte användaren utan indikerar bara - Är att föredra framför modal feedback, om möjligt

Feedback: Modeless visuell feedback

Feedback: Modeless visuell feedback

So far so good Så nu har vi talat om: hur man indikerar vad man kan göra i ett GUI (pliancy, namngivning, ikoner, layout ) hur systemet reagerar på det som använderen gör (feedback) What s left?

Flow

Flow Flow är när allt flyter på utan störningar, pauser eller irritation. Flow tillståndet är EXTREMT PRODUKTIVT

Att designa för flow Följ användarens mentala model (extremt viktigt)

Att designa for flow Alla viktiga vertyg/funktioner ska vara inom räckhåll Layout: Komponenterna ska paceras på ett sätt som naturligt stödjer arbetet: - Det man arbetar med ska stå i fokus, med navigation etc runt om - Saker i rätt ordning (ex OK-knappen sist)

Att designa for flow Direkt manipulation stärker också flow eftersom det känns mer naturligt än

än exakta inställningar Det kan vara bra med exakta inställningar ibland, men man löper en viss risk att bryta flow

Använd så få steg som möjligt Hur många interaktionssteg måste man göra när man ska Spara som (om man har otur)? Spara som Tala om var Ange namn Ange filtyp Kan man undvika några av dessa steg?

Undvik onödiga val

ange defaults istället

Flow Undvik onödiga dialogrutor: Allt är är bra. OK? Skilj på att utföra en funktion och att konfigurera den att skriva ut vs. installera och konfigurera skrivare

Flow Skilj på att utföra en funktion och att konfigurera den att skriva ut vs. installera och konfigurera skrivare

Flow Det är stor skillnad på vad användare kan göra, och vad de oftast gör. - En programmerare måste hantera både vanliga och ovanliga val - Men GUI-designern ska designa för det vanligaste valet!

The enemy: Excise Image from creativeuncut.com

Excise är Alla de där extra interaktionerna som inte har nånting med målet att göra, men ändå måste utföras. - Om målet är att ta bilen till jobbet - så är det excise att öppna garage-dörren, köra ut, stänga garagedörren, tanka på vägen, hitta parkeringsplats, betala för parkeringen Excise är förstås också alla onödiga saker man måste göra

Visuell excise Excise kan också vara visuell, om det tar lång tid att förstå hur man kan använda ett GUI utan att det verkligen behövs (hög kognitiv last, om skärmen upplevs som väldigt rörig, med många animationer, färger etc..) Gissa vad denna website var för

staplesville.ca

Excise: Onödigt arbete, ping pong

Nödvändig excise: Navigation Navigation mellan - Sidor - Program - Vyer kan förenklas genom Översikter Signposts/breadcrumbs undvika djupa hierarkier

Nödvändig excise: växla modes (lägen) Ibland vill man göra det som ligger lite utanför det normala användningsfallet.

Excise att kräva inmatning när den inte behövs Att kräva att användarna ska mata in information som systemet redan har Att kräva att användarna ska ange allting, istället för att ge default-värden

Sammanfattning Ge användaren ledtrådar som visar vad man kan göra (funktionalitet) och hur (interaktion) Ge feedback Försök skapa flow Undvik excise

Sammanfattning Gör så här: Undvik detta:

Do this Don t do this