Mattias Arvola

Institutionen för datavetenskap

Användargränssnitt

Litteratur till föreläsningen

• Controls och Non-traditional Inputs i

• kapitel 7 av Sa!er

• Interface Design i kapitel 8 av Sa!er

2

Föreläsningen i relation till projektet• Designspecifikation i Designarbete 2

3

STRATEGY

RESEARCH

OBSERVATIONS

ANALYSIS

STRUCTURED INSIGHTS

IDEATION

PRINCIPLES

REFINEMENT

PROTOTYPE/DEVELOPMENT

Dagens föreläsning

• Kriterier för bra gränssnittsdesign

• Command Line Interfaces CLI

• Menu Driven Interfaces MDI

• Graphical User Interfaces GUI

• Mobila användargränssnitt

• Distributed User Interfaces DUI

• Augmented Reality AR

• Tangible User Interfaces TUI

4

Nielsen igen• Synlig systemstatus

• Matchning mellan systemet och omvärlden

• Användarkontroll och frihet

• Konsekvens & standard

• Felprevention

• Igenkänning istället för kom-ihåg

• Flexibilitet och e!ektivitet i användning

• Estetisk & minimalistisk design

• Hjälp användare känna igen, diagnostisera och komma tillbaka från fel

• Hjälp & dokumentation

5

Men estetiken då?

• Attraktiv

• Elegant

• Vilsamt

• Dynamiskt

• Spännande

• Engagerande

• Kommunicera rätt känsla (vilken är det då?)

6

The Software Design Manifesto Mitch Kapor 1990

”The Roman architecture critic Vitruvius advanced the notion that well-designed buildings were those which exhibited firmness, commodity, and delight.

The same might be said of good software. Firmness: A program should not have any bugs that inhibit its function. Commodity: A program should be suitable for the purposes for which it was intended. Delight: The experience of using the program should be pleasurable one. Here we have the beginnings of a theory of design for software.”

http://hci.stanford.edu/publications/bds/1-kapor.html

7

Men sociala media då?

•Dela med sig

•Diskutera

•Visa upp sig

•Visa uppskattning

•Gemenskap

8

Batch computing•Sätt ihop en hög med hålkort

•Lägg dem i kön och vänta

•Operatören kör dem när det är din tur

•Sedan får du vänta lite till

•Låter det bekant?

•Fyll i ett formulär på nätet

•Skicka in dina kommandon till servern

•Sedan skickar den tillbaka ditt resultat

•Vi gör fortfarande batch computing då vi inte kan få realtidsinteraktion!

9

Kommandogränssnitt

cp meriter.txt ~/personligt

Kopiera filen ’meriter.txt’ till katalogen ‘personligt’ i hemkatalogen

10

Plus och minus med kommandogränssnitt

+ Om användaren bara vet och kommer ihåg rätt kommandon så är detta det snabbaste gränssnittet för många uppgifter

+ Gränssnittet kräver mindre minne än andra gränssnitt

+ Det kräver mindre CPU än andra gränssnitt

+ En lågupplöst billig skärm kan användas

+ Remote access

+ Går att skripta

+ Upplevd kontroll när man väl behärskar det.

- För någon som aldrig använt ett CLI så är det förvirrande

- Kommandon måste vara exakt rätt inmatade

- Om man skriver fel så måste man ofta börja om från början

- Man måste lära sig massvis av kommandon vilket leder till hög investeringskostnad för att komma igång

11

Menygränssnitt

• Interaktionen sker genom att man stegar sig igenom en hierarki av menyer eller skärmar

• Man får en meny, gör ett val och får nästa meny ur vilken man gör ett val osv.

• Menyer kan vara endimensionella eller tvådimensionella

• Exempel: Mobiler, bankomater, informationskiosker, TV-gränssnitt…

12

Fördelar och nackdelar med menygränssnitt

+Man behöver inte lära sig några kommandon

+Man får val presenterade steg för steg och behöver inte komma ihåg något

+Även om man inte vet vad man ska göra så kan man gissa

+Menyer behöver inte vara visuella utan kan läsas upp

+Kräver inte så mycket CPU eller minne

-Ett dåligt designat menygränssnitt blir lätt ine!ektivt

