4. EMPIRI
4.3 ZITE
5.2.5 Typografi
Då både teori och granskningen av iPad-appar pekar på att typografin på iPad är mer lik en bok, ska prototypens typografi främst baseras på de regler som gäller för tryckta medier. Läsaren ska ha möjlighet att ändra textstorlek
Figur 10: Fliken i prototypen.
och byta mellan om texten ska visas med en antikva eller en linjär, då t.ex. yngre och äldre läsare har olika preferenser på vilken typ de föredrar (Heine, 2005). Vid standardstorlek ska textraderna vara ca 55-65 tecken långa efter- som det anses som optimal längd (Hellmark, 2006). Som standard är bröd- texten satt med typsnittet Georgia då antikvor är vanligast både i tryck och i de iPad-appar som granskats. Samtidigt är Georgia anpassat för skärm. Radavståndet är något större än normalt för att förbättra läsbarheten.
5.2.6 Prototypen
Prototypen är baserad på hur NKPG Magazine kan se ut om tidskriften an- passas till surfplattor. Då prototypen är skapad med HTML och CSS och inte programmerad specifikt för iPad är det en del funktioner och gester som inte varit möjliga att använda i prototypen. För att uppnå en funktionalitet som liknar en riktig iPad-app används knappar och länkar istället för svep- gester, t.ex. måste läsaren knacka på omslaget för gå vidare i prototypen. I en riktig iPad-app hade användaren istället svept med fingret för att gå vidare eftersom det kan anses vara standard vid iPad-användning.
Prototypen är begränsad till att bara fungera i vertikalt läge. Det hade tagit längre tid än vad som fanns tillgängligt att anpassa prototypen även för ho- risontell visning.
En annan begränsad funktion i prototypen är bildvisningen i helskärm. Om läsaren knackar på en bild i prototypen så länkar denna till en ny sida där
Figur 11: Exempel på en artikel i prototypen.
knappar. I en riktig iPad-app ska bilder öppnas i helskärm direkt ovanpå ar- tikeln eller uppslaget utan läsaren behöver gå till ny sida. Läsaren bläddrar sedan med hjälp av svepgester.
5.3 Sammanfattning av prototyptester
Uppg. 1 - Titta på alla stora bilder tillhörande Intervjun med Peter Hunt. Alla testpersoner utförde uppgiften utan större problem. Vissa gick direkt från omslaget till artikeln medan andra gick via uppslaget vidare till artikeln. Några knackade på en bild i artikeln för att öppna bildvisningen medan an- dra använde bilder-knappen. Det var ingen som hade problem med att hitta bildvisningen.
Uppg. 2 - Läs artikeln om The Lincoln Lawyer.
Alla testpersoner hittade artikeln via innehållssidan. Testperson 3 provade att trycka på tillbaka-knappen i intervjun med Peter Hunt först men hittade sedan innehålls-knappen.
Uppg. 3 - Titta på trailern till The Lincoln Lawyer.
Samtliga testpersoner hittade trailern medan de utförde uppgift 2 och hade därför inga problem med att utföra uppgiften.
Uppg. 4 - Dela artikeln om Nicki Pedersen till Twitter.
Testpersonerna hittade artikeln via innehållssidan. Därefter var det flera som hade problem med att hitta menyn till vänster. Det var inte tydligt vad pilen hade för funktion. När menyn väl hittats var det ingen som hade problem med att lokalisera Twitter-knappen. Dock ansåg testperson 4 att knappen var något liten och det fanns risk att råka knacka på de närliggande knapparna.
Svar på frågorna
Hur upplevde du prototypens upplägg?
Samtliga testpersoner ansåg att upplägget var bra och lättöverskådligt. Ett problem som flera hade var att menyn till vänster inte var tillräckligt tydlig. Vad tycker du om den inledande innehållsöversikten?
Alla uppfattade innehållsöversikten som tydlig och lättnavigerad. Testperson 4 tyckte att det varit bra med lite mer information om artiklarna.
Vad var dina intryck när du läste en artikel? Hur var den att läsa? Textstorlek, radavstånd?
De flesta tyckte att artikeln var lättläst. Dock var ingressen för luftig och ra- derna något för långa. Testperson 4 ansåg även att teckenstorleken var något för liten och att det var för hög kontrast mellan texten och bakgrunden. Han tyckte dessutom att det var bra med insprängda bilder i texten för att bryta av. Vad tycker du om det sätt bilder och filmklipp visades?
Alla testpersoner tyckte att det var bra att kunna se bilderna i helskärm och även bra med filmklipp. Testperson 3 ansåg att det skulle vara bra med en in- dikator längst ner på sidan som visar hur många bilder som finns och vilken bild läsaren befinner sig vid.
Vad tycker du om interaktionen med sociala medier?
Samtliga ansåg det bra med möjlighet att dela med sig av artiklar då det är “helt rätt i tiden” som Testperson 1 utryckte sig.
Är det något du tycker kan förbättras? Saknar du något?
Testperson 4 ville ha menyn och knapparna på samma ställe hela tiden och föreslog en list för knapparna högst upp. Han ville även kunna bläddra direkt mellan artiklarna. Testperson 1 ansåg att bildvisningen borde göras smidi- gare och kompletteras med bildtext. Testperson 2 ville kunna bläddra mellan alla bilder, även de små. Testperson 3 tyckte att det var krångligt att ta sig tillbaka till omslaget.
Är det något du tycker är speciellt bra?
Innehållsöversikten och navigationen var det som samtliga tyckte var extra bra.
Jämför med tryckt tidskrift
Här får du den vanliga NKPG Magazine, vad upptäcker du för skillnader, bra och dåliga? Vad tycker du om upplägget av prototypen jämfört med en traditio- nell tidskrift? Sämre, bättre, samma upplevelse?
Flera av testpersonerna ansåg att prototypen hade ett renare utseende och det var lättare att hitta i innehållet. Testperson 1 upplevde att prototypen var mer lättläst än den tryckta versionen. Han saknade dock pyssel som t.ex sudoku, korsord och quiz. Flera av testpersonerna vill ha fler bilder och färg i prototypen då det är en stor del av den tryckta versionen. Testperson 2 vill också ha mer grafik till prototypen. Testperson 4 tyckte att de insprängda citat som återfinns i den tryckta versionen även borde införlivas i prototypen. Testperson 3 ansåg att det fanns en risk att missa någon artikel när läsaren klickar runt i en digital version istället för att bläddra i en tryckt tidskrift som denne är van vid. Det är mer naturligt att bläddra och skumma artiklar i den tryckta versionen.
6. SLUTSATSER
I det här avsnittet presenteras de slutsatser som dragit utifrån teori och emperiavsnitten.
6.1 Frågeställning 1
Vilka aspekter påverkar designbesluten när en tidskrift ska anpassas digitalt för surfplattor?
Efter den teorigenomgång och granskning som utförts har det framkommit att det är viktigt att våga lämna det traditionella tidskriftsformatet när en tidskrift anpassas till iPad. Detta eftersom det inte gör sig bra på en digital plattform. iPad-användare förväntar sig funktioner och upplägg från webbsi- dor när de använder iPad. Dock ska ändå känslan av en tidskrift finnas kvar. Det är en svår balansgång mellan det traditionella och det nya. För att det ska vara så lätt som möjligt för läsaren att hitta i tidskriften är det viktigt att ha en tydlig och enkel navigation.
Det är viktigt med interaktion mellan läsaren och den digitala tidskriften. Läsaren förväntar sig digital extras som komplement till artiklarna för att få ett mervärde gentemot den tryckta tidskriften. Ytterligare en aspekt som ger mervärde är möjligheten att kunna dela med sig via sociala medier och e-post. En dåligt typograferad digital tidskrift kan förstöra hela upplevelsen för läsa- ren. Därför är det mycket viktigt att anpassa typografin till iPad för att göra tidskriften så lättläst som möjligt. Möjligheten att för läsaren själv kunna justera teckenstorlek och typsnitt gör att tidskriften kan fungera för en större målgrupp.
6.2 Frågeställning 2
Vilka designbeslut är enligt applicerbar teori relevanta för layout, typografi och innehållsöversikt? Hur kan de påverka läsupplevelsen hos en tidskrift på surfplattor?
6.2.1 Layout och funktion
Utifrån de prototyptester som utförts har det framkommit flera positiva as- pekter. Framför allt var det innehållsöversikten och navigationen som upp- skattades av testpersonerna. De ansåg alla att det var lätt att hitta artiklar och
det rena uttrycket hos prototypen underlättade för översikten. Från detta dras slutsatsen att den innehållsöversikt som tagits fram i konceptet är ett bra upplägg för en digital tidskrift.
Ett genomgående problem hos prototypen var den vänstra menyn. Den pil som indikerade att det fanns en meny visade inte tillräckligt tydligt vad den hade för funktion. Det måste göras tydligare i en framtida version. En slut- sats som kan dras är att en meny som samlar funktioner som inte får plats på andra ställen fungerar bra, men att den måste vara tydlig och lätt att hitta.
6.2.2 Text och typografi
Överlag var artiklarna lättlästa, dock kan de förbättras med kortare rader och bättre justerat radavstånd. Främst bör ingressens radavstånd justeras. I en riktig iPad-app kommer det finnas möjlighet för användaren att själv jus- tera teckenstorlek och typsnitt. Utifrån prototyptesterna kan slutsatsen dras att typografiska riktlinjer för tryckta medier fungerar bra för iPad, dock med nämnda modifikationer.
6.2.3 Digital extras och integration med sociala medier
Funktionen att kunna titta på både bilder och filmklipp i helskärm var upp- skattad under testerna, även om bildvisningen kan förbättras och utökas med smidigare bläddringsfunktion och kompletterande bildtext. Testerna indike- rade att alla bilder borde vara möjliga att förstora. I prototypen begränsa- des bildvisningsfunktionen p.g.a. HTML men i en riktig iPad-app kommer svepningar vara möjliga. Utifrån detta dras slutsatsen att bildvisningen ska vara enkel och lätt att bläddra i. Alla bilder ska dessutom gå att förstora och de ska även ha tillhörande bildtext.
Sociala medier är en viktig del av digitala tidskrifter och därför ska det vara smidigt att dela med sig av en artikel. Lösningen som skapats fungerar bra om menyn görs tydligare.
7. DISKUSSION
Redan tidigt i arbetet bestämde vi för att komplettera vårt koncept med en prototyp. Vi ville ha möjligheten att forma prototypen fritt utifrån vårt kon- cept utan begränsningar hos en vald publiceringsmetod. Tanken med kon- ceptet har hela tiden varit att det ska bli en fristående iPad-app. Då ingen av oss två kan programmera för iOS bestämde vi oss för att göra prototypen med HTML och CSS. Eftersom vi sedan tidigare är bekanta med webbde- sign visste vi att kan skapa konceptets huvudsakliga funktioner i prototypen. Samtidigt var vi medvetna om att en prototyp skapad med HTML och CSS inte kan motsvara funktionen och utseendet hos en riktig iPad- app, men då vi tidigare under utbildningen lärt oss att en prototyp drar fördel av att inte se färdig ut ansåg vi att det skulle ge ett acceptabelt resultat. Testpersoner kan, om en prototyp ser fulländad ut, ställa för höga krav på den. För höga krav kan göra att testpersonerna fokuserar på funktionalitet som inte mot- svarar en färdig produkt istället för på de funktioner som testas.
Tanken med den här undersökningen var från början att ta fram allmän- giltiga resultat som kunde tänkas fungera oavsett typ av surfplatta samt appliceras på valfri tidskrift. Tyvärr hade vi varken tid eller resurser för att införskaffa belägg för detta. Därför begränsades resultaten till att huvudsak- ligen gälla iPad och NKPG Magazine. Däremot tror vi fortfarande att våra resultat utan större modifikationer går att applicera både på andra tidskrifter och surfplattor från andra tillverkare än Apple.
För att sätta verkliga krav och ramar för vårt koncept ville vi få ett samarbete med en tidskrift som vi kunde använda som mall. Tyvärr var det svårt att hitta en tidskrift som hade tid att samarbeta. Många av de som vi kontaktade trodde att vi var ute efter ett större samarbete och tackade därför nej, när vi egentligen endast behövde deras tillstånd och tillgång till material. Genom att vara tydligare i vår kommunikation med de olika tidskrifter vi kontaktat kunde dessa missuppfattningar antagligen undvikits.
Om det funnits tid hade det varit intressant att utöka vårt prototyptest med fler testpersoner. En intressant möjlighet hade varit att ta med ett par testper- soner utanför vår direkta testurvalsgrupp och genom det få ny och intressant feedback.
7.1 Vidare undersökningar
Två av de stora begränsningarna i den här undersökningen har varit tid och resurser vilket ledde till att vi begränsat skapandet av prototypen och proto- typtestets omfattning. En möjlig intressant fortsättning på detta arbete vore att verkliggöra vårt koncept och låta det gå igenom en mer utförlig design- och utvecklingsprocess med flera stadier av prototyper på vägen till en fullt fungerande iPad-app.
Det vore även fördelaktigt att testa prototyperna på en större testgrupp och på så sätt kunna få med en större målgrupp. Beroende på om man utvecklar en tidskrifts-app som ska passa flera tidskrifter eller för en specifik vore det fördelaktigt att välja ut testpersoner från passande målgrupp.
8. KÄLLOR
Alphonso Labs Inc. (2011). Pulse News iPad-app. [Elektronisk] <http://itunes.apple.com/us/app/pulse-news-reader/id371088673> (2011-06-13)
Apple. (2011a). iPad - From the App Store. [Elektronisk]
<http://www.apple.com/se/ipad/from-the-app-store/> (2011-04-07) Apple. (2011b). iTunes - Vad finns. [Elektronisk]
<http://www.apple.com/se/itunes/whats-on/> (2011-04-07)
Apple. (2011c.) iBooks - Köp och läs böcker som aldrig förr. [Elektronisk] <http://www.apple.com/se/ipad/built-in-apps/ibooks.html> (2011-04-07) Apple. (2011d). iPad - Teknisk information om iPad. [Elektronisk]
<http://www.apple.com/se/ipad/specs/> (2011-04-07) Apple. (2011e). iPad - iOS 4. [Elektronisk]
<http://www.apple.com/se/iphone/ios4/> (2011-06-01)
Bergström, B. (2007). Effektiv Visuell Kommunikation. Stockholm: Carlsson Bokförlag.
Black, K. (2010). Magazines and the Tablet Interface. [PDF] <http://digitalcommons.calpoly.edu/cgi/viewcontent. cgi?article=1041&context=grcsp> (2011-04-04)
Bryman, A. (2011). Samhällsvetenskapliga metoder. Malmö: Liber Ekonomi. Budiu, R. & Nielsen, J. (2010). Usability of iPad Apps and Websites. [PDF] <http://www.nngroup.com/reports/mobile/ipad/> (2011-04-12)
Cellan-Jones, R. (2011). iPad 2 tablet launched by Apple’s Steve Jobs. [Elektronisk]<http://www.bbc.co.uk/news/technology-12620077> (2011-03-31)
DevHD. (2011). Feedly iPad-app. [Elektronisk]
<http://itunes.apple.com/us/app/feedly/id396069556?mt=8> (2011-06-13) Flipboard, Inc. (2011). Flipboard iPad-app. [Elektronisk]
<http://ax.itunes.apple.com/us/app/flipboard/id358801284?mt=8> (2011-06-13)
Gordon, J. (2010). Interactive digital magazines. [PDF]
<http://www.smartermediasales.com/digitalmagazines.html> (2011-04-08)
Heine, A. (2005). Arne Heines bok om typografi. Askersund: Bild & Kultur. Hellmark, C. (2006). Typografisk handbok. Stockholm: Ordfront förlag. International Data Corporation. (2011). IDC’s Worldwide Quarterly Media Tablet and eReader Tracker Makes Its Debut, Projects Nearly 17 Million Media Tablets Shipped Worldwide in 2010. [Elektronisk]
<http://www.idc.com/about/viewpressrelease. jsp?containerId=prUS22660011> (2010-04-07)
Nationalencyklopedin. (2011a). Läsplatta. [Elektronisk] <http://www.ne.se/lang/läsplatta> (2011-06-17)
Nationalencyklopedin. (2011b). Surfplatta. [Elektronisk] <http://www.ne.se/lang/surfplatta> (2011-03-31)
Nationalencyklopedin. (2011c) Datormobil. [Elektronisk] <http://www.ne.se/lang/datormobil> (2011-06-01)
Nielsen. (2011) iPad and Kindle reading speeds. [Elektronisk]
<http://www.useit.com/alertbox/ipad-kindle-reading.html> (2011-06-01) NKPG Magazine. (2011) Om NKPG. [Elektronisk]
<http://www.nkpgmagazine.se/2009/index.php?option=com_content&ta sk=blogcategory&id=56&Itemid=139> (2010-05-30)
PC Hardware Help. (2011). LCD Panel Technology Explained. [Elektronisk]
<http://www.pchardwarehelp.com/guides/lcd-panel-types.php> (2011-04-07)
Ryberg, T. (2010). The future of the digital magazine: How to develop the digital magazine from a reader and advertising point of view. [PDF]
<https://www.nada.kth.se/utbildning/grukth/exjobb/rapportlistor/2010/ rapporter10/ryberg_teresa_10140.pdf> (2011-04-04)
Saffer, D. (2010). Designing for Interaction. Berkeley: New Raiders. Scientific American. (2011). How it works: Multi-touch surfaces explained. [Elektronisk] <http://www.scientificamerican.com/article.cfm?id=how-it- works-touch-surfaces-explained> (2011-04-07)
Schijns, J. & Smit, E. (2010). Custom magazines: where digital page-turn editions fail. [PDF]
<http://www.cendris.nl/fileadmin/data/document/pdf/publicaties/2010/ Custom_magazines_journal_of_international_business_econo-
mics102010.pdf> (2011-04-04)
Sörmlands Grafiska. (2011). Preview 11 iPad-app. [Elektronisk] <http://itunes.apple.com/se/app/preview-11/id430059191?mt=8> (2011-06-13)
The Onion. (2011). The Onion iPad-app. [Elektronisk]
<http://itunes.apple.com/us/app/the-onion-tablet/id427836513?mt=8> (2011-06-13)
Time, Inc. (2011). News/Business/Sports. [Elektronisk]
<http://www.timeinc.com/brands/news-businessfinance.php> (2011-04-12)
USA TODAY. (2011). USA TODAY iPad-app. [Elektronisk]
<http://itunes.apple.com/se/app/usa-today-for-ipad/id364257176?mt=8> (2011-06-13)
Zite, Inc. (2011). Zite iPad-app. [Elektronisk]
<http://itunes.apple.com/us/app/zite/id419752338?mt=8&ls=1> (2011-06-13)
BILAGA 1
Granskning av relevanta iPad-appar
Riktlinjer:
Layout och funktion 1. Text och typografi
i. Typsnitt - antikva eller linjär? ii. Radavstånd
iii. Radlängd iv. Teckengrad
v. Hur presenteras texten? vi. Förhandsvisning med ingress? 2. Envägskommunikation eller interaktion?
i. Baserad på tidskrift eller webbsida ii. Koppling till sociala medier? 3. Digital extras
i. Omfattning ii. Tillgänglighet
iii. Användning (huvudfunktion/komplement) 4. Bildvisning
i. Kan bilderna förstoras? ii. Bildspel?
5. Används standardgester?
iii. double-tap - to zoom and center on content iv. swipe - in table row view
v. flick - scrolla
vi. touch and hold - edit text 6. Navigation
i. Innehållsförteckning - interaktiv eller statisk? ii. Linjär eller ickelinjär bläddring
iii. Zoom?
iv. Knackningsbara objekt är tydliga? v. Roterbar app?
BILAGA 2
Intervjumall
Informera om att det endast är en prototyp som är gjord i html och därför har vissa begränsningar. Fokus på testet är den grafiska formgivningen, inte användargränssnittet. Informera om anonymitet, rätt att avbryta och vad in- formationen som framkommer ska användas till.
Leka runt med prototypen, tänka högt!
Det du har framför dig är en prototyp på hur en digital version av en tidskrift kan se ut, i det här fallet NKPG Magazine. Attackera den som du skulle göra med en vanlig tidskrift. Tänk gärna högt om vad du tänker, bra och dåliga!
Uppgifter:
1. Titta på alla helskärmsbilder tillhörande Intervjun med Peter Hunt. 2. Läs artikeln om The Lincoln Lawyer.
3. Titta på trailern till The Lincoln Lawyer. 4. Dela artikeln om Nicki Pedersen till Twitter.
Frågor:
• Hur upplevde du prototypens upplägg?
• Vad tycker du om den inledande innehållsöversikten?
• Vad var dina intryck när du läste en artikel? Hur var den att läsa? Textstorlek, radavstånd?
• Vad tycker du om det sätt bilder och filmklipp visades? • Vad tycker du om interaktionen med sociala medier? • Är det något du tycker kan förbättras? Saknar du något? • Är det något du tycker är speciellt bra?
Jämföra med en tryckt tidskrift
• Här får du den vanliga NKPG Magazine, vad upptäcker du för skillna- der, bra och dåliga?
• Vad tycker du om upplägget av prototypen jämfört med en traditionell tidskrift?
BILAGA 3
Prototyptester
Testperson 1, man, 23 år
Uppg. 1 - Titta på alla stora bilder tillhörande Intervjun med Peter Hunt. Testpersonen gick direkt vidare från omslaget till Peter Hunt artikeln och hittade även bildvisningen direkt.
Uppg. 2 - Läs artikeln om The Lincoln Lawyer.
Testpersonen gick till Innehåll och sedan till artikeln The Lincoln lawyer. Det var inga problem med läsningen.
Uppg. 3 - Titta på trailern till The Lincoln Lawyer. Personen hittade omedelbart trailern.
Uppg. 4 - Dela artikeln om Nicki Pedersen till Twitter.
Testpersonen gick till innehåll och sedan vidare till Nicki Pedersen-artikeln. Han hittade till en början inte menyn på vänstersidan men när han sedan hittade den var det inga problem att utföra uppgiften.
Testperson 1:s svar på frågorna
Hur upplevde du prototypens upplägg?
Innehållsöversikten var bra, men menyn till vänster behöver göras tydligare. Det var inte helt självklart hur den fungerade.
Vad tycker du om den inledande innehållsöversikten? Den var bra.
Vad var dina intryck när du läste en artikel? Hur var den att läsa? Textstorlek, radavstånd?
Vad tycker du om det sätt bilder och filmklipp visades? Det var bra med interaktivt innehåll så som trailern. Vad tycker du om interaktionen med sociala medier? Det är bra och helt rätt i tiden.
Är det något du tycker kan förbättras? Saknar du något?
Bildvisningen borde göras smidigare och kompletteras med bildtext. Är det något du tycker är speciellt bra?
-
Jämför med papperstidskrift