7 |
\begin{centering} |
\begin{centering} |
8 |
\huge{HCI Text}\\ |
\huge{HCI Text}\\ |
9 |
\huge{DVC002: Människa-datorinteraktion (MDI), 5p}\\ |
\huge{DVC002: Människa-datorinteraktion (MDI), 5p}\\ |
10 |
\huge{2003, period 1}\\\vspace{.3in} |
\huge{Läsåret 2003-2004, läsperiod 1}\\\vspace{.3in} |
11 |
\large{av}\\ |
\large{av}\\ |
12 |
\LARGE{Jonas Petersson \& Mathias Börjesson}\\\vspace{.4in} |
\LARGE{Jonas Petersson \& Mathias Börjesson}\\\vspace{.4in} |
13 |
\large{Institutionen för programvaruteknik och datavetenskap\\ |
\large{Institutionen för programvaruteknik och datavetenskap\\ |
14 |
Blekinge Tekniska Högskola\\\vspace{.03in}} |
Blekinge Tekniska Högskola\\\vspace{.03in}} |
15 |
\texttt{e-mail:}\\ |
\texttt{e-post:}\\ |
16 |
\emph{jopd01@student.bth.se}\\ |
\emph{jopd01@student.bth.se}\\ |
17 |
\emph{tb00mbo@student.bth.se}\\ |
\emph{tb00mbo@student.bth.se}\\ |
18 |
\end{centering} |
\end{centering} |
60 |
Detta kan lätt tyckas att detta inte har med MDI att |
Detta kan lätt tyckas att detta inte har med MDI att |
61 |
göra, men vi kommer att förklara detta lite senare. |
göra, men vi kommer att förklara detta lite senare. |
62 |
Tanken med att använda diverse script är främst att |
Tanken med att använda diverse script är främst att |
63 |
abstrahera krångliga kommandon (eller om man vill långa) |
kristallisera krångliga kommandon (eller om man vill långa) |
64 |
från användaren, och istället bara använda ett kort |
från användaren, och istället bara använda ett kort |
65 |
kommando. Detta innebär att det blir enklare att hålla |
kommando. Detta innebär att det blir enklare att hålla |
66 |
ordning på det man utvecklar då det i scriptet går |
ordning på det man utvecklar då det i scriptet går |
69 |
programmet i en, och hjälp filerna i en tredje (om |
programmet i en, och hjälp filerna i en tredje (om |
70 |
programmeringsspråket stödjer detta (t.ex. Java API). |
programmeringsspråket stödjer detta (t.ex. Java API). |
71 |
|
|
72 |
%Eller är det svaret vi skall skjuta in? |
|
73 |
Men hur är detta något som är intressant ur en MDI |
Men hur är detta något som är intressant ur en MDI |
74 |
synpunkt?\\ |
synpunkt?\\ |
75 |
Jo, tanken var ju att ta alla dom krångliga kommandona, |
Jo, tanken var ju att ta alla dom krångliga kommandona, |
76 |
och helt enkelt byta ut mot ett kort script. Krasst sett |
och helt enkelt byta ut mot ett kort script. Krasst sett |
77 |
är detta grunden för MDI. Att ta något krångligt |
är detta grunden för MDI. Att ta något krångligt |
78 |
kommando, och byta ut mot ett lättare. |
kommando, och byta ut mot ett lättare. Eller att på |
79 |
|
annat sätt underlätta användandet av en produkt. |
80 |
|
|
81 |
\subsection{GUI design mönster} |
\subsection{GUI designmönster} |
82 |
|
|
83 |
GUI står för Graphical User Interface, eller grafiskt |
GUI står för Graphical User Interface, eller grafiskt |
84 |
användar gränsnitt på svenska. Ett GUI kan se ut på |
användargränsnitt på svenska. Ett GUI kan se ut på |
85 |
ett (nästan) oändligt antal sätt, men alla dessa följer |
ett (nästan) oändligt antal sätt, men alla dessa följer |
86 |
ett eller flera mönster för hur man använder dessa. Då |
ett eller flera mönster för hur man använder dessa. Då |
87 |
dessa mönster upprepas så är det viktigt för oss som |
dessa mönster upprepas så är det viktigt för oss som |
109 |
Det finns flera olika sätt att demonstrera en idé, men |
Det finns flera olika sätt att demonstrera en idé, men |
110 |
den bästa brukar vara att kunna visa upp något. Det kan |
den bästa brukar vara att kunna visa upp något. Det kan |
111 |
vara bra att kunna berätta om idéen man har, men om man |
vara bra att kunna berätta om idéen man har, men om man |
112 |
kan ge kunden något han kan se, ta på, och till viss del |
kan ge kunden något han eller hon (dock för att underlätta |
113 |
|
läsningen i fortsättningen använder vi ett könlöst han |
114 |
|
för att symolisera en person av okänt kön, om inte annat |
115 |
|
sägs) kan se, ta på, och till viss del |
116 |
kunna interagera med så är det mycket enklare, dels att |
kunna interagera med så är det mycket enklare, dels att |
117 |
sälja idén, dels att upptäcka fel och brister i den. |
sälja idén, dels att upptäcka fel och brister i den. |
118 |
|
|
134 |
mock-up så tar man denna, och testar på en eller flera |
mock-up så tar man denna, och testar på en eller flera |
135 |
tilltänkta användare, och lyssnar på deras åsikter om |
tilltänkta användare, och lyssnar på deras åsikter om |
136 |
den. När man har kommit förbi detta stadiet så kan man |
den. När man har kommit förbi detta stadiet så kan man |
137 |
bygga en lite mera avancerad prototyp för att vidare |
bygga en lite mera avancerad prototyp för att vidareutveckla |
138 |
utveckla produkten. En mock-up är vanligtvis (eller |
produkten. En mock-up är vanligtvis (eller |
139 |
i alla fall dom vi har gjort) ``dynamiskt statiska'' |
i alla fall dom vi har gjort) ``dynamiskt statiska'' |
140 |
vilket kan låta som en motsägelse, men vad vi menar med |
vilket kan låta som en motsägelse, men vad vi menar med |
141 |
det är att den görs dynamisk är att det går att byta |
det är att den görs dynamisk är att det går att byta |
146 |
lösningen man har inte håller, utan behöver göras om för |
lösningen man har inte håller, utan behöver göras om för |
147 |
att passa användaren och hans behov. |
att passa användaren och hans behov. |
148 |
|
|
149 |
\subsubsection{Lågnivå prototyper} |
\subsubsection{Lågnivåprototyper} |
150 |
|
|
151 |
En lågnivå prototyp är en enkel prototyp, som snarare |
En lågnivåprototyp är en enkel prototyp, som snarare |
152 |
syftar till att visa den grundläggande idéen. Den kan |
syftar till att visa den grundläggande idéen. Den kan |
153 |
vara en mock-up, eller något annat. En lågnivå |
vara en mock-up, eller något annat. En lågnivåprototyp |
154 |
prototyp är något som går relativt snabbt att slänga |
är något som går relativt snabbt att slänga |
155 |
ihop, och brukar vanligtvis vara ganska så billig. Den |
ihop, och brukar vanligtvis vara ganska så billig. Den |
156 |
kan vara i ett material som är väldigt långt från den |
kan vara i ett material som är väldigt långt från den |
157 |
färdiga produkten (en mock-up på en kartongbit är ju |
färdiga produkten (en mock-up på en kartongbit är ju |
159 |
vi är ganska säkra på att man kan komma ännu längre om |
vi är ganska säkra på att man kan komma ännu längre om |
160 |
man bara vill). |
man bara vill). |
161 |
|
|
162 |
Lågnivå prototypen använder man för att demonstrera en |
Lågnivåprototypen använder man för att demonstrera |
163 |
idéer, koncept och dyl. Den kan inte till fullo |
idéer, koncept och dyl. Den kan inte till fullo |
164 |
användas för att fånga alla krav, men i samverkan med |
användas för att fånga alla krav, men i samverkan med |
165 |
andra metoder (som t.ex. intervjuer, användningsfall |
andra metoder (som t.ex. intervjuer, användningsfall |
166 |
osv) kan man komma nära nog i många fall. |
osv) kan man komma nära nog i många fall. |
167 |
|
|
168 |
\subsubsection{Högnivå prototyper} |
\subsubsection{Högnivåprototyper} |
169 |
|
|
170 |
En högnivå prototyp är en ''bättre`` prototyp, oftast |
En högnivåprototyp är en ''bättre`` prototyp, oftast |
171 |
så ligger den närmare den färdiga produkten än lågnivå |
så ligger den närmare den färdiga produkten än |
172 |
prototypen till utseende, och material (där det |
lågnivåprototypen till utseende, och material (där det |
173 |
finns). Det som främst skiljer en högnivå prototyp |
finns). Det som främst skiljer en högnivåprototyp |
174 |
från en lågnivå är att högnivån har funktionalitet |
från en lågnivå är att högnivån har funktionalitet |
175 |
(verklig sådan, inte att man vänder blad). |
(verklig sådan, inte att man vänder blad). |
176 |
|
|
177 |
\subsubsection{Vilken väljer vi?} |
\subsubsection{Vilken väljer vi?} |
178 |
|
|
179 |
Marc Rettig (1994) anser att det är bättre att använda |
Marc Rettig (1994) anser att om man är tvungen att |
180 |
lågnivå prototyper framför högnivå, detta för att: |
välja så är det är bättre att välja |
181 |
|
lågnivåprototyper framför högnivå, detta för att: |
182 |
|
|
183 |
\begin{itemize} |
\begin{itemize} |
184 |
\item Dom tar lång tid att göra |
\item Dom tar lång tid att göra |
192 |
testningen av denna. |
testningen av denna. |
193 |
\end{itemize} |
\end{itemize} |
194 |
|
|
195 |
Vi måste säga att vi håller med honom. En lågnivå |
Vi måste säga att vi håller med honom. En lågnivåprototyp |
196 |
prototyp kan säga det mesta en högnivå kan, och det |
kan säga det mesta en högnivå kan, och det |
197 |
den inte kan säga är det tveksamt om man kan få |
den inte kan säga är det tveksamt om man kan få |
198 |
tillbaka av den tid det tar att göra högnivå |
tillbaka av den tid det tar att göra högnivåprototypen |
199 |
prototypen (iallafall i de små projekt vi har jobbat |
(iallafall i de små projekt vi har jobbat |
200 |
med hittills), det kan ju ändras om det är ett stort |
med hittills), det kan ju ändras om det är ett stort |
201 |
projekt, men vi är inte helt säkra på det. En |
projekt, men vi är inte helt säkra på det. En |
202 |
prototyp skall endast ses som ett |
prototyp skall endast ses som ett |
204 |
sig självt, på sin höjd kan det ju driva |
sig självt, på sin höjd kan det ju driva |
205 |
utvecklingen framåt. |
utvecklingen framåt. |
206 |
|
|
207 |
|
Vi anser att de projekt vi har jobbat med har varit |
208 |
|
så pass små att en högnivåprototyp inte skulle ha |
209 |
|
hjälp oss komma framåt, utan snarare tvärt om, men |
210 |
|
om man jobbar med större projekt så skall man nog |
211 |
|
inte underskatta värdet av en högnivåprototyp, dock |
212 |
|
så tror vi att det är viktigt att inte överskatta |
213 |
|
den heller. |
214 |
|
|
215 |
Ett undantag bör dock göras. Om man kan utnyttja |
Ett undantag bör dock göras. Om man kan utnyttja |
216 |
prototypen, eller en ansenlig del av denna senare. |
prototypen, eller en ansenlig del av denna senare. |
217 |
Om man t.ex. gör en prototyp av ett GUI, med begränsad |
Om man t.ex. gör en prototyp av ett GUI, med begränsad |
224 |
\subsection{Erfarenhet} |
\subsection{Erfarenhet} |
225 |
|
|
226 |
Vi tror att vi kommer att använda någon form av |
Vi tror att vi kommer att använda någon form av |
227 |
prototyper efter denna kursen då en lågnivå prototyp är ett snabbt |
prototyper efter denna kursen då en lågnivåprototyp är ett snabbt |
228 |
sätt att visa hur man menar att GUI't skall se ut, och |
sätt att visa hur man menar att GUI't skall se ut, och |
229 |
om man har ett förslag till ett GUI så är det enkelt att |
om man har ett förslag till ett GUI så är det enkelt att |
230 |
hitta funktionalitet som man har missat, och det kan |
hitta funktionalitet som man har missat, och det kan |
235 |
och dessa kan också komma till tals om hur produkten |
och dessa kan också komma till tals om hur produkten |
236 |
skall se ut, och dess funktionalitet. |
skall se ut, och dess funktionalitet. |
237 |
|
|
238 |
\section{Designmönster} |
<<<<<<< HCI_text.tex |
239 |
|
Man kan även se en möjlighet till att kunden kan komma |
240 |
|
med mera direkta förslag på förändingar/förbättringar, |
241 |
|
eller till och med själv göra designen (eller del av |
242 |
|
den). |
243 |
|
|
244 |
|
Dessutom så innebär en prototyp av något slag att man |
245 |
|
underlättar kommunikationen mellan utvecklaren och |
246 |
|
kunden, och då ofta kund och utvecklare har olika |
247 |
|
kunnskaper/erfarenheter innebär detta att man minskar |
248 |
|
risken för missförstånd, och kan rätta till ev design |
249 |
|
missar i ett tidigt stadium. Prototypen kan även till |
250 |
|
viss del användas för att hitta saknad funktionalitet, |
251 |
|
dock så kan det vara värre att hitta felaktig. |
252 |
|
|
253 |
När man designar GUI'n så är det nästan omöjligt att |
\section {Designmönster} |
254 |
inte använda några design mönster. Dom flesta sätt |
inte använda något/några designmönster. De flesta sätt |
255 |
att strukturera upp ett GUI följer de mönster som finns |
att strukturera upp ett GUI följer de mönster som finns |
256 |
definierade. Detta märkte vi av på första laborationen |
definierade. Detta märkte vi av på första laborationen |
257 |
när vi skulle identifiera mönster som vi hade använt i |
när vi skulle identifiera mönster som vi hade använt i |
280 |
\subsection{Vikten av att känna igen sig i ett program} |
\subsection{Vikten av att känna igen sig i ett program} |
281 |
|
|
282 |
En viktig sak med att få användaren att känna igen sig |
En viktig sak med att få användaren att känna igen sig |
283 |
är att detta ger en ``säkerhets känsla'' i programmet, |
är att detta ger en ``säkerhetskänsla'' i programmet, |
284 |
användaren känner att han vet (i viss mån) hur han skall |
användaren känner att han vet (i viss mån) hur han skall |
285 |
bära sig åt för att göra olika saker. Nästan alla |
bära sig åt för att göra olika saker. Nästan alla |
286 |
program där man kan spara sitt arbete, öppna en fil med |
program där man kan spara sitt arbete, öppna en fil med |
290 |
användare kan känna igen sig även om han aldrig har |
användare kan känna igen sig även om han aldrig har |
291 |
nyttjat programmet tidigare. |
nyttjat programmet tidigare. |
292 |
|
|
293 |
\section{Interaktions Design} |
\section{Interaktionsdesign} |
294 |
|
|
295 |
När man pratar om interaktions design så menar man att |
När man pratar om interaktionsdesign så menar man att |
296 |
man sätter användaren och hans behov i fokus, och att man |
man sätter användaren och hans behov i fokus, och att man |
297 |
inte så mycket bryr sig om tekniken bakom. |
inte så mycket bryr sig om tekniken bakom. |
298 |
|
|
312 |
produkten är hemligstämplad och det finns andra aktörer på |
produkten är hemligstämplad och det finns andra aktörer på |
313 |
marknaden som jobbar med samma område. Att då låta vanliga |
marknaden som jobbar med samma område. Att då låta vanliga |
314 |
användare komma i kontakt med sin design innebär att hemlig |
användare komma i kontakt med sin design innebär att hemlig |
315 |
information kan spridas till konkurrenterna om de nu råkas |
information kan spridas till konkurrenterna om de nu råkar |
316 |
få tag på samma testpersoner. |
få tag på dessa testpersoner, och fråga ut dessa. |
317 |
|
|
318 |
En annan sak som är viktig, mycket viktig med Interaktions |
En annan sak som är viktig, mycket viktig med Interaktions |
319 |
design är att den sker iterativt. |
design är att den sker iterativt. Detta för att om det |
320 |
|
inte sker iterativt så kan man inte dra maximalt värde av |
321 |
|
denna. Det finns ju en risk att om man gör en ändring så |
322 |
|
som ska lösa ett problem, introducerar man två nya, och om |
323 |
|
processen inte sker iterativt så finns det ingen möjlighet |
324 |
|
att finna detta fören det har gått en lång tid, och det |
325 |
|
kostar mer att åtgärda. |
326 |
|
|
327 |
\section{Konceptuella modeller} |
\section{Konceptuella modeller} |
328 |
|
|
329 |
|
En konceptuell modell är en beskrivning av systemet, i |
330 |
|
form av tankar och idéer om hur systemet skall verka och |
331 |
|
se ut, och att det kan förstås av användaren. |
332 |
|
|
333 |
\emph{``Det viktigaste är att designa användarens |
\emph{``Det viktigaste är att designa användarens |
334 |
konceptuella modell. Allt annat skall ses som |
konceptuella modell. Allt annat skall ses som |
335 |
underordnat för att göra modellen klar, tydlig och |
underordnat för att göra modellen klar, tydlig och |
350 |
|
|
351 |
En viktig del av den konceptuella modellen är att |
En viktig del av den konceptuella modellen är att |
352 |
besluta vad användaren skall göra när han använder |
besluta vad användaren skall göra när han använder |
353 |
produkten. Detta kan även kallas interaktions sätt |
produkten. Detta kan även kallas interaktionssätt |
354 |
dvs hur en användare skall få utföra jobbet. När man |
dvs hur en användare skall få utföra jobbet. När man |
355 |
väljer interaktions sätt så får man även tänka över hur |
väljer interaktionssätt så får man även tänka över hur |
356 |
man skall interagera med produkten (programvaran), skall |
man skall interagera med produkten (programvaran), skall |
357 |
det vara med knappar, menyer, röstkommandon osv. |
det vara med knappar, menyer, röstkommandon osv. |
358 |
|
|
384 |
\end{itemize} |
\end{itemize} |
385 |
När man instruerar så förklarar man vad man vill att |
När man instruerar så förklarar man vad man vill att |
386 |
systemet skall göra, man ger order. Detta kan ske t.ex. |
systemet skall göra, man ger order. Detta kan ske t.ex. |
387 |
med knappar, menyer osv.\\ |
med knappar, menyer osv. |
388 |
|
|
389 |
När man konverserar så gör man det som man gör med en |
När man konverserar så gör man det som man gör med en |
390 |
människa, antingen talar man till systemet med rösten, |
människa, antingen talar man till systemet med rösten, |
391 |
eller så skriver man, men man håller sig till ett |
eller så skriver man, men man håller sig till ett |
392 |
normalt språk.\\ |
normalt språk. |
393 |
|
|
394 |
När man manipulerar och navigerar så har man en |
När man manipulerar och navigerar så har man en |
395 |
representation (av något) som man kan manipulera för att |
representation (av något) som man kan manipulera för att |
396 |
uppnå önskat resultat. Det är en klar fördel om |
uppnå önskat resultat. Det är en klar fördel om |
397 |
representationen delar vissa egenskaper som användaren |
representationen delar vissa egenskaper som användaren |
398 |
kan förstå av den fysiska världen.\\ %analoga lät fel, men fysiska låter heller inte riktigt bra... Jag höll på att skriv riktiga, men kom att tänka på vad det skulle innebära |
kan förstå av den fysiska världen. %analoga lät fel, men fysiska låter heller inte riktigt bra... Jag höll på att skriv riktiga, men kom att tänka på vad det skulle innebära |
399 |
|
|
400 |
När man utforskar och surfar så är systemet utformat på |
När man utforskar och surfar så är systemet utformat på |
401 |
ett sådant vis att användaren kan få information utan |
ett sådant vis att användaren kan få information utan |
402 |
att behöva formulera frågor. |
att behöva formulera frågor. |
465 |
vara väldigt trevligt om denna klarar av att t.ex. |
vara väldigt trevligt om denna klarar av att t.ex. |
466 |
kompilera texten, rättstavning osv. |
kompilera texten, rättstavning osv. |
467 |
|
|
468 |
\subsection{Interface metaforer} |
\subsection{Interface-metaforer} |
469 |
|
|
470 |
Denna metod går ut på att man tar och försöker efterlikna |
Denna metod går ut på att man tar och försöker efterlikna |
471 |
en välkänd metod, eller något som användaren känner igen |
en välkänd metod, eller något som användaren känner igen |
472 |
för att manipulera systemet. Det handlar oftast om att man |
för att manipulera systemet. Det handlar oftast om att man |
473 |
försöker abstrahera bort hur datorn gör, och istället |
försöker abstrahera bort hur datorn gör, och istället |
474 |
likna det vi något som man känner igen. Dock så är boken |
likna det vid något som man känner igen. Då boken är |
475 |
vi har väldigt kritisk mot denna metoden att utveckla |
väldigt kritisk mot denna metoden att utveckla |
476 |
produkter, så vi tänker inte gå in på denna så djupt. Dock så |
produkter, så vi tänker inte gå in på denna så djupt. Dock så |
477 |
tror vi att det borde vara en bra metod att iallafall |
tror vi att det borde vara en bra metod att iallafall |
478 |
fundera på, men man måste nog vara försiktig så att man |
fundera på, men man måste nog vara försiktig så att man |
484 |
upp tid att hålla på med, men faktum är att den tid (och de pengar) |
upp tid att hålla på med, men faktum är att den tid (och de pengar) |
485 |
man lägger ner på MDI tjänar man igen ganska så fort. |
man lägger ner på MDI tjänar man igen ganska så fort. |
486 |
Dessutom så är det med hjälp av en mock-up lätt att tidigt |
Dessutom så är det med hjälp av en mock-up lätt att tidigt |
487 |
fånga design fel, eller till och med logik fel, och ju |
fånga designfel, eller till och med logikfel, och ju |
488 |
tidigare man kan hitta fel, desto billigare blir dom att |
tidigare man kan hitta fel, desto billigare blir dom att |
489 |
avhjälpa. |
avhjälpa. |
490 |
|
|
491 |
En annan viktig sak att tänka på med MDI är att man kan på |
En annan viktig sak att tänka på med MDI är att man kan på |
492 |
ett sätt använda det som en reklam tavla för sitt företag, |
ett sätt använda det som en reklamtavla för sitt företag, |
493 |
om man gör en extraordinär lösning på något så kommer |
om man gör en extraordinär lösning på något så kommer |
494 |
detta att sprida sig, men det kommer ännu mer att sprida |
detta att sprida sig, men det kommer ännu mer att sprida |
495 |
sig om man gör dåliga MDI lösningar. Ett företag som |
sig om man gör dåliga MDIlösningar. Ett företag som |
496 |
tidigare har köpt en produkt som kanske är bra, bara det |
tidigare har köpt en produkt som kanske är bra, bara det |
497 |
att de inte kan nyttja den kommer inte att köpa en produkt |
att de inte kan nyttja den kommer inte att köpa en produkt |
498 |
till av samma företag som den förra. |
till av samma företag som den förra. |