| 1 |
jontas |
1.1 |
\documentclass[12pt, a4paper]{article} |
| 2 |
|
|
\usepackage[latin1]{inputenc} |
| 3 |
|
|
\usepackage{setspace} |
| 4 |
|
|
|
| 5 |
|
|
\begin{document} |
| 6 |
|
|
\thispagestyle{empty} |
| 7 |
|
|
\begin{centering} |
| 8 |
|
|
\huge{HCI Text}\\ |
| 9 |
|
|
\huge{DVC002: Människa-datorinteraktion (MDI), 5p}\\ |
| 10 |
|
|
\huge{2003, period 1}\\\vspace{.3in} |
| 11 |
|
|
\large{av}\\ |
| 12 |
|
|
\LARGE{Jonas Petersson \& Mathias Börjesson}\\\vspace{.4in} |
| 13 |
|
|
\large{Institutionen för programvaruteknik och datavetenskap\\ |
| 14 |
jontas |
1.5 |
Blekinge Tekniska Högskola\\\vspace{.03in} |
| 15 |
jontas |
1.1 |
\texttt{e-mail:}\\ |
| 16 |
jontas |
1.5 |
\emph{jopd01@student.bth.se}}\\ |
| 17 |
jontas |
1.1 |
\emph{tb00mbo@student.bth.se}\\ |
| 18 |
|
|
\end{centering} |
| 19 |
|
|
\newpage |
| 20 |
|
|
\tableofcontents |
| 21 |
|
|
\newpage |
| 22 |
|
|
\onehalfspacing |
| 23 |
|
|
\section{Kurserfarenheter} %Är detta ett bra namn? |
| 24 |
|
|
|
| 25 |
jontas |
1.5 |
Detta kapitel kommer att ta delar av det vi har gått igenom |
| 26 |
jontas |
1.1 |
i kursen, samt försöka belysa vissa av dem. |
| 27 |
|
|
|
| 28 |
|
|
\subsection{Användandet av en minsta gemensamma |
| 29 |
|
|
utvecklingsmiljö} |
| 30 |
|
|
|
| 31 |
|
|
Ett syfte med att introducera en minsta gemensamma |
| 32 |
|
|
utvecklingsmiljö är att underlätta processen att |
| 33 |
|
|
producera programvara, även om man inte sitter vid sin |
| 34 |
|
|
egen dator, utan hos någon annan. |
| 35 |
|
|
|
| 36 |
|
|
Nyttan med en minsta gemensamma utvecklingsmiljö i en miljö med flera utvecklare är att |
| 37 |
|
|
det hämmar användandet av egna utvecklingsverktyg, |
| 38 |
|
|
underlättar användandet av en annan dator, underlättar utbildning, samt |
| 39 |
|
|
underlättar administrationen av systemet då alla datorer |
| 40 |
|
|
har samma programvara installerad. |
| 41 |
|
|
Dock så är ju en nackdel med att nyttja en gemensam |
| 42 |
|
|
utvecklingsmiljö att då det kommer nya människor som |
| 43 |
|
|
inte är vana vid denna miljö så måste de utbildas, men |
| 44 |
|
|
genom att tänka sig för då man skapar en gemensam |
| 45 |
|
|
utvecklingsmiljö så kan utbildningstiden minskas till |
| 46 |
|
|
ett minimum, eller till och med undvikas. |
| 47 |
|
|
|
| 48 |
|
|
Det som skall eftersträvas i en gemensam |
| 49 |
|
|
utvecklingsmiljö är dels att få den lättförståelig |
| 50 |
|
|
(eller självförklarande), men att den för detta inte på |
| 51 |
|
|
något sätt skall vara på en nivå för nybörjare, utan ha |
| 52 |
|
|
all den styrka som utvecklarna behöver då de utvecklar |
| 53 |
|
|
programvara. Kan den gemensamma utvecklingsmiljön |
| 54 |
|
|
introduceras som något som kan underlätta arbetet så |
| 55 |
|
|
kommer användarna att med glädje byta, även om det kan |
| 56 |
|
|
innebära vissa initiala problem. |
| 57 |
|
|
|
| 58 |
|
|
\subsection{Användandet av script vid mjukvaruproduktion} |
| 59 |
|
|
|
| 60 |
|
|
Detta kan lätt tyckas att detta inte har med MDI att |
| 61 |
|
|
göra, men vi kommer att förklara detta lite senare. |
| 62 |
|
|
Tanken med att använda diverse script är främst att |
| 63 |
|
|
abstrahera krångliga kommandon (eller om man vill långa) |
| 64 |
|
|
från användaren, och istället bara använda ett kort |
| 65 |
|
|
kommando. Detta innebär att det blir enklare att hålla |
| 66 |
|
|
ordning på det man utvecklar då det i scriptet går |
| 67 |
|
|
snabbt att skriva ner de kommandon som ser till att |
| 68 |
jontas |
1.5 |
källfilerna ligger i en katalog, de kompilerade |
| 69 |
jontas |
1.1 |
programmet i en, och hjälp filerna i en tredje (om |
| 70 |
jontas |
1.5 |
programmeringsspråket stödjer detta (t.ex. java API).\\ |
| 71 |
jontas |
1.1 |
|
| 72 |
|
|
%Eller är det svaret vi skall skjuta in? |
| 73 |
|
|
Men hur är detta något som är intressant ur en MDI |
| 74 |
|
|
synpunkt?\\ |
| 75 |
|
|
Jo, tanken var ju att ta alla dom krångliga kommandona, |
| 76 |
|
|
och helt enkelt byta ut mot ett kort script. Krasst sett |
| 77 |
|
|
är detta grunden för MDI. Att ta något krångligt |
| 78 |
|
|
kommando, och byta ut mot ett lättare. |
| 79 |
|
|
|
| 80 |
|
|
\subsection{GUI design mönster} |
| 81 |
|
|
|
| 82 |
|
|
GUI står för Graphical User Interface, eller grafiskt |
| 83 |
|
|
användar gränsnitt på svenska. Ett GUI kan se ut på |
| 84 |
|
|
ett (nästan) oändligt antal sätt, men alla dessa följer |
| 85 |
|
|
ett eller flera mönster för hur man använder dessa. Då |
| 86 |
|
|
dessa mönster upprepas så är det viktigt för oss som |
| 87 |
|
|
utvecklare att vi känner till de mönster som finns, vad |
| 88 |
|
|
de går ut på, samt vad som är viktigt att tänka på. En |
| 89 |
|
|
anledning till att detta var viktigt att lära oss är |
| 90 |
|
|
genom att vi lär oss detta kan vi spara tid när vi skall |
| 91 |
|
|
utveckla en programvara som skall interagera med en |
| 92 |
|
|
människa (vilket det stora flertalet program gör), genom |
| 93 |
|
|
att vi inte ska behöva uppfinna hjulet igen. |
| 94 |
|
|
|
| 95 |
|
|
Vi hade en laboration där vi skulle identifiera design |
| 96 |
|
|
mönster i en färdig programvara från SUN Microsystems, |
| 97 |
|
|
och efter detta även i en programvara vi själva har |
| 98 |
|
|
gjort. Detta innebar att vi var tvungna att lära oss |
| 99 |
|
|
känna igen de olika mönster som är vanligt förekommande, |
| 100 |
|
|
och på detta sättet så kom vi även att fundera på när de |
| 101 |
|
|
olika mönstren är praktiska, och när dom inte är det. Vi |
| 102 |
|
|
har genom denna laboration kommit fram till att design |
| 103 |
|
|
mönster är något viktigt i utveckling av programvara, |
| 104 |
|
|
och är något vi kommer att ta med oss till framtiden. |
| 105 |
|
|
|
| 106 |
|
|
\subsection{Prototyper och Mock-ups} |
| 107 |
|
|
|
| 108 |
|
|
En mock-up är en form av prototyp. Den görs i ett |
| 109 |
|
|
passande material, och beroende på vilken information |
| 110 |
|
|
man har om den färdiga produkten så görs den med den |
| 111 |
|
|
detaljnivå som är passande. Denna mock-up används sedan |
| 112 |
|
|
för att testa om konceptet man har håller, och hur det |
| 113 |
|
|
skall implementeras. En mock-up behöver inte vara för en |
| 114 |
|
|
programvara, utan kan lika gärna vara för en fysisk |
| 115 |
|
|
produkt, men i kursen har vi inriktat oss på programvara |
| 116 |
|
|
då detta är det intressanta för oss. Då man skapat en |
| 117 |
|
|
mock-up så tar man denna, och testar på en eller flera |
| 118 |
|
|
tilltänkta användare, och lyssnar på deras åsikter om |
| 119 |
|
|
den. När man har kommit förbi detta stadiet så kan man |
| 120 |
|
|
bygga en lite mera avancerad prototyp för att vidare |
| 121 |
|
|
utveckla produkten. En mock-up är vanligtvis (eller |
| 122 |
jontas |
1.5 |
i alla fall dom vi har gjort) ''dynamiskt statiska`` |
| 123 |
jontas |
1.1 |
vilket kan låta som en motsägelse, men vad vi menar med |
| 124 |
|
|
det är att den görs dynamisk är att det går att byta |
| 125 |
|
|
detaljer i mock-upen för att symbolisera interaktion. En |
| 126 |
|
|
annan fördel med en mock-up framför en fungerade |
| 127 |
|
|
prototyp är att en mock-up är gjord av ett billigt |
| 128 |
|
|
material, och går snabbt att göra och göra om då man inser att |
| 129 |
|
|
lösningen man har inte håller, utan behöver göras om för |
| 130 |
|
|
att passa användaren och hans behov. |
| 131 |
|
|
|
| 132 |
|
|
Vi tror att vi kommer att använda någon form av |
| 133 |
|
|
mock-uper efter denna kursen då en mock-up är ett snabbt |
| 134 |
|
|
sätt att visa hur man menar att GUI't skall se ut, och |
| 135 |
|
|
om man har ett förslag till ett GUI så är det enkelt att |
| 136 |
|
|
hitta funktionalitet som man har missat, och det kan |
| 137 |
|
|
även vara enklare att förklara vad man vill göra för en |
| 138 |
|
|
kund som inte kunskaper inom programvaruutveckling vad |
| 139 |
|
|
det är som man skall göra, och vad han får och inte får. |
| 140 |
|
|
Han kan även ta mock-upen och visa för slutanvändarna, |
| 141 |
|
|
och dessa kan också komma till tals om hur produkten |
| 142 |
|
|
skall se ut, och dess funktionalitet. |
| 143 |
|
|
|
| 144 |
|
|
\section {Designmönster} |
| 145 |
|
|
|
| 146 |
|
|
När man designar GUI'n så är det nästan omöjligt att |
| 147 |
|
|
inte använda något/några design mönster. Dom flesta sätt |
| 148 |
|
|
att strukturera upp ett GUI följer de mönster som finns |
| 149 |
|
|
definierade. Detta märkte vi av på första laborationen |
| 150 |
|
|
när vi skulle identifiera mönster som vi hade använt i |
| 151 |
|
|
ett program vi själva hade gjort långt innan vi hade |
| 152 |
|
|
hört talas om MDI, och dess betydelse. En anledning till |
| 153 |
|
|
att man använder design mönster är att om flera program |
| 154 |
|
|
ser ut likadant, och uppför sig likadant så kommer |
| 155 |
|
|
användaren att känna sig hemma i det, även om han aldrig |
| 156 |
|
|
har sett programmet tidigare, eller ens ett program som |
| 157 |
|
|
liknar detta (till funktionalitet sett). |
| 158 |
|
|
|
| 159 |
jontas |
1.5 |
\emph{Ett väl-designat GUI låter användaren göra fel} |
| 160 |
jontas |
1.1 |
(Grand, M. 1999)\\ |
| 161 |
|
|
Detta är viktigt därför att om det inte går att göra fel, |
| 162 |
|
|
eller viktigare att återhämta sig från ett fel utan en |
| 163 |
|
|
förlust, då kommer användaren att ta det lugnt och |
| 164 |
|
|
försiktigt, men trots detta kommer användaren att göra |
| 165 |
|
|
många fel (eller snarare så är det så det upplevs då alla fel gör |
| 166 |
|
|
skada). Men om GUI't låter användaren återhämta sig om han |
| 167 |
|
|
gör fel så kommer han att jobba i ett bättre tempo, och |
| 168 |
|
|
göra färre fel. Något som är väldigt viktigt om GUI't |
| 169 |
|
|
tillåter att man gör fel så måste det varna om det finns |
| 170 |
|
|
aktioner som man kan göra som det inte går att återhämta |
| 171 |
|
|
sig ifrån. |
| 172 |
|
|
|
| 173 |
|
|
\subsection{Vikten av att känna igen sig i ett program} |
| 174 |
|
|
|
| 175 |
|
|
En viktig sak med att få användaren att känna igen sig |
| 176 |
jontas |
1.5 |
är att detta ger en ''säkerhets känsla`` i programmet, |
| 177 |
jontas |
1.1 |
användaren känner att han vet (i viss mån) hur han skall |
| 178 |
|
|
bära sig åt för att göra olika saker. Nästan alla |
| 179 |
|
|
program där man kan spara sitt arbete, öppna en fil med |
| 180 |
jontas |
1.5 |
gammalt arbete osv har detta i en meny märk ''Arkiv`` på |
| 181 |
jontas |
1.1 |
svenska, kommandon som kopiera, klistra in, gör om osv. |
| 182 |
jontas |
1.5 |
ligger under en meny ''redigera´´. Detta gör att en |
| 183 |
jontas |
1.1 |
användare kan känna igen sig även om han aldrig har |
| 184 |
|
|
nyttjat programmet tidigare. |
| 185 |
|
|
|
| 186 |
|
|
\section{Interaktions Design} |
| 187 |
|
|
|
| 188 |
|
|
När man pratar om interaktions design så menar man att |
| 189 |
|
|
man sätter användaren och hans behov i fokus, och att man |
| 190 |
|
|
inte så mycket bryr sig om tekniken bakom. |
| 191 |
|
|
|
| 192 |
|
|
Detta innebär dock att för att kunna designa något så |
| 193 |
jontas |
1.5 |
måste vi känna målgruppen och dess behov. Att jobba med |
| 194 |
jontas |
1.1 |
interaktions design är väldigt snarlikt till att jobba med |
| 195 |
|
|
en användarcentrerad lösning. Det går antingen att jobba |
| 196 |
|
|
med interaktions design om man har en färdig målgrupp som |
| 197 |
|
|
har ett behov av programvaran, eller att man tänker sig en |
| 198 |
|
|
målgrupp, och skapar produkten därefter. |
| 199 |
|
|
|
| 200 |
|
|
Om man har en färdig målgrupp som har behov av en produkt |
| 201 |
jontas |
1.5 |
så är det ''enkelt`` att skapa denna då man hela tiden kan |
| 202 |
jontas |
1.1 |
rådfråga målgruppen, skapa mock-uper, prototyper osv, och |
| 203 |
jontas |
1.5 |
få direkt feedback på det man har gjort. |
| 204 |
jontas |
1.1 |
|
| 205 |
|
|
En annan sak som är viktig, mycket viktig med Interaktions |
| 206 |
|
|
design är att den sker iterativt. |
| 207 |
|
|
|
| 208 |
jontas |
1.2 |
\section{Konceptuella modeller} |
| 209 |
jontas |
1.1 |
|
| 210 |
jontas |
1.5 |
\emph{Det viktigaste är att designa användarens |
| 211 |
jontas |
1.2 |
konceptuella modell. Allt annat skall ses som |
| 212 |
|
|
underordnat för att göra modellen klar, tydlig och |
| 213 |
|
|
konkret. Detta är nästan tvärt emot hur den mesta |
| 214 |
jontas |
1.5 |
mjukvaran utvecklas.}(Liddle, David. 1996)\\ |
| 215 |
jontas |
1.2 |
Preece, Rogers and Sharp 2002 definierar en konceptuell |
| 216 |
jontas |
1.5 |
modell som \emph{en beskrivning av det föreslagna |
| 217 |
jontas |
1.2 |
systemet i termer av integrerade idéer och koncept om |
| 218 |
|
|
vad det skall göra, bete sig samt se ut som, som skall |
| 219 |
jontas |
1.5 |
förstås av användaren på rätt sätt}\\ |
| 220 |
jontas |
1.1 |
|
| 221 |
jontas |
1.2 |
När man skapar en konceptuell modell så är det viktigt |
| 222 |
|
|
att man funderar över hur den slutliga produkten skall |
| 223 |
|
|
se ut, baserat på användarnas behov och krav. För att |
| 224 |
|
|
försäkra sig om att användaren kommer att förstå |
| 225 |
|
|
modellen så som den är tänkt är det viktigt att |
| 226 |
|
|
genomföra noggranna och iterativa tester. |
| 227 |
jontas |
1.1 |
|
| 228 |
jontas |
1.2 |
En viktig del av den konceptuella modellen är att |
| 229 |
|
|
besluta vad användaren skall göra när han använder |
| 230 |
|
|
produkten. Detta kan även kallas interaktions sätt |
| 231 |
|
|
dvs hur en användare skall få utföra jobbet. När man |
| 232 |
|
|
väljer interaktions sätt så får man även tänka över hur |
| 233 |
|
|
man skall interagera med produkten (programvaran), skall |
| 234 |
|
|
det vara med knappar, menyer, röstkommandon osv. |
| 235 |
|
|
|
| 236 |
|
|
När man har kommit så här långt med sin modell så är det |
| 237 |
|
|
dags att börja fundera över hur GUI't skall se ut, olika |
| 238 |
|
|
mönster, dess fördelar och nackdelar osv. Ju fler man |
| 239 |
|
|
provar med, och funderar över, ju större är chansen att |
| 240 |
jontas |
1.5 |
produkten blir bra, och det är viktigt att man jobbar |
| 241 |
|
|
iterativt, och att man använder lite olika metoder, och |
| 242 |
jontas |
1.2 |
data (gärna även utvecklare om det går) i dom olika |
| 243 |
|
|
iterationerna för att täcka in så mycket som möjligt. |
| 244 |
|
|
|
| 245 |
|
|
Basen i att konstruera en bra konceptuell modell är |
| 246 |
|
|
användaren, och det användaren skall kunna göra. |
| 247 |
|
|
|
| 248 |
|
|
Det finns ett otal olika konceptuella modeller, men vi |
| 249 |
|
|
kommer bara att ta upp dom två vanligaste. |
| 250 |
|
|
|
| 251 |
|
|
\subsection{Konceptuella modeller baserat på |
| 252 |
|
|
aktiviteter} |
| 253 |
|
|
|
| 254 |
|
|
De fyra vanligaste aktiviteterna användarna kommer att |
| 255 |
|
|
göra (sett ur MDI synpunkt) är: |
| 256 |
|
|
\begin{itemize} |
| 257 |
|
|
\item Instruera |
| 258 |
|
|
\item Konversera |
| 259 |
|
|
\item Manipulera och navigera |
| 260 |
|
|
\item Utforska och surfa %är surfa en bra översättning av browsing? |
| 261 |
|
|
\end{itemize} |
| 262 |
|
|
När man instruerar så förklarar man vad man vill att |
| 263 |
|
|
systemet skall göra, man ger order. Detta kan ske t.ex. |
| 264 |
|
|
med knappar, menyer osv.\\ |
| 265 |
|
|
När man konverserar så gör man det som man gör med en |
| 266 |
|
|
människa, antingen talar man till systemet med rösten, |
| 267 |
|
|
eller så skriver man, men man håller sig till ett |
| 268 |
|
|
normalt språk.\\ |
| 269 |
|
|
När man manipulerar och navigerar så har man en |
| 270 |
|
|
representation (av något) som man kan manipulera för att |
| 271 |
|
|
uppnå önskat resultat. Det är en klar fördel om |
| 272 |
|
|
representationen delar vissa egenskaper som användaren |
| 273 |
|
|
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 |
| 274 |
|
|
När man utforskar och surfar så är systemet utformat på |
| 275 |
|
|
ett sådant vis att användaren kan få information utan |
| 276 |
|
|
att behöva formulera frågor. |
| 277 |
|
|
|
| 278 |
|
|
Det är viktigt att förstå att man måste inte välja en av |
| 279 |
|
|
dessa, utan man kan välja flera om man känner för det, |
| 280 |
|
|
ofta kan man få ett resultat som blir närmare det |
| 281 |
|
|
användaren efterfrågar om man väljer att blanda flera |
| 282 |
|
|
aktiviteter. |
| 283 |
|
|
|
| 284 |
|
|
\subsubsection{Instruera} |
| 285 |
|
|
|
| 286 |
|
|
a |
| 287 |
|
|
|
| 288 |
|
|
\subsubsection{Konversera} |
| 289 |
|
|
|
| 290 |
|
|
a |
| 291 |
|
|
|
| 292 |
|
|
\subsubsection{Manipulera och navigera} |
| 293 |
|
|
|
| 294 |
|
|
a |
| 295 |
|
|
|
| 296 |
|
|
\subsubsection{Utforska och surfa} |
| 297 |
|
|
|
| 298 |
|
|
a |
| 299 |
|
|
|
| 300 |
|
|
\subsection{Konceptuella modeller baserat på objekt} |
| 301 |
|
|
|
| 302 |
jontas |
1.5 |
När man utgår från ett objekt så tar man ett objekt som |
| 303 |
|
|
användaren kan relatera till, en bok, kaffe bryggare |
| 304 |
|
|
eller dyl. Och sedan så gör man sin modell så att den |
| 305 |
|
|
liknar det fysiska objektet. Det bör även gå att |
| 306 |
|
|
manipulera objektet på ett vis som liknar det fysiska |
| 307 |
|
|
objektet. Men man bör även tänka på vilka funktioner en |
| 308 |
|
|
användare kan tänkas önska utöver dom som finns i det |
| 309 |
|
|
verkliga objektet. Om man gör en ordebehandlare kan det |
| 310 |
|
|
vara väldigt trevligt om denna klarar av att t.ex. |
| 311 |
|
|
kompilera texten, rättstavning osv. |
| 312 |
|
|
|
| 313 |
|
|
\subsection{Interface metaforer} |
| 314 |
|
|
|
| 315 |
|
|
Denna metod går ut på att man tar och försöker efterlikna |
| 316 |
|
|
en välkänd metod, eller något som användaren känner igen |
| 317 |
|
|
för att manipulera systemet. Det handlar oftast om att man |
| 318 |
|
|
försöker abstrahera bort hur datorn gör, och istället |
| 319 |
|
|
likna det vi något som man känner igen. Dock så är boken |
| 320 |
|
|
vi har väldigt kritisk mot denna metoden att utveckla |
| 321 |
|
|
produkter, så vi tänker inte gå in på denna så djupt. Dock så |
| 322 |
|
|
tror vi att det borde vara en bra metod att iallafall |
| 323 |
|
|
fundera på, men man måste nog vara försiktig så att man |
| 324 |
|
|
inte gör ''hål`` i designen då man använder metaforer. |
| 325 |
|
|
|
| 326 |
|
|
\section{Värdet av MDI} |
| 327 |
|
|
|
| 328 |
|
|
Det kanske kan verka abstrakt, och som något som bara tar |
| 329 |
|
|
tid att hålla på med MDI, och allt man kan göra inom detta |
| 330 |
|
|
(mock-ups osv), men faktum är att den tid (och de pengar) |
| 331 |
|
|
man lägger ner på MDI tjänar man igen ganska så fort. |
| 332 |
|
|
Dessutom så är det med hjälp av en mock-up lätt att tidigt |
| 333 |
|
|
fånga design fel, eller till och med logik fel, och ju |
| 334 |
|
|
tidigare man kan hitta fel, desto billigare blir dom att |
| 335 |
|
|
avhjälpa. |
| 336 |
|
|
|
| 337 |
|
|
En annan viktig sak att tänka på med MDI är att man kan på |
| 338 |
|
|
ett sätt använda det som en reklam tavla för sitt företag, |
| 339 |
|
|
om man gör en extraordinär lösning på något så kommer |
| 340 |
|
|
detta att sprida sig, men det kommer ännu mer att sprida |
| 341 |
|
|
sig om man gör dåliga MDI lösningar. Ett företag som |
| 342 |
|
|
tidigare har köpt en produkt som kanske är bra, bara det |
| 343 |
|
|
att de inte kan nyttja den kommer inte att köpa en produkt |
| 344 |
|
|
till av samma företag som den förra. |
| 345 |
jontas |
1.1 |
|
| 346 |
|
|
|
| 347 |
|
|
\end{document} |