-Många menyer eller skärmar att gå igenom kan vara irriterande

-Oftast kan man inte gå direkt dit man vill i menyhierarkin

13

Grafiska gränssnitt

•Vårt vanligaste gränssnitt idag

•Använder sig ofta av WIMPWindows, Icons, Menus, Pointers

•Baseras på principen WYSIWIGWhat you see is what you get

•Direktmanipulation

•Spatiala representationer

•Visar handlingar med markören

14

Fördelar med grafiska gränssnitt

+ Man behöver inte lära sig någon syntax eller kommandon

+ Multitasking: Gör det lätt att flytta data mellan olika program

+ Uppenbara kontrolldon

+ Snabb och synlig respons

+ Enkelt att ångra

+ Synligt handlingsutrymme

+ Lätt att skapa alternativ och jämföra

+ Tydligt vad som sker

+ Noviser lär sig snabbt

+ Experter jobbar snabbt

+ Mellanbra användare behåller sin kunskap

+ Felmeddelande behövs sällan

+ Användare upplever mindre oro

+ Användare kan se om handlingarna för dem närmare målet

+ Användare utvecklar självförtroende och expertis

15

Nackdelar med grafiska gränssnitt

- Kräver mer hårddisk, minne och CPU än många andra gränssnitt

- Spatiala eller visuella representationer kan bli för utspridda så att man tappar överblicken

- Flödesscheman på hög abstraktionsnivå och databasscheman blir förvirrande komplexa

- Vissa designlösningar kan tvinga bort viktig information från skärmen

- Användarna måste lära sig de grafiska representationerna

- Den visuella representationen kan vara missvisande

- Att skriva kommandon kan vara snabbare

16

Mobila gränssnitt

• Små skärmar betyder mindre screen real estate: hårdare prioritering

• Den mobila brukssituationen ser annorlunda ut än den stationära

• Vad behöver man vet och göra i just denna användningssituation, vid denna tidpunkt?

• Används den vid besök, på resande fot, eller i en lokal?

• Vad händer när man vrider skärmen?

• Tänk location-based

• Minimal användarhjälp

17

Inmatning för mobila gränssnitt

• Pekskärm med en eller flera punkters interaktion

• Mjukt tangentbord

• Fysiskt tangentbord

• Mikrofon

• Fysiska knappar

• Sensorer

18

Distribuerade gränssnitt

• Gränssnitt distribuerade över flera användare på flera plattformar i flera miljöer.

• Ett DUI gör det möjligt för användare att flytta ett gränssnittselement (både stora och små) mellan olika plattformar och olika miljöer.

• Många skärmar

• Många maskiner: från mobilen till teven till datorn, till en annan dator

• Från min dator till Johans dator, till Johans mobil, till alla Johans vänner

• http://www.ida.liu.se/~mda/projects/dui/DUI-demonstration-stor.mov

19

Förstärkt verklighet

• Head mounted: http://www.youtube.com/watch?v=wJItdmumxYY

• Mobil:http://www.youtube.com/watch?v=rB5xUStsUs4

• Projektorbaserad: http://vimeo.com/15932244

20

Fysiska gränssnitt TUI

• Vi är fysiska varelser och interagerar med världen genom vår kropp. Vi består inte bara av ett par ögon och ett pekfinger. Varför inte dra nytta av det i människa-datorinteraktion?

• Reactable: http://www.youtube.com/watch?v=vm_FzLya8y4

21

Några gränssnitts-standards att använda!

• Apple Human Interface Guidelines

• iOS Human Interface Guidelines

• Android User Interface Guidelines

• Windows User Experience Interaction Guidelines

• UI Design and Interaction Guide for Windows Phone 7

• Eclipse User Interface Guidelines

22

Bortom gränssnittsstandarder• Motto: Play games, do cool stu!!

• Samla på er slående och eleganta förebilder, analysera vad det är som gör att det tilltalar er. Låna de bakomliggande principerna och skapa nya synteser och ännu elegantare variationer.

• Kolla vad som händer på forskningskonferenserna:

• CHI

• NordiCHI

• DIS

• HCI

• Interact

• SIGGraph

• SIGGraph Asia

23

www.liu.